Style small icons

4 files changed, 35 insertions, 8 deletions

diff --git a/extension/public/manifest.json b/extension/public/manifest.json
index 27ba801..3e4c78d 100644
--- a/extension/public/manifest.json
+++ b/extension/public/manifest.json
@@ -17,7 +17,7 @@
     "storage"
   ],
   "background": {
-    "service_worker": "background.js"
+    "scripts": ["background.js"]
   },
   "content_scripts": [{
     "js": ["iconGrabber.js"],
diff --git a/extension/src/components/Bookmark.tsx b/extension/src/components/Bookmark.tsx
index c12da35..d9dd7cb 100644
--- a/extension/src/components/Bookmark.tsx
+++ b/extension/src/components/Bookmark.tsx
@@ -1,6 +1,6 @@
 import BookmarkTreeNode = browser.bookmarks.BookmarkTreeNode;
 import GlobeIcon from "../assets/globe.svg"
-import React, {useEffect} from "react";
+import React, {SyntheticEvent, useEffect} from "react";
 import {getBrowser} from "../main.tsx";
 
 /**
@@ -10,6 +10,7 @@ import {getBrowser} from "../main.tsx";
  */
 function Bookmark(props: {data: BookmarkTreeNode}) {
     let [favicon, setFavicon] = React.useState(GlobeIcon);
+    let [isSmall, setSmall] = React.useState(true);
     useEffect(() => {
         // faviconURL(props.data.url).then(o => o && setFavicon(o))
         faviconURL(props.data).then(r => {
@@ -21,7 +22,12 @@ function Bookmark(props: {data: BookmarkTreeNode}) {
 
     return(
         <a className="bookmark draggable" href={props.data.url}>
-            <img alt="Bookmark icon" src={favicon}></img>
+            <div className={"icon-box" + (isSmall ? " small" : "")}>
+                <img alt="Bookmark icon"
+                     src={favicon}
+                     onLoad={(e) => setSmall(e.currentTarget.naturalWidth < 75 && !favicon.endsWith(".svg") && favicon !== GlobeIcon)}
+                ></img>
+            </div>
             <span>{props.data.title}</span>
         </a>
     );
diff --git a/extension/src/components/FolderButton.tsx b/extension/src/components/FolderButton.tsx
index 2d7cc9e..42e5d60 100644
--- a/extension/src/components/FolderButton.tsx
+++ b/extension/src/components/FolderButton.tsx
@@ -15,11 +15,13 @@ function FolderButton(props: {data: BookmarkTreeNode}) {
 
     return(
         <>
-            <a className={"bookmark draggable"} onClick={() => setFolderOpen(!folderOpen)}>
-                <img alt="Folder icon" src={folderOpen ? folderIconOpen : folderIcon}/>
+            <a className="bookmark draggable" onClick={() => setFolderOpen(!folderOpen)}>
+                <div className="icon-box">
+                    <img alt="Folder icon" src={folderOpen ? folderIconOpen : folderIcon}/>
+                </div>
                 <span>{props.data.title}</span>
             </a>
-            { folderOpen
+            {folderOpen
                 && props.data.children
                 && props.data.children.length > 0
                 && (<FolderBody data={props.data}/>)}
diff --git a/extension/src/index.css b/extension/src/index.css
index ba651fc..33c176b 100644
--- a/extension/src/index.css
+++ b/extension/src/index.css
@@ -85,11 +85,30 @@ body > .folderBody {
   padding: 10px;
   margin: 10px;
   user-select: none;
+  border-radius: 10px;
 }
 
-.bookmark > img {
-  padding: 15px;
+.icon-box {
+  margin: 15px;
+  aspect-ratio: 1 / 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.icon-box.small {
+  border-radius: 10px;
+  background-color: #ffffff14;
+}
 
+.icon-box > img {
+  width: 100%;
+  border-radius: 10px;
+}
+
+.icon-box.small > img  {
+  width: 50%;
+  border-radius: 5px;
 }
 
 .bookmark > span {