Infrastructure/logto
0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2025-01-27 21:39:16 -05:00
Code Issues Activity

style(ui): ui & console style update (#1405)

Browse source 
* style(ui): ui style fix

ui style fix

* style(console): update welcome page style

update welcome page style
This commit is contained in:
simeng-li 2022-07-04 18:57:39 +08:00 • committed by GitHub
parent d649755c3e
commit acd1568c49
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 69 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
packages/console/src/components/Button/index.module.scss
View file

@ -106,19 +106,21 @@
color: var(--color-on-primary);
&:focus-visible {
outline: 3px solid var(--color-focused-variant);
background:
linear-gradient(0deg, rgba(0, 0, 0, 20%), rgba(0, 0, 0, 20%)),
linear-gradient(90deg, #5d34f2 32%, #bd31ff 102%);
}
&:active {
background:
linear-gradient(0deg, rgba(0, 0, 0, 20%), rgba(0, 0, 0, 20%)),
linear-gradient(69.73deg, #492ef3 5.52%, #cf69ff 94.22%);
linear-gradient(90deg, #5d34f2 32%, #bd31ff 102%);
}
&:not(:disabled):not(:active):hover {
background:
linear-gradient(0deg, rgba(0, 0, 0, 20%), rgba(0, 0, 0, 20%)),
linear-gradient(69.73deg, #492ef3 5.52%, #cf69ff 94.22%);
linear-gradient(0deg, rgba(255, 255, 255, 20%), rgba(255, 255, 255, 20%)),
linear-gradient(90deg, #5d34f2 32%, #bd31ff 102%);
}
}

20
packages/console/src/pages/Welcome/index.module.scss
View file

@ -17,17 +17,17 @@
background-image: url('../../assets/icons/welcome-dark.svg');
background-position: right 0 bottom 40px;
background-repeat: no-repeat;
}
&::after {
content: '';
position: absolute;
top: 0;
right: 92px;
width: 273px;
height: 221px;
background: url('../../assets/icons/snowflake.svg') no-repeat;
background-position: center;
}
&::after {
content: '';
position: absolute;
top: 0;
right: 92px;
width: 273px;
height: 221px;
background: url('../../assets/icons/snowflake.svg') no-repeat;
background-position: center;
}
}

16
packages/ui/src/components/Button/SocialIconButton.module.scss
View file

@ -8,10 +8,10 @@
width: 40px;
height: 40px;
cursor: pointer;
}
&.inverse {
background: #fff;
}
.inverse {
background: var(--color-inverse-social-bg);
}
.icon {
@ -31,4 +31,14 @@
background: var(--color-hover);
}
}
.inverse {
&:active {
background: var(--color-inverse-social-pressed);
}
&:hover:not(:active) {
background: var(--color-inverse-social-hover);
}
}
}

10
packages/ui/src/containers/SocialSignIn/SocialSignInIconList/index.tsx
View file

@ -32,11 +32,19 @@ const SocialSignInIconList = ({
{connectors.map((connector) => {
const { id, target, logo, logoDark } = connector;
const getLogo = () => {
if (theme === 'dark') {
return (!isAppleConnector(target) && logoDark) || logo;
}
return (isAppleConnector(target) && logoDark) || logo;
};
return (
<SocialIconButton
key={id}
className={styles.socialButton}
logo={(theme === 'dark' && !isAppleConnector(target) && logoDark) || logo}
logo={getLogo()}
target={target}
onClick={() => {
void invokeSocialSignIn(connector);

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

@ -12,10 +12,15 @@
}
.terms {
margin: _.unit(8) 0 _.unit(4);
margin: _.unit(8) 0 _.unit(4);
}
.formErrors {
margin-top: _.unit(-2);
margin-bottom: _.unit(4);
+ .terms {
margin-top: _.unit(4);
}
}
}

28
packages/ui/src/scss/_desktop.scss
View file

@ -1,13 +1,6 @@
/* Foundation */
$font-family: -apple-system,
system-ui,
'BlinkMacSystemFont',
'Segoe UI',
'Roboto',
'Helvetica Neue',
'Helvetica',
'Arial',
sans-serif;
$font-family: -apple-system, system-ui, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica Neue',
'Helvetica', 'Arial', sans-serif;
@mixin colors-light-theme {
--color-base: #e5e1ec;
@ -37,6 +30,10 @@ $font-family: -apple-system,
--color-divider: #e0e3e3;
--color-error: #ba1b1b;
--color-loading-icon: #191c1d;
--color-inverse-social-bg: #000;
--color-inverse-social-hover: rgba(0, 0, 0, 92%);
--color-inverse-social-pressed: rgba(0, 0, 0, 88%);
}
@mixin colors-dark-theme {
@ -49,7 +46,7 @@ $font-family: -apple-system,
--color-border-variant: #5f5d67;
--color-caption: #a9acac;
--color-icon: #a9acac;
--color-focused: rgba(247, 248, 248, 16%); // 16% Neutral-10
--color-focused: rgba(247, 248, 248, 16%); // 16% Neutral-10
--color-pressed: rgba(247, 248, 248, 12%); // 12% Neutral-10
--color-hover: rgba(247, 248, 248, 8%); // 8% Neutral-10
@ -60,16 +57,21 @@ $font-family: -apple-system,
--color-primary-pressed: var(--dark-pressed);
--color-primary-hover: var(--dark-hover);
--color-inverse-on-surface: #2d3132;
--color-outline: #928f9a;
--color-layer: #2a2c32;
--color-dialogue: linear-gradient(0deg, rgba(202, 190, 255, 8%), rgba(202, 190, 255, 8%)), linear-gradient(0deg, rgba(196, 199, 199, 2%), rgba(196, 199, 199, 2%)), #191c1d;
--color-dialogue:
linear-gradient(0deg, rgba(202, 190, 255, 8%), rgba(202, 190, 255, 8%)),
linear-gradient(0deg, rgba(196, 199, 199, 2%), rgba(196, 199, 199, 2%)),
#191c1d;
--color-divider: #444748;
--color-error: #dd3730;
--color-loading-icon: #f7f8f8;
}
--color-inverse-social-bg: #fff;
--color-inverse-social-hover: rgba(255, 255, 255, 92%);
--color-inverse-social-pressed: rgba(255, 255, 255, 88%);
}
@mixin colors-universal {
--color-primary-button-text: #fff;

21
packages/ui/src/scss/_mobile.scss
View file

@ -1,13 +1,6 @@
/* Foundation */
$font-family: -apple-system,
system-ui,
'BlinkMacSystemFont',
'Segoe UI',
'Roboto',
'Helvetica Neue',
'Helvetica',
'Arial',
sans-serif;
$font-family: -apple-system, system-ui, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica Neue',
'Helvetica', 'Arial', sans-serif;
@mixin colors-light-theme {
--color-base: #fff;
@ -25,6 +18,8 @@ $font-family: -apple-system,
--color-error: #ba1b1b;
--color-dialogue: #fff;
--color-loading-icon: #191c1d;
--color-inverse-social-bg: #000;
}
@mixin colors-dark-theme {
@ -41,10 +36,14 @@ $font-family: -apple-system,
--color-primary: var(--dark-primary-color);
--color-layer: #2a2c32;
--color-error: #dd3730;
--color-dialogue: linear-gradient(0deg, rgba(202, 190, 255, 8%), rgba(202, 190, 255, 8%)), linear-gradient(0deg, rgba(196, 199, 199, 2%), rgba(196, 199, 199, 2%)), #191c1d;
--color-dialogue:
linear-gradient(0deg, rgba(202, 190, 255, 8%), rgba(202, 190, 255, 8%)),
linear-gradient(0deg, rgba(196, 199, 199, 2%), rgba(196, 199, 199, 2%)),
#191c1d;
--color-loading-icon: #f7f8f8;
}
--color-inverse-social-bg: #fff;
}
@mixin colors-universal {
--color-primary-button-text: #fff;