fix: feedIcon margin

Signed-off-by: Innei <tukon479@gmail.com>

Author: Innei

apps/renderer/src/modules/boost/modal.tsx

@@ -52,7 +52,7 @@ export const BoostModalContent = ({ feedId }: { feedId: string }) => {
   return (
     <div className="flex w-full flex-col gap-3 lg:w-[80vw] lg:max-w-[350px]">
       <div className="center flex flex-col gap-2">
-        <FeedIcon className="mr-0" feed={feed} size={50} />
+        <FeedIcon noMargin feed={feed} size={50} />
 
         <h1 className="center mt-2 flex flex-wrap text-lg font-bold">
           <div className="center flex shrink-0">

apps/renderer/src/modules/discover/recommendations-card.tsx

@@ -56,7 +56,7 @@ export const RecommendationCard: FC<RecommendationCardProps> = memo(
           <CardTitle className="relative z-[1] flex items-center pt-[10px] text-base @[280px]:pt-10">
             <span className="center box-content flex aspect-square rounded-full bg-background p-1.5">
               <span className="overflow-hidden rounded-full">
-                <FeedIcon size={28} className="mr-0" siteUrl={`https://${data.url}`} />
+                <FeedIcon size={28} noMargin siteUrl={`https://${data.url}`} />
               </span>
             </span>
             <a

apps/renderer/src/modules/entry-content/components/SupportCreator.tsx

@@ -50,7 +50,7 @@ export const SupportCreator = ({ entryId }: { entryId: string }) => {
             enableModal
           />
         ) : (
-          <FeedIcon className="mr-0 w-40 flex-col gap-3 p-0" size={46} feed={feed} fallback />
+          <FeedIcon noMargin className="w-40 flex-col gap-3 p-0" size={46} feed={feed} fallback />
         )}
         <span className="-mt-6 text-lg font-medium">{feed.title}</span>
 

apps/renderer/src/modules/feed/feed-icon.tsx

@@ -86,6 +86,7 @@ export function FeedIcon({
   siteUrl,
   useMedia,
   disableFadeIn,
+  noMargin,
 }: {
   feed?: FeedIconFeed | null
   entry?: FeedIconEntry | null
@@ -100,7 +101,9 @@ export function FeedIcon({
 
   useMedia?: boolean
   disableFadeIn?: boolean
+  noMargin?: boolean
 }) {
+  const marginClassName = noMargin ? "" : "mr-2"
   const image =
     (useMedia
       ? entry?.media?.find((i) => i.type === "photo")?.url || entry?.authorAvatar
@@ -139,7 +142,7 @@ export function FeedIcon({
       className={cn(
         "flex shrink-0 items-center justify-center rounded-sm",
         "text-white",
-        "mr-2",
+        marginClassName,
         className,
       )}
     >
@@ -176,7 +179,7 @@ export function FeedIcon({
       ImageElement = (
         <PlatformIcon url={image} style={sizeStyle} className={cn("center", className)}>
           <m.img
-            className={cn("mr-2", className)}
+            className={cn(marginClassName, className)}
             style={sizeStyle}
             {...(disableFadeIn ? {} : fadeInVariant)}
           />
@@ -203,7 +206,7 @@ export function FeedIcon({
           className={cn("center", className)}
         >
           <FallbackableImage
-            className={cn("mr-2", className)}
+            className={cn(marginClassName, className)}
             style={sizeStyle}
             fallbackUrl={fallbackSrc}
           />
@@ -212,15 +215,19 @@ export function FeedIcon({
       break
     }
     case feed?.type === "inbox": {
-      ImageElement = <i className="i-mgc-inbox-cute-fi mr-2 shrink-0" style={sizeStyle} />
+      ImageElement = (
+        <i className={cn("i-mgc-inbox-cute-fi shrink-0", marginClassName)} style={sizeStyle} />
+      )
       break
     }
     case !!feed?.title && !!feed.title[0]: {
       ImageElement = fallbackIcon
       break
     }
     default: {
-      ImageElement = <i className="i-mgc-link-cute-re mr-2 shrink-0" style={sizeStyle} />
+      ImageElement = (
+        <i className={cn("i-mgc-link-cute-re shrink-0", marginClassName)} style={sizeStyle} />
+      )
       break
     }
   }
@@ -231,7 +238,7 @@ export function FeedIcon({
 
   if (fallback && !!finalSrc) {
     return (
-      <Avatar className="mr-2 shrink-0" style={sizeStyle}>
+      <Avatar className={cn("shrink-0", marginClassName)} style={sizeStyle}>
         <AvatarImage className="rounded-sm object-cover" asChild src={finalSrc}>
           {ImageElement}
         </AvatarImage>
@@ -246,12 +253,12 @@ export function FeedIcon({
   if (!finalSrc) return ImageElement
   // Else
   return (
-    <Avatar className="shrink-0" style={sizeStyle}>
+    <Avatar className={cn("shrink-0", marginClassName)} style={sizeStyle}>
       <AvatarImage asChild src={finalSrc}>
         {ImageElement}
       </AvatarImage>
       <AvatarFallback delayMs={200}>
-        <div className={cn("mr-2", className)} style={sizeStyle} data-placeholder={finalSrc} />
+        <div className={className} style={sizeStyle} data-placeholder={finalSrc} />
       </AvatarFallback>
     </Avatar>
   )

apps/renderer/src/modules/settings/tabs/lists/modals.tsx

@@ -302,7 +302,7 @@ const RowRender = ({ feedId, listId }: { feedId: string; listId: string }) => {
           href={UrlBuilder.shareFeed(feed.id)}
           className="flex items-center gap-2 font-semibold"
         >
-          {feed.siteUrl && <FeedIcon className="mr-0" siteUrl={feed.siteUrl} />}
+          {feed.siteUrl && <FeedIcon noMargin siteUrl={feed.siteUrl} />}
           <span className="inline-block max-w-[200px] truncate">{feed.title}</span>
         </a>
       </TableCell>