Merge pull request #40 from zzstoatzz/feat/aesthetic-improvements

feat: comprehensive aesthetic improvements with consistent accent usage

templates/error.html

···
 
 .theme-toggle:hover {
     background: var(--bg-tertiary);
+    border-color: var(--accent);
+    box-shadow: 0 0 0 2px rgba(74, 158, 255, 0.1);
+}
+
+.theme-toggle svg {
+    stroke: var(--text-secondary);
+    transition: stroke 0.2s;
+}
+
+.theme-toggle:hover svg {
+    stroke: var(--accent);
 }
 
 .sun-icon, .moon-icon {

templates/feed.html

···
                 </a>
                 {% if let Some(p) = &profile %}
                 <button class="settings-toggle" id="settings-toggle" aria-label="Settings">
-                    <img src="https://api.iconify.design/lucide:settings.svg?color=%23888" width="20" height="20" alt="Settings">
+                    <img src="https://api.iconify.design/lucide:settings.svg" width="20" height="20" alt="Settings" class="settings-icon">
                 </button>
                 {% endif %}
                 <button class="theme-toggle" id="theme-toggle" aria-label="Toggle theme">
···
 .settings-toggle:hover {
     background: var(--bg-tertiary);
     border-color: var(--accent);
+    box-shadow: 0 0 0 2px rgba(74, 158, 255, 0.1);
 }
 
-.settings-toggle svg {
-    stroke: var(--accent);
+.settings-icon {
+    filter: invert(50%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
+    transition: filter 0.2s;
+}
+
+.settings-toggle:hover .settings-icon {
+    filter: invert(50%) sepia(100%) saturate(500%) hue-rotate(190deg) brightness(100%) contrast(100%);
 }
 
 .theme-toggle {
···
 .theme-toggle:hover {
     background: var(--bg-tertiary);
     border-color: var(--accent);
+    box-shadow: 0 0 0 2px rgba(74, 158, 255, 0.1);
 }
 
 .theme-toggle svg {

templates/login.html

···
 
 .theme-toggle:hover {
     background: var(--bg-tertiary);
+    border-color: var(--accent);
+    box-shadow: 0 0 0 2px rgba(74, 158, 255, 0.1);
+}
+
+.theme-toggle svg {
+    stroke: var(--text-secondary);
+    transition: stroke 0.2s;
+}
+
+.theme-toggle:hover svg {
+    stroke: var(--accent);
 }
 
 .sun-icon, .moon-icon {

templates/status.html

···
                 </a>
                 {% if is_owner %}
                 <button class="settings-toggle" id="settings-toggle" aria-label="Settings">
-                    <img src="https://api.iconify.design/lucide:settings.svg?color=%23888" width="20" height="20" alt="Settings">
+                    <img src="https://api.iconify.design/lucide:settings.svg" width="20" height="20" alt="Settings" class="settings-icon">
                 </button>
                 <button class="theme-toggle" id="theme-toggle" aria-label="Toggle theme">
                 <svg class="sun-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
···
                     <p class="status-meta">
                         <span class="local-time" data-timestamp="{{ current.started_at.to_rfc3339() }}" data-prefix="since"></span>
                         {% if current.expires_at.is_some() && !current.is_expired() %}
-                        • <span class="local-time" data-timestamp="{{ current.expires_at.as_ref().unwrap().to_rfc3339() }}" data-prefix="clears"></span>
+                        • <span class="expires-indicator"><span class="local-time" data-timestamp="{{ current.expires_at.as_ref().unwrap().to_rfc3339() }}" data-prefix="clears"></span></span>
                         {% endif %}
                     </p>
                 </div>
···
 .handle-link {
     color: var(--text-secondary);
     text-decoration: none;
-    transition: color 0.2s;
+    transition: all 0.3s ease;
     display: inline-block;
     max-width: 100%;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
+    position: relative;
+    padding: 0.25rem 0.5rem;
+    border-radius: var(--radius-sm);
+}
+
+.handle-link::before {
+    content: '';
+    position: absolute;
+    inset: -2px;
+    border-radius: var(--radius-sm);
+    background: linear-gradient(45deg, var(--accent), transparent);
+    opacity: 0;
+    transition: opacity 0.3s ease;
+    z-index: -1;
+    filter: blur(8px);
 }
 
 .handle-link:hover {
     color: var(--accent);
+    text-shadow: 0 0 20px rgba(74, 158, 255, 0.3);
+}
+
+.handle-link:hover::before {
+    opacity: 0.3;
 }
 
 .nav-button {
···
 #accent-color {
     width: 50px;
     height: 32px;
-    border: 1px solid var(--border-color);
+    border: 2px solid var(--border-color);
     border-radius: var(--radius-sm);
     cursor: pointer;
+    transition: border-color 0.2s, box-shadow 0.2s;
+}
+
+#accent-color:hover {
+    border-color: var(--accent);
+}
+
+#accent-color:focus {
+    outline: none;
+    border-color: var(--accent);
+    box-shadow: 0 0 0 3px rgba(74, 158, 255, 0.1);
 }
 
 .preset-colors {
···
 .color-preset:hover {
     transform: scale(1.2);
     border-color: var(--text-primary);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+}
+
+.color-preset.active {
+    border-color: var(--accent);
+    box-shadow: 0 0 0 3px rgba(74, 158, 255, 0.2);
 }
 
 /* Settings toggle button */
···
 .settings-toggle:hover {
     background: var(--bg-tertiary);
     border-color: var(--accent);
+    box-shadow: 0 0 0 2px rgba(74, 158, 255, 0.1);
 }
 
-.settings-toggle svg {
-    stroke: var(--accent);
+.settings-icon {
+    filter: invert(50%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
+    transition: filter 0.2s;
+}
+
+.settings-toggle:hover .settings-icon {
+    filter: invert(50%) sepia(100%) saturate(500%) hue-rotate(190deg) brightness(100%) contrast(100%);
 }
 
 .theme-toggle {
···
 .theme-toggle:hover {
     background: var(--bg-tertiary);
     border-color: var(--accent);
+    box-shadow: 0 0 0 2px rgba(74, 158, 255, 0.1);
 }
 
 .theme-toggle {
···
     gap: 1rem;
 }
 
+@keyframes subtle-pulse {
+    0%, 100% {
+        transform: scale(1);
+        filter: drop-shadow(0 0 0 transparent);
+    }
+    50% {
+        transform: scale(1.02);
+        filter: drop-shadow(0 0 12px var(--accent));
+    }
+}
+
 .status-emoji {
     width: 3.5rem;
     height: 3.5rem;
···
     display: flex;
     align-items: center;
     justify-content: center;
+    position: relative;
+}
+
+.current-status .status-emoji {
+    animation: subtle-pulse 4s ease-in-out infinite;
 }
 
 .custom-emoji-display {
···
     margin: 0;
 }
 
+.expires-indicator {
+    color: var(--accent);
+    font-weight: 500;
+    position: relative;
+}
+
+.expires-indicator::before {
+    content: '⏱';
+    margin-right: 0.25rem;
+    opacity: 0.7;
+}
+
 /* Status Editor */
 .status-editor {
     margin-bottom: 1.5rem;
···
 
 .input-group:focus-within {
     border-color: var(--accent);
+    box-shadow: 0 0 0 3px rgba(74, 158, 255, 0.1);
 }
 
 .emoji-trigger {
···
 
 .clear-after-btn:hover {
     background: var(--bg-tertiary);
-    border-color: var(--text-secondary);
+    border-color: var(--accent);
+    color: var(--accent);
 }
 
 .save-btn {
···
     font-size: 0.875rem;
     font-weight: 500;
     cursor: pointer;
-    transition: background 0.2s;
+    transition: all 0.2s;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
 
 .save-btn:hover {
     background: var(--accent-hover);
+    transform: translateY(-1px);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
 }
 
 .save-btn:disabled {
···
 
 .clear-option:hover {
     background: var(--bg-tertiary);
+    color: var(--accent);
 }
 
 .clear-option.active {
···
 }
 
 .logout-link:hover {
-    color: var(--text-secondary);
+    color: var(--accent);
 }
 
 /* History */
···
             const color = accentInput.value;
             localStorage.setItem('accentColor', color);
             document.documentElement.style.setProperty('--accent', color);
+            updateActivePreset(color);
             
             // Save to API if logged in
             if (document.querySelector('.settings-toggle')) {
···
         });
     }
     
+    // Function to update active preset
+    const updateActivePreset = (currentColor) => {
+        document.querySelectorAll('.color-preset').forEach(preset => {
+            preset.classList.toggle('active', preset.dataset.color.toLowerCase() === currentColor.toLowerCase());
+        });
+    };
+
     // Color presets
     document.querySelectorAll('.color-preset').forEach(btn => {
         btn.addEventListener('click', () => {
···
                 accentInput.value = color;
             }
             
+            updateActivePreset(color);
+            
             // Save to API if logged in
             if (document.querySelector('.settings-toggle')) {
                 savePreferencesToAPI({ accent_color: color });
             }
         });
     });
+    
+    // Set initial active preset
+    updateActivePreset(savedAccent);
     
     await initSettings();
     
···
                     
                     if (emoji.startsWith('custom:')) {
                         const img = btn.querySelector('img');
-                        selectedEmoji.innerHTML = `<img src="${img.src}" alt="${img.alt}" style="width: 1.5em; height: 1.5em; vertical-align: middle;">`;
+                        selectedEmoji.innerHTML = `<img src="${img.src}" alt="${img.alt}" style="width: 100%; height: 100%; object-fit: contain;">`;
                     } else {
                         selectedEmoji.textContent = emoji;
                     }
···
                     const img = btn.querySelector('img');
                     
                     // Display the image in the selected emoji area
-                    selectedEmoji.innerHTML = `<img src="${img.src}" alt="${img.alt}" style="width: 1.5em; height: 1.5em; vertical-align: middle;">`;
+                    selectedEmoji.innerHTML = `<img src="${img.src}" alt="${img.alt}" style="width: 100%; height: 100%; object-fit: contain;">`;
                     statusInput.value = emojiValue;
                     emojiPicker.style.display = 'none';
                 });
···
                 if (btn.classList.contains('custom-emoji')) {
                     // Handle custom emoji
                     const img = btn.querySelector('img');
-                    selectedEmoji.innerHTML = `<img src="${img.src}" alt="${img.alt}" style="width: 1.5em; height: 1.5em; vertical-align: middle;">`;
+                    selectedEmoji.innerHTML = `<img src="${img.src}" alt="${img.alt}" style="width: 100%; height: 100%; object-fit: contain;">`;
                 } else {
                     // Handle regular emoji
                     selectedEmoji.textContent = emojiValue;