diff --git a/src/assets/fonts/roboto.css b/src/assets/fonts/roboto.css index 1eda1a2b7..76341ce25 100644 --- a/src/assets/fonts/roboto.css +++ b/src/assets/fonts/roboto.css @@ -158,3 +158,4 @@ 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; } + diff --git a/src/components/common/Avatar.scss b/src/components/common/Avatar.scss index 1846cb28e..5c33a5231 100644 --- a/src/components/common/Avatar.scss +++ b/src/components/common/Avatar.scss @@ -28,7 +28,7 @@ z-index: 1; align-items: center; justify-content: center; - background-image: linear-gradient(var(--color-white) -125%, var(--color-user)); + background-image: linear-gradient(var(--color-white) -300%, var(--color-user)); } &__media { diff --git a/src/components/common/CustomEmojiSetsModal.module.scss b/src/components/common/CustomEmojiSetsModal.module.scss index f8a7945ce..1eaa9280c 100644 --- a/src/components/common/CustomEmojiSetsModal.module.scss +++ b/src/components/common/CustomEmojiSetsModal.module.scss @@ -21,7 +21,7 @@ padding: 0; } - .multiline-menu-item { + .multiline-item { flex-grow: 1; } diff --git a/src/components/common/LinkField.module.scss b/src/components/common/LinkField.module.scss index 03c816b69..18593020b 100644 --- a/src/components/common/LinkField.module.scss +++ b/src/components/common/LinkField.module.scss @@ -20,4 +20,5 @@ .title { font-weight: 500; color: var(--color-text-secondary); + padding-left: 1rem; } diff --git a/src/components/common/ProfileInfo.module.scss b/src/components/common/ProfileInfo.module.scss index d2e224a87..858e8e467 100644 --- a/src/components/common/ProfileInfo.module.scss +++ b/src/components/common/ProfileInfo.module.scss @@ -1,20 +1,3 @@ -.self { - margin: 0 -0.5rem 0.75rem; - overflow: hidden; - - &:global(.ghost) { - margin: 0; - } - - .info { - padding-bottom: 0.75rem; - } - - .status { - line-height: 1rem; - } -} - .fallbackPhoto { position: absolute; z-index: 1; diff --git a/src/components/common/ProfileInfo.tsx b/src/components/common/ProfileInfo.tsx index df4065e26..ad7c6e12c 100644 --- a/src/components/common/ProfileInfo.tsx +++ b/src/components/common/ProfileInfo.tsx @@ -291,7 +291,7 @@ const ProfileInfo: FC = ({ return (
diff --git a/src/components/common/StickerSetCard.scss b/src/components/common/StickerSetCard.scss index e252d97ad..495f526d7 100644 --- a/src/components/common/StickerSetCard.scss +++ b/src/components/common/StickerSetCard.scss @@ -17,7 +17,7 @@ max-height: 100%; } - .multiline-menu-item { + .multiline-item { display: flex; flex-direction: column; justify-content: center; diff --git a/src/components/common/StickerSetCard.tsx b/src/components/common/StickerSetCard.tsx index b77f35253..8e27894ab 100644 --- a/src/components/common/StickerSetCard.tsx +++ b/src/components/common/StickerSetCard.tsx @@ -85,7 +85,7 @@ const StickerSetCard: FC = ({ onClick={handleCardClick} > {renderPreview()} -
+
{stickerSet.title}
{lang('StickerPack.StickerCount', stickerSet.count, 'i')}
diff --git a/src/components/common/WebLink.scss b/src/components/common/WebLink.scss index 1cf27a380..5835537a9 100644 --- a/src/components/common/WebLink.scss +++ b/src/components/common/WebLink.scss @@ -56,7 +56,7 @@ .site-title { font-size: 1rem; - font-weight: 400; + font-weight: var(--font-weight-medium); margin-bottom: 0.0625rem; line-height: 1.3125rem; } diff --git a/src/components/common/gift/GiftRibbon.module.scss b/src/components/common/gift/GiftRibbon.module.scss index 65cc48d1c..ad3a5cfd2 100644 --- a/src/components/common/gift/GiftRibbon.module.scss +++ b/src/components/common/gift/GiftRibbon.module.scss @@ -12,7 +12,8 @@ left: 50%; transform: translate(-50%, -50%) translate(6px, -6px) rotate(45deg); - font-size: 0.625rem; + font-size: 0.6875rem; + font-weight: var(--font-weight-semibold); color: var(--color-white); white-space: nowrap; } diff --git a/src/components/common/helpers/renderActionMessageText.tsx b/src/components/common/helpers/renderActionMessageText.tsx index a3691574c..dfa290bcd 100644 --- a/src/components/common/helpers/renderActionMessageText.tsx +++ b/src/components/common/helpers/renderActionMessageText.tsx @@ -7,7 +7,7 @@ import type { ObserveFn } from '../../../hooks/useIntersectionObserver'; import type { OldLangFn } from '../../../hooks/useOldLang'; import type { TextPart } from '../../../types'; -import { SERVICE_NOTIFICATIONS_USER_ID } from '../../../config'; +import { SERVICE_NOTIFICATIONS_USER_ID, STARS_CURRENCY_CODE } from '../../../config'; import { getChatTitle, getExpiredMessageDescription, @@ -168,12 +168,19 @@ export function renderActionMessageText( } if (unprocessed.includes('%gift_payment_amount%')) { - const price = formatCurrencyAsString(amount!, currency!, oldLang.code); - let priceText = price; + let priceText; - if (giftCryptoInfo) { - const cryptoPrice = formatCurrencyAsString(giftCryptoInfo.amount, giftCryptoInfo.currency, oldLang.code); - priceText = `${cryptoPrice} (${price})`; + if (currency && currency === STARS_CURRENCY_CODE) { + priceText = oldLang('ActionGiftStarsTitle', amount!); + } else { + const price = formatCurrencyAsString(amount!, currency!, oldLang.code); + + if (giftCryptoInfo) { + const cryptoPrice = formatCurrencyAsString(giftCryptoInfo.amount, giftCryptoInfo.currency, oldLang.code); + priceText = `${cryptoPrice} (${price})`; + } else { + priceText = price; + } } processed = processPlaceholder( diff --git a/src/components/common/icons/StarIcon.tsx b/src/components/common/icons/StarIcon.tsx index 756b1f7f7..b9ef1090e 100644 --- a/src/components/common/icons/StarIcon.tsx +++ b/src/components/common/icons/StarIcon.tsx @@ -29,6 +29,17 @@ const StarIcon: FC = ({ const randomId = useUniqueId(); const validSvgRandomId = `svg-${randomId}`; // ID must start with a letter + const renderIcon = () => { + switch (type) { + case 'gold': + return ; + case 'premium': + return ; + default: + return ; + } + }; + return ( = ({ )} style={style} > - {type === 'gold' - ? - : type === 'premium' - ? - : } + {renderIcon()} ); }; diff --git a/src/components/common/pickers/PickerItem.module.scss b/src/components/common/pickers/PickerItem.module.scss index 655d61112..869760ac9 100644 --- a/src/components/common/pickers/PickerItem.module.scss +++ b/src/components/common/pickers/PickerItem.module.scss @@ -57,6 +57,7 @@ } .subtitle { + padding-bottom: 0.3125rem; font-size: 0.875rem; color: var(--color-text-secondary); grid-row: 2; @@ -87,7 +88,7 @@ .startInput { grid-row: 1 / 3; grid-column: 1; - margin-inline-end: 1.25rem; + margin-inline-end: 1.1875rem; } .endInput { diff --git a/src/components/left/LeftColumn.scss b/src/components/left/LeftColumn.scss index 53078c0ac..4a3a513b7 100644 --- a/src/components/left/LeftColumn.scss +++ b/src/components/left/LeftColumn.scss @@ -23,7 +23,7 @@ } .SearchInput { - margin-left: 0.8125rem; + margin-left: 0.625rem; max-width: calc(100% - 3.25rem); @media (max-width: 600px) { diff --git a/src/components/left/main/Archive.module.scss b/src/components/left/main/Archive.module.scss index 5b2c60fe0..2343632a5 100644 --- a/src/components/left/main/Archive.module.scss +++ b/src/components/left/main/Archive.module.scss @@ -1,5 +1,9 @@ .root { --background-color: var(--color-background); + + :global(.ListItem-button) { + min-height: auto; + } } .minimized { diff --git a/src/components/left/search/LeftSearch.scss b/src/components/left/search/LeftSearch.scss index 9041e2476..1b0e6c8e3 100644 --- a/src/components/left/search/LeftSearch.scss +++ b/src/components/left/search/LeftSearch.scss @@ -41,11 +41,11 @@ .section-heading { position: relative; padding-top: 0.625rem; - padding-left: 1.75rem; - margin: 0 0 1rem -1.25rem !important; + padding-left: 0.5rem; + margin-bottom: 1rem; font-weight: 500; - font-size: 0.9375rem; + font-size: 1rem; color: var(--color-text-secondary); &-first { @@ -73,10 +73,6 @@ .LeftSearch .search-section .section-heading, .RecentContacts .search-section .section-heading { - margin-left: -0.5rem !important; - padding-left: 1.125rem; - width: calc(100% + 0.625rem); - &::before { display: none; } @@ -86,10 +82,6 @@ } } - .RecentContacts .search-section { - padding-inline: 0.5rem; - } - .WebLink { display: flex; } @@ -194,21 +186,18 @@ } .search-section { - padding-inline: 0.5rem; + padding: 0.5rem; @include mixins.adapt-padding-to-scrollbar(0.5rem); .section-heading { - color: var(--color-text-secondary); - font-size: 0.9375rem; - font-weight: 500; margin-bottom: 0.625rem !important; .Link { float: right; color: var(--color-links); font-weight: 500; - margin-right: 1.5rem; + margin-right: 0.5rem; transition: opacity 0.15s ease-in; &:active, diff --git a/src/components/left/settings/Settings.scss b/src/components/left/settings/Settings.scss index a20317bfe..8c7882746 100644 --- a/src/components/left/settings/Settings.scss +++ b/src/components/left/settings/Settings.scss @@ -12,6 +12,10 @@ .left-header { padding-right: 0.8125rem; } + + .self-profile .ProfileInfo { + margin: -0.5rem 0 0.75rem -0.5rem; + } } .settings-main-header { @@ -105,24 +109,14 @@ .settings-main-menu { padding: 0.5rem; + @include mixins.adapt-padding-to-scrollbar(0.5rem); @include mixins.side-panel-section; - > .ChatExtra { - padding: 0 0.5rem 0.3125rem; - margin: 0 -0.5rem 0.625rem; - - @include mixins.side-panel-section; - - .ListItem.narrow { - margin-bottom: 0.25rem; - } - } - .ListItem.narrow:not(.multiline) { margin-bottom: 0; .ListItem-button { - padding: 1rem; + min-height: 3.5rem; } } } @@ -145,8 +139,8 @@ &-header { font-size: 1rem; + font-weight: var(--font-weight-semibold); color: var(--color-text-secondary); - margin-bottom: 1.25rem; padding-inline-start: 1rem; position: relative; } @@ -201,13 +195,9 @@ margin-bottom: 0; } - .multiline-menu-item { - white-space: initial; - flex-grow: 1; - - &.full-size { - width: 100%; - overflow: hidden; + .multiline-item { + .subtitle.tight { + line-height: 1rem; } .date { @@ -216,35 +206,6 @@ margin-left: 1rem; color: var(--color-text-secondary); } - - .title, - .subtitle { - display: block; - text-align: left; - } - - .title { - line-height: 1.25rem; - } - - .subtitle { - font-size: 0.875rem; - line-height: 1.5rem; - color: var(--color-text-secondary); - - & + .subtitle { - margin-top: -0.25rem; - } - - &.black { - color: var(--color-text); - } - - &.tight { - line-height: 1.3125rem; - margin-bottom: 0.1875rem; - } - } } &.destructive { @@ -291,17 +252,10 @@ } &[dir="rtl"] { - .multiline-menu-item { - .title, - .subtitle { - text-align: right; - } - - .date { - float: left; - margin-left: 0; - margin-right: 1rem; - } + .multiline-item .date { + float: left; + margin-left: 0; + margin-right: 1rem; } } } @@ -321,13 +275,8 @@ } } - .Radio + .Radio, - .Checkbox + .Checkbox { - margin-top: 2rem; - } - > .Checkbox, > .Radio { - padding-inline-start: 4.25rem; + padding-inline-start: 4.1875rem; } &__current-value { @@ -342,8 +291,8 @@ padding-block: 0; } -.settings-picker-title { - margin-inline-start: var(--picker-title-shift); +.settings-input { + padding: 0.5rem 1rem 0 1rem; } .settings-fab-wrapper { @@ -366,7 +315,7 @@ } .settings-edit-profile { - padding: 0 1.5rem; + padding: 0 1.5rem !important; } .settings-quick-reaction { @@ -384,6 +333,7 @@ .settings-dropdown-section { .DropdownList { position: relative; + padding: 0 0 0 3rem; &--open { transform: translate(0, 0); @@ -412,3 +362,7 @@ .block-user-button { z-index: var(--z-chat-float-button); } + +.settings-button { + font-weight: var(--font-weight-semibold); +} diff --git a/src/components/left/settings/SettingsActiveSessions.tsx b/src/components/left/settings/SettingsActiveSessions.tsx index 37ad25543..e34ce5e8e 100644 --- a/src/components/left/settings/SettingsActiveSessions.tsx +++ b/src/components/left/settings/SettingsActiveSessions.tsx @@ -150,7 +150,7 @@ const SettingsActiveSessions: FC = ({ -
+
{session.deviceModel} {session.appName} {session.appVersion}, {session.platform} {session.systemVersion} @@ -224,7 +224,7 @@ const SettingsActiveSessions: FC = ({ iconClassName="icon-device" onClick={() => { handleOpenSessionModal(session.hash); }} > -
+
{formatPastTimeShort(lang, session.dateActive * 1000)} {session.deviceModel} diff --git a/src/components/left/settings/SettingsActiveWebsites.tsx b/src/components/left/settings/SettingsActiveWebsites.tsx index f4e7ec90c..a246cd5de 100644 --- a/src/components/left/settings/SettingsActiveWebsites.tsx +++ b/src/components/left/settings/SettingsActiveWebsites.tsx @@ -111,7 +111,7 @@ const SettingsActiveWebsites: FC = ({ onClick={() => handleOpenSessionModal(session.hash)} > -
+
{formatPastTimeShort(lang, session.dateActive * 1000)} {bot && } diff --git a/src/components/left/settings/SettingsEditProfile.tsx b/src/components/left/settings/SettingsEditProfile.tsx index b5c09bd82..398532e01 100644 --- a/src/components/left/settings/SettingsEditProfile.tsx +++ b/src/components/left/settings/SettingsEditProfile.tsx @@ -247,13 +247,15 @@ const SettingsEditProfile: FC = ({

{lang('Username')}

- +
+ +
{editUsernameError === USERNAME_PURCHASE_ERROR && renderPurchaseLink()}

diff --git a/src/components/left/settings/SettingsLanguage.tsx b/src/components/left/settings/SettingsLanguage.tsx index afa21ad03..a6edc8542 100644 --- a/src/components/left/settings/SettingsLanguage.tsx +++ b/src/components/left/settings/SettingsLanguage.tsx @@ -159,7 +159,7 @@ const SettingsLanguage: FC = ({

)}
-

+

{lang('Localization.InterfaceLanguage')}

{options ? ( diff --git a/src/components/left/settings/SettingsMain.tsx b/src/components/left/settings/SettingsMain.tsx index f6c876782..e9c67f570 100644 --- a/src/components/left/settings/SettingsMain.tsx +++ b/src/components/left/settings/SettingsMain.tsx @@ -82,7 +82,7 @@ const SettingsMain: FC = ({ return (
-
+
{currentUserId && ( = ({ isInSettings /> )} +
+
= ({ hasPasscode ? SettingsScreens.PasscodeEnabled : SettingsScreens.PasscodeDisabled, )} > -
+
{oldLang('Passcode')} {oldLang(hasPasscode ? 'PasswordOn' : 'PasswordOff')} @@ -180,7 +180,7 @@ const SettingsPrivacy: FC = ({ hasPassword ? SettingsScreens.TwoFaEnabled : SettingsScreens.TwoFaDisabled, )} > -
+
{oldLang('TwoStepVerification')} {oldLang(hasPassword ? 'PasswordOn' : 'PasswordOff')} @@ -209,7 +209,7 @@ const SettingsPrivacy: FC = ({ // eslint-disable-next-line react/jsx-no-bind onClick={() => onScreenSelect(SettingsScreens.PrivacyPhoneNumber)} > -
+
{oldLang('PrivacyPhoneTitle')} {getVisibilityValue(privacy.phoneNumber)} @@ -222,7 +222,7 @@ const SettingsPrivacy: FC = ({ // eslint-disable-next-line react/jsx-no-bind onClick={() => onScreenSelect(SettingsScreens.PrivacyLastSeen)} > -
+
{oldLang('LastSeenTitle')} {getVisibilityValue(privacy.lastSeen)} @@ -235,7 +235,7 @@ const SettingsPrivacy: FC = ({ // eslint-disable-next-line react/jsx-no-bind onClick={() => onScreenSelect(SettingsScreens.PrivacyProfilePhoto)} > -
+
{oldLang('PrivacyProfilePhotoTitle')} {getVisibilityValue(privacy.profilePhoto)} @@ -248,7 +248,7 @@ const SettingsPrivacy: FC = ({ // eslint-disable-next-line react/jsx-no-bind onClick={() => onScreenSelect(SettingsScreens.PrivacyBio)} > -
+
{oldLang('PrivacyBio')} {getVisibilityValue(privacy.bio)} @@ -261,7 +261,7 @@ const SettingsPrivacy: FC = ({ // eslint-disable-next-line react/jsx-no-bind onClick={() => onScreenSelect(SettingsScreens.PrivacyBirthday)} > -
+
{oldLang('PrivacyBirthday')} {getVisibilityValue(privacy.birthday)} @@ -274,7 +274,7 @@ const SettingsPrivacy: FC = ({ // eslint-disable-next-line react/jsx-no-bind onClick={() => onScreenSelect(SettingsScreens.PrivacyGifts)} > -
+
{lang('PrivacyGifts')} {getVisibilityValue(privacy.gifts)} @@ -287,7 +287,7 @@ const SettingsPrivacy: FC = ({ // eslint-disable-next-line react/jsx-no-bind onClick={() => onScreenSelect(SettingsScreens.PrivacyForwarding)} > -
+
{oldLang('PrivacyForwardsTitle')} {getVisibilityValue(privacy.forwards)} @@ -300,7 +300,7 @@ const SettingsPrivacy: FC = ({ // eslint-disable-next-line react/jsx-no-bind onClick={() => onScreenSelect(SettingsScreens.PrivacyPhoneCall)} > -
+
{oldLang('WhoCanCallMe')} {getVisibilityValue(privacy.phoneCall)} @@ -315,7 +315,7 @@ const SettingsPrivacy: FC = ({ // eslint-disable-next-line react/jsx-no-bind onClick={() => onScreenSelect(SettingsScreens.PrivacyVoiceMessages)} > -
+
{oldLang('PrivacyVoiceMessagesTitle')} {getVisibilityValue(privacy.voiceMessages)} @@ -329,7 +329,7 @@ const SettingsPrivacy: FC = ({ // eslint-disable-next-line react/jsx-no-bind onClick={() => onScreenSelect(SettingsScreens.PrivacyMessages)} > -
+
{oldLang('PrivacyMessagesTitle')} {shouldNewNonContactPeersRequirePremium @@ -344,7 +344,7 @@ const SettingsPrivacy: FC = ({ // eslint-disable-next-line react/jsx-no-bind onClick={() => onScreenSelect(SettingsScreens.PrivacyGroupChats)} > -
+
{oldLang('WhoCanAddMe')} {getVisibilityValue(privacy.chatInvite)} diff --git a/src/components/left/settings/SettingsPrivacyVisibility.tsx b/src/components/left/settings/SettingsPrivacyVisibility.tsx index fe5082a3b..b3946e1c9 100644 --- a/src/components/left/settings/SettingsPrivacyVisibility.tsx +++ b/src/components/left/settings/SettingsPrivacyVisibility.tsx @@ -327,7 +327,7 @@ function PrivacySubsection({ onScreenSelect(allowedContactsScreen); }} > -
+
{oldLang('AlwaysAllow')} {allowedString}
@@ -342,7 +342,7 @@ function PrivacySubsection({ onScreenSelect(deniedContactsScreen); }} > -
+
{oldLang('NeverAllow')} {blockString}
diff --git a/src/components/left/settings/folders/SettingsFolders.scss b/src/components/left/settings/folders/SettingsFolders.scss index aa84357ad..fc1af2d06 100644 --- a/src/components/left/settings/folders/SettingsFolders.scss +++ b/src/components/left/settings/folders/SettingsFolders.scss @@ -99,6 +99,14 @@ padding-inline-end: 3rem; } +.settings-sortable-item .Button { + margin-right: -1rem; + &:hover, + &:active { + background-color: transparent !important; + } +} + .picker-category-title { padding-top: 0.75rem; } diff --git a/src/components/left/settings/folders/SettingsFoldersMain.tsx b/src/components/left/settings/folders/SettingsFoldersMain.tsx index 3d4af530e..ecb4f71c3 100644 --- a/src/components/left/settings/folders/SettingsFoldersMain.tsx +++ b/src/components/left/settings/folders/SettingsFoldersMain.tsx @@ -22,6 +22,7 @@ import useOldLang from '../../../../hooks/useOldLang'; import usePreviousDeprecated from '../../../../hooks/usePreviousDeprecated'; import AnimatedIcon from '../../../common/AnimatedIcon'; +import Icon from '../../../common/icons/Icon'; import Button from '../../../ui/Button'; import Draggable from '../../../ui/Draggable'; import ListItem from '../../../ui/ListItem'; @@ -206,7 +207,7 @@ const SettingsFoldersMain: FC = ({ {canCreateNewFolder && ( )} diff --git a/src/components/middle/DeleteSelectedMessageModal.module.scss b/src/components/middle/DeleteSelectedMessageModal.module.scss index 2f601fd69..11650a335 100644 --- a/src/components/middle/DeleteSelectedMessageModal.module.scss +++ b/src/components/middle/DeleteSelectedMessageModal.module.scss @@ -44,7 +44,7 @@ } .dropdownList { - padding-left: 3.1875rem; + padding-left: 2.6875rem; margin-block: -0.375rem; } diff --git a/src/components/middle/MessageList.scss b/src/components/middle/MessageList.scss index 0fb092d04..455dd44b5 100644 --- a/src/components/middle/MessageList.scss +++ b/src/components/middle/MessageList.scss @@ -240,9 +240,9 @@ background: var(--pattern-color); color: white; font-size: calc(var(--message-text-size, 1rem) - 0.0625rem); - font-weight: 500; - line-height: 1.75; - padding: 0 0.5rem; + font-weight: var(--font-weight-medium); + line-height: 1rem; + padding: 0.1875rem 0.5rem; border-radius: var(--border-radius-messages); word-break: break-word; position: relative; @@ -250,8 +250,8 @@ body.is-ios &, body.is-macos & { - font-size: calc(var(--message-text-size, 1rem) - 0.125rem); - line-height: calc(var(--message-text-size, 1rem) + 0.2rem); + font-size: calc(var(--message-text-size, 1rem) - 0.0625rem); + line-height: calc(var(--message-text-size, 1rem) + 0.09375rem); } .emoji-small { @@ -283,6 +283,7 @@ margin-top: 0.5rem; cursor: var(--custom-cursor, pointer); outline: none; + font-weight: var(--font-weight-semibold); } .action-message-gift-code { @@ -300,8 +301,8 @@ .action-message-user-caption { align-items: center; - font-size: 0.875rem; - font-weight: 500; + font-size: 0.9375rem; + font-weight: var(--font-weight-semibold); } .action-message-user-avatar { @@ -317,7 +318,7 @@ .action-message-gift-subtitle { font-weight: normal; text-wrap: balance; - font-size: 0.75rem; + font-size: 0.8125rem; } .action-message-suggested-avatar { @@ -341,10 +342,11 @@ .action-message-button { position: relative; display: inline-block; - border-radius: var(--border-radius-default); - padding: 0.5rem 0.75rem; - margin-top: 0.5rem; + border-radius: var(--border-radius-modal); + padding: 0.5rem 1.5rem; + margin-top: 0.6875rem; background-color: var(--pattern-color); + font-weight: var(--font-weight-semibold); } .sticky-date { diff --git a/src/components/middle/message/Poll.scss b/src/components/middle/message/Poll.scss index 2a53d21c2..c07e3591a 100644 --- a/src/components/middle/message/Poll.scss +++ b/src/components/middle/message/Poll.scss @@ -39,7 +39,6 @@ .Checkbox, .Radio { padding-left: 2.25rem; - margin-bottom: 1.5rem; &:last-child { margin-bottom: 0.75rem; @@ -54,6 +53,10 @@ cursor: var(--custom-cursor, not-allowed); } + &:hover { + background: none; + } + .Checkbox-main, .Radio-main { &::before { diff --git a/src/components/middle/message/WebPage.scss b/src/components/middle/message/WebPage.scss index d9cdcb956..d5960eb2c 100644 --- a/src/components/middle/message/WebPage.scss +++ b/src/components/middle/message/WebPage.scss @@ -3,7 +3,7 @@ margin-top: 0.25rem; margin-bottom: 0.125rem; padding-block: 0.1875rem; - font-size: calc(var(--message-text-size, 1rem) - 0.125rem); + font-size: calc(var(--message-text-size, 1rem) - 0.0625rem); line-height: 1.125rem; max-width: 29rem; background-color: var(--accent-background-color); @@ -168,12 +168,12 @@ .site-name { color: var(--accent-color); - font-weight: 500; + font-weight: var(--font-weight-semibold); margin-bottom: 0.125rem; } .site-title { - font-weight: 500; + font-weight: var(--font-weight-semibold); margin-bottom: 0.125rem; } diff --git a/src/components/middle/message/_message-content.scss b/src/components/middle/message/_message-content.scss index eaa3f265b..913c231b4 100644 --- a/src/components/middle/message/_message-content.scss +++ b/src/components/middle/message/_message-content.scss @@ -302,7 +302,7 @@ overflow: hidden; text-overflow: ellipsis; font-size: calc(var(--message-text-size, 1rem) - 0.125rem); - font-weight: 500; + font-weight: var(--font-weight-medium); line-height: 1.25rem; color: var(--accent-color); unicode-bidi: plaintext; diff --git a/src/components/middle/message/reactions/ReactionButton.module.scss b/src/components/middle/message/reactions/ReactionButton.module.scss index 273849506..c8d9072f6 100644 --- a/src/components/middle/message/reactions/ReactionButton.module.scss +++ b/src/components/middle/message/reactions/ReactionButton.module.scss @@ -122,6 +122,7 @@ .counter { margin-inline-end: 0.125rem; + font-weight: var(--font-weight-semibold); } .disabled { diff --git a/src/components/middle/message/reactions/Reactions.scss b/src/components/middle/message/reactions/Reactions.scss index d87a2532b..ee2175e28 100644 --- a/src/components/middle/message/reactions/Reactions.scss +++ b/src/components/middle/message/reactions/Reactions.scss @@ -4,7 +4,8 @@ width: 100%; flex-wrap: wrap; gap: 0.375rem; - margin-top: 0.375rem; + margin-top: 0.25rem; + margin-bottom: 0.1875rem; overflow: visible; max-width: calc(var(--max-width) + 2.25rem); diff --git a/src/components/modals/gift/GiftComposer.module.scss b/src/components/modals/gift/GiftComposer.module.scss index 758650549..feca9a91a 100644 --- a/src/components/modals/gift/GiftComposer.module.scss +++ b/src/components/modals/gift/GiftComposer.module.scss @@ -128,7 +128,7 @@ .main-button { display: flex; - font-weight: 500; + font-weight: var(--font-weight-semibold); font-size: 1rem; height: 3rem; } diff --git a/src/components/modals/gift/GiftComposer.tsx b/src/components/modals/gift/GiftComposer.tsx index 3c9cdb326..8f8199b1b 100644 --- a/src/components/modals/gift/GiftComposer.tsx +++ b/src/components/modals/gift/GiftComposer.tsx @@ -12,6 +12,7 @@ import { getUserFullName } from '../../../global/helpers'; import { selectTabState, selectTheme, selectUser } from '../../../global/selectors'; import buildClassName from '../../../util/buildClassName'; import { formatCurrency } from '../../../util/formatCurrency'; +import { formatStarsAsIcon } from '../../../util/localization/format'; import useLang from '../../../hooks/useLang'; import useLastCallback from '../../../hooks/useLastCallback'; @@ -174,7 +175,7 @@ function GiftComposer({ const userFullName = getUserFullName(user)!; const amount = isStarGift - ? formatCurrency(gift.stars, STARS_CURRENCY_CODE, lang.code, { iconClassName: 'star-amount-icon' }) + ? formatStarsAsIcon(lang, gift.stars, true) : formatCurrency(gift.amount, gift.currency); return ( diff --git a/src/components/modals/gift/GiftItem.module.scss b/src/components/modals/gift/GiftItem.module.scss index a0b40ad2d..1c8664299 100644 --- a/src/components/modals/gift/GiftItem.module.scss +++ b/src/components/modals/gift/GiftItem.module.scss @@ -52,7 +52,7 @@ font-size: 0.6875rem !important; margin-top: 0.625rem; line-height: 1; - font-weight: 400 !important; + font-weight: var(--font-weight-semibold) !important; } .star { diff --git a/src/components/modals/gift/GiftModal.module.scss b/src/components/modals/gift/GiftModal.module.scss index cc9182700..4077f4797 100644 --- a/src/components/modals/gift/GiftModal.module.scss +++ b/src/components/modals/gift/GiftModal.module.scss @@ -94,8 +94,8 @@ .commonHeaderText { font-size: 1.25rem; - font-weight: 500; - margin: 0 0 0 3rem; + font-weight: var(--font-weight-medium); + margin: 0 0 0 4.5rem; unicode-bidi: plaintext; } diff --git a/src/components/modals/gift/StarGiftCategoryList.module.scss b/src/components/modals/gift/StarGiftCategoryList.module.scss index ed45a4f8d..cc162d6bb 100644 --- a/src/components/modals/gift/StarGiftCategoryList.module.scss +++ b/src/components/modals/gift/StarGiftCategoryList.module.scss @@ -30,7 +30,7 @@ white-space: nowrap; width: auto; padding: 0.375rem 0.75rem; - font-weight: 500; + font-weight: var(--font-weight-semibold); color: var(--color-text-secondary); border-radius: 1rem; diff --git a/src/components/modals/reportModal/ReportModal.module.scss b/src/components/modals/reportModal/ReportModal.module.scss index 871570401..c58601046 100644 --- a/src/components/modals/reportModal/ReportModal.module.scss +++ b/src/components/modals/reportModal/ReportModal.module.scss @@ -8,6 +8,10 @@ } } +.content { + padding: 0.5rem !important; +} + .modalTitle { display: flex; flex-direction: column; @@ -22,8 +26,8 @@ .optionText { width: 100%; overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; + white-space: normal; + word-wrap: break-word; } .option { diff --git a/src/components/modals/reportModal/ReportModal.tsx b/src/components/modals/reportModal/ReportModal.tsx index fd516224e..4d8556888 100644 --- a/src/components/modals/reportModal/ReportModal.tsx +++ b/src/components/modals/reportModal/ReportModal.tsx @@ -173,6 +173,7 @@ const ReportModal = ({ isOpen={isOpen} header={header} onClose={closeReportMessageModalHandler} + contentClassName={styles.content} className={buildClassName(styles.root, modal?.subject === 'story' && 'component-theme-dark')} > ( .profile-info > .ChatExtra { padding: 0.875rem 0.5rem 0.5rem; + @include mixins.adapt-padding-to-scrollbar(0.5rem); @include mixins.side-panel-section; .narrow { @@ -126,6 +127,8 @@ &.gifts-list { padding: 0.5rem; + @include mixins.adapt-padding-to-scrollbar(0.5rem); + @media (max-width: 600px) { padding: 0.5rem 0; } diff --git a/src/components/right/management/ManageChannel.tsx b/src/components/right/management/ManageChannel.tsx index 95e14892d..352d9bcfd 100644 --- a/src/components/right/management/ManageChannel.tsx +++ b/src/components/right/management/ManageChannel.tsx @@ -218,25 +218,26 @@ const ManageChannel: FC = ({ onChange={handleSetPhoto} disabled={!canChangeInfo} /> - -