Picker Refactoring: Even more fixes (#4895)

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 {

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;

src/components/common/profile/ChatExtra.tsx

@@ -313,7 +313,9 @@ const ChatExtra: FC<OwnProps & StateProps> = ({
           handleUsernameClick(mainUsername, isChat);
         }}
       >
-        <span className="title" dir="auto">{formatUsername(mainUsername.username, isChat)}</span>
+        <span className="title" dir={lang.isRtl ? 'rtl' : undefined}>
+          {formatUsername(mainUsername.username, isChat)}
+        </span>
         <span className="subtitle">
           {usernameLinks && <span className="other-usernames">{usernameLinks}</span>}
           {oldLang(isChat ? 'Link' : 'Username')}
@@ -343,7 +345,7 @@ const ChatExtra: FC<OwnProps & StateProps> = ({
       {Boolean(formattedNumber?.length) && (
         // eslint-disable-next-line react/jsx-no-bind
         <ListItem icon="phone" multiline narrow ripple onClick={handlePhoneClick}>
-          <span className="title" dir="auto">{formattedNumber}</span>
+          <span className="title" dir={lang.isRtl ? 'rtl' : undefined}>{formattedNumber}</span>
           <span className="subtitle">{oldLang('Phone')}</span>
         </ListItem>
       )}
@@ -356,7 +358,7 @@ const ChatExtra: FC<OwnProps & StateProps> = ({
           isStatic
           allowSelection
         >
-          <span className="title word-break allow-selection" dir="auto">
+          <span className="title word-break allow-selection" dir={lang.isRtl ? 'rtl' : undefined}>
             {
               renderText(description, [
                 'br',

src/components/common/profile/UserBirthday.tsx

@@ -175,7 +175,9 @@ const UserBirthday = ({
         isStatic={isStatic}
         onSecondaryIconClick={handleOpenPremiumGiftModal}
       >
-        <div className="title">{renderText(lang(valueKey, [formattedDate, age], undefined, age))}</div>
+        <div className="title" dir={lang.isRtl ? 'rtl' : undefined}>
+          {renderText(lang(valueKey, [formattedDate, age], undefined, age))}
+        </div>
         <span className="subtitle">{lang(isToday ? 'ProfileBirthdayToday' : 'ProfileBirthday')}</span>
       </ListItem>
       {isPlayingAnimation && IS_OFFSET_PATH_SUPPORTED && numbersForAge?.map((sticker, index) => (

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;
   }
 }
 

src/components/left/settings/SettingsStickers.tsx

@@ -102,7 +102,7 @@ const SettingsStickers: FC<OwnProps & StateProps> = ({
           onCheck={handleSuggestStickersChange}
         />
         <ListItem
-          className="mt-4"
+          narrow
           // eslint-disable-next-line react/jsx-no-bind
           onClick={() => onScreenSelect(SettingsScreens.CustomEmoji)}
           icon="smile"
@@ -113,6 +113,7 @@ const SettingsStickers: FC<OwnProps & StateProps> = ({
         {defaultReaction && (
           <ListItem
             className="SettingsDefaultReaction"
+            narrow
             // eslint-disable-next-line react/jsx-no-bind
             onClick={() => onScreenSelect(SettingsScreens.QuickReaction)}
           >

src/components/right/management/ManageDiscussion.tsx

@@ -259,17 +259,21 @@ const ManageDiscussion: FC<OwnProps & StateProps> = ({
         {linkedChat && (
           <div className="section">
             <h3 className="section-heading">{lang('ChannelSettingsJoinTitle')}</h3>
-            <Checkbox
+            <div className="ListItem narrow">
-              checked={isJoinToSend}
-              onCheck={handleJoinToSendCheck}
-              label={lang('ChannelSettingsJoinToSend')}
-            />
-            {isJoinToSend && (
               <Checkbox
-                checked={isJoinRequest}
+                checked={isJoinToSend}
-                onCheck={handleJoinRequestCheck}
+                onCheck={handleJoinToSendCheck}
-                label={lang('ChannelSettingsJoinRequest')}
+                label={lang('ChannelSettingsJoinToSend')}
               />
+            </div>
+            {isJoinToSend && (
+              <div className="ListItem narrow">
+                <Checkbox
+                  checked={isJoinRequest}
+                  onCheck={handleJoinRequestCheck}
+                  label={lang('ChannelSettingsJoinRequest')}
+                />
+              </div>
             )}
             <p className="text-muted">
               {isJoinToSend ? lang('ChannelSettingsJoinRequestInfo') : lang('ChannelSettingsJoinToSendInfo')}

src/components/right/management/ManageReactions.tsx

@@ -226,7 +226,7 @@ const ManageReactions: FC<OwnProps & StateProps> = ({
           </p>
         </div>
         {localEnabledReactions?.type === 'some' && (
-          <div className="section">
+          <div className="section section-with-fab">
             <h3 className="section-heading">
               {lang('OnlyAllowThisReactions')}
             </h3>

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;

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;
+      left: 1.125rem;
-      top: 0.1875rem;
+      top: 0.125rem;
-      width: 1.125rem;
+      width: 1.25rem;
-      height: 1.125rem;
+      height: 1.25rem;
     }
 
     &::before {

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 {

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;
+      inset: 0 !important;
-      top: 0;
       transform: none;
     }
   }