Added a logo

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;">
-    <g transform="matrix(1,0,0,1,-771.901,-775.567)">
-        <g transform="matrix(5.14628,0,0,5.00692,41.3851,-6704.09)">
+<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.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;
-  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 {