fix(core): signIn page style (#6582)

This commit is contained in:
JimmFly
2024-04-16 12:56:12 +00:00
parent 3d15e8353b
commit f6fcbd8ea9
3 changed files with 56 additions and 59 deletions

View File

@@ -30,37 +30,35 @@ export const NoPermissionOrNotFound = ({
return ( return (
<AffineOtherPageLayout> <AffineOtherPageLayout>
<div className={notFoundPageContainer} data-testid="not-found"> <div className={notFoundPageContainer} data-testid="not-found">
<div> {user ? (
{user ? ( <>
<> <div className={wrapper}>
<div className={wrapper}> <NotFoundPattern />
<NotFoundPattern /> </div>
</div> <p className={wrapper}>{t['404.hint']()}</p>
<p className={wrapper}>{t['404.hint']()}</p> <div className={wrapper}>
<div className={wrapper}> <Button
<Button type="primary"
type="primary" size="extraLarge"
size="extraLarge" onClick={onBack}
onClick={onBack} className={largeButtonEffect}
className={largeButtonEffect} >
> {t['404.back']()}
{t['404.back']()} </Button>
</Button> </div>
</div> <div className={wrapper}>
<div className={wrapper}> <Avatar url={user.avatarUrl ?? user.image} name={user.name} />
<Avatar url={user.avatarUrl ?? user.image} name={user.name} /> <span style={{ margin: '0 12px' }}>{user.email}</span>
<span style={{ margin: '0 12px' }}>{user.email}</span> <Tooltip content={t['404.signOut']()}>
<Tooltip content={t['404.signOut']()}> <IconButton onClick={onSignOut}>
<IconButton onClick={onSignOut}> <SignOutIcon />
<SignOutIcon /> </IconButton>
</IconButton> </Tooltip>
</Tooltip> </div>
</div> </>
</> ) : (
) : ( signInComponent
signInComponent )}
)}
</div>
</div> </div>
</AffineOtherPageLayout> </AffineOtherPageLayout>
); );
@@ -76,34 +74,32 @@ export const NotFoundPage = ({
return ( return (
<AffineOtherPageLayout> <AffineOtherPageLayout>
<div className={notFoundPageContainer} data-testid="not-found"> <div className={notFoundPageContainer} data-testid="not-found">
<div> <div className={wrapper}>
<div className={wrapper}> <NotFoundPattern />
<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> </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> </div>
</AffineOtherPageLayout> </AffineOtherPageLayout>
); );

View File

@@ -5,6 +5,7 @@ export const notFoundPageContainer = style({
color: cssVar('textPrimaryColor'), color: cssVar('textPrimaryColor'),
height: '100vh', height: '100vh',
display: 'flex', display: 'flex',
flexDirection: 'column',
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
width: '100%', width: '100%',

View File

@@ -92,7 +92,7 @@ export const SignIn = () => {
return ( return (
<SignInPageContainer> <SignInPageContainer>
<div style={{ maxWidth: '400px' }}> <div style={{ maxWidth: '400px', width: '100%' }}>
<AuthPanel <AuthPanel
state={state} state={state}
email={email} email={email}