feat: add random color for user fallback bg

Signed-off-by: Innei <[email protected]>
RSSNext · Oct 29, 2024 · dcbae89 · dcbae89
1 parent bc1f39b
commit dcbae89
Showing 1 changed file with 8 additions and 1 deletion.
diff --git a/apps/renderer/src/modules/user/UserAvatar.tsx b/apps/renderer/src/modules/user/UserAvatar.tsx
@@ -1,4 +1,5 @@
 import { Avatar, AvatarFallback, AvatarImage } from "@follow/components/ui/avatar/index.jsx"
+import { getColorScheme, stringToHue } from "@follow/utils/color"
 import { cn } from "@follow/utils/utils"
 import { forwardRef } from "react"
 
@@ -49,6 +50,7 @@ export const UserAvatar = forwardRef<
     }
 
     const renderUserData = userId ? profile.data : session?.user
+    const randomColor = stringToHue(renderUserData?.name || "")
     return (
       <div
         style={style}
@@ -75,7 +77,12 @@ export const UserAvatar = forwardRef<
             className="duration-200 animate-in fade-in-0"
             src={replaceImgUrlIfNeed(renderUserData?.image || undefined)}
           />
-          <AvatarFallback>{renderUserData?.name?.slice(0, 2)}</AvatarFallback>
+          <AvatarFallback
+            style={{ backgroundColor: getColorScheme(randomColor).light.accent }}
+            className="text-xs"
+          >
+            {renderUserData?.name?.[0]}
+          </AvatarFallback>
         </Avatar>
         {!hideName && <div>{renderUserData?.name}</div>}
       </div>