Button: More sizing fixes (#6143)

src/components/auth/Auth.scss

@@ -98,14 +98,6 @@
   .form {
     min-height: 26.25rem;
   }
-
-  .Button {
-    margin-top: 2.75rem;
-  }
-
-  .Button + .Button {
-    margin-top: 1rem;
-  }
 }
 
 #auth-code-form,
@@ -139,6 +131,18 @@
   }
 }
 
+.auth-button {
+  margin-top: 2.5rem;
+}
+
+.auth-button + .auth-button {
+  margin-top: 0.5rem;
+}
+
+.auth-button.text + .auth-button.text {
+  margin-top: 0;
+}
+
 #auth-qr-form {
   .qr-outer {
     position: relative;

src/components/auth/AuthPhoneNumber.tsx

@@ -274,18 +274,38 @@ const AuthPhoneNumber: FC<StateProps> = ({
           />
           {canSubmit && (
             isAuthReady ? (
-              <Button size="smaller" type="submit" ripple isLoading={authIsLoading}>{lang('LoginNext')}</Button>
+              <Button
+                className="auth-button"
+                type="submit"
+                ripple
+                isLoading={authIsLoading}
+              >
+                {lang('LoginNext')}
+              </Button>
             ) : (
               <Loading />
             )
           )}
           {isAuthReady && (
-            <Button size="smaller" isText ripple isLoading={authIsLoadingQrCode} onClick={handleGoToAuthQrCode}>
+            <Button
+              className="auth-button"
+              isText
+              ripple
+              isLoading={authIsLoadingQrCode}
+              onClick={handleGoToAuthQrCode}
+            >
               {lang('LoginQRLogin')}
             </Button>
           )}
           {suggestedLanguage && suggestedLanguage !== language && continueText && (
-            <Button size="smaller" isText isLoading={isLoading} onClick={handleLangChange}>{continueText}</Button>
+            <Button
+              className="auth-button"
+              isText
+              isLoading={isLoading}
+              onClick={handleLangChange}
+            >
+              {continueText}
+            </Button>
           )}
         </form>
       </div>

src/components/auth/AuthQrCode.tsx

@@ -190,10 +190,14 @@ const AuthCode = ({
           <li><span>{lang('LoginQRHelp3')}</span></li>
         </ol>
         {isAuthReady && (
-          <Button size="smaller" isText onClick={handleReturnToAuthPhoneNumber}>{lang('LoginQRCancel')}</Button>
+          <Button className="auth-button" isText onClick={handleReturnToAuthPhoneNumber}>
+            {lang('LoginQRCancel')}
+          </Button>
         )}
         {suggestedLanguage && suggestedLanguage !== language && continueText && (
-          <Button size="smaller" isText isLoading={isLoading} onClick={handleLangChange}>{continueText}</Button>
+          <Button className="auth-button" isText isLoading={isLoading} onClick={handleLangChange}>
+            {continueText}
+          </Button>
         )}
       </div>
     </div>

src/components/common/Composer.scss

@@ -459,7 +459,7 @@
 }
 
 .message-input-wrapper {
-  --action-button-size: var(--base-height, 3.5rem);
+  --action-button-size: var(--base-height, 3rem);
   --action-button-compact-fix: -1rem;
 
   display: flex;
@@ -648,7 +648,7 @@
 
 .input-scroller {
   overflow: hidden;
-  min-height: var(--base-height, 3.5rem);
+  min-height: var(--base-height, 3rem);
   max-height: 26rem;
 
   /* stylelint-disable-next-line plugin/no-low-performance-animation-properties */
@@ -709,7 +709,7 @@
     overflow: hidden;
 
     height: auto;
-    padding: calc((var(--base-height, 3.5rem) - var(--composer-text-size, 1rem) * 1.375) / 2) 0.875rem;
+    padding: calc((var(--base-height, 3rem) - var(--composer-text-size, 1rem) * 1.375) / 2) 0.875rem;
     border: none !important;
     border-radius: 0 !important;
 
@@ -847,7 +847,7 @@
   .form-control {
     height: auto;
     margin-bottom: 0;
-    padding: calc((var(--base-height, 3.5rem) - var(--composer-text-size, 1rem) * 1.3125) / 2) 0;
+    padding: calc((var(--base-height, 3rem) - var(--composer-text-size, 1rem) * 1.3125) / 2) 0;
 
     line-height: 1.3125;
     white-space: pre-wrap;
@@ -859,7 +859,7 @@
 
   .forced-placeholder,
   .placeholder-text {
-    top: calc((var(--base-height, 3.5rem) - var(--composer-text-size, 1rem) * 1.3125) / 2);
+    top: calc((var(--base-height, 3rem) - var(--composer-text-size, 1rem) * 1.3125) / 2);
 
     @media (max-width: 600px) {
       top: calc((2.875rem - var(--composer-text-size, 1rem) * 1.3125) / 2);
@@ -889,7 +889,7 @@
 #caption-input-text {
   --margin-for-scrollbar: 2rem;
   .input-scroller {
-    min-height: var(--base-height, 3.5rem);
+    min-height: var(--base-height, 3rem);
     max-height: 10rem;
     margin-right: calc((var(--margin-for-scrollbar) + 1rem) * -1);
 
@@ -933,11 +933,11 @@
 }
 
 #caption-input-text .placeholder-text {
-  bottom: 1.0625rem;
+  bottom: 0.8125rem;
 }
 
 #story-input-text .placeholder-text {
-  top: calc((var(--base-height, 3.5rem) - var(--composer-text-size, 1rem) * 1.3125) / 2);
+  top: calc((var(--base-height, 3rem) - var(--composer-text-size, 1rem) * 1.3125) / 2);
   left: 0.875rem;
 
   &.is-need-premium {

src/components/middle/HeaderActions.tsx

@@ -331,7 +331,7 @@ const HeaderActions: FC<OwnProps & StateProps> = ({
         <>
           {canExpandActions && !shouldSendJoinRequest && (canSubscribe || shouldJoinToSend) && (
             <Button
-              size="tiny"
+              size="smaller"
               ripple
               fluid
               onClick={handleSubscribeClick}
@@ -341,7 +341,7 @@ const HeaderActions: FC<OwnProps & StateProps> = ({
           )}
           {canExpandActions && shouldSendJoinRequest && (
             <Button
-              size="tiny"
+              size="smaller"
               ripple
               fluid
               onClick={handleSubscribeClick}
@@ -351,7 +351,7 @@ const HeaderActions: FC<OwnProps & StateProps> = ({
           )}
           {canExpandActions && canStartBot && (
             <Button
-              size="tiny"
+              size="smaller"
               ripple
               fluid
               onClick={handleStartBot}
@@ -371,7 +371,7 @@ const HeaderActions: FC<OwnProps & StateProps> = ({
           )}
           {canExpandActions && canUnblock && (
             <Button
-              size="tiny"
+              size="smaller"
               ripple
               fluid
               onClick={handleUnblock}

src/components/middle/MessageList.scss

@@ -77,7 +77,7 @@
     margin-bottom: 0;
 
     .last-in-list {
-      margin-bottom: 5.625rem;
+      margin-bottom: 5.125rem;
 
       &.ActionMessage {
         padding-bottom: 0.125rem;
@@ -89,7 +89,7 @@
     }
 
     &:has(.sponsored-media-preview) {
-      margin-bottom: 5.625rem;
+      margin-bottom: 5.125rem;
 
       .last-in-list {
         margin-bottom: 1rem;

src/components/middle/MessageSelectToolbar.scss

@@ -81,16 +81,6 @@
 
     transition: transform var(--select-transition), opacity var(--select-transition);
 
-    > .Button {
-      width: 3rem;
-      height: 3rem;
-
-      @media (max-width: 600px) {
-        width: 2.875rem;
-        height: 2.875rem;
-      }
-    }
-
     @media (max-width: 600px) {
       max-width: none;
       padding: 0;

src/components/middle/MiddleColumn.scss

@@ -98,11 +98,7 @@
       }
 
       #editable-message-text {
-        height: 3.5rem !important;
+        height: var(--base-height) !important;
-
-        @media (max-width: 600px) {
-          height: 2.5rem !important;
-        }
       }
 
       .message-input-wrapper,
@@ -157,6 +153,8 @@
   }
 
   .middle-column-footer {
+    --base-height: 3rem;
+
     position: relative;
     z-index: var(--z-middle-footer);
     transform: translate3d(0, 0, 0);
@@ -334,17 +332,13 @@
 
   .composer-button {
     transform: scaleX(1);
-    height: 3.5rem;
+    height: var(--base-height);
     transition: transform var(--select-transition), background-color 0.15s, color 0.15s;
 
     .select-mode-active + .middle-column-footer & {
       transform: scaleX(var(--unpin-hidden-scale));
       box-shadow: none;
     }
-
-    @media (max-width: 600px) {
-      height: 2.5rem;
-    }
   }
 
   .open-chat-button {

src/components/middle/MiddleHeader.scss

@@ -276,11 +276,6 @@
     }
   }
 
-  .Button.smaller {
-    width: 2.5rem;
-    height: 2.5rem;
-  }
-
   .HeaderActions {
     display: flex;
     flex-shrink: 0;

src/components/middle/composer/AttachMenu.scss

@@ -9,7 +9,7 @@
 
   &--menu {
     position: relative;
-    top: -3.5rem;
+    top: -3rem;
 
     .bubble {
       overflow: auto;
@@ -19,7 +19,7 @@
     .is-pointer-env & {
       > .backdrop {
         position: absolute;
-        top: -1rem;
+        top: -0.5rem;
         right: 0;
         left: auto;
 

src/components/middle/composer/AttachmentModal.module.scss

@@ -218,8 +218,7 @@
 }
 
 .send {
-  height: 2.5rem;
+  padding: 0 1rem !important;
-  padding: 0 1rem;
 }
 
 :global {

src/components/middle/composer/AttachmentModal.tsx

@@ -748,6 +748,7 @@ const AttachmentModal: FC<OwnProps & StateProps> = ({
               <Button
                 ref={mainButtonRef}
                 className={styles.send}
+                size="smaller"
                 onClick={handleSendClick}
                 onContextMenu={canShowCustomSendMenu ? handleContextMenu : undefined}
               >

src/components/middle/composer/CustomSendMenu.scss

@@ -1,11 +1,11 @@
 .CustomSendMenu {
   position: relative;
-  bottom: 3.5rem;
+  bottom: 3rem;
 
   .is-pointer-env & {
     > .backdrop {
       position: absolute;
-      top: -1rem;
+      top: -0.5rem;
       right: 0;
       left: auto;
 

src/components/middle/composer/SymbolMenu.scss

@@ -135,7 +135,7 @@
   }
 
   .bubble {
-    --offset-y: 4rem;
+    --offset-y: 3.5rem;
 
     overflow: hidden;