style(experience): fix some of the consent page styling (#5273)

fix some of the consent page styling

packages/experience/src/assets/icons/default-user-avatar.svg

@@ -0,0 +1,7 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none"
+  xmlns="http://www.w3.org/2000/svg">
+  <rect width="40" height="40" rx="6" fill="#F7F8F8"/>
+  <rect width="40" height="40" rx="6" fill="#78767F" fill-opacity="0.02"/>
+  <rect width="40" height="40" rx="6" fill="#5D34F2" fill-opacity="0.16"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M20.1449 8.3335C17.6236 8.3335 15.5796 10.3774 15.5796 12.8987V13.9132C15.5796 16.4345 17.6236 18.4784 20.1449 18.4784C22.6662 18.4784 24.7101 16.4345 24.7101 13.9132V12.8987C24.7101 10.3774 22.6662 8.3335 20.1449 8.3335ZM20.1449 31.6668C30.2899 31.6668 30.2899 28.369 30.2899 28.369C30.2899 24.0916 28.1669 20.1045 22.6812 20.0002C22.6579 19.9997 22.4995 20.1538 22.2699 20.3772C21.6671 20.9635 20.5736 22.0272 20.1449 22.0272C19.7162 22.0272 18.6227 20.9635 18.02 20.3772C17.7904 20.1538 17.6319 19.9997 17.6087 20.0002C12.123 20.1045 10 24.0916 10 28.369C10 28.369 10 31.6668 20.1449 31.6668Z" fill="#947DFF"/>
+</svg>

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);
 }

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 (
     <div className={classNames(styles.scopeGroup)}>
-      <div className={styles.scopeGroupHeader}>
+      <div
+        className={styles.scopeGroupHeader}
+        role="button"
+        tabIndex={0}
+        onClick={toggle}
+        onKeyDown={onKeyDownHandler({
+          Enter: toggle,
+        })}
+      >
         <CheckMark className={styles.check} />
         <div className={styles.scopeGroupName}>{groupName}</div>
-        <IconButton className={styles.toggleButton} data-expanded={expanded} onClick={toggle}>
+        <IconButton className={styles.toggleButton} data-expanded={expanded}>
           <DownArrowIcon />
         </IconButton>
       </div>

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 {

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 (
     <div className={classNames(styles.wrapper, className)}>
-      {avatar && <img src={avatar} alt="avatar" className={styles.avatar} />}
+      {avatar ? (
+        <img src={avatar} alt="avatar" className={styles.avatar} />
+      ) : (
+        <UserAvatar className={styles.avatar} />
+      )}
       <div>
-        <div className={styles.name}>{name ?? id}</div>
+        <div className={styles.name}>{name ?? t('description.user_id', { id })}</div>
         <div className={styles.identifier}>{primaryEmail ?? primaryPhone ?? username}</div>
       </div>
     </div>

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);

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;

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 <link></link>.`,
   /** UNTRANSLATED */
   not_you: 'Not you?',
+  /** UNTRANSLATED */
+  user_id: 'User ID: {{id}}',
 };
 
 export default Object.freeze(description);

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 <link></link>.`,
   not_you: 'Not you?',
+  user_id: 'User ID: {{id}}',
 };
 
 export default Object.freeze(description);

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 <link></link>.`,
   /** UNTRANSLATED */
   not_you: 'Not you?',
+  /** UNTRANSLATED */
+  user_id: 'User ID: {{id}}',
 };
 
 export default Object.freeze(description);

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 <link></link>.`,
   /** UNTRANSLATED */
   not_you: 'Not you?',
+  /** UNTRANSLATED */
+  user_id: 'User ID: {{id}}',
 };
 
 export default Object.freeze(description);

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 <link></link>.`,
   /** UNTRANSLATED */
   not_you: 'Not you?',
+  /** UNTRANSLATED */
+  user_id: 'User ID: {{id}}',
 };
 
 export default Object.freeze(description);

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 <link></link>.`,
   /** UNTRANSLATED */
   not_you: 'Not you?',
+  /** UNTRANSLATED */
+  user_id: 'User ID: {{id}}',
 };
 
 export default Object.freeze(description);

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 <link></link>.`,
   /** UNTRANSLATED */
   not_you: 'Not you?',
+  /** UNTRANSLATED */
+  user_id: 'User ID: {{id}}',
 };
 
 export default Object.freeze(description);

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 <link></link>.`,
   /** UNTRANSLATED */
   not_you: 'Not you?',
+  /** UNTRANSLATED */
+  user_id: 'User ID: {{id}}',
 };
 
 export default Object.freeze(description);

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 <link></link>.`,
   /** UNTRANSLATED */
   not_you: 'Not you?',
+  /** UNTRANSLATED */
+  user_id: 'User ID: {{id}}',
 };
 
 export default Object.freeze(description);

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 <link></link>.`,
   /** UNTRANSLATED */
   not_you: 'Not you?',
+  /** UNTRANSLATED */
+  user_id: 'User ID: {{id}}',
 };
 
 export default Object.freeze(description);

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 <link></link>.`,
   /** UNTRANSLATED */
   not_you: 'Not you?',
+  /** UNTRANSLATED */
+  user_id: 'User ID: {{id}}',
 };
 
 export default Object.freeze(description);

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 <link></link>.`,
   /** UNTRANSLATED */
   not_you: 'Not you?',
+  /** UNTRANSLATED */
+  user_id: 'User ID: {{id}}',
 };
 
 export default Object.freeze(description);

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 <link></link>.`,
   /** UNTRANSLATED */
   not_you: 'Not you?',
+  /** UNTRANSLATED */
+  user_id: 'User ID: {{id}}',
 };
 
 export default Object.freeze(description);

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 <link></link>.`,
   /** UNTRANSLATED */
   not_you: 'Not you?',
+  /** UNTRANSLATED */
+  user_id: 'User ID: {{id}}',
 };
 
 export default Object.freeze(description);

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 <link></link>.`,
   /** UNTRANSLATED */
   not_you: 'Not you?',
+  /** UNTRANSLATED */
+  user_id: 'User ID: {{id}}',
 };
 
 export default Object.freeze(description);