From 670c265db1abcc6c598cfe1deb153bba0a5c026d Mon Sep 17 00:00:00 2001
From: sHa <sha@shadoll.dev>
Date: Thu, 29 May 2025 20:36:46 +0300
Subject: [PATCH] feat: add additional color variable and update selected
 filter button styles for improved UI

---
 public/global.css            |   1 +
 src/components/Header.svelte | 105 +++++++++++++++--------------------
 2 files changed, 46 insertions(+), 60 deletions(-)

diff --git a/public/global.css b/public/global.css
index 85f239b..f8f231c 100644
--- a/public/global.css
+++ b/public/global.css
@@ -2,6 +2,7 @@
   --primary-color: #4619c2;
   --primary-color-hover: #6447b5;
   --secondary-color: #2c3e50;
+  --additional-color: #219150;
   --background-color: #f8f9fa;
   --text-color: #333333;
   --white: #ffffff;
diff --git a/src/components/Header.svelte b/src/components/Header.svelte
index 4471821..01ca1d5 100644
--- a/src/components/Header.svelte
+++ b/src/components/Header.svelte
@@ -493,7 +493,7 @@
       <div class="selected-filters">
         {#each selectedTags as tagText}
           <button
-            class="selected-tag"
+            class="selected-filter-btn selected-tag"
             aria-label={`Remove tag: ${getTagObj(tagText).text}`}
             on:click={() => removeTag(getTagObj(tagText).text)}
           >
@@ -504,7 +504,7 @@
 
         {#each selectedBrands as brand}
           <button
-            class="selected-brand"
+            class="selected-filter-btn selected-brand"
             aria-label={`Remove brand: ${brand}`}
             on:click={() => removeBrand(brand)}
           >
@@ -515,7 +515,7 @@
 
         {#if compactMode}
           <button
-            class="compact-indicator"
+            class="selected-filter-btn compact-indicator"
             on:click={() => {
               setCompactMode(false);
               compactMode = false;
@@ -753,12 +753,11 @@
     position: relative;
   }
 
-  .selected-tag {
-    background: var(--color-accent);
-    color: #fff;
+  /* Base styles for all selected filter buttons */
+  .selected-filter-btn {
     border: none;
     border-radius: 8px;
-    padding: 0.1em 0.8em;
+    padding: 0.1em 0.7em;
     font-size: 0.75em;
     font-weight: 300;
     letter-spacing: 0.02em;
@@ -767,12 +766,16 @@
     align-items: center;
     gap: 0.3em;
     opacity: 1;
-    transition:
-      background 0.2s,
-      color 0.2s;
+    transition: background 0.2s, color 0.2s, transform 0.1s;
+    position: relative;
+    color: #fff;
   }
 
-  .selected-tag .close {
+  .selected-filter-btn:hover {
+    filter: brightness(1.6);
+  }
+
+  .selected-filter-btn .close {
     margin-left: 0.4em;
     font-size: 1.1em;
     font-weight: bold;
@@ -781,27 +784,33 @@
     transition: opacity 0.2s;
   }
 
-  .selected-tag .close:hover {
+  .selected-filter-btn .close:hover {
     opacity: 1;
   }
 
+  /* Type-specific styles */
+  .selected-tag {
+    background: var(--color-accent);
+    color: #fff;
+  }
+
+  .selected-tag:hover {
+    background: var(--color-accent);
+  }
+
+  .selected-brand {
+    background: #27ae60;
+    color: #fff;
+  }
+
+  .selected-brand:hover {
+    background: var(--additional-color);
+  }
+
   .compact-indicator {
     background: var(--color-border);
     color: var(--color-text);
-    border: none;
-    border-radius: 8px;
-    padding: 0.1em 0.8em;
-    font-size: 0.75em;
-    font-weight: 300;
-    display: flex;
-    align-items: center;
-    gap: 0.4em;
     opacity: 0.8;
-    cursor: pointer;
-    transition:
-      background 0.2s,
-      color 0.2s,
-      opacity 0.2s;
   }
 
   .compact-indicator:hover {
@@ -810,17 +819,20 @@
     color: var(--color-card);
   }
 
-  .compact-indicator .close {
-    margin-left: 0.4em;
-    font-size: 1.1em;
-    font-weight: bold;
-    cursor: pointer;
-    opacity: 0.7;
-    transition: opacity 0.2s;
+  .selected-tag {
+    background: var(--color-accent);
+    align-items: center;
   }
 
-  .compact-indicator .close:hover {
+  .compact-indicator {
+    background: var(--color-border);
+    color: var(--color-text);
+  }
+
+  .compact-indicator:hover {
     opacity: 1;
+    background: var(--color-text);
+    color: var(--color-card);
   }
 
   .filter-dropdown {
@@ -1199,39 +1211,12 @@
   .selected-brand {
     background: #27ae60;
     color: #fff;
-    border: none;
-    border-radius: 8px;
-    padding: 0.2em 0.8em 0.2em 0.8em;
-    font-size: 0.85em;
-    font-weight: 500;
-    letter-spacing: 0.02em;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    gap: 0.3em;
-    opacity: 1;
-    transition:
-      background 0.2s,
-      color 0.2s;
   }
 
   .selected-brand:hover {
     background: #219150;
   }
 
-  .selected-brand .close {
-    margin-left: 0.4em;
-    font-size: 1.1em;
-    font-weight: bold;
-    cursor: pointer;
-    opacity: 0.7;
-    transition: opacity 0.2s;
-  }
-
-  .selected-brand .close:hover {
-    opacity: 1;
-  }
-
   .selected-filters {
     grid-column: 2;
     display: flex;