Management / Boosts: Fix styles and format for boost statistics (#4552)

src/components/common/PremiumProgress.module.scss

@@ -12,7 +12,9 @@
 }
 
 .badgeContainer {
-  --shift-x: calc(clamp(10%, var(--percent), 90%) - 50%);
+  --min-shift: calc(10% + var(--digits-count, 1) * 0.4ch);
+  --max-shift: calc(85% - var(--digits-count, 1) * 0.4ch);
+  --shift-x: calc(clamp(var(--min-shift), var(--percent), var(--max-shift)) - 50%);
   display: flex;
   justify-content: center;
   position: absolute;

src/components/common/PremiumProgress.tsx

@@ -35,6 +35,7 @@ const LimitPreview: FC<OwnProps> = ({
 
   const hasFloatingBadge = Boolean(floatingBadgeIcon || floatingBadgeText);
   const isProgressFull = Boolean(progress) && progress > 0.99;
+  const digitsCount = floatingBadgeText?.length;
 
   const tailPosition = progress && (progress < PROGRESS_LOCK ? 0 : progress > 1 - PROGRESS_LOCK ? 1 : 0.5);
 
@@ -48,6 +49,7 @@ const LimitPreview: FC<OwnProps> = ({
       style={buildStyle(
         progress !== undefined && `--progress: ${progress}`,
         tailPosition !== undefined && `--tail-position: ${tailPosition}`,
+        digitsCount !== undefined && `--digits-count: ${digitsCount}`,
       )}
     >
       {hasFloatingBadge && (

src/components/right/statistics/BoostStatistics.module.scss

@@ -34,6 +34,7 @@
 
 .down {
   font-size: 1.5rem;
+  margin-right: 0.5rem;
 }
 
 .loadMoreSpinner {
@@ -106,3 +107,7 @@
   display: flex;
   flex-direction: column-reverse;
 }
+
+.giveawayButton {
+  margin-bottom: 0.5rem;
+}

src/components/right/statistics/BoostStatistics.tsx

@@ -18,6 +18,7 @@ import {
 import buildClassName from '../../../util/buildClassName';
 import { formatDateAtTime } from '../../../util/date/dateFormat';
 import { CUSTOM_PEER_TO_BE_DISTRIBUTED } from '../../../util/objects/customPeer';
+import { formatInteger } from '../../../util/textFormat';
 import { getBoostProgressInfo } from '../../common/helpers/boostInfo';
 
 import useLang from '../../../hooks/useLang';
@@ -111,12 +112,18 @@ const BoostStatistics = ({
   const tabs = useMemo(() => {
     if (shouldDisplayGiftList) {
       return [
-        { type: 'boostList', title: lang('BoostingBoostsCount', boostStatistics?.boosts?.count) },
-        { type: 'giftedBoostList', title: lang('BoostingGiftsCount', boostStatistics?.giftedBoosts?.count) },
+        {
+          type: 'boostList',
+          title: lang('BoostingBoostsCount', boostStatistics?.boosts?.count, 'i'),
+        },
+        {
+          type: 'giftedBoostList',
+          title: lang('BoostingGiftsCount', boostStatistics?.giftedBoosts?.count, 'i'),
+        },
       ];
     }
     return [];
-  }, [shouldDisplayGiftList, boostStatistics?.boosts?.count, boostStatistics?.giftedBoosts?.count, lang]);
+  }, [shouldDisplayGiftList, lang, boostStatistics?.boosts?.count, boostStatistics?.giftedBoosts?.count]);
 
   const initialTab = useMemo(() => {
     return boostStatistics?.boosts && boostStatistics.boosts?.list.length > 0 ? 1 : 0;
@@ -252,7 +259,7 @@ const BoostStatistics = ({
               leftText={lang('BoostsLevel', currentLevel!)}
               rightText={hasNextLevel ? lang('BoostsLevel', currentLevel! + 1) : undefined}
               progress={levelProgress}
-              floatingBadgeText={boosts.toString()}
+              floatingBadgeText={formatInteger(boosts)}
               floatingBadgeIcon="boost"
             />
             <StatisticsOverview className={styles.stats} statistics={statsOverview} type="boost" />
@@ -338,14 +345,14 @@ const BoostStatistics = ({
                 ) : (
                   <Icon name="down" className={styles.down} />
                 )}
-                {lang('ShowVotes', boostersToLoadCount)}
+                {lang('ShowVotes', boostersToLoadCount, 'i')}
               </ListItem>
             )}
           </div>
           <LinkField className={styles.section} link={status!.boostUrl} withShare title={lang('LinkForBoosting')} />
           {isGiveawayAvailable && (
             <div className={styles.section}>
-              <ListItem icon="gift" ripple onClick={handleGiveawayClick}>
+              <ListItem icon="gift" ripple onClick={handleGiveawayClick} className={styles.giveawayButton}>
                 {lang('BoostingGetBoostsViaGifts')}
               </ListItem>
               <p className="text-muted hint" key="links-hint">{lang(

src/global/types.ts

@@ -3033,8 +3033,8 @@ export interface ActionPayloads {
     forMultipleUsers?: boolean;
     forUserIds?: string[];
   } & WithTabId) | undefined;
-
   closeGiftPremiumModal: WithTabId | undefined;
+
   setEmojiStatus: {
     emojiStatus: ApiSticker;
     expires?: number;