refactor: Simplify ColorSwitcher integration and clean up related styles

public/global.css

@@ -237,73 +237,6 @@ button:hover {
   border-right: none;
 }
 
-/* Shared color switcher and color circle styles */
-.format-row {
-  display: flex;
-  align-items: center;
-  gap: 1em;
-  margin-bottom: 0.5em;
-  justify-content: space-between;
-}
-
-/* Global color circle and switcher styles */
-.color-circle {
-  width: 24px;
-  height: 24px;
-  border-radius: 50%;
-  border: 1px solid var(--color-border, #ddd);
-  cursor: pointer;
-  transition: transform 0.2s;
-  box-sizing: border-box;
-  display: inline-block;
-}
-
-.color-circle:hover {
-  transform: scale(1.1);
-}
-
-.color-circle:last-child {
-  margin-right: 0;
-}
-
-.color-switcher-preview {
-  display: flex;
-  gap: 0.4em;
-  align-items: center;
-  justify-content: center;
-}
-
-.color-switcher-preview.align-right {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-}
-
-.color-switcher-preview.align-left {
-  justify-content: flex-start;
-}
-
-.color-circle.color-reset {
-  background: none !important;
-}
-
-/* Moved to component-specific style */
-
-.logo-tag {
-  display: inline-block;
-  background: var(--color-accent);
-  color: var(--white);
-  border-radius: 12px;
-  padding: 0.2em 0.8em;
-  font-size: 0.85em;
-  font-weight: 500;
-  letter-spacing: 0.02em;
-  margin-right: 0.3em;
-  margin-top: 0.2em;
-  margin-bottom: 0.2em;
-  transition: background 0.2s;
-}
-
 .logo-actions {
   display: flex;
   align-items: center;
@@ -408,49 +341,7 @@ div.logo-image img {
   color: var(--color-text);
 }
 
-.logo-img {
-  flex-shrink: 0;
-  width: 64px;
-  height: 64px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: var(--color-card);
-  border-radius: 8px;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
-  cursor: pointer;
-}
-
-/* Header styles */
-
-
-.logos-container {
-  width: 100%;
-}
-
-
-
-
 textarea {
   background-color: var(--background-color);
   color: var(--color-text);
 }
-
-.set-circle {
-  background: var(--color-border);
-  color: var(--color-text);
-  font-size: 10px;
-  font-weight: bold;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-  padding: 0;
-}
-
-/* Dark theme variation */
-:root.dark-theme .set-circle,
-.dark-theme .set-circle {
-  background: #444;
-  color: #eee;
-}

src/components/CardFull.svelte

@@ -158,11 +158,16 @@
       <div class="right-column">
         <div class="logo-details fullscreen-details">
           {#if logo.colors}
-            <ColorSwitcher {logo} {theme} mode="standard" onSelect={(color, setName) => {
+            <ColorSwitcher
-              logo._activeColor = color;
+              {logo}
-              logo._activeSet = setName;
+              {theme}
-              setTimeout(updateSvgSource, 100);
+              mode="standard"
-            }} />
+              onSelect={(color, setName) => {
+                logo._activeColor = color;
+                logo._activeSet = setName;
+                setTimeout(updateSvgSource, 100);
+              }}
+            />
           {/if}
           {#if logo.brand}
             <p><strong>Brand:</strong> <span>{logo.brand}</span></p>
@@ -207,17 +212,6 @@
 </div>
 
 <style>
-  .preview-actions-container {
-    width: 100%;
-    background: var(--color-card);
-    color: var(--color-text);
-    border-radius: 12px;
-    padding: 1.5rem;
-    box-shadow: 0 2px 16px 4px rgba(0, 0, 0, 0.18);
-    z-index: 2;
-    position: relative;
-  }
-
   .actions-wrapper {
     display: flex;
     flex-wrap: wrap;
@@ -287,17 +281,6 @@
     height: auto;
   }
 
-  .right-column {
-    display: flex;
-    flex-direction: column;
-    gap: 1.5rem;
-    flex: 1;
-    min-width: 300px;
-    max-width: 400px;
-    overflow-y: auto;
-    padding: 1.5rem;
-    background: var(--color-bg);
-  }
   .logo-details.fullscreen-details {
     width: 100%;
     background: var(--color-card);
@@ -312,9 +295,29 @@
     flex-wrap: wrap;
     gap: 0.5rem;
   }
-
+  .logo-tag {
+    display: inline-block;
+    background: var(--color-accent);
+    color: var(--white);
+    border-radius: 12px;
+    padding: 0.2em 0.8em;
+    font-size: 0.85em;
+    font-weight: 500;
+    letter-spacing: 0.02em;
+    margin-right: 0.3em;
+    margin-top: 0.2em;
+    margin-bottom: 0.2em;
+    transition: background 0.2s;
+  }
   .preview-actions-container {
-    margin-top: 2rem;
+    width: 100%;
+    background: var(--color-card);
+    color: var(--color-text);
+    border-radius: 12px;
+    padding: 1.5rem;
+    box-shadow: 0 2px 16px 4px rgba(0, 0, 0, 0.18);
+    z-index: 2;
+    position: relative;
     border-top: 1px solid var(--color-border);
     padding-top: 1rem;
   }
@@ -367,7 +370,7 @@
     min-width: 300px;
     max-width: 400px;
     overflow-y: auto;
-    padding: 1.5rem;
+    padding: 0 1.5rem;
     background: var(--color-bg);
   }
 
@@ -404,7 +407,6 @@
   }
 
   .logo-details {
-    margin-top: 1rem;
     color: var(--color-text);
   }
 
@@ -418,5 +420,4 @@
   .logo-details span {
     color: var(--color-text);
   }
-
 </style>

src/components/CardMiddle.svelte

@@ -89,10 +89,15 @@
     <div class="format-row">
       <span><strong>Format:</strong> {logo.format}</span>
       {#if logo.colors}
-        <ColorSwitcher {logo} {theme} mode="standard" onSelect={(color, setName) => {
+        <ColorSwitcher
-          logo._activeColor = color;
+          {logo}
-          logo._activeSet = setName;
+          {theme}
-        }} />
+          mode="standard"
+          onSelect={(color, setName) => {
+            logo._activeColor = color;
+            logo._activeSet = setName;
+          }}
+        />
       {/if}
     </div>
     <div class="logo-actions">
@@ -176,5 +181,4 @@
     font-size: 1.2rem;
     line-height: 1.2;
   }
-
 </style>

src/components/ColorSwitcher.svelte

@@ -46,7 +46,7 @@
   {#if mode === 'compact'}
     <div class="color-chooser-wrapper">
       <span
-        class="color-circle {logo._activeSet ? '' : 'color-reset'}"
+        class="color-chooser {logo._activeSet ? '' : 'color-reset'}"
         title="Choose color"
         tabindex="0"
         role="button"
@@ -93,17 +93,15 @@
     align-items: flex-end;
     pointer-events: auto;
   }
-  .color-circle {
+  .color-chooser {
     width: 24px;
     height: 24px;
-    border-radius: 50%;
-    border: 1px solid var(--color-border, #ddd);
     cursor: pointer;
     transition: transform 0.2s;
     box-sizing: border-box;
     display: inline-block;
   }
-  .color-circle:hover {
+  .color-chooser:hover {
     transform: scale(1.1);
   }
   .color-dropdown {

src/components/ColorsVariants.svelte

@@ -45,6 +45,15 @@
 {/if}
 
 <style>
+    .set-circle {
+        font-size: 10px;
+        font-weight: bold;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        overflow: hidden;
+        padding: 0;
+    }
     .colors-variants-list {
         display: flex;
         gap: 0.4em;
@@ -54,8 +63,6 @@
     .color-circle {
         width: 24px;
         height: 24px;
-        border-radius: 50%;
-        border: 1px solid var(--color-border, #ddd);
         cursor: pointer;
         transition: transform 0.2s;
         box-sizing: border-box;
@@ -66,5 +73,10 @@
     }
     .color-circle.active {
         box-shadow: 0 0 10px 5px var(--color-accent);
+        border-radius: 50%;
+    }
+
+    .color-circle:last-child {
+        margin-right: 0;
     }
 </style>