diff --git a/packages/experience/src/assets/icons/default-user-avatar.svg b/packages/experience/src/assets/icons/default-user-avatar.svg new file mode 100644 index 000000000..b1b051176 --- /dev/null +++ b/packages/experience/src/assets/icons/default-user-avatar.svg @@ -0,0 +1,7 @@ + + + + + + diff --git a/packages/experience/src/pages/Consent/ScopesListCard/index.module.scss b/packages/experience/src/pages/Consent/ScopesListCard/index.module.scss index cc8d1ed9d..9eb70f13f 100644 --- a/packages/experience/src/pages/Consent/ScopesListCard/index.module.scss +++ b/packages/experience/src/pages/Consent/ScopesListCard/index.module.scss @@ -12,14 +12,20 @@ } .scopeGroup { - padding: 0 _.unit(4); + padding: 0 _.unit(2); .scopeGroupHeader { @include _.flex-row; + border-radius: _.unit(2); + padding: _.unit(2); + + &:hover { + background-color: var(--color-overlay-neutral-hover); + } } .check { - color: var(--color-success-default); + color: var(--color-success-pressed); width: 20px; height: 20px; margin-right: _.unit(2); @@ -29,7 +35,6 @@ font: var(--font-body-2); flex: 1; margin-right: _.unit(2); - padding: _.unit(2) 0; } .toggleButton { @@ -44,21 +49,10 @@ &[data-expanded='true'] { transform: rotate(180deg); } - - // increase the clickable area - &::after { - content: ''; - display: block; - position: absolute; - top: -10px; - left: -10px; - width: 40px; - height: 40px; - } } .scopesList { - padding-inline-start: _.unit(6); + padding-inline-start: _.unit(8); font: var(--font-body-3); color: var(--color-type-secondary); margin: 0; @@ -74,5 +68,6 @@ padding: _.unit(4); border-top: _.border(var(--color-line-divider)); margin-top: _.unit(2); + font: var(--font-body-3); color: var(--color-type-secondary); } diff --git a/packages/experience/src/pages/Consent/ScopesListCard/index.tsx b/packages/experience/src/pages/Consent/ScopesListCard/index.tsx index 57258f0f6..8df5df0ae 100644 --- a/packages/experience/src/pages/Consent/ScopesListCard/index.tsx +++ b/packages/experience/src/pages/Consent/ScopesListCard/index.tsx @@ -9,6 +9,7 @@ import DownArrowIcon from '@/assets/icons/arrow-down.svg'; import CheckMark from '@/assets/icons/check-mark.svg'; import IconButton from '@/components/Button/IconButton'; import TermsLinks from '@/components/TermsLinks'; +import { onKeyDownHandler } from '@/utils/a11y'; import * as styles from './index.module.scss'; @@ -30,10 +31,18 @@ const ScopeGroup = ({ groupName, scopes }: ScopeGroupProps) => { return (
-
+
{groupName}
- +
diff --git a/packages/experience/src/pages/Consent/UserProfile/index.module.scss b/packages/experience/src/pages/Consent/UserProfile/index.module.scss index d155b6344..be7caea59 100644 --- a/packages/experience/src/pages/Consent/UserProfile/index.module.scss +++ b/packages/experience/src/pages/Consent/UserProfile/index.module.scss @@ -4,7 +4,7 @@ border: _.border(var(--color-line-divider)); border-radius: 8px; padding: _.unit(4); - @include _.flex-column(normal, normal); + @include _.flex-row; } .avatar { diff --git a/packages/experience/src/pages/Consent/UserProfile/index.tsx b/packages/experience/src/pages/Consent/UserProfile/index.tsx index a5e5b7540..b2681ab54 100644 --- a/packages/experience/src/pages/Consent/UserProfile/index.tsx +++ b/packages/experience/src/pages/Consent/UserProfile/index.tsx @@ -1,5 +1,8 @@ import { type ConsentInfoResponse } from '@logto/schemas'; import classNames from 'classnames'; +import { useTranslation } from 'react-i18next'; + +import UserAvatar from '@/assets/icons/default-user-avatar.svg'; import * as styles from './index.module.scss'; @@ -12,11 +15,17 @@ const UserProfile = ({ user: { id, avatar, name, primaryEmail, primaryPhone, username }, className, }: Props) => { + const { t } = useTranslation(); + return (
- {avatar && avatar} + {avatar ? ( + avatar + ) : ( + + )}
-
{name ?? id}
+
{name ?? t('description.user_id', { id })}
{primaryEmail ?? primaryPhone ?? username}
diff --git a/packages/experience/src/pages/Consent/index.module.scss b/packages/experience/src/pages/Consent/index.module.scss index 7e858fa5b..3f5d58014 100644 --- a/packages/experience/src/pages/Consent/index.module.scss +++ b/packages/experience/src/pages/Consent/index.module.scss @@ -14,7 +14,7 @@ .footerLink { align-items: center; - margin-top: _.unit(4); + margin-top: _.unit(6); @include _.flex_row; justify-content: center; gap: _.unit(1); diff --git a/packages/experience/src/scss/_colors.scss b/packages/experience/src/scss/_colors.scss index a2fe89e7c..b1d1e4b00 100644 --- a/packages/experience/src/scss/_colors.scss +++ b/packages/experience/src/scss/_colors.scss @@ -30,7 +30,7 @@ --color-danger-40: #ba1b1b; --color-danger-50: #dd3730; - --color-success-60: #32873d; + --color-success-60: #4ea254; --color-success-70: #68be6c; --color-success-80: #83da85; --color-success-90: #9fe79f; diff --git a/packages/phrases-experience/src/locales/de/description.ts b/packages/phrases-experience/src/locales/de/description.ts index bfaa986c5..32210ff0e 100644 --- a/packages/phrases-experience/src/locales/de/description.ts +++ b/packages/phrases-experience/src/locales/de/description.ts @@ -90,6 +90,8 @@ const description = { authorize_agreement: `By authorize the access, you agree to the {{name}}'s .`, /** UNTRANSLATED */ not_you: 'Not you?', + /** UNTRANSLATED */ + user_id: 'User ID: {{id}}', }; export default Object.freeze(description); diff --git a/packages/phrases-experience/src/locales/en/description.ts b/packages/phrases-experience/src/locales/en/description.ts index a65485623..ef098134c 100644 --- a/packages/phrases-experience/src/locales/en/description.ts +++ b/packages/phrases-experience/src/locales/en/description.ts @@ -80,6 +80,7 @@ const description = { organization_scopes: 'Organization access', authorize_agreement: `By authorize the access, you agree to the {{name}}'s .`, not_you: 'Not you?', + user_id: 'User ID: {{id}}', }; export default Object.freeze(description); diff --git a/packages/phrases-experience/src/locales/es/description.ts b/packages/phrases-experience/src/locales/es/description.ts index 80419b36d..bf1aea72d 100644 --- a/packages/phrases-experience/src/locales/es/description.ts +++ b/packages/phrases-experience/src/locales/es/description.ts @@ -89,6 +89,8 @@ const description = { authorize_agreement: `By authorize the access, you agree to the {{name}}'s .`, /** UNTRANSLATED */ not_you: 'Not you?', + /** UNTRANSLATED */ + user_id: 'User ID: {{id}}', }; export default Object.freeze(description); diff --git a/packages/phrases-experience/src/locales/fr/description.ts b/packages/phrases-experience/src/locales/fr/description.ts index 47ed2514d..663849951 100644 --- a/packages/phrases-experience/src/locales/fr/description.ts +++ b/packages/phrases-experience/src/locales/fr/description.ts @@ -90,6 +90,8 @@ const description = { authorize_agreement: `By authorize the access, you agree to the {{name}}'s .`, /** UNTRANSLATED */ not_you: 'Not you?', + /** UNTRANSLATED */ + user_id: 'User ID: {{id}}', }; export default Object.freeze(description); diff --git a/packages/phrases-experience/src/locales/it/description.ts b/packages/phrases-experience/src/locales/it/description.ts index c3e82ab3b..12331541f 100644 --- a/packages/phrases-experience/src/locales/it/description.ts +++ b/packages/phrases-experience/src/locales/it/description.ts @@ -86,6 +86,8 @@ const description = { authorize_agreement: `By authorize the access, you agree to the {{name}}'s .`, /** UNTRANSLATED */ not_you: 'Not you?', + /** UNTRANSLATED */ + user_id: 'User ID: {{id}}', }; export default Object.freeze(description); diff --git a/packages/phrases-experience/src/locales/ja/description.ts b/packages/phrases-experience/src/locales/ja/description.ts index a3b1d959a..434f8e6b3 100644 --- a/packages/phrases-experience/src/locales/ja/description.ts +++ b/packages/phrases-experience/src/locales/ja/description.ts @@ -86,6 +86,8 @@ const description = { authorize_agreement: `By authorize the access, you agree to the {{name}}'s .`, /** UNTRANSLATED */ not_you: 'Not you?', + /** UNTRANSLATED */ + user_id: 'User ID: {{id}}', }; export default Object.freeze(description); diff --git a/packages/phrases-experience/src/locales/ko/description.ts b/packages/phrases-experience/src/locales/ko/description.ts index 85c1388e3..9441cf991 100644 --- a/packages/phrases-experience/src/locales/ko/description.ts +++ b/packages/phrases-experience/src/locales/ko/description.ts @@ -81,6 +81,8 @@ const description = { authorize_agreement: `By authorize the access, you agree to the {{name}}'s .`, /** UNTRANSLATED */ not_you: 'Not you?', + /** UNTRANSLATED */ + user_id: 'User ID: {{id}}', }; export default Object.freeze(description); diff --git a/packages/phrases-experience/src/locales/pl-pl/description.ts b/packages/phrases-experience/src/locales/pl-pl/description.ts index c9fb35a26..9904272af 100644 --- a/packages/phrases-experience/src/locales/pl-pl/description.ts +++ b/packages/phrases-experience/src/locales/pl-pl/description.ts @@ -86,6 +86,8 @@ const description = { authorize_agreement: `By authorize the access, you agree to the {{name}}'s .`, /** UNTRANSLATED */ not_you: 'Not you?', + /** UNTRANSLATED */ + user_id: 'User ID: {{id}}', }; export default Object.freeze(description); diff --git a/packages/phrases-experience/src/locales/pt-br/description.ts b/packages/phrases-experience/src/locales/pt-br/description.ts index d94b356b8..3e69e636d 100644 --- a/packages/phrases-experience/src/locales/pt-br/description.ts +++ b/packages/phrases-experience/src/locales/pt-br/description.ts @@ -85,6 +85,8 @@ const description = { authorize_agreement: `By authorize the access, you agree to the {{name}}'s .`, /** UNTRANSLATED */ not_you: 'Not you?', + /** UNTRANSLATED */ + user_id: 'User ID: {{id}}', }; export default Object.freeze(description); diff --git a/packages/phrases-experience/src/locales/pt-pt/description.ts b/packages/phrases-experience/src/locales/pt-pt/description.ts index c183600df..64d8d5ef5 100644 --- a/packages/phrases-experience/src/locales/pt-pt/description.ts +++ b/packages/phrases-experience/src/locales/pt-pt/description.ts @@ -85,6 +85,8 @@ const description = { authorize_agreement: `By authorize the access, you agree to the {{name}}'s .`, /** UNTRANSLATED */ not_you: 'Not you?', + /** UNTRANSLATED */ + user_id: 'User ID: {{id}}', }; export default Object.freeze(description); diff --git a/packages/phrases-experience/src/locales/ru/description.ts b/packages/phrases-experience/src/locales/ru/description.ts index a375436eb..347071819 100644 --- a/packages/phrases-experience/src/locales/ru/description.ts +++ b/packages/phrases-experience/src/locales/ru/description.ts @@ -89,6 +89,8 @@ const description = { authorize_agreement: `By authorize the access, you agree to the {{name}}'s .`, /** UNTRANSLATED */ not_you: 'Not you?', + /** UNTRANSLATED */ + user_id: 'User ID: {{id}}', }; export default Object.freeze(description); diff --git a/packages/phrases-experience/src/locales/tr-tr/description.ts b/packages/phrases-experience/src/locales/tr-tr/description.ts index 4150f1051..cfdf51516 100644 --- a/packages/phrases-experience/src/locales/tr-tr/description.ts +++ b/packages/phrases-experience/src/locales/tr-tr/description.ts @@ -85,6 +85,8 @@ const description = { authorize_agreement: `By authorize the access, you agree to the {{name}}'s .`, /** UNTRANSLATED */ not_you: 'Not you?', + /** UNTRANSLATED */ + user_id: 'User ID: {{id}}', }; export default Object.freeze(description); diff --git a/packages/phrases-experience/src/locales/zh-cn/description.ts b/packages/phrases-experience/src/locales/zh-cn/description.ts index 89e7d7d5f..3dae654b7 100644 --- a/packages/phrases-experience/src/locales/zh-cn/description.ts +++ b/packages/phrases-experience/src/locales/zh-cn/description.ts @@ -77,6 +77,8 @@ const description = { authorize_agreement: `By authorize the access, you agree to the {{name}}'s .`, /** UNTRANSLATED */ not_you: 'Not you?', + /** UNTRANSLATED */ + user_id: 'User ID: {{id}}', }; export default Object.freeze(description); diff --git a/packages/phrases-experience/src/locales/zh-hk/description.ts b/packages/phrases-experience/src/locales/zh-hk/description.ts index 6aa706ff9..980515aed 100644 --- a/packages/phrases-experience/src/locales/zh-hk/description.ts +++ b/packages/phrases-experience/src/locales/zh-hk/description.ts @@ -77,6 +77,8 @@ const description = { authorize_agreement: `By authorize the access, you agree to the {{name}}'s .`, /** UNTRANSLATED */ not_you: 'Not you?', + /** UNTRANSLATED */ + user_id: 'User ID: {{id}}', }; export default Object.freeze(description); diff --git a/packages/phrases-experience/src/locales/zh-tw/description.ts b/packages/phrases-experience/src/locales/zh-tw/description.ts index 4e076ba5a..805e5d135 100644 --- a/packages/phrases-experience/src/locales/zh-tw/description.ts +++ b/packages/phrases-experience/src/locales/zh-tw/description.ts @@ -77,6 +77,8 @@ const description = { authorize_agreement: `By authorize the access, you agree to the {{name}}'s .`, /** UNTRANSLATED */ not_you: 'Not you?', + /** UNTRANSLATED */ + user_id: 'User ID: {{id}}', }; export default Object.freeze(description);