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%',
}}
>
-
{props.fallbackText}
)
@@ -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 (
-
+
)
}
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',