From f6fcbd8ea9c9a60118b0fb03e669f751cea78f8b Mon Sep 17 00:00:00 2001
From: JimmFly <447268514@qq.com>
Date: Tue, 16 Apr 2024 12:56:12 +0000
Subject: [PATCH] fix(core): signIn page style (#6582)

---
 .../not-found-page/not-found-page.tsx         | 112 +++++++++---------
 .../components/not-found-page/styles.css.ts   |   1 +
 packages/frontend/core/src/pages/sign-in.tsx  |   2 +-
 3 files changed, 56 insertions(+), 59 deletions(-)

diff --git a/packages/frontend/component/src/components/not-found-page/not-found-page.tsx b/packages/frontend/component/src/components/not-found-page/not-found-page.tsx
index 1646f05432..6e2fd39b47 100644
--- a/packages/frontend/component/src/components/not-found-page/not-found-page.tsx
+++ b/packages/frontend/component/src/components/not-found-page/not-found-page.tsx
@@ -30,37 +30,35 @@ export const NoPermissionOrNotFound = ({
   return (
     <AffineOtherPageLayout>
       <div className={notFoundPageContainer} data-testid="not-found">
-        <div>
-          {user ? (
-            <>
-              <div className={wrapper}>
-                <NotFoundPattern />
-              </div>
-              <p className={wrapper}>{t['404.hint']()}</p>
-              <div className={wrapper}>
-                <Button
-                  type="primary"
-                  size="extraLarge"
-                  onClick={onBack}
-                  className={largeButtonEffect}
-                >
-                  {t['404.back']()}
-                </Button>
-              </div>
-              <div className={wrapper}>
-                <Avatar url={user.avatarUrl ?? user.image} name={user.name} />
-                <span style={{ margin: '0 12px' }}>{user.email}</span>
-                <Tooltip content={t['404.signOut']()}>
-                  <IconButton onClick={onSignOut}>
-                    <SignOutIcon />
-                  </IconButton>
-                </Tooltip>
-              </div>
-            </>
-          ) : (
-            signInComponent
-          )}
-        </div>
+        {user ? (
+          <>
+            <div className={wrapper}>
+              <NotFoundPattern />
+            </div>
+            <p className={wrapper}>{t['404.hint']()}</p>
+            <div className={wrapper}>
+              <Button
+                type="primary"
+                size="extraLarge"
+                onClick={onBack}
+                className={largeButtonEffect}
+              >
+                {t['404.back']()}
+              </Button>
+            </div>
+            <div className={wrapper}>
+              <Avatar url={user.avatarUrl ?? user.image} name={user.name} />
+              <span style={{ margin: '0 12px' }}>{user.email}</span>
+              <Tooltip content={t['404.signOut']()}>
+                <IconButton onClick={onSignOut}>
+                  <SignOutIcon />
+                </IconButton>
+              </Tooltip>
+            </div>
+          </>
+        ) : (
+          signInComponent
+        )}
       </div>
     </AffineOtherPageLayout>
   );
@@ -76,34 +74,32 @@ export const NotFoundPage = ({
   return (
     <AffineOtherPageLayout>
       <div className={notFoundPageContainer} data-testid="not-found">
-        <div>
-          <div className={wrapper}>
-            <NotFoundPattern />
-          </div>
-          <p className={wrapper}>{t['404.hint']()}</p>
-          <div className={wrapper}>
-            <Button
-              type="primary"
-              size="extraLarge"
-              onClick={onBack}
-              className={largeButtonEffect}
-            >
-              {t['404.back']()}
-            </Button>
-          </div>
-
-          {user ? (
-            <div className={wrapper}>
-              <Avatar url={user.avatarUrl ?? user.image} name={user.name} />
-              <span style={{ margin: '0 12px' }}>{user.email}</span>
-              <Tooltip content={t['404.signOut']()}>
-                <IconButton onClick={onSignOut}>
-                  <SignOutIcon />
-                </IconButton>
-              </Tooltip>
-            </div>
-          ) : null}
+        <div className={wrapper}>
+          <NotFoundPattern />
         </div>
+        <p className={wrapper}>{t['404.hint']()}</p>
+        <div className={wrapper}>
+          <Button
+            type="primary"
+            size="extraLarge"
+            onClick={onBack}
+            className={largeButtonEffect}
+          >
+            {t['404.back']()}
+          </Button>
+        </div>
+
+        {user ? (
+          <div className={wrapper}>
+            <Avatar url={user.avatarUrl ?? user.image} name={user.name} />
+            <span style={{ margin: '0 12px' }}>{user.email}</span>
+            <Tooltip content={t['404.signOut']()}>
+              <IconButton onClick={onSignOut}>
+                <SignOutIcon />
+              </IconButton>
+            </Tooltip>
+          </div>
+        ) : null}
       </div>
     </AffineOtherPageLayout>
   );
diff --git a/packages/frontend/component/src/components/not-found-page/styles.css.ts b/packages/frontend/component/src/components/not-found-page/styles.css.ts
index 825d6d6909..2b88791db2 100644
--- a/packages/frontend/component/src/components/not-found-page/styles.css.ts
+++ b/packages/frontend/component/src/components/not-found-page/styles.css.ts
@@ -5,6 +5,7 @@ export const notFoundPageContainer = style({
   color: cssVar('textPrimaryColor'),
   height: '100vh',
   display: 'flex',
+  flexDirection: 'column',
   alignItems: 'center',
   justifyContent: 'center',
   width: '100%',
diff --git a/packages/frontend/core/src/pages/sign-in.tsx b/packages/frontend/core/src/pages/sign-in.tsx
index bae4df966d..405c9f2831 100644
--- a/packages/frontend/core/src/pages/sign-in.tsx
+++ b/packages/frontend/core/src/pages/sign-in.tsx
@@ -92,7 +92,7 @@ export const SignIn = () => {
 
   return (
     <SignInPageContainer>
-      <div style={{ maxWidth: '400px' }}>
+      <div style={{ maxWidth: '400px', width: '100%' }}>
         <AuthPanel
           state={state}
           email={email}