From 82443183e39f184094e230163f42553b481fea7c Mon Sep 17 00:00:00 2001 From: zubiden <19638254+zubiden@users.noreply.github.com> Date: Thu, 29 Aug 2024 15:52:42 +0200 Subject: [PATCH] Picker Refactoring: Even more fixes (#4895) --- .../common/ChatForumLastMessage.module.scss | 2 +- .../common/pickers/PickerItem.module.scss | 1 + src/components/common/profile/ChatExtra.tsx | 8 ++++--- .../common/profile/UserBirthday.tsx | 4 +++- src/components/left/settings/Settings.scss | 9 +++----- .../left/settings/SettingsStickers.tsx | 3 ++- .../right/management/ManageDiscussion.tsx | 22 +++++++++++-------- .../right/management/ManageReactions.tsx | 2 +- .../right/management/Management.scss | 8 ++++++- src/components/ui/Checkbox.scss | 10 ++++----- src/components/ui/ListItem.scss | 5 +++++ src/components/ui/Radio.scss | 7 +++--- 12 files changed, 49 insertions(+), 32 deletions(-) diff --git a/src/components/common/ChatForumLastMessage.module.scss b/src/components/common/ChatForumLastMessage.module.scss index c132c41b9..743909d95 100644 --- a/src/components/common/ChatForumLastMessage.module.scss +++ b/src/components/common/ChatForumLastMessage.module.scss @@ -115,7 +115,7 @@ .other-column-title { font-size: 0.9375rem; - margin-left: 1.5rem; + margin-inline-start: 1.5rem; } .other-columns { diff --git a/src/components/common/pickers/PickerItem.module.scss b/src/components/common/pickers/PickerItem.module.scss index 9bd38364d..b0179e4c5 100644 --- a/src/components/common/pickers/PickerItem.module.scss +++ b/src/components/common/pickers/PickerItem.module.scss @@ -14,6 +14,7 @@ background-color: var(--background-color); color: var(--color-text); line-height: 1.25; + text-align: initial; transition-property: background-color, opacity; transition-duration: 150ms; diff --git a/src/components/common/profile/ChatExtra.tsx b/src/components/common/profile/ChatExtra.tsx index dff87ab2a..dbff7483d 100644 --- a/src/components/common/profile/ChatExtra.tsx +++ b/src/components/common/profile/ChatExtra.tsx @@ -313,7 +313,9 @@ const ChatExtra: FC = ({ handleUsernameClick(mainUsername, isChat); }} > - {formatUsername(mainUsername.username, isChat)} + + {formatUsername(mainUsername.username, isChat)} + {usernameLinks && {usernameLinks}} {oldLang(isChat ? 'Link' : 'Username')} @@ -343,7 +345,7 @@ const ChatExtra: FC = ({ {Boolean(formattedNumber?.length) && ( // eslint-disable-next-line react/jsx-no-bind - {formattedNumber} + {formattedNumber} {oldLang('Phone')} )} @@ -356,7 +358,7 @@ const ChatExtra: FC = ({ isStatic allowSelection > - + { renderText(description, [ 'br', diff --git a/src/components/common/profile/UserBirthday.tsx b/src/components/common/profile/UserBirthday.tsx index 838302c5e..af9c2d759 100644 --- a/src/components/common/profile/UserBirthday.tsx +++ b/src/components/common/profile/UserBirthday.tsx @@ -175,7 +175,9 @@ const UserBirthday = ({ isStatic={isStatic} onSecondaryIconClick={handleOpenPremiumGiftModal} > -
{renderText(lang(valueKey, [formattedDate, age], undefined, age))}
+
+ {renderText(lang(valueKey, [formattedDate, age], undefined, age))} +
{lang(isToday ? 'ProfileBirthdayToday' : 'ProfileBirthday')} {isPlayingAnimation && IS_OFFSET_PATH_SUPPORTED && numbersForAge?.map((sticker, index) => ( diff --git a/src/components/left/settings/Settings.scss b/src/components/left/settings/Settings.scss index 718005996..a20317bfe 100644 --- a/src/components/left/settings/Settings.scss +++ b/src/components/left/settings/Settings.scss @@ -129,6 +129,7 @@ .settings-item-simple, .settings-item { + text-align: initial; padding: 1.5rem 0.5rem 1rem; @include mixins.adapt-padding-to-scrollbar(0.5rem); @@ -148,10 +149,6 @@ margin-bottom: 1.25rem; padding-inline-start: 1rem; position: relative; - - &[dir="rtl"] { - text-align: right; - } } &-slider { @@ -162,7 +159,7 @@ font-size: 0.875rem; color: var(--color-text-secondary); margin-top: -0.5rem; - margin-bottom: 1.5rem; + margin-bottom: 1rem; padding-inline-start: 1rem; .settings-content.two-fa &, @@ -396,7 +393,7 @@ .SettingsDefaultReaction { .current-default-reaction { - margin-inline-end: 1.1875rem; + margin-inline-end: 1.75rem; } } diff --git a/src/components/left/settings/SettingsStickers.tsx b/src/components/left/settings/SettingsStickers.tsx index d1a1fee19..ed2295b19 100644 --- a/src/components/left/settings/SettingsStickers.tsx +++ b/src/components/left/settings/SettingsStickers.tsx @@ -102,7 +102,7 @@ const SettingsStickers: FC = ({ onCheck={handleSuggestStickersChange} /> onScreenSelect(SettingsScreens.CustomEmoji)} icon="smile" @@ -113,6 +113,7 @@ const SettingsStickers: FC = ({ {defaultReaction && ( onScreenSelect(SettingsScreens.QuickReaction)} > diff --git a/src/components/right/management/ManageDiscussion.tsx b/src/components/right/management/ManageDiscussion.tsx index c9aef735d..cb96012e6 100644 --- a/src/components/right/management/ManageDiscussion.tsx +++ b/src/components/right/management/ManageDiscussion.tsx @@ -259,17 +259,21 @@ const ManageDiscussion: FC = ({ {linkedChat && (

{lang('ChannelSettingsJoinTitle')}

- - {isJoinToSend && ( +
+
+ {isJoinToSend && ( +
+ +
)}

{isJoinToSend ? lang('ChannelSettingsJoinRequestInfo') : lang('ChannelSettingsJoinToSendInfo')} diff --git a/src/components/right/management/ManageReactions.tsx b/src/components/right/management/ManageReactions.tsx index c3749b0d2..1ca8ee4b1 100644 --- a/src/components/right/management/ManageReactions.tsx +++ b/src/components/right/management/ManageReactions.tsx @@ -226,7 +226,7 @@ const ManageReactions: FC = ({

{localEnabledReactions?.type === 'some' && ( -
+

{lang('OnlyAllowThisReactions')}

diff --git a/src/components/right/management/Management.scss b/src/components/right/management/Management.scss index f45415c4f..53570d453 100644 --- a/src/components/right/management/Management.scss +++ b/src/components/right/management/Management.scss @@ -32,6 +32,10 @@ border-top: none; } + &.section-with-fab { + padding-bottom: 3.5rem; + } + > .ChatInfo { margin: 0 0 2rem !important; @@ -126,10 +130,12 @@ .RangeSlider { margin-top: 2rem; + margin-inline-start: 1rem; } .radio-group { - margin-top: 2rem; + margin-block: 2rem; + margin-inline-start: 1rem; .Radio { padding-left: 3.5rem; diff --git a/src/components/ui/Checkbox.scss b/src/components/ui/Checkbox.scss index 5316c0107..98f2d7b60 100644 --- a/src/components/ui/Checkbox.scss +++ b/src/components/ui/Checkbox.scss @@ -3,7 +3,7 @@ position: relative; padding-inline-start: 3.5rem; text-align: left; - margin-bottom: 1.5rem; + margin-block: 0.75rem; line-height: 1.5rem; cursor: var(--custom-cursor, pointer); @@ -69,10 +69,10 @@ content: ""; display: block; position: absolute; - left: 1rem; - top: 0.1875rem; - width: 1.125rem; - height: 1.125rem; + left: 1.125rem; + top: 0.125rem; + width: 1.25rem; + height: 1.25rem; } &::before { diff --git a/src/components/ui/ListItem.scss b/src/components/ui/ListItem.scss index 4b93e84e2..058af94ae 100644 --- a/src/components/ui/ListItem.scss +++ b/src/components/ui/ListItem.scss @@ -178,6 +178,7 @@ .ListItem-button { padding: 0.5rem 1rem; + min-height: 3rem; } .ListItem-main-icon { @@ -438,6 +439,10 @@ .subtitle { display: block; text-align: initial; + + &[dir="rtl"] { + text-align: right; + } } .title { diff --git a/src/components/ui/Radio.scss b/src/components/ui/Radio.scss index af7331269..f32e693d6 100644 --- a/src/components/ui/Radio.scss +++ b/src/components/ui/Radio.scss @@ -3,7 +3,7 @@ position: relative; padding-inline-start: 3.5rem; text-align: left; - margin-bottom: 1.5rem; + margin-block: 0.75rem; line-height: 1.5rem; cursor: var(--custom-cursor, pointer); @@ -153,7 +153,7 @@ } &.onlyInput { - margin-bottom: 1.25rem; + margin-block: 0 1.25rem; line-height: 1.25rem; padding-inline-start: 1.25rem; @@ -172,8 +172,7 @@ } .Spinner { - left: 0; - top: 0; + inset: 0 !important; transform: none; } }