Button: Adjust height (#6137)
This commit is contained in:
parent
745f4c6ba2
commit
969b9d28d8
@ -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;
|
||||
|
||||
|
||||
@ -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)}
|
||||
style={`height: ${CHAT_HEIGHT_PX}px;`}
|
||||
className={buildClassName('StickerSetCard', 'small-icon', className)}
|
||||
style={`height: ${STICKER_SET_CARD_HEIGHT}px;`}
|
||||
inactive={!firstSticker}
|
||||
onClick={handleCardClick}
|
||||
>
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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
|
||||
? 3.375 * REM
|
||||
: 4 * REM;
|
||||
const sendButtonWidth = 3 * REM;
|
||||
|
||||
const composerWidth = canPost
|
||||
? messageListWidth - sidePadding - sendButtonWidth
|
||||
|
||||
@ -230,8 +230,6 @@
|
||||
|
||||
margin-top: 0.5rem;
|
||||
margin-inline: 0.5rem;
|
||||
|
||||
font-weight: var(--font-weight-medium);
|
||||
}
|
||||
|
||||
.paymentContent {
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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 {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user