From f4e0a4c7d76e94e66dd9221481edcbaa0e5fb8ba Mon Sep 17 00:00:00 2001 From: simeng-li Date: Sun, 3 Jul 2022 15:32:54 +0800 Subject: [PATCH] style(ac): refactor ac welcome page style (#1373) * style(ac): refactor ac welcome page style refacrot ac welcome page style * style(ac): branding button update branding button update * style(ac): update style update style --- packages/console/.parcelrc | 2 +- .../console/src/assets/icons/snowflake.svg | 5 + .../console/src/assets/icons/welcome-dark.svg | 257 ++++++++++++++++++ packages/console/src/assets/icons/welcome.svg | 255 +++++++++++++++++ .../src/assets/images/welcome-dark.svg | 71 ----- .../console/src/assets/images/welcome.svg | 71 ----- .../src/components/Button/index.module.scss | 21 ++ .../console/src/components/Button/index.tsx | 2 +- .../src/pages/Welcome/index.module.scss | 52 +++- packages/console/src/pages/Welcome/index.tsx | 31 +-- 10 files changed, 593 insertions(+), 174 deletions(-) create mode 100644 packages/console/src/assets/icons/snowflake.svg create mode 100644 packages/console/src/assets/icons/welcome-dark.svg create mode 100644 packages/console/src/assets/icons/welcome.svg delete mode 100644 packages/console/src/assets/images/welcome-dark.svg delete mode 100644 packages/console/src/assets/images/welcome.svg diff --git a/packages/console/.parcelrc b/packages/console/.parcelrc index e2736c9c9..d2bd2766a 100644 --- a/packages/console/.parcelrc +++ b/packages/console/.parcelrc @@ -1,7 +1,7 @@ { "extends": "@parcel/config-default", "transformers": { - "*.svg": [ + "**/assets/images/*.svg": [ "@parcel/transformer-svg-react" ] } diff --git a/packages/console/src/assets/icons/snowflake.svg b/packages/console/src/assets/icons/snowflake.svg new file mode 100644 index 000000000..ec21bc8e2 --- /dev/null +++ b/packages/console/src/assets/icons/snowflake.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/packages/console/src/assets/icons/welcome-dark.svg b/packages/console/src/assets/icons/welcome-dark.svg new file mode 100644 index 000000000..3269c76c6 --- /dev/null +++ b/packages/console/src/assets/icons/welcome-dark.svg @@ -0,0 +1,257 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/console/src/assets/icons/welcome.svg b/packages/console/src/assets/icons/welcome.svg new file mode 100644 index 000000000..e54fa95f0 --- /dev/null +++ b/packages/console/src/assets/icons/welcome.svg @@ -0,0 +1,255 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/console/src/assets/images/welcome-dark.svg b/packages/console/src/assets/images/welcome-dark.svg deleted file mode 100644 index 1c6ca17e3..000000000 --- a/packages/console/src/assets/images/welcome-dark.svg +++ /dev/null @@ -1,71 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/packages/console/src/assets/images/welcome.svg b/packages/console/src/assets/images/welcome.svg deleted file mode 100644 index e8dead27b..000000000 --- a/packages/console/src/assets/images/welcome.svg +++ /dev/null @@ -1,71 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/packages/console/src/components/Button/index.module.scss b/packages/console/src/components/Button/index.module.scss index 28dbd955c..2269f8b02 100644 --- a/packages/console/src/components/Button/index.module.scss +++ b/packages/console/src/components/Button/index.module.scss @@ -101,6 +101,27 @@ } } + &.branding { + background: linear-gradient(90deg, #5d34f2 32%, #bd31ff 102%); + color: var(--color-on-primary); + + &:focus-visible { + outline: 3px solid var(--color-focused-variant); + } + + &: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%); + } + + &: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%); + } + } + &.primary { background: var(--color-primary); color: var(--color-on-primary); diff --git a/packages/console/src/components/Button/index.tsx b/packages/console/src/components/Button/index.tsx index db0765ec7..c2718b710 100644 --- a/packages/console/src/components/Button/index.tsx +++ b/packages/console/src/components/Button/index.tsx @@ -8,7 +8,7 @@ import { Ring as Spinner } from '@/components/Spinner'; import DangerousRaw from '../DangerousRaw'; import * as styles from './index.module.scss'; -export type ButtonType = 'primary' | 'danger' | 'outline' | 'plain' | 'default'; +export type ButtonType = 'primary' | 'danger' | 'outline' | 'plain' | 'default' | 'branding'; type BaseProps = Omit, 'type' | 'size' | 'title'> & { htmlType?: 'button' | 'submit' | 'reset'; diff --git a/packages/console/src/pages/Welcome/index.module.scss b/packages/console/src/pages/Welcome/index.module.scss index a39364718..a0923609b 100644 --- a/packages/console/src/pages/Welcome/index.module.scss +++ b/packages/console/src/pages/Welcome/index.module.scss @@ -1,12 +1,34 @@ @use '@/scss/underscore' as _; - .container { - position: fixed; - inset: 0; background-color: var(--color-surface-1); display: flex; + height: 100vh; flex-direction: column; + min-width: 1280px; + + &.light { + background-image: url('../../assets/icons/welcome.svg'); + background-position: right 0 bottom 40px; + background-repeat: no-repeat; + } + + &.dark { + 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; + } + } } .header { @@ -21,28 +43,30 @@ main { flex: 1; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - width: 400px; - margin: 0 auto; +} + +.content { + position: absolute; + top: 25%; + left: 8.333%; + width: 585px; } .title { - font: var(--font-headline-medium); + font-weight: 600; + font-size: 57px; + line-height: 64px; + letter-spacing: -0.25px; color: var(--color-text); - text-align: center; margin: _.unit(2) 0 _.unit(3); } .description { font: var(--font-body-large); - color: var(--color-neutral-variant-30); - text-align: center; + color: var(--color-caption); margin-bottom: _.unit(8); } .button { - width: 100%; + width: 400px; } diff --git a/packages/console/src/pages/Welcome/index.tsx b/packages/console/src/pages/Welcome/index.tsx index e33715c65..2fc796bde 100644 --- a/packages/console/src/pages/Welcome/index.tsx +++ b/packages/console/src/pages/Welcome/index.tsx @@ -1,11 +1,9 @@ import { LogtoClientError, useLogto } from '@logto/react'; -import { AppearanceMode } from '@logto/schemas'; +import classNames from 'classnames'; import React, { useEffect } from 'react'; import { useTranslation } from 'react-i18next'; import { useNavigate, useHref } from 'react-router-dom'; -import WelcomeDark from '@/assets/images/welcome-dark.svg'; -import WelcomeIcon from '@/assets/images/welcome.svg'; import AppError from '@/components/AppError'; import Button from '@/components/Button'; import SessionExpired from '@/components/SessionExpired'; @@ -37,23 +35,24 @@ const Welcome = () => { } return ( -
+
- {theme === AppearanceMode.LightMode ? : } -
{t('welcome.title')}
-
{t('welcome.description')}
-
);