From 6dd6bbe2972918f48e5d8251a443886afd99cd01 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Mon, 27 Feb 2023 11:51:46 +0800
Subject: [PATCH] Update the avatar to the latest design

---
 packages/web/components/elements/Avatar.tsx   | 22 ++++---------------
 .../components/elements/AvatarDropdown.tsx    |  7 +-----
 .../web/components/tokens/stitches.config.ts  |  8 +++----
 3 files changed, 9 insertions(+), 28 deletions(-)

diff --git a/packages/web/components/elements/Avatar.tsx b/packages/web/components/elements/Avatar.tsx
index 50c47fc12..f6fa0fffa 100644
--- a/packages/web/components/elements/Avatar.tsx
+++ b/packages/web/components/elements/Avatar.tsx
@@ -19,10 +19,6 @@ export function Avatar(props: AvatarProps): JSX.Element {
         borderRadius: '50%',
       }}
     >
-      <StyledImage
-        src={props.imageURL}
-        css={{ opacity: props.noFade ? 'unset' : '48%' }}
-      />
       <StyledFallback>{props.fallbackText}</StyledFallback>
     </StyledAvatar>
   )
@@ -35,17 +31,6 @@ const StyledAvatar = styled(Root, {
   verticalAlign: 'middle',
   overflow: 'hidden',
   userSelect: 'none',
-  border: '1px solid $grayBorder',
-})
-
-const StyledImage = styled(Image, {
-  width: '100%',
-  height: '100%',
-  objectFit: 'cover',
-
-  '&:hover': {
-    opacity: '100%',
-  },
 })
 
 const StyledFallback = styled(Fallback, {
@@ -54,8 +39,9 @@ const StyledFallback = styled(Fallback, {
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
-  fontSize: '$2',
-  fontWeight: 700,
-  backgroundColor: '$avatarBg',
+  fontSize: '15px',
+  fontWeight: 600,
+  fontFamily: 'Inter',
   color: '$avatarFont',
+  backgroundColor: '$avatarBg',
 })
diff --git a/packages/web/components/elements/AvatarDropdown.tsx b/packages/web/components/elements/AvatarDropdown.tsx
index ea43c3f3a..ec24d0a1f 100644
--- a/packages/web/components/elements/AvatarDropdown.tsx
+++ b/packages/web/components/elements/AvatarDropdown.tsx
@@ -2,18 +2,13 @@ import { Avatar } from './../elements/Avatar'
 import { HStack } from '../elements/LayoutPrimitives'
 
 type AvatarDropdownProps = {
-  profileImageURL?: string
   userInitials: string
 }
 
 export function AvatarDropdown(props: AvatarDropdownProps): JSX.Element {
   return (
     <HStack alignment="center" css={{ gap: '6px' }}>
-      <Avatar
-        imageURL={props.profileImageURL}
-        height="32px"
-        fallbackText={props.userInitials}
-      />
+      <Avatar height="32px" fallbackText={props.userInitials} />
     </HStack>
   )
 }
diff --git a/packages/web/components/tokens/stitches.config.ts b/packages/web/components/tokens/stitches.config.ts
index d3f42cbcc..f7ec2f2e4 100644
--- a/packages/web/components/tokens/stitches.config.ts
+++ b/packages/web/components/tokens/stitches.config.ts
@@ -155,8 +155,8 @@ export const { styled, css, theme, getCssText, globalCss, keyframes, config } =
         readerTableHeader: '#FFFFFF',
 
         // Avatar Fallback color
-        avatarBg: '#FFFFFF',
-        avatarFont: '#0A0806',
+        avatarBg: '#FFEA9F',
+        avatarFont: '#9C7C0A',
 
         labelButtonsBg: '#F5F5F4',
         tooltipIcons: '#FDFAEC',
@@ -217,8 +217,8 @@ const darkThemeSpec = {
     readerHeader: '#b9b9b9',
     readerTableHeader: '#FFFFFF',
     tooltipIcons: '#5F5E58',
-    avatarBg: '#000000',
-    avatarFont: 'rgba(255, 255, 255, 0.8)',
+    avatarBg: '#7B5C3E',
+    avatarFont: '#D9D9D9',
 
     textSubtle: '#AAAAAA',
     libraryBackground: '#252525',