[OMN-156] - Make header avatar less distracting

packages/web/components/elements/Avatar.tsx

@@ -29,12 +29,18 @@ const StyledAvatar = styled(Root, {
   verticalAlign: 'middle',
   overflow: 'hidden',
   userSelect: 'none',
+  border: '1px solid $grayBorder',
 })
 
 const StyledImage = styled(Image, {
   width: '100%',
   height: '100%',
   objectFit: 'cover',
+  opacity: '48%',
+
+  '&:hover': {
+    opacity: '100%',
+  },
 })
 
 const StyledFallback = styled(Fallback, {
@@ -43,5 +49,8 @@ const StyledFallback = styled(Fallback, {
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
-  backgroundColor: 'dodgerblue',
+  fontSize: '$2',
+  fontWeight: 700,
+  backgroundColor: '$avatarBg',
+  color: '$avatarFont',
 })

packages/web/components/tokens/stitches.config.ts

@@ -156,6 +156,10 @@ export const { styled, css, theme, getCssText, globalCss, keyframes, config } =
         readerFontTransparent: 'rgba(61,61,61,0.65)',
         readerHeader: '3D3D3D',
         readerTableHeader: '#FFFFFF',
+
+        // Avatar Fallback color
+        avatarBg: '#FFFFFF',
+        avatarFont: '#0A0806',
       },
     },
     media: {
@@ -202,6 +206,10 @@ const darkThemeSpec = {
     readerFontTransparent: 'rgba(185,185,185,0.65)',
     readerHeader: '#b9b9b9',
     readerTableHeader: '#FFFFFF',
+
+    // Avatar Fallback color
+    avatarBg: '#000000',
+    avatarFont: 'rgba(255, 255, 255, 0.8)',
   },
 }