Enhance logo preview functionality with URL anchor support and responsive SVG handling

Update gitea.svg to remove unnecessary attributes for improved SVG rendering
Add YouTube logo and update Ford brand entry in logos.json
2025-12-20 20:35:19 +00:00 · 2025-05-01 23:29:46 +03:00 · 2025-05-01 22:42:38 +03:00 · 2025-05-01 17:59:58 +03:00 · 2025-05-01 17:50:42 +03:00 · 2025-05-01 17:18:17 +03:00
24 changed files with 1896 additions and 1008 deletions
--- a/public/data/logos.json
+++ b/public/data/logos.json
@@ -28,10 +28,7 @@
    "disable": false,
    "brand": "Apple",
    "tags": [
-      {
+      "tech"
        "text": "tech",
        "color": "silver"
      }
    ],
    "colors": [
      {
@@ -43,6 +40,25 @@
      "target": "path"
    }
  },
  {
    "name": "arm",
    "path": "logos/arm.svg",
    "format": "SVG",
    "disable": false,
    "tags": [
      "tech"
    ],
    "colors": [
      {
        "label": "Dark Blue",
        "value": "#080225"
      }
    ],
    "colorConfig": {
      "target": "g"
    },
    "brand": "arm"
  },
  {
    "name": "ATB",
    "path": "logos/atb.svg",
@@ -50,7 +66,8 @@
    "disable": false,
    "brand": "ATB",
    "tags": [
-      "retail"
+      "retail",
      "grocery"
    ]
  },
  {
@@ -65,6 +82,17 @@
    ],
    "brand": "Binance"
  },
  {
    "name": "BMW",
    "path": "logos/bmw.svg",
    "format": "SVG",
    "disable": false,
    "tags": [
      "automobile",
      "transport"
    ],
    "brand": "BMW"
  },
  {
    "name": "Dalnoboy Service",
    "path": "logos/dalnoboy-service.svg",
@@ -74,7 +102,13 @@
      "transport",
      "garage"
    ],
-    "brand": "Dalnoboy Service"
+    "brand": "Dalnoboy Service",
    "colors": [
      {
        "label": "Orange",
        "value": "#ee7800"
      }
    ]
  },
  {
    "name": "Disney",
@@ -112,6 +146,28 @@
      "selector": "#text"
    }
  },
  {
    "name": "Fiat",
    "path": "logos/fiat.svg",
    "format": "SVG",
    "disable": false,
    "tags": [
      "automobile",
      "transport"
    ],
    "brand": "Fiat"
  },
  {
    "name": "Ford",
    "path": "logos/ford.svg",
    "format": "SVG",
    "disable": false,
    "tags": [
      "automobile",
      "transport"
    ],
    "brand": "Ford"
  },
  {
    "name": "Gitea",
    "path": "logos/gitea.svg",
@@ -130,10 +186,7 @@
    "disable": false,
    "brand": "Google",
    "tags": [
-      {
+      "tech"
        "text": "tech",
        "color": "silver"
      }
    ]
  },
  {
@@ -367,6 +420,16 @@
    "tags": [],
    "brand": "Nvidia"
  },
  {
    "name": "Okko",
    "path": "logos/okko.svg",
    "format": "SVG",
    "disable": false,
    "tags": [
      "fuel"
    ],
    "brand": "Okko"
  },
  {
    "name": "Privat24",
    "path": "logos/privat24.svg",
@@ -470,6 +533,26 @@
    },
    "brand": "RoomerIN"
  },
  {
    "name": "Sainsbury's",
    "path": "logos/sainsburys.svg",
    "format": "SVG",
    "disable": false,
    "tags": [
      "retail",
      "grocery"
    ],
    "brand": "Sainsbury's",
    "colors": [
      {
        "label": "Orange",
        "value": "#F06C00"
      }
    ],
    "colorConfig": {
      "target": "g"
    }
  },
  {
    "name": "Sendpulse",
    "path": "logos/sendpulse.svg",
@@ -531,6 +614,28 @@
      "grocery"
    ]
  },
  {
    "name": "Suzuki",
    "path": "logos/suzuki.svg",
    "format": "SVG",
    "disable": false,
    "tags": [
      "automobile",
      "transport"
    ],
    "brand": "Suzuki"
  },
  {
    "name": "Suzuki",
    "path": "logos/suzuki_vertical.svg",
    "format": "SVG",
    "disable": false,
    "tags": [
      "automobile",
      "transport"
    ],
    "brand": "Suzuki"
  },
  {
    "name": "Ukrposhta",
    "path": "logos/ukrposhta.svg",
@@ -581,5 +686,23 @@
      "finance",
      "transfer"
    ]
  },
  {
    "name": "WOG",
    "path": "logos/wog.svg",
    "format": "SVG",
    "disable": false,
    "tags": [
      "fuel"
    ],
    "brand": "WOG"
  },
  {
    "name": "Youtube",
    "path": "logos/youtube.svg",
    "format": "SVG",
    "disable": false,
    "tags": [
    ]
  }
 ]
--- a/public/global.css
+++ b/public/global.css
@@ -1,9 +1,47 @@
 :root {
  --primary-color: #3498db;
  --primary-color-hover: #2980b9;
  --secondary-color: #2c3e50;
  --background-color: #f8f9fa;
  --card-background: #ffffff;
  --text-color: #333333;
  --white: #ffffff;
  --black: #000000;
  --color-border: #ddd;
  --card-background: var(--white);
  --color-bg: var(--background-color);
  --color-text: var(--text-color);
  --color-card: var(--card-background);
  --color-accent: var(--primary-color);
  --color-accent-hover: var(--primary-color-hover);
 }
 /* Dark theme overrides - using both media query and class-based approach */
@media (prefers-color-scheme: dark) {
  :root {
    --color-card: #23272e;
    --background-color: #181a20;
    --color-text: #f5f6fa;
    --color-border: #333842;
    --color-accent: #4f8cff;
  }
 }
 /* Class-based theme overrides for explicit theme switching */
 :root.dark, [data-theme="dark"] {
  --color-card: #23272e;
  --background-color: #181a20;
  --color-text: #f5f6fa;
  --color-border: #333842;
  --color-accent: #4f8cff;
 }
 :root.light, [data-theme="light"] {
  --color-bg: #fff;
  --color-card: #f8f8f8;
  --background-color: #f8f9fa;
  --color-text: #333333;
  --color-border: #ddd;
  --color-accent: #4f8cff;
 }
 * {
@@ -12,10 +50,16 @@
  padding: 0;
 }
 :global(html),
 :global(body) {
  background: var(--color-bg);
  color: var(--color-text);
 }
 body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
-  background-color: var(--background-color);
+  background-color: var(--color-bg);
-  color: var(--text-color);
+  color: var(--color-text);
  line-height: 1.6;
 }
@@ -23,13 +67,15 @@ body {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
  background: var(--color-bg);
  color: var(--color-text);
 }
 button {
  cursor: pointer;
  padding: 0.5rem 1rem;
-  background-color: var(--primary-color);
+  background-color: var(--color-accent);
-  color: white;
+  color: var(--white);
  border: none;
  border-radius: 4px;
  font-size: 0.9rem;
@@ -37,13 +83,34 @@ button {
 }
 button:hover {
-  background-color: #2980b9;
+  background-color: var(--color-accent-hover);
 }
 .view-toggle {
  display: flex;
-  gap: 0.5rem;
+  gap: 0.2rem;
-  margin-bottom: 1rem;
+}
 .view-toggle button {
  padding: 0.3rem 0.5rem;
  background: var(--color-card);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  font-size: 1rem;
  transition: background 0.2s, color 0.2s;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
 }
 .view-toggle button.active,
 .view-toggle button:focus {
  background: var(--color-accent);
  color: var(--white);
  font-weight: bold;
  outline: 2px solid var(--color-border);
 }
 .search-bar {
@@ -55,15 +122,17 @@ button:hover {
 .search-bar input {
  width: 100%;
  padding: 0.75rem;
-  border: 1px solid #ddd;
+  border: 1px solid var(--color-border);
  border-radius: 4px;
  font-size: 1rem;
  background: var(--color-card);
  color: var(--color-text);
 }
 .copy-btn,
 .copy-group .png-btn {
-  background-color: var(--secondary-color, #2c3e50);
+  background-color: var(--secondary-color);
-  color: #fff;
+  color: var(--white);
  font-weight: 500;
  letter-spacing: 0.02em;
  min-width: 2.5em;
@@ -71,7 +140,7 @@ button:hover {
  margin: 0;
  padding: 0.4em 1em;
  font-size: 0.95em;
-  border-right: 1px solid var(--color-border, #ddd);
+  border-right: 1px solid var(--color-border);
  transition: background 0.2s, color 0.2s;
  text-wrap: nowrap;
 }
@@ -85,15 +154,15 @@ button:hover {
 .copy-btn:hover,
 .copy-group .png-btn:focus,
 .copy-group .png-btn:hover {
-  background: #222;
+  background: var(--black);
-  color: #fff;
+  color: var(--white);
  outline: none;
 }
 .download-btn,
 .download-group .png-btn {
  background: #27ae60;
-  color: #fff;
+  color: var(--white);
  font-weight: 500;
  letter-spacing: 0.02em;
  min-width: 2.5em;
@@ -101,7 +170,7 @@ button:hover {
  margin: 0;
  padding: 0.4em 1em;
  font-size: 0.95em;
-  border-right: 1px solid var(--color-border, #ddd);
+  border-right: 1px solid var(--color-border);
  transition: background 0.2s, color 0.2s;
 }
@@ -115,11 +184,12 @@ button:hover {
 .download-group .png-btn:focus,
 .download-group .png-btn:hover {
  background: #219150;
-  color: #fff;
+  color: var(--white);
  outline: none;
 }
-.copy-group, .download-group {
+.copy-group,
 .download-group {
  display: inline-flex;
  border-radius: 6px;
  overflow: hidden;
@@ -128,18 +198,36 @@ button:hover {
 }
 /* Shared color switcher and color circle styles */
-.color-circle {
+.format-row {
-  width: 20px;
+  display: flex;
-  height: 20px;
+  align-items: center;
-  border-radius: 50%;
+  gap: 1em;
-  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
+  margin-bottom: 0.5em;
-  cursor: pointer;
+  justify-content: space-between;
  display: inline-block;
  transition: border 0.2s, box-shadow 0.2s;
 }
 .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;
  transition: box-shadow 0.2s;
 }
 .color-circle:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
 }
 .color-circle.color-reset {
  background: none !important;
 }
 .color-switcher-preview,
 .color-switcher-inline,
 .color-switcher-under {
@@ -147,26 +235,39 @@ button:hover {
  gap: 0.4em;
  align-items: center;
 }
 .color-switcher-preview {
  justify-content: center;
 }
 .color-switcher-preview.align-right {
  justify-content: flex-end;
 }
 .color-switcher-preview.align-left {
  justify-content: flex-start;
 }
 .color-switcher-inline {
  margin-left: auto;
 }
 .color-switcher-under {
  margin: 0.5em 0 0 0;
 }
 .logo-tag {
  display: inline-block;
-  background: var(--color-accent, #4f8cff);
+  background: var(--color-accent);
-  color: #fff;
+  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;
 }
@@ -174,10 +275,11 @@ button:hover {
  display: flex;
  align-items: center;
  gap: 0.5em;
  flex-wrap: nowrap;
 }
 .logo-info {
  flex: 1 1 auto;
  min-width: 0;
  background: var(--color-card);
  color: var(--color-text);
  padding: 0.5rem 1rem;
@@ -198,7 +300,8 @@ button:hover {
  transition: background 0.2s, color 0.2s;
 }
-.logo-preview img {
+.logo-preview img,
 div.logo-image img {
  max-width: 80%;
  max-height: 80%;
  width: auto;
@@ -208,32 +311,6 @@ button:hover {
  margin: 0 auto;
 }
 .format-row {
  display: flex;
  align-items: center;
  gap: 1em;
  margin-bottom: 0.5em;
  justify-content: space-between;
 }
 /* Direct logo image size constraints that will work with any component structure */
 div.logo-image {
  display: flex;
  align-items: center;
  justify-content: center;
  /* background-color removed for theme support */
  position: relative;
  overflow: hidden;
 }
 div.logo-image img {
  max-width: 80%;
  max-height: 80%;
  width: auto;
  height: auto;
  object-fit: contain;
 }
 .logo-image svg {
  width: 100%;
  height: 100%;
@@ -241,11 +318,107 @@ div.logo-image img {
  max-height: 100%;
  display: block;
  object-fit: contain;
  color: var(--color-text);
 }
 /* Modal styles */
 .modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
 }
 .modal-content {
  background: var(--color-card);
  color: var(--color-text) !important;
  border-radius: 8px;
  padding: 1rem;
  max-width: 500px;
  width: 90%;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  border: 1px solid var(--color-border);
  transition: background 0.2s, color 0.2s;
 }
 .modal-content * {
  color: var(--color-text);
 }
 .modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  color: var(--color-text);
 }
 .modal-header h2 {
  margin: 0;
  font-size: 1.5rem;
  color: var(--color-text);
 }
 .close-btn {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--color-text);
  transition: color 0.2s;
 }
 .close-btn:hover {
  color: #f44336;
 }
 .modal-body {
  color: var(--color-text);
 }
 .preview-container {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background-color: var(--color-card);
  color: var(--color-text);
  margin-bottom: 1rem;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--color-border);
 }
 .preview-container img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
 }
 .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);
 }
 /* Grid specific */
 .logo-grid .logo-item .logo-image {
  /* height: 160px; */
  width: 100%;
 }
@@ -254,16 +427,259 @@ div.logo-image img {
  width: 120px;
  min-width: 120px;
  height: 100px;
-  border-right: 1px solid #eee;
+  border-right: 1px solid var(--color-border);
 }
-/* Dark theme overrides */
+/* Row specific */
-@media (prefers-color-scheme: dark) {
+.logo-row {
-  :root {
+  display: flex;
-    --color-card: #23272e;
+  align-items: center;
-    --background-color: #181a20;
+  padding: 0.5em 0.5em;
-    --color-text: #f5f6fa;
+  border-bottom: 1px solid var(--color-border);
-    --color-border: #333842;
+  gap: 1em;
-    --color-accent: #4f8cff;
+}
 .logo-row.grid {
  flex-direction: column;
  align-items: stretch;
  border-bottom: none;
  border-radius: 10px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
  margin-bottom: 1em;
  padding: 1em;
 }
 .logo-row.list {
  flex-direction: row;
  align-items: center;
  border-radius: 0;
  box-shadow: none;
  margin-bottom: 0;
  padding: 0.5em 0.5em;
 }
 .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 */
 .main-header {
  margin-bottom: 1.5rem;
  background: var(--color-card);
  color: var(--color-text);
  border-radius: 8px;
  padding: 1.2rem 1rem 0.7rem 1rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
 }
 .header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
 }
 .header-controls {
  margin-top: 0.5rem;
 }
 .logo-count {
  font-family: system-ui, Arial, sans-serif;
  font-size: 0.6rem;
  font-weight: normal;
  color: var(--color-text);
  margin-left: 1rem;
  align-self: center;
  opacity: 0.7;
 }
 .theme-switcher {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  margin-left: auto;
 }
 .theme-switch-group {
  display: flex;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--color-border);
  background: var(--color-card);
 }
 .theme-switch-group button {
  background: none;
  border: none;
  color: var(--color-text);
  padding: 0.2em 0.7em;
  font-size: 1.1rem;
  border-radius: 0;
  transition: background 0.2s, color 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
 }
 .theme-switch-group button:first-child {
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
 }
 .theme-switch-group button:last-child {
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
 }
 .theme-switch-group button.active,
 .theme-switch-group button:focus {
  background: var(--color-accent);
  color: var(--white);
  font-weight: bold;
  outline: 2px solid var(--color-border);
 }
 .theme-switch-group button:hover {
  background: var(--color-accent);
  color: var(--color-accent-text);
 }
 .logos-container {
  width: 100%;
 }
 footer {
  margin-top: 3rem;
  text-align: center;
  font-size: 0.9rem;
  color: #888;
  background: transparent;
 }
@media (max-width: 700px) {
  .header-row {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }
  .main-header {
    padding: 1rem 0.5rem 0.5rem 0.5rem;
  }
  h1 {
    font-size: 1.1rem;
  }
 }
  .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 .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-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-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: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;
  }
--- a/public/logos/arm.svg
+++ b/public/logos/arm.svg
@@ -0,0 +1,15 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 4332.3 1318.7">
 	<g fill="currentColor" fill-rule="evenodd">
 		<path d="M977.9,31.9h290.4v1247.6H977.9v-130.4C850.5,1297.2,693.4,1318,604.5,1318C219.3,1318,0,998,0,654.2
 		C0,248.2,278.5-0.7,607.5-0.7c91.9,0,251.9,23.7,370.4,177.8V31.9z M296.3,660.1c0,216.3,136.3,397.1,346.7,397.1
 		c183.7,0,352.6-133.3,352.6-394.1c0-272.6-168.9-403-352.6-403C432.6,260.1,296.3,437.9,296.3,660.1z M1614.1,31.9h290.4v112.6
 		c32.6-38.5,80-80,121.5-103.7c56.3-32.6,112.6-41.5,177.8-41.5c71.1,0,148.2,11.9,228.2,59.3l-118.5,263.7
 		c-65.2-41.5-118.5-44.4-148.2-44.4c-62.2,0-124.5,8.9-180.8,68.2c-80,85.9-80,204.5-80,287.4v646h-290.4V31.9z M2619.5,31.9h290.4
 		v115.6C3007.7,29,3123.3-0.7,3218.1-0.7c130.4,0,251.9,62.2,323,183.7C3644.8,34.9,3801.9-0.7,3911.5-0.7
 		c151.1,0,284.5,71.1,355.6,195.6c23.7,41.5,65.2,133.3,65.2,314.1v770.5h-290.4V592c0-139.3-14.8-195.6-26.7-222.2
 		c-17.8-47.4-62.2-109.6-165.9-109.6c-71.1,0-133.3,38.5-171.9,91.9c-50.4,71.1-56.3,177.8-56.3,284.5v643h-290.4V592
 		c0-139.3-14.8-195.6-26.7-222.2c-17.8-47.4-62.2-109.6-166-109.6c-71.1,0-133.3,38.5-171.9,91.9c-50.4,71.1-56.3,177.8-56.3,284.5
 		v643h-290.4V31.9z" />
 	</g>
 </svg>
--- a/public/logos/bmw.svg
+++ b/public/logos/bmw.svg
@@ -0,0 +1,18 @@
 <svg width="100%" height="100%" viewBox="0 0 600 600" xmlns="http://www.w3.org/2000/svg">
   <g id="center">
      <path id="blue"
         d="M477.778,300c-0,98.248 -79.53,177.778 -177.778,177.778l-0,-177.778l177.778,-0Zm-177.778,-177.778l-0,177.778l-177.778,-0c0,-98.248 79.53,-177.778 177.778,-177.778Z"
         style="fill:#0166b1;fill-rule:nonzero;" />
      <path id="white"
         d="M300,122.222c98.248,0 177.778,79.53 177.778,177.778l-177.778,0l0,-177.778Zm-177.778,177.778l177.778,0l0,177.778c-98.248,-0 -177.778,-79.53 -177.778,-177.778Z"
         style="fill:#fff;fill-rule:nonzero;" />
   </g>
   <g id="grey">
      <path id="path14"
         d="M300,122.222l0,9.748c92.643,-0 168.031,75.369 168.031,168.03l9.747,-0c-0,-98.178 -79.6,-177.778 -177.778,-177.778m0,345.808c-92.643,0 -168.03,-75.369 -168.03,-168.03l-9.748,-0c0,98.178 79.6,177.778 177.778,177.778m0,-477.778c-165.681,0 -300,134.319 -300,300c0,165.681 134.319,300 300,300c165.681,-0 300,-134.319 300,-300c-0,-165.681 -134.319,-300 -300,-300Zm280.492,300c-0,154.904 -125.571,280.492 -280.492,280.492c-154.921,-0 -280.492,-125.588 -280.492,-280.492c0,-154.904 125.588,-280.492 280.492,-280.492c154.904,0 280.492,125.588 280.492,280.492Z"
         style="fill:#6f6f6f;fill-rule:nonzero;" />
      <path id="B_x5F_22d_61_"
         d="M171.797,155.274c9.586,-10.028 15.014,-21.614 5.427,-32.674c-5.216,-6.003 -13.974,-7.316 -21.235,-4.358l-0.722,0.28l0.229,-0.63c1.075,-2.853 1.762,-11.953 -6.045,-18.236c-3.806,-3.063 -8.582,-4.201 -13.41,-3.711c-9.005,0.911 -15.931,7.018 -34.787,27.897c-5.692,6.3 -13.975,16.241 -18.944,22.681l51.792,48.793c17.164,-18.866 24.161,-25.884 37.695,-40.042Zm-67.583,-11.936c10.433,-12.671 21.517,-24.169 26.54,-28.719c1.586,-1.435 3.313,-2.87 5.41,-3.43c3.401,-0.928 6.908,1.47 7.701,4.935c0.793,3.483 -1.41,6.791 -3.859,9.521c-5.516,6.178 -25.747,27.196 -25.747,27.196l-10.045,-9.503Zm20.284,19.111c-0,0 19.702,-20.686 26.134,-27.301c2.555,-2.625 4.194,-4.218 5.956,-5.076c2.274,-1.102 4.758,-1.33 6.979,0.14c2.185,1.453 3.19,3.956 2.643,6.441c-0.652,2.957 -3.084,5.775 -5.093,7.928c-2.713,2.887 -26.081,27.721 -26.116,27.756l-10.503,-9.888Zm181.423,-65.366l16.583,-36.892l1.057,-3.273l-0.299,3.413l1.744,49.3c5.816,0.543 11.825,1.348 17.746,2.328l-2.696,-73.014c-8.283,-0.91 -16.53,-1.558 -24.777,-1.908l-16.336,40.27l-0.582,2.993l-0.581,-2.993l-16.319,-40.27c-8.247,0.35 -16.494,0.998 -24.777,1.908l-2.696,73.014c5.921,-0.98 11.93,-1.768 17.746,-2.328l1.744,-49.3l-0.299,-3.413l1.057,3.273l16.583,36.892l15.102,0l0,0Zm137.72,76.322c4.07,4.34 9.939,11.341 13.234,15.593l60.692,-38.257c-3.031,-3.938 -7.86,-9.923 -11.472,-14.141l-38.435,25.237l-2.626,2.24l1.956,-2.835l16.971,-33.637l-12.001,-11.918l-33.888,16.853l-2.855,1.943l2.273,-2.608l25.43,-38.152c-4.476,-3.78 -8.776,-7.246 -14.257,-11.446l-38.523,60.221c4.882,3.728 11.314,9.206 15.42,12.933l36.267,-18.691l2.326,-1.697l-1.709,2.31l-18.803,36.052Z"
         style="fill:#6f6f6f;fill-rule:nonzero;" />
   </g>
 </svg>
--- a/public/logos/dalnoboy-service.svg
+++ b/public/logos/dalnoboy-service.svg
--- a/public/logos/fiat.svg
+++ b/public/logos/fiat.svg
@@ -0,0 +1,5 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 555.61293 420.69841" height="100%" width="100%">
  <path fill="currentColor" fill-rule="evenodd"
    d="M188.25961,110.03541h60.35085V530.73382H188.25961Zm258.71532,0v50.76074h46.78945V530.73382h58.47326V160.79615H598.268V110.03541ZM42.65507,530.73382h58.47481V339.87506h49.801V289.80989h-49.801V160.79615h64.96737V110.03541H42.65507ZM454.727,503.17571q.01858,13.82864.01549,27.55811H400.0476q-.072-23.873-.10844-47.98231c-.04492-16.04781-.12083-32.1235-.29434-48.1442-.34546-32.01041-1.07977-63.89534-2.75287-94.73225h-64.3291V530.73382H280.043V110.03541H403.44492a314.79248,314.79248,0,0,1,18.95559,44.95679,441.48955,441.48955,0,0,1,13.19735,48.70654c3.58477,16.748,6.43523,34.01736,8.72645,51.58877,2.29121,17.566,4.034,35.53864,5.38025,53.67162,1.34623,18.12369,2.30516,36.56186,3.00228,55.01785.69713,18.43739,1.14174,37.1366,1.433,55.69483.29124,18.5133.43687,37.3225.51432,55.76532Q454.71224,489.34128,454.727,503.17571ZM393.16621,289.80989c-4.70017-48.10237-12.762-92.62384-26.72156-129.01374h-33.8818V289.80989Z"
    transform="translate(-42.65507 -110.03541)" />
 </svg>
--- a/public/logos/ford.svg
+++ b/public/logos/ford.svg
--- a/public/logos/gitea.svg
+++ b/public/logos/gitea.svg
@@ -1,5 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" style="enable-background:new 0 0 640 640;" xml:space="preserve"
+<svg xmlns="http://www.w3.org/2000/svg" height="100%" width="100%" viewBox="5.67 143.05 628.65 387.55">
    viewBox="5.67 143.05 628.65 387.55">
    <g>
        <path id="teabag" fill="#FFF"
            d="M395.9,484.2l-126.9-61c-12.5-6-17.9-21.2-11.8-33.8l61-126.9c6-12.5,21.2-17.9,33.8-11.8   c17.2,8.3,27.1,13,27.1,13l-0.1-109.2l16.7-0.1l0.1,117.1c0,0,57.4,24.2,83.1,40.1c3.7,2.3,10.2,6.8,12.9,14.4   c2.1,6.1,2,13.1-1,19.3l-61,126.9C423.6,484.9,408.4,490.3,395.9,484.2z">
--- a/public/logos/mikrotik.svg
+++ b/public/logos/mikrotik.svg
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 1041.73 179.59" overflow="visible"
+<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1041.73 179.59" overflow="visible"
 	xml:space="preserve">
 	<path fill="currentColor" d="M646.69,53.92l0,10.04c0,1.87-1.54,3.37-3.41,3.3c-2.85-0.11-6.83-0.25-9.27-0.29
 	c-13.63,0-21.15,8.13-21.15,22.9v36.6c0,1.82-1.48,3.3-3.3,3.3H597.6c-1.82,0-3.29-1.48-3.29-3.3V52.98c0-1.82,1.48-3.3,3.29-3.3
--- a/public/logos/okko.svg
+++ b/public/logos/okko.svg
@@ -0,0 +1,7 @@
 <svg data-v-3153e3cf="" width="100%" height="100%" viewBox="0 0 62 80" fill="none" xmlns="http://www.w3.org/2000/svg">
    <g fill="currentColor">
        <path
            d="M28.06 55.617h-1.209c-1.41 0-2.418 1.21-2.216 2.62h6.045c1.814-1.814 3.829-3.224 6.045-4.232-.604-2.418-1.007-5.038-.806-7.456-1.813.202-3.425.403-5.239 1.008-.604.201-.806.604-.604 1.209l1.813 4.232c-1.209.806-2.216 1.612-3.224 2.62h-.604zm16.121-23.98c-.403.806-.403 1.814.403 2.62 1.612 1.41 3.426 2.217 4.434 4.232.604 1.007 1.41 3.022-.403 3.224-1.613.201-4.03-1.41-5.441-2.418.604.806.806 1.813 1.209 2.62.201.402.403.604.604.604 1.612.806 4.232 1.41 5.441-.202 1.21-1.41.806-3.224-.403-4.836-1.209-2.015-3.224-2.62-4.635-4.232-.201-.201-.403-.604-.201-.806.201-.604.806-.806 1.41-.806.807-.201 1.814-.403 2.419-.604.604-.403.806-1.008 1.007-1.41l.202-1.008c-1.41.403-3.023.806-4.232 1.41-.403.403-1.41 1.008-1.814 1.612zm-20.755-8.463c2.62-4.635 5.642-9.068 8.866-13.3.605-2.015.202-3.627-.604-5.24l-1.612-3.626a144.276 144.276 0 00-9.068 17.531c-.403.806-.202 1.814.403 2.418.604.605 1.41 1.41 2.015 2.217zm-9.471 35.063c5.239-7.456 13.702-12.292 22.77-12.695.806 2.62 2.217 5.037 3.83 7.254 3.022-.605 6.044-.403 8.866.403l.806 2.015c0 .202 0 .403-.202.403h-.806c-1.41 0-2.418 1.21-2.217 2.62h5.643c.806 0 1.41-.806 1.209-1.612l-2.418-6.247c-1.612-.605-3.224-.806-4.837-1.008l-3.425-8.866c-.605-1.612-2.62-2.418-4.03-2.821-1.612-.403-3.628-.605-5.441-.403 2.015-1.008 4.03-2.016 6.247-2.822 1.209-.403 2.015-1.41 2.418-2.418.403-1.007.604-1.813 1.007-2.82-1.813.805-3.627 1.611-5.44 2.619l3.627-2.418c1.612-1.008 2.418-2.015 2.82-3.627.202-1.21.404-2.217.605-3.426-2.216.806-4.634 2.015-6.65 3.022 1.008-.806 2.62-1.813 3.628-2.418 2.216-1.41 3.425-3.627 3.627-6.247V13.3c-3.023 1.813-6.045 3.627-8.867 5.844 1.612-1.612 3.225-3.225 5.038-4.635 2.62-2.418 3.627-5.643 3.023-9.068-.403-1.814-.806-3.627-1.41-5.441-3.426 3.224-6.65 6.851-9.673 10.479-3.224 4.03-6.247 8.463-9.068 12.896-.403.806-.403 1.612 0 2.217 1.007 1.41 2.015 3.023 2.418 4.635 1.209 4.634-1.21 6.045-3.627 7.859-.605.403-.605 0-.403-.202l.604-.604c1.814-1.613 2.015-4.635.806-6.852-1.612-2.82-3.828-5.44-6.448-7.456-.403 1.008-1.008 2.015-2.62 3.023-1.007.604-3.224 2.217-5.037 4.836.806 1.21 1.612 2.015 2.82 2.821.404-.403.807-.806 1.411-1.209.403-.403 1.008-.201 1.21.202.402-.403.402.201 0 .604l-.404.403c-.403.403-1.007.202-1.209-.201 0 0 0-.202-.201-.202l-.403.403c.403.806 1.007 2.217 1.209 2.217.201 0 .201 0 .403-.202l1.612-1.41c0-.202.201 0 .201.201-1.612 3.023-3.425 6.65-4.433 9.875-.201.604 0 1.209.202 1.612.806 1.41 2.216 2.82 2.62 3.224-1.411 1.813-2.62 3.829-3.628 5.844-.201.403-.604.604-1.209.604H8.917c-1.41 0-2.418 1.21-2.217 2.62h7.255zm16.322 7.859h-4.03L20.2 71.939v-5.843h-3.224v13.501h3.224V75.97l2.217-2.015 4.03 5.844h4.232l-5.642-8.061 5.24-5.642zm16.121 0h-4.03l-6.046 5.843v-5.843h-3.224v13.501h3.224V75.97l2.217-2.015 4.03 5.844h4.232l-5.642-8.061 5.239-5.642zm-35.869 0c-1.008-.202-2.217-.403-3.224-.403-1.008 0-2.217.201-3.224.403a4.77 4.77 0 00-3.628 3.627c-.604 2.217-.604 4.232 0 6.448a4.77 4.77 0 003.628 3.627c1.007 0 2.216.202 3.224.202 1.007 0 2.216-.201 3.224-.403a4.77 4.77 0 003.627-3.627c.605-2.217.605-4.232 0-6.449-.403-1.612-1.813-3.022-3.627-3.425zm.604 9.068c-.201.604-.604 1.209-1.41 1.209-1.612.403-3.224.403-5.038 0-.604-.202-1.209-.605-1.41-1.21a9.823 9.823 0 010-4.835c.201-.605.604-1.21 1.41-1.21 1.612-.403 3.224-.403 5.038 0 .604.202 1.209.605 1.41 1.21a9.824 9.824 0 010 4.836zm49.975-5.643a4.77 4.77 0 00-3.627-3.627c-1.007-.201-2.217-.403-3.224-.403-1.008 0-2.217.202-3.224.403a4.77 4.77 0 00-3.627 3.627c-.605 2.217-.605 4.232 0 6.449a4.77 4.77 0 003.627 3.627c1.007.202 2.216.403 3.224.403s2.217-.201 3.224-.403a4.77 4.77 0 003.627-3.627c.605-2.015.605-4.232 0-6.449zm-3.022 5.643c-.202.604-.605 1.209-1.41 1.209-1.613.403-3.225.403-5.039 0-.604-.202-1.209-.605-1.41-1.21a9.824 9.824 0 010-4.835c.201-.605.604-1.21 1.41-1.21 1.612-.403 3.224-.403 5.038 0 .605.202 1.21.605 1.41 1.21a9.822 9.822 0 010 4.836z">
        </path>
    </g>
 </svg>
--- a/public/logos/sainsburys.svg
+++ b/public/logos/sainsburys.svg
@@ -0,0 +1,6 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 96 19">
    <g fill="currentColor" fill-rule="evenodd">
        <path
            d="M95.113 4.578c-3.03-1.301-7.086-.602-7.086 2.789 0 3.825 5.875 3.03 5.875 5.099 0 1.661-2.775 1.829-4.78.24-.14-.12-.28-.19-.443-.19-.233 0-.372.095-.372.431v.937c0 .267.07.482.35.626C91.243 15.713 96 15.739 96 11.31c0-3.8-5.944-2.934-5.944-4.833 0-1.563 2.913-1.418 4.591-.242.14.096.327.193.442.193.233 0 .374-.097.374-.432v-.795c0-.265-.07-.505-.35-.624M87.84 4.213c1.091 0 2.32-4.213.302-4.213h-1.09c-.255 0-.301.19-.301.334 0 .288.694 1.006.694 1.987 0 1.004-.37 1.364-.37 1.676 0 .121.116.216.278.216h.487M81.925 11.679l-.14-.457-2.217-6.743c-.07-.192-.162-.266-.373-.266h-2.38c-.14 0-.21.074-.21.218 0 .072.023.145.117.385l3.873 9.704c.654 1.639-1.26 2.818-3.104 2.289-.28-.073-.466-.145-.723-.145-.162 0-.303.169-.303.336v1.374c0 .29.187.626 1.213.626 2.474 0 3.804-1.3 4.994-4.359l3.826-9.897c.047-.144.093-.216.093-.313a.214.214 0 0 0-.209-.218h-1.658c-.162 0-.279.098-.326.266l-2.286 6.743-.187.457M72.278 7.438c0-1.161.396-1.887 2.82-1.234.302.073.49.145.746.145.161 0 .302-.167.302-.337V4.584c0-.242-.163-.433-.467-.507-1.677-.412-2.702.385-3.564 1.234l-.046-.026v-.798c0-.168-.117-.291-.28-.291h-2.027c-.118 0-.234.123-.234.291v10.259c0 .165.116.289.234.289h2.235c.165 0 .281-.124.281-.29V7.439M67.535 14.754V4.504c0-.168-.117-.291-.234-.291h-2.244c-.164 0-.28.123-.28.291v8.266c-.444.266-1.38.749-2.175.749-1.542 0-1.637-.964-1.637-1.788V4.504c0-.168-.117-.291-.233-.291h-2.244c-.165 0-.282.123-.282.291v7.468c0 1.957 1.006 3.31 3.251 3.31 1.285 0 2.641-.652 3.343-1.085h.047v.557c0 .165.116.288.28.288h2.174c.117 0 .234-.123.234-.288M47.123.457c0-.17.116-.292.233-.292h2.24c.162 0 .278.121.278.292v4.829-.024c.444-.386 1.47-1.233 3.058-1.233 2.403 0 3.918 2.174 3.918 5.072 0 3.718-2.495 6.182-5.575 6.182-1.68 0-2.917-.605-3.733-1.258-.35-.264-.42-.72-.42-1.108V.457zm3.08 13.257c.232.144.582.264 1.258.264 1.494 0 2.543-1.593 2.543-4.296 0-1.016-.21-3.867-2.333-3.867-.839 0-1.446.485-1.797.75v6.52c0 .22.048.435.328.63zM44.962 4.578c-3.03-1.301-7.088-.602-7.088 2.789 0 3.825 5.875 3.03 5.875 5.099 0 1.661-2.775 1.829-4.78.24-.14-.12-.28-.19-.442-.19-.233 0-.373.095-.373.431v.937c0 .267.07.482.35.626 2.587 1.203 7.343 1.229 7.343-3.199 0-3.8-5.945-2.934-5.945-4.833 0-1.563 2.914-1.418 4.594-.242.14.096.325.193.442.193.233 0 .374-.097.374-.432v-.795c0-.265-.07-.505-.35-.624M27.11 4.496v10.25c0 .165.116.289.233.289h2.245c.163 0 .28-.124.28-.289V6.48c.445-.267 1.38-.749 2.175-.749 1.544 0 1.637.966 1.637 1.787v7.23c0 .164.116.288.234.288h2.245c.162 0 .28-.124.28-.289V7.277c0-1.958-1.006-3.312-3.251-3.312-1.286 0-2.642.653-3.344 1.089H29.8v-.558c0-.167-.117-.29-.281-.29h-2.175c-.117 0-.233.123-.233.29M22.086 4.504v10.242c0 .165.116.289.23.289h2.205c.16 0 .276-.124.276-.289V4.504c0-.168-.115-.291-.276-.291h-2.205c-.114 0-.23.123-.23.29M23.425.083c-1.013 0-1.498.629-1.498 1.356 0 .87.599 1.452 1.498 1.452s1.452-.582 1.452-1.452c0-.727-.484-1.356-1.452-1.356M15.89 3.965c-1.258 0-2.702.267-3.634.747a.64.64 0 0 0-.348.578v1.083c0 .34.256.482.396.482.28 0 .489-.265.629-.36.86-.601 1.722-1.013 2.864-1.013 1.419 0 1.629.963 1.629 2.144l-.005.044c0 .552-.181.654-2.206.92-1.235.168-4.052.746-4.052 3.37 0 2.167 1.676 3.323 3.632 3.323 1.071 0 1.956-.484 2.701-1.156l.046.625c0 .169.117.289.233.289h2.118c.163 0 .28-.12.28-.289V7.265c0-1.951-1.002-3.3-4.284-3.3zm1.49 8.765c0 .315-.795 1.162-1.87 1.162-1.238 0-1.706-.92-1.706-1.837 0-1.306.981-2.513 3.576-2.513v3.188zM.397 14.403c3.916 1.902 9.49.794 9.49-4.046 0-4.456-7.391-4.169-7.391-6.916 0-1.107 1.026-1.853 2.33-1.853 1.167 0 2.053.41 2.986 1.11.257.19.42.312.629.312.257 0 .327-.17.327-.387V1.228c0-.219-.046-.34-.257-.435C7.718.48 6.319.165 4.78.165 1.68.165 0 2.142 0 4.382c0 4.866 7.275 3.856 7.275 7.155 0 2-2.797 3.396-6.038 1.058-.304-.216-.444-.336-.654-.336-.396 0-.467.217-.467.434v1.227c0 .217.048.339.281.483" />
    </g>
 </svg>
--- a/public/logos/shkafnik.svg
+++ b/public/logos/shkafnik.svg
@@ -1,29 +1,122 @@
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+<svg
-	 viewBox="0 0 235.8 171" style="enable-background:new 0 0 235.8 171;" xml:space="preserve">
+	xmlns="http://www.w3.org/2000/svg"
 	xmlns:xlink="http://www.w3.org/1999/xlink"
 	x="0px" y="0px"
 	viewBox="0 0 235.8 171">
 	<style type="text/css">
-	.st0{fill:#3C3C3B;}
+		.st0 {
-	.st1{fill:#95C11F;}
+			fill: #3C3C3B;
-	.st2{fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;}
+		}
-	.st3{fill-rule:evenodd;clip-rule:evenodd;fill:url(#SVGID_1_);}
+
-	.st4{fill-rule:evenodd;clip-rule:evenodd;fill:url(#SVGID_2_);}
+		.st1 {
-	.st5{fill:url(#SVGID_3_);}
+			fill: #95C11F;
-	.st6{fill:url(#SVGID_4_);}
+		}
-	.st7{fill:url(#SVGID_5_);}
+
-	.st8{fill:url(#SVGID_6_);}
+		.st2 {
-	.st9{fill:url(#SVGID_7_);}
+			fill-rule: evenodd;
-	.st10{fill:url(#SVGID_8_);}
+			clip-rule: evenodd;
-	.st11{fill:url(#SVGID_9_);}
+			fill: #FFFFFF;
-	.st12{fill:#878787;}
+		}
-	.st13{fill-rule:evenodd;clip-rule:evenodd;fill:#706F6F;}
+
-	.st14{fill-rule:evenodd;clip-rule:evenodd;fill:url(#SVGID_10_);}
+		.st3 {
-	.st15{fill-rule:evenodd;clip-rule:evenodd;fill:#3C3C3B;}
+			fill-rule: evenodd;
-	.st16{fill-rule:evenodd;clip-rule:evenodd;fill:url(#SVGID_11_);}
+			clip-rule: evenodd;
-	.st17{opacity:0.8;}
+			fill: url(#SVGID_1_);
-	.st18{fill-rule:evenodd;clip-rule:evenodd;fill:url(#SVGID_12_);}
+		}
-	.st19{fill-rule:evenodd;clip-rule:evenodd;fill:url(#SVGID_13_);}
+
-	.st20{fill-rule:evenodd;clip-rule:evenodd;fill:#95C11F;}
+		.st4 {
-	.st21{fill-rule:evenodd;clip-rule:evenodd;fill:url(#SVGID_14_);}
+			fill-rule: evenodd;
-	.st22{fill:url(#SVGID_15_);}
+			clip-rule: evenodd;
 			fill: url(#SVGID_2_);
 		}
 		.st5 {
 			fill: url(#SVGID_3_);
 		}
 		.st6 {
 			fill: url(#SVGID_4_);
 		}
 		.st7 {
 			fill: url(#SVGID_5_);
 		}
 		.st8 {
 			fill: url(#SVGID_6_);
 		}
 		.st9 {
 			fill: url(#SVGID_7_);
 		}
 		.st10 {
 			fill: url(#SVGID_8_);
 		}
 		.st11 {
 			fill: url(#SVGID_9_);
 		}
 		.st12 {
 			fill: #878787;
 		}
 		.st13 {
 			fill-rule: evenodd;
 			clip-rule: evenodd;
 			fill: #706F6F;
 		}
 		.st14 {
 			fill-rule: evenodd;
 			clip-rule: evenodd;
 			fill: url(#SVGID_10_);
 		}
 		.st15 {
 			fill-rule: evenodd;
 			clip-rule: evenodd;
 			fill: #3C3C3B;
 		}
 		.st16 {
 			fill-rule: evenodd;
 			clip-rule: evenodd;
 			fill: url(#SVGID_11_);
 		}
 		.st17 {
 			opacity: 0.8;
 		}
 		.st18 {
 			fill-rule: evenodd;
 			clip-rule: evenodd;
 			fill: url(#SVGID_12_);
 		}
 		.st19 {
 			fill-rule: evenodd;
 			clip-rule: evenodd;
 			fill: url(#SVGID_13_);
 		}
 		.st20 {
 			fill-rule: evenodd;
 			clip-rule: evenodd;
 			fill: #95C11F;
 		}
 		.st21 {
 			fill-rule: evenodd;
 			clip-rule: evenodd;
 			fill: url(#SVGID_14_);
 		}
 		.st22 {
 			fill: url(#SVGID_15_);
 		}
 	</style>
 	<g>
 		<g>
@@ -41,7 +134,8 @@
 			c7.5,1.6,16.5,3.6,18.3,4.3c1.4,0.5,2.7,1.4,3.3,2.8c0.4,0.8,0.5,1.7,0.3,2.5c-0.2,0.9-0.7,1.6-1.3,2.2c-0.7,0.8-1.4,1.5-2.1,2.2
 			c-0.6,0.5-1.2,1.1-1.8,1.6c-7.3,6.1-13.1,9.7-18.9,12.7v46l-52.7,16H62.4z" />
 			<polygon class="st2" points="101.7,142.6 84.8,147.3 84.8,68.4 101.7,76.8 		" />
-		<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="45.1856" y1="137.0049" x2="99.5581" y2="82.6324">
+			<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="45.1856" y1="137.0049" x2="99.5581"
 				y2="82.6324">
 				<stop offset="0" style="stop-color:#BAE3FA" />
 				<stop offset="6.445225e-002" style="stop-color:#CCEAFC" />
 				<stop offset="0.1784" style="stop-color:#E3F3FE" />
@@ -51,7 +145,8 @@
 				<stop offset="1" style="stop-color:#B5DEF8" />
 			</linearGradient>
 			<polygon class="st3" points="84.3,67.4 84.3,148.4 63.2,155 63.2,68.4 		" />
-		<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="85.5477" y1="126.4451" x2="130.384" y2="81.6087">
+			<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="85.5477" y1="126.4451" x2="130.384"
 				y2="81.6087">
 				<stop offset="0" style="stop-color:#BAE3FA" />
 				<stop offset="6.445225e-002" style="stop-color:#CCEAFC" />
 				<stop offset="0.1784" style="stop-color:#E3F3FE" />
@@ -62,26 +157,30 @@
 			</linearGradient>
 			<polygon class="st4" points="115.8,67 115.9,138.8 101.9,142.8 102.3,67 		" />
-			<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="223.0337" y1="398.5147" x2="223.0337" y2="346.6498" gradientTransform="matrix(0 1 -1 0 462.5497 -73.9339)">
+			<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="223.0337" y1="398.5147" x2="223.0337"
 				y2="346.6498" gradientTransform="matrix(0 1 -1 0 462.5497 -73.9339)">
 				<stop offset="0" style="stop-color:#777776" />
 				<stop offset="0.3251" style="stop-color:#B3B3B2" />
 				<stop offset="0.399" style="stop-color:#D0D0D0" />
 				<stop offset="1" style="stop-color:#757474" />
 			</linearGradient>
 			<polygon class="st5" points="64,159.6 64,153.3 115.9,138.6 115.9,144 		" />
-		<linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="84.3487" y1="108.7009" x2="85.1958" y2="108.7009">
+			<linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="84.3487" y1="108.7009" x2="85.1958"
 				y2="108.7009">
 				<stop offset="0" style="stop-color:#706F6F" />
 				<stop offset="1" style="stop-color:#9D9D9C" />
 			</linearGradient>
 			<rect x="84.3" y="67.4" class="st6" width="0.8" height="82.6" />
-		<linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="101.714" y1="106.2443" x2="102.5611" y2="106.2443">
+			<linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="101.714" y1="106.2443" x2="102.5611"
 				y2="106.2443">
 				<stop offset="0" style="stop-color:#706F6F" />
 				<stop offset="1" style="stop-color:#9D9D9C" />
 			</linearGradient>
 			<rect x="101.7" y="67.4" class="st7" width="0.8" height="77.6" />
 			<polygon class="st0" points="64,160.5 64,154.1 115.9,139.5 115.9,144.9 		" />
-			<linearGradient id="SVGID_6_" gradientUnits="userSpaceOnUse" x1="224.366" y1="398.5147" x2="224.366" y2="346.6498" gradientTransform="matrix(0 1 -1 0 462.5497 -73.9339)">
+			<linearGradient id="SVGID_6_" gradientUnits="userSpaceOnUse" x1="224.366" y1="398.5147" x2="224.366"
 				y2="346.6498" gradientTransform="matrix(0 1 -1 0 462.5497 -73.9339)">
 				<stop offset="0" style="stop-color:#3A3938" />
 				<stop offset="0.3251" style="stop-color:#B3B3B2" />
 				<stop offset="0.399" style="stop-color:#D0D0D0" />
@@ -89,7 +188,8 @@
 			</linearGradient>
 			<polygon class="st8" points="64,160.9 64,154.6 115.9,139.9 115.9,145.3 		" />
-			<linearGradient id="SVGID_7_" gradientUnits="userSpaceOnUse" x1="222.0613" y1="373.4506" x2="227.9317" y2="371.7673" gradientTransform="matrix(0 1 -1 0 462.5497 -73.9339)">
+			<linearGradient id="SVGID_7_" gradientUnits="userSpaceOnUse" x1="222.0613" y1="373.4506" x2="227.9317"
 				y2="371.7673" gradientTransform="matrix(0 1 -1 0 462.5497 -73.9339)">
 				<stop offset="2.463050e-002" style="stop-color:#3A3938" />
 				<stop offset="0.1576" style="stop-color:#454444" />
 				<stop offset="0.1828" style="stop-color:#424241" />
@@ -107,7 +207,8 @@
 				<stop offset="1" style="stop-color:#706F6F" />
 			</linearGradient>
 			<polygon class="st9" points="64,161.7 64,155.3 115.9,140.6 115.9,146.1 		" />
-		<linearGradient id="SVGID_8_" gradientUnits="userSpaceOnUse" x1="37.7973" y1="115.0491" x2="63.21" y2="115.0491">
+			<linearGradient id="SVGID_8_" gradientUnits="userSpaceOnUse" x1="37.7973" y1="115.0491" x2="63.21"
 				y2="115.0491">
 				<stop offset="2.463050e-002" style="stop-color:#3A3938" />
 				<stop offset="0.1576" style="stop-color:#454444" />
 				<stop offset="0.1828" style="stop-color:#424241" />
@@ -125,7 +226,8 @@
 				<stop offset="1" style="stop-color:#706F6F" />
 			</linearGradient>
 			<polygon class="st10" points="63.2,161.7 37.8,140.8 37.8,70.6 63.2,68.4 		" />
-		<linearGradient id="SVGID_9_" gradientUnits="userSpaceOnUse" x1="63.21" y1="115.0491" x2="64.0571" y2="115.0491">
+			<linearGradient id="SVGID_9_" gradientUnits="userSpaceOnUse" x1="63.21" y1="115.0491" x2="64.0571"
 				y2="115.0491">
 				<stop offset="0" style="stop-color:#706F6F" />
 				<stop offset="1" style="stop-color:#000000" />
 			</linearGradient>
@@ -136,7 +238,9 @@
 				c-0.9-0.5-2.1-0.1-2.8,1c-0.2,0.3-0.3,0.6-0.3,0.9c0,0,0,0,0,0c-0.5,1.2-4.6-0.1-4.6-0.1C79.8,123.6,82,123,83,122.4
 				C83,122.4,83,122.4,83,122.4z" />
-				<radialGradient id="SVGID_10_" cx="35.6766" cy="-1688.7755" r="1.5343" gradientTransform="matrix(0.8693 0.4943 -0.64 1.1254 -1028.9938 2002.7954)" gradientUnits="userSpaceOnUse">
+				<radialGradient id="SVGID_10_" cx="35.6766" cy="-1688.7755" r="1.5343"
 					gradientTransform="matrix(0.8693 0.4943 -0.64 1.1254 -1028.9938 2002.7954)"
 					gradientUnits="userSpaceOnUse">
 					<stop offset="0" style="stop-color:#BDBCBC" />
 					<stop offset="1" style="stop-color:#666665" />
 				</radialGradient>
@@ -150,7 +254,9 @@
 				c0.8-0.4,1.8,0,2.3,0.9c0.1,0.3,0.2,0.5,0.3,0.8c0,0,0,0,0,0c0.5,1,2.5-0.4,2.5-0.4C106.7,121.2,104.7,120.8,103.9,120.3
 				C103.9,120.3,103.9,120.3,103.9,120.3z" />
-				<radialGradient id="SVGID_11_" cx="296.9223" cy="-1344.4767" r="1.6453" gradientTransform="matrix(-0.7182 0.4084 0.5069 0.8914 999.733 1195.355)" gradientUnits="userSpaceOnUse">
+				<radialGradient id="SVGID_11_" cx="296.9223" cy="-1344.4767" r="1.6453"
 					gradientTransform="matrix(-0.7182 0.4084 0.5069 0.8914 999.733 1195.355)"
 					gradientUnits="userSpaceOnUse">
 					<stop offset="0" style="stop-color:#BDBCBC" />
 					<stop offset="1" style="stop-color:#666665" />
 				</radialGradient>
@@ -162,8 +268,10 @@
 			<g>
 				<polygon class="st1" points="83.4,140.1 75.1,142 75.1,89.4 68.7,89.4 68.7,149.6 83.4,145.8 			" />
 				<g>
-				<polygon class="st1" points="100.7,136 95.9,137.2 95.8,89.5 90,89.5 89.9,138.6 86.1,139.4 86.1,145.1 100.7,141.3 				"/>
+					<polygon class="st1"
-				<polygon class="st1" points="109.4,89.4 109.3,134 103.5,135.4 103.5,140.6 113,138.1 113,89.4 				"/>
+						points="100.7,136 95.9,137.2 95.8,89.5 90,89.5 89.9,138.6 86.1,139.4 86.1,145.1 100.7,141.3 				" />
 					<polygon class="st1"
 						points="109.4,89.4 109.3,134 103.5,135.4 103.5,140.6 113,138.1 113,89.4 				" />
 				</g>
 			</g>
 			<polygon class="st12" points="68.2,89.4 68.7,89.4 68.7,149.6 68.2,149.7 		" />
@@ -337,7 +445,8 @@ AAAAAAAAcAv/X4ABAB5K7LMsWsNHAAAAAElFTkSuQmCC" transform="matrix(0.24 0 0 0.24 0
 				</g>
 				<g>
-					<linearGradient id="SVGID_12_" gradientUnits="userSpaceOnUse" x1="123.5676" y1="43.4801" x2="209.8533" y2="43.4801" gradientTransform="matrix(-1 0 0 1 243.7973 0)">
+					<linearGradient id="SVGID_12_" gradientUnits="userSpaceOnUse" x1="123.5676" y1="43.4801"
 						x2="209.8533" y2="43.4801" gradientTransform="matrix(-1 0 0 1 243.7973 0)">
 						<stop offset="2.463050e-002" style="stop-color:#000000" />
 						<stop offset="5.907518e-002" style="stop-color:#393837" />
 						<stop offset="0.1305" style="stop-color:#727271" />
@@ -365,7 +474,8 @@ AAAAAAAAcAv/X4ABAB5K7LMsWsNHAAAAAElFTkSuQmCC" transform="matrix(0.24 0 0 0.24 0
 					<path class="st18" d="M34.3,73.3c-1.3,0,1.3-5.9,1.3-5.9L34,31.3c0,0,9.4-20,45.2-20.9c35.8-0.9,41,16.3,41,16.3l-1.6,46.9
 					C119.1,80.4,35.7,73.4,34.3,73.3z" />
-					<linearGradient id="SVGID_13_" gradientUnits="userSpaceOnUse" x1="164.6338" y1="108.6704" x2="164.6338" y2="65.7225" gradientTransform="matrix(-1 0 0 1 243.7973 0)">
+					<linearGradient id="SVGID_13_" gradientUnits="userSpaceOnUse" x1="164.6338" y1="108.6704"
 						x2="164.6338" y2="65.7225" gradientTransform="matrix(-1 0 0 1 243.7973 0)">
 						<stop offset="0" style="stop-color:#FFFFFF" />
 						<stop offset="0.1606" style="stop-color:#D1D1D1" />
 						<stop offset="0.3269" style="stop-color:#A3A3A2" />
@@ -375,12 +485,14 @@ AAAAAAAAcAv/X4ABAB5K7LMsWsNHAAAAAElFTkSuQmCC" transform="matrix(0.24 0 0 0.24 0
 						<stop offset="0.9043" style="stop-color:#151515" />
 						<stop offset="1" style="stop-color:#000000" />
 					</linearGradient>
-				<path class="st19" d="M135.5,87c6.4-5.3,4.2-6.6,3.3-7.8c-1-1.3-13.2-4.3-18.2-5.2c-5.1-1-22.4-4.6-53-7.5
+					<path class="st19"
 						d="M135.5,87c6.4-5.3,4.2-6.6,3.3-7.8c-1-1.3-13.2-4.3-18.2-5.2c-5.1-1-22.4-4.6-53-7.5
 					c-30.6-2.9-37.6,2.8-44.3,9.1c-6.7,6.3-4.8,15.7-3.9,17.6c5.1,10.6,18.5,15.4,18.5,15.4l0-13.1c-0.1-3.4,3.6-8.3,3.6-8.3
 					c3.8-6.1,25.2-8.8,49.8-4.9c24.6,4,27.6,5.8,27.3,9.1c-0.1,1.7-2.7,3.8-2.7,3.8v4.5C122.6,96.6,129.1,92.4,135.5,87z" />
 					<path class="st20" d="M118.1,73.2c0,0-24.6-18.5-66.5-8.5L118.1,73.2z" />
-					<linearGradient id="SVGID_14_" gradientUnits="userSpaceOnUse" x1="103.836" y1="73.2033" x2="222.802" y2="73.2033" gradientTransform="matrix(-1 0 0 1 243.7973 0)">
+					<linearGradient id="SVGID_14_" gradientUnits="userSpaceOnUse" x1="103.836" y1="73.2033" x2="222.802"
 						y2="73.2033" gradientTransform="matrix(-1 0 0 1 243.7973 0)">
 						<stop offset="0" style="stop-color:#EDEDED" />
 						<stop offset="3.354298e-002" style="stop-color:#DDDDDC" />
 						<stop offset="0.103" style="stop-color:#B1B0B0" />
@@ -408,7 +520,8 @@ AAAAAAAAcAv/X4ABAB5K7LMsWsNHAAAAAElFTkSuQmCC" transform="matrix(0.24 0 0 0.24 0
 				</g>
 			</g>
 		</g>
-	<linearGradient id="SVGID_15_" gradientUnits="userSpaceOnUse" x1="115.8462" y1="117.0116" x2="116.6933" y2="117.0116">
+		<linearGradient id="SVGID_15_" gradientUnits="userSpaceOnUse" x1="115.8462" y1="117.0116" x2="116.6933"
 			y2="117.0116">
 			<stop offset="0" style="stop-color:#706F6F" />
 			<stop offset="1" style="stop-color:#000000" />
 		</linearGradient>
--- a/public/logos/suzuki.svg
+++ b/public/logos/suzuki.svg
@@ -0,0 +1,17 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144 28">
  <g fill="#00368f">
    <rect x="138.06364" y="5.95997" width="5.93637" height="16.03085" />
    <polygon
      points="128.43102 21.99082 122.26057 16.12233 122.26057 21.99082 116.31824 21.99082 116.31824 5.95997 122.26057 5.95997 122.26057 11.65301 128.89495 5.95997 136.67496 5.95997 127.53718 13.76804 136.39792 21.99082 128.43102 21.99082" />
    <path
      d="M105.0573,22.60581c-8.16994,0-9.15016-3.41103-9.17666-5.97666-.01442-1.42581-.03136-4.05855-.03136-4.8569v-5.81564h5.68442v9.26336c0,2.35523,1.08684,3.40538,3.5236,3.40538,2.43723,0,3.52407-1.05015,3.52407-3.40538V5.9566h5.68473v5.81564c0,.78424-.01709,3.41698-.03167,4.8569-.0265,2.56564-1.00688,5.97666-9.17713,5.97666Z" />
    <polygon
      points="75.20953 21.99082 75.20953 18.67261 84.61007 9.89199 75.52169 9.89199 75.52169 5.95997 93.86465 5.95997 93.86465 9.28084 84.33491 18.04107 93.83439 18.04107 93.83439 21.99082 75.20953 21.99082" />
    <path
      d="M64.32688,22.60581c-8.17103,0-9.15079-3.41103-9.17697-5.97666-.01442-1.4186-.0312-4.05134-.0312-4.8569v-5.81564h5.68426v9.26336c0,2.35523,1.08684,3.40538,3.52391,3.40538s3.52391-1.05015,3.52391-3.40538V5.9566h5.6841v5.81564c0,.80556-.01678,3.43831-.0312,4.8569-.02618,2.56564-1.00594,5.97666-9.17681,5.97666Z" />
    <path
      d="M44.1849,22.37948c-8.50075,0-9.99006-2.60452-10.27259-5.44641h7.19144c.65238,1.89805,2.57316,1.89805,3.20909,1.89805.76919,0,2.54024-.13295,2.54024-1.36654,0-1.08025-1.20552-1.19659-3.03035-1.37219-.23831-.02289-.4887-.04704-.74991-.07463-5.84841-.61334-8.81777-1.59231-8.81777-5.24197,0-1.59012.87267-5.28885,8.9559-5.28885l.07322.00016c6.18221.0174,9.75127,1.9479,9.81446,5.30123h-6.60914c-.44653-1.58918-2.20911-1.82906-3.22962-1.82906-.39447,0-1.72668.04798-2.30616.66728-.19927.21291-.29021.47161-.27045.76919.05346.87298,1.711,1.06112,3.80942,1.29944.43147.04892.88208.10003,1.3413.15961,5.25608.6723,7.8109,2.3891,7.8109,5.24855,0,1.23139-.67308,5.25137-9.33517,5.27615h-.1248Z" />
  </g>
  <path fill="#de0039"
    d="M10.79075,6.13983l5.87702,3.94919c1.21775.8183,2.46441,1.61765,4.61253,1.61765,3.34385,0,6.32211-2.43131,6.32211-2.43131L13.79921,0s-1.50625,1.65691-6.23338,4.60268C2.6025,7.69576,0,8.59394,0,8.59394l17.81493,11.98074-1.17115.76751-5.7152-3.84043c-1.21178-.81428-2.46323-1.61685-4.61157-1.61685C2.9733,15.88491.00127,18.32277.00127,18.32277l13.80398,9.27589s1.50647-1.65698,6.2336-4.60274c4.96319-3.09301,7.56591-3.99126,7.56591-3.99126L9.62103,6.90833l1.16972-.7685Z" />
 </svg>
--- a/public/logos/suzuki_vertical.svg
+++ b/public/logos/suzuki_vertical.svg
@@ -0,0 +1,24 @@
 <svg viewBox="0 0 496.00001 332.42999" height="332.42999" width="496" xmlns="http://www.w3.org/2000/svg">
   <path id="refine_final" class="st0"
      d="m 223.59651,49.000052 46.92657,31.517149 c 9.72343,6.530577 19.67771,12.909917 36.82991,12.909917 26.69981,0 50.48049,-19.403463 50.48049,-19.403463 L 247.61833,1.481344e-4 c 0,0 -12.02703,13.2232368656 -49.772,36.7324318656 -39.63096,24.684824 -60.41129,31.852894 -60.41129,31.852894 l 142.24783,95.614216 -9.35135,6.12524 -45.63446,-30.64917 c -9.67576,-6.49849 -19.66829,-12.90352 -36.82225,-12.90352 -26.6987,0 -50.42964,19.45573 -50.42964,19.45573 l 110.22138,74.02775 c 0,0 12.0288,-13.22381 49.77376,-36.73293 39.62984,-24.68425 60.41193,-31.85289 60.41193,-31.85289 L 214.25658,55.133192 Z"
      style="fill:#de0039;stroke-width:7.98271" />
   <g id="g482" transform="matrix(4.5054987,0,0,4.5675933,-152.79187,228.99519)">
      <rect class="st1" x="138.06364" y="5.95997" width="5.9363699" height="16.030849" id="rect6"
         style="fill:#00368f" />
      <polygon class="st1"
         points="128.43102,21.99082 122.26057,16.12233 122.26057,21.99082 116.31824,21.99082 116.31824,5.95997 122.26057,5.95997 122.26057,11.65301 128.89495,5.95997 136.67496,5.95997 127.53718,13.76804 136.39792,21.99082 "
         id="polygon8" style="fill:#00368f" />
      <path class="st1"
         d="m 105.0573,22.60581 c -8.16994,0 -9.15016,-3.41103 -9.17666,-5.97666 -0.01442,-1.42581 -0.03136,-4.05855 -0.03136,-4.8569 V 5.95661 h 5.68442 v 9.26336 c 0,2.35523 1.08684,3.40538 3.5236,3.40538 2.43723,0 3.52407,-1.05015 3.52407,-3.40538 V 5.9566 h 5.68473 v 5.81564 c 0,0.78424 -0.0171,3.41698 -0.0317,4.8569 -0.0265,2.56564 -1.00688,5.97666 -9.17713,5.97666 z"
         id="path10" style="fill:#00368f" />
      <polygon class="st1"
         points="84.61007,9.89199 75.52169,9.89199 75.52169,5.95997 93.86465,5.95997 93.86465,9.28084 84.33491,18.04107 93.83439,18.04107 93.83439,21.99082 75.20953,21.99082 75.20953,18.67261 "
         id="polygon12" style="fill:#00368f" />
      <path class="st1"
         d="m 64.32688,22.60581 c -8.17103,0 -9.15079,-3.41103 -9.17697,-5.97666 -0.01442,-1.4186 -0.0312,-4.05134 -0.0312,-4.8569 V 5.95661 h 5.68426 v 9.26336 c 0,2.35523 1.08684,3.40538 3.52391,3.40538 2.43707,0 3.52391,-1.05015 3.52391,-3.40538 V 5.9566 h 5.6841 v 5.81564 c 0,0.80556 -0.01678,3.43831 -0.0312,4.8569 -0.02618,2.56564 -1.00594,5.97666 -9.17681,5.97666 z"
         id="path14" style="fill:#00368f" />
      <path class="st1"
         d="m 44.1849,22.37948 c -8.50075,0 -9.99006,-2.60452 -10.27259,-5.44641 h 7.19144 c 0.65238,1.89805 2.57316,1.89805 3.20909,1.89805 0.76919,0 2.54024,-0.13295 2.54024,-1.36654 0,-1.08025 -1.20552,-1.19659 -3.03035,-1.37219 -0.23831,-0.02289 -0.4887,-0.04704 -0.74991,-0.07463 -5.84841,-0.61334 -8.81777,-1.59231 -8.81777,-5.24197 0,-1.59012 0.87267,-5.28885 8.9559,-5.28885 l 0.07322,1.6e-4 c 6.18221,0.0174 9.75127,1.9479 9.81446,5.30123 H 46.48949 C 46.04296,9.19915 44.28038,8.95927 43.25987,8.95927 c -0.39447,0 -1.72668,0.04798 -2.30616,0.66728 -0.19927,0.21291 -0.29021,0.47161 -0.27045,0.76919 0.05346,0.87298 1.711,1.06112 3.80942,1.29944 0.43147,0.04892 0.88208,0.10003 1.3413,0.15961 5.25608,0.6723 7.8109,2.3891 7.8109,5.24855 0,1.23139 -0.67308,5.25137 -9.33517,5.27615 h -0.1248 z"
         id="path16" style="fill:#00368f" />
   </g>
 </svg>
--- a/public/logos/wog.svg
+++ b/public/logos/wog.svg
@@ -0,0 +1,12 @@
 <svg id="logo" viewBox="0 0 130 40" fill="none" stroke="none" height="100%" width="100%"
    xmlns="http://www.w3.org/2000/svg">
    <g>
        <path
            d="M79.37 12.49l-2.1 7.61c-.17.68-.79 3.47-1 5.52h-.18c-.2-2.23-.76-4.63-1-5.68l-1.67-7.46h-5.33l-1.68 7.46c-.23 1.05-.8 3.45-1 5.68h-.18c-.2-2.05-.82-4.85-1-5.52l-2.1-7.61H56l5.5 17.36c.68 2.13 1.79 3.24 3.7 3.24 1.88 0 3.08-1.17 3.55-3.24l.82-3.54c.36-1.49.86-3.65 1.09-5.29h.17c.23 1.64.73 3.8 1.08 5.3l.83 3.53c.5 2.07 1.68 3.24 3.55 3.24 1.91 0 3.03-1.11 3.7-3.24l5.5-17.36h-6.12zM96 12.05c-6.24 0-11.02 4.59-11.02 10.52S89.78 33.09 96 33.09c6.23 0 11.01-4.59 11.01-10.52.01-5.93-4.78-10.52-11-10.52zm0 15.93a5.36 5.36 0 01-5.45-5.41A5.36 5.36 0 0196 17.16a5.36 5.36 0 015.44 5.41 5.36 5.36 0 01-5.44 5.41zM129.8 21.06h-11.84v4.15h6.49c-.32 1.52-2.24 3.01-4.88 3.01-3.66 0-5.61-2.46-5.61-5.64a5.36 5.36 0 015.52-5.44c2.2 0 3.88 1.12 4.8 2.81l5.08-2.07c-1.8-3.51-5.11-5.81-9.87-5.81-6.17 0-11.01 4.56-11.01 10.52s4.64 10.52 11.01 10.52c6.99-.01 11.48-5.48 10.3-12.05z"
            fill="#009345"></path>
        <path d="M42.61 0a6.67 6.67 0 00-6 9.62l6 12.1 6-12.1a6.67 6.67 0 00-6-9.62z" fill="#8BC53F"></path>
        <path
            d="M21.23 29.02L15.77 40 .7 9.6A6.65 6.65 0 013.73.7a6.71 6.71 0 018.96 3.02l8.53 17.17a9.16 9.16 0 010 8.14zM39.18 29.02L33.72 40 18.65 9.6A6.65 6.65 0 0121.68.7a6.71 6.71 0 018.96 3.02l8.54 17.18a9.17 9.17 0 010 8.13z"
            fill="#009345"></path>
    </g>
 </svg>
--- a/public/logos/youtube.svg
+++ b/public/logos/youtube.svg
@@ -0,0 +1,15 @@
 <svg width="100%" height="100%" viewBox="0 0 2500 972" xmlns="http://www.w3.org/2000/svg">
    <path
        d="M2499.59,724.777c-0,136.518 -110.685,247.202 -247.203,247.202l-978.283,0c-136.517,0 -247.202,-110.684 -247.202,-247.202l-0,-477.575c-0,-136.517 110.685,-247.202 247.202,-247.202l978.263,-0c136.517,-0 247.202,110.685 247.202,247.202l0,477.575l0.021,-0Z"
        fill="#ec2027" fill-rule="nonzero" />
    <g>
        <path
            d="M1272.54,775.227l-0,-516.056l-102.074,0l-0,-102.074l292.584,0l0,102.074l-102.033,0l0,516.056l-88.477,-0Zm467.171,-464.205l0,464.205l-81.082,-0l-0,-46.124c-17.099,38.996 -42.087,58.484 -75.068,58.484c-53.107,-0 -79.681,-37.328 -79.681,-111.942l-0,-364.623l79.846,-0l0,303.317c0,24.885 1.422,42.663 4.285,53.375c5.13,18.458 15.388,27.708 30.736,27.708c16.603,-0 27.666,-10.012 33.207,-30.097c3.028,-11.536 4.594,-30.756 4.594,-57.784l0,-296.519l83.163,-0Zm71.318,464.205l-0,-618.13l82.71,0l-0,193.209c13.843,-34.443 37.245,-51.644 70.143,-51.644c42.025,-0 69.547,29.952 82.504,89.837c6.634,30.221 9.909,82.483 9.909,156.83c-0,72.183 -3.605,123.786 -10.795,154.81c-13.575,58.278 -41.365,87.427 -83.327,87.427c-35,0 -59.164,-20.291 -72.534,-60.914l0,48.534l-78.61,0.041Zm123.478,-386.398c-22.599,-0 -36.483,23.814 -41.654,71.421c-1.051,9.641 -1.545,43.734 -1.545,102.342c-0,45.196 0.927,73.398 2.802,84.646c5.376,34.485 18.849,51.768 40.438,51.768c20.126,0 32.321,-21.136 36.668,-63.407c1.051,-8.838 1.566,-39.161 1.566,-91.074c-0,-53.746 -0.433,-84.419 -1.257,-91.877c-4.367,-42.56 -16.686,-63.819 -37.018,-63.819Zm341.263,227.117l77.745,0c-0,2.143 0.103,5.15 0.309,9.023c0.247,3.873 0.329,6.901 0.329,9.023c0,53.499 -9.867,92.433 -29.623,116.927c-19.755,24.431 -50.388,36.668 -91.98,36.668c-43.013,-0 -73.996,-14.853 -92.907,-44.517c-15.038,-23.567 -24.596,-57.907 -28.757,-103.063c-1.855,-19.797 -2.782,-57.104 -2.782,-111.941c0,-44.126 0.927,-75.521 2.782,-94.226c3.728,-37.986 11.824,-66.847 24.411,-86.624c20.6,-32.342 53.684,-48.534 99.396,-48.534c44.043,0 76.2,17.511 96.573,52.49c16.481,28.325 24.68,85.47 24.68,171.517l-0,35.247l-162.351,-0c-0.597,5.109 -0.927,15.017 -0.927,29.705c0,34.547 1.422,59.185 4.326,73.893c5.974,30.262 18.335,45.383 37.04,45.383c27.83,-0 41.736,-30.324 41.736,-90.971Zm-82.854,-131.676l80.073,-0l-0,-19.612c-0,-26.698 -1.855,-45.65 -5.583,-56.856c-5.748,-17.881 -17.387,-26.822 -34.856,-26.822c-14.605,0 -25.029,6.139 -31.188,18.417c-7.396,15.223 -10.507,36.977 -9.25,65.261l0.433,6.407c0.247,4.532 0.371,8.94 0.371,13.205Z"
            fill="#fff" fill-rule="nonzero" />
    </g>
    <g>
        <path fill="#000" fill-rule="evenodd"
            d="M125.826,778.729l0,-263.559l-125.393,-358.073l98.716,0l72.327,233.854l71.38,-233.854l95.915,0l-123.148,358.052l-0,263.58l-89.797,-0Zm243.68,-233.194c0,-80.403 6.098,-137.404 18.314,-171.065c18.19,-49.996 54.178,-75.025 107.965,-75.025c53.746,-0 89.879,25.008 108.275,75.025c12.216,33.352 18.314,90.374 18.314,171.065c-0,80.649 -6.098,137.671 -18.314,171.002c-18.396,49.749 -54.508,74.634 -108.275,74.634c-53.787,0 -89.775,-25.008 -107.965,-75.026c-12.216,-33.331 -18.314,-90.228 -18.314,-170.61Zm85.264,6.035c0,57.805 0.309,89.22 0.927,94.329c4.306,41.653 17.469,62.48 39.47,62.48c22.022,0 35.474,-17.86 40.397,-53.602c1.03,-7.807 1.545,-36.956 1.545,-87.489l0,-45.547c0,-47.318 -0.618,-75.808 -1.833,-85.47c-5.171,-35.473 -18.334,-53.21 -39.491,-53.21c-20.579,-0 -33.434,15.615 -38.584,46.783c-1.627,9.929 -2.451,36.133 -2.451,78.59l0.02,43.136Zm465.709,-239.662l0,466.821l-81.535,-0l-0,-46.392c-17.202,39.223 -42.375,58.814 -75.48,58.814c-53.437,-0 -80.155,-37.513 -80.155,-112.539l0,-366.704l80.3,-0l-0,305.027c-0,25.05 1.442,42.91 4.305,53.643c5.15,18.581 15.471,27.892 30.9,27.892c16.687,0 27.831,-10.094 33.393,-30.261c3.049,-11.598 4.635,-30.942 4.635,-58.093l0,-298.208l83.637,-0Z"
            style="fill-rule:nonzero;" />
    </g>
 </svg>
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -1,7 +1,9 @@
 <script>
  import { onMount } from 'svelte';
-  import LogoGrid from './components/Grid.svelte';
+  import Grid from './components/Grid.svelte';
-  import LogoList from './components/List.svelte';
+  import List from './components/List.svelte';
  import Header from './components/Header.svelte';
  import Preview from './components/Preview.svelte';
  let viewMode = 'grid'; // 'grid' or 'list'
  let searchQuery = '';
@@ -12,6 +14,8 @@
  let allTags = [];
  let selectedTags = [];
  let tagDropdownOpen = false;
  let showModal = false;
  let selectedLogo = null;
  // Load logos from JSON file with cache busting
  onMount(async () => {
@@ -49,18 +53,26 @@
    mq.addEventListener('change', () => {
      if (theme === 'system') applyTheme();
    });
    // Open preview if URL contains anchor
    openLogoByAnchor(window.location.hash);
  });
-  $: {
+  // Make sure to apply theme whenever it changes
  $: if (theme) {
    console.log('[Theme] Theme changed:', theme);
    applyTheme();
  }
-  // Compute all unique tags as strings
+  // Compute all unique tags as objects with text and optional color
  $: allTags = Array.from(
-    new Set(
+    new Map(
-      logos.flatMap(logo => (logo.tags || []))
+      logos.flatMap(logo => (logo.tags || []).map(tag => {
-    )
+        if (typeof tag === 'string') return [tag, { text: tag }];
-  ).map(tag => typeof tag === 'object' ? tag.text : tag);
+        return [tag.text, tag];
      }))
    ).values()
  ).sort((a, b) => a.text.localeCompare(b.text));
  $: filteredLogos = logos.filter(logo => {
    const matchesSearch = logo.name.toLowerCase().includes(searchQuery.toLowerCase());
@@ -136,14 +148,20 @@
    if (theme === 'system') {
      effectiveTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
    }
    // Apply theme both ways for compatibility
    document.documentElement.setAttribute('data-theme', effectiveTheme);
    document.documentElement.className = effectiveTheme; // Add class-based theming
    console.log('[Theme] Applied theme:', effectiveTheme);
  }
  function setTheme(newTheme) {
    if (newTheme === 'light' || newTheme === 'dark' || newTheme === 'system') {
      theme = newTheme;
      localStorage.setItem('theme', newTheme);
-    console.log('[theme] setTheme:', newTheme);
+      console.log('[Theme] setTheme:', newTheme);
-    applyTheme();
+      // Apply theme immediately after setting
      setTimeout(() => applyTheme(), 0);
    }
  }
  function toggleTag(tag) {
@@ -176,7 +194,21 @@
  }
  function getTagObj(text) {
-    return { text };
+    return allTags.find(t => t.text === text);
  }
  function openPreview(logo) {
    selectedLogo = logo;
    showModal = true;
  }
  function openLogoByAnchor(hash) {
    if (!hash || !hash.startsWith('#preview-')) return;
    const anchor = decodeURIComponent(hash.replace('#preview-', '').replace(/-/g, ' '));
    const found = logos.find(l => l.name.replace(/\s+/g, '-').toLowerCase() === anchor.replace(/\s+/g, '-').toLowerCase());
    if (found) {
      openPreview(found);
    }
  }
  // Listen for outside click to close dropdown
@@ -188,84 +220,49 @@
 </script>
 <main class="container">
-  <header class="main-header">
+  <Header
-    <div class="header-row">
+    {logos}
-      <h1>Logo Gallery</h1>
+    {theme}
-      <span class="logo-count">{logos.length} images in gallery</span>
+    {setTheme}
-      <div class="theme-switcher">
+    {viewMode}
-        <div class="theme-switch-group">
+    {setGridView}
-          <button on:click={() => setTheme('system')} class:active={theme === 'system'} aria-label="System theme">
+    {setListView}
-            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="10" cy="10" r="8" stroke="currentColor" stroke-width="2"/><path d="M10 2a8 8 0 0 1 8 8" stroke="currentColor" stroke-width="2"/></svg>
+    bind:searchQuery
-          </button>
+    {allTags}
-          <button on:click={() => setTheme('light')} class:active={theme === 'light'} aria-label="Light mode">
+    {selectedTags}
-            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="10" cy="10" r="5" stroke="currentColor" stroke-width="2"/><path d="M10 1v2M10 17v2M3.22 3.22l1.42 1.42M15.36 15.36l1.42 1.42M1 10h2M17 10h2M3.22 16.78l1.42-1.42M15.36 4.64l1.42-1.42" stroke="currentColor" stroke-width="2"/></svg>
+    {tagDropdownOpen}
-          </button>
+    {toggleDropdown}
-          <button on:click={() => setTheme('dark')} class:active={theme === 'dark'} aria-label="Dark mode">
+    {addTag}
-            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15.5 13A7 7 0 0 1 7 4.5a7 7 0 1 0 8.5 8.5z" stroke="currentColor" stroke-width="2"/></svg>
+    {removeTag}
-          </button>
+    {toggleTag}
-        </div>
+    {getTagObj}
-      </div>
+    {closeDropdown}
-    </div>
+    {filteredLogos}
-    <div class="header-row header-controls">
+  />
-      <div class="search-bar">
+
-        <input type="text" placeholder="Search logos..." bind:value={searchQuery} />
+  <Preview
-      </div>
+    bind:show={showModal}
-      <div class="tag-filter">
+    bind:logo={selectedLogo}
-        {#each selectedTags as tagText}
+    {theme}
-          <button
+    {logos}
-            class="selected-tag"
+    openLogoByAnchor={openLogoByAnchor}
-            aria-label={`Remove tag: ${tagText}`}
+  />
            on:click={() => removeTag(tagText)}
          >
            <span>{tagText}</span>
            <span class="close">×</span>
          </button>
        {/each}
        <div class="tag-dropdown">
          <button class="dropdown-toggle" on:click={toggleDropdown} aria-label="Add tag filter">
            + Tag{selectedTags.length ? '' : 's'}
          </button>
          {#if tagDropdownOpen}
            <div class="dropdown-list">
              {#each allTags.filter(tag => !selectedTags.includes(tag)) as tag}
                <button
                  class="dropdown-tag"
                  on:click={() => toggleTag(tag)}
                >
                  {tag}
                </button>
              {/each}
              {#if allTags.filter(tag => !selectedTags.includes(tag)).length === 0}
                <span class="no-tags">No more tags</span>
              {/if}
            </div>
          {/if}
        </div>
      </div>
      <div class="view-toggle">
        <button class:active={viewMode === 'grid'} on:click={setGridView} aria-label="Grid view">
          <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="3" y="3" width="6" height="6" fill="currentColor"/><rect x="11" y="3" width="6" height="6" fill="currentColor"/><rect x="3" y="11" width="6" height="6" fill="currentColor"/><rect x="11" y="11" width="6" height="6" fill="currentColor"/></svg>
        </button>
        <button class:active={viewMode === 'list'} on:click={setListView} aria-label="List view">
          <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="4" y="5" width="12" height="2" fill="currentColor"/><rect x="4" y="9" width="12" height="2" fill="currentColor"/><rect x="4" y="13" width="12" height="2" fill="currentColor"/></svg>
        </button>
      </div>
    </div>
  </header>
  <div class="logos-container">
    {#if viewMode === 'grid'}
-      <LogoGrid
+      <Grid
        logos={filteredLogos}
        onCopy={copyUrl}
        onDownload={downloadLogo}
        theme={effectiveTheme}
        on:openPreview={e => openPreview(e.detail)}
      />
    {:else}
-      <LogoList
+      <List
        logos={filteredLogos}
        onCopy={copyUrl}
        onDownload={downloadLogo}
        on:openPreview={e => openPreview(e.detail)}
      />
    {/if}
  </div>
@@ -274,298 +271,3 @@
    <p>shadoll Logo Gallery. All logos are property of their respective owners.</p>
  </footer>
 </main>
 <style>
  :global(:root) {
    --color-bg: #fff;
    --color-text: #222;
    --color-card: #f8f8f8;
    --color-border: #ddd;
    --color-accent: #4f8cff;
  }
  :global([data-theme='dark']) {
    --color-bg: #181a1b;
    --color-text: #f3f3f3;
    --color-card: #23272a;
    --color-border: #333;
    --color-accent: #7da6ff;
  }
  :global(html), :global(body) {
    background: var(--color-bg);
    color: var(--color-text);
  }
  .main-header {
    margin-bottom: 1.5rem;
    background: var(--color-card);
    color: var(--color-text);
    border-radius: 8px;
    padding: 1.2rem 1rem 0.7rem 1rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  }
  .header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
  }
  .header-controls {
    margin-top: 0.5rem;
  }
  h1 {
    color: var(--color-accent);
    margin-bottom: 0;
    font-size: 1.3rem;
    font-weight: 700;
  }
  .logo-count {
    font-family: system-ui, Arial, sans-serif;
    font-size: 0.6rem;
    font-weight: normal;
    color: var(--color-text, #444);
    margin-left: 1rem;
    align-self: center;
    opacity: 0.7;
  }
  .search-bar {
    margin-bottom: 0;
    width: 100%;
    max-width: 350px;
  }
  .search-bar input {
    width: 100%;
    padding: 0.5rem 0.8rem;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    font-size: 1rem;
    background: var(--color-card);
    color: var(--color-text);
    transition: background 0.2s, color 0.2s;
  }
  .search-bar input::placeholder {
    color: #888;
    opacity: 1;
  }
  .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 .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-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-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: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;
  }
  .view-toggle {
    display: flex;
    gap: 0.2rem;
  }
  .view-toggle button {
    padding: 0.3rem 0.5rem;
    background: var(--color-card);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    font-size: 1rem;
    transition: background 0.2s, color 0.2s;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .view-toggle button.active,
  .view-toggle button:focus {
    background: var(--color-accent);
    color: #fff;
    font-weight: bold;
    outline: 2px solid var(--color-border);
  }
  .theme-switcher {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    margin-left: auto;
  }
  .theme-switch-group {
    display: flex;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--color-border, #ccc);
    background: var(--color-card, #fff);
  }
  .theme-switch-group button {
    background: none;
    border: none;
    color: var(--color-text);
    padding: 0.2em 0.7em;
    font-size: 1.1rem;
    border-radius: 0;
    transition: background 0.2s, color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .theme-switch-group button:first-child {
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
  }
  .theme-switch-group button:last-child {
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
  }
  .theme-switch-group button.active,
  .theme-switch-group button:focus {
    background: var(--color-accent);
    color: #fff;
    font-weight: bold;
    outline: 2px solid var(--color-border);
  }
  .theme-switch-group button:hover {
    background: var(--color-accent, #f0f0f0);
    color: var(--color-accent-text, #4f8cff);
  }
  @media (max-width: 700px) {
    .header-row {
      flex-direction: column;
      align-items: stretch;
      gap: 0.5rem;
    }
    .main-header {
      padding: 1rem 0.5rem 0.5rem 0.5rem;
    }
    h1 {
      font-size: 1.1rem;
    }
  }
  .logos-container {
    width: 100%;
  }
  :global(.logo-card), :global(.logo-item) {
    background: var(--color-card);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    transition: background 0.2s, color 0.2s;
  }
  footer {
    margin-top: 3rem;
    text-align: center;
    font-size: 0.9rem;
    color: #888;
    background: transparent;
  }
 </style>
--- a/src/components/Actions.svelte
+++ b/src/components/Actions.svelte
@@ -359,7 +359,7 @@
    right: 0;
    min-width: 160px;
    background: var(--color-card, #fff);
-    color: var(--color-text, #222);
+    color: var(--text-color, #222);
    border: 1px solid var(--color-border, #ddd);
    border-radius: 8px;
    box-shadow: 0 2px 16px 4px rgba(0,0,0,0.18);
--- a/src/components/Grid.svelte
+++ b/src/components/Grid.svelte
@@ -1,8 +1,9 @@
 <script>
  import Preview from './Preview.svelte';
  import Actions from './Actions.svelte';
-  import Row from './Row.svelte';
+  import InlineSvg from './InlineSvg.svelte';
  import { onMount, onDestroy } from 'svelte';
  import { getDefaultLogoColor, getThemeColor } from '../utils/colorTheme.js';
  export let logos = [];
  export let onCopy;
@@ -11,25 +12,185 @@
  let showModal = false;
  let selectedLogo = null;
  function openPreview(logo) {
    selectedLogo = logo;
    showModal = true;
  }
  function closeModal() {
    showModal = false;
  }
  function isSvgLogo(logo) {
    return logo.format && logo.format.toLowerCase() === 'svg';
  }
  export let theme;
 $: getLogoThemeColor = logo => getDefaultLogoColor(logo.colors, theme);
  // Improved debug logging for color and theme for each logo
  $: {
    if (logos && logos.length) {
      logos.forEach(logo => {
        if (logo.colors) {
          const themeColor = getDefaultLogoColor(logo.colors, theme);
          const fallbackColor = getThemeColor(logo.colors, theme);
          const activeColor = logo._activeColor || themeColor;
        }
      });
    }
  }
  // Inline SVG logic for color switching
  let svgCache = {};
  async function fetchInlineSvg(path) {
    if (svgCache[path]) return svgCache[path];
    const res = await fetch(path);
    const text = await res.text();
    svgCache[path] = text;
    return text;
  }
 </script>
-<Preview show={showModal} logo={selectedLogo} theme={theme} on:close={() => showModal = false} />
+<Preview show={showModal} logo={selectedLogo} theme={theme} on:close={closeModal} />
 <div class="logo-grid">
  {#each logos as logo}
-    <Row {logo} view="grid" showActions={true} onPreview={() => { selectedLogo = logo; showModal = true; }}>
+    <div class="logo-card">
-      <svelte:fragment slot="actions">
+      <div class="logo-image"
        role="button"
        tabindex="0"
        aria-label="Preview {logo.name}"
        on:click={() => openPreview(logo)}
        on:keydown={(e) => (e.key === 'Enter' || e.key === ' ') && openPreview(logo)}
        style="cursor:pointer;"
      >
        {#if isSvgLogo(logo)}
          {#key theme + (logo._activeColor || '')}
            <InlineSvg
              path={logo.path}
              color={logo.colors ? (logo._activeColor || getLogoThemeColor(logo)) : undefined}
              colorConfig={logo.colors ? logo.colorConfig : undefined}
              alt={logo.name}
            />
          {/key}
        {:else}
          <img src={logo.path} alt={logo.name} />
        {/if}
      </div>
      <div class="logo-info">
        <h3>{logo.name}</h3>
        <div class="format-row">
          <span><strong>Format:</strong> {logo.format}</span>
          {#if logo.colors}
            <div class="color-switcher-preview align-right">
              <span
                class="color-circle color-reset"
                title="Reset to theme color"
                tabindex="0"
                role="button"
                aria-label="Reset to theme color"
                style="background: none; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; padding: 0; margin: 0; border: none;"
                on:click|stopPropagation={() => logo._activeColor = undefined}
                on:keydown|stopPropagation={(e) => (e.key === 'Enter' || e.key === ' ') && (logo._activeColor = undefined)}
              >
                <svg width="100%" height="100%" viewBox="0 0 800 800" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
                  <circle cx="400" cy="400" r="400" style="fill:#d6d6d6;"/>
                  <path d="M682.843,117.843l-565.686,565.685c-156.209,-156.21 -156.209,-409.476 0,-565.685c156.21,-156.21 409.476,-156.21 565.686,-0Z" style="fill:#33363f;"/>
                </svg>
              </span>
              {#each logo.colors as colorObj}
                <span
                  class="color-circle"
                  title={colorObj.label}
                  style="background:{colorObj.value}"
                  tabindex="0"
                  role="button"
                  on:click|stopPropagation={() => logo._activeColor = colorObj.value}
                  on:keydown|stopPropagation={(e) => (e.key === 'Enter' || e.key === ' ') && (logo._activeColor = colorObj.value)}
                ></span>
              {/each}
            </div>
          {/if}
        </div>
        <div class="logo-actions">
          <Actions {logo} {onCopy} {onDownload} />
-      </svelte:fragment>
+        </div>
-    </Row>
+      </div>
    </div>
  {:else}
    <p class="no-results">No logos found matching your search criteria.</p>
  {/each}
 </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));
    gap: 1.5rem;
  }
  .logo-image {
    height: 260px;
    width: 100%;
    padding: 1rem;
    position: relative;
  }
  .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;
    justify-content: flex-end;
  }
 </style>
--- a/src/components/Header.svelte
+++ b/src/components/Header.svelte
@@ -0,0 +1,188 @@
 <script>
  export let logos = [];
  export let theme;
  export let setTheme;
  export let viewMode;
  export let setGridView;
  export let setListView;
  export let searchQuery;
  export let allTags = [];
  export let selectedTags = [];
  export let tagDropdownOpen;
  export let toggleDropdown;
  export let addTag;
  export let removeTag;
  export let getTagObj;
 </script>
 <header class="main-header">
  <div class="header-row">
    <h1>Logo Gallery</h1>
    <span class="logo-count">{logos.length} images in gallery</span>
    <div class="theme-switcher">
      <div class="theme-switch-group">
        <button
          on:click={() => setTheme("system")}
          class:active={theme === "system"}
          aria-label="System theme"
        >
          <svg
            width="20"
            height="20"
            viewBox="0 0 20 20"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
            ><circle
              cx="10"
              cy="10"
              r="8"
              stroke="currentColor"
              stroke-width="2"
            /><path
              d="M10 2a8 8 0 0 1 8 8"
              stroke="currentColor"
              stroke-width="2"
            /></svg
          >
        </button>
        <button
          on:click={() => setTheme("light")}
          class:active={theme === "light"}
          aria-label="Light mode"
        >
          <svg
            width="20"
            height="20"
            viewBox="0 0 20 20"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
            ><circle
              cx="10"
              cy="10"
              r="5"
              stroke="currentColor"
              stroke-width="2"
            /><path
              d="M10 1v2M10 17v2M3.22 3.22l1.42 1.42M15.36 15.36l1.42 1.42M1 10h2M17 10h2M3.22 16.78l1.42-1.42M15.36 4.64l1.42-1.42"
              stroke="currentColor"
              stroke-width="2"
            /></svg
          >
        </button>
        <button
          on:click={() => setTheme("dark")}
          class:active={theme === "dark"}
          aria-label="Dark mode"
        >
          <svg
            width="20"
            height="20"
            viewBox="0 0 20 20"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
            ><path
              d="M15.5 13A7 7 0 0 1 7 4.5a7 7 0 1 0 8.5 8.5z"
              stroke="currentColor"
              stroke-width="2"
            /></svg
          >
        </button>
      </div>
    </div>
  </div>
  <div class="header-row header-controls">
    <div class="search-bar">
      <input
        type="text"
        placeholder="Search logos..."
        bind:value={searchQuery}
      />
    </div>
    <div class="tag-filter">
      {#each selectedTags as tagText}
        <button
          class="selected-tag"
          aria-label={`Remove tag: ${getTagObj(tagText).text}`}
          on:click={() => removeTag(getTagObj(tagText).text)}
        >
          {getTagObj(tagText).text}
          <span class="close">&times;</span>
        </button>
      {/each}
      <div class="tag-dropdown">
        <button
          class="dropdown-toggle"
          on:click={toggleDropdown}
          aria-label="Add tag filter"
        >
          + Tag{selectedTags.length ? "" : "s"}
        </button>
        {#if tagDropdownOpen}
          <div class="dropdown-list">
            {#each allTags.filter((t) => !selectedTags.includes(t.text)) as tagObj}
              <button
                class="dropdown-tag"
                style={tagObj.color
                  ? `background: ${tagObj.color}; color: #fff;`
                  : ""}
                on:click={() => addTag(tagObj.text)}
                aria-label={`Add tag: ${tagObj.text}`}>{tagObj.text}</button
              >
            {/each}
            {#if allTags.filter((t) => !selectedTags.includes(t.text)).length === 0}
              <span class="no-tags">No more tags</span>
            {/if}
          </div>
        {/if}
      </div>
    </div>
    <div class="view-toggle">
      <button
        class:active={viewMode === "grid"}
        on:click={setGridView}
        aria-label="Grid view"
      >
        <svg
          width="20"
          height="20"
          viewBox="0 0 20 20"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
          ><rect x="3" y="3" width="6" height="6" fill="currentColor" /><rect
            x="11"
            y="3"
            width="6"
            height="6"
            fill="currentColor"
          /><rect x="3" y="11" width="6" height="6" fill="currentColor" /><rect
            x="11"
            y="11"
            width="6"
            height="6"
            fill="currentColor"
          /></svg
        >
      </button>
      <button
        class:active={viewMode === "list"}
        on:click={setListView}
        aria-label="List view"
      >
        <svg
          width="20"
          height="20"
          viewBox="0 0 20 20"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
          ><rect x="4" y="5" width="12" height="2" fill="currentColor" /><rect
            x="4"
            y="9"
            width="12"
            height="2"
            fill="currentColor"
          /><rect x="4" y="13" width="12" height="2" fill="currentColor" /></svg
        >
      </button>
    </div>
  </div>
 </header>
--- a/src/components/InlineSvg.svelte
+++ b/src/components/InlineSvg.svelte
@@ -1,26 +1,35 @@
 <script>
-  import { onMount } from 'svelte';
+  import { onMount } from "svelte";
  export let path;
  export let color;
-  export let colorConfig = { target: 'path', attribute: 'fill' };
+  export let colorConfig = { target: "path", attribute: "fill" };
-  export let alt;
+  export const alt = "";
-  let svgHtml = '';
+  let svgHtml = "";
  async function fetchAndColorSvg() {
    const res = await fetch(path);
    let text = await res.text();
    if (!color) {
-      // No user-selected color, render as-is (SVG uses fill="currentColor")
+      // No user-selected color, add currentColor to ensure theme colors are applied
-      svgHtml = text;
+      const parser = new DOMParser();
      const doc = parser.parseFromString(text, "image/svg+xml");
      const svg = doc.documentElement;
      // Set currentColor on SVG element if no fill is specified
      if (!svg.hasAttribute("fill")) {
        svg.setAttribute("fill", "currentColor");
      }
      svgHtml = doc.documentElement.outerHTML;
      return;
    }
    // Parse and update color only if user selected
    const parser = new DOMParser();
-    const doc = parser.parseFromString(text, 'image/svg+xml');
+    const doc = parser.parseFromString(text, "image/svg+xml");
    // 1. Parse <style> rules and apply as inline attributes before removing <style>
-    const styleEls = Array.from(doc.querySelectorAll('style'));
+    const styleEls = Array.from(doc.querySelectorAll("style"));
-    styleEls.forEach(styleEl => {
+    styleEls.forEach((styleEl) => {
      const css = styleEl.textContent;
      // Only handle simple .class { ... } rules
      const regex = /\.([\w-]+)\s*{([^}]*)}/g;
@@ -29,19 +38,22 @@
        const className = match[1];
        const rules = match[2];
        // Find all elements with this class
-        doc.querySelectorAll('.' + className).forEach(el => {
+        doc.querySelectorAll("." + className).forEach((el) => {
-          rules.split(';').forEach(rule => {
+          rules.split(";").forEach((rule) => {
-            const [prop, value] = rule.split(':').map(s => s && s.trim());
+            const [prop, value] = rule.split(":").map((s) => s && s.trim());
            if (prop && value) {
              // Apply all style properties, not just fill/stroke
-              el.setAttribute(prop.replace(/-([a-z])/g, g => g[1].toUpperCase()), value);
+              el.setAttribute(
                prop.replace(/-([a-z])/g, (g) => g[1].toUpperCase()),
                value,
              );
            }
          });
        });
      }
    });
    // Remove all <style> elements
-    styleEls.forEach(styleEl => styleEl.remove());
+    styleEls.forEach((styleEl) => styleEl.remove());
    let targets;
    if (colorConfig.selector) {
      targets = doc.querySelectorAll(colorConfig.selector);
@@ -50,21 +62,21 @@
    } else {
      targets = [];
    }
-    targets.forEach(el => {
+    targets.forEach((el) => {
      if (colorConfig.attribute) {
        // Legacy: force a single attribute
        el.setAttribute(colorConfig.attribute, color);
      } else {
        // Always override fill and stroke unless they are 'none'
-        if (el.hasAttribute('fill') && el.getAttribute('fill') !== 'none') {
+        if (el.hasAttribute("fill") && el.getAttribute("fill") !== "none") {
-          el.setAttribute('fill', color);
+          el.setAttribute("fill", color);
        }
-        if (el.hasAttribute('stroke') && el.getAttribute('stroke') !== 'none') {
+        if (el.hasAttribute("stroke") && el.getAttribute("stroke") !== "none") {
-          el.setAttribute('stroke', color);
+          el.setAttribute("stroke", color);
        }
-        if (!el.hasAttribute('fill') && !el.hasAttribute('stroke')) {
+        if (!el.hasAttribute("fill") && !el.hasAttribute("stroke")) {
          // If neither, prefer fill
-          el.setAttribute('fill', color);
+          el.setAttribute("fill", color);
        }
      }
    });
--- a/src/components/List.svelte
+++ b/src/components/List.svelte
@@ -1,7 +1,8 @@
 <script>
  import Preview from './Preview.svelte';
  import Actions from './Actions.svelte';
-  import Row from './Row.svelte';
+  import InlineSvg from './InlineSvg.svelte';
  import { getThemeColor, getDefaultLogoColor } from '../utils/colorTheme.js';
  import { onMount, onDestroy } from 'svelte';
  export let logos = [];
@@ -11,25 +12,175 @@
  let showModal = false;
  let selectedLogo = null;
-  export let theme;
+  let theme = getTheme();
  function openPreview(logo) {
    selectedLogo = logo;
    showModal = true;
  }
  function closeModal() {
    showModal = false;
  }
  function isSvgLogo(logo) {
    return logo.format && logo.format.toLowerCase() === 'svg';
  }
  function getTheme() {
    if (typeof window !== 'undefined' && window.matchMedia) {
      return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
    }
    return 'light';
  }
  function handleThemeChange(e) {
    theme = e.matches ? 'dark' : 'light';
  }
  onMount(() => {
    const mql = window.matchMedia('(prefers-color-scheme: dark)');
    mql.addEventListener('change', handleThemeChange);
  });
  onDestroy(() => {
    const mql = window.matchMedia('(prefers-color-scheme: dark)');
    mql.removeEventListener('change', handleThemeChange);
  });
  $: getLogoThemeColor = logo => getDefaultLogoColor(logo.colors, theme);
  // Debug logging for color and theme
  $: {
    if (logos && logos.length) {
      logos.forEach(logo => {
        if (logo.colors) {
          const themeColor = getDefaultLogoColor(logo.colors, theme);
          const activeColor = logo._activeColor || themeColor;
          console.log('[LogoList] Logo:', logo.name, '| Theme:', theme, '| Theme color:', themeColor, '| Active color:', activeColor);
        }
      });
    }
  }
 </script>
-<Preview show={showModal} logo={selectedLogo} theme={theme} on:close={() => showModal = false} />
+<Preview show={showModal} logo={selectedLogo} on:close={closeModal} />
 <div class="logo-list">
  {#each logos as logo}
-    <Row {logo} view="list" showActions={true} onPreview={() => { selectedLogo = logo; showModal = true; }}>
+    <div class="logo-item">
-      <svelte:fragment slot="actions">
+      <div class="logo-preview"
        role="button"
        tabindex="0"
        aria-label="Preview {logo.name}"
        on:click={() => openPreview(logo)}
        on:keydown={(e) => (e.key === 'Enter' || e.key === ' ') && openPreview(logo)}
        style="cursor:pointer;"
      >
        {#if isSvgLogo(logo)}              <InlineSvg
                path={logo.path}
                color={logo.colors ? (logo._activeColor || getLogoThemeColor(logo)) : undefined}
                colorConfig={logo.colors ? logo.colorConfig : undefined}
                alt={logo.name}
              />
        {:else}
          <img src={logo.path} alt={logo.name} />
        {/if}
      </div>
      <div class="logo-info">
        <h3>{logo.name}</h3>
        <div class="format-row">
          <span><strong>Format:</strong> {logo.format}</span>
        </div>
        {#if logo.colors}
          <div class="color-switcher-preview align-left">
            <span
              class="color-circle color-reset"
              title="Reset to theme color"
              tabindex="0"
              role="button"
              aria-label="Reset to theme color"
              style="background: none; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; padding: 0; margin: 0; border: none;"
              on:click|stopPropagation={() => logo._activeColor = undefined}
              on:keydown|stopPropagation={(e) => (e.key === 'Enter' || e.key === ' ') && (logo._activeColor = undefined)}
            >
              <svg width="100%" height="100%" viewBox="0 0 800 800" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
                <circle cx="400" cy="400" r="400" style="fill:#d6d6d6;"/>
                <path d="M682.843,117.843l-565.686,565.685c-156.209,-156.21 -156.209,-409.476 0,-565.685c156.21,-156.21 409.476,-156.21 565.686,-0Z" style="fill:#33363f;"/>
              </svg>
            </span>
            {#each logo.colors as colorObj}
              <span
                class="color-circle"
                title={colorObj.label}
                style={`background:${colorObj.value}`}
                tabindex="0"
                role="button"
                on:click|stopPropagation={() => logo._activeColor = colorObj.value}
                on:keydown|stopPropagation={(e) => (e.key === 'Enter' || e.key === ' ') && (logo._activeColor = colorObj.value)}
              ></span>
            {/each}
          </div>
        {/if}
      </div>
      <div class="logo-actions">
        <Actions {logo} {onCopy} {onDownload} />
-      </svelte:fragment>
+      </div>
-    </Row>
+    </div>
  {:else}
    <p class="no-results">No logos found matching your search criteria.</p>
  {/each}
 </div>
 <style>
  :global(.logo-item) {
    background: var(--color-card);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    display: grid;
    grid-template-columns: 80px 2fr 3fr 150px;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    transition: background 0.2s, color 0.2s;
  }
  .logo-preview {
    height: 100px;
    width: 80px;
    padding: 0;
    border-radius: 4px;
    position: relative;
  }
  .logo-info h3 {
    margin-bottom: 0.5rem;
    color: var(--color-accent, #4f8cff);
  }
  .logo-list {
    display: flex;
    flex-direction: column;
-    gap: 0.5em;
+    gap: 1rem;
  }
  .no-results {
    text-align: center;
    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>
--- a/src/components/Preview.svelte
+++ b/src/components/Preview.svelte
@@ -1,15 +1,22 @@
 <script>
  import { onMount, onDestroy, createEventDispatcher } from 'svelte';
  import InlineSvg from './InlineSvg.svelte';
-  import { getDefaultLogoColor } from '../utils/colorTheme.js';
+  import { getDefaultLogoColor, getThemeColor } from '../utils/colorTheme.js';
  export let show = false;
  export let logo = null;
  export let theme;
  export let logos = [];
  export let openLogoByAnchor = () => {};
  const dispatch = createEventDispatcher();
  function close() {
    dispatch('close');
    // Remove preview anchor from URL
    if (window.location.hash.startsWith('#preview-')) {
      history.replaceState(null, '', window.location.pathname + window.location.search);
    }
  }
  function handleKeydown(event) {
@@ -22,58 +29,87 @@
    return logo && logo.format && logo.format.toLowerCase() === 'svg';
  }
  // Helper to get tag object - simplified without tags.json
  function getTagObj(text) {
    return { text: typeof text === 'object' ? text.text : text };
  }
  // Always use $theme directly, do not cache in a function
  export let theme;
  $: getLogoThemeColor = logo => getDefaultLogoColor(logo.colors, theme);
  // Improved debug logging for color and theme
  $: {
    if (logo && logo.colors) {
      const themeColor = getDefaultLogoColor(logo.colors, theme);
      const fallbackColor = getThemeColor(logo.colors, theme);
      const activeColor = logo._activeColor || themeColor;
    }
  }
-  $: if (logo && logo.tags && logo.tags.length) {
+  // Update URL hash when opening/closing preview
-    logo.tags.forEach(tag => {
+  $: if (show && logo) {
-      console.log('[LogoModal] Tag:', tag);
+    const anchor = '#preview-' + encodeURIComponent(logo.name.replace(/\s+/g, '-').toLowerCase());
-    });
+    if (window.location.hash !== anchor) {
      history.replaceState(null, '', window.location.pathname + window.location.search + anchor);
    }
  }
  // On mount, check for preview anchor and open if present
  onMount(() => {
    document.addEventListener('keydown', handleKeydown);
-    console.log('[LogoModal] Mounted, added keydown event listener');
+    if (window.location.hash.startsWith('#preview-')) {
      openLogoByAnchor(window.location.hash);
    }
    window.addEventListener('hashchange', onHashChange);
  });
  onDestroy(() => {
    document.removeEventListener('keydown', handleKeydown);
    window.removeEventListener('hashchange', onHashChange);
  });
  function onHashChange() {
    if (window.location.hash.startsWith('#preview-')) {
      openLogoByAnchor(window.location.hash);
    } else {
      dispatch('close');
    }
  }
  // Svelte action to remove width/height from SVGs for responsive scaling
  function removeSvgSize(node) {
    function cleanSvg() {
      const svgs = node.querySelectorAll('svg');
      svgs.forEach(svg => {
        svg.removeAttribute('width');
        svg.removeAttribute('height');
        svg.style.width = '100%';
        svg.style.height = '100%';
      });
    }
    cleanSvg();
    // In case SVG is loaded async (e.g. InlineSvg), observe for changes
    const observer = new MutationObserver(cleanSvg);
    observer.observe(node, { childList: true, subtree: true });
    return {
      destroy() {
        observer.disconnect();
      }
    };
  }
 </script>
-<div class="modal-backdrop"
+<div class="modal-backdrop fullscreen"
  style="display: {show && logo ? 'flex' : 'none'}"
  role="dialog"
  aria-modal="true"
 >
  {#if logo}
-    <div class="modal-content">
+    <div class="modal-content fullscreen-modal">
      <div class="modal-header">
        <h2>{logo.name}</h2>
        <button class="close-btn" on:click={close} aria-label="Close preview">×</button>
      </div>
-      <div class="modal-body">
+      <div class="modal-body fullscreen-body">
-        <div class="preview-container"
+        <div class="preview-container fullscreen-preview"
-          role="button"
+          role="img"
-          tabindex="0"
+          aria-label={logo.name}
          aria-label="Close preview"
          on:click={close}
          on:keydown={(e) => (e.key === 'Enter' || e.key === ' ') && close()}
          style="cursor:pointer;"
        >
          <div class="preview-media-wrapper" use:removeSvgSize>
            {#if isSvgLogo(logo)}
              <InlineSvg
                path={logo.path}
@@ -85,7 +121,8 @@ $: getLogoThemeColor = logo => getDefaultLogoColor(logo.colors, theme);
              <img src={logo.path} alt={logo.name} />
            {/if}
          </div>
-        <div class="logo-details">
+        </div>
        <div class="logo-details fullscreen-details">
          {#if isSvgLogo(logo) && logo.colors}
            <div class="color-switcher-preview">
              <span
@@ -123,8 +160,8 @@ $: getLogoThemeColor = logo => getDefaultLogoColor(logo.colors, theme);
          <p><strong>Path:</strong> {logo.path}</p>
          {#if logo.tags && logo.tags.length}
            <div class="logo-tags">
-              {#each logo.tags as tag}
+              {#each logo.tags as tagObj}
-                <span class="logo-tag">{typeof tag === 'object' ? tag.text : tag}</span>
+                <span class="logo-tag" style={tagObj.color ? `background:${tagObj.color}` : ''}>{tagObj.text || tagObj}</span>
              {/each}
            </div>
          {/if}
@@ -135,118 +172,133 @@ $: getLogoThemeColor = logo => getDefaultLogoColor(logo.colors, theme);
 </div>
 <style>
-  :global(.modal-backdrop) {
+  .modal-backdrop.fullscreen {
    position: fixed;
-    top: 0;
+    top: 0; left: 0; right: 0; bottom: 0;
-    left: 0;
+    width: 100vw;
-    right: 0;
+    height: 100vh;
-    bottom: 0;
+    background: rgba(0,0,0,0.95);
-    background-color: rgba(0, 0, 0, 0.7);
+    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
-    z-index: 1000;
+    overflow: auto;
  }
-
+  .modal-content.fullscreen-modal {
-  :global(.modal-content) {
+    width: 100vw;
-    background: var(--color-card);
+    height: 100vh;
-    color: var(--color-text);
+    max-width: 100vw;
-    border-radius: 8px;
+    max-height: 100vh;
-    padding: 1rem;
+    border-radius: 0;
-    max-width: 500px;
+    box-shadow: none;
-    width: 90%;
+    background: transparent;
-    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
+    display: flex;
-    border: 1px solid var(--color-border);
+    flex-direction: column;
-    transition: background 0.2s, color 0.2s;
+    padding: 0;
    border: none;
  }
  .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
-    margin-bottom: 1rem;
+    padding: 2rem 2.5rem 1rem 2.5rem;
    background: transparent;
    color: var(--color-text);
    z-index: 2;
  }
  .modal-header h2 {
    font-size: 2.2rem;
    color: var(--color-accent, #4f8cff);
    margin: 0;
    font-size: 1.5rem;
  }
  .close-btn {
    font-size: 2.5rem;
    background: none;
    border: none;
-    font-size: 1.5rem;
+    color: var(--color-text);
    cursor: pointer;
    color: var(--color-text, #222);
    transition: color 0.2s;
    z-index: 2;
  }
  .close-btn:hover {
-    color: var(--color-accent, #4f8cff);
+    color: #f44336;
  }
-
+  .modal-body.fullscreen-body {
-  .modal-body img {
+    flex: 1 1 auto;
    max-width: 100%;
    margin-bottom: 1rem;
  }
  .preview-container {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: center;
    width: 100vw;
    height: calc(100vh - 4.5rem);
    background: transparent;
    padding: 0 2.5rem 2.5rem 2.5rem;
    gap: 2.5rem;
  }
  .preview-container.fullscreen-preview {
    flex: 2 1 0;
    display: flex;
    align-items: center;
-    background-color: var(--color-card);
+    justify-content: center;
-    border-radius: 4px;
+    min-width: 0;
-    padding: 2rem;
+    min-height: 0;
-    min-height: 200px;
+    background: transparent;
-    max-height: 60vh;
+    height: 100%;
-    max-width: 100%;
+    width: 100%;
    transition: background 0.2s, color 0.2s;
    overflow: auto;
  }
-
+  .preview-media-wrapper {
-  .preview-container img {
+    width: 100%;
-    max-width: 100%;
+    height: 100%;
-    max-height: 60vh;
+    display: flex;
    align-items: center;
    justify-content: center;
  }
  .preview-media-wrapper img,
  .preview-media-wrapper svg {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    object-fit: contain;
    display: block;
    margin: 0;
  }
-
+  .logo-details.fullscreen-details {
-  .logo-details {
+    flex: 1 1 350px;
-    padding: 1rem;
+    min-width: 320px;
-    background-color: var(--color-card);
+    max-width: 400px;
    background: var(--color-card, #23272e);
    color: var(--color-text);
-    border-radius: 4px;
+    border-radius: 12px;
-    transition: background 0.2s, color 0.2s;
+    padding: 2rem 2rem 1.5rem 2rem;
    margin: 2rem 0 2rem 0;
    box-shadow: 0 2px 16px 4px rgba(0,0,0,0.18);
    overflow-y: auto;
    align-self: center;
    z-index: 1;
  }
  .logo-details p {
    margin-bottom: 0.5rem;
  }
  .logo-tags {
    margin-top: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }
-
+  @media (max-width: 900px) {
-  .color-switcher-preview {
+    .modal-body.fullscreen-body {
-    display: flex;
+      flex-direction: column;
-    align-items: center;
+      align-items: stretch;
      gap: 1.5rem;
      padding: 0 0.5rem 0.5rem 0.5rem;
    }
-
+    .logo-details.fullscreen-details {
-  .color-circle.color-reset {
+      margin: 0 auto 1.5rem auto;
-    background: none !important;
+      max-width: 100vw;
      min-width: 0;
      width: 100%;
      padding: 1.2rem 0.7rem 1rem 0.7rem;
    }
    .modal-header {
      padding: 1.2rem 0.7rem 0.7rem 0.7rem;
    }
  .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;
  }
 </style>
--- a/src/components/Row.svelte
+++ b/src/components/Row.svelte
@@ -1,159 +0,0 @@
 <script>
  export let logo;
  export let onCopy;
  export let onDownload;
  export let view = 'grid'; // or 'list'
  export let showActions = true;
  export let onPreview = null;
  import InlineSvg from './InlineSvg.svelte';
  import { getDefaultLogoColor } from '../utils/colorTheme.js';
 </script>
 <div class="logo-row {view}">
  <div
    class="logo-img"
    on:click={onPreview}
    on:keydown={(e) => (e.key === 'Enter' || e.key === ' ') && onPreview && onPreview(e)}
    tabindex="0"
    role="button"
    aria-label="Preview logo"
  >
    {#if logo.format && logo.format.toLowerCase() === 'svg'}
      <InlineSvg path={logo.path} color={logo.colors ? (logo._activeColor || getDefaultLogoColor(logo.colors)) : undefined} colorConfig={logo.colors ? logo.colorConfig : undefined} alt={logo.name} />
    {:else}
      <img src={logo.path} alt={logo.name} />
    {/if}
  </div>
  <div class="logo-info">
    <h3>{logo.name}</h3>
    <div class="format-row">
      <span><strong>Format:</strong> {logo.format}</span>
      {#if logo.colors}
        <div class="color-switcher-preview {view === 'grid' ? 'align-right' : 'align-left'}">
          <span class="color-circle color-reset" title="Reset to theme color" tabindex="0" role="button" aria-label="Reset to theme color" style="background: none; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; padding: 0; margin: 0; border: none;"
            on:click|stopPropagation={() => logo._activeColor = undefined}
            on:keydown|stopPropagation={(e) => (e.key === 'Enter' || e.key === ' ') && (logo._activeColor = undefined)}>
            <svg width="100%" height="100%" viewBox="0 0 800 800" version="1.1" xmlns="http://www.w3.org/2000/svg" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
              <circle cx="400" cy="400" r="400" style="fill:#d6d6d6;"/>
              <path d="M682.843,117.843l-565.686,565.685c-156.209,-156.21 -156.209,-409.476 0,-565.685c156.21,-156.21 409.476,-156.21 565.686,-0Z" style="fill:#33363f;"/>
            </svg>
          </span>
          {#each logo.colors as colorObj}
            <span class="color-circle" title={colorObj.label} style={`background:${colorObj.value}`} tabindex="0" role="button"
              on:click|stopPropagation={() => logo._activeColor = colorObj.value}
              on:keydown|stopPropagation={(e) => (e.key === 'Enter' || e.key === ' ') && (logo._activeColor = colorObj.value)}></span>
          {/each}
        </div>
      {/if}
    </div>
    {#if logo.tags && logo.tags.length}
      <div class="logo-tags">
        {#each logo.tags as tag}
          <span class="logo-tag">{typeof tag === 'object' ? tag.text : tag}</span>
        {/each}
      </div>
    {/if}
    <slot name="extra" />
  </div>
  {#if showActions}
    <div class="logo-actions">
      <slot name="actions" />
    </div>
  {/if}
 </div>
 <style>
  .logo-row {
    display: flex;
    align-items: center;
    padding: 0.5em 0.5em;
    border-bottom: 1px solid #eee;
    gap: 1em;
  }
  .logo-row.grid {
    flex-direction: column;
    align-items: stretch;
    border-bottom: none;
    border-radius: 10px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
    margin-bottom: 1em;
    padding: 1em;
  }
  .logo-row.list {
    flex-direction: row;
    align-items: center;
    border-radius: 0;
    box-shadow: none;
    margin-bottom: 0;
    padding: 0.5em 0.5em;
  }
  .logo-img {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    cursor: pointer;
  }
  .logo-info {
    flex: 1 1 auto;
    min-width: 0;
  }
  .logo-actions {
    display: flex;
    align-items: center;
    gap: 0.5em;
  }
  .color-switcher-preview {
    display: flex;
    align-items: center;
    gap: 0.4em;
  }
  .color-switcher-preview.align-right {
    justify-content: flex-end;
  }
  .color-switcher-preview.align-left {
    justify-content: flex-start;
  }
  .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-circle.color-reset {
    background: none !important;
  }
  .logo-tag {
    display: inline-block;
    background: var(--color-accent, #4f8cff);
    color: #fff;
    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-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;
  }
 </style>
Author	SHA1	Message	Date
sHa	43a3b37661	Enhance logo preview functionality with URL anchor support and responsive SVG handling	2025-05-01 23:29:46 +03:00
sHa	8c10f643d9	Update gitea.svg to remove unnecessary attributes for improved SVG rendering	2025-05-01 22:42:38 +03:00
sHa	6c0d6cf2b5	Add YouTube logo and update Ford brand entry in logos.json	2025-05-01 17:59:58 +03:00
sHa	71679ff608	Add Fiat and Ford logos to the project	2025-05-01 17:50:42 +03:00
sHa	fdea176b86	Add SVG logos for BMW and Suzuki	2025-05-01 17:18:17 +03:00
sHa	10b072d521	Add arm logo with SVG file and associated metadata	2025-05-01 16:32:32 +03:00
sHa	b0604fc2e7	Add Sainsbury's logo and update tags for ATB brand	2025-05-01 14:58:22 +03:00
sHa	6d83122c1b	Refactor Header component: improve button formatting, enhance tag dropdown styles, and update SVG attributes for better readability and accessibility.	2025-05-01 14:39:02 +03:00
sHa	003b45d5b4	Add tag filter and dropdown styles: implement tag filtering UI with improved dropdown design and hover effects.	2025-05-01 14:35:00 +03:00
sHa	9d031dc874	Add dropdown menu styles: implement dropdown menu and item styles with hover effects and accessibility features.	2025-05-01 14:33:08 +03:00
sHa	27ae28be63	Refactor Header and Preview components: update tag handling styles, rename dropdown class, and clean up unused modal styles.	2025-05-01 14:28:01 +03:00
sHa	4a2230223c	Enhance theme support: update CSS variables for dark and light themes, improve modal styles, and ensure SVGs use currentColor for theme compatibility.	2025-05-01 13:48:32 +03:00
sHa	3dd4e50281	Merge branch 'worked'	2025-05-01 11:58:41 +03:00
sHa	c62d453946	Refactor logo management components: remove LogoModal, add Actions and Grid components, enhance List and Preview components with improved theme handling and SVG support.	2025-05-01 11:57:23 +03:00
sHa	0313d091fc	Add new logos	2025-05-01 02:54:03 +03:00
sHa	b044b81644	Revert "feat: Refactor logo components into Grid and List views" This reverts commit `aaf7db1471`.	2025-05-01 02:35:10 +03:00
sHa	a49568a389	Add new logos and refactor header component	2025-05-01 01:51:14 +03:00