ztr/TelegramPWA
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Avatar: Support font rounded (#6639)

Browse Source
This commit is contained in:
Alexander Zinchuk 2026-02-22 23:42:45 +01:00
parent f2b446cf10
commit 54ae785803
11 changed files with 28 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
CLAUDE.md
View File

@ -56,7 +56,7 @@ You are an expert in TypeScript, JavaScript, HTML, SCSS and Teact with deep expe
```scss ```scss
// ✅ CORRECT // ✅ CORRECT
font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium);
font-weight: var(--font-weight-bold); font-weight: var(--font-weight-semibold);
// ❌ WRONG // ❌ WRONG
font-weight: 600; font-weight: 600;

BIN
src/assets/fonts/Nunito-ExtraBold.woff2 Normal file
View File

Binary file not shown.

7
src/assets/fonts/roboto.css
View File

@ -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; 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');
}

11
src/components/common/Avatar.scss
View File

@ -3,7 +3,7 @@
--color-user: var(--color-primary); --color-user: var(--color-primary);
--radius: 50%; --radius: 50%;
--_size: 0px; --_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; user-select: none;
@ -23,11 +23,20 @@
color: white; color: white;
white-space: nowrap; white-space: nowrap;
&.no-photo {
font-family: var(--font-family-rounded);
}
.emoji { .emoji {
width: var(--_font-size); width: var(--_font-size);
height: var(--_font-size); height: var(--_font-size);
} }
.letters {
/* stylelint-disable-next-line plugin/use-baseline */
text-box: trim-both cap alphabetic;
}
&__icon { &__icon {
font-size: calc(var(--_size) / 2); font-size: calc(var(--_size) / 2);
} }

4
src/components/common/Avatar.tsx
View File

@ -328,7 +328,9 @@ const Avatar = ({
onMouseMove={onMouseMove} onMouseMove={onMouseMove}
> >
<div className="inner"> <div className="inner">
{typeof content === 'string' ? renderText(content, [isBig ? 'hq_emoji' : 'emoji']) : content} {typeof content === 'string'
? <span className="letters">{renderText(content, [isBig ? 'hq_emoji' : 'emoji'])}</span>
: content}
</div> </div>
{withStory && realPeer?.hasStories && ( {withStory && realPeer?.hasStories && (
<AvatarStoryCircle <AvatarStoryCircle

2
src/components/common/profile/ProfileInfo.module.scss
View File

@ -317,7 +317,7 @@
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
font-size: 0.625rem; font-size: 0.625rem;
font-weight: var(--font-weight-bold); font-weight: var(--font-weight-semibold);
line-height: 1; line-height: 1;
color: var(--rating-text-color); color: var(--rating-text-color);
} }

2
src/components/middle/message/WebPageStarGiftAuction.module.scss
View File

@ -37,7 +37,7 @@
z-index: 1; z-index: 1;
font-size: 0.9375rem; font-size: 0.9375rem;
font-weight: var(--font-weight-bold); font-weight: var(--font-weight-semibold);
line-height: 1.25rem; line-height: 1.25rem;
} }

2
src/components/middle/message/reactions/ReactionButton.module.scss
View File

@ -149,7 +149,7 @@
right: 50%; right: 50%;
transform: translateX(50%); transform: translateX(50%);
font-family: var(--font-family-rounded); font-family: var(--font-family-numbers-rounded);
font-size: 2.5rem; font-size: 2.5rem;
font-variant-numeric: tabular-nums; font-variant-numeric: tabular-nums;
color: #FFBC2E; color: #FFBC2E;

2
src/components/modals/gift/auction/GiftAuctionBidModal.module.scss
View File

@ -61,7 +61,7 @@
justify-content: center; justify-content: center;
font-size: 1.125rem; font-size: 1.125rem;
font-weight: var(--font-weight-bold); font-weight: var(--font-weight-semibold);
} }
.infoCardLabel { .infoCardLabel {

2
src/components/modals/gift/auction/GiftAuctionModal.module.scss
View File

@ -43,7 +43,7 @@
} }
.giftName { .giftName {
font-weight: var(--font-weight-bold); font-weight: var(--font-weight-semibold);
white-space: nowrap; white-space: nowrap;
} }

4
src/styles/index.scss
View File

@ -16,7 +16,8 @@ body {
Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
--font-family-monospace: "Cascadia Mono", "Roboto Mono", "Droid Sans Mono", 'SF Mono', "Menlo", "Ubuntu Mono", --font-family-monospace: "Cascadia Mono", "Roboto Mono", "Droid Sans Mono", 'SF Mono', "Menlo", "Ubuntu Mono",
"Consolas", monospace; "Consolas", monospace;
--font-family-rounded: -ui-rounded, "Numbers Rounded", "Roboto", "Helvetica Neue", sans-serif; --font-family-numbers-rounded: ui-rounded, "Numbers Rounded", "Roboto", "Helvetica Neue", sans-serif;
--font-family-rounded: "Nunito", "Roboto", "Helvetica Neue", sans-serif;
--font-family-condensed: "Roboto Condensed", "Roboto", "Helvetica Neue", sans-serif; --font-family-condensed: "Roboto Condensed", "Roboto", "Helvetica Neue", sans-serif;
--font-weight-semibold: 500; // Note: Roboto is naturally quite bold, so 500 works well as default --font-weight-semibold: 500; // Note: Roboto is naturally quite bold, so 500 works well as default
@ -69,6 +70,7 @@ html.theme-dark {
body.is-ios, body.is-ios,
body.is-macos { body.is-macos {
--font-family-rounded: ui-rounded, "Nunito", "Roboto", "Helvetica Neue", sans-serif;
--font-family: system-ui, -apple-system, BlinkMacSystemFont, "Roboto", "Apple Color Emoji", "Helvetica Neue", --font-family: system-ui, -apple-system, BlinkMacSystemFont, "Roboto", "Apple Color Emoji", "Helvetica Neue",
sans-serif; sans-serif;
--font-weight-semibold: 600; --font-weight-semibold: 600;