diff --git a/CLAUDE.md b/CLAUDE.md index cb75d5a60..08fe02ee1 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -56,7 +56,7 @@ You are an expert in TypeScript, JavaScript, HTML, SCSS and Teact with deep expe ```scss // ✅ CORRECT font-weight: var(--font-weight-medium); - font-weight: var(--font-weight-bold); + font-weight: var(--font-weight-semibold); // ❌ WRONG font-weight: 600; diff --git a/src/assets/fonts/Nunito-ExtraBold.woff2 b/src/assets/fonts/Nunito-ExtraBold.woff2 new file mode 100644 index 000000000..8393f087d Binary files /dev/null and b/src/assets/fonts/Nunito-ExtraBold.woff2 differ diff --git a/src/assets/fonts/roboto.css b/src/assets/fonts/roboto.css index 76341ce25..903d8f5be 100644 --- a/src/assets/fonts/roboto.css +++ b/src/assets/fonts/roboto.css @@ -158,4 +158,9 @@ unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } - +@font-face { + font-family: 'Nunito'; + font-weight: 800; + font-display: swap; + src: url('Nunito-ExtraBold.woff2') format('woff2'); +} diff --git a/src/components/common/Avatar.scss b/src/components/common/Avatar.scss index 70e4f6f59..7d590ac7d 100644 --- a/src/components/common/Avatar.scss +++ b/src/components/common/Avatar.scss @@ -3,7 +3,7 @@ --color-user: var(--color-primary); --radius: 50%; --_size: 0px; - --_font-size: max(calc(var(--_size) / 2 - 2px), 0.5rem); + --_font-size: max(calc(var(--_size) / 2 - 4px), 0.5rem); user-select: none; @@ -23,11 +23,20 @@ color: white; white-space: nowrap; + &.no-photo { + font-family: var(--font-family-rounded); + } + .emoji { width: var(--_font-size); height: var(--_font-size); } + .letters { + /* stylelint-disable-next-line plugin/use-baseline */ + text-box: trim-both cap alphabetic; + } + &__icon { font-size: calc(var(--_size) / 2); } diff --git a/src/components/common/Avatar.tsx b/src/components/common/Avatar.tsx index 607c597eb..500ca2497 100644 --- a/src/components/common/Avatar.tsx +++ b/src/components/common/Avatar.tsx @@ -328,7 +328,9 @@ const Avatar = ({ onMouseMove={onMouseMove} >
- {typeof content === 'string' ? renderText(content, [isBig ? 'hq_emoji' : 'emoji']) : content} + {typeof content === 'string' + ? {renderText(content, [isBig ? 'hq_emoji' : 'emoji'])} + : content}
{withStory && realPeer?.hasStories && (