Skip to content

Commit 258b08e

Browse files
smurflo2smurflo2
authored
[LC-1088] Purge DefaultFace (use first letter of user name if no profile pic) (#766)
* Start removing DefaultFace * handle text size better * User letter PFP for certificate * No more smiley * No more DefaultFace for BoostSmallCard * No more DefaultFace for NotificationBoostCard * cleanup NotficationUserCard * No more DefaultFace for issueHistory * No more DefaultFace for VCDisplay * Delete default-face 🪦 * Changeset
1 parent 6affe7e commit 258b08e

File tree

16 files changed

+146
-70
lines changed

16 files changed

+146
-70
lines changed

‎.changeset/tired-forks-feel.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@learncard/react': patch
3+
---
4+
5+
Use first letter of user name instead of DefaultFace picture when missing a profile picture

‎packages/react-learn-card/src/assets/images/default-face.jpeg‎

-4.72 KB
Binary file not shown.

‎packages/react-learn-card/src/components/BoostSmallCard/BoostSmallCard.stories.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ const issueHistoryDummyData = [
2727
{
2828
id: '3',
2929
name: 'John Doe',
30-
thumb: 'https://picsum.photos/200',
30+
// thumb: 'https://picsum.photos/200',
3131
date: '2020-01-01',
3232
},
3333
{

‎packages/react-learn-card/src/components/BoostSmallCard/BoostSmallCard.tsx‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,14 @@
11
import React from 'react';
22

33
import CaretRightFilled from '../../assets/images/CaretRightFilled.svg';
4-
import DefaultFace from '../../assets/images/default-face.jpeg';
54
import AddAwardLight from '../../assets/images/addawardlight.svg';
6-
import ThreeDots from '../../assets/images/DotsThreeOutline.svg';
5+
import ThreeDotVertical from '../svgs/ThreeDotVertical';
6+
import UserProfilePicture from '../UserProfilePicture/UserProfilePicture';
77
import { CircleCheckButton } from '../CircleCheckButton';
88

99
import { BoostSmallCardProps, WalletCategoryTypes } from '../../types';
1010
import { TYPE_TO_IMG_SRC, TYPE_TO_WALLET_DARK_COLOR } from '../../constants';
1111
import { getDarkBGColor } from '../../helpers/color.helpers';
12-
import ThreeDotVertical from '../svgs/ThreeDotVertical';
1312

1413
export const BoostSmallCard: React.FC<BoostSmallCardProps> = ({
1514
title = 'Title Lorem Ipsum',
@@ -54,9 +53,11 @@ export const BoostSmallCard: React.FC<BoostSmallCardProps> = ({
5453
key={issueItem?.id}
5554
className="profile-thumb-img border-[1px] border-white border-solid vc-issuee-image h-[35px] w-[35px] rounded-full overflow-hidden mx-[-5px]"
5655
>
57-
<img
58-
className="h-full w-full object-cover"
59-
src={issueItem?.thumb || DefaultFace}
56+
<UserProfilePicture
57+
customContainerClass={`h-full w-full object-cover ${
58+
!issueItem?.thumb ? 'pt-[8px]' : ''
59+
}`}
60+
user={{ image: issueItem?.thumb, name: issueItem?.name }}
6061
alt="profile"
6162
/>
6263
</div>

‎packages/react-learn-card/src/components/CertificateDisplayCard/CertificateFrontFace.tsx‎

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import CertificateImageDisplay from './CertificateImageDisplay';
55
import CertDisplayCardSkillsCount from './CertDisplayCardSkillsCount';
66
import CertificateProfileImageDisplay from './CertificateProfileImageDisplay';
77

8-
import Smiley from '../svgs/Smiley';
98
import Line from '../svgs/Line';
109

1110
import {
@@ -155,19 +154,15 @@ export const CertificateFrontFace: React.FC<CertificateFrontFaceProps> = ({
155154
</div>
156155

157156
{customBodyCardComponent}
158-
{issueeImageExists && !customBodyCardComponent && (
157+
{!customBodyCardComponent && (
159158
<CertificateProfileImageDisplay
160159
imageUrl={issueeImage}
161160
imageComponent={subjectImageComponent}
162161
className={`flex justify-center items-center ${textDarkColor}`}
163162
isIssuer={isSelfVerified}
163+
userName={issueeName}
164164
/>
165165
)}
166-
{!issueeImageExists && !customBodyCardComponent && (
167-
<div className="h-[50px] w-[50px] rounded-full bg-grayscale-500 flex items-center justify-center">
168-
<Smiley />
169-
</div>
170-
)}
171166

172167
<div className="text-[14px] text-grayscale-800 flex flex-col items-center w-full">
173168
<span className="font-jacques flex gap-[5px] items-center w-full overflow-ellipsis whitespace-nowrap overflow-hidden justify-center">
@@ -233,6 +228,7 @@ export const CertificateFrontFace: React.FC<CertificateFrontFaceProps> = ({
233228
imageComponent={issuerImageComponent}
234229
className={`w-[calc(100%-26px)] absolute bottom-0 flex justify-center items-center ${textDarkColor}`}
235230
isIssuer
231+
userName={issuerName}
236232
/>
237233
)}
238234

‎packages/react-learn-card/src/components/CertificateDisplayCard/CertificateProfileImageDisplay.tsx‎

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,26 @@
11
import React from 'react';
22
import IssuerSeal from '../svgs/IssuerSeal';
3+
import UserProfilePicture from '../UserProfilePicture/UserProfilePicture';
34

45
type CertificateProfileImageDisplayProps = {
56
imageUrl?: string;
67
imageComponent?: React.ReactNode;
78
isIssuer?: boolean;
89
className?: string;
10+
userName?: string;
911
};
1012

1113
const CertificateProfileImageDisplay: React.FC<CertificateProfileImageDisplayProps> = ({
1214
imageUrl,
1315
isIssuer = false,
1416
className = '',
1517
imageComponent,
18+
userName,
1619
}) => {
17-
const imageClassName = `h-[50px] w-[50px] rounded-full overflow-hidden ${isIssuer ? 'absolute border-[2px] border-solid border-grayscale-200' : ''
18-
}`;
20+
const imageClassName = `h-[50px] w-[50px] rounded-full overflow-hidden ${
21+
isIssuer ? '!absolute border-[2px] border-solid border-grayscale-200' : ''
22+
}`;
23+
1924
return (
2025
<div className={className}>
2126
{isIssuer && (
@@ -25,7 +30,13 @@ const CertificateProfileImageDisplay: React.FC<CertificateProfileImageDisplayPro
2530
)}
2631

2732
{imageComponent && <div className={imageClassName}>{imageComponent}</div>}
28-
{!imageComponent && <img className={imageClassName} src={imageUrl} />}
33+
{!imageComponent && (
34+
<UserProfilePicture
35+
customContainerClass={`${imageClassName} ${!imageUrl ? 'pt-[6px]' : ''}`}
36+
customImageClass="h-full w-full object-cover"
37+
user={{ image: imageUrl, name: userName }}
38+
/>
39+
)}
2940
</div>
3041
);
3142
};

‎packages/react-learn-card/src/components/NotificationBoostCard/NotificationBoostCard.stories.tsx‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,3 +32,23 @@ NotificationCardTest.args = {
3232
handleCancelClick: () => console.log('///CANCEL CLICK'),
3333
isArchived: false,
3434
};
35+
36+
export const NotificationCardTestNoIssuerImage = Template.bind({});
37+
38+
NotificationCardTestNoIssuerImage.args = {
39+
title: 'Title of Credential',
40+
thumbImage:
41+
'https://upload.wikimedia.org/wikipedia/en/thumb/a/a8/Jack_Daniels_Logo.svg/1200px-Jack_Daniels_Logo.svg.png',
42+
issuerInfo: {
43+
image: '',
44+
fullName: 'Bobby Baggins',
45+
displayName: 'BBaggins',
46+
},
47+
className: 'notification-boost-card-test',
48+
issueDate: 'Apr 04 2022',
49+
notificationType: NotificationTypeEnum.SocialBadges,
50+
handleButtonClick: () => console.log('BUTTON CLICK'),
51+
handleCardClick: () => console.log('CARD CLICK'),
52+
handleCancelClick: () => console.log('///CANCEL CLICK'),
53+
isArchived: false,
54+
};

‎packages/react-learn-card/src/components/NotificationBoostCard/NotificationBoostCard.tsx‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@ import X from '../../assets/images/X.svg';
33
import { NotificationBoostCardProps } from './types';
44
import { NotificationTypeStyles } from '../Notification/types';
55
import { NotificationTypeEnum } from '../../constants/notifications';
6-
import DefaultFace from '../../assets/images/default-face.jpeg';
76
import Checkmark from '../svgs/Checkmark';
87
import ArrowArcLeft from '../../assets/images/ArrowArcLeft.svg';
8+
import UserProfilePicture from '../UserProfilePicture/UserProfilePicture';
99

1010
export const NotificationBoostCard: React.FC<NotificationBoostCardProps> = ({
1111
title,
@@ -99,9 +99,11 @@ export const NotificationBoostCard: React.FC<NotificationBoostCardProps> = ({
9999
{showIssuerInfo && (
100100
<div className="notification-card-issuer-info flex items-center mt-[10px]">
101101
<div className="profile-thumb-img border-[2px] border-white border-solid vc-issuee-image h-[35px] w-[35px] rounded-full overflow-hidden mx-[-5px]">
102-
<img
103-
className="h-full w-full object-cover"
104-
src={issuerInfo?.image || DefaultFace}
102+
<UserProfilePicture
103+
customContainerClass={`h-full w-full object-cover text-xl ${
104+
!issuerInfo?.image ? 'pt-[3px]' : ''
105+
}`}
106+
user={{ image: issuerInfo?.image, name: issuerInfo?.fullName }}
105107
alt="profile"
106108
/>
107109
</div>

‎packages/react-learn-card/src/components/NotificationUserCard/NotificationUserCard.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import X from '../../assets/images/X.svg';
33
import { NotificationUserCardProps, UserNotificationTypeStyles } from './types';
44

55
import { UserNotificationTypeEnum } from '../../constants/notifications';
6-
import DefaultFace from '../../assets/images/default-face.jpeg';
76
import Checkmark from '../svgs/Checkmark';
87
import ArrowArcLeft from '../../assets/images/ArrowArcLeft.svg';
98

‎packages/react-learn-card/src/components/UserProfilePicture/UserProfilePicture.tsx‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import React from 'react';
2+
3+
// Copied / Adapted from learn-card-base
4+
export const UserProfilePicture: React.FC<{
5+
customContainerClass?: string;
6+
customImageClass?: string;
7+
user?: any;
8+
alt?: string;
9+
children?: React.ReactNode | null;
10+
}> = ({ customContainerClass, customImageClass, user, alt, children }) => {
11+
const baseColor = 'bg-indigo-500';
12+
const src = user?.image || user?.profileImage;
13+
const letterToDisplay =
14+
user?.displayName?.substring(0, 1) ||
15+
user?.profileId?.substring(0, 1) ||
16+
user?.name?.substring(0, 1) ||
17+
user?.email?.substring(0, 1) ||
18+
'#';
19+
20+
if (!src) {
21+
return (
22+
<div
23+
className={`rounded-full flex items-center justify-center font-bold uppercase select-none text-white text-2xl ${customContainerClass} ${baseColor}`}
24+
>
25+
{letterToDisplay}
26+
{children}
27+
</div>
28+
);
29+
}
30+
31+
return (
32+
<div className={`relative select-none ${customContainerClass}`}>
33+
<img
34+
className={`rounded-full ${customImageClass}`}
35+
alt={alt || 'user'}
36+
src={src}
37+
referrerPolicy="no-referrer"
38+
/>
39+
{children}
40+
</div>
41+
);
42+
};
43+
44+
export default UserProfilePicture;

0 commit comments

Comments
 (0)