Added a logo

.gitignore

@@ -15,3 +15,4 @@ __pycache__/
 *.sqlite3
 *.log
 backend/data/avatars/
+LinkLog.afdesign~lock~

LinkLog.svg

@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 1804 1399" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g transform="matrix(1,0,0,1,-669.006,-568.74)">
+        <g transform="matrix(0.972876,0,0,1.03015,-24.1588,-120.473)">
+            <rect x="712.491" y="669.041" width="1854.11" height="1357.72" style="fill:rgb(88,91,112);"/>
+        </g>
+        <g transform="matrix(5.14628,0,0,5.00692,41.2191,-6728.82)">
+            <g transform="matrix(239.668,0,0,239.668,455.228,1644.94)">
+            </g>
+            <text x="130.248px" y="1644.94px" style="font-family:'Asset-Regular', 'Asset';font-size:239.668px;fill:rgb(245,224,220);">L</text>
+        </g>
+        <g transform="matrix(0.135097,0,0,0.21791,668.366,1407.84)">
+            <g transform="matrix(1.02783,0,0,1,-21.8791,0)">
+                <g transform="matrix(1200,0,0,1200,12207.5,1802.1)">
+                </g>
+                <text x="786.091px" y="1802.1px" style="font-family:'Asset-Regular', 'Asset';font-size:1200px;fill:rgb(203,166,247);">L<tspan x="2432.05px 3507.29px 5279px " y="1802.1px 1802.1px 1802.1px ">ink</tspan> L<tspan x="9170.73px 10682.9px " y="1802.1px 1802.1px ">og</tspan></text>
+            </g>
+        </g>
+    </g>
+</svg>

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.

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
 

frontend/static/logo.svg

@@ -1,17 +1,20 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg width="100%" height="100%" viewBox="0 0 1599 972" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+<svg width="100%" height="100%" viewBox="0 0 1804 1399" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
-    <g transform="matrix(1,0,0,1,-771.901,-775.567)">
+    <g transform="matrix(1,0,0,1,-669.006,-568.74)">
-        <g transform="matrix(5.14628,0,0,5.00692,41.3851,-6704.09)">
+        <g transform="matrix(0.972876,0,0,1.03015,-24.1588,-120.473)">
+            <rect x="712.491" y="669.041" width="1854.11" height="1357.72" style="fill:rgb(88,91,112);"/>
+        </g>
+        <g transform="matrix(5.14628,0,0,5.00692,41.2191,-6728.82)">
             <g transform="matrix(239.668,0,0,239.668,455.228,1644.94)">
             </g>
             <text x="130.248px" y="1644.94px" style="font-family:'Asset-Regular', 'Asset';font-size:239.668px;fill:rgb(245,224,220);">L</text>
         </g>
-        <g transform="matrix(0.139428,0,0,0.139428,656.217,1454.62)">
+        <g transform="matrix(0.135097,0,0,0.21791,668.366,1407.84)">
             <g transform="matrix(1.02783,0,0,1,-21.8791,0)">
-                <g transform="matrix(1200,0,0,1200,11689,1802.1)">
+                <g transform="matrix(1200,0,0,1200,12207.5,1802.1)">
                 </g>
-                <text x="786.091px" y="1802.1px" style="font-family:'Asset-Regular', 'Asset';font-size:1200px;fill:rgb(203,166,247);">L<tspan x="2432.05px 3507.29px 5279px 6980.56px 8652.17px 10164.4px " y="1802.1px 1802.1px 1802.1px 1802.1px 1802.1px 1802.1px ">inkLog</tspan></text>
+                <text x="786.091px" y="1802.1px" style="font-family:'Asset-Regular', 'Asset';font-size:1200px;fill:rgb(203,166,247);">L<tspan x="2432.05px 3507.29px 5279px " y="1802.1px 1802.1px 1802.1px ">ink</tspan> L<tspan x="9170.73px 10682.9px " y="1802.1px 1802.1px ">og</tspan></text>
             </g>
         </g>
     </g>

logo.svg

@@ -1,18 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg width="100%" height="100%" viewBox="0 0 1599 972" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
-    <g transform="matrix(1,0,0,1,-771.901,-775.567)">
-        <g transform="matrix(5.14628,0,0,5.00692,41.3851,-6704.09)">
-            <g transform="matrix(239.668,0,0,239.668,455.228,1644.94)">
-            </g>
-            <text x="130.248px" y="1644.94px" style="font-family:'Asset-Regular', 'Asset';font-size:239.668px;fill:rgb(245,224,220);">L</text>
-        </g>
-        <g transform="matrix(0.139428,0,0,0.139428,656.217,1454.62)">
-            <g transform="matrix(1.02783,0,0,1,-21.8791,0)">
-                <g transform="matrix(1200,0,0,1200,11689,1802.1)">
-                </g>
-                <text x="786.091px" y="1802.1px" style="font-family:'Asset-Regular', 'Asset';font-size:1200px;fill:rgb(203,166,247);">L<tspan x="2432.05px 3507.29px 5279px 6980.56px 8652.17px 10164.4px " y="1802.1px 1802.1px 1802.1px 1802.1px 1802.1px 1802.1px ">inkLog</tspan></text>
-            </g>
-        </g>
-    </g>
-</svg>

webextension/logo.svg

@@ -1,17 +1,20 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg width="100%" height="100%" viewBox="0 0 1599 972" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+<svg width="100%" height="100%" viewBox="0 0 1804 1399" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
-    <g transform="matrix(1,0,0,1,-771.901,-775.567)">
+    <g transform="matrix(1,0,0,1,-669.006,-568.74)">
-        <g transform="matrix(5.14628,0,0,5.00692,41.3851,-6704.09)">
+        <g transform="matrix(0.972876,0,0,1.03015,-24.1588,-120.473)">
+            <rect x="712.491" y="669.041" width="1854.11" height="1357.72" style="fill:rgb(88,91,112);"/>
+        </g>
+        <g transform="matrix(5.14628,0,0,5.00692,41.2191,-6728.82)">
             <g transform="matrix(239.668,0,0,239.668,455.228,1644.94)">
             </g>
             <text x="130.248px" y="1644.94px" style="font-family:'Asset-Regular', 'Asset';font-size:239.668px;fill:rgb(245,224,220);">L</text>
         </g>
-        <g transform="matrix(0.139428,0,0,0.139428,656.217,1454.62)">
+        <g transform="matrix(0.135097,0,0,0.21791,668.366,1407.84)">
             <g transform="matrix(1.02783,0,0,1,-21.8791,0)">
-                <g transform="matrix(1200,0,0,1200,11689,1802.1)">
+                <g transform="matrix(1200,0,0,1200,12207.5,1802.1)">
                 </g>
-                <text x="786.091px" y="1802.1px" style="font-family:'Asset-Regular', 'Asset';font-size:1200px;fill:rgb(203,166,247);">L<tspan x="2432.05px 3507.29px 5279px 6980.56px 8652.17px 10164.4px " y="1802.1px 1802.1px 1802.1px 1802.1px 1802.1px 1802.1px ">inkLog</tspan></text>
+                <text x="786.091px" y="1802.1px" style="font-family:'Asset-Regular', 'Asset';font-size:1200px;fill:rgb(203,166,247);">L<tspan x="2432.05px 3507.29px 5279px " y="1802.1px 1802.1px 1802.1px ">ink</tspan> L<tspan x="9170.73px 10682.9px " y="1802.1px 1802.1px ">og</tspan></text>
             </g>
         </g>
     </g>

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",

webextension/popup.css

@@ -1,13 +1,14 @@
 body {
   width: 360px;
   margin: 0;
-  font-family: sans-serif;
+  font-family: 'Avenir Next', sans-serif;
-  background: #f5f7fb;
+  background: #1e1e2e;
-  color: #1f2937;
+  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;
+  background: #cba6f7;
-  color: white;
+  color: #11111b;
 }
 
 .secondary {
-  background: #e2e8f0;
+  background: #45475a;
-  color: #0f172a;
+  border-color: #585b70;
+  color: #cdd6f4;
 }
 
 .status {
@@ -110,13 +117,13 @@ button {
 }
 
 .status.success {
-  background: #dcfce7;
+  background: #1e3a38;
-  color: #166534;
+  color: #94e2d5;
 }
 
 .status.error {
-  background: #fee2e2;
+  background: #45243a;
-  color: #991b1b;
+  color: #f38ba8;
 }
 
 .hidden {