Infrastructure/logto
0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2025-01-06 20:40:08 -05:00
Code Issues Activity

Merge pull request #2385 from logto-io/simeng-log-4566-web-space-size-of-pages

Browse source 
style(ui): layout styling updates
This commit is contained in:
simeng-li 2022-11-10 16:12:26 +08:00 committed by GitHub
commit 55ca9e5a92
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
17 changed files with 112 additions and 76 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
packages/ui/src/components/BrandingHeader/index.module.scss
View file

@ -1,6 +1,6 @@
@use '@/scss/underscore' as _; @use '@/scss/underscore' as _;
$logo-height: 60px; $logo-height: 50px;
.container { .container {
width: 100%; width: 100%;
@ -36,12 +36,8 @@ $logo-height: 60px;
} }
:global(body.desktop) { :global(body.desktop) {
.container {
min-height: 96px;
}
.logo:not(:last-child) { .logo:not(:last-child) {
margin-bottom: _.unit(4); margin-bottom: _.unit(3);
} }
.headline { .headline {

3
packages/ui/src/components/Input/index.module.scss
View file

@ -56,7 +56,8 @@
} }
.errorMessage { .errorMessage {
margin-top: _.unit(2); margin-left: _.unit(0.5);
margin-top: _.unit(1);
} }
:global(body.desktop) { :global(body.desktop) {

3
packages/ui/src/components/Passcode/index.module.scss
View file

@ -27,7 +27,8 @@
} }
.passcode + .errorMessage { .passcode + .errorMessage {
margin-top: _.unit(2); margin-left: _.unit(0.5);
margin-top: _.unit(1);
} }
:global(body.desktop) { :global(body.desktop) {

14
packages/ui/src/components/SecondaryPageWrapper/index.module.scss
View file

@ -9,8 +9,12 @@
margin-top: _.unit(2); margin-top: _.unit(2);
} }
.description { .header {
margin-bottom: _.unit(6); margin-bottom: _.unit(6);
}
.description {
margin-top: _.unit(2);
@include _.text-hint; @include _.text-hint;
} }
@ -21,7 +25,6 @@
.title { .title {
@include _.title; @include _.title;
margin-bottom: _.unit(6);
} }
} }
@ -30,8 +33,11 @@
margin-top: _.unit(12); margin-top: _.unit(12);
} }
.title { .header {
@include _.title_desktop;
margin-bottom: _.unit(4); margin-bottom: _.unit(4);
} }
.title {
@include _.title_desktop;
}
} }

11
packages/ui/src/components/SecondaryPageWrapper/index.tsx
View file

@ -26,10 +26,13 @@ const SecondaryPageWrapper = ({
<div className={styles.wrapper}> <div className={styles.wrapper}>
<NavBar /> <NavBar />
<div className={styles.container}> <div className={styles.container}>
{title && <div className={styles.title}>{t(title, titleProps)}</div>} <div className={styles.header}>
{description && ( {title && <div className={styles.title}>{t(title, titleProps)}</div>}
<div className={styles.description}>{t(description, descriptionProps)}</div> {description && (
)} <div className={styles.description}>{t(description, descriptionProps)}</div>
)}
</div>
{children} {children}
</div> </div>
</div> </div>

7
packages/ui/src/containers/EmailForm/index.module.scss
View file

@ -9,7 +9,8 @@
.inputField, .inputField,
.terms, .terms,
.switch { .switch,
.formErrors {
margin-bottom: _.unit(4); margin-bottom: _.unit(4);
} }
@ -19,7 +20,7 @@
} }
.formErrors { .formErrors {
margin-top: _.unit(-2); margin-left: _.unit(0.5);
margin-bottom: _.unit(4); margin-top: _.unit(-3);
} }
} }

17
packages/ui/src/containers/EmailPassword/index.module.scss
View file

@ -9,17 +9,28 @@
.inputField, .inputField,
.link, .link,
.terms { .terms,
.formErrors {
margin-bottom: _.unit(4); margin-bottom: _.unit(4);
} }
.link { .link {
margin-top: _.unit(-1);
width: auto; width: auto;
align-self: start; align-self: start;
} }
.formErrors { .formErrors {
margin-top: _.unit(-2); margin-top: _.unit(-3);
margin-bottom: _.unit(4); margin-left: _.unit(0.5);
}
}
:global(.desktop) {
.form {
.link {
margin-top: _.unit(-2);
}
} }
} }

4
packages/ui/src/containers/EmailPassword/index.tsx
View file

@ -89,6 +89,8 @@ const EmailPassword = ({ className, autoFocus }: Props) => {
{...register('password', (value) => requiredValidation('password', value))} {...register('password', (value) => requiredValidation('password', value))}
/> />
{errorMessage && <ErrorMessage className={styles.formErrors}>{errorMessage}</ErrorMessage>}
{isForgotPasswordEnabled && ( {isForgotPasswordEnabled && (
<ForgotPasswordLink <ForgotPasswordLink
className={styles.link} className={styles.link}
@ -96,8 +98,6 @@ const EmailPassword = ({ className, autoFocus }: Props) => {
/> />
)} )}
{errorMessage && <ErrorMessage className={styles.formErrors}>{errorMessage}</ErrorMessage>}
<TermsOfUse className={styles.terms} /> <TermsOfUse className={styles.terms} />
<Button title="action.sign_in" onClick={async () => onSubmitHandler()} /> <Button title="action.sign_in" onClick={async () => onSubmitHandler()} />

19
packages/ui/src/containers/PasswordSignInForm/index.module.scss
View file

@ -9,7 +9,8 @@
.inputField, .inputField,
.link, .link,
.switch { .switch,
.formErrors {
margin-bottom: _.unit(4); margin-bottom: _.unit(4);
} }
@ -19,8 +20,20 @@
width: auto; width: auto;
} }
.link {
margin-top: _.unit(-1);
}
.formErrors { .formErrors {
margin-top: _.unit(-2); margin-left: _.unit(0.5);
margin-bottom: _.unit(4); margin-top: _.unit(-3);
}
}
:global(.desktop) {
.form {
.link {
margin-top: _.unit(-2);
}
} }
} }

7
packages/ui/src/containers/PhoneForm/index.module.scss
View file

@ -9,7 +9,8 @@
.inputField, .inputField,
.terms, .terms,
.switch { .switch,
.formErrors {
margin-bottom: _.unit(4); margin-bottom: _.unit(4);
} }
@ -19,7 +20,7 @@
} }
.formErrors { .formErrors {
margin-top: _.unit(-2); margin-left: _.unit(0.5);
margin-bottom: _.unit(4); margin-top: _.unit(-3);
} }
} }

16
packages/ui/src/containers/PhonePassword/index.module.scss
View file

@ -9,17 +9,27 @@
.inputField, .inputField,
.link, .link,
.terms { .terms,
.formErrors {
margin-bottom: _.unit(4); margin-bottom: _.unit(4);
} }
.link { .link {
margin-top: _.unit(-1);
align-self: start; align-self: start;
width: auto; width: auto;
} }
.formErrors { .formErrors {
margin-top: _.unit(-2); margin-top: _.unit(-3);
margin-bottom: _.unit(4); margin-left: _.unit(0.5);
}
}
:global(.desktop) {
.form {
.link {
margin-top: _.unit(-2);
}
} }
} }

7
packages/ui/src/containers/SetPassword/index.module.scss
View file

@ -7,12 +7,13 @@
width: 100%; width: 100%;
} }
.inputField { .inputField,
.formErrors {
margin-bottom: _.unit(4); margin-bottom: _.unit(4);
} }
.formErrors { .formErrors {
margin-top: _.unit(-2); margin-left: _.unit(0.5);
margin-bottom: _.unit(4); margin-top: _.unit(-3);
} }
} }

15
packages/ui/src/containers/UsernameSignIn/index.module.scss
View file

@ -9,17 +9,26 @@
.inputField, .inputField,
.link, .link,
.terms { .terms,
.formErrors {
margin-bottom: _.unit(4); margin-bottom: _.unit(4);
} }
.link { .link {
margin-top: _.unit(-1);
align-self: start; align-self: start;
width: auto; width: auto;
} }
.formErrors { .formErrors {
margin-top: _.unit(-2); margin-top: _.unit(-3);
margin-bottom: _.unit(4); }
}
:global(.desktop) {
.form {
.link {
margin-top: _.unit(-2);
}
} }
} }

22
packages/ui/src/pages/Register/index.module.scss
View file

@ -1,15 +1,13 @@
@use '@/scss/underscore' as _; @use '@/scss/underscore' as _;
.main { .main,
.divider,
.otherMethods {
margin-bottom: _.unit(4); margin-bottom: _.unit(4);
} }
.otherMethodsLink {
margin-bottom: _.unit(6);
}
.createAccount { .createAccount {
margin-top: _.unit(6); margin-top: _.unit(2);
text-align: center; text-align: center;
} }
@ -19,25 +17,13 @@
:global(body.mobile) { :global(body.mobile) {
.divider {
margin-bottom: _.unit(5);
}
.createAccount { .createAccount {
padding-bottom: env(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom);
} }
} }
:global(body.desktop) { :global(body.desktop) {
.main {
margin-bottom: _.unit(6);
}
.placeHolder { .placeHolder {
flex: 0; flex: 0;
} }
.divider {
margin-bottom: _.unit(4);
}
} }

7
packages/ui/src/pages/Register/index.tsx
View file

@ -29,6 +29,7 @@ const Register = () => {
// Other create account methods // Other create account methods
otherMethods.length > 0 && ( otherMethods.length > 0 && (
<OtherMethodsLink <OtherMethodsLink
className={styles.otherMethods}
methods={otherMethods} methods={otherMethods}
template="register_with" template="register_with"
flow={UserFlow.register} flow={UserFlow.register}
@ -40,7 +41,11 @@ const Register = () => {
signUpMethods.length > 0 && socialConnectors.length > 0 && ( signUpMethods.length > 0 && socialConnectors.length > 0 && (
<> <>
<Divider label="description.or" className={styles.divider} /> <Divider label="description.or" className={styles.divider} />
<SocialSignInList isCollapseEnabled socialConnectors={socialConnectors} /> <SocialSignInList
isCollapseEnabled
socialConnectors={socialConnectors}
className={styles.main}
/>
</> </>
) )
} }

21
packages/ui/src/pages/SignIn/index.module.scss
View file

@ -1,15 +1,14 @@
@use '@/scss/underscore' as _; @use '@/scss/underscore' as _;
.main { .main,
.otherMethods,
.divider {
margin-bottom: _.unit(4); margin-bottom: _.unit(4);
} }
.otherMethodsLink {
margin-bottom: _.unit(6);
}
.createAccount { .createAccount {
margin-top: _.unit(6); margin-top: _.unit(2);
text-align: center; text-align: center;
} }
@ -19,25 +18,13 @@
:global(body.mobile) { :global(body.mobile) {
.divider {
margin-bottom: _.unit(5);
}
.createAccount { .createAccount {
padding-bottom: env(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom);
} }
} }
:global(body.desktop) { :global(body.desktop) {
.main {
margin-bottom: _.unit(6);
}
.placeHolder { .placeHolder {
flex: 0; flex: 0;
} }
.divider {
margin-bottom: _.unit(4);
}
} }

7
packages/ui/src/pages/SignIn/index.tsx
View file

@ -29,6 +29,7 @@ const SignIn = () => {
// Other sign-in methods // Other sign-in methods
otherMethods.length > 0 && ( otherMethods.length > 0 && (
<OtherMethodsLink <OtherMethodsLink
className={styles.otherMethods}
methods={otherMethods} methods={otherMethods}
template="sign_in_with" template="sign_in_with"
flow={UserFlow.signIn} flow={UserFlow.signIn}
@ -41,7 +42,11 @@ const SignIn = () => {
signInMethods.length > 0 && socialConnectors.length > 0 && ( signInMethods.length > 0 && socialConnectors.length > 0 && (
<> <>
<Divider label="description.or" className={styles.divider} /> <Divider label="description.or" className={styles.divider} />
<SocialSignInList isCollapseEnabled socialConnectors={socialConnectors} /> <SocialSignInList
isCollapseEnabled
socialConnectors={socialConnectors}
className={styles.main}
/>
</> </>
) )
} }