refactor: use default user avatar instead of founding team avatars (#2682)

packages/console/src/assets/images/broken-image-dark.svg

@@ -0,0 +1,7 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="48" height="48" fill="#C9C5D0"/>
+<path d="M10 9C10 6.79086 11.7909 5 14 5H17L20.5 5L21.9516 7L20.9032 9L23.1935 12.5L22.1452 14.5L24.0968 16.5L24.5 19L25.4032 16.5L24.3548 14.5L26.3065 12.5L25.0968 9L27.0484 7L26.5 5H31L34 5C36.2091 5 38 6.79086 38 9V17V25V39C38 41.2091 36.2091 43 34 43H24H17.4538C17.1654 43 16.8911 42.8755 16.7012 42.6585L10.2474 35.2828C10.0879 35.1005 10 34.8665 10 34.6243V25L10 9Z" fill="#FFFBFF"/>
+<path d="M10 35L17 43V37C17 35.8954 16.1046 35 15 35H10Z" fill="#ADAAB4"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.0237 20.0251C15.8285 20.2203 15.8285 20.5369 16.0237 20.7322L17.7915 22.4999L16.0237 24.2677C15.8284 24.463 15.8284 24.7796 16.0237 24.9748C16.2189 25.1701 16.5355 25.1701 16.7308 24.9748L18.4986 23.207L20.2664 24.9748C20.4617 25.1701 20.7782 25.1701 20.9735 24.9748C21.1688 24.7796 21.1688 24.463 20.9735 24.2677L19.2057 22.4999L20.9734 20.7322C21.1687 20.5369 21.1687 20.2204 20.9734 20.0251C20.7782 19.8298 20.4616 19.8298 20.2663 20.0251L18.4986 21.7928L16.7309 20.0251C16.5356 19.8298 16.219 19.8298 16.0237 20.0251Z" fill="#ADAAB4"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M27.0237 20.0251C26.8285 20.2203 26.8285 20.5369 27.0237 20.7322L28.7915 22.4999L27.0237 24.2677C26.8284 24.463 26.8284 24.7796 27.0237 24.9748C27.2189 25.1701 27.5355 25.1701 27.7308 24.9748L29.4986 23.207L31.2664 24.9748C31.4617 25.1701 31.7782 25.1701 31.9735 24.9748C32.1688 24.7796 32.1688 24.463 31.9735 24.2677L30.2057 22.4999L31.9734 20.7322C32.1687 20.5369 32.1687 20.2204 31.9734 20.0251C31.7782 19.8298 31.4616 19.8298 31.2663 20.0251L29.4986 21.7928L27.7309 20.0251C27.5356 19.8298 27.219 19.8298 27.0237 20.0251Z" fill="#ADAAB4"/>
+</svg>

packages/console/src/assets/images/broken-image-light.svg

@@ -0,0 +1,7 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="48" height="48" fill="#E5E1EC"/>
+<path d="M10 9C10 6.79086 11.7909 5 14 5H17L20.5 5L21.9516 7L20.9032 9L23.1935 12.5L22.1452 14.5L24.0968 16.5L24.5 19L25.4032 16.5L24.3548 14.5L26.3065 12.5L25.0968 9L27.0484 7L26.5 5H31L34 5C36.2091 5 38 6.79086 38 9V17V25V39C38 41.2091 36.2091 43 34 43H24H17.4538C17.1654 43 16.8911 42.8755 16.7012 42.6585L10.2474 35.2828C10.0879 35.1005 10 34.8665 10 34.6243V25L10 9Z" fill="#ADAAB4"/>
+<path d="M10 35L17 43V37C17 35.8954 16.1046 35 15 35H10Z" fill="#FBF9FF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.0237 20.0251C15.8285 20.2203 15.8285 20.5369 16.0237 20.7322L17.7915 22.4999L16.0237 24.2677C15.8284 24.463 15.8284 24.7796 16.0237 24.9748C16.2189 25.1701 16.5355 25.1701 16.7308 24.9748L18.4986 23.207L20.2664 24.9748C20.4617 25.1701 20.7782 25.1701 20.9735 24.9748C21.1688 24.7796 21.1688 24.463 20.9735 24.2677L19.2057 22.4999L20.9734 20.7322C21.1687 20.5369 21.1687 20.2204 20.9734 20.0251C20.7782 19.8298 20.4616 19.8298 20.2663 20.0251L18.4986 21.7928L16.7309 20.0251C16.5356 19.8298 16.219 19.8298 16.0237 20.0251Z" fill="#78767F"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M27.0237 20.0251C26.8285 20.2203 26.8285 20.5369 27.0237 20.7322L28.7915 22.4999L27.0237 24.2677C26.8284 24.463 26.8284 24.7796 27.0237 24.9748C27.2189 25.1701 27.5355 25.1701 27.7308 24.9748L29.4986 23.207L31.2664 24.9748C31.4617 25.1701 31.7782 25.1701 31.9735 24.9748C32.1688 24.7796 32.1688 24.463 31.9735 24.2677L30.2057 22.4999L31.9734 20.7322C32.1687 20.5369 32.1687 20.2204 31.9734 20.0251C31.7782 19.8298 31.4616 19.8298 31.2663 20.0251L29.4986 21.7928L27.7309 20.0251C27.5356 19.8298 27.219 19.8298 27.0237 20.0251Z" fill="#78767F"/>
+</svg>

packages/console/src/assets/images/default-avatar-dark.svg

@@ -0,0 +1,4 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="48" height="48" fill="#C9C5D0"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M24 6.75C20.2721 6.75 17.25 9.77208 17.25 13.5V15C17.25 18.7279 20.2721 21.75 24 21.75C27.7279 21.75 30.75 18.7279 30.75 15V13.5C30.75 9.77208 27.7279 6.75 24 6.75ZM24 41.25C39 41.25 39 36.374 39 36.374C39 30.0495 35.861 24.1543 27.75 24C27.7156 23.9993 27.4814 24.2272 27.1419 24.5574C26.2507 25.4243 24.6339 26.9971 24 26.9971C23.3661 26.9971 21.7493 25.4243 20.8581 24.5574C20.5186 24.2272 20.2844 23.9993 20.25 24C12.139 24.1543 9 30.0495 9 36.374C9 36.374 9 41.25 24 41.25Z" fill="#FFFBFF"/>
+</svg>

packages/console/src/assets/images/default-avatar-light.svg

@@ -0,0 +1,4 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="48" height="48" fill="#E5E1EC"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M24 6.75C20.2721 6.75 17.25 9.77208 17.25 13.5V15C17.25 18.7279 20.2721 21.75 24 21.75C27.7279 21.75 30.75 18.7279 30.75 15V13.5C30.75 9.77208 27.7279 6.75 24 6.75ZM24 41.25C39 41.25 39 36.374 39 36.374C39 30.0495 35.861 24.1543 27.75 24C27.7156 23.9993 27.4814 24.2272 27.1419 24.5574C26.2507 25.4243 24.6339 26.9971 24 26.9971C23.3661 26.9971 21.7493 25.4243 20.8581 24.5574C20.5186 24.2272 20.2844 23.9993 20.25 24C12.139 24.1543 9 30.0495 9 36.374C9 36.374 9 41.25 24 41.25Z" fill="#ADAAB4"/>
+</svg>

packages/console/src/components/AppContent/components/UserInfo/index.module.scss

@@ -18,7 +18,7 @@
     background-color: var(--color-focused-variant);
   }
 
-  img {
+  .avatar {
     width: 36px;
     height: 36px;
     margin-right: _.unit(2);

packages/console/src/components/AppContent/components/UserInfo/index.tsx

@@ -7,7 +7,7 @@ import { useTranslation } from 'react-i18next';
 import SignOut from '@/assets/images/sign-out.svg';
 import Dropdown, { DropdownItem } from '@/components/Dropdown';
 import { Ring as Spinner } from '@/components/Spinner';
-import { generateAvatarPlaceHolderById } from '@/consts/avatars';
+import UserAvatar from '@/components/UserAvatar';
 import { onKeyDownHandler } from '@/utilities/a11y';
 
 import UserInfoSkeleton from '../UserInfoSkeleton';
@@ -35,7 +35,7 @@ const UserInfo = () => {
     return <UserInfoSkeleton />;
   }
 
-  const { sub: id, username, picture } = user;
+  const { username, picture } = user;
 
   return (
     <>
@@ -51,7 +51,7 @@ const UserInfo = () => {
           setShowDropdown(true);
         }}
       >
-        <img src={picture ?? generateAvatarPlaceHolderById(id)} alt="avatar" />
+        <UserAvatar className={styles.avatar} url={picture} />
         <div className={styles.wrapper}>
           <div className={styles.name}>{username}</div>
         </div>

packages/console/src/components/ImageWithErrorFallback/index.tsx

@@ -0,0 +1,25 @@
+import { AppearanceMode } from '@logto/schemas';
+import type { ImgHTMLAttributes } from 'react';
+import { useState } from 'react';
+
+import FallbackImageDark from '@/assets/images/broken-image-dark.svg';
+import FallbackImageLight from '@/assets/images/broken-image-light.svg';
+import { useTheme } from '@/hooks/use-theme';
+
+const ImageWithErrorFallback = ({ src, alt, className }: ImgHTMLAttributes<HTMLImageElement>) => {
+  const [hasError, setHasError] = useState(false);
+  const theme = useTheme();
+  const Fallback = theme === AppearanceMode.LightMode ? FallbackImageLight : FallbackImageDark;
+
+  const errorHandler = () => {
+    setHasError(true);
+  };
+
+  if (hasError) {
+    return <Fallback className={className} />;
+  }
+
+  return <img className={className} src={src} alt={alt} onError={errorHandler} />;
+};
+
+export default ImageWithErrorFallback;

packages/console/src/components/UserAvatar/index.tsx

@@ -0,0 +1,38 @@
+import { AppearanceMode } from '@logto/schemas';
+import type { Nullable } from '@silverhand/essentials';
+
+import DarkAvatar from '@/assets/images/default-avatar-dark.svg';
+import LightAvatar from '@/assets/images/default-avatar-light.svg';
+import { useTheme } from '@/hooks/use-theme';
+
+import ImageWithErrorFallback from '../ImageWithErrorFallback';
+
+type Props = {
+  className?: string;
+  url?: Nullable<string>;
+};
+
+const UserAvatar = ({ className, url }: Props) => {
+  const theme = useTheme();
+  const DefaultAvatar = theme === AppearanceMode.LightMode ? LightAvatar : DarkAvatar;
+
+  if (url) {
+    return (
+      <ImageWithErrorFallback
+        className={className}
+        src={url}
+        alt="avatar"
+        /**
+         * Some social connectors like Google will block the references to its image resource,
+         * without specifying the referrerPolicy attribute. Reference:
+         * https://stackoverflow.com/questions/40570117/http403-forbidden-error-when-trying-to-load-img-src-with-google-profile-pic
+         */
+        referrerPolicy="no-referrer"
+      />
+    );
+  }
+
+  return <DefaultAvatar className={className} />;
+};
+
+export default UserAvatar;

packages/console/src/consts/avatars.ts

@@ -1,24 +0,0 @@
-import avatar001 from '@/assets/avatars/avatar-001.png';
-import avatar002 from '@/assets/avatars/avatar-002.png';
-import avatar003 from '@/assets/avatars/avatar-003.png';
-import avatar004 from '@/assets/avatars/avatar-004.png';
-import avatar005 from '@/assets/avatars/avatar-005.png';
-import avatar006 from '@/assets/avatars/avatar-006.png';
-import avatar007 from '@/assets/avatars/avatar-007.png';
-import avatar008 from '@/assets/avatars/avatar-008.png';
-import avatar009 from '@/assets/avatars/avatar-009.png';
-
-export const Avatars = [
-  avatar001,
-  avatar002,
-  avatar003,
-  avatar004,
-  avatar005,
-  avatar006,
-  avatar007,
-  avatar008,
-  avatar009,
-];
-
-export const generateAvatarPlaceHolderById = (id: string) =>
-  Avatars[(id.codePointAt(0) ?? 0) % Avatars.length];

packages/console/src/consts/index.ts

@@ -1,5 +1,4 @@
 export * from './applications';
-export * from './avatars';
 export * from './connectors';
 export * from './logs';
 

packages/console/src/pages/UserDetails/index.tsx

@@ -18,8 +18,8 @@ import DeleteConfirmModal from '@/components/DeleteConfirmModal';
 import DetailsSkeleton from '@/components/DetailsSkeleton';
 import TabNav, { TabNavItem } from '@/components/TabNav';
 import TextLink from '@/components/TextLink';
+import UserAvatar from '@/components/UserAvatar';
 import { generatedPasswordStorageKey } from '@/consts';
-import { generateAvatarPlaceHolderById } from '@/consts/avatars';
 import type { RequestError } from '@/hooks/use-api';
 import useApi from '@/hooks/use-api';
 import * as detailsStyles from '@/scss/details.module.scss';
@@ -86,17 +86,7 @@ const UserDetails = () => {
       {userId && data && (
         <>
           <Card className={styles.header}>
-            {/**
-             * Some social connectors like Google will block the references to its image resource,
-             * without specifying the referrerPolicy attribute. Reference:
-             * https://stackoverflow.com/questions/40570117/http403-forbidden-error-when-trying-to-load-img-src-with-google-profile-pic
-             */}
-            <img
-              className={styles.avatar}
-              src={data.avatar ?? generateAvatarPlaceHolderById(userId)}
-              referrerPolicy="no-referrer"
-              alt="avatar"
-            />
+            <UserAvatar className={styles.avatar} url={data.avatar} />
             <div className={styles.metadata}>
               <div className={styles.name}>{data.name ?? '-'}</div>
               <div>

packages/console/src/pages/Users/index.tsx

@@ -18,8 +18,8 @@ import Search from '@/components/Search';
 import TableEmpty from '@/components/Table/TableEmpty';
 import TableError from '@/components/Table/TableError';
 import TableLoading from '@/components/Table/TableLoading';
+import UserAvatar from '@/components/UserAvatar';
 import { generatedPasswordStorageKey } from '@/consts';
-import { generateAvatarPlaceHolderById } from '@/consts/avatars';
 import type { RequestError } from '@/hooks/use-api';
 import * as modalStyles from '@/scss/modal.module.scss';
 import * as resourcesStyles from '@/scss/resources.module.scss';
@@ -141,13 +141,7 @@ const Users = () => {
                     <ItemPreview
                       title={name ?? t('users.unnamed')}
                       subtitle={id}
-                      icon={
-                        <img
-                          alt="avatar"
-                          className={styles.avatar}
-                          src={avatar ?? generateAvatarPlaceHolderById(id)}
-                        />
-                      }
+                      icon={<UserAvatar className={styles.avatar} url={avatar} />}
                       to={`/users/${id}`}
                       size="compact"
                     />