From 524b5e1559ca51004d34316c22f9215c917fa2b1 Mon Sep 17 00:00:00 2001
From: Gigi <dergigi@pm.me>
Date: Mon, 13 Oct 2025 23:07:53 +0200
Subject: [PATCH] refactor: migrate sidebar.css to Tailwind color palette

---
 src/styles/layout/sidebar.css | 42 +++++++++++++++++------------------
 1 file changed, 21 insertions(+), 21 deletions(-)

diff --git a/src/styles/layout/sidebar.css b/src/styles/layout/sidebar.css
index 66efc436..97f2c181 100644
--- a/src/styles/layout/sidebar.css
+++ b/src/styles/layout/sidebar.css
@@ -1,6 +1,6 @@
 /* Bookmarks and sidebar layout */
 .bookmarks-container {
-  background: #1a1a1a;
+  background: rgb(24 24 27); /* zinc-900 */
   display: flex;
   flex-direction: column;
   height: 100%;
@@ -20,7 +20,7 @@
 .bookmarks-container .view-mode-controls {
   margin-top: auto;
   padding: 1rem;
-  border-top: 1px solid #333;
+  border-top: 1px solid rgb(63 63 70); /* zinc-700 */
   background: transparent;
   border-radius: 0;
 }
@@ -41,15 +41,15 @@
   justify-content: space-between;
   gap: 0.75rem;
   padding: 0.75rem 1rem;
-  background: #1a1a1a;
-  border-bottom: 1px solid #333;
+  background: rgb(24 24 27); /* zinc-900 */
+  border-bottom: 1px solid rgb(63 63 70); /* zinc-700 */
   margin-bottom: 0;
 }
 
 /* Mobile: add borders and rounded corners */
 @media (max-width: 768px) {
   .sidebar-header-bar {
-    border: 1px solid #333;
+    border: 1px solid rgb(63 63 70); /* zinc-700 */
     border-radius: 12px 12px 0 0;
   }
 }
@@ -95,10 +95,10 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  background: #2a2a2a;
-  border: 1px solid #444;
+  background: rgb(39 39 42); /* zinc-800 */
+  border: 1px solid rgb(82 82 91); /* zinc-600 */
   flex-shrink: 0;
-  color: #ddd;
+  color: rgb(228 228 231); /* zinc-200 */
   box-sizing: border-box;
   padding: 0;
 }
@@ -108,8 +108,8 @@
 
 .sidebar-header-bar .toggle-sidebar-btn {
   background: transparent;
-  color: #ddd;
-  border: 1px solid #444;
+  color: rgb(228 228 231); /* zinc-200 */
+  border: 1px solid rgb(82 82 91); /* zinc-600 */
   padding: 0;
   border-radius: 6px;
   cursor: pointer;
@@ -123,7 +123,7 @@
   box-sizing: border-box;
 }
 
-.sidebar-header-bar .toggle-sidebar-btn:hover { background: #2a2a2a; color: #fff; }
+.sidebar-header-bar .toggle-sidebar-btn:hover { background: rgb(39 39 42); /* zinc-800 */ color: rgb(255 255 255); /* white */ }
 .sidebar-header-bar .toggle-sidebar-btn:active { transform: translateY(1px); }
 
 .bookmarks-container.collapsed {
@@ -136,8 +136,8 @@
 }
 
 .bookmarks-container.collapsed .toggle-sidebar-btn {
-  background: #2a2a2a;
-  color: #ddd;
+  background: rgb(39 39 42); /* zinc-800 */
+  color: rgb(228 228 231); /* zinc-200 */
   border: none;
   padding: 0;
   border-radius: 0;
@@ -151,22 +151,22 @@
   flex-shrink: 0;
 }
 
-.bookmarks-container.collapsed .toggle-sidebar-btn:hover { background: #333; color: #fff; }
+.bookmarks-container.collapsed .toggle-sidebar-btn:hover { background: rgb(63 63 70); /* zinc-700 */ color: rgb(255 255 255); /* white */ }
 .bookmarks-container.collapsed .toggle-sidebar-btn:active { transform: translateY(1px); }
 .bookmarks-container.collapsed .toggle-sidebar-btn.with-icon { width: auto; padding: 0 0.5rem; gap: 0.5rem; }
-.bookmarks-container.collapsed .toggle-sidebar-btn .glow-blue { color: #646cff; filter: drop-shadow(0 0 4px rgba(100, 108, 255, 0.6)); }
+.bookmarks-container.collapsed .toggle-sidebar-btn .glow-blue { color: rgb(99 102 241); /* indigo-500 */ filter: drop-shadow(0 0 4px rgba(99, 102, 241, 0.6)); }
 
-.user-info { margin: 0.5rem 0 0 0; color: #888; font-size: 0.9rem; font-family: monospace; }
-.bookmark-count { color: #666; font-size: 0.9rem; margin: 0.5rem 0; }
-.event-link { color: #8ab4f8; text-decoration: none; font-weight: 500; }
+.user-info { margin: 0.5rem 0 0 0; color: rgb(161 161 170); /* zinc-400 */ font-size: 0.9rem; font-family: monospace; }
+.bookmark-count { color: rgb(113 113 122); /* zinc-500 */ font-size: 0.9rem; margin: 0.5rem 0; }
+.event-link { color: rgb(96 165 250); /* blue-400 */ text-decoration: none; font-weight: 500; }
 .event-link:hover { text-decoration: underline; }
 
 .bookmark-urls { margin: 0.75rem 0; }
-.bookmark-url { display: block; margin: 0.25rem 0; color: #007bff; text-decoration: none; word-break: break-all; background: none; border: none; padding: 0; font: inherit; cursor: pointer; text-align: left; width: 100%; }
+.bookmark-url { display: block; margin: 0.25rem 0; color: rgb(59 130 246); /* blue-500 */ text-decoration: none; word-break: break-all; background: none; border: none; padding: 0; font: inherit; cursor: pointer; text-align: left; width: 100%; }
 .bookmark-url:hover { text-decoration: underline; }
 
 .url-row { display: flex; align-items: center; gap: 0.5rem; }
-.read-inline-btn { background: #28a745; color: white; border: none; padding: 0.25rem 0.5rem; border-radius: 4px; cursor: pointer; }
-.read-inline-btn:hover { background: #218838; }
+.read-inline-btn { background: rgb(34 197 94); /* green-500 */ color: white; border: none; padding: 0.25rem 0.5rem; border-radius: 4px; cursor: pointer; }
+.read-inline-btn:hover { background: rgb(22 163 74); /* green-600 */ }