Button: Adjust height (#6137)

src/components/common/Composer.scss

@@ -1,7 +1,7 @@
 @use '../../styles/mixins';
 
 .Composer {
-  --base-height: 3.5rem;
+  --base-height: 3rem;
 
   align-items: flex-end;
 
@@ -420,7 +420,7 @@
 
   flex-grow: 1;
 
-  max-width: calc(100% - 4rem);
+  max-width: calc(100% - 3.5rem);
   border-radius: var(--border-radius-messages);
   border-bottom-right-radius: 0;
 

src/components/common/StickerSetCard.tsx

@@ -4,7 +4,7 @@ import { memo } from '../../lib/teact/teact';
 import type { ApiSticker, ApiStickerSet } from '../../api/types';
 import type { ObserveFn } from '../../hooks/useIntersectionObserver';
 
-import { CHAT_HEIGHT_PX, STICKER_SIZE_GENERAL_SETTINGS } from '../../config';
+import { STICKER_SIZE_GENERAL_SETTINGS } from '../../config';
 import buildClassName from '../../util/buildClassName';
 
 import useLastCallback from '../../hooks/useLastCallback';
@@ -17,6 +17,8 @@ import StickerButton from './StickerButton';
 
 import './StickerSetCard.scss';
 
+const STICKER_SET_CARD_HEIGHT = 56;
+
 type OwnProps = {
   stickerSet?: ApiStickerSet;
   noPlay?: boolean;
@@ -79,8 +81,8 @@ const StickerSetCard: FC<OwnProps> = ({
 
   return (
     <ListItem
-      className={buildClassName('StickerSetCard', 'chat-item-clickable small-icon', className)}
+      className={buildClassName('StickerSetCard', 'small-icon', className)}
-      style={`height: ${CHAT_HEIGHT_PX}px;`}
+      style={`height: ${STICKER_SET_CARD_HEIGHT}px;`}
       inactive={!firstSticker}
       onClick={handleCardClick}
     >

src/components/middle/MessageSelectToolbar.scss

@@ -72,7 +72,6 @@
 
     width: 100%;
     max-width: calc(100% * var(--composer-hidden-scale));
-    padding: 0.25rem;
     border-radius: var(--border-radius-messages);
 
     font-weight: var(--font-weight-medium);

src/components/middle/helpers/calculateMiddleFooterTransforms.ts

@@ -16,9 +16,7 @@ export default function calculateMiddleFooterTransforms(windowWidth: number, can
     ? REM
     : 2 * REM;
   const messageListWidth = getMessageListWidth(windowWidth);
-  const sendButtonWidth = windowWidth <= MOBILE_SCREEN_MAX_WIDTH
+  const sendButtonWidth = 3 * REM;
-    ? 3.375 * REM
-    : 4 * REM;
 
   const composerWidth = canPost
     ? messageListWidth - sidePadding - sendButtonWidth

src/components/modals/stars/StarsBalanceModal.module.scss

@@ -230,8 +230,6 @@
 
   margin-top: 0.5rem;
   margin-inline: 0.5rem;
-
-  font-weight: var(--font-weight-medium);
 }
 
 .paymentContent {

src/components/story/StoryViewer.module.scss

@@ -682,8 +682,6 @@
   transition: transform var(--layer-transition), opacity 0.15s ease;
 
   &:global(.Composer) {
-    --base-height: 3rem;
-
     @media (max-width: 600px) {
       margin-bottom: env(safe-area-inset-bottom);
       padding: 0 0.5rem 0.5rem;

src/components/ui/Button.scss

@@ -39,11 +39,12 @@
   justify-content: center;
 
   width: 100%;
-  height: 3.5rem;
+  height: 3rem;
   padding: 0.625rem;
   border: 0;
   border-radius: var(--border-radius-default);
 
+  font-weight: var(--font-weight-medium);
   line-height: 1.2;
   color: white;
   text-decoration: none !important;
@@ -324,15 +325,14 @@
   }
 
   &.smaller {
-    height: 2.75rem;
+    height: 2.5rem;
     padding: 0.3125rem;
 
     &.round {
-      width: 2.75rem;
+      width: 2.5rem;
     }
 
     &.pill {
-      height: 2.5rem;
       padding: 0.3125rem 1rem;
       border-radius: 1.25rem;
     }
@@ -356,23 +356,13 @@
         }
       }
     }
-
-    @media (max-width: 600px) {
-      height: 2.5rem;
-
-      &.round {
-        width: 2.5rem;
-      }
-    }
   }
 
   &.tiny {
     height: 2.25rem;
     padding: 0.4375rem;
     border-radius: var(--border-radius-default-small);
-
     font-size: 0.875rem;
-    font-weight: var(--font-weight-medium);
 
     &.round {
       width: 2.25rem;
@@ -393,7 +383,7 @@
   }
 
   &.round {
-    width: 3.5rem;
+    width: 3rem;
     border-radius: 50%;
 
     .icon {