improvement: update icons

zhanglun · Nov 13, 2024 · 39516e7 · 39516e7
1 parent 8630145
commit 39516e7
Show file tree

Hide file tree

Showing 6 changed files with 27 additions and 24 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;
   }