ztr/TelegramPWA
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Button: More sizing fixes (#6143)

Browse Source
This commit is contained in:
zubiden 2025-08-21 12:05:39 +02:00 committed by Alexander Zinchuk
parent 16b26c6e42
commit f4240a93ab
14 changed files with 66 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/components/auth/Auth.scss
View File

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

26
src/components/auth/AuthPhoneNumber.tsx
View File

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

8
src/components/auth/AuthQrCode.tsx
View File

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

16
src/components/common/Composer.scss
View File

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

8
src/components/middle/HeaderActions.tsx
View File

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

4
src/components/middle/MessageList.scss
View File

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

10
src/components/middle/MessageSelectToolbar.scss
View File

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

14
src/components/middle/MiddleColumn.scss
View File

@ -98,11 +98,7 @@
}
#editable-message-text {
height: 3.5rem !important;
@media (max-width: 600px) {
height: 2.5rem !important;
}
height: var(--base-height) !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 {

5
src/components/middle/MiddleHeader.scss
View File

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

4
src/components/middle/composer/AttachMenu.scss
View File

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

3
src/components/middle/composer/AttachmentModal.module.scss
View File

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

1
src/components/middle/composer/AttachmentModal.tsx
View File

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

4
src/components/middle/composer/CustomSendMenu.scss
View File

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

2
src/components/middle/composer/SymbolMenu.scss
View File

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