Styling: Added custom font + replaced exit button with a new svg + added new...

Styling: Added custom font + replaced exit button with a new svg + added new svg button for sending urls to db

assets/add.svg

+<svg clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m21 3.998c0-.478-.379-1-1-1h-16c-.62 0-1 .519-1 1v16c0 .621.52 1 1 1h16c.478 0 1-.379 1-1zm-16.5.5h15v15h-15zm6.75 6.752h-3.5c-.414 0-.75.336-.75.75s.336.75.75.75h3.5v3.5c0 .414.336.75.75.75s.75-.336.75-.75v-3.5h3.5c.414 0 .75-.336.75-.75s-.336-.75-.75-.75h-3.5v-3.5c0-.414-.336-.75-.75-.75s-.75.336-.75.75z" fill-rule="nonzero"/></svg>
\ No newline at end of file

assets/exit.svg

+<svg clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m12 10.93 5.719-5.72c.146-.146.339-.219.531-.219.404 0 .75.324.75.749 0 .193-.073.385-.219.532l-5.72 5.719 5.719 5.719c.147.147.22.339.22.531 0 .427-.349.75-.75.75-.192 0-.385-.073-.531-.219l-5.719-5.719-5.719 5.719c-.146.146-.339.219-.531.219-.401 0-.75-.323-.75-.75 0-.192.073-.384.22-.531l5.719-5.719-5.72-5.719c-.146-.147-.219-.339-.219-.532 0-.425.346-.749.75-.749.192 0 .385.073.531.219z"/></svg>
\ No newline at end of file

background/messages/ping.ts

@@ -60,4 +60,4 @@ const handler: PlasmoMessaging.MessageHandler = async (req, res) => {
   })
 }
 
-export default handler
+export default handler
\ No newline at end of file

content.svelte

 <script context="module" lang="ts">
+  import add from "data-base64:~assets/add.svg"
+  import exit from "data-base64:~assets/exit.svg"
   import logo from "data-base64:~assets/icon.development.png"
   import cssText from "data-text:~style.css"
+  import type { PlasmoCSConfig } from "plasmo"
 
   import { sendToBackground } from "@plasmohq/messaging"
 
   import Rating from "~rating.svelte"
 
+  export const config: PlasmoCSConfig = {
+    matches: ["<all_urls>"],
+    css: ["font.css"]
+  }
+
   export const getStyle = () => {
     const style = document.createElement("style")
     style.textContent = cssText
@@ -58,8 +66,12 @@
       environmental = Math.round(
         (resp.answer.mainAnswer.environmental_total / 1.75) * 100
       ).toString()
-      supply = Math.round((resp.answer.mainAnswer.supplychain_total / 6) * 100).toString()
-      social = Math.round((resp.answer.mainAnswer.social_total / 3.25) * 100).toString()
+      supply = Math.round(
+        (resp.answer.mainAnswer.supplychain_total / 6) * 100
+      ).toString()
+      social = Math.round(
+        (resp.answer.mainAnswer.social_total / 3.25) * 100
+      ).toString()
       if (resp.validUrl != undefined) {
         visible = true
       } else {
@@ -73,40 +85,45 @@
 
 {#if visible}
   <section
-    class="p-2 font-roboto font-normal fixed top-10 right-10 w-80 bg-white rounded-xl text-black shadow-md">
-    <div class="grid grid-cols-2">
+    class="font-normal fixed top-10 right-10 w-80 bg-white rounded-xl text-black shadow-lg">
+    <div class="grid grid-cols-2 shadow-sm p-2 bg-green-50 rounded-t-xl">
       <div class="flex gap-2 items-center">
-        <h2 class="text-xl font-bold">Leaf</h2>
         <img class="w-6 h-6" src={logo} alt="Leaf logo" />
+        <h1 class="text-2xl font-bold logo">Leaf</h1>
       </div>
-      <button
-        on:click={() => closePopup()}
-        class="justify-self-end mr-3 text-2xl">x</button>
-    </div>
-    <div>
-      <p>Brand: <span class="font-bold">{brand}</span></p>
-    </div>
-    <div class="grid grid-cols-3 justify-items-center text-sm my-2">
-      <div class="grid grid-cols-1 justify-items-center">
-        <p>Environmental</p>
-        <Rating score={environmental}></Rating>
+      <div class="justify-self-end mr-3 text-2xl flex items-center">
+        <button class="mr-1" title="Add url to the list"
+          ><img class="w-7 h-7" src={add} alt="add button" /></button>
+        <button title="Close window" on:click={() => closePopup()}
+          ><img class="w-7 h-7" src={exit} alt="add button" /></button>
       </div>
-      <div class="grid grid-cols-1 justify-items-center">
-        <p>Supply Chain</p>
-        <Rating score={supply}></Rating>
+    </div>
+    <section class="p-2">
+      <div>
+        <p>Brand: <span class="font-bold">{brand}</span></p>
       </div>
-      <div class="grid grid-cols-1 justify-items-center">
-        <p>Social</p>
-        <Rating score={social}></Rating>
+      <div class="grid grid-cols-3 justify-items-center text-sm my-2">
+        <div class="grid grid-cols-1 justify-items-center">
+          <p>Environmental</p>
+          <Rating score={environmental}></Rating>
+        </div>
+        <div class="grid grid-cols-1 justify-items-center">
+          <p>Supply Chain</p>
+          <Rating score={supply}></Rating>
+        </div>
+        <div class="grid grid-cols-1 justify-items-center">
+          <p>Social</p>
+          <Rating score={social}></Rating>
+        </div>
       </div>
-    </div>
-    <p class="text-sm text-gray-300 font-light">
-      Source: <a
-        class="text-green-300"
-        href="https://www.fashionrevolution.org/about/transparency/"
-        target="_blank">
-        Fashion Transparency Index
-      </a>
-    </p>
+      <p class="text-sm text-gray-300 font-light">
+        Source: <a
+          class="text-green-300"
+          href="https://www.fashionrevolution.org/about/transparency/"
+          target="_blank">
+          Fashion Transparency Index
+        </a>
+      </p>
+    </section>
   </section>
 {/if}

font.css

+@font-face {
+  font-family: "Sacramento";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(data-base64:~assets/Sacramento.woff2) format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
+    U+FEFF, U+FFFD;
+}

style.css

-@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400&display=swap");
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+.logo {
+    font-family: "Sacramento";
+}
\ No newline at end of file

tailwind.config.js

@@ -3,12 +3,6 @@ module.exports = {
   mode: "jit",
   darkMode: "class",
   content: ["./**/*.svelte"],
-  theme: {
-    extend: {
-      fontFamily: {
-        roboto: ["Roboto", "sans-serif"]
-      }
-    }
-  },
+  theme: {},
   plugins: []
 }