From 44f32ca142cfa3bf7d11c4cd01bfe369e206a80d Mon Sep 17 00:00:00 2001
From: sowgro <tpoke.ferrari@gmail.com>
Date: Sun, 24 Nov 2024 19:40:15 -0500
Subject: Style small icons

---
 extension/src/components/Bookmark.tsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

(limited to 'extension/src/components/Bookmark.tsx')

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>
     );
-- 
cgit v1.2.3