refactor(core): auth ui (#10101)

close AF-2202 AF-2203

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

@@ -0,0 +1,7 @@
+import type { PropsWithChildren } from 'react';
+
+import { authContainer } from './share.css';
+
+export function AuthContainer(props: PropsWithChildren) {
+  return <div className={authContainer}>{props.children}</div>;
+}

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

@@ -0,0 +1,7 @@
+import type { PropsWithChildren } from 'react';
+
+import { authFooter } from './share.css';
+
+export function AuthFooter(props: PropsWithChildren) {
+  return <div className={authFooter}>{props.children}</div>;
+}

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

@@ -1,15 +1,15 @@
 import { Logo1Icon } from '@blocksuite/icons/rc';
 import type { FC } from 'react';
 
-import { modalHeaderWrapper } from './share.css';
-export const ModalHeader: FC<{
+import { authHeaderWrapper } from './share.css';
+export const AuthHeader: FC<{
   title: string;
   subTitle?: string;
 }> = ({ title, subTitle }) => {
   return (
-    <div className={modalHeaderWrapper}>
+    <div className={authHeaderWrapper}>
       <p>
-        {title === 'AFFiNE Cloud' && <Logo1Icon className="logo" />}
+        <Logo1Icon className="logo" />
         {title}
       </p>
       <p>{subTitle}</p>

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

@@ -8,14 +8,12 @@ export type AuthInputProps = InputProps & {
   label?: string;
   error?: boolean;
   errorHint?: ReactNode;
-  withoutHint?: boolean;
   onEnter?: () => void;
 };
 export const AuthInput = ({
   label,
   error,
   errorHint,
-  withoutHint = false,
   onEnter,
   className,
   ...inputProps
@@ -23,7 +21,7 @@ export const AuthInput = ({
   return (
     <div
       className={clsx(styles.authInputWrapper, {
-        'without-hint': withoutHint,
+        'with-hint': !!errorHint,
       })}
     >
       {label ? <label>{label}</label> : null}
@@ -34,14 +32,8 @@ export const AuthInput = ({
         onEnter={onEnter}
         {...inputProps}
       />
-      {error && errorHint && !withoutHint ? (
-        <div
-          className={clsx(styles.formHint, {
-            error: error,
-          })}
-        >
-          {errorHint}
-        </div>
+      {error && errorHint ? (
+        <div className={styles.authInputError}>{errorHint}</div>
       ) : null}
     </div>
   );

packages/frontend/component/src/components/auth-components/back-button.tsx

@@ -1,6 +1,5 @@
 import { useI18n } from '@affine/i18n';
 import { ArrowLeftSmallIcon } from '@blocksuite/icons/rc';
-import { cssVar } from '@toeverything/theme';
 import type { FC } from 'react';
 
 import type { ButtonProps } from '../../ui/button';
@@ -12,11 +11,7 @@ export const BackButton: FC<ButtonProps> = props => {
     <Button
       variant="plain"
       style={{
-        marginTop: 12,
-        marginLeft: -5,
-        paddingLeft: 0,
-        paddingRight: 5,
-        color: cssVar('textSecondaryColor'),
+        padding: '2px 8px 2px 0',
       }}
       prefix={<ArrowLeftSmallIcon />}
       {...props}

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

@@ -1,10 +1,12 @@
+export * from './auth-container';
 export * from './auth-content';
+export * from './auth-footer';
+export * from './auth-header';
 export * from './auth-input';
 export * from './auth-page-container';
 export * from './back-button';
 export * from './change-email-page';
 export * from './change-password-page';
-export * from './modal-header';
 export * from './onboarding-page';
 export * from './password-input';
 export * from './set-password-page';

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

@@ -1,14 +1,25 @@
 import { cssVar } from '@toeverything/theme';
-import { globalStyle, keyframes, style } from '@vanilla-extract/css';
-export const modalHeaderWrapper = style({});
-globalStyle(`${modalHeaderWrapper} .logo`, {
+import { globalStyle, style } from '@vanilla-extract/css';
+export const authContainer = style({
+  display: 'flex',
+  flexDirection: 'column',
+  height: '100%',
+  width: '100%',
+  minHeight: '422px',
+});
+
+export const authHeaderWrapper = style({
+  marginBottom: '20px',
+});
+globalStyle(`${authHeaderWrapper} .logo`, {
   fontSize: cssVar('fontH3'),
   fontWeight: 600,
   color: cssVar('black'),
   marginRight: '6px',
   verticalAlign: 'middle',
 });
-globalStyle(`${modalHeaderWrapper} > p:first-of-type`, {
+
+globalStyle(`${authHeaderWrapper} > p:first-of-type`, {
   fontSize: cssVar('fontH5'),
   fontWeight: 600,
   marginBottom: '4px',
@@ -16,20 +27,37 @@ globalStyle(`${modalHeaderWrapper} > p:first-of-type`, {
   display: 'flex',
   alignItems: 'center',
 });
-globalStyle(`${modalHeaderWrapper} > p:last-of-type`, {
+globalStyle(`${authHeaderWrapper} > p:last-of-type`, {
   fontSize: cssVar('fontH4'),
   fontWeight: 600,
   lineHeight: '28px',
 });
+
+export const authContent = style({
+  fontSize: cssVar('fontBase'),
+  lineHeight: cssVar('fontH3'),
+  flexGrow: 1,
+});
+
+globalStyle(`${authContent} > *:not(:last-child)`, {
+  marginBottom: '20px',
+});
+
 export const authInputWrapper = style({
-  paddingBottom: '30px',
   position: 'relative',
   selectors: {
-    '&.without-hint': {
-      paddingBottom: '20px',
+    '&.with-hint': {
+      marginBottom: '8px',
     },
   },
 });
+
+export const authFooter = style({});
+
+globalStyle(`${authFooter} > *:not(:last-child)`, {
+  marginBottom: '20px',
+});
+
 globalStyle(`${authInputWrapper} label`, {
   display: 'block',
   color: cssVar('textSecondaryColor'),
@@ -38,109 +66,17 @@ globalStyle(`${authInputWrapper} label`, {
   fontWeight: 600,
   lineHeight: '22px',
 });
-export const formHint = style({
-  fontSize: cssVar('fontSm'),
-  position: 'absolute',
-  bottom: '4px',
-  height: '22px',
-  left: 0,
-  lineHeight: '22px',
-  selectors: {
-    '&.error': {
-      color: cssVar('errorColor'),
-    },
-    '&.warning': {
-      color: cssVar('warningColor'),
-    },
-  },
-});
-const rotate = keyframes({
-  '0%': {
-    transform: 'rotate(0deg)',
-  },
-  '50%': {
-    transform: 'rotate(180deg)',
-  },
-  '100%': {
-    transform: 'rotate(360deg)',
-  },
-});
-export const loading = style({
-  width: '15px',
-  height: '15px',
-  position: 'relative',
-  borderRadius: '50%',
-  overflow: 'hidden',
-  backgroundColor: cssVar('borderColor'),
-  selectors: {
-    '&::after': {
-      content: '""',
-      width: '12px',
-      height: '12px',
-      position: 'absolute',
-      left: '0',
-      right: '0',
-      top: '0',
-      bottom: '0',
-      margin: 'auto',
-      backgroundColor: '#fff',
-      zIndex: 2,
-      borderRadius: '50%',
-    },
-    '&::before': {
-      content: '""',
-      width: '20px',
-      height: '20px',
-      backgroundColor: cssVar('blue'),
-      position: 'absolute',
-      left: '50%',
-      bottom: '50%',
-      zIndex: '1',
-      transformOrigin: 'left bottom',
-      animation: `${rotate} 1.5s infinite linear`,
-    },
-  },
-});
-export const authContent = style({
-  fontSize: cssVar('fontBase'),
-  lineHeight: cssVar('fontH3'),
-  marginTop: '30px',
+
+export const authInputError = style({
+  color: cssVar('errorColor'),
+  fontSize: cssVar('fontXs'),
+  lineHeight: '20px',
 });
+
 globalStyle(`${authContent} a`, {
   color: cssVar('linkColor'),
 });
-export const authCodeContainer = style({
-  paddingBottom: '40px',
-  position: 'relative',
-});
-export const authCodeWrapper = style({
-  display: 'flex',
-  justifyContent: 'space-between',
-  alignItems: 'center',
-});
-export const authCodeErrorMessage = style({
-  color: cssVar('errorColor'),
-  fontSize: cssVar('fontSm'),
-  textAlign: 'center',
-  lineHeight: '1.5',
-  position: 'absolute',
-  left: 0,
-  right: 0,
-  bottom: 5,
-  margin: 'auto',
-});
-export const resendButtonWrapper = style({
-  height: 32,
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center',
-  marginTop: 30,
-});
-globalStyle(`${resendButtonWrapper} .resend-code-hint`, {
-  fontWeight: 600,
-  fontSize: cssVar('fontSm'),
-  marginRight: 8,
-});
+
 export const authPageContainer = style({
   height: '100vh',
   width: '100vw',

packages/frontend/component/src/type.d.ts

@@ -7,3 +7,8 @@ declare module '*.png' {
   const src: string;
   export default src;
 }
+
+declare module '*.inline.svg' {
+  const src: string;
+  export default src;
+}