From 39516e7d4d360dff78cdcb4c168c6ca5a8e32085 Mon Sep 17 00:00:00 2001
From: zhanglun <zhanglun1410@gmail.com>
Date: Wed, 13 Nov 2024 10:35:08 +0800
Subject: [PATCH] improvement: update icons

---
 src/components/ArticleItem/index.tsx    |  2 +-
 src/components/NiceFolderIcon/index.tsx | 12 ++----------
 src/components/Subscribes/ItemView.tsx  | 14 ++++++++++----
 src/components/Subscribes/index.tsx     | 18 +++++++++++-------
 src/helpers/parseXML.ts                 |  3 ++-
 src/styles/custom-components.css        |  2 +-
 6 files changed, 27 insertions(+), 24 deletions(-)

diff --git a/src/components/ArticleItem/index.tsx b/src/components/ArticleItem/index.tsx
index 24e38c575..04bb4b7c5 100644
--- a/src/components/ArticleItem/index.tsx
+++ b/src/components/ArticleItem/index.tsx
@@ -67,7 +67,7 @@ export const ArticleItem = React.forwardRef((props: { article: ArticleResItem },
             src={getChannelFavicon(article.feed_url)}
             fallback={article.feed_title?.slice(0, 1) || "L"}
             alt={article.feed_title}
-            className="rounded w-5 h-5"
+            className="rounded w-4 h-4"
           />
           <span className="max-w-[94px] overflow-hidden text-ellipsis mr-1 whitespace-nowrap">
             {article.author || article.feed_title}
diff --git a/src/components/NiceFolderIcon/index.tsx b/src/components/NiceFolderIcon/index.tsx
index af53d3773..2181bcbfb 100644
--- a/src/components/NiceFolderIcon/index.tsx
+++ b/src/components/NiceFolderIcon/index.tsx
@@ -9,11 +9,7 @@ export interface NiceFolderIconProps
   size?: number;
 }
 
-export const NiceFolderIcon = ({
-  status,
-  size = 20,
-  ...props
-}: NiceFolderIconProps) => {
+export const NiceFolderIcon = ({ status, size = 18, ...props }: NiceFolderIconProps) => {
   const styles = {
     folder: {
       width: `${size}px`,
@@ -22,11 +18,7 @@ export const NiceFolderIcon = ({
   };
 
   return (
-    <div
-      className={clsx("folder", `folder--${status}`)}
-      style={styles.folder}
-      {...props}
-    >
+    <div className={clsx("folder", `folder--${status}`)} style={styles.folder} {...props}>
       <div className="folder__back">
         <div className="paper"></div>
         <div className="paper"></div>
diff --git a/src/components/Subscribes/ItemView.tsx b/src/components/Subscribes/ItemView.tsx
index 038e9bbf7..7ced257b3 100644
--- a/src/components/Subscribes/ItemView.tsx
+++ b/src/components/Subscribes/ItemView.tsx
@@ -83,13 +83,19 @@ export const ItemView: FC<CardProps> = ({ uuid, text, feed, index, isExpanded, t
         }}
       >
         {feed.item_type === "folder" && <div>{renderNiceFolder(isActive, isExpanded)}</div>}
-        {feed.link && <Avatar size="1" src={ico} alt={feed.title} fallback={feed.title.slice(0, 1)}></Avatar>}
+        {feed.link && (
+          <Avatar
+            size="1"
+            src={ico}
+            alt={feed.title}
+            fallback={feed.title.slice(0, 1)}
+            className="w-[18px] h-[18px]"
+          ></Avatar>
+        )}
         <span className={clsx("shrink grow basis-[0%] overflow-hidden text-ellipsis whitespace-nowrap text-sm")}>
           {feed.title}
         </span>
-        {unread > 0 && (
-          <span className={clsx("h-4 min-w-[1rem] text-center text-sm font-medium leading-4")}>{unread}</span>
-        )}
+        {unread > 0 && <span className={clsx("h-4 min-w-[1rem] text-center text-[10px] leading-4")}>{unread}</span>}
       </div>
       {props.children}
     </>
diff --git a/src/components/Subscribes/index.tsx b/src/components/Subscribes/index.tsx
index f385891a9..8d8409563 100644
--- a/src/components/Subscribes/index.tsx
+++ b/src/components/Subscribes/index.tsx
@@ -209,7 +209,7 @@ const ChannelList = (): JSX.Element => {
         })}
         ref={listRef}
       >
-        <h2 className="mb-2 mt-6 px-4 text-lg font-semibold tracking-tight">Collections</h2>
+        <h2 className="mb-2 mt-6 px-2 text-lg font-semibold tracking-tight">Collections</h2>
         <div>
           <div
             onClick={() => {
@@ -298,7 +298,7 @@ const ChannelList = (): JSX.Element => {
             </NavLink>
           </div>
         </div>
-        <h2 className="mb-2 mt-6 px-4 text-lg font-semibold tracking-tight">Feeds</h2>
+        <h2 className="mb-2 mt-6 px-2 text-lg font-semibold tracking-tight">Feeds</h2>
         <ContextMenu.Root onOpenChange={handleContextMenuChange}>
           <ContextMenu.Trigger>
             <div>
@@ -320,7 +320,10 @@ const ChannelList = (): JSX.Element => {
                   <Pencil size={14} /> Edit folder
                 </ContextMenu.Item>
                 <ContextMenu.Separator />
-                <ContextMenu.Item onClick={() => setDeleteFolderStatus(true)} className="text-[var(--red-10)] hover:text-white">
+                <ContextMenu.Item
+                  onClick={() => setDeleteFolderStatus(true)}
+                  className="text-[var(--red-10)] hover:text-white"
+                >
                   <Trash2 size={14} /> Delete folder
                 </ContextMenu.Item>
               </>
@@ -371,7 +374,10 @@ const ChannelList = (): JSX.Element => {
                       <FileText size={14} /> View detail
                     </ContextMenu.Item>
                     <ContextMenu.Separator />
-                    <ContextMenu.Item onClick={() => setModalStatus(true)} className="text-[var(--red-10)] hover:text-white">
+                    <ContextMenu.Item
+                      onClick={() => setModalStatus(true)}
+                      className="text-[var(--red-10)] hover:text-white"
+                    >
                       <BellOff size={14} /> Unsubscribe
                     </ContextMenu.Item>
                   </>
@@ -410,9 +416,7 @@ const ChannelList = (): JSX.Element => {
           afterCancel={() => store.setFeedContextMenuTarget(null)}
         />
       </div>
-      <div className="h-[8px]">
-
-      </div>
+      <div className="h-[8px]"></div>
       {refreshing && (
         <div className="sticky bottom-0 left-0 right-0 p-2 text-right">
           <span className="mr-3 text-xs">Syncing...</span>
diff --git a/src/helpers/parseXML.ts b/src/helpers/parseXML.ts
index 5ea33527f..c7d0c581e 100644
--- a/src/helpers/parseXML.ts
+++ b/src/helpers/parseXML.ts
@@ -6,7 +6,8 @@ export const getChannelFavicon = (url: string) => {
   try {
     const hostname = url ? new URL(url).hostname : "";
 
-    return hostname ? `https://icons.duckduckgo.com/ip3/${hostname}.ico` : "";
+    // return hostname ? `https://icons.duckduckgo.com/ip3/${hostname}.ico` : "";
+    return hostname ? ` https://unavatar.io/${hostname}` : "";
   } catch (err) {
     console.log("error url", url);
     console.error(err);
diff --git a/src/styles/custom-components.css b/src/styles/custom-components.css
index f0d479ddc..9c209a464 100644
--- a/src/styles/custom-components.css
+++ b/src/styles/custom-components.css
@@ -90,7 +90,7 @@
 
 @layer components {
   .sidebar-item {
-    @apply relative z-[1] flex items-center gap-2 rounded-md text-sm px-3 h-9 my-[2px] w-full cursor-pointer border-transparent;
+    @apply relative z-[1] flex items-center gap-2 rounded-md text-sm px-2 h-8 my-[1px] w-full cursor-pointer border-transparent;
     @apply after:block after:content-[''] after:-z-10 after:absolute after:top-[0] after:left-[0] after:w-full after:h-full after:rounded-md after:opacity-0 after:scale-90 after:transition-all after:duration-300 after:ease-in-out;
     @apply hover:after:opacity-100 hover:after:scale-100 after:bg-sidebar-hover;
   }