diff --git a/.gitignore b/.gitignore index 83e5362..fdc1eef 100644 --- a/.gitignore +++ b/.gitignore @@ -15,3 +15,4 @@ __pycache__/ *.sqlite3 *.log backend/data/avatars/ +LinkLog.afdesign~lock~ diff --git a/LinkLog.afdesign b/LinkLog.afdesign new file mode 100644 index 0000000..29313fa Binary files /dev/null and b/LinkLog.afdesign differ diff --git a/LinkLog.svg b/LinkLog.svg new file mode 100644 index 0000000..168c08e --- /dev/null +++ b/LinkLog.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + L + + + + + + Link Log + + + + diff --git a/VIBE/CHAT_LOG.md b/VIBE/CHAT_LOG.md index ccbd84b..12fa5f9 100644 --- a/VIBE/CHAT_LOG.md +++ b/VIBE/CHAT_LOG.md @@ -391,3 +391,21 @@ Use the logo.svg in both the plugin as well as on the web page ### Assistant outcome Bundled the supplied logo into the web static assets and Firefox extension, replaced text-only headers with accessible logo images, added responsive sizing, and verified all web pages, extension references, scripts, and the strict backend suite. + +### User +use the logo as the logo on the dropdown for firefox extensions but put it on a dark background + +### Assistant outcome +Updated the Firefox popup/dropdown with a dark Catppuccin-style background and matching dark form controls, tags fieldset, status states, and buttons. The existing bundled logo remains the popup brand mark and is readable against the dark surface. Firefox scripts and the strict backend suite passed. + +### User +Make sure that the logo is used in the toolbar + +### Assistant outcome +Configured the Firefox Manifest V3 action and extension icon declarations to use the bundled `logo.svg` at 16, 32, 48, and 96 pixel entries. Manifest validation, logo asset verification, extension syntax checks, and the strict backend suite passed. + +### User +For the logo in the toolbar make the background dark + +### Assistant outcome +Added a Catppuccin Mocha `#1e1e2e` background rectangle directly behind the Firefox toolbar logo artwork, preserving the foreground logo and source asset. SVG, manifest, extension scripts, and strict backend validation passed. diff --git a/VIBE/PROMPTS.md b/VIBE/PROMPTS.md index 9de7ac1..8466940 100644 --- a/VIBE/PROMPTS.md +++ b/VIBE/PROMPTS.md @@ -68,6 +68,9 @@ 64. The profile page shows in red: "can't access property \"classList\", document.querySelector(...) is null" 65. The post prefix is now 'From my #LinkLog: "' make that 'From my #LinkLog: ' 66. Use the logo.svg in both the plugin as well as on the web page +67. use the logo as the logo on the dropdown for firefox extensions but put it on a dark background +68. Make sure that the logo is used in the toolbar +69. For the logo in the toolbar make the background dark ## Future entries diff --git a/frontend/static/logo.svg b/frontend/static/logo.svg index 79df06e..168c08e 100644 --- a/frontend/static/logo.svg +++ b/frontend/static/logo.svg @@ -1,17 +1,20 @@ - - - + + + + + + L - + - + - LinkLog + Link Log diff --git a/logo.svg b/logo.svg deleted file mode 100644 index 79df06e..0000000 --- a/logo.svg +++ /dev/null @@ -1,18 +0,0 @@ - - - - - - - - L - - - - - - LinkLog - - - - diff --git a/webextension/logo.svg b/webextension/logo.svg index 79df06e..168c08e 100644 --- a/webextension/logo.svg +++ b/webextension/logo.svg @@ -1,17 +1,20 @@ - - - + + + + + + L - + - + - LinkLog + Link Log diff --git a/webextension/manifest.json b/webextension/manifest.json index 370e096..ce8924b 100644 --- a/webextension/manifest.json +++ b/webextension/manifest.json @@ -13,7 +13,15 @@ ], "action": { "default_title": "LinkLog", - "default_popup": "popup.html" + "default_popup": "popup.html", + "default_icon": { + "16": "logo.svg", + "32": "logo.svg" + } + }, + "icons": { + "48": "logo.svg", + "96": "logo.svg" }, "options_ui": { "page": "options.html", diff --git a/webextension/popup.css b/webextension/popup.css index 00c7f54..9242ab8 100644 --- a/webextension/popup.css +++ b/webextension/popup.css @@ -1,13 +1,14 @@ body { width: 360px; margin: 0; - font-family: sans-serif; - background: #f5f7fb; - color: #1f2937; + font-family: 'Avenir Next', sans-serif; + background: #1e1e2e; + color: #cdd6f4; } .popup-shell { padding: 16px; + background: linear-gradient(145deg, #313244, #1e1e2e 42%); } header h1 { @@ -19,7 +20,7 @@ header h1 { display: block; width: 150px; height: 42px; - margin-bottom: 8px; + margin-bottom: 14px; object-fit: contain; object-position: left center; } @@ -29,6 +30,7 @@ label { margin-bottom: 12px; font-size: 0.85rem; font-weight: 600; + color: #a6adc8; } input, @@ -42,10 +44,11 @@ button { input, textarea { margin-top: 6px; - border: 1px solid #cbd5e1; + border: 1px solid #585b70; border-radius: 8px; padding: 8px 10px; - background: white; + background: #313244; + color: #cdd6f4; } textarea { @@ -57,12 +60,13 @@ fieldset { gap: 8px; margin: 0; padding: 10px; - border: 1px solid #cbd5e1; + border: 1px solid #585b70; border-radius: 8px; } legend { padding: 0 4px; + color: #b4befe; font-weight: 600; } @@ -85,21 +89,24 @@ legend { } button { - border: none; + border: 1px solid #cba6f7; border-radius: 8px; padding: 10px 12px; cursor: pointer; font-weight: 600; + background: #cba6f7; + color: #11111b; } #submit-link { - background: #2563eb; - color: white; + background: #cba6f7; + color: #11111b; } .secondary { - background: #e2e8f0; - color: #0f172a; + background: #45475a; + border-color: #585b70; + color: #cdd6f4; } .status { @@ -110,13 +117,13 @@ button { } .status.success { - background: #dcfce7; - color: #166534; + background: #1e3a38; + color: #94e2d5; } .status.error { - background: #fee2e2; - color: #991b1b; + background: #45243a; + color: #f38ba8; } .hidden {