feat(core): add responsive styles to registration page (#5044)

The responsive style of the login and registration page has been adjusted, with special treatment given to the input.
work for #4843

packages/frontend/component/src/components/auth-components/auth-input.tsx

@@ -2,7 +2,7 @@ import clsx from 'clsx';
 import type { FC, HTMLAttributes } from 'react';
 
 import { Input, type InputProps } from '../../ui/input';
-import { authInputWrapper, formHint } from './share.css';
+import * as styles from './share.css';
 export type AuthInputProps = InputProps & {
   label?: string;
   error?: boolean;
@@ -22,13 +22,14 @@ export const AuthInput: FC<AuthInputProps> = ({
 }) => {
   return (
     <div
-      className={clsx(authInputWrapper, className, {
+      className={clsx(styles.authInputWrapper, className, {
         'without-hint': withoutHint,
       })}
       {...otherWrapperProps}
     >
       {label ? <label>{label}</label> : null}
       <Input
+        className={styles.input}
         size="extraLarge"
         status={error ? 'error' : 'default'}
         onKeyDown={e => {
@@ -40,7 +41,7 @@ export const AuthInput: FC<AuthInputProps> = ({
       />
       {error && errorHint && !withoutHint ? (
         <div
-          className={clsx(formHint, {
+          className={clsx(styles.formHint, {
             error: error,
           })}
         >

packages/frontend/component/src/components/auth-components/auth-page-container.tsx

@@ -1,32 +1,41 @@
-import type { FC, PropsWithChildren, ReactNode } from 'react';
+import {
+  type FC,
+  type PropsWithChildren,
+  type ReactNode,
+  useEffect,
+  useState,
+} from 'react';
 
 import { Empty } from '../../ui/empty';
-import { Wrapper } from '../../ui/layout';
-import { Logo } from './logo';
+import { AffineOtherPageLayout } from '../affine-other-page-layout';
 import { authPageContainer } from './share.css';
 
 export const AuthPageContainer: FC<
   PropsWithChildren<{ title?: ReactNode; subtitle?: ReactNode }>
 > = ({ children, title, subtitle }) => {
+  const [isSmallScreen, setIsSmallScreen] = useState(false);
+
+  useEffect(() => {
+    const checkScreenSize = () => {
+      setIsSmallScreen(window.innerWidth <= 1024);
+    };
+    checkScreenSize();
+    window.addEventListener('resize', checkScreenSize);
+    return () => window.removeEventListener('resize', checkScreenSize);
+  }, []);
+
   return (
-    <div className={authPageContainer}>
-      <Wrapper
-        style={{
-          position: 'absolute',
-          top: 25,
-          left: 20,
-        }}
-      >
-        <Logo />
-      </Wrapper>
-      <div className="wrapper">
-        <div className="content">
-          <p className="title">{title}</p>
-          <p className="subtitle">{subtitle}</p>
-          {children}
+    <AffineOtherPageLayout isSmallScreen={isSmallScreen}>
+      <div className={authPageContainer}>
+        <div className="wrapper">
+          <div className="content">
+            <p className="title">{title}</p>
+            <p className="subtitle">{subtitle}</p>
+            {children}
+          </div>
+          {isSmallScreen ? null : <Empty />}
         </div>
-        <Empty />
       </div>
-    </div>
+    </AffineOtherPageLayout>
   );
 };

packages/frontend/component/src/components/auth-components/change-email-page.tsx

@@ -44,7 +44,6 @@ export const ChangeEmailPage = ({
     >
       <>
         <AuthInput
-          width={320}
           label={t['com.affine.settings.email']()}
           placeholder={t['com.affine.auth.sign.email.placeholder']()}
           value={email}

packages/frontend/component/src/components/auth-components/password-input/index.tsx

@@ -4,6 +4,7 @@ import { type FC, useEffect } from 'react';
 import { useCallback, useState } from 'react';
 
 import { Input, type InputProps } from '../../../ui/input';
+import * as styles from '../share.css';
 import { ErrorIcon } from './error';
 import { SuccessIcon } from './success';
 import { Tag } from './tag';
@@ -74,6 +75,7 @@ export const PasswordInput: FC<
   return (
     <>
       <Input
+        className={styles.input}
         type="password"
         size="extraLarge"
         style={{ marginBottom: 20 }}
@@ -83,6 +85,7 @@ export const PasswordInput: FC<
         {...inputProps}
       />
       <Input
+        className={styles.input}
         type="password"
         size="extraLarge"
         placeholder={t['com.affine.auth.set.password.placeholder.confirm']()}

packages/frontend/component/src/components/auth-components/set-password.tsx

@@ -19,7 +19,6 @@ export const SetPassword: FC<{
     <>
       <Wrapper marginTop={30} marginBottom={42}>
         <PasswordInput
-          width={320}
           onPass={useCallback(password => {
             setPasswordPass(true);
             passwordRef.current = password;

packages/frontend/component/src/components/auth-components/share.css.ts

@@ -151,14 +151,25 @@ export const authPageContainer = style({
   justifyContent: 'center',
   alignItems: 'center',
   fontSize: 'var(--affine-font-base)',
+  '@media': {
+    'screen and (max-width: 1024px)': {
+      flexDirection: 'column',
+      padding: '100px 20px',
+      justifyContent: 'flex-start',
+    },
+  },
 });
 globalStyle(`${authPageContainer} .wrapper`, {
   display: 'flex',
   alignItems: 'center',
+  '@media': {
+    'screen and (max-width: 1024px)': {
+      flexDirection: 'column',
+    },
+  },
 });
 globalStyle(`${authPageContainer} .content`, {
   maxWidth: '700px',
-  minWidth: '550px',
 });
 
 globalStyle(`${authPageContainer} .title`, {
@@ -178,3 +189,12 @@ export const signInPageContainer = style({
   width: '400px',
   margin: '205px auto 0',
 });
+
+export const input = style({
+  width: '330px',
+  '@media': {
+    'screen and (max-width: 520px)': {
+      width: '100%',
+    },
+  },
+});