refactor(core): auth ui (#10101)

close AF-2202 AF-2203

packages/frontend/core/src/desktop/dialogs/change-password/index.tsx

@@ -1,8 +1,8 @@
-import { Button, Modal, notify, Wrapper } from '@affine/component';
+import { Button, Modal, notify } from '@affine/component';
 import {
   AuthContent,
+  AuthHeader,
   AuthInput,
-  ModalHeader,
 } from '@affine/component/auth-components';
 import { useAsyncCallback } from '@affine/core/components/hooks/affine-async-hooks';
 import {
@@ -108,7 +108,7 @@ export const ChangePasswordDialog = ({
         style: { padding: '44px 40px 20px' },
       }}
     >
-      <ModalHeader
+      <AuthHeader
         title={serverName}
         subTitle={
           hasPassword
@@ -117,42 +117,34 @@ export const ChangePasswordDialog = ({
         }
       />
       <AuthContent>
-        {hasPassword
-          ? t['com.affine.auth.reset.password.message']()
-          : t['com.affine.auth.set.password.message']({
-              min: String(passwordLimits.minLength),
-              max: String(passwordLimits.maxLength),
-            })}
-      </AuthContent>
-
-      <Wrapper
-        marginTop={30}
-        marginBottom={50}
-        style={{
-          position: 'relative',
-        }}
-      >
+        <p>
+          {hasPassword
+            ? t['com.affine.auth.reset.password.message']()
+            : t['com.affine.auth.set.password.message']({
+                min: String(passwordLimits.minLength),
+                max: String(passwordLimits.maxLength),
+              })}
+        </p>
         <AuthInput
           label={t['com.affine.settings.email']()}
           disabled={true}
           value={email}
         />
-      </Wrapper>
-
-      <Button
-        variant="primary"
-        size="extraLarge"
-        style={{ width: '100%' }}
-        disabled={hasSentEmail}
-        loading={loading}
-        onClick={onSendEmail}
-      >
-        {hasSentEmail
-          ? t['com.affine.auth.sent']()
-          : hasPassword
-            ? t['com.affine.auth.send.reset.password.link']()
-            : t['com.affine.auth.send.set.password.link']()}
-      </Button>
+        <Button
+          variant="primary"
+          size="extraLarge"
+          style={{ width: '100%' }}
+          disabled={hasSentEmail}
+          loading={loading}
+          onClick={onSendEmail}
+        >
+          {hasSentEmail
+            ? t['com.affine.auth.sent']()
+            : hasPassword
+              ? t['com.affine.auth.send.reset.password.link']()
+              : t['com.affine.auth.send.set.password.link']()}
+        </Button>
+      </AuthContent>
     </Modal>
   );
 };

packages/frontend/core/src/desktop/dialogs/sign-in/index.tsx

@@ -24,7 +24,7 @@ export const SignInDialog = ({
       open
       onOpenChange={() => close()}
       width={400}
-      minHeight={500}
+      height={550}
       contentOptions={{
         ['data-testid' as string]: 'auth-modal',
         style: { padding: '44px 40px 20px' },

packages/frontend/core/src/desktop/dialogs/verify-email/index.tsx

@@ -1,8 +1,8 @@
-import { Button, Modal, notify, Wrapper } from '@affine/component';
+import { Button, Modal, notify } from '@affine/component';
 import {
   AuthContent,
+  AuthHeader,
   AuthInput,
-  ModalHeader,
 } from '@affine/component/auth-components';
 import { useAsyncCallback } from '@affine/core/components/hooks/affine-async-hooks';
 import {
@@ -106,28 +106,18 @@ export const VerifyEmailDialog = ({
         style: { padding: '44px 40px 20px' },
       }}
     >
-      <ModalHeader
+      <AuthHeader
         title={serverName}
         subTitle={t['com.affine.settings.email.action.change']()}
       />
       <AuthContent>
-        {t['com.affine.auth.verify.email.message']({ email })}
-      </AuthContent>
-
-      <Wrapper
-        marginTop={30}
-        marginBottom={50}
-        style={{
-          position: 'relative',
-        }}
-      >
+        <p>{t['com.affine.auth.verify.email.message']({ email })}</p>
         <AuthInput
           label={t['com.affine.settings.email']()}
           disabled={true}
           value={email}
         />
-      </Wrapper>
-
+      </AuthContent>
       <Button
         variant="primary"
         size="extraLarge"

packages/frontend/core/src/desktop/pages/auth/sign-in.tsx

@@ -2,6 +2,7 @@ import { notify } from '@affine/component';
 import { AffineOtherPageLayout } from '@affine/component/affine-other-page-layout';
 import { SignInPageContainer } from '@affine/component/auth-components';
 import { SignInPanel } from '@affine/core/components/sign-in';
+import { SignInBackgroundArts } from '@affine/core/components/sign-in/background-arts';
 import type { AuthSessionStatus } from '@affine/core/modules/cloud/entities/session';
 import { useI18n } from '@affine/i18n';
 import { useCallback, useEffect } from 'react';
@@ -75,9 +76,8 @@ export const SignIn = ({
 export const Component = () => {
   return (
     <AffineOtherPageLayout>
-      <div style={{ padding: '0 20px' }}>
-        <SignIn />
-      </div>
+      <SignInBackgroundArts />
+      <SignIn />
     </AffineOtherPageLayout>
   );
 };