diff --git a/src/components/common/PremiumProgress.module.scss b/src/components/common/PremiumProgress.module.scss index da3e31b39..e7fd92e4b 100644 --- a/src/components/common/PremiumProgress.module.scss +++ b/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; diff --git a/src/components/common/PremiumProgress.tsx b/src/components/common/PremiumProgress.tsx index 9b091e2eb..c1264dee5 100644 --- a/src/components/common/PremiumProgress.tsx +++ b/src/components/common/PremiumProgress.tsx @@ -35,6 +35,7 @@ const LimitPreview: FC = ({ 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 = ({ style={buildStyle( progress !== undefined && `--progress: ${progress}`, tailPosition !== undefined && `--tail-position: ${tailPosition}`, + digitsCount !== undefined && `--digits-count: ${digitsCount}`, )} > {hasFloatingBadge && ( diff --git a/src/components/right/statistics/BoostStatistics.module.scss b/src/components/right/statistics/BoostStatistics.module.scss index 581f84d31..1a9a451ff 100644 --- a/src/components/right/statistics/BoostStatistics.module.scss +++ b/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; +} diff --git a/src/components/right/statistics/BoostStatistics.tsx b/src/components/right/statistics/BoostStatistics.tsx index 0146a833a..44867ce2a 100644 --- a/src/components/right/statistics/BoostStatistics.tsx +++ b/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" /> @@ -338,14 +345,14 @@ const BoostStatistics = ({ ) : ( )} - {lang('ShowVotes', boostersToLoadCount)} + {lang('ShowVotes', boostersToLoadCount, 'i')} )} {isGiveawayAvailable && (
- + {lang('BoostingGetBoostsViaGifts')}

{lang( diff --git a/src/global/types.ts b/src/global/types.ts index ef05a3d45..9fb77efb8 100644 --- a/src/global/types.ts +++ b/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;