feat: enhance styling and structure for color switcher; move common styles to global.css

src/components/Grid.svelte

@@ -186,6 +186,8 @@ $: getLogoThemeColor = logo => getDefaultLogoColor(logo.colors, theme);
     justify-content: flex-end;
   }
 
+  /* Removed unused styles */
+
   .logo-title-row {
     display: flex;
     align-items: center;
@@ -221,4 +223,17 @@ $: getLogoThemeColor = logo => getDefaultLogoColor(logo.colors, theme);
     overflow: hidden;
     padding: 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-grid .logo-item .logo-image {
+    width: 100%;
+  }
 </style>

src/components/List.svelte

@@ -278,7 +278,9 @@
     align-items: center;
     justify-content: space-between;
     gap: 0.5em;
-  }  .set-circle {
+  }
+
+  .set-circle {
     display: flex;
     align-items: center;
     justify-content: center;

src/components/Preview.svelte

@@ -387,21 +387,7 @@
     gap: 0.5rem;
   }
 
-  .set-circle {
-    background: var(--color-border);
-    color: var(--color-text);
-    font-size: 10px;
-    font-weight: bold;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  /* Dark theme variation */
-  :global(.dark-theme) .set-circle {
-    background: #444;
-    color: #eee;
-  }
+  /* Moved to global.css */
 
   .preview-actions-container {
     margin-top: 2rem;
@@ -504,4 +490,22 @@
     resize: none;
     overflow-y: auto;
   }
+
+  /* Moved common color switcher styles to global.css */
+
+  .logo-details {
+    margin-top: 1rem;
+    color: var(--color-text);
+  }
+
+  .logo-details p {
+    margin: 0.5rem 0;
+    font-size: 0.9rem;
+    color: var(--color-text);
+  }
+
+  .logo-details strong,
+  .logo-details span {
+    color: var(--color-text);
+  }
 </style>

src/pages/Home.svelte

@@ -5,11 +5,9 @@
   import Header from "../components/Header.svelte";
   import Footer from "../components/Footer.svelte";
 
-  // Use the app's global data without reloading
   let appData = {};
   let initialized = false;
 
-  // Simple function to get data from the global app object
   function getAppData() {
     if (typeof window !== "undefined" && window.appData) {
       console.log("Home: Using app data with",
@@ -30,11 +28,9 @@
     }
   }
 
-  // Consolidate the onMount functions into a single one
   onMount(() => {
     getAppData();
 
-    // If not initialized yet, set up an interval to check for data
     if (!initialized) {
       console.log("Home: Setting up retry interval for logos data");
       const interval = setInterval(() => {
@@ -49,11 +45,8 @@
             window.appData ? `${window.appData.logos?.length || 0} logos` : "no window.appData");
         }
       }, 200); // Increased interval for better logging
-
-      // No cleanup here - we'll handle in the second part
     }
 
-    // Also watch for changes to window.appData
   let logoCheckInterval;
   let lastViewMode = '';
   let lastCompactMode = false;
@@ -126,7 +119,6 @@
     }
   }, 100); // Faster interval for UI responsiveness
 
-  // Cleanup function to clear the interval when component is destroyed
   return () => clearInterval(logoCheckInterval);
 });
 </script>