Infrastructure/logto
0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2025-04-07 23:01:25 -05:00
Code Issues Activity

fix(ui): ui design review fix (#697)

Browse source 
* fix(ui): ui restyling

ui restyling

* fix(ui): fix styling and translation
fix styling and translation

* refactor(ui): add universal primary button color

add universal primary button color
This commit is contained in:
simeng-li 2022-04-29 11:49:21 +08:00 • committed by GitHub
parent e761be6756
commit 15dd1a767e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 91 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
packages/phrases/src/locales/en.ts
View file

@ -61,7 +61,8 @@ const translation = {
},
error: {
username_password_mismatch: 'Username and password do not match.',
required: '{{field}} is required.',
username_required: 'Username is required.',
password_required: 'Password is required.',
username_exists: 'Username already exists.',
username_should_not_start_with_number: 'Username should not start with a number.',
username_valid_charset: 'Username should only contain letters, numbers, or underscore.',

3
packages/phrases/src/locales/zh-cn.ts
View file

@ -61,7 +61,8 @@ const translation = {
},
error: {
username_password_mismatch: '用户名和密码不匹配。',
required: '{{field}} 必填',
username_required: '用户名必填',
password_required: '密码必填',
username_exists: '用户名已存在。',
username_should_not_start_with_number: '用户名不能以数字开头。',
username_valid_charset: '用户名只能包含英文字母、数字或下划线。',

5
packages/ui/src/components/AppContent/index.module.scss
View file

@ -14,6 +14,7 @@ $font-family-small: 'PingFang SC', 'SF Pro Text', 'Siyuan Heiti', 'Roboto';
.universal {
--radius: 8px;
--color-primary-button-text: #fff;
}
.light {
@ -29,6 +30,7 @@ $font-family-small: 'PingFang SC', 'SF Pro Text', 'Siyuan Heiti', 'Roboto';
--color-toast: rgba(25, 28, 29, 80%);
--color-overlay: rgba(25, 28, 29, 16%);
--color-base: #fff;
--color-dialogue: #fff;
}
.dark {
@ -42,8 +44,9 @@ $font-family-small: 'PingFang SC', 'SF Pro Text', 'Siyuan Heiti', 'Roboto';
--color-layer: linear-gradient(0deg, rgba(202, 190, 255, 14%), rgba(202, 190, 255, 14%)), linear-gradient(0deg, rgba(196, 199, 199, 2%), rgba(196, 199, 199, 2%)), #191c1d;
--color-error: #dd3730;
--color-toast: rgba(247, 248, 248, 80%);
--color-overlay: rgba(247, 248, 248, 80%);
--color-overlay: rgba(25, 28, 29, 40%);
--color-base: #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;
}
.mobile {

2
packages/ui/src/components/Button/SocialLinkButton.module.scss
View file

@ -2,7 +2,7 @@
.socialButton {
border: _.border(var(--color-outline));
background: var(--color-base);
background: transparent;
color: var(--color-text);
.icon {

4
packages/ui/src/components/Button/index.module.scss
View file

@ -15,7 +15,7 @@
.primary {
border: none;
background: var(--color-primary);
color: var(--color-base);
color: var(--color-primary-button-text);
&.disabled {
background: var(--color-layer);
@ -25,7 +25,7 @@
.secondary {
border: _.border(var(--color-outline));
background: var(--color-base);
background: transparent;
color: var(--color-text);
&.disabled {

2
packages/ui/src/components/ConfirmModal/index.module.scss
View file

@ -5,7 +5,7 @@
}
.container {
background: var(--color-base);
background: var(--color-dialogue);
padding: _.unit(6) _.unit(5);
border-radius: var(--radius);
}

2
packages/ui/src/components/Drawer/index.module.scss
View file

@ -2,7 +2,7 @@
.container {
padding: _.unit(5);
background: var(--color-base);
background: var(--color-dialogue);
}
.header {

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

@ -39,6 +39,7 @@
&:-webkit-autofill {
box-shadow: 0 0 0 30px var(--color-control-background) inset;
transition: background-color 5000s ease-in-out 0s;
-webkit-text-fill-color: var(--color-text);
}
}
}

6
packages/ui/src/utils/field-validations.ts
View file

@ -1,5 +1,3 @@
import i18next from 'i18next';
import { ErrorType } from '@/components/ErrorMessage';
const usernameRegex = /^[A-Z_a-z-][\w-]*$/;
@ -7,7 +5,7 @@ const emailRegex = /^\S+@\S+\.\S+$/;
export const usernameValidation = (username: string): ErrorType | undefined => {
if (!username) {
return { code: 'required', data: { field: i18next.t('input.username') } };
return 'username_required';
}
if (/^\d/.test(username)) {
@ -21,7 +19,7 @@ export const usernameValidation = (username: string): ErrorType | undefined => {
export const passwordValidation = (password: string): ErrorType | undefined => {
if (!password) {
return { code: 'required', data: { field: i18next.t('input.password') } };
return 'password_required';
}
if (password.length < 6) {

76
pnpm-lock.yaml generated
View file

@ -7210,6 +7210,11 @@ packages:
string-width: 4.2.3
dev: true
/ansi-colors/4.1.1:
resolution: {integrity: sha512-JoX0apGbHaUJBNl6yF+p6JAFYZ666/hhCGKN5t9QFjbJQKUU/g8MNbFDbvfrgKXvI1QpZplPOnwIo99lX/AAmA==}
engines: {node: '>=6'}
dev: true
/ansi-escapes/4.3.2:
resolution: {integrity: sha512-gKXj5ALrKWQLsYG9jlTRmR/xKluxHV+Z9QEwNIgCfM1/uwPMCuzVVnh5mwTd+OuBZcwSIMbqssNWRm1lE51QaQ==}
engines: {node: '>=8'}
@ -8325,6 +8330,10 @@ packages:
resolution: {integrity: sha512-Uqbg+J445nc1TKn4FoDPS6ZZqAvEDnwrH42yo8B40JSOgSLxMZ/gt3h4nmCtPLQeXhjJJkqBx7SCY35WnIixaQ==}
dev: true
/colorette/1.4.0:
resolution: {integrity: sha512-Y2oEozpomLn7Q3HFP7dpww7AtMJplbM9lGZP6RDfHqmbeRjiwRg4n6VM6j4KLmRke85uWEI7JqF17f3pqdRA0g==}
dev: true
/colorette/2.0.16:
resolution: {integrity: sha512-hUewv7oMjCp+wkBv5Rm0v87eJhq4woh5rSR+42YSQJKecCqgIqNkZ6lAlQms/BwHPJA5NKMRlpxPRv0n8HQW6g==}
dev: true
@ -9000,6 +9009,19 @@ packages:
dependencies:
ms: 2.1.2
/debug/4.3.3_supports-color@8.1.1:
resolution: {integrity: sha512-/zxw5+vh1Tfv+4Qn7a5nsbcJKPaSvCDhojn6FEl9vupwK2VCSDtEiEtqr8DFtzYFOdz63LBkxec7DYuc2jon6Q==}
engines: {node: '>=6.0'}
peerDependencies:
supports-color: '*'
peerDependenciesMeta:
supports-color:
optional: true
dependencies:
ms: 2.1.2
supports-color: 8.1.1
dev: true
/debug/4.3.3_supports-color@9.2.2:
resolution: {integrity: sha512-/zxw5+vh1Tfv+4Qn7a5nsbcJKPaSvCDhojn6FEl9vupwK2VCSDtEiEtqr8DFtzYFOdz63LBkxec7DYuc2jon6Q==}
engines: {node: '>=6.0'}
@ -9486,6 +9508,13 @@ packages:
tapable: 2.2.1
dev: true
/enquirer/2.3.6:
resolution: {integrity: sha512-yjNnPr315/FjS4zIsUxYguYUPP2e1NK4d7E7ZOLiyYCcbFBiTMyID+2wvm2w6+pZ/odMA7cRkjhsPbltwBOrLg==}
engines: {node: '>=8.6'}
dependencies:
ansi-colors: 4.1.1
dev: true
/entities/1.1.2:
resolution: {integrity: sha512-f2LZMYl1Fzu7YSBKg+RoROelpOaNrcGmE9AZubeDfrCEia483oW4MI4VyFd5VNHIgQ/7qm1I0wUHK1eJnn2y2w==}
dev: true
@ -13131,6 +13160,26 @@ packages:
/lines-and-columns/1.2.4:
resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
/lint-staged/11.2.6:
resolution: {integrity: sha512-Vti55pUnpvPE0J9936lKl0ngVeTdSZpEdTNhASbkaWX7J5R9OEifo1INBGQuGW4zmy6OG+TcWPJ3m5yuy5Q8Tg==}
hasBin: true
dependencies:
cli-truncate: 2.1.0
colorette: 1.4.0
commander: 8.3.0
cosmiconfig: 7.0.1
debug: 4.3.3_supports-color@8.1.1
enquirer: 2.3.6
execa: 5.1.1
listr2: 3.14.0_enquirer@2.3.6
micromatch: 4.0.5
normalize-path: 3.0.0
please-upgrade-node: 3.2.0
string-argv: 0.3.1
stringify-object: 3.3.0
supports-color: 8.1.1
dev: true
/lint-staged/12.4.0:
resolution: {integrity: sha512-3X7MR0h9b7qf4iXf/1n7RlVAx+EzpAZXoCEMhVSpaBlgKDfH2ewf+QUm7BddFyq29v4dgPP+8+uYpWuSWx035A==}
engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
@ -13154,6 +13203,26 @@ packages:
- enquirer
dev: true
/listr2/3.14.0_enquirer@2.3.6:
resolution: {integrity: sha512-TyWI8G99GX9GjE54cJ+RrNMcIFBfwMPxc3XTFiAYGN4s10hWROGtOg7+O6u6LE3mNkyld7RSLE6nrKBvTfcs3g==}
engines: {node: '>=10.0.0'}
peerDependencies:
enquirer: '>= 2.3.0 < 3'
peerDependenciesMeta:
enquirer:
optional: true
dependencies:
cli-truncate: 2.1.0
colorette: 2.0.16
enquirer: 2.3.6
log-update: 4.0.0
p-map: 4.0.0
rfdc: 1.3.0
rxjs: 7.5.5
through: 2.3.8
wrap-ansi: 7.0.0
dev: true
/listr2/4.0.5:
resolution: {integrity: sha512-juGHV1doQdpNT3GSTs9IUN43QJb7KHdF9uqg7Vufs/tG9VTzpFphqF4pm/ICdAABGQxsyNn9CiYA3StkI6jpwA==}
engines: {node: '>=12'}
@ -15455,6 +15524,12 @@ packages:
find-up: 3.0.0
dev: true
/please-upgrade-node/3.2.0:
resolution: {integrity: sha512-gQR3WpIgNIKwBMVLkpMUeR3e1/E1y42bqDQZfql+kDeXd8COYfM8PQA4X6y7a8u9Ua9FHmsrrmirW2vHs45hWg==}
dependencies:
semver-compare: 1.0.0
dev: true
/pluralize/8.0.0:
resolution: {integrity: sha512-Nc3IT5yHzflTfbjgqWcCPpo7DaKy4FnpB0l/zCAW0Tc7jxAiuqSxHasntB3D7887LSrA93kDJ9IXovxJYxyLCA==}
engines: {node: '>=4'}
@ -17505,7 +17580,6 @@ packages:
/semver-compare/1.0.0:
resolution: {integrity: sha1-De4hahyUGrN+nvsXiPavxf9VN/w=}
dev: false
/semver-diff/3.1.1:
resolution: {integrity: sha512-GX0Ix/CJcHyB8c4ykpHGIAvLyOwOobtM/8d+TQkAd81/bEjgPHrfba41Vpesr7jX/t8Uh+R3EX9eAS5be+jQYg==}