From 4d3500141adb74c4efc111fc2754bdbdd9efe8ed Mon Sep 17 00:00:00 2001
From: Zai Shi <zaishi00@outlook.com>
Date: Thu, 16 May 2024 16:37:25 +0200
Subject: [PATCH] improved styling

---
 packages/stack/src/components/user-avatar.tsx | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/packages/stack/src/components/user-avatar.tsx b/packages/stack/src/components/user-avatar.tsx
index b34d452c1..e4c961b0b 100644
--- a/packages/stack/src/components/user-avatar.tsx
+++ b/packages/stack/src/components/user-avatar.tsx
@@ -1,6 +1,16 @@
 import { RxPerson } from "react-icons/rx";
 import { Avatar, AvatarFallback, AvatarImage, Text } from "..";
 import { User } from "../lib/stack-app";
+import { SECONDARY_FONT_COLORS } from "../utils/constants";
+import styled from "styled-components";
+
+
+const StyledIcon = styled(RxPerson)`
+  color: ${SECONDARY_FONT_COLORS.light};
+  html[data-stack-theme='dark'] & {
+    color: ${SECONDARY_FONT_COLORS.dark};
+  }
+`;
 
 export default function UserAvatar(props: { size?: number, user: User | null }) {
   const user = props.user;
@@ -12,7 +22,7 @@ export default function UserAvatar(props: { size?: number, user: User | null })
           <Text style={{ fontWeight: 500 }}>
             {(user?.displayName || user?.primaryEmail)?.slice(0, 2).toUpperCase()}
           </Text> :
-          <RxPerson size={props.size} />}
+          <StyledIcon size={props.size} />}
       </AvatarFallback>
     </Avatar>
   );