From eacd977b84018a326a62d8eb9548abb582309c2c Mon Sep 17 00:00:00 2001 From: sHa Date: Tue, 29 Apr 2025 14:44:57 +0300 Subject: [PATCH] update InlineSvg component for better color handling; refactor logo components to streamline SVG rendering and remove unused styles. --- public/data/logos.json | 165 +++++++++++++++--- public/global.css | 110 +++++++++++- public/logos/atb.svg | 52 +++--- public/logos/ibkr.svg | 30 ++-- public/logos/monobank_paw.svg | 29 +-- public/logos/monobank_text.svg | 85 ++++++--- .../logos/{revolut_black.svg => revolut.svg} | 0 public/logos/revolut_white.svg | 4 - public/logos/roomerin.svg | 2 +- src/components/InlineSvg.svelte | 56 +++++- src/components/LogoActions.svelte | 6 - src/components/LogoGrid.svelte | 101 +---------- src/components/LogoList.svelte | 75 +------- src/components/LogoModal.svelte | 85 +-------- 14 files changed, 426 insertions(+), 374 deletions(-) rename public/logos/{revolut_black.svg => revolut.svg} (100%) delete mode 100644 public/logos/revolut_white.svg diff --git a/public/data/logos.json b/public/data/logos.json index 88fea55..fced185 100644 --- a/public/data/logos.json +++ b/public/data/logos.json @@ -8,7 +8,20 @@ "clothing", "sports", "footwear" - ] + ], + "colors": [ + { + "label": "Black", + "value": "#000" + }, + { + "label": "White", + "value": "#fff" + } + ], + "colorConfig": { + "target": "path" + } }, { "name": "Amazon", @@ -17,7 +30,20 @@ "disable": false, "tags": [ "retail" - ] + ], + "colors": [ + { + "label": "Black", + "value": "#000" + }, + { + "label": "White", + "value": "#fff" + } + ], + "colorConfig": { + "selector": "#path12, #path14, #path16, #path18, #path28, #path30" + } }, { "name": "Apple", @@ -31,13 +57,21 @@ } ], "colors": [ - { "label": "Silver", "value": "#999" }, - { "label": "White", "value": "#fff" }, - { "label": "Black", "value": "#000" } + { + "label": "Silver", + "value": "#999" + }, + { + "label": "White", + "value": "#fff" + }, + { + "label": "Black", + "value": "#000" + } ], "colorConfig": { - "target": "path", - "attribute": "fill" + "target": "path" } }, { @@ -78,7 +112,20 @@ "tags": [ "entertainment", "streaming" - ] + ], + "colors": [ + { + "label": "Black", + "value": "#000" + }, + { + "label": "White", + "value": "#fff" + } + ], + "colorConfig": { + "target": "path" + } }, { "name": "Dodge", @@ -129,7 +176,24 @@ "tags": [ "automobile", "transport" - ] + ], + "colors": [ + { + "label": "Green", + "value": "#424d07" + }, + { + "label": "Black", + "value": "#000" + }, + { + "label": "White", + "value": "#fff" + } + ], + "colorConfig": { + "target": "g" + } }, { "name": "Kyivstar", @@ -199,7 +263,20 @@ "tags": [ "bank", "finance" - ] + ], + "colors": [ + { + "label": "Black", + "value": "#000" + }, + { + "label": "White", + "value": "#fff" + } + ], + "colorConfig": { + "selector": "#text1" + } }, { "name": "Nationwide", @@ -279,29 +356,44 @@ "clothing", "sports", "footwear" - ] + ], + "colors": [ + { + "label": "Black", + "value": "#000" + }, + { + "label": "White", + "value": "#fff" + } + ], + "colorConfig": { + "target": "path" + } }, { - "name": "Revolut Black", - "path": "logos/revolut_black.svg", + "name": "Revolut", + "path": "logos/revolut.svg", "format": "SVG", "disable": false, "tags": [ "bank", "finance", "transfer" - ] - }, - { - "name": "Revolut White", - "path": "logos/revolut_white.svg", - "format": "SVG", - "disable": false, - "tags": [ - "bank", - "finance", - "transfer" - ] + ], + "colors": [ + { + "label": "Black", + "value": "#000" + }, + { + "label": "White", + "value": "#fff" + } + ], + "colorConfig": { + "target": "path" + } }, { "name": "Roomerin", @@ -310,7 +402,28 @@ "disable": false, "tags": [ "furniture" - ] + ], + "colors": [ + { + "label": "Brown", + "value": "#2b1c13" + }, + { + "label": "Green", + "value": "#859310" + }, + { + "label": "Black", + "value": "#000" + }, + { + "label": "White", + "value": "#fff" + } + ], + "colorConfig": { + "target": "#text" + } }, { "name": "Sendpulse Small", diff --git a/public/global.css b/public/global.css index 6add607..e5ad6ef 100644 --- a/public/global.css +++ b/public/global.css @@ -126,12 +126,100 @@ button:hover { margin-right: 0.5em; } +/* Shared color switcher and color circle styles */ +.color-circle { + width: 20px; + height: 20px; + border-radius: 50%; + box-shadow: 0 1px 2px rgba(0,0,0,0.08); + cursor: pointer; + display: inline-block; + transition: border 0.2s, box-shadow 0.2s; +} +.color-circle:hover { + box-shadow: 0 2px 8px rgba(0,0,0,0.12); +} +.color-switcher-preview, +.color-switcher-inline, +.color-switcher-under { + display: flex; + gap: 0.4em; + align-items: center; +} +.color-switcher-preview { + justify-content: center; + margin: 1em 0 0.5em 0; +} +.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); + color: #fff; + border-radius: 12px; + padding: 0.2em 0.8em; + font-size: 0.85em; + font-weight: 500; + letter-spacing: 0.02em; + transition: background 0.2s; +} + +.logo-actions { + display: flex; + align-items: center; + gap: 0.5em; + flex-wrap: nowrap; +} + +.logo-info { + background: var(--color-card); + color: var(--color-text); + padding: 0.5rem 1rem; + border-radius: 4px; + transition: background 0.2s, color 0.2s; +} + +.logo-image, +.logo-preview { + display: flex; + align-items: center; + justify-content: center; + background: var(--color-card); + color: var(--color-text); + border-radius: 4px; + overflow: hidden; + cursor: pointer; + transition: background 0.2s, color 0.2s; +} + +.logo-preview img { + max-width: 80%; + max-height: 80%; + width: auto; + height: auto; + object-fit: contain; + display: block; + margin: 0 auto; +} + +.format-row { + display: flex; + align-items: center; + gap: 1em; + margin-bottom: 0.5em; +} + /* 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: #f5f5f5; + /* background-color removed for theme support */ position: relative; overflow: hidden; } @@ -144,6 +232,15 @@ div.logo-image img { object-fit: contain; } +.logo-image svg { + width: 100%; + height: 100%; + max-width: 100%; + max-height: 100%; + display: block; + object-fit: contain; +} + /* Grid specific */ .logo-grid .logo-item .logo-image { /* height: 160px; */ @@ -157,3 +254,14 @@ div.logo-image img { height: 100px; border-right: 1px solid #eee; } + +/* Dark theme overrides */ +@media (prefers-color-scheme: dark) { + :root { + --color-card: #23272e; + --background-color: #181a20; + --color-text: #f5f6fa; + --color-border: #333842; + --color-accent: #4f8cff; + } +} diff --git a/public/logos/atb.svg b/public/logos/atb.svg index fc1abd2..881199a 100644 --- a/public/logos/atb.svg +++ b/public/logos/atb.svg @@ -1,28 +1,26 @@ - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + diff --git a/public/logos/ibkr.svg b/public/logos/ibkr.svg index a134b80..1b0090e 100644 --- a/public/logos/ibkr.svg +++ b/public/logos/ibkr.svg @@ -1,27 +1,21 @@ - - - - - - - - - + + + diff --git a/public/logos/monobank_paw.svg b/public/logos/monobank_paw.svg index 35c3ec2..d0e2617 100644 --- a/public/logos/monobank_paw.svg +++ b/public/logos/monobank_paw.svg @@ -1,25 +1,6 @@ - - - - - - - - - - - - - - - - - + + + + + diff --git a/public/logos/monobank_text.svg b/public/logos/monobank_text.svg index 31a51bd..4aa12e3 100644 --- a/public/logos/monobank_text.svg +++ b/public/logos/monobank_text.svg @@ -1,28 +1,59 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/logos/revolut_black.svg b/public/logos/revolut.svg similarity index 100% rename from public/logos/revolut_black.svg rename to public/logos/revolut.svg diff --git a/public/logos/revolut_white.svg b/public/logos/revolut_white.svg deleted file mode 100644 index f8074fd..0000000 --- a/public/logos/revolut_white.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/public/logos/roomerin.svg b/public/logos/roomerin.svg index 42f6257..aa6febf 100644 --- a/public/logos/roomerin.svg +++ b/public/logos/roomerin.svg @@ -1,6 +1,6 @@ - rules and apply as inline attributes before removing {logo.name} {/if} @@ -101,7 +106,6 @@ 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)); @@ -110,38 +114,8 @@ .logo-image { height: 260px; width: 100%; - display: flex; - align-items: center; - justify-content: center; padding: 1rem; - background: var(--color-card); - color: var(--color-text); position: relative; - overflow: hidden; - cursor: pointer; - transition: background 0.2s, color 0.2s; - } - .logo-image img, -.logo-image :global(svg) { - width: 100%; - height: 100%; - max-width: 100%; - max-height: 100%; - object-fit: contain; - object-position: center; - display: block; - margin: 0 auto; -} - /* Make inline SVGs scale and fit like */ - .logo-image svg { - max-width: 80%; - max-height: 80%; - width: auto !important; - height: auto !important; - object-fit: contain; - object-position: center; - display: block; - margin: 0 auto; } .logo-info { padding: 1rem; @@ -154,71 +128,10 @@ margin-bottom: 0.5rem; color: var(--color-accent, #4f8cff); } - /* .logo-info p { font-size: 0.9rem; color: var(--color-text); margin-bottom: 1rem; } */ - .logo-actions { - display: flex; - align-items: center; - gap: 0.5em; - flex-wrap: nowrap; - } - .format-row { - display: flex; - align-items: center; - justify-content: space-between; - gap: 1em; - margin-bottom: 0.5em; - } - .color-switcher-inline { - display: flex; - gap: 0.4em; - align-items: center; - margin-left: auto; - } - .color-switcher { - display: flex; - gap: 0.4em; - margin: 0.5em 0 0.5em 0; - align-items: center; - } - .color-circle { - width: 20px; - height: 20px; - border-radius: 50%; - border: 2px solid #eee; - box-shadow: 0 1px 2px rgba(0,0,0,0.08); - cursor: pointer; - display: inline-block; - transition: border 0.2s, box-shadow 0.2s; - } - .color-circle:hover { - border: 2px solid #888; - box-shadow: 0 2px 8px rgba(0,0,0,0.12); - } .no-results { grid-column: 1 / -1; text-align: center; padding: 2rem; color: #666; } - - .color-switcher { - display: flex; - gap: 0.4em; - margin: 0.5em 0 0.5em 0; - align-items: center; - } - .color-circle { - width: 20px; - height: 20px; - border-radius: 50%; - border: 2px solid #eee; - box-shadow: 0 1px 2px rgba(0,0,0,0.08); - cursor: pointer; - display: inline-block; - transition: border 0.2s, box-shadow 0.2s; - } - .color-circle:hover { - border: 2px solid #888; - box-shadow: 0 2px 8px rgba(0,0,0,0.12); - } diff --git a/src/components/LogoList.svelte b/src/components/LogoList.svelte index f47ede9..89a8fe0 100644 --- a/src/components/LogoList.svelte +++ b/src/components/LogoList.svelte @@ -38,9 +38,13 @@ on:keydown={(e) => (e.key === 'Enter' || e.key === ' ') && openPreview(logo)} style="cursor:pointer;" > - > - {#if isSvgLogo(logo) && logo.colors} - + {#if isSvgLogo(logo)} + {:else} {logo.name} {/if} @@ -97,83 +101,22 @@ .logo-preview { height: 100px; width: 80px; - display: flex; - align-items: center; - justify-content: center; - background: var(--color-card); - color: var(--color-text); + padding: 0; border-radius: 4px; - overflow: hidden; - cursor: pointer; - transition: background 0.2s, color 0.2s; - } - .logo-preview img { - max-width: 80%; - max-height: 80%; - width: auto !important; - height: auto !important; - object-fit: contain; - object-position: center; - } - .color-switcher { - display: flex; - gap: 0.4em; - margin: 0.5em 0 0.5em 0; - align-items: center; - } - .color-circle { - width: 20px; - height: 20px; - border-radius: 50%; - border: 2px solid #eee; - box-shadow: 0 1px 2px rgba(0,0,0,0.08); - cursor: pointer; - display: inline-block; - transition: border 0.2s, box-shadow 0.2s; - } - .color-circle:hover { - border: 2px solid #888; - box-shadow: 0 2px 8px rgba(0,0,0,0.12); - } - .logo-info { - background: var(--color-card); - color: var(--color-text); - padding: 0.5rem 1rem; - border-radius: 4px; - transition: background 0.2s, color 0.2s; + position: relative; } .logo-info h3 { margin-bottom: 0.5rem; color: var(--color-accent, #4f8cff); } - /* .logo-info p { font-size: 0.9rem; color: var(--color-text); margin-bottom: 1rem; } */ - .logo-actions { - display: flex; - align-items: center; - gap: 0.5em; - } .logo-list { display: flex; flex-direction: column; gap: 1rem; } - .no-results { text-align: center; padding: 2rem; color: #666; } - - .format-row { - display: flex; - align-items: center; - gap: 1em; - } - /* .color-switcher-inline { display: flex; gap: 0.4em; align-items: center; margin-left: auto; } */ - .color-switcher-under { - display: flex; - gap: 0.4em; - align-items: center; - margin: 0.5em 0 0 0; - } diff --git a/src/components/LogoModal.svelte b/src/components/LogoModal.svelte index 7aae80a..60560a0 100644 --- a/src/components/LogoModal.svelte +++ b/src/components/LogoModal.svelte @@ -49,8 +49,13 @@ on:keydown={(e) => (e.key === 'Enter' || e.key === ' ') && close()} style="cursor:pointer;" > - {#if isSvgLogo(logo) && logo.colors} - + {#if isSvgLogo(logo)} + {:else} {logo.name} {/if} @@ -156,33 +161,6 @@ object-fit: contain; } - /* .color-switcher { display: flex; gap: 0.4em; margin: 0.5em 0 0.5em 0; align-items: center; } */ - - .color-switcher-inline { - display: flex; - gap: 0.4em; - align-items: center; - margin-left: auto; - } - - .color-circle { - width: 20px; - height: 20px; - border-radius: 50%; - border: 2px solid #eee; - box-shadow: 0 1px 2px rgba(0,0,0,0.08); - cursor: pointer; - display: inline-block; - transition: border 0.2s, box-shadow 0.2s; - } - - .color-circle:hover { - border: 2px solid #888; - box-shadow: 0 2px 8px rgba(0,0,0,0.12); - } - - /* .format-row { display: flex; align-items: center; justify-content: space-between; gap: 1em; margin-bottom: 0.5em; } */ - .logo-details { padding: 1rem; background-color: var(--color-card); @@ -202,53 +180,4 @@ gap: 0.5rem; } - .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; - transition: background 0.2s; - } - - /* .color-switcher-under { display: flex; gap: 0.4em; align-items: center; margin: 0.5em 0 0 0; } */ - - .color-switcher-inline { - display: flex; - gap: 0.4em; - align-items: center; - margin-left: auto; - } - - .color-circle { - width: 20px; - height: 20px; - border-radius: 50%; - border: 2px solid #eee; - box-shadow: 0 1px 2px rgba(0,0,0,0.08); - cursor: pointer; - display: inline-block; - transition: border 0.2s, box-shadow 0.2s; - } - - .color-circle:hover { - border: 2px solid #888; - box-shadow: 0 2px 8px rgba(0,0,0,0.12); - } - - .format-value { - font-weight: 400; - margin-left: 0.3em; - } - - .color-switcher-preview { - display: flex; - justify-content: center; - gap: 0.4em; - align-items: center; - margin: 1em 0 0.5em 0; - }