From 7b5516d99759338dc8ca1c152ea8cf995060f3c9 Mon Sep 17 00:00:00 2001
From: sHa <sha@shadoll.dev>
Date: Fri, 2 May 2025 10:43:53 +0300
Subject: [PATCH] Refactor Grid and List components by cleaning up unused
 styles and improving layout consistency

---
 public/global.css          | 204 ++++++++++++++++++++-----------------
 src/components/Grid.svelte |  45 +-------
 src/components/List.svelte |  19 +---
 3 files changed, 114 insertions(+), 154 deletions(-)

diff --git a/public/global.css b/public/global.css
index 2591953..9e0be95 100644
--- a/public/global.css
+++ b/public/global.css
@@ -27,7 +27,8 @@
 }
 
 /* Class-based theme overrides for explicit theme switching */
-:root.dark, [data-theme="dark"] {
+:root.dark,
+[data-theme="dark"] {
   --color-card: #23272e;
   --background-color: #181a20;
   --color-text: #f5f6fa;
@@ -35,7 +36,8 @@
   --color-accent: #4f8cff;
 }
 
-:root.light, [data-theme="light"] {
+:root.light,
+[data-theme="light"] {
   --color-bg: #fff;
   --color-card: #f8f8f8;
   --background-color: #f8f9fa;
@@ -256,6 +258,15 @@ button:hover {
   margin: 0.5em 0 0 0;
 }
 
+.logo-card {
+  background: var(--color-card);
+  color: var(--color-text);
+  border: 1px solid var(--color-border);
+  border-radius: 8px;
+  transition: background 0.2s, color 0.2s, transform 0.2s, box-shadow 0.2s;
+  min-width: 320px;
+}
+
 .logo-tag {
   display: inline-block;
   background: var(--color-accent);
@@ -287,6 +298,11 @@ button:hover {
   transition: background 0.2s, color 0.2s;
 }
 
+.logo-info h3 {
+  margin-bottom: 0.5rem;
+  color: var(--color-accent);
+}
+
 .logo-image,
 .logo-preview {
   display: flex;
@@ -582,104 +598,104 @@ footer {
 }
 
 
-  .tag-filter {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 0.3rem;
-    align-items: center;
-    margin-left: 1rem;
-    position: relative;
-  }
+.tag-filter {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.3rem;
+  align-items: center;
+  margin-left: 1rem;
+  position: relative;
+}
 
-  .tag-filter .selected-tag {
-    background: var(--color-accent, #4f8cff);
-    color: #fff;
-    border: none;
-    border-radius: 12px;
-    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;
-  }
+.tag-filter .selected-tag {
+  background: var(--color-accent, #4f8cff);
+  color: #fff;
+  border: none;
+  border-radius: 12px;
+  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;
+}
 
-  .tag-filter .selected-tag .close {
-    margin-left: 0.4em;
-    font-size: 1.1em;
-    font-weight: bold;
-    cursor: pointer;
-    opacity: 0.7;
-    transition: opacity 0.2s;
-  }
+.tag-filter .selected-tag .close {
+  margin-left: 0.4em;
+  font-size: 1.1em;
+  font-weight: bold;
+  cursor: pointer;
+  opacity: 0.7;
+  transition: opacity 0.2s;
+}
 
-  .tag-filter .selected-tag .close:hover {
-    opacity: 1;
-  }
+.tag-filter .selected-tag .close:hover {
+  opacity: 1;
+}
 
-  .tag-dropdown {
-    position: relative;
-    display: inline-block;
-  }
+.tag-dropdown {
+  position: relative;
+  display: inline-block;
+}
 
-  .tag-dropdown .dropdown-toggle {
-    background: var(--color-card);
-    color: var(--color-text);
-    border: 1px solid var(--color-border);
-    border-radius: 12px;
-    padding: 0.2em 0.8em;
-    font-size: 0.85em;
-    font-weight: 500;
-    cursor: pointer;
-    margin-left: 0.2em;
-    transition: background 0.2s, color 0.2s;
-  }
+.tag-dropdown .dropdown-toggle {
+  background: var(--color-card);
+  color: var(--color-text);
+  border: 1px solid var(--color-border);
+  border-radius: 12px;
+  padding: 0.2em 0.8em;
+  font-size: 0.85em;
+  font-weight: 500;
+  cursor: pointer;
+  margin-left: 0.2em;
+  transition: background 0.2s, color 0.2s;
+}
 
-  .tag-dropdown .dropdown-list {
-    position: absolute;
-    left: 0;
-    top: 110%;
-    min-width: 120px;
-    background: var(--color-card);
-    color: var(--color-text);
-    border: 1px solid var(--color-border);
-    border-radius: 8px;
-    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
-    z-index: 10;
-    padding: 0.4em 0.2em;
-    display: flex;
-    flex-direction: column;
-    gap: 0.2em;
-  }
+.tag-dropdown .dropdown-list {
+  position: absolute;
+  left: 0;
+  top: 110%;
+  min-width: 120px;
+  background: var(--color-card);
+  color: var(--color-text);
+  border: 1px solid var(--color-border);
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+  z-index: 10;
+  padding: 0.4em 0.2em;
+  display: flex;
+  flex-direction: column;
+  gap: 0.2em;
+}
 
-  .tag-dropdown .dropdown-tag {
-    background: var(--color-accent, #4f8cff);
-    color: #fff;
-    border: none;
-    border-radius: 12px;
-    padding: 0.2em 0.8em;
-    font-size: 0.85em;
-    font-weight: 500;
-    letter-spacing: 0.02em;
-    cursor: pointer;
-    opacity: 0.85;
-    margin: 0.1em 0;
-    text-align: left;
-    transition: background 0.2s, color 0.2s;
-  }
+.tag-dropdown .dropdown-tag {
+  background: var(--color-accent, #4f8cff);
+  color: #fff;
+  border: none;
+  border-radius: 12px;
+  padding: 0.2em 0.8em;
+  font-size: 0.85em;
+  font-weight: 500;
+  letter-spacing: 0.02em;
+  cursor: pointer;
+  opacity: 0.85;
+  margin: 0.1em 0;
+  text-align: left;
+  transition: background 0.2s, color 0.2s;
+}
 
-  .tag-dropdown .dropdown-tag:hover {
-    opacity: 1;
-    background: var(--color-accent, #4f8cff);
-  }
+.tag-dropdown .dropdown-tag:hover {
+  opacity: 1;
+  background: var(--color-accent, #4f8cff);
+}
 
-  .tag-dropdown .no-tags {
-    color: #888;
-    font-size: 0.85em;
-    padding: 0.3em 0.8em;
-    text-align: center;
-  }
+.tag-dropdown .no-tags {
+  color: #888;
+  font-size: 0.85em;
+  padding: 0.3em 0.8em;
+  text-align: center;
+}
diff --git a/src/components/Grid.svelte b/src/components/Grid.svelte
index 9b5db72..7ae2e2f 100644
--- a/src/components/Grid.svelte
+++ b/src/components/Grid.svelte
@@ -125,15 +125,7 @@ $: getLogoThemeColor = logo => getDefaultLogoColor(logo.colors, theme);
 </div>
 
 <style>
-  :global(.logo-card) {
-    background: var(--color-card);
-    color: var(--color-text);
-    border: 1px solid var(--color-border);
-    border-radius: 8px;
-    /* overflow: hidden; removed to allow dropdown menus to escape the card */
-    transition: background 0.2s, color 0.2s, transform 0.2s, box-shadow 0.2s;
-    min-width: 320px;
-  }
+
   .logo-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
@@ -147,47 +139,16 @@ $: getLogoThemeColor = logo => getDefaultLogoColor(logo.colors, theme);
   }
   .logo-info {
     padding: 1rem;
-    background: var(--color-card);
-    color: var(--color-text);
     border-top: 1px solid var(--color-border);
-    transition: background 0.2s, color 0.2s;
-  }
-  .logo-info h3 {
-    margin-bottom: 0.5rem;
-    color: var(--color-accent, #4f8cff);
   }
+
   .no-results {
     grid-column: 1 / -1;
     text-align: center;
     padding: 2rem;
     color: #666;
   }
-  .color-circle.color-reset {
-    background: none !important;
-    width: 24px;
-    height: 24px;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    padding: 0;
-    margin: 0;
-    border: none;
-  }
-  .color-circle.color-reset svg {
-    pointer-events: none;
-  }
-  .color-circle {
-    width: 24px;
-    height: 24px;
-    border-radius: 50%;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    margin-right: 4px;
-    cursor: pointer;
-    box-sizing: border-box;
-    padding: 0;
-  }
+
   .color-switcher-preview.align-right {
     display: flex;
     align-items: center;
diff --git a/src/components/List.svelte b/src/components/List.svelte
index 769d592..958e58e 100644
--- a/src/components/List.svelte
+++ b/src/components/List.svelte
@@ -152,10 +152,7 @@
     border-radius: 4px;
     position: relative;
   }
-  .logo-info h3 {
-    margin-bottom: 0.5rem;
-    color: var(--color-accent, #4f8cff);
-  }
+
   .logo-list {
     display: flex;
     flex-direction: column;
@@ -166,21 +163,7 @@
     padding: 2rem;
     color: #666;
   }
-  .color-circle {
-    width: 24px;
-    height: 24px;
-    border-radius: 50%;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    margin-right: 4px;
-    cursor: pointer;
-    box-sizing: border-box;
-  }
   .color-switcher-preview.align-left {
     justify-content: flex-start;
   }
-  .color-circle.color-reset {
-    background: none !important;
-  }
 </style>