Avatar: Support font rounded (#6639)

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;

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

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

src/components/common/Avatar.tsx

@@ -328,7 +328,9 @@ const Avatar = ({
       onMouseMove={onMouseMove}
     >
       <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>
       {withStory && realPeer?.hasStories && (
         <AvatarStoryCircle

src/components/common/profile/ProfileInfo.module.scss

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

src/components/middle/message/WebPageStarGiftAuction.module.scss

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

src/components/middle/message/reactions/ReactionButton.module.scss

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

src/components/modals/gift/auction/GiftAuctionBidModal.module.scss

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

src/components/modals/gift/auction/GiftAuctionModal.module.scss

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

src/styles/index.scss

@@ -16,7 +16,8 @@ body {
   Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
   --font-family-monospace: "Cascadia Mono", "Roboto Mono", "Droid Sans Mono", 'SF Mono', "Menlo", "Ubuntu Mono",
   "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-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-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",
   sans-serif;
   --font-weight-semibold: 600;