Various design implementation fixes (#5284)

Co-authored-by: Alexander Zinchuk <alx.zinchuk@gmail.com>
2024-12-20 11:37:35 +01:00 · 2024-12-20 11:37:35 +01:00 · bfe72ddbdc
commit bfe72ddbdc
parent b960e1080b
68 changed files with 393 additions and 393 deletions
--- 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;
 }

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

--- 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;
 }
--- 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;
--- a/src/components/common/ProfileInfo.tsx
+++ b/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}>
--- 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;
--- a/src/components/common/StickerSetCard.tsx
+++ b/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>
--- 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;
  }
--- 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;
 }
--- 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(
--- a/src/components/common/icons/StarIcon.tsx
+++ b/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'
-        ? <GoldStarIcon randomId={validSvgRandomId} />
-        : type === 'premium'
-          ? <PremiumStarIcon randomId={validSvgRandomId} />
-          : <RegularStarIcon />}
+      {renderIcon()}
    </i>
  );
 };
--- 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 {
--- 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) {
--- 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 {
--- 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,
--- 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);
+}
--- a/src/components/left/settings/SettingsActiveSessions.tsx
+++ b/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">
--- a/src/components/left/settings/SettingsActiveWebsites.tsx
+++ b/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)}>
--- a/src/components/left/settings/SettingsEditProfile.tsx
+++ b/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
-            currentUsername={currentUsername}
-            isLoading={isLoading}
-            isUsernameAvailable={isUsernameAvailable}
-            checkedUsername={checkedUsername}
-            onChange={handleUsernameChange}
-          />
+          <div className="settings-input">
+            <UsernameInput
+              currentUsername={currentUsername}
+              isLoading={isLoading}
+              isUsernameAvailable={isUsernameAvailable}
+              checkedUsername={checkedUsername}
+              onChange={handleUsernameChange}
+            />
+          </div>

          {editUsernameError === USERNAME_PURCHASE_ERROR && renderPurchaseLink()}
          <p className="settings-item-description" dir={lang.isRtl ? 'rtl' : undefined}>
--- a/src/components/left/settings/SettingsLanguage.tsx
+++ b/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 ? (
--- a/src/components/left/settings/SettingsMain.tsx
+++ b/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
--- a/src/components/left/settings/SettingsPrivacy.tsx
+++ b/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)}
--- a/src/components/left/settings/SettingsPrivacyVisibility.tsx
+++ b/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>
--- 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;
 }
--- 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<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>
        )}
--- 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;
 }

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

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

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

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

--- 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 {
--- 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')}
    >
      <Transition
@ -188,6 +189,7 @@ const ReportModal = ({
          {renderingSection?.options?.map((option) => (
            <ListItem
              narrow
+              nonInteractive
              secondaryIcon="next"
              className={styles.option}
              buttonClassName={styles.optionButton}
--- a/src/components/right/Profile.scss
+++ b/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;
      }
--- a/src/components/right/management/ManageChannel.tsx
+++ b/src/components/right/management/ManageChannel.tsx
@ -218,25 +218,26 @@ const ManageChannel: FC<OwnProps & StateProps> = ({
            onChange={handleSetPhoto}
            disabled={!canChangeInfo}
          />
-          <InputText
-            id="channel-title"
-            label={lang('EnterChannelName')}
-            onChange={handleTitleChange}
-            value={title}
-            error={error === CHANNEL_TITLE_EMPTY ? error : undefined}
-            disabled={!canChangeInfo}
-          />
-          <TextArea
-            id="channel-about"
-            className="mb-2"
-            label={lang('DescriptionPlaceholder')}
-            onChange={handleAboutChange}
-            value={about}
-            maxLength={CHANNEL_MAX_DESCRIPTION}
-            maxLengthIndicator={(CHANNEL_MAX_DESCRIPTION - about.length).toString()}
-            disabled={!canChangeInfo}
-            noReplaceNewlines
-          />
+          <div className="settings-edit">
+            <InputText
+              id="channel-title"
+              label={lang('EnterChannelName')}
+              onChange={handleTitleChange}
+              value={title}
+              error={error === CHANNEL_TITLE_EMPTY ? error : undefined}
+              disabled={!canChangeInfo}
+            />
+            <TextArea
+              id="channel-about"
+              label={lang('DescriptionPlaceholder')}
+              onChange={handleAboutChange}
+              value={about}
+              maxLength={CHANNEL_MAX_DESCRIPTION}
+              maxLengthIndicator={(CHANNEL_MAX_DESCRIPTION - about.length).toString()}
+              disabled={!canChangeInfo}
+              noReplaceNewlines
+            />
+          </div>
          {chat.isCreator && (
            <ListItem icon="lock" multiline onClick={handleClickEditType}>
              <span className="title">{lang('ChannelType')}</span>
--- a/src/components/right/management/ManageChatAdministrators.tsx
+++ b/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>
              </>
--- a/src/components/right/management/ManageChatPrivacyType.tsx
+++ b/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')}
--- a/src/components/right/management/ManageChatRemovedUsers.tsx
+++ b/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
--- a/src/components/right/management/ManageDiscussion.tsx
+++ b/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>
--- a/src/components/right/management/ManageGroup.tsx
+++ b/src/components/right/management/ManageGroup.tsx
@ -328,25 +328,26 @@ const ManageGroup: FC<OwnProps & StateProps> = ({
            onChange={handleSetPhoto}
            disabled={!canChangeInfo}
          />
-          <InputText
-            id="group-title"
-            label={lang('GroupName')}
-            onChange={handleTitleChange}
-            value={title}
-            error={error === GROUP_TITLE_EMPTY ? error : undefined}
-            disabled={!canChangeInfo}
-          />
-          <TextArea
-            id="group-about"
-            className="mb-2"
-            label={lang('DescriptionPlaceholder')}
-            maxLength={GROUP_MAX_DESCRIPTION}
-            maxLengthIndicator={(GROUP_MAX_DESCRIPTION - about.length).toString()}
-            onChange={handleAboutChange}
-            value={about}
-            disabled={!canChangeInfo}
-            noReplaceNewlines
-          />
+          <div className="settings-edit">
+            <InputText
+              id="group-title"
+              label={lang('GroupName')}
+              onChange={handleTitleChange}
+              value={title}
+              error={error === GROUP_TITLE_EMPTY ? error : undefined}
+              disabled={!canChangeInfo}
+            />
+            <TextArea
+              id="group-about"
+              label={lang('DescriptionPlaceholder')}
+              maxLength={GROUP_MAX_DESCRIPTION}
+              maxLengthIndicator={(GROUP_MAX_DESCRIPTION - about.length).toString()}
+              onChange={handleAboutChange}
+              value={about}
+              disabled={!canChangeInfo}
+              noReplaceNewlines
+            />
+          </div>
          {chat.isCreator && (
            <ListItem icon="lock" multiline onClick={handleClickEditType}>
              <span className="title">{lang('GroupType')}</span>
--- a/src/components/right/management/ManageGroupPermissions.tsx
+++ b/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;

--- a/src/components/right/management/ManageInvite.tsx
+++ b/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
--- a/src/components/right/management/ManageInviteInfo.tsx
+++ b/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)}`)}
--- a/src/components/right/management/ManageInvites.tsx
+++ b/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
-            className="section"
-            link={primaryInviteLink}
-            withShare
-            onRevoke={!chat?.usernames ? handlePrimaryRevoke : undefined}
-            title={chat?.usernames ? lang('PublicLink') : lang('lng_create_permanent_link_title')}
-          />
+          <div className="section">
+            <LinkField
+              className="settings-input"
+              link={primaryInviteLink}
+              withShare
+              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
--- a/src/components/right/management/ManageJoinRequests.tsx
+++ b/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>
          )}
--- a/src/components/right/management/ManageReactions.tsx
+++ b/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')}
--- a/src/components/right/management/ManageUser.tsx
+++ b/src/components/right/management/ManageUser.tsx
@ -193,19 +193,21 @@ const ManageUser: FC<OwnProps & StateProps> = ({
            noEmojiStatus
            withFullInfo
          />
-          <InputText
-            id="user-first-name"
-            label={lang('UserInfo.FirstNamePlaceholder')}
-            onChange={handleFirstNameChange}
-            value={firstName}
-            error={error === ERROR_FIRST_NAME_MISSING ? error : undefined}
-          />
-          <InputText
-            id="user-last-name"
-            label={lang('UserInfo.LastNamePlaceholder')}
-            onChange={handleLastNameChange}
-            value={lastName}
-          />
+          <div className="settings-edit">
+            <InputText
+              id="user-first-name"
+              label={lang('UserInfo.FirstNamePlaceholder')}
+              onChange={handleFirstNameChange}
+              value={firstName}
+              error={error === ERROR_FIRST_NAME_MISSING ? error : undefined}
+            />
+            <InputText
+              id="user-last-name"
+              label={lang('UserInfo.LastNamePlaceholder')}
+              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">
--- a/src/components/right/management/Management.scss
+++ b/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: 0.9375rem;
+      font-size: 1rem;
+      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;
-  padding: 0 1.5rem 0 2.5rem;
+  left: 0.125rem;
+  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;
+}
--- a/src/components/ui/Checkbox.scss
+++ b/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:
-        center no-repeat
-        url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEzLjkuOEw1LjggOC45IDIuMSA1LjJjLS40LS40LTEuMS0uNC0xLjYgMC0uNC40LS40IDEuMSAwIDEuNkw1IDExLjJjLjQuNCAxLjEuNCAxLjYgMGw4LjktOC45Yy40LS40LjQtMS4xIDAtMS42LS41LS40LTEuMi0uNC0xLjYuMXoiIGZpbGw9IiNGRkYiIGZpbGwtcnVsZT0ibm9uemVybyIvPjwvc3ZnPg==);
+      background: 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;
-      flex-wrap: wrap;
-      column-gap: 0.25rem;
+      word-break: break-word;
+      unicode-bidi: plaintext;
+      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,
-      &::after {
-        top: 0.875rem;
-        left: 1rem;
-      }
+      padding: 0.4375rem 0 0.5625rem 0;
    }
  }

@ -140,8 +161,7 @@
      content: "";
      display: block;
      position: absolute;
-      left: 4.3125rem;
-      top: 0.625rem;
+      left: 3.5rem;
      width: 1.125rem;
      height: 1.125rem;
    }
@ -189,19 +209,30 @@
    justify-content: space-between;
    align-items: center;
    gap: 0.3125rem;
-    margin-bottom: 0.5625rem;
-    padding-inline-start: 4.1875rem;
-    .Checkbox-main {
-      &::before,
-      &::after {
-        top: 0.875rem;
-        left: 1.375rem;
-      }
+    margin-block: 0;
+    padding: 0 0 0 3.5rem;
+
+    &:hover,
+    &:focus-visible {
+      background-color: var(--color-chat-hover);
+      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;
-    margin-bottom: 1.125rem;
+    padding-inline-start: 5.5rem;
  }

  .button {
@ -232,8 +266,9 @@
  }

  &.onlyInput {
-    padding-inline-start: 1.125rem;
-    margin-block: 0 1.25rem;
+    min-height: auto;
+    position: relative;
+    padding-inline-start: 0.8125rem;

    .Checkbox-main {
      &::before,
--- a/src/components/ui/Checkbox.tsx
+++ b/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}
--- a/src/components/ui/ListItem.scss
+++ b/src/components/ui/ListItem.scss
@ -54,15 +54,14 @@
  }

  .ListItem-button {
-    width: 100%;
-    height: 100%;
+    min-height: 3rem;
    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);
-
-      & + .subtitle {
-        margin-top: -0.25rem;
-      }
+      margin-top: 0.25rem;

      &.black {
        color: var(--color-text);
--- a/src/components/ui/ListItem.tsx
+++ b/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"
--- a/src/components/ui/Modal.scss
+++ b/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;
  }

--- a/src/components/ui/Radio.scss
+++ b/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;
--- a/src/components/ui/Radio.tsx
+++ b/src/components/ui/Radio.tsx
@ -56,6 +56,7 @@ const Radio: FC<OwnProps> = ({
    withIcon && 'with-icon',
    isLoading && 'loading',
    onlyInput && 'onlyInput',
+    Boolean(subLabel) && 'withSubLabel',
  );

  return (
--- a/src/components/ui/Tab.scss
+++ b/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);
--- a/src/components/ui/TabList.scss
+++ b/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;

--- a/src/styles/_forms.scss
+++ b/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));
 }

--- a/src/styles/_variables.scss
+++ b/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 {
--- a/src/styles/index.scss
+++ b/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 {
--- a/src/util/theme.ts
+++ b/src/util/theme.ts
@ -60,13 +60,13 @@ function buildVariables(map: Map<string, string>) {
 export function updatePeerColors(
  peerColors: ApiPeerColors['general'],
 ) {
-  setPeerColor('0', ['#e17076']);
-  setPeerColor('1', ['#faa774']);
-  setPeerColor('2', ['#a695e7']);
-  setPeerColor('3', ['#7bc862']);
-  setPeerColor('4', ['#6ec9cb']);
-  setPeerColor('5', ['#65aadd']);
-  setPeerColor('6', ['#ee7aae']);
+  setPeerColor('0', ['#D45246']);
+  setPeerColor('1', ['#F68136']);
+  setPeerColor('2', ['#6C61DF']);
+  setPeerColor('3', ['#46BA43']);
+  setPeerColor('4', ['#5CAFFA']);
+  setPeerColor('5', ['#408ACF']);
+  setPeerColor('6', ['#D95574']);

  Object.entries(peerColors).forEach(([key, value]) => {
    if (!value.colors) return;