@learncard/react 2.12.11 → 3.0.1

package/src/components/MeritBadgeDisplayCard/MeritBadgeFrontFace.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { useT } from '../../i18n';
 
 import MeritBadgeCornerIcon from './MeritBadgeCornerIcon';
 import MeritBadgeImageDisplay from './MeritBadgeImageDisplay';
@@ -66,6 +67,7 @@ export const MeritBadgeFrontFace: React.FC<MeritBadgeFrontFaceProps> = ({
     hideFrontFaceDetails,
     onVerifierClick,
 }) => {
+    const t = useT();
     const {
         title = '',
         createdAt,
@@ -73,7 +75,10 @@ export const MeritBadgeFrontFace: React.FC<MeritBadgeFrontFaceProps> = ({
         issuee: _issuee = '',
         credentialSubject,
         imageUrl,
-    } = getInfoFromCredential(credential, 'MMM dd, yyyy', { uppercaseDate: false });
+    } = getInfoFromCredential(credential, 'MMM dd, yyyy', {
+        uppercaseDate: false,
+        dateType: 'awarded',
+    });
 
     const issuee = issueeOverride || _issuee;
     const issuer = issuerOverride || _issuer;
@@ -155,7 +160,7 @@ export const MeritBadgeFrontFace: React.FC<MeritBadgeFrontFaceProps> = ({
             </div>
 
             <div
-                className={`flex flex-col gap-[15px] items-center px-[20px] pt-[92px] pb-[19px] border-solid border-[4px] ${borderColor} rounded-[30px]`}
+                className={`flex flex-col gap-[15px] items-center px-[20px] pt-[92px] pb-[19px] border-solid border-4 ${borderColor} rounded-[30px]`}
             >
                 <div className="flex flex-col gap-[5px] w-full">
                     <div className="flex flex-col items-center text-grayscale-900">
@@ -204,12 +209,12 @@ export const MeritBadgeFrontFace: React.FC<MeritBadgeFrontFaceProps> = ({
                 )}
                 <div className="flex flex-col w-full">
                     <div className="text-[14px] text-grayscale-900 flex flex-col items-center w-full mb-[10px]">
-                        <span className="font-jacques flex gap-[5px] items-center w-full overflow-ellipsis whitespace-nowrap overflow-hidden justify-center">
-                            {issueeName === '0 person' ? (
-                                'Not yet awarded'
-                            ) : (
-                                <>Awarded on {createdAt} by</>
-                            )}
+                        <span className="font-jacques flex gap-[5px] items-center w-full text-ellipsis whitespace-nowrap overflow-hidden justify-center">
+                            {issueeName === '0 person'
+                                ? 'Not yet awarded'
+                                : createdAt
+                                  ? t('credential.awardedOnBy', { date: createdAt })
+                                  : t('credential.by')}
                         </span>
                     </div>
 
@@ -231,9 +236,9 @@ export const MeritBadgeFrontFace: React.FC<MeritBadgeFrontFaceProps> = ({
                     </div> */}
 
                     <div className="flex flex-col gap-[5px] items-center w-full">
-                        <span className="mb-[3px] pt-[3px] text-grayscale-900 text-[25px] leading-[90%] font-sacramento border-b-[1px] border-solid border-grayscale-200 w-full text-center line-clamp-2 break-words scrollbar-hide">
+                        <span className="mb-[3px] pt-[3px] text-grayscale-900 text-[25px] leading-[90%] font-sacramento border-b border-solid border-grayscale-200 w-full text-center line-clamp-2 wrap-break-word scrollbar-hide">
                             {issuerDisplay.isDidValue ? (
-                                <span className="mb-[3px] pt-[3px] text-grayscale-900 text-[14px] leading-[90%] font-jacques tracking-[0.25px] w-full text-center line-clamp-2 break-words">
+                                <span className="mb-[3px] pt-[3px] text-grayscale-900 text-[14px] leading-[90%] font-jacques tracking-[0.25px] w-full text-center line-clamp-2 wrap-break-word">
                                     <span className="font-[600]">Digital ID:</span>
                                     <span className="text-grayscale-600">{issuerName}</span>
                                 </span>

package/src/components/MeritBadgeDisplayCard/MeritBadgeProfileImageDisplay.tsx

@@ -27,7 +27,7 @@ const MeritBadgeProfileImageDisplay: React.FC<MeritBadgeProfileImageDisplayProps
 }) => {
     const imageClassName = `${
         size === 'big' ? 'h-[60px] w-[60px]' : 'h-[39px] w-[39px]'
-    } rounded-full overflow-hidden border-[2px] border-solid border-grayscale-200`;
+    } rounded-full overflow-hidden border-2 border-solid border-grayscale-200`;
     const silhouetteClassName = size === 'big' ? 'h-[43px] w-[43px]' : 'h-[28px] w-[28px]';
 
     const profileImage = imageComponent ? (

package/src/components/MeritBadgeDisplayCard/VerificationRow.tsx

@@ -39,7 +39,7 @@ const VerificationRow: React.FC<VerificationRowProps> = ({ verification }) => {
     const infoText = ''; // if we want certain verifications to have extra explanation, we can set this variable
 
     return (
-        <div className="verification-row flex flex-col gap-[5px] font-poppins border-b-[1px] border-grayscale-200 border-solid w-full py-[10px] last:border-0 last:pb-0">
+        <div className="verification-row flex flex-col gap-[5px] font-poppins border-b border-grayscale-200 border-solid w-full py-[10px] last:border-0 last:pb-0">
             <span
                 className="font-[700] text-[11px] uppercase flex items-center gap-[3px] select-none"
                 style={{ color: statusColor }}

package/src/components/MiniVCThumbnail/MiniVCThumbnail.tsx

@@ -57,7 +57,7 @@ export const MiniVCThumbnail: React.FC<MiniVCThumbnailProps> = ({
                         className="flex item-center justify-center w-full -mt-3"
                         data-testid="mini-vc-thumbnail-badge"
                     >
-                        <div className="max-h-[80px] max-w-[80px] xxsm:h-[60px] xxsm:w-[60px] border-solid border-1 border-black bg-white z-10">
+                        <div className="max-h-[80px] max-w-[80px] xxsm:h-[60px] xxsm:w-[60px] border-solid border border-black bg-white z-10">
                             <img
                                 className="h-full w-full object-cover"
                                 src={badgeImage}

package/src/components/NotificationBoostCard/NotificationBoostCard.tsx

@@ -98,7 +98,7 @@ export const NotificationBoostCard: React.FC<NotificationBoostCardProps> = ({
 
                     {showIssuerInfo && (
                         <div className="notification-card-issuer-info flex items-center mt-[10px]">
-                            <div className="profile-thumb-img border-[2px] border-white border-solid  vc-issuee-image h-[35px] w-[35px] rounded-full overflow-hidden mx-[-5px]">
+                            <div className="profile-thumb-img border-2 border-white border-solid  vc-issuee-image h-[35px] w-[35px] rounded-full overflow-hidden mx-[-5px]">
                                 <UserProfilePicture
                                     customContainerClass={`h-full w-full object-cover text-xl ${
                                         !issuerInfo?.image ? 'pt-[3px]' : ''
@@ -128,7 +128,7 @@ export const NotificationBoostCard: React.FC<NotificationBoostCardProps> = ({
 
                         <button
                             onClick={handleCancelClick}
-                            className={`rounded-[24px] flex items-center justify-center  h-[42px] w-[42px] shadow-bottom bg-white font-semibold mr-2 p-[0px] tracking-wide ${viewButtonStyles}`}
+                            className={`rounded-[24px] flex items-center justify-center  h-[42px] w-[42px] shadow-bottom bg-white font-semibold mr-2 p-0 tracking-wide ${viewButtonStyles}`}
                             role="button"
                             name="notification-view-button"
                         >

package/src/components/NotificationUserAcceptedBoostCard/NotificationUserAcceptedBoostCard.tsx

@@ -71,7 +71,7 @@ export const NotificationUserAcceptedBoostCard: React.FC<
                     <div className="flex items-center justify-end w-full mt-3">
                         <button
                             onClick={handleCancelClick}
-                            className={`rounded-[24px] flex items-center justify-center  h-[42px] w-[42px] shadow-bottom bg-white font-semibold mr-2 p-[0px] tracking-wide ${viewButtonStyles}`}
+                            className={`rounded-[24px] flex items-center justify-center  h-[42px] w-[42px] shadow-bottom bg-white font-semibold mr-2 p-0 tracking-wide ${viewButtonStyles}`}
                             role="button"
                             name="notification-view-button"
                         >

package/src/components/NotificationUserCard/NotificationUserCard.tsx

@@ -96,7 +96,7 @@ export const NotificationUserCard: React.FC<NotificationUserCardProps> = ({
 
                         <button
                             onClick={handleCancelClick}
-                            className={`rounded-[24px] flex items-center justify-center  h-[42px] w-[42px] shadow-bottom bg-white font-semibold mr-2 p-[0px] tracking-wide ${viewButtonStyles}`}
+                            className={`rounded-[24px] flex items-center justify-center  h-[42px] w-[42px] shadow-bottom bg-white font-semibold mr-2 p-0 tracking-wide ${viewButtonStyles}`}
                             role="button"
                             name="notification-view-button"
                         >

package/src/components/RoundedPill/RoundedPill.tsx

@@ -87,7 +87,7 @@ export const RoundedPill: React.FC<RoundedPillProps> = ({
 }) => {
     const backgroundColor = `bg-${TYPE_TO_BG_COLOR_CLASS[type]}`;
     const iconBgColor = `bg-${TYPE_TO_FOREGROUND_COLOR[type]}`;
-    const circleClass = `flex w-full items-center justify-center icon-display h-[40px] w-[40px] rounded-full ${iconBgColor}  absolute flex-shrink-0 `;
+    const circleClass = `flex w-full items-center justify-center icon-display h-[40px] w-[40px] rounded-full ${iconBgColor}  absolute shrink-0 `;
 
     const handleClick = () => {
         onClick?.();
@@ -108,7 +108,7 @@ export const RoundedPill: React.FC<RoundedPillProps> = ({
             {!locked && (
                 <div className={circleClass}>
                     <img
-                        className="h-full w-full object-cover max-h-[24px] max-w-[24px] flex-shrink-0 "
+                        className="h-full w-full object-cover max-h-[24px] max-w-[24px] shrink-0 "
                         src={iconSrc ?? ''}
                         alt="Icon image"
                     />

package/src/components/SchoolIdCard/SchoolIDCard.tsx

@@ -29,7 +29,7 @@ export const SchoolIDCard: React.FC<SchoolIDCardProps> = ({
     if (userImage && userImage?.trim() !== '') {
         issueeImageEl = (
             <div
-                className="h-[80px] w-[80px] rounded-full overflow-hidden bg-no-repeat bg-cover bg-center border-solid border-[2px] border-white mr-2"
+                className="h-[80px] w-[80px] rounded-full overflow-hidden bg-no-repeat bg-cover bg-center border-solid border-2 border-white mr-2"
                 style={{ backgroundImage: `url(${userImage})` }}
             />
         );

package/src/components/VCDisplayBackFace/VCDisplayBackFace.tsx

@@ -42,7 +42,7 @@ export const VCDisplayBackFace: React.FC<VCDisplayCardProps> = ({
                 <h6 className="line-clamp-1 text-grayscale-900 font-bold uppercase text-xs tracking-wider subpixel-antialiased">
                     Issuer
                 </h6>
-                <p className="max-w-[344px] line-clamp-1 subpixel-antialiased text-grayscale-600 text-[14px] block overflow-ellipsis break-all">
+                <p className="max-w-[344px] line-clamp-1 subpixel-antialiased text-grayscale-600 text-[14px] block text-ellipsis break-all">
                     {issuerName}
                 </p>
             </div>
@@ -59,10 +59,10 @@ export const VCDisplayBackFace: React.FC<VCDisplayCardProps> = ({
 
     return (
         <div
-            className={`z-[9] vc-display-main-card-back flex overflow-hidden flex-col items-center justify-between relative max-w-[400px] h-[100%] max-h-[1100px] min-h-[600px] p-7 rounded-3xl shadow-3xl bg-emerald-700 vc-display-card-full-container ${className}`}
+            className={`z-[9] vc-display-main-card-back flex overflow-hidden flex-col items-center justify-between relative max-w-[400px] h-full max-h-[1100px] min-h-[600px] p-7 rounded-3xl shadow-3xl bg-emerald-700 vc-display-card-full-container ${className}`}
         >
             <section className="flex max-h-[150px] items-end bg-white rounded-bl-[50%] rounded-br-[50%] absolute top-0 w-[110%] h-[55%] min-h-[400px]"></section>
-            <section className="flex flex-col items-center justify-center w-full z-10 text-left credential-details-container max-w-[100%] relative">
+            <section className="flex flex-col items-center justify-center w-full z-10 text-left credential-details-container max-w-full relative">
                 <section className="flex flex-row items-start justify-start w-full line-clamp-2">
                     <h3
                         className="text-2xl line-clamp-2 tracking-wide leading-snug text-left text-emerald-700"
@@ -91,7 +91,7 @@ export const VCDisplayBackFace: React.FC<VCDisplayCardProps> = ({
                     </span>
                 </button>
 
-                <section className="flex-col items-center justify-center checklist-container justify-center w-[100%] width-full mt-[20px]">
+                <section className="flex-col items-center justify-center checklist-container justify-center w-full width-full mt-[20px]">
                     <VCVerificationCheckWithText loading={loading} />
                     <section>
                         {verification.map(item => (

package/src/components/VCDisplayCard/VCDisplayCard.stories.tsx

@@ -47,7 +47,7 @@ const DetailsOverrideTest = (
             <h6 className="line-clamp-1 text-grayscale-900 font-bold uppercase text-xs tracking-wider subpixel-antialiased">
                 Issuer
             </h6>
-            <p className="max-w-[344px] line-clamp-1 subpixel-antialiased text-grayscale-600 text-[14px] block overflow-ellipsis break-all">
+            <p className="max-w-[344px] line-clamp-1 subpixel-antialiased text-grayscale-600 text-[14px] block text-ellipsis break-all">
                 override details issuer override details issuer override details issuer override
                 details issuer override details issuer override details issuer
             </p>
@@ -57,7 +57,7 @@ const DetailsOverrideTest = (
             <h6 className="line-clamp-1 text-grayscale-900 font-bold uppercase text-xs tracking-wider subpixel-antialiased">
                 other field
             </h6>
-            <p className="max-w-[344px] line-clamp-1 subpixel-antialiased text-grayscale-600 text-[14px] block overflow-ellipsis break-all">
+            <p className="max-w-[344px] line-clamp-1 subpixel-antialiased text-grayscale-600 text-[14px] block text-ellipsis break-all">
                 override details
             </p>
         </div>

package/src/components/VCDisplayCard2/IssueHistoryBox.tsx

@@ -15,7 +15,7 @@ const IssueHistoryBox: React.FC<SkillsBoxProps> = ({
     let renderIssueHistory = issueHistory?.map(issueItem => {
         return (
             <div
-                className="flex items-center issue-log-item border-b-[1px] last:border-b-0 py-[5px] border-grayscale-200 border-solid w-full"
+                className="flex items-center issue-log-item border-b last:border-b-0 py-[5px] border-grayscale-200 border-solid w-full"
                 key={issueItem?.id}
             >
                 <div className="profile-thumb-img vc-issuee-image h-[35px] w-[35px] rounded-full overflow-hidden">

package/src/components/VCDisplayCard2/MediaAttachmentsBox.tsx

@@ -157,8 +157,9 @@ const MediaAttachmentsBox: React.FC<MediaAttachmentsBoxProps> = ({
                                     className="absolute top-0 left-0 right-0 bottom-0 bg-cover bg-no-repeat font-poppins text-white text-[12px] font-[400] leading-[17px] flex flex-col justify-end items-start p-[10px] text-left bg-rose-600 rounded-[15px]"
                                     style={{
                                         backgroundImage: metadata?.imageUrl
-                                            ? `linear-gradient(180deg, rgba(0, 0, 0, 0) 44.20%, rgba(0, 0, 0, 0.6) 69%), url(${metadata?.imageUrl ?? ''
-                                            })`
+                                            ? `linear-gradient(180deg, rgba(0, 0, 0, 0) 44.20%, rgba(0, 0, 0, 0.6) 69%), url(${
+                                                  metadata?.imageUrl ?? ''
+                                              })`
                                             : undefined,
                                     }}
                                 >
@@ -166,8 +167,9 @@ const MediaAttachmentsBox: React.FC<MediaAttachmentsBoxProps> = ({
                                         <VideoIcon size="60" className="m-auto" />
                                     )}
                                     <div
-                                        className={`absolute ${iconTop ? 'top-[10px]' : 'bottom-[10px]'
-                                            } left-[10px] z-10 flex items-center gap-[5px]`}
+                                        className={`absolute ${
+                                            iconTop ? 'top-[10px]' : 'bottom-[10px]'
+                                        } left-[10px] z-10 flex items-center gap-[5px]`}
                                     >
                                         {metadata?.imageUrl && <VideoIcon />}
                                         {metadata?.videoLength && (
@@ -183,7 +185,10 @@ const MediaAttachmentsBox: React.FC<MediaAttachmentsBoxProps> = ({
                         } else {
                             innerContent = (
                                 <div className="absolute top-0 left-0 right-0 bottom-0 h-full w-full flex items-center justify-center">
-                                    <img className="rounded-[15px] object-cover h-full w-full" src={media.url} />
+                                    <img
+                                        className="rounded-[15px] object-cover h-full w-full"
+                                        src={media.url}
+                                    />
                                     <Camera className="absolute bottom-[10px] left-[10px] z-10" />
                                 </div>
                             );

package/src/components/VCDisplayCard2/VC2FrontFaceInfo.tsx

@@ -134,7 +134,7 @@ const VC2FrontFaceInfo: React.FC<VC2FrontFaceInfoProps> = ({
                 avatarIconClassName={avatarSilhouetteClassName}
                 avatarSilhouetteClassName={avatarSilhouetteClassName}
                 avatarFallbackVariant={avatarFallbackVariant}
-                customContainerClass={`h-full w-full ${bigText ? '!text-4xl' : ''}`}
+                customContainerClass={`h-full w-full ${bigText ? 'text-4xl!' : ''}`}
             />
         );
     };
@@ -205,7 +205,7 @@ const VC2FrontFaceInfo: React.FC<VC2FrontFaceInfoProps> = ({
                         <>
                             <h3 className="flex flex-col text-center leading-[130%] w-full">
                                 {!issueeDisplay.isMissing && issueeDisplay.isDidValue && (
-                                    <span className="flex flex-wrap items-baseline justify-center gap-x-1 text-[17px] leading-normal font-[600] font-poppins max-w-full break-words">
+                                    <span className="flex flex-wrap items-baseline justify-center gap-x-1 text-[17px] leading-normal font-semibold font-poppins max-w-full wrap-break-word">
                                         <span className="text-grayscale-900">Digital ID:</span>
                                         <span className="text-grayscale-500 underline">
                                             {issueeDisplay.displayName}
@@ -213,7 +213,7 @@ const VC2FrontFaceInfo: React.FC<VC2FrontFaceInfoProps> = ({
                                     </span>
                                 )}
                                 {!issueeDisplay.isMissing && !issueeDisplay.isDidValue && (
-                                    <span className="font-poppins font-semibold text-[20px] leading-[130%] max-w-full line-clamp-2 break-words text-grayscale-900">
+                                    <span className="font-poppins font-semibold text-[20px] leading-[130%] max-w-full line-clamp-2 wrap-break-word text-grayscale-900">
                                         {issueeDisplay.displayName}
                                     </span>
                                 )}
@@ -239,12 +239,12 @@ const VC2FrontFaceInfo: React.FC<VC2FrontFaceInfoProps> = ({
                                         {createdAt}
                                     </span>
                                     {!issuerDisplay.isMissing && (
-                                        <span className="issued-by max-w-full break-words text-center line-clamp-2 text-[14px]">
+                                        <span className="issued-by max-w-full wrap-break-word text-center line-clamp-2 text-[14px]">
                                             <span className="font-medium text-grayscale-900">
                                                 {t('credential.by')}
                                             </span>{' '}
                                             {issuerDisplay.isDidValue ? (
-                                                <span className="font-[600] font-poppins break-words">
+                                                <span className="font-semibold font-poppins wrap-break-word">
                                                     <span className="text-grayscale-900">
                                                         Digital ID:
                                                     </span>{' '}
@@ -253,7 +253,7 @@ const VC2FrontFaceInfo: React.FC<VC2FrontFaceInfoProps> = ({
                                                     </span>
                                                 </span>
                                             ) : (
-                                                <strong className="font-bold text-grayscale-900 break-words">
+                                                <strong className="font-bold text-grayscale-900 wrap-break-word">
                                                     {issuerDisplay.displayName}
                                                 </strong>
                                             )}

package/src/components/VCDisplayCard2/VCDisplayCard2.tsx

@@ -351,7 +351,7 @@ export const VCDisplayCard2: React.FC<VCDisplayCard2Props> = ({
 
     // these are constants so that the real header and the hidden-for-spacing header are identical
     const headerClassName =
-        'vc-card-header px-[20px] pb-[10px] pt-[3px] overflow-visible mt-[40px] text-center bg-white border-y-[5px] border-[#EEF2FF] w-[calc(100%_+_16px)] rounded-t-[8px] z-50';
+        'vc-card-header px-[20px] pb-[10px] pt-[3px] overflow-visible mt-[40px] text-center bg-white border-y-[5px] border-[#EEF2FF] w-[calc(100%+16px)] rounded-t-[8px] z-50';
     const headerFitTextClassName =
         'vc-card-header-main-title text-[#18224E] pt-[3px] leading-[80%] text-[32px]';
 

package/src/components/VCDisplayCard2/VCDisplayCard2AvatarFallbacks.stories.tsx

@@ -252,8 +252,8 @@ const AvatarFallbackMatrix: React.FC<{ matrixType: AvatarFallbackMatrixType }> =
 
     return (
         <div className="bg-grayscale-100 min-h-screen p-8">
-            <div className="mx-auto max-w-[1200px] space-y-8">
-                <div className="space-y-2">
+            <div className="mx-auto max-w-[1200px] space-y-v3-8">
+                <div className="space-y-v3-2">
                     <h1 className="text-xl font-semibold text-grayscale-900 font-poppins">
                         {heading}
                     </h1>
@@ -267,9 +267,9 @@ const AvatarFallbackMatrix: React.FC<{ matrixType: AvatarFallbackMatrixType }> =
                     {matrixCases.map(testCase => (
                         <section
                             key={testCase.title}
-                            className="rounded-[28px] bg-white p-6 shadow-[0_18px_50px_rgba(24,34,78,0.12)] space-y-4"
+                            className="rounded-[28px] bg-white p-6 shadow-[0_18px_50px_rgba(24,34,78,0.12)] space-y-v3-4"
                         >
-                            <div className="space-y-1">
+                            <div className="space-y-v3-1">
                                 <h2 className="text-lg font-semibold text-grayscale-900 font-poppins">
                                     {testCase.title}
                                 </h2>

package/src/components/VCDisplayCard2/VCIDDisplayFrontFace.tsx

@@ -141,8 +141,8 @@ const VCIDDisplayFrontFace: React.FC<VCIDDisplayFrontFaceProps> = ({
                                     <TruncateTextBox
                                         text={description}
                                         className="description-box"
-                                        containerClassName="!p-0 !shadow-none !text-center !w-full"
-                                        textClassName="!font-poppins !text-base !text-grayscale-700 !text-center !w-full"
+                                        containerClassName="p-0! shadow-none! text-center! w-full!"
+                                        textClassName="font-poppins! text-base! text-grayscale-700! text-center! w-full!"
                                         truncateThreshold={204}
                                     />
                                 </>
@@ -178,31 +178,31 @@ const VCIDDisplayFrontFace: React.FC<VCIDDisplayFrontFaceProps> = ({
                                 }`}
                             >
                                 {isSelfVerified && (
-                                    <span className="uppercase font-poppins text-base font-[500] text-green-dark flex gap-[3px] items-center">
+                                    <span className="uppercase font-poppins text-base font-medium text-green-dark flex gap-[3px] items-center">
                                         <PersonBadge className="w-[20px] h-[20px]" />
                                         Self Issued
                                     </span>
                                 )}
                                 {verifierState === VERIFIER_STATES.trustedVerifier && (
-                                    <span className="uppercase font-poppins text-base font-[500] text-blue-light flex gap-[3px] items-center text-center">
+                                    <span className="uppercase font-poppins text-base font-medium text-blue-light flex gap-[3px] items-center text-center">
                                         <VerifiedBadge className="w-[20px] h-[20px]" />
                                         {unknownVerifierTitle ?? 'Trusted Issuer'}
                                     </span>
                                 )}
                                 {verifierState === VERIFIER_STATES.unknownVerifier && (
-                                    <span className="uppercase font-poppins text-base font-[500] text-orange-500 flex gap-[3px] items-center">
+                                    <span className="uppercase font-poppins text-base font-medium text-orange-500 flex gap-[3px] items-center">
                                         <UnknownVerifierBadge className="w-[20px] h-[20px]" />
                                         Unknown Issuer
                                     </span>
                                 )}
                                 {verifierState === VERIFIER_STATES.appIssuer && (
-                                    <span className="uppercase font-poppins text-base font-[500] text-cyan-600 flex gap-[3px] items-center">
+                                    <span className="uppercase font-poppins text-base font-medium text-cyan-600 flex gap-[3px] items-center">
                                         <VerifiedBadge className="w-[20px] h-[20px]" />
                                         App Issuer
                                     </span>
                                 )}
                                 {verifierState === VERIFIER_STATES.untrustedVerifier && (
-                                    <span className="uppercase font-poppins text-base font-[500] text-red-mastercard flex gap-[3px] items-center">
+                                    <span className="uppercase font-poppins text-base font-medium text-red-mastercard flex gap-[3px] items-center">
                                         <RedFlag className="w-[20px] h-[20px]" />
                                         Untrusted Issuer
                                     </span>

package/src/components/VCDisplayCard2/VerificationRow.tsx

@@ -63,7 +63,7 @@ const VerificationRow: React.FC<VerificationRowProps> = ({ verification }) => {
     const infoText = ''; // if we want certain verifications to have extra explanation, we can set this variable
 
     return (
-        <div className="verification-row flex flex-col gap-[5px] font-poppins border-b-[1px] border-grayscale-200 border-solid w-full py-[10px] last:border-0 last:pb-0">
+        <div className="verification-row flex flex-col gap-[5px] font-poppins border-b border-grayscale-200 border-solid w-full py-[10px] last:border-0 last:pb-0">
             <span
                 className="font-[700] text-[11px] leading-[16px] uppercase flex items-center gap-[3px] select-none"
                 style={{ color: statusColor }}

package/src/components/VCDisplayCard2/__tests__/VC2FrontFaceInfo.test.tsx

@@ -124,7 +124,7 @@ describe('VC2FrontFaceInfo', () => {
         expect(issuedBy).not.toBeNull();
         // The bug was whitespace-nowrap forcing one line that overflowed the card.
         expect(issuedBy?.className).not.toContain('whitespace-nowrap');
-        expect(issuedBy?.className).toContain('break-words');
+        expect(issuedBy?.className).toContain('wrap-break-word');
         // line-clamp-2 only clamps on a block/-webkit-box, not a flex container,
         // so the container must NOT be `flex` (the original review-miss).
         expect(issuedBy?.className).toContain('line-clamp-2');

package/src/components/VCDisplayFrontFace/VCDisplayFrontFace.tsx

@@ -75,7 +75,7 @@ const VCDisplayFrontFace: React.FC<VCDisplayCardProps> = ({
 
     return (
         <div
-            className={`z-[9] vc-display-main-card-front flex overflow-hidden flex-col items-center justify-between relative max-w-[400px] h-[100%] min-h-[600px] p-7 rounded-3xl shadow-3xl bg-emerald-700 vc-display-card-full-container ${className}`}
+            className={`z-[9] vc-display-main-card-front flex overflow-hidden flex-col items-center justify-between relative max-w-[400px] h-full min-h-[600px] p-7 rounded-3xl shadow-3xl bg-emerald-700 vc-display-card-full-container ${className}`}
         >
             <section className="bg-white rounded-bl-[50%] rounded-br-[50%] absolute top-0 w-[110%] h-[77%]"></section>
             <section className="flex flex-col items-center justify-center z-10 text-center credential-thumb-img">

package/src/components/VCVerificationPill/VCVerificationPill.tsx

@@ -45,7 +45,7 @@ export const ValidationStateIndicator: React.FC<VerifiableStateIndicatorProps> =
 
     return (
         <div className={`relative rounded-full w-[30px] h-[30px] ${bgColor}`}>
-            <div className="relative w-[100%] h-[100%] flex items-center justify-center rounded-[50%] bg-white rounded-full overflow-hidden">
+            <div className="relative w-full h-full flex items-center justify-center rounded-[50%] bg-white rounded-full overflow-hidden">
                 <img
                     className="h-full w-full object-contain p-1"
                     src={source ?? ''}

package/src/components/svgs/PuzzlePiece.tsx

@@ -4,9 +4,9 @@ const PuzzlePiece: React.FC<{
     className?: string;
     size?: string;
     fill?: string;
-    version?: 'outline' | 'filled' | 'with-plus';
-}> = ({ className = '', size = '21', fill = 'none', version = 'outline' }) => {
-    if (version === 'outline') {
+    version?: 'outline-solid' | 'filled' | 'with-plus';
+}> = ({ className = '', size = '21', fill = 'none', version = 'outline-solid' }) => {
+    if (version === 'outline-solid') {
         return (
             <svg
                 width={size}

package/src/helpers/credential.helpers.test.ts

@@ -106,3 +106,99 @@ describe('Credential Helpers', () => {
         });
     });
 });
+
+describe('award-date formatting', () => {
+    it.each(['awarded', 'issuance'] as const)(
+        'falls back safely for a large malformed award date in %s mode',
+        dateType => {
+            const options = { uppercaseDate: false, dateType } as const;
+            const malformed = ' '.repeat(100_000);
+            expect(
+                getInfoFromCredential(
+                    { ...VC2CredentialWithValidFrom, awardedDate: malformed } as never,
+                    'MMM dd, yyyy',
+                    options
+                ).createdAt
+            ).toBe(
+                getInfoFromCredential(VC2CredentialWithValidFrom as never, 'MMM dd, yyyy', options)
+                    .createdAt
+            );
+        }
+    );
+    it.each(['2027-10-01T00:30+02', '2027-10-01T00:30+0200', '2027-10-01T00:30+02:00'])(
+        'recognizes an explicit award timezone in %s',
+        awardedDate => {
+            expect(
+                getInfoFromCredential(
+                    { ...VC2CredentialWithValidFrom, awardedDate } as never,
+                    'MMM dd, yyyy',
+                    { uppercaseDate: false, dateType: 'awarded' }
+                ).createdAt
+            ).toBe('Sep 30, 2027');
+        }
+    );
+    it.each(['20271001', '2027-10-01T00:00', '2027-10-01T00:00:00', '2027-10-01T20:00:00'])(
+        'shows a consistent calendar award day for %s',
+        awardedDate => {
+            expect(
+                getInfoFromCredential(
+                    { ...VC2CredentialWithValidFrom, awardedDate } as never,
+                    'MMM dd, yyyy',
+                    { uppercaseDate: false, dateType: 'awarded' }
+                ).createdAt
+            ).toBe('Oct 01, 2027');
+        }
+    );
+    it('uses the standard award date only when requested and retains issuance metadata', () => {
+        const credential = { ...VC2CredentialWithValidFrom, awardedDate: '2027-10-01T00:00:00Z' };
+        expect(
+            getInfoFromCredential(credential as never, 'MMM dd, yyyy', {
+                uppercaseDate: false,
+                dateType: 'awarded',
+            }).createdAt
+        ).toBe('Oct 01, 2027');
+        expect(getInfoFromCredential(credential as never).createdAt).toBe(
+            getInfoFromCredential(VC2CredentialWithValidFrom as never).createdAt
+        );
+    });
+    it('falls back for missing or invalid award dates without inventing a date for an undated draft', () => {
+        expect(
+            getInfoFromCredential(
+                { ...VC2CredentialWithValidFrom, awardedDate: 'not-a-date' } as never,
+                'MMM dd, yyyy',
+                { uppercaseDate: false, dateType: 'awarded' }
+            ).createdAt
+        ).toBe(
+            getInfoFromCredential(VC2CredentialWithValidFrom as never, 'MMM dd, yyyy', {
+                uppercaseDate: false,
+            }).createdAt
+        );
+        expect(
+            getInfoFromCredential(VC2CredentialNoDate as never, 'MMM dd, yyyy', {
+                dateType: 'awarded',
+            }).createdAt
+        ).toBe('');
+    });
+    it('keeps the UTC award day stable at a timezone boundary', () => {
+        expect(
+            getInfoFromCredential(
+                {
+                    ...VC2CredentialWithValidFrom,
+                    awardedDate: '2027-10-01T23:30:00-02:00',
+                } as never,
+                'MMM dd, yyyy',
+                { uppercaseDate: false, dateType: 'awarded' }
+            ).createdAt
+        ).toBe('Oct 02, 2027');
+    });
+});
+
+it('treats a date-only award as a UTC calendar day', () => {
+    expect(
+        getInfoFromCredential(
+            { ...VC2CredentialWithValidFrom, awardedDate: '2027-10-01' } as never,
+            'MMM dd, yyyy',
+            { uppercaseDate: false, dateType: 'awarded' }
+        ).createdAt
+    ).toBe('Oct 01, 2027');
+});

package/src/helpers/credential.helpers.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { format } from 'date-fns';
+import { format, isValid, parseISO } from 'date-fns';
 
 import {
     Image,
@@ -43,7 +43,9 @@ export const getImageFromProfile = (profile: Profile): string => {
 export const getInfoFromCredential = (
     credential: VC | AchievementCredential,
     dateFormat: string = 'dd MMM yyyy',
-    options: { uppercaseDate?: boolean } = { uppercaseDate: true }
+    options: { uppercaseDate?: boolean; dateType?: 'issuance' | 'awarded' } = {
+        uppercaseDate: true,
+    }
 ): CredentialInfo => {
     const { issuer, issuanceDate, validFrom } = credential;
 
@@ -57,12 +59,29 @@ export const getInfoFromCredential = (
 
     // Support both VC 2.0 (validFrom) and VC 1.0 (issuanceDate)
     // Gracefully handle missing dates
-    const dateValue = validFrom || issuanceDate;
+    const awardDateText = typeof credential.awardedDate === 'string' ? credential.awardedDate : '';
+    const awardedDate =
+        options.dateType === 'awarded' && awardDateText ? parseISO(awardDateText) : undefined;
+    const validAwardedDate = awardedDate && isValid(awardedDate) ? awardedDate : undefined;
+    const dateValue = validAwardedDate ?? (validFrom || issuanceDate);
     let createdAt = '';
 
     if (dateValue) {
         try {
-            createdAt = format(new Date(dateValue), dateFormat);
+            const date = dateValue instanceof Date ? dateValue : new Date(dateValue);
+            // Offset-less ISO values describe a calendar day. Only explicit
+            // instants need UTC conversion, matching the Details date helper.
+            // Inspect at most six suffix characters; never scan arbitrary input
+            // with a backtracking wildcard when looking for a timezone.
+            const hasAwardOffset =
+                validAwardedDate &&
+                (awardDateText.includes('T') || awardDateText.includes(' ')) &&
+                /(?:Z|[+-]\d{2}(?::?\d{2})?)$/i.test(awardDateText.slice(-6));
+            const displayDate =
+                validAwardedDate && hasAwardOffset
+                    ? new Date(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate())
+                    : date;
+            createdAt = format(displayDate, dateFormat);
             if (options.uppercaseDate) {
                 createdAt = createdAt.toUpperCase();
             }

package/src/helpers/useScrollBorders.ts

@@ -2,9 +2,9 @@ import React, { useEffect, type RefObject } from 'react';
 
 export const useScrollBorders = <Ref extends HTMLElement>({
     ref,
-    topShowClassName = 'border-t border-t-[--color-grayscale-line]',
+    topShowClassName = 'border-t border-t-(--color-grayscale-line)',
     topHideClassName = 'border-t border-t-transparent',
-    bottomShowClassName = 'border-b border-b-[--color-grayscale-line]',
+    bottomShowClassName = 'border-b border-b-(--color-grayscale-line)',
     bottomHideClassName = 'border-b border-b-transparent',
 }: {
     ref?: RefObject<Ref>;