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

Settings: Fix star icons styling on RTL languages (#4865)

Browse Source
This commit is contained in:
zubiden 2024-08-29 15:52:07 +02:00 committed by Alexander Zinchuk
parent d5d88fc59f
commit f918819810
4 changed files with 7 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/left/settings/Settings.scss
View File

@ -103,10 +103,6 @@
} }
} }
.settings-main-menu-star .StarIcon {
margin-right: 1.25rem;
}
.settings-main-menu { .settings-main-menu {
padding: 0.5rem; padding: 0.5rem;

4
src/components/left/settings/SettingsMain.tsx
View File

@ -162,7 +162,7 @@ const SettingsMain: FC<OwnProps & StateProps> = ({
<div className="settings-main-menu"> <div className="settings-main-menu">
{canBuyPremium && ( {canBuyPremium && (
<ListItem <ListItem
leftElement={<StarIcon className="icon" type="premium" size="big" />} leftElement={<StarIcon className="icon ListItem-main-icon" type="premium" size="big" />}
className="settings-main-menu-star" className="settings-main-menu-star"
// eslint-disable-next-line react/jsx-no-bind // eslint-disable-next-line react/jsx-no-bind
onClick={() => openPremiumModal()} onClick={() => openPremiumModal()}
@ -172,7 +172,7 @@ const SettingsMain: FC<OwnProps & StateProps> = ({
)} )}
{shouldDisplayStars && ( {shouldDisplayStars && (
<ListItem <ListItem
leftElement={<StarIcon className="icon" type="gold" size="big" />} leftElement={<StarIcon className="icon ListItem-main-icon" type="gold" size="big" />}
className="settings-main-menu-star" className="settings-main-menu-star"
// eslint-disable-next-line react/jsx-no-bind // eslint-disable-next-line react/jsx-no-bind
onClick={() => openStarsBalanceModal({})} onClick={() => openStarsBalanceModal({})}

4
src/components/modals/stars/StarsBalanceModal.module.scss
View File

@ -167,13 +167,15 @@
font-weight: 500; font-weight: 500;
font-size: 1.5rem; font-size: 1.5rem;
line-height: 1; line-height: 1;
white-space: nowrap;
} }
.stackedStars { .stackedStars {
display: grid; display: grid;
grid-auto-columns: 0.4375rem; grid-auto-columns: 0.4375rem;
grid-auto-flow: column; grid-auto-flow: column;
justify-items: end; justify-items: center;
margin-left: 0.375rem;
} }
.stackedStar { .stackedStar {

4
src/components/modals/stars/StarsBalanceModal.tsx
View File

@ -34,12 +34,12 @@ import StarLogo from '../../../assets/icons/StarLogo.svg';
import StarsBackground from '../../../assets/stars-bg.png'; import StarsBackground from '../../../assets/stars-bg.png';
const TRANSACTION_TYPES = ['all', 'inbound', 'outbound'] as const; const TRANSACTION_TYPES = ['all', 'inbound', 'outbound'] as const;
const TRANSACTION_TABS: TabWithProperties[] = [ const TRANSACTION_TABS: TabWithProperties[] = [
{ title: 'StarsTransactionsAll' }, { title: 'StarsTransactionsAll' },
{ title: 'StarsTransactionsIncoming' }, { title: 'StarsTransactionsIncoming' },
{ title: 'StarsTransactionsOutgoing' }, { title: 'StarsTransactionsOutgoing' },
]; ];
const MAX_STARS_COUNT = 6;
export type OwnProps = { export type OwnProps = {
modal: TabState['starsBalanceModal']; modal: TabState['starsBalanceModal'];
@ -101,7 +101,7 @@ const StarsBalanceModal = ({
} }
result.push({ result.push({
option, option,
starsCount: currentStackedStarsCount, starsCount: Math.min(currentStackedStarsCount, MAX_STARS_COUNT),
}); });
}); });