Various design implementation fixes (#5284)

Co-authored-by: Alexander Zinchuk <alx.zinchuk@gmail.com>

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

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 {

src/components/common/CustomEmojiSetsModal.module.scss

@@ -21,7 +21,7 @@
       padding: 0;
     }
 
-    .multiline-menu-item {
+    .multiline-item {
       flex-grow: 1;
     }
 

src/components/common/LinkField.module.scss

@@ -20,4 +20,5 @@
 .title {
   font-weight: 500;
   color: var(--color-text-secondary);
+  padding-left: 1rem;
 }

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;

src/components/common/ProfileInfo.tsx

@@ -291,7 +291,7 @@ const ProfileInfo: FC<OwnProps & StateProps> = ({
 
   return (
     <div
-      className={buildClassName('ProfileInfo', forceShowSelf && styles.self)}
+      className={buildClassName('ProfileInfo')}
       dir={lang.isRtl ? 'rtl' : undefined}
     >
       <div className={styles.photoWrapper}>

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;

src/components/common/StickerSetCard.tsx

@@ -85,7 +85,7 @@ const StickerSetCard: FC<OwnProps> = ({
       onClick={handleCardClick}
     >
       {renderPreview()}
-      <div className="multiline-menu-item">
+      <div className="multiline-item">
         <div className="title">{stickerSet.title}</div>
         <div className="subtitle">{lang('StickerPack.StickerCount', stickerSet.count, 'i')}</div>
       </div>

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

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

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;
-    let priceText = price;
 
-    if (giftCryptoInfo) {
+    if (currency && currency === STARS_CURRENCY_CODE) {
-      const cryptoPrice = formatCurrencyAsString(giftCryptoInfo.amount, giftCryptoInfo.currency, oldLang.code);
+      priceText = oldLang('ActionGiftStarsTitle', amount!);
-      priceText = `${cryptoPrice} (${price})`;
+    } 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(

src/components/common/icons/StarIcon.tsx

@@ -29,6 +29,17 @@ const StarIcon: FC<OwnProps> = ({
   const randomId = useUniqueId();
   const validSvgRandomId = `svg-${randomId}`; // ID must start with a letter
 
+  const renderIcon = () => {
+    switch (type) {
+      case 'gold':
+        return <GoldStarIcon randomId={validSvgRandomId} />;
+      case 'premium':
+        return <PremiumStarIcon randomId={validSvgRandomId} />;
+      default:
+        return <RegularStarIcon />;
+    }
+  };
+
   return (
     <i
       onClick={onClick}
@@ -41,11 +52,7 @@ const StarIcon: FC<OwnProps> = ({
       )}
       style={style}
     >
-      {type === 'gold'
+      {renderIcon()}
-        ? <GoldStarIcon randomId={validSvgRandomId} />
-        : type === 'premium'
-          ? <PremiumStarIcon randomId={validSvgRandomId} />
-          : <RegularStarIcon />}
     </i>
   );
 };

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 {

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) {

src/components/left/main/Archive.module.scss

@@ -1,5 +1,9 @@
 .root {
   --background-color: var(--color-background);
+
+  :global(.ListItem-button) {
+    min-height: auto;
+  }
 }
 
 .minimized {

src/components/left/search/LeftSearch.scss

@@ -41,11 +41,11 @@
   .section-heading {
     position: relative;
     padding-top: 0.625rem;
-    padding-left: 1.75rem;
+    padding-left: 0.5rem;
-    margin: 0 0 1rem -1.25rem !important;
+    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,

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 {
+    .multiline-item {
-      white-space: initial;
+      .subtitle.tight {
-      flex-grow: 1;
+        line-height: 1rem;
-
-      &.full-size {
-        width: 100%;
-        overflow: hidden;
       }
 
       .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 {
+      .multiline-item .date {
-        .title,
+        float: left;
-        .subtitle {
+        margin-left: 0;
-          text-align: right;
+        margin-right: 1rem;
-        }
-
-        .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 {
+.settings-input {
-  margin-inline-start: var(--picker-title-shift);
+  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);
+}

src/components/left/settings/SettingsActiveSessions.tsx

@@ -150,7 +150,7 @@ const SettingsActiveSessions: FC<OwnProps & StateProps> = ({
         </h4>
 
         <ListItem narrow inactive icon={`device-${getSessionIcon(session)}`} iconClassName="icon-device">
-          <div className="multiline-menu-item full-size" dir="auto">
+          <div className="multiline-item full-size" dir="auto">
             <span className="title" dir="auto">{session.deviceModel}</span>
             <span className="subtitle black tight">
               {session.appName} {session.appVersion}, {session.platform} {session.systemVersion}
@@ -224,7 +224,7 @@ const SettingsActiveSessions: FC<OwnProps & StateProps> = ({
         iconClassName="icon-device"
         onClick={() => { handleOpenSessionModal(session.hash); }}
       >
-        <div className="multiline-menu-item full-size" dir="auto">
+        <div className="multiline-item full-size" dir="auto">
           <span className="date">{formatPastTimeShort(lang, session.dateActive * 1000)}</span>
           <span className="title">{session.deviceModel}</span>
           <span className="subtitle black tight">

src/components/left/settings/SettingsActiveWebsites.tsx

@@ -111,7 +111,7 @@ const SettingsActiveWebsites: FC<OwnProps & StateProps> = ({
         onClick={() => handleOpenSessionModal(session.hash)}
       >
         <Avatar className={styles.avatar} peer={bot} size="tiny" />
-        <div className="multiline-menu-item full-size" dir="auto">
+        <div className="multiline-item full-size" dir="auto">
           <span className="date">{formatPastTimeShort(lang, session.dateActive * 1000)}</span>
           {bot && <FullNameTitle className={styles.title} peer={bot} />}
           <span className={buildClassName('subtitle', 'black', 'tight', styles.platform)}>

src/components/left/settings/SettingsEditProfile.tsx

@@ -247,13 +247,15 @@ const SettingsEditProfile: FC<OwnProps & StateProps> = ({
         <div className="settings-item">
           <h4 className="settings-item-header" dir={lang.isRtl ? 'rtl' : undefined}>{lang('Username')}</h4>
 
-          <UsernameInput
+          <div className="settings-input">
-            currentUsername={currentUsername}
+            <UsernameInput
-            isLoading={isLoading}
+              currentUsername={currentUsername}
-            isUsernameAvailable={isUsernameAvailable}
+              isLoading={isLoading}
-            checkedUsername={checkedUsername}
+              isUsernameAvailable={isUsernameAvailable}
-            onChange={handleUsernameChange}
+              checkedUsername={checkedUsername}
-          />
+              onChange={handleUsernameChange}
+            />
+          </div>
 
           {editUsernameError === USERNAME_PURCHASE_ERROR && renderPurchaseLink()}
           <p className="settings-item-description" dir={lang.isRtl ? 'rtl' : undefined}>

src/components/left/settings/SettingsLanguage.tsx

@@ -159,7 +159,7 @@ const SettingsLanguage: FC<OwnProps & StateProps> = ({
         </div>
       )}
       <div className="settings-item settings-item-picker">
-        <h4 className="settings-item-header settings-picker-title">
+        <h4 className="settings-item-header">
           {lang('Localization.InterfaceLanguage')}
         </h4>
         {options ? (

src/components/left/settings/SettingsMain.tsx

@@ -82,7 +82,7 @@ const SettingsMain: FC<OwnProps & StateProps> = ({
 
   return (
     <div className="settings-content custom-scroll">
-      <div className="settings-main-menu">
+      <div className="settings-main-menu self-profile">
         {currentUserId && (
           <ProfileInfo
             peerId={currentUserId}
@@ -96,6 +96,8 @@ const SettingsMain: FC<OwnProps & StateProps> = ({
             isInSettings
           />
         )}
+      </div>
+      <div className="settings-main-menu">
         <ListItem
           icon="settings"
           narrow

src/components/left/settings/SettingsPrivacy.tsx

@@ -164,7 +164,7 @@ const SettingsPrivacy: FC<OwnProps & StateProps> = ({
               hasPasscode ? SettingsScreens.PasscodeEnabled : SettingsScreens.PasscodeDisabled,
             )}
           >
-            <div className="multiline-menu-item">
+            <div className="multiline-item">
               <span className="title">{oldLang('Passcode')}</span>
               <span className="subtitle" dir="auto">
                 {oldLang(hasPasscode ? 'PasswordOn' : 'PasswordOff')}
@@ -180,7 +180,7 @@ const SettingsPrivacy: FC<OwnProps & StateProps> = ({
             hasPassword ? SettingsScreens.TwoFaEnabled : SettingsScreens.TwoFaDisabled,
           )}
         >
-          <div className="multiline-menu-item">
+          <div className="multiline-item">
             <span className="title">{oldLang('TwoStepVerification')}</span>
             <span className="subtitle" dir="auto">
               {oldLang(hasPassword ? 'PasswordOn' : 'PasswordOff')}
@@ -209,7 +209,7 @@ const SettingsPrivacy: FC<OwnProps & StateProps> = ({
           // eslint-disable-next-line react/jsx-no-bind
           onClick={() => onScreenSelect(SettingsScreens.PrivacyPhoneNumber)}
         >
-          <div className="multiline-menu-item">
+          <div className="multiline-item">
             <span className="title">{oldLang('PrivacyPhoneTitle')}</span>
             <span className="subtitle" dir="auto">
               {getVisibilityValue(privacy.phoneNumber)}
@@ -222,7 +222,7 @@ const SettingsPrivacy: FC<OwnProps & StateProps> = ({
           // eslint-disable-next-line react/jsx-no-bind
           onClick={() => onScreenSelect(SettingsScreens.PrivacyLastSeen)}
         >
-          <div className="multiline-menu-item">
+          <div className="multiline-item">
             <span className="title">{oldLang('LastSeenTitle')}</span>
             <span className="subtitle" dir="auto">
               {getVisibilityValue(privacy.lastSeen)}
@@ -235,7 +235,7 @@ const SettingsPrivacy: FC<OwnProps & StateProps> = ({
           // eslint-disable-next-line react/jsx-no-bind
           onClick={() => onScreenSelect(SettingsScreens.PrivacyProfilePhoto)}
         >
-          <div className="multiline-menu-item">
+          <div className="multiline-item">
             <span className="title">{oldLang('PrivacyProfilePhotoTitle')}</span>
             <span className="subtitle" dir="auto">
               {getVisibilityValue(privacy.profilePhoto)}
@@ -248,7 +248,7 @@ const SettingsPrivacy: FC<OwnProps & StateProps> = ({
           // eslint-disable-next-line react/jsx-no-bind
           onClick={() => onScreenSelect(SettingsScreens.PrivacyBio)}
         >
-          <div className="multiline-menu-item">
+          <div className="multiline-item">
             <span className="title">{oldLang('PrivacyBio')}</span>
             <span className="subtitle" dir="auto">
               {getVisibilityValue(privacy.bio)}
@@ -261,7 +261,7 @@ const SettingsPrivacy: FC<OwnProps & StateProps> = ({
           // eslint-disable-next-line react/jsx-no-bind
           onClick={() => onScreenSelect(SettingsScreens.PrivacyBirthday)}
         >
-          <div className="multiline-menu-item">
+          <div className="multiline-item">
             <span className="title">{oldLang('PrivacyBirthday')}</span>
             <span className="subtitle" dir="auto">
               {getVisibilityValue(privacy.birthday)}
@@ -274,7 +274,7 @@ const SettingsPrivacy: FC<OwnProps & StateProps> = ({
           // eslint-disable-next-line react/jsx-no-bind
           onClick={() => onScreenSelect(SettingsScreens.PrivacyGifts)}
         >
-          <div className="multiline-menu-item">
+          <div className="multiline-item">
             <span className="title">{lang('PrivacyGifts')}</span>
             <span className="subtitle" dir="auto">
               {getVisibilityValue(privacy.gifts)}
@@ -287,7 +287,7 @@ const SettingsPrivacy: FC<OwnProps & StateProps> = ({
           // eslint-disable-next-line react/jsx-no-bind
           onClick={() => onScreenSelect(SettingsScreens.PrivacyForwarding)}
         >
-          <div className="multiline-menu-item">
+          <div className="multiline-item">
             <span className="title">{oldLang('PrivacyForwardsTitle')}</span>
             <span className="subtitle" dir="auto">
               {getVisibilityValue(privacy.forwards)}
@@ -300,7 +300,7 @@ const SettingsPrivacy: FC<OwnProps & StateProps> = ({
           // eslint-disable-next-line react/jsx-no-bind
           onClick={() => onScreenSelect(SettingsScreens.PrivacyPhoneCall)}
         >
-          <div className="multiline-menu-item">
+          <div className="multiline-item">
             <span className="title">{oldLang('WhoCanCallMe')}</span>
             <span className="subtitle" dir="auto">
               {getVisibilityValue(privacy.phoneCall)}
@@ -315,7 +315,7 @@ const SettingsPrivacy: FC<OwnProps & StateProps> = ({
           // eslint-disable-next-line react/jsx-no-bind
           onClick={() => onScreenSelect(SettingsScreens.PrivacyVoiceMessages)}
         >
-          <div className="multiline-menu-item">
+          <div className="multiline-item">
             <span className="title">{oldLang('PrivacyVoiceMessagesTitle')}</span>
             <span className="subtitle" dir="auto">
               {getVisibilityValue(privacy.voiceMessages)}
@@ -329,7 +329,7 @@ const SettingsPrivacy: FC<OwnProps & StateProps> = ({
           // eslint-disable-next-line react/jsx-no-bind
           onClick={() => onScreenSelect(SettingsScreens.PrivacyMessages)}
         >
-          <div className="multiline-menu-item">
+          <div className="multiline-item">
             <span className="title">{oldLang('PrivacyMessagesTitle')}</span>
             <span className="subtitle" dir="auto">
               {shouldNewNonContactPeersRequirePremium
@@ -344,7 +344,7 @@ const SettingsPrivacy: FC<OwnProps & StateProps> = ({
           // eslint-disable-next-line react/jsx-no-bind
           onClick={() => onScreenSelect(SettingsScreens.PrivacyGroupChats)}
         >
-          <div className="multiline-menu-item">
+          <div className="multiline-item">
             <span className="title">{oldLang('WhoCanAddMe')}</span>
             <span className="subtitle" dir="auto">
               {getVisibilityValue(privacy.chatInvite)}

src/components/left/settings/SettingsPrivacyVisibility.tsx

@@ -327,7 +327,7 @@ function PrivacySubsection({
                 onScreenSelect(allowedContactsScreen);
               }}
             >
-              <div className="multiline-menu-item full-size">
+              <div className="multiline-item full-size">
                 <span className="title">{oldLang('AlwaysAllow')}</span>
                 <span className="subtitle">{allowedString}</span>
               </div>
@@ -342,7 +342,7 @@ function PrivacySubsection({
                 onScreenSelect(deniedContactsScreen);
               }}
             >
-              <div className="multiline-menu-item full-size">
+              <div className="multiline-item full-size">
                 <span className="title">{oldLang('NeverAllow')}</span>
                 <span className="subtitle">{blockString}</span>
               </div>

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

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<OwnProps & StateProps> = ({
         {canCreateNewFolder && (
           <Button
           // TODO: Refactor button component to handle icon placemenet with props
-            className="with-icon mb-2"
+            className="settings-button with-icon mb-2"
             color="primary"
             size="smaller"
             pill
@@ -214,7 +215,7 @@ const SettingsFoldersMain: FC<OwnProps & StateProps> = ({
             onClick={handleCreateFolder}
             isRtl={lang.isRtl}
           >
-            <i className="icon icon-add" />
+            <Icon name="add" />
             {lang('CreateNewFilter')}
           </Button>
         )}

src/components/middle/DeleteSelectedMessageModal.module.scss

@@ -44,7 +44,7 @@
 }
 
 .dropdownList {
-  padding-left: 3.1875rem;
+  padding-left: 2.6875rem;
   margin-block: -0.375rem;
 }
 

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;
+      font-weight: var(--font-weight-medium);
-      line-height: 1.75;
+      line-height: 1rem;
-      padding: 0 0.5rem;
+      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);
+        font-size: calc(var(--message-text-size, 1rem) - 0.0625rem);
-        line-height: calc(var(--message-text-size, 1rem) + 0.2rem);
+        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-size: 0.9375rem;
-    font-weight: 500;
+    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);
+    border-radius: var(--border-radius-modal);
-    padding: 0.5rem 0.75rem;
+    padding: 0.5rem 1.5rem;
-    margin-top: 0.5rem;
+    margin-top: 0.6875rem;
     background-color: var(--pattern-color);
+    font-weight: var(--font-weight-semibold);
   }
 
   .sticky-date {

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 {

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

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;

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 {

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

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

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 (

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 {

src/components/modals/gift/GiftModal.module.scss

@@ -94,8 +94,8 @@
 
 .commonHeaderText {
   font-size: 1.25rem;
-  font-weight: 500;
+  font-weight: var(--font-weight-medium);
-  margin: 0 0 0 3rem;
+  margin: 0 0 0 4.5rem;
   unicode-bidi: plaintext;
 }
 

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;
 

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: normal;
-  white-space: nowrap;
+  word-wrap: break-word;
 }
 
 .option {

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')}
     >
       <Transition
@@ -188,6 +189,7 @@ const ReportModal = ({
           {renderingSection?.options?.map((option) => (
             <ListItem
               narrow
+              nonInteractive
               secondaryIcon="next"
               className={styles.option}
               buttonClassName={styles.optionButton}

src/components/right/Profile.scss

@@ -19,6 +19,7 @@
   > .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;
       }

src/components/right/management/ManageChannel.tsx

@@ -218,25 +218,26 @@ const ManageChannel: FC<OwnProps & StateProps> = ({
             onChange={handleSetPhoto}
             disabled={!canChangeInfo}
           />
-          <InputText
+          <div className="settings-edit">
-            id="channel-title"
+            <InputText
-            label={lang('EnterChannelName')}
+              id="channel-title"
-            onChange={handleTitleChange}
+              label={lang('EnterChannelName')}
-            value={title}
+              onChange={handleTitleChange}
-            error={error === CHANNEL_TITLE_EMPTY ? error : undefined}
+              value={title}
-            disabled={!canChangeInfo}
+              error={error === CHANNEL_TITLE_EMPTY ? error : undefined}
-          />
+              disabled={!canChangeInfo}
-          <TextArea
+            />
-            id="channel-about"
+            <TextArea
-            className="mb-2"
+              id="channel-about"
-            label={lang('DescriptionPlaceholder')}
+              label={lang('DescriptionPlaceholder')}
-            onChange={handleAboutChange}
+              onChange={handleAboutChange}
-            value={about}
+              value={about}
-            maxLength={CHANNEL_MAX_DESCRIPTION}
+              maxLength={CHANNEL_MAX_DESCRIPTION}
-            maxLengthIndicator={(CHANNEL_MAX_DESCRIPTION - about.length).toString()}
+              maxLengthIndicator={(CHANNEL_MAX_DESCRIPTION - about.length).toString()}
-            disabled={!canChangeInfo}
+              disabled={!canChangeInfo}
-            noReplaceNewlines
+              noReplaceNewlines
-          />
+            />
+          </div>
           {chat.isCreator && (
             <ListItem icon="lock" multiline onClick={handleClickEditType}>
               <span className="title">{lang('ChannelType')}</span>

src/components/right/management/ManageChatAdministrators.tsx

@@ -123,7 +123,7 @@ const ManageChatAdministrators: FC<OwnProps & StateProps> = ({
         </div>
 
         <div className="section" dir={lang.isRtl ? 'rtl' : undefined}>
-          <p className="text-muted" dir="auto">
+          <p className="section-help" dir="auto">
             {lang(isChannel
               ? 'Channel.Management.AddModeratorHelp'
               : 'Group.Management.AddModeratorHelp')}
@@ -171,7 +171,7 @@ const ManageChatAdministrators: FC<OwnProps & StateProps> = ({
                     onChange={handleToggleProfiles}
                   />
                 </div>
-                <p className="section-info">
+                <p className="section-info section-info_push">
                   {lang('ChannelSignProfilesInfo')}
                 </p>
               </>

src/components/right/management/ManageChatPrivacyType.tsx

@@ -265,7 +265,7 @@ const ManageChatPrivacyType: FC<OwnProps & StateProps> = ({
             options={forwardingOptions}
             onChange={handleForwardingOptionChange}
           />
-          <p className="section-info">
+          <p className="section-info section-info_push">
             {isChannel
               ? lang('ChannelVisibility.Forwarding.ChannelInfo')
               : lang('ChannelVisibility.Forwarding.GroupInfo')}

src/components/right/management/ManageChatRemovedUsers.tsx

@@ -84,7 +84,7 @@ const ManageChatRemovedUsers: FC<OwnProps & StateProps> = ({
     <div className="Management">
       <div className="custom-scroll">
         <div className="section" dir={lang.isRtl ? 'rtl' : undefined}>
-          <p className="text-muted">{lang(isChannel ? 'NoBlockedChannel2' : 'NoBlockedGroup2')}</p>
+          <p className="section-help">{lang(isChannel ? 'NoBlockedChannel2' : 'NoBlockedGroup2')}</p>
 
           {removedMembers.map((member) => (
             <ListItem

src/components/right/management/ManageDiscussion.tsx

@@ -275,7 +275,7 @@ const ManageDiscussion: FC<OwnProps & StateProps> = ({
                 />
               </div>
             )}
-            <p className="text-muted">
+            <p className="section-info section-info_push">
               {isJoinToSend ? lang('ChannelSettingsJoinRequestInfo') : lang('ChannelSettingsJoinToSendInfo')}
             </p>
           </div>

src/components/right/management/ManageGroup.tsx

@@ -328,25 +328,26 @@ const ManageGroup: FC<OwnProps & StateProps> = ({
             onChange={handleSetPhoto}
             disabled={!canChangeInfo}
           />
-          <InputText
+          <div className="settings-edit">
-            id="group-title"
+            <InputText
-            label={lang('GroupName')}
+              id="group-title"
-            onChange={handleTitleChange}
+              label={lang('GroupName')}
-            value={title}
+              onChange={handleTitleChange}
-            error={error === GROUP_TITLE_EMPTY ? error : undefined}
+              value={title}
-            disabled={!canChangeInfo}
+              error={error === GROUP_TITLE_EMPTY ? error : undefined}
-          />
+              disabled={!canChangeInfo}
-          <TextArea
+            />
-            id="group-about"
+            <TextArea
-            className="mb-2"
+              id="group-about"
-            label={lang('DescriptionPlaceholder')}
+              label={lang('DescriptionPlaceholder')}
-            maxLength={GROUP_MAX_DESCRIPTION}
+              maxLength={GROUP_MAX_DESCRIPTION}
-            maxLengthIndicator={(GROUP_MAX_DESCRIPTION - about.length).toString()}
+              maxLengthIndicator={(GROUP_MAX_DESCRIPTION - about.length).toString()}
-            onChange={handleAboutChange}
+              onChange={handleAboutChange}
-            value={about}
+              value={about}
-            disabled={!canChangeInfo}
+              disabled={!canChangeInfo}
-            noReplaceNewlines
+              noReplaceNewlines
-          />
+            />
+          </div>
           {chat.isCreator && (
             <ListItem icon="lock" multiline onClick={handleClickEditType}>
               <span className="title">{lang('GroupType')}</span>

src/components/right/management/ManageGroupPermissions.tsx

@@ -35,7 +35,7 @@ type StateProps = {
   members?: ApiChatMember[];
 };
 
-const ITEM_HEIGHT = 24 + 12;
+const ITEM_HEIGHT = 24 + 20;
 const BEFORE_ITEMS_COUNT = 2;
 const ITEMS_COUNT = 9;
 

src/components/right/management/ManageInvite.tsx

@@ -173,7 +173,7 @@ const ManageInvite: FC<OwnProps & StateProps> = ({
             value={title}
             onChange={handleTitleChange}
           />
-          <p className="text-muted hint">{lang('LinkNameHelp')}</p>
+          <p className="section-help hint">{lang('LinkNameHelp')}</p>
         </div>
         <div className="section">
           <div className="section-header">{lang('LimitByPeriod')}</div>
@@ -209,7 +209,7 @@ const ManageInvite: FC<OwnProps & StateProps> = ({
               {formatFullDate(lang, customExpireDate)} {formatTime(lang, customExpireDate)}
             </Button>
           )}
-          <p className="text-muted hint">{lang('TimeLimitHelp')}</p>
+          <p className="section-help hint">{lang('TimeLimitHelp')}</p>
         </div>
         {!isRequestNeeded && (
           <div className="section">
@@ -240,7 +240,7 @@ const ManageInvite: FC<OwnProps & StateProps> = ({
                 onChange={handleCustomUsageLimitChange}
               />
             )}
-            <p className="text-muted hint">{lang('UsesLimitHelp')}</p>
+            <p className="section-help hint">{lang('UsesLimitHelp')}</p>
           </div>
         )}
         <FloatingActionButton

src/components/right/management/ManageInviteInfo.tsx

@@ -82,7 +82,7 @@ const ManageInviteInfo: FC<OwnProps & StateProps> = ({
     return (
       <div className="section">
         <p>{importers.length ? lang('PeopleJoined', usage) : lang('NoOneJoined')}</p>
-        <p className="text-muted">
+        <p className="section-help">
           {!importers.length && (
             usageLimit ? lang('PeopleCanJoinViaLinkCount', usageLimit - usage) : lang('NoOneJoinedYet')
           )}
@@ -115,7 +115,7 @@ const ManageInviteInfo: FC<OwnProps & StateProps> = ({
     return (
       <div className="section">
         <p>{isChannel ? lang('SubscribeRequests') : lang('MemberRequests')}</p>
-        <p className="text-muted">
+        <p className="section-help">
           {requesters.map((requester) => (
             <ListItem
               className="chat-item-clickable scroll-item small-icon"
@@ -138,7 +138,7 @@ const ManageInviteInfo: FC<OwnProps & StateProps> = ({
     <div className="Management ManageInviteInfo">
       <div className="custom-scroll">
         {!invite && (
-          <p className="text-muted">{lang('Loading')}</p>
+          <p className="section-help">{lang('Loading')}</p>
         )}
         {invite && (
           <>
@@ -152,7 +152,7 @@ const ManageInviteInfo: FC<OwnProps & StateProps> = ({
               />
               <Button className="copy-link" onClick={handleCopyClicked}>{lang('CopyLink')}</Button>
               {Boolean(expireDate) && (
-                <p className="text-muted">
+                <p className="section-help">
                   {isExpired
                     ? lang('ExpiredLink')
                     : lang('LinkExpiresIn', `${formatFullDate(lang, expireDate)} ${formatTime(lang, expireDate)}`)}

src/components/right/management/ManageInvites.tsx

@@ -278,16 +278,18 @@ const ManageInvites: FC<OwnProps & StateProps> = ({
             size={STICKER_SIZE_INVITES}
             className="section-icon"
           />
-          <p className="text-muted">{isChannel ? lang('PrimaryLinkHelpChannel') : lang('PrimaryLinkHelp')}</p>
+          <p className="section-help">{isChannel ? lang('PrimaryLinkHelpChannel') : lang('PrimaryLinkHelp')}</p>
         </div>
         {primaryInviteLink && (
-          <LinkField
+          <div className="section">
-            className="section"
+            <LinkField
-            link={primaryInviteLink}
+              className="settings-input"
-            withShare
+              link={primaryInviteLink}
-            onRevoke={!chat?.usernames ? handlePrimaryRevoke : undefined}
+              withShare
-            title={chat?.usernames ? lang('PublicLink') : lang('lng_create_permanent_link_title')}
+              onRevoke={!chat?.usernames ? handlePrimaryRevoke : undefined}
-          />
+              title={chat?.usernames ? lang('PublicLink') : lang('lng_create_permanent_link_title')}
+            />
+          </div>
         )}
         <div className="section" teactFastList>
           <Button isText key="create" className="create-link" onClick={handleCreateNewClick}>
@@ -310,11 +312,11 @@ const ManageInvites: FC<OwnProps & StateProps> = ({
               </span>
             </ListItem>
           ))}
-          <p className="text-muted hint" key="links-hint">{lang('ManageLinksInfoHelp')}</p>
+          <p className="section-help hint" key="links-hint">{lang('ManageLinksInfoHelp')}</p>
         </div>
         {revokedExportedInvites && Boolean(revokedExportedInvites.length) && (
           <div className="section" teactFastList>
-            <p className="text-muted" key="title">{lang('RevokedLinks')}</p>
+            <p className="section-help" key="title">{lang('RevokedLinks')}</p>
             <ListItem
               icon="delete"
               destructive

src/components/right/management/ManageJoinRequests.tsx

@@ -89,7 +89,7 @@ const ManageJoinRequests: FC<OwnProps & StateProps> = ({
             <Spinner key="loading" />
           )}
           {chat?.joinRequests?.length === 0 && (
-            <p className="text-muted" key="empty">
+            <p className="section-help" key="empty">
               {isChannel ? lang('NoSubscribeRequestsDescription') : lang('NoMemberRequestsDescription')}
             </p>
           )}

src/components/right/management/ManageReactions.tsx

@@ -204,7 +204,7 @@ const ManageReactions: FC<OwnProps & StateProps> = ({
               renderValue={renderReactionsMaxCountValue}
               isCenteredLayout
             />
-            <p className="section-info mt-4">
+            <p className="section-info section-info_push">
               {lang('ChannelReactions.MaxCount.Info')}
             </p>
           </div>
@@ -219,7 +219,7 @@ const ManageReactions: FC<OwnProps & StateProps> = ({
             options={reactionsOptions}
             onChange={handleReactionsOptionChange}
           />
-          <p className="section-info mt-4">
+          <p className="section-info section-info_push">
             {localEnabledReactions?.type === 'all' && lang('EnableAllReactionsInfo')}
             {localEnabledReactions?.type === 'some' && lang('EnableSomeReactionsInfo')}
             {!localEnabledReactions && lang('DisableReactionsInfo')}

src/components/right/management/ManageUser.tsx

@@ -193,19 +193,21 @@ const ManageUser: FC<OwnProps & StateProps> = ({
             noEmojiStatus
             withFullInfo
           />
-          <InputText
+          <div className="settings-edit">
-            id="user-first-name"
+            <InputText
-            label={lang('UserInfo.FirstNamePlaceholder')}
+              id="user-first-name"
-            onChange={handleFirstNameChange}
+              label={lang('UserInfo.FirstNamePlaceholder')}
-            value={firstName}
+              onChange={handleFirstNameChange}
-            error={error === ERROR_FIRST_NAME_MISSING ? error : undefined}
+              value={firstName}
-          />
+              error={error === ERROR_FIRST_NAME_MISSING ? error : undefined}
-          <InputText
+            />
-            id="user-last-name"
+            <InputText
-            label={lang('UserInfo.LastNamePlaceholder')}
+              id="user-last-name"
-            onChange={handleLastNameChange}
+              label={lang('UserInfo.LastNamePlaceholder')}
-            value={lastName}
+              onChange={handleLastNameChange}
-          />
+              value={lastName}
+            />
+          </div>
           <div className="ListItem narrow">
             <Checkbox
               checked={isNotificationsEnabled}
@@ -242,7 +244,7 @@ const ManageUser: FC<OwnProps & StateProps> = ({
                 {lang('UserInfo.ResetCustomPhoto')}
               </ListItem>
             )}
-            <p className="text-muted" dir="auto">{lang('UserInfo.CustomPhotoInfo', user.firstName)}</p>
+            <p className="section-help" dir="auto">{lang('UserInfo.CustomPhotoInfo', user.firstName)}</p>
           </div>
         )}
         <div className="section">

src/components/right/management/Management.scss

@@ -18,6 +18,7 @@
   .section {
     padding: 1rem 0.5rem;
 
+    @include mixins.adapt-padding-to-scrollbar(0.5rem);
     @include mixins.side-panel-section;
 
     &.wide {
@@ -59,13 +60,6 @@
         margin-right: 1.6875rem;
       }
 
-      .multiline-item .subtitle {
-        line-height: 1.25rem;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-      }
-
       &.with-checkbox {
         body.is-ios &::after,
         body.is-android &::after {
@@ -73,13 +67,6 @@
         }
       }
 
-      &.narrow {
-        .Checkbox {
-          margin-top: 1rem;
-          margin-bottom: 1rem;
-        }
-      }
-
       &.exceptions-member {
         .ChatInfo .status {
           white-space: pre-wrap;
@@ -88,9 +75,11 @@
     }
 
     .section-heading {
-      font-weight: 500;
+      font-size: 1rem;
-      font-size: 0.9375rem;
+      font-weight: var(--font-weight-semibold);
       color: var(--color-text-secondary);
+      padding-inline-start: 1rem;
+      position: relative;
 
       &[dir="auto"] {
         text-align: initial;
@@ -98,6 +87,8 @@
     }
 
     .section-help {
+      padding: 0 1rem;
+
       color: var(--color-text-secondary);
       line-height: 1.375rem;
 
@@ -109,10 +100,11 @@
     .section-info {
       color: var(--color-text-secondary);
       font-size: 0.875rem;
+      padding: 0 1rem;
     }
 
     .section-info_push {
-      margin-top: 0.5rem;
+      margin-top: 0.25rem;
     }
 
     &[dir="rtl"] {
@@ -126,6 +118,7 @@
 
   .group-link {
     color: var(--color-text);
+    padding-left: 1rem;
   }
 
   .RangeSlider {
@@ -133,34 +126,6 @@
     margin-inline-start: 1rem;
   }
 
-  .radio-group {
-    margin-block: 2rem;
-    margin-inline-start: 1rem;
-
-    .Radio {
-      padding-left: 3.5rem;
-      margin-bottom: 2rem;
-
-      &:last-child {
-        margin-bottom: 0.625rem;
-      }
-    }
-
-    .Radio-main {
-      &::before {
-        left: 0.125rem;
-        top: 0.25rem;
-        transform: none;
-      }
-
-      &::after {
-        left: 0.4375rem;
-        top: 0.5625rem;
-        transform: none;
-      }
-    }
-  }
-
   .button-position {
     justify-content: initial;
   }
@@ -303,12 +268,12 @@
   transform: translateY(calc(-100%));
   position: absolute;
   width: 100%;
-  left: 0;
+  left: 0.125rem;
-  padding: 0 1.5rem 0 2.5rem;
+  padding: 0 0.5rem 0 3.375rem;
   background: var(--color-background);
 
   &--open {
-    transform: translateY(-0.75rem);
+    transform: translateY(0.25rem);
   }
 }
 
@@ -355,3 +320,7 @@
     }
   }
 }
+
+.settings-edit {
+  padding: 0 1rem !important;
+}

src/components/ui/Checkbox.scss

@@ -1,15 +1,29 @@
 .Checkbox {
-  display: block;
   position: relative;
-  padding-inline-start: 3.5rem;
+  width: 100%;
+  min-height: 3rem;
+
+  display: flex;
+  align-items: center;
+
+  padding-inline-start: 4.25rem;
   text-align: left;
-  margin-block: 0.75rem;
-  line-height: 1.375rem;
   cursor: var(--custom-cursor, pointer);
+  margin-bottom: 0;
+
+  &:hover,
+  &:focus-visible {
+    background-color: var(--color-chat-hover);
+    border-radius: var(--border-radius-default);
+  }
 
   &.disabled {
     cursor: var(--custom-cursor, default);
     opacity: 0.5;
+
+    &:hover {
+      background: none !important;
+    }
   }
 
   &.round {
@@ -22,6 +36,7 @@
 
   &.withIcon {
     padding-inline-start: 1rem;
+
     .Checkbox-main {
       &::before,
       &::after {
@@ -71,16 +86,19 @@
   }
 
   .Checkbox-main {
+    flex: 1;
+
     &::before,
     &::after {
-      pointer-events: none;
       content: "";
       display: block;
       position: absolute;
-      left: 1.125rem;
-      top: 0.125rem;
       width: 1.25rem;
       height: 1.25rem;
+      left: 1.125rem; // 1 + ((1.5 - 1.25) / 2)
+      top: 50%;
+      transform: translateY(-50%);
+      pointer-events: none;
     }
 
     &::before {
@@ -92,9 +110,7 @@
 
     &::after {
       /* stylelint-disable-next-line scss/operator-no-unspaced */
-      background:
+      background: center no-repeat url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEzLjkuOEw1LjggOC45IDIuMSA1LjJjLS40LS40LTEuMS0uNC0xLjYgMC0uNC40LS40IDEuMSAwIDEuNkw1IDExLjJjLjQuNCAxLjEuNCAxLjYgMGw4LjktOC45Yy40LS40LjQtMS4xIDAtMS42LS41LS40LTEuMi0uNC0xLjYuMXoiIGZpbGw9IiNGRkYiIGZpbGwtcnVsZT0ibm9uemVybyIvPjwvc3ZnPg==);
-        center no-repeat
-        url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEzLjkuOEw1LjggOC45IDIuMSA1LjJjLS40LS40LTEuMS0uNC0xLjYgMC0uNC40LS40IDEuMSAwIDEuNkw1IDExLjJjLjQuNCAxLjEuNCAxLjYgMGw4LjktOC45Yy40LS40LjQtMS4xIDAtMS42LS41LS40LTEuMi0uNC0xLjYuMXoiIGZpbGw9IiNGRkYiIGZpbGwtcnVsZT0ibm9uemVybyIvPjwvc3ZnPg==);
       background-size: 0.875rem;
       opacity: 0;
       transition: opacity 0.1s ease;
@@ -103,13 +119,15 @@
     .label {
       display: flex;
       align-items: center;
-      text-align: initial;
+      word-break: break-word;
-      flex-wrap: wrap;
+      unicode-bidi: plaintext;
-      column-gap: 0.25rem;
+      text-align: left;
+      line-height: 1.25rem;
     }
 
     .right-icon {
       margin-left: auto;
+      margin-right: 0.5rem;
       color: var(--color-text-secondary);
       font-size: 1.25rem;
     }
@@ -119,17 +137,20 @@
       font-size: 0.875rem;
       line-height: 1rem;
       color: var(--color-text-secondary);
+      unicode-bidi: plaintext;
       margin-top: 0.25rem;
     }
   }
 
   &.withSubLabel {
+    &:hover,
+    &:focus-visible {
+      background-color: var(--color-chat-hover);
+      border-radius: var(--border-radius-default);
+    }
+
     .Checkbox-main {
-      &::before,
+      padding: 0.4375rem 0 0.5625rem 0;
-      &::after {
-        top: 0.875rem;
-        left: 1rem;
-      }
     }
   }
 
@@ -140,8 +161,7 @@
       content: "";
       display: block;
       position: absolute;
-      left: 4.3125rem;
+      left: 3.5rem;
-      top: 0.625rem;
       width: 1.125rem;
       height: 1.125rem;
     }
@@ -189,19 +209,30 @@
     justify-content: space-between;
     align-items: center;
     gap: 0.3125rem;
-    margin-bottom: 0.5625rem;
+    margin-block: 0;
-    padding-inline-start: 4.1875rem;
+    padding: 0 0 0 3.5rem;
-    .Checkbox-main {
+
-      &::before,
+    &:hover,
-      &::after {
+    &:focus-visible {
-        top: 0.875rem;
+      background-color: var(--color-chat-hover);
-        left: 1.375rem;
+      border-radius: var(--border-radius-default);
-      }
+    }
+  }
+
+  &.withNestedList {
+    background-color: var(--color-background);
+    margin: 0;
+
+    &:hover,
+    &:focus-visible {
+      background-color: var(--color-chat-hover);
+      border-radius: var(--border-radius-default);
     }
   }
 
   &.permission-group {
     padding-inline-start: 3.625rem;
+
     .Checkbox-main {
       &::before,
       &::after {
@@ -210,9 +241,12 @@
     }
   }
 
+  &.permission-group.withNestedList {
+    margin-bottom: 1rem;
+  }
+
   &.avatar {
-    padding-inline-start: 6.625rem;
+    padding-inline-start: 5.5rem;
-    margin-bottom: 1.125rem;
   }
 
   .button {
@@ -232,8 +266,9 @@
   }
 
   &.onlyInput {
-    padding-inline-start: 1.125rem;
+    min-height: auto;
-    margin-block: 0 1.25rem;
+    position: relative;
+    padding-inline-start: 0.8125rem;
 
     .Checkbox-main {
       &::before,

src/components/ui/Checkbox.tsx

@@ -122,6 +122,7 @@ const Checkbox: FC<OwnProps> = ({
     Boolean(leftElement) && 'avatar',
     onlyInput && 'onlyInput',
     isRound && 'round',
+    Boolean(rightIcon) && 'withNestedList',
     className,
   );
 
@@ -145,7 +146,11 @@ const Checkbox: FC<OwnProps> = ({
           onChange={handleChange}
           onClick={onClickLabel ? handleInputClick : undefined}
         />
-        <div className={buildClassName('Checkbox-main', Boolean(leftElement) && 'Nested-avatar-list')}>
+        <div className={buildClassName(
+          'Checkbox-main',
+          Boolean(leftElement) && 'Nested-avatar-list',
+        )}
+        >
           <span className="label" dir="auto">
             {leftElement}
             {typeof label === 'string' ? renderText(label) : label}

src/components/ui/ListItem.scss

@@ -54,15 +54,14 @@
   }
 
   .ListItem-button {
-    width: 100%;
+    min-height: 3rem;
-    height: 100%;
     background-color: var(--background-color);
     border: none !important;
     box-shadow: none !important;
     outline: none !important;
     display: flex;
     align-items: center;
-    padding: 1rem 0.8125rem;
+    padding: 0 1rem;
     position: relative;
     overflow: hidden;
     white-space: nowrap;
@@ -82,8 +81,8 @@
 
     > .ListItem-main-icon {
       font-size: 1.5rem;
-      margin-inline-end: 1.8125rem;
       color: var(--color-text-secondary);
+      margin-right: 1.75rem;
     }
 
     > .Switcher {
@@ -97,10 +96,6 @@
     }
   }
 
-  .title, .subtitle {
-    line-height: 1.5rem;
-  }
-
   .user-status,
   .group-status,
   .title,
@@ -173,19 +168,6 @@
     --background-color: var(--color-chat-hover);
   }
 
-  &.narrow {
-    margin-bottom: 0.75rem;
-
-    .ListItem-button {
-      padding: 0.5rem 1rem;
-      min-height: 3rem;
-    }
-
-    .ListItem-main-icon {
-      margin-inline-end: 1.75rem;
-    }
-  }
-
   &.inactive {
     pointer-events: none;
   }
@@ -285,7 +267,7 @@
 
     .title {
       h3 {
-        font-weight: 500;
+        font-weight: var(--font-weight-semibold);
       }
     }
 
@@ -383,10 +365,6 @@
     }
   }
 
-  .Checkbox {
-    padding-inline-start: 4rem;
-  }
-
   &.picker-list-item {
     margin: 0;
 
@@ -435,6 +413,8 @@
     white-space: initial;
     overflow: hidden;
 
+    padding: 0.4375rem 0 0.5625rem 0;
+
     .word-break {
       overflow-wrap: break-word;
     }
@@ -457,12 +437,9 @@
 
     .subtitle {
       font-size: 0.875rem;
-      line-height: 1.25rem;
+      line-height: 1rem;
       color: var(--color-text-secondary);
-
+      margin-top: 0.25rem;
-      & + .subtitle {
-        margin-top: -0.25rem;
-      }
 
       &.black {
         color: var(--color-text);

src/components/ui/ListItem.tsx

@@ -74,6 +74,7 @@ interface OwnProps {
   clickArg?: any;
   onSecondaryIconClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
   onDragEnter?: (e: React.DragEvent<HTMLDivElement>) => void;
+  nonInteractive?: boolean;
 }
 
 const ListItem: FC<OwnProps> = ({
@@ -110,6 +111,7 @@ const ListItem: FC<OwnProps> = ({
   clickArg,
   onSecondaryIconClick,
   onDragEnter,
+  nonInteractive,
 }) => {
   // eslint-disable-next-line no-null/no-null
   let containerRef = useRef<HTMLDivElement>(null);
@@ -244,6 +246,7 @@ const ListItem: FC<OwnProps> = ({
         {!multiline && children}
         {secondaryIcon && (
           <Button
+            nonInteractive={nonInteractive}
             className={buildClassName('secondary-icon', secondaryIconClassName)}
             round
             color="translucent"

src/components/ui/Modal.scss

@@ -17,7 +17,7 @@
   &.pin,
   &.unpin-all {
     .modal-dialog {
-      max-width: 23rem;
+      max-width: 24rem;
     }
   }
 
@@ -103,7 +103,7 @@
 
   .modal-header,
   %modal-header {
-    padding: 1rem 1rem 0;
+    padding: 1.3125rem 1.3125rem 0;
     display: flex;
     align-items: center;
     flex-shrink: 0;
@@ -151,7 +151,7 @@
   .modal-content {
     width: 100%;
     flex-grow: 1;
-    padding: 1rem;
+    padding: 1rem 1.5rem 1.1875rem;
     overflow-y: auto;
     max-height: 92vh;
 
@@ -207,7 +207,7 @@
     width: auto;
     height: auto;
     text-align: right;
-    font-weight: 500;
+    font-weight: var(--font-weight-semibold);
     white-space: pre-wrap;
   }
 

src/components/ui/Radio.scss

@@ -1,11 +1,20 @@
 .Radio {
-  display: block;
   position: relative;
-  padding-inline-start: 3.5rem;
+  width: 100%;
+  min-height: 3rem;
+
+  display: flex;
+  align-items: center;
+
+  padding-inline-start: 4.25rem;
   text-align: left;
-  margin-block: 0.75rem;
-  line-height: 1.5rem;
   cursor: var(--custom-cursor, pointer);
+  margin: 0;
+
+  &:hover {
+    background-color: var(--color-chat-hover);
+    border-radius: var(--border-radius-default);
+  }
 
   &.disabled {
     pointer-events: none;
@@ -27,6 +36,10 @@
     }
   }
 
+  &.withSubLabel .Radio-main {
+    padding: 0.4375rem 0 0.5625rem 0;
+  }
+
   &.hidden-widget {
     cursor: var(--custom-cursor, default);
     .Radio-main {
@@ -49,14 +62,14 @@
       content: "";
       display: block;
       position: absolute;
-      left: 1rem;
       top: 50%;
-      width: 1.25rem;
-      height: 1.25rem;
       transform: translateY(-50%);
     }
 
     &::before {
+      width: 1.25rem;
+      height: 1.25rem;
+      left: 1.125rem; // 1 + ((1.5 - 1.25) / 2)
       border: 2px solid var(--color-borders-input);
       border-radius: 50%;
       background-color: var(--color-background);
@@ -65,9 +78,9 @@
     }
 
     &::after {
-      left: 1.3125rem;
       width: 0.625rem;
       height: 0.625rem;
+      left: 1.4375rem; // 1 + ((1.5 - 0.625) / 2)
       border-radius: 50%;
       background: var(--color-primary);
       opacity: 0;
@@ -79,6 +92,7 @@
       word-break: break-word;
       unicode-bidi: plaintext;
       text-align: left;
+      line-height: 1.25rem;
     }
 
     .subLabel {
@@ -87,6 +101,7 @@
       line-height: 1rem;
       color: var(--color-text-secondary);
       unicode-bidi: plaintext;
+      margin-top: 0.25rem;
     }
 
     .subLabelLink {
@@ -153,6 +168,8 @@
   }
 
   &.onlyInput {
+    min-height: auto;
+    position: relative;
     margin-block: 0 1.25rem;
     line-height: 1.25rem;
     padding-inline-start: 1.25rem;

src/components/ui/Radio.tsx

@@ -56,6 +56,7 @@ const Radio: FC<OwnProps> = ({
     withIcon && 'with-icon',
     isLoading && 'loading',
     onlyInput && 'onlyInput',
+    Boolean(subLabel) && 'withSubLabel',
   );
 
   return (

src/components/ui/Tab.scss

@@ -8,7 +8,7 @@
   margin: 0;
   border: none;
   padding: 0.625rem 1.125rem;
-  font-weight: 500;
+  font-weight: var(--font-weight-semibold);
   color: var(--color-text-secondary);
   border-top-left-radius: var(--border-radius-messages-small);
   border-top-right-radius: var(--border-radius-messages-small);

src/components/ui/TabList.scss

@@ -11,7 +11,7 @@
   overflow-x: auto;
   overflow-y: hidden;
 
-  font-size: 0.875rem;
+  font-size: 1rem;
 
   padding-inline: 0.5rem;
 

src/styles/_forms.scss

@@ -15,10 +15,10 @@
 
   label {
     display: block;
-    padding: 0 0.25rem;
     position: absolute;
-    left: 0.75rem;
+    left: 1rem;
     top: 0.6875rem;
+    padding: 0 0.3125rem;
     background-color: var(--color-background);
     font-size: 1rem;
     font-weight: 400;
@@ -49,7 +49,7 @@
   &.success label,
   .form-control:focus + label,
   .form-control.focus + label {
-    transform: scale(0.75) translate(-0.5rem, -2.25rem);
+    transform: scale(0.75) translate(0, -2rem);
   }
 
   input::placeholder,
@@ -108,7 +108,7 @@
   display: block;
   width: 100%;
   height: 3rem;
-  padding: calc(0.75rem - var(--border-width)) calc(0.9rem - var(--border-width));
+  padding: calc(0.75rem - var(--border-width)) calc(1.1875rem - var(--border-width)) 0.6875rem;
   border: var(--border-width) solid var(--color-borders-input);
   border-radius: var(--border-radius-default);
   color: var(--color-text);
@@ -196,7 +196,7 @@ textarea.form-control {
   resize: none;
   overflow: hidden;
   line-height: 1.3125rem;
-  padding-top: calc(1rem - var(--border-width));
+  padding-top: calc(0.8125rem - var(--border-width));
   padding-bottom: calc(1rem - var(--border-width));
 }
 

src/styles/_variables.scss

@@ -308,6 +308,10 @@ $color-message-story-mention-to: #74bcff;
 
   --picker-title-shift: 1rem;
 
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+
   --middle-header-panes-height: 0px;
 
   body.is-ios {

src/styles/index.scss

@@ -82,6 +82,10 @@ body.is-ios {
   --border-radius-messages-small: 0.5rem;
 }
 
+body.is-windows {
+  --font-weight-semibold: 500;
+}
+
 body.is-electron {
   --custom-cursor: default;
 }
@@ -296,6 +300,7 @@ body:not(.is-ios) {
 .star-amount-icon.star-amount-icon {
   line-height: inherit; // Vertical centring
   margin-inline-start: 0.375em; // Prevent sticking to the text without using `white-space: pre`
+  margin-inline-end: 0.2em; // Prevent sticking to the text without using `white-space: pre`
 }
 
 .shared-canvas-container {

src/util/theme.ts

@@ -60,13 +60,13 @@ function buildVariables(map: Map<string, string>) {
 export function updatePeerColors(
   peerColors: ApiPeerColors['general'],
 ) {
-  setPeerColor('0', ['#e17076']);
+  setPeerColor('0', ['#D45246']);
-  setPeerColor('1', ['#faa774']);
+  setPeerColor('1', ['#F68136']);
-  setPeerColor('2', ['#a695e7']);
+  setPeerColor('2', ['#6C61DF']);
-  setPeerColor('3', ['#7bc862']);
+  setPeerColor('3', ['#46BA43']);
-  setPeerColor('4', ['#6ec9cb']);
+  setPeerColor('4', ['#5CAFFA']);
-  setPeerColor('5', ['#65aadd']);
+  setPeerColor('5', ['#408ACF']);
-  setPeerColor('6', ['#ee7aae']);
+  setPeerColor('6', ['#D95574']);
 
   Object.entries(peerColors).forEach(([key, value]) => {
     if (!value.colors) return;