From ae650b94b806d671e2ff26b7cb5538ded6972b68 Mon Sep 17 00:00:00 2001 From: heaven Date: Mon, 13 Apr 2026 00:47:20 +0300 Subject: [PATCH] fix layout for login page with styles css --- src/app/pages/auth/login/Login.tsx | 3 +- src/app/pages/auth/register/Register.tsx | 3 +- .../auth/reset-password/ResetPassword.tsx | 3 +- src/app/pages/auth/styles.css.ts | 40 ++++++++++++++----- 4 files changed, 35 insertions(+), 14 deletions(-) diff --git a/src/app/pages/auth/login/Login.tsx b/src/app/pages/auth/login/Login.tsx index 6dfcfd2a..8e49a971 100644 --- a/src/app/pages/auth/login/Login.tsx +++ b/src/app/pages/auth/login/Login.tsx @@ -8,6 +8,7 @@ import { useParsedLoginFlows } from '../../../hooks/useParsedLoginFlows'; import { PasswordLoginForm } from './PasswordLoginForm'; import { getRegisterPath } from '../../pathUtils'; import { LoginPathSearchParams } from '../../paths'; +import * as css from '../styles.css'; const useLoginSearchParams = (searchParams: URLSearchParams): LoginPathSearchParams => useMemo( @@ -40,7 +41,7 @@ export function Login() { {t('Auth.error_client_unsupported', { server })} )} - + {t('Auth.new_here')}{' '} {t('Auth.create_account')} diff --git a/src/app/pages/auth/register/Register.tsx b/src/app/pages/auth/register/Register.tsx index 7fdf6e31..09445452 100644 --- a/src/app/pages/auth/register/Register.tsx +++ b/src/app/pages/auth/register/Register.tsx @@ -8,6 +8,7 @@ import { PasswordRegisterForm, SUPPORTED_REGISTER_STAGES } from '../register/Pas import { SupportedUIAFlowsLoader } from '../../../components/SupportedUIAFlowsLoader'; import { getLoginPath } from '../../pathUtils'; import { RegisterPathSearchParams } from '../../paths'; +import * as css from '../styles.css'; const useRegisterSearchParams = (searchParams: URLSearchParams): RegisterPathSearchParams => useMemo( @@ -65,7 +66,7 @@ export function Register() { } )} - + {t('Auth.already_have_account')}{' '} {t('Auth.title_login')} diff --git a/src/app/pages/auth/reset-password/ResetPassword.tsx b/src/app/pages/auth/reset-password/ResetPassword.tsx index fa217b8a..9d4d459d 100644 --- a/src/app/pages/auth/reset-password/ResetPassword.tsx +++ b/src/app/pages/auth/reset-password/ResetPassword.tsx @@ -6,6 +6,7 @@ import { getLoginPath } from '../../pathUtils'; import { useAuthServer } from '../../../hooks/useAuthServer'; import { PasswordResetForm } from './PasswordResetForm'; import { ResetPasswordPathSearchParams } from '../../paths'; +import * as css from '../styles.css'; const useResetPasswordSearchParams = ( searchParams: URLSearchParams @@ -28,7 +29,7 @@ export function ResetPassword() { - + {t('Auth.remember_password')}{' '} {t('Auth.title_login')} diff --git a/src/app/pages/auth/styles.css.ts b/src/app/pages/auth/styles.css.ts index d5adc579..1a2bb1a5 100644 --- a/src/app/pages/auth/styles.css.ts +++ b/src/app/pages/auth/styles.css.ts @@ -22,21 +22,21 @@ export const AuthLayout = style({ '@media': { 'only screen and (max-width: 768px)': { vars: { - '--vojo-mascot-size': 'min(23rem, 43dvh, 88vw)', - '--vojo-mascot-top': 'clamp(0.75rem, 2.5dvh, 1.5rem)', + '--vojo-mascot-size': 'min(14rem, 30dvh, 60vw)', + '--vojo-mascot-top': 'clamp(0.5rem, 1.5dvh, 1rem)', '--vojo-stack-pad': '0.75rem', - '--vojo-anchor-ratio': '0.66', - '--vojo-modal-min-top': 'clamp(10.5rem, 24dvh, 16rem)', + '--vojo-anchor-ratio': '0.64', + '--vojo-modal-min-top': 'clamp(7rem, 18dvh, 12rem)', '--vojo-modal-gap': '0.75rem', '--vojo-footer-space': '4.4rem', }, }, 'only screen and (max-height: 760px)': { vars: { - '--vojo-mascot-size': 'min(21rem, 34dvh, 80vw)', - '--vojo-mascot-top': '0.75rem', - '--vojo-anchor-ratio': '0.6', - '--vojo-modal-min-top': '9rem', + '--vojo-mascot-size': 'min(12rem, 24dvh, 55vw)', + '--vojo-mascot-top': '0.5rem', + '--vojo-anchor-ratio': '0.56', + '--vojo-modal-min-top': '6rem', '--vojo-modal-gap': '0.4rem', '--vojo-footer-space': '4rem', }, @@ -104,10 +104,17 @@ export const AuthCardContent = style({ backdropFilter: 'blur(22px) saturate(150%)', WebkitBackdropFilter: 'blur(22px) saturate(150%)', border: '1px solid rgba(255, 255, 255, 0.08)', - width: `min(${toRem(492)}, calc(100vw - 3rem))`, - padding: `${toRem(42)} ${toRem(50)}`, + width: `min(${toRem(492)}, calc(100vw - 2rem))`, + padding: `${toRem(32)} ${toRem(40)}`, boxSizing: 'border-box', - gap: toRem(24), + gap: toRem(20), + + '@media': { + 'only screen and (max-width: 480px)': { + padding: `${toRem(20)} ${toRem(24)}`, + gap: toRem(14), + }, + }, }); export const AuthCardContentConstrained = style({ @@ -205,6 +212,17 @@ export const AuthLogo = style([ }, ]); +/* ── Bottom nav link (e.g. "Впервые здесь? Создать учётную запись") ── */ +export const AuthBottomLink = style({ + fontSize: toRem(15), + + '@media': { + 'only screen and (max-width: 480px)': { + fontSize: toRem(12), + }, + }, +}); + /* ── Footer ── */ export const AuthFooter = style({ display: 'flex',