@learncard/react 2.12.11 → 3.0.1

package/src/assets/styles/theme.css

@@ -0,0 +1,94 @@
+/* Keep utilities unlayered to preserve the existing Ionic/Sass cascade. */
+@import 'tailwindcss/theme.css' layer(theme);
+@import 'tailwindcss/utilities.css' source(none);
+@import '../../../../learn-card-base/src/assets/styles/tailwind-v3-theme.css';
+@import '../../../../learn-card-base/src/assets/styles/tailwind-v3-colors.css'
+    theme(inline reference);
+@source "../../**/*.{js,jsx,ts,tsx}";
+@source inline("bg-orange-200");
+@source inline("bg-orange-300");
+@source inline("bg-orange-700");
+@source inline("border-orange-700");
+@source inline("text-orange-700");
+@source inline("text-orange-900");
+
+@theme inline reference {
+    --color-grayscale-50: #fbfbfc;
+    --color-grayscale-100: #eff0f5;
+    --color-grayscale-200: #e2e3e9;
+    --color-grayscale-300: #c5c8d3;
+    --color-grayscale-400: #a8acbd;
+    --color-grayscale-500: #8b91a7;
+    --color-grayscale-600: #6f7590;
+    --color-grayscale-700: #52597a;
+    --color-grayscale-800: #353e64;
+    --color-grayscale-900: #18224e;
+    --color-emerald-50: #d6faf0;
+    --color-emerald-100: #bfeee1;
+    --color-emerald-200: #9fe5d2;
+    --color-emerald-300: #80e0c6;
+    --color-emerald-400: #34eab9;
+    --color-emerald-500: #40cba6;
+    --color-emerald-600: #20c397;
+    --color-emerald-700: #00ba88;
+    --color-emerald-800: #008b66;
+    --color-emerald-900: #004633;
+    --color-cyan-50: #e7f9fd;
+    --color-cyan-100: #d0f3fc;
+    --color-cyan-200: #a0e7f8;
+    --color-cyan-300: #a0e7f8;
+    --color-cyan-400: #88e0f7;
+    --color-cyan-500: #71daf5;
+    --color-cyan-600: #59d4f4;
+    --color-cyan-700: #41cef2;
+    --color-cyan-800: #319bb5;
+    --color-cyan-900: #184d5b;
+    --color-spice-50: #ffede7;
+    --color-spice-100: #ffdbcf;
+    --color-spice-200: #ffb7a0;
+    --color-spice-300: #ff9470;
+    --color-spice-400: #ff7040;
+    --color-spice-500: #ff5820;
+    --color-spice-600: #ff4000;
+    --color-spice-700: #df3800;
+    --color-spice-800: #bf3000;
+    --color-spice-900: #802000;
+    --color-indigo-50: #eef2ff;
+    --color-indigo-100: #e0e7ff;
+    --color-indigo-200: #c7d2fe;
+    --color-indigo-300: #a5b4fc;
+    --color-indigo-400: #818cf8;
+    --color-indigo-500: #6366f1;
+    --color-indigo-600: #4f46e5;
+    --color-indigo-700: #4338ca;
+    --color-indigo-800: #3730a3;
+    --color-indigo-900: #312e81;
+    --color-blue-light: #026bff;
+    --color-green-dark: #05b65d;
+    --color-orange-500: #ef5d35;
+    --color-orange-800: #9a3412;
+    --color-red-mastercard: #eb001b;
+}
+
+@theme static {
+    --shadow-bottom: 0px 4px 0px rgba(0, 0, 0, 0.25);
+    --shadow-3xl: 0px 0px 8px rgba(0, 0, 0, 0.25);
+    --shadow-card-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
+    --spacing-25pct: 25%;
+}
+
+/* Emit literal card font families, as V3 did. Host app tokens use the same
+   names and must not retroactively change utilities compiled by this package. */
+@theme inline {
+    --font-mouse: 'Mouse Memoirs';
+    --font-montserrat: Montserrat, Helvetica, Serif;
+    --font-poppins: Poppins;
+    --font-jacques: 'Jacques Francois';
+    --font-sacramento: Sacramento;
+}
+
+@custom-variant xxsm (@media (max-width: 240px));
+@custom-variant xxxsm (@media (max-width: 200px));
+@utility text-shadow {
+    text-shadow: 1px 2px 0px rgb(0 0 0 / 35%);
+}

package/src/assets/styles/theme.test.ts

@@ -0,0 +1,67 @@
+// @vitest-environment node
+import { describe, expect, it } from 'vitest';
+import { compile } from '@tailwindcss/node';
+import { resolve } from 'node:path';
+import { rollup } from 'rollup';
+import configs from '../../../rollup.config.js';
+
+describe('published stylesheet theme contract', () => {
+    it('keeps palette tokens out of the actual Rollup CSS assets', async () => {
+        const config = configs[1];
+        const bundle = await rollup(config);
+        try {
+            const { output } = await bundle.generate(config.output[0]);
+            const styles = output.filter(
+                asset => asset.type === 'asset' && asset.fileName.endsWith('.css')
+            );
+            expect(styles.map(asset => asset.fileName).sort()).toEqual(['base.css', 'main.css']);
+            for (const asset of styles) {
+                if (asset.type !== 'asset') continue;
+                const css =
+                    typeof asset.source === 'string'
+                        ? asset.source
+                        : Buffer.from(asset.source).toString('utf8');
+                expect(css).not.toMatch(/--color-[\w-]+\s*:/);
+                expect(css).not.toMatch(/--tw-border-style:\s*none/);
+                if (asset.fileName === 'main.css') {
+                    expect(css).toContain('#d6faf0');
+                    expect(css).toContain('#ef5d35');
+                }
+            }
+        } finally {
+            await bundle.close();
+        }
+    });
+
+    it('inlines the original palette and fonts without exporting host color tokens', async () => {
+        const compiler = await compile("@import './src/assets/styles/main.css';", {
+            base: resolve('.'),
+            onDependency: () => undefined,
+        });
+        const css = compiler.build([
+            'bg-emerald-50',
+            'text-orange-500',
+            'bg-rose-500',
+            'font-jacques',
+            'text-xs',
+        ]);
+        expect(css).toMatch(/\.bg-emerald-50\s*\{\s*background-color: #d6faf0;/);
+        expect(css).toMatch(/\.text-orange-500\s*\{\s*color: #ef5d35;/);
+        expect(css).toMatch(/\.bg-rose-500\s*\{\s*background-color: #f43f5e;/);
+        expect(css).toMatch(/font-family: ["']?Jacques Francois["']?;/);
+        expect(css).not.toMatch(/--color-[\w-]+\s*:/);
+        expect(css).toContain('--text-xs: 0.75rem');
+    });
+
+    it('keeps the optional reset independent of host palette tokens', async () => {
+        const compiler = await compile("@import './src/assets/styles/base.css';", {
+            base: resolve('.'),
+            onDependency: () => undefined,
+        });
+        const css = compiler.build([]);
+        expect(css).not.toMatch(/--color-[\w-]+\s*:/);
+        expect(css).toContain('border-color: #e5e7eb');
+        expect(css).toContain('color: #9ca3af');
+        expect(css).not.toMatch(/--tw-border-style:\s*none/);
+    });
+});

package/src/components/BoostGenericCard/BoostGenericCard.tsx

@@ -94,7 +94,7 @@ export const BoostGenericCard: React.FC<BoostGenericCardProps> = ({
 
             <button
                 type="button"
-                className="boost-generic-card-button z-10 flex flex-col flex-grow rounded-[20px]"
+                className="boost-generic-card-button z-10 flex flex-col grow rounded-[20px]"
                 onClick={handleInnerClick}
             >
                 {/* Thumbnail — filter on the wrapper so it desaturates a
@@ -127,7 +127,7 @@ export const BoostGenericCard: React.FC<BoostGenericCardProps> = ({
 
                 {/* Details Section: grows to fill available space */}
                 <section
-                    className={`flex flex-col flex-grow items-center justify-end pt-1 w-full ${
+                    className={`flex flex-col grow items-center justify-end pt-1 w-full ${
                         linkedCredentialsCount === 0 ? 'pb-[20px]' : ''
                     }`}
                 >
@@ -156,7 +156,7 @@ export const BoostGenericCard: React.FC<BoostGenericCardProps> = ({
 
                         {/* Verifier & Issuer */}
                         <div className="mt-1 w-full px-4 text-center">
-                            <span className="line-clamp-2 break-words text-[12px] leading-snug text-grayscale-700">
+                            <span className="line-clamp-2 wrap-break-word text-[12px] leading-snug text-grayscale-700">
                                 {verifierBadge && (
                                     <span className="mr-1 inline-block align-middle">
                                         {verifierBadge}

package/src/components/BoostSmallCard/BoostSmallCard.tsx

@@ -52,7 +52,7 @@ export const BoostSmallCard: React.FC<BoostSmallCardProps> = ({
         return (
             <div
                 key={issueItem?.id}
-                className="profile-thumb-img border-[1px] border-white border-solid  vc-issuee-image h-[35px] w-[35px] rounded-full overflow-hidden mx-[-5px]"
+                className="profile-thumb-img border 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 ${

package/src/components/Button/Button.tsx

@@ -11,7 +11,7 @@ export const Button: React.FC<ButtonProps> = ({ text, onClick, className = '' })
         <button
             type="button"
             onClick={onClick}
-            className={`p-4 border rounded text-gray-700 ${className}`}
+            className={`p-4 border rounded-sm text-gray-700 ${className}`}
         >
             {text}
         </button>

package/src/components/CertificateDisplayCard/CertificateAwardDate.test.tsx

@@ -0,0 +1,67 @@
+// @vitest-environment jsdom
+import React from 'react';
+import { render, screen, cleanup } from '@testing-library/react';
+import { afterEach, describe, expect, it } from 'vitest';
+import CertificateFrontFace from './CertificateFrontFace';
+import CertificateBackFace from './CertificateBackFace';
+import MeritBadgeFrontFace from '../MeritBadgeDisplayCard/MeritBadgeFrontFace';
+import MeritBadgeBackFace from '../MeritBadgeDisplayCard/MeritBadgeBackFace';
+import { I18nProvider } from '../../i18n';
+import type { VC } from '@learncard/types';
+
+const credential = {
+    '@context': ['https://www.w3.org/ns/credentials/v2'],
+    type: ['VerifiableCredential', 'OpenBadgeCredential'],
+    issuer: { id: 'did:example:issuer', name: 'Example school' },
+    validFrom: '2026-10-26T12:00:00Z',
+    awardedDate: '2027-10-01T00:00:00Z',
+    credentialSubject: {
+        id: 'did:example:learner',
+        achievement: { name: 'Web Foundations', description: 'Completed the course.' },
+    },
+} as unknown as VC;
+
+afterEach(cleanup);
+
+describe.each([
+    ['certificate front', (value: VC) => <CertificateFrontFace credential={value} />],
+    [
+        'certificate back',
+        (value: VC) => <CertificateBackFace credential={value} verificationItems={[]} />,
+    ],
+    ['award front', (value: VC) => <MeritBadgeFrontFace credential={value} />],
+    ['award back', (value: VC) => <MeritBadgeBackFace credential={value} verificationItems={[]} />],
+] as const)('%s award date', (_, renderFace) => {
+    it('shows the mapped award day instead of the issuance day', () => {
+        render(renderFace(credential));
+        expect(screen.getByText(/^Awarded on Oct 01, 2027(?: by)?$/)).toBeTruthy();
+        expect(screen.queryByText(/Awarded on Oct 26, 2026/)).toBeNull();
+    });
+    it('retains the legacy issuance-date fallback', () => {
+        render(renderFace({ ...credential, awardedDate: undefined }));
+        expect(screen.getByText(/^Awarded on Oct 26, 2026(?: by)?$/)).toBeTruthy();
+    });
+    it('retains the issuance-date fallback when the award date is invalid', () => {
+        render(renderFace({ ...credential, awardedDate: 'not-a-date' }));
+        expect(screen.getByText(/^Awarded on Oct 26, 2026(?: by)?$/)).toBeTruthy();
+    });
+    it('omits the date for an undated draft', () => {
+        render(renderFace({ ...credential, awardedDate: undefined, validFrom: undefined }));
+        expect(screen.queryByText(/Awarded on/)).toBeNull();
+    });
+    it('resolves the award label through the host translation adapter', () => {
+        render(
+            <I18nProvider
+                locale="fr"
+                resolve={(key, params) =>
+                    key.startsWith('credential.awardedOn')
+                        ? `Décernée le ${params?.date}`
+                        : undefined
+                }
+            >
+                {renderFace(credential)}
+            </I18nProvider>
+        );
+        expect(screen.getByText('Décernée le Oct 01, 2027')).toBeTruthy();
+    });
+});

package/src/components/CertificateDisplayCard/CertificateBackFace.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { useT } from '../../i18n';
 import { getCategoryDarkColor, getInfoFromCredential } from '../../helpers/credential.helpers';
 import { VC, VerificationItem } from '@learncard/types';
 import {
@@ -44,8 +45,10 @@ export const CertificateBackFace: React.FC<CertificateBackFaceProps> = ({
     handleViewFrontFace,
     customLinkedCredentialsComponent,
 }) => {
+    const t = useT();
     const { createdAt, credentialSubject } = getInfoFromCredential(credential, 'MMM dd, yyyy', {
         uppercaseDate: false,
+        dateType: 'awarded',
     });
 
     const { description } = credentialSubject?.achievement ?? {};
@@ -83,15 +86,17 @@ export const CertificateBackFace: React.FC<CertificateBackFaceProps> = ({
             )}
 
             <TruncateTextBox headerText="About" text={description}>
-                <span
-                    className={`text-grayscale-600 font-poppins text-[12px] font-[600] w-full ${
-                        description
-                            ? 'pt-[10px] border-t-[1px] border-solid border-grayscale-200'
-                            : ''
-                    }`}
-                >
-                    Awarded on {createdAt}
-                </span>
+                {createdAt && (
+                    <span
+                        className={`text-grayscale-600 font-poppins text-[12px] font-[600] w-full ${
+                            description
+                                ? 'pt-[10px] border-t border-solid border-grayscale-200'
+                                : ''
+                        }`}
+                    >
+                        {t('credential.awardedOn', { date: createdAt })}
+                    </span>
+                )}
             </TruncateTextBox>
 
             {criteria && <TruncateTextBox headerText="Criteria" text={criteria} />}

package/src/components/CertificateDisplayCard/CertificateCornerIcon.tsx

@@ -27,7 +27,7 @@ const CertificateCornerIcon: React.FC<CertificateCornerIconProps> = ({
             break;
         case 'bottom-left':
             iconPositionClassName = 'bottom-0 left-0';
-            cornerPositionClassName = 'top-0 right-0 rotate-[270deg]';
+            cornerPositionClassName = 'top-0 right-0 rotate-270';
             break;
         case 'bottom-right':
             iconPositionClassName = 'bottom-0 right-0';

package/src/components/CertificateDisplayCard/CertificateFrontFace.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { useT } from '../../i18n';
 
 import CertificateCornerIcon from './CertificateCornerIcon';
 import CertificateImageDisplay from './CertificateImageDisplay';
@@ -68,6 +69,7 @@ export const CertificateFrontFace: React.FC<CertificateFrontFaceProps> = ({
     hideFrontFaceDetails,
     onVerifierClick,
 }) => {
+    const t = useT();
     const {
         title = '',
         createdAt,
@@ -75,7 +77,10 @@ export const CertificateFrontFace: React.FC<CertificateFrontFaceProps> = ({
         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;
@@ -166,14 +171,14 @@ export const CertificateFrontFace: React.FC<CertificateFrontFaceProps> = ({
             </div>
 
             <div
-                className={`flex flex-col gap-[15px] items-center px-[20px] pt-[55px] pb-[20px] border-solid border-[4px] ${borderColor} rounded-[30px]`}
+                className={`flex flex-col gap-[15px] items-center px-[20px] pt-[55px] pb-[20px] border-solid border-4 ${borderColor} rounded-[30px]`}
             >
                 <div className="flex flex-col gap-[5px] items-center">
                     <h1 className="text-grayscale-900 text-center text-[20px] font-jacques">
                         {title}
                     </h1>
                     <div
-                        className={`${textLightColor} uppercase text-[14px] font-notoSans font-[600]`}
+                        className={`${textLightColor} uppercase text-[14px] font-notoSans font-semibold`}
                     >
                         {formattedDisplayType}
                     </div>
@@ -218,7 +223,11 @@ export const CertificateFrontFace: React.FC<CertificateFrontFaceProps> = ({
                             </>
                         )}
                     </span>
-                    {!hideIssueDate && <span className="font-jacques">Awarded on {createdAt}</span>}
+                    {!hideIssueDate && createdAt && (
+                        <span className="font-jacques">
+                            {t('credential.awardedOn', { date: createdAt })}
+                        </span>
+                    )}
                 </div>
 
                 <div className="flex flex-col gap-[10px] items-center">
@@ -263,14 +272,14 @@ export const CertificateFrontFace: React.FC<CertificateFrontFaceProps> = ({
                         Certified by
                     </span>
                     {issuerDisplay.isDidValue ? (
-                        <span className="mb-[3px] pt-[3px] text-grayscale-900 text-[14px] leading-[90%] font-jacques tracking-[0.25px] border-b-[1px] border-solid border-grayscale-200 w-full text-center line-clamp-2 break-words scrollbar-hide">
-                            <span className="font-[600]">
+                        <span className="mb-[3px] pt-[3px] text-grayscale-900 text-[14px] leading-[90%] font-jacques tracking-[0.25px] border-b border-solid border-grayscale-200 w-full text-center line-clamp-2 wrap-break-word scrollbar-hide">
+                            <span className="font-semibold">
                                 {issuerDisplay.isDidValue ? 'Digital ID: ' : ''}
                             </span>
                             <span className="text-grayscale-600">{issuerName}</span>
                         </span>
                     ) : (
-                        <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">
                             {issuerName}
                         </span>
                     )}
@@ -282,7 +291,9 @@ export const CertificateFrontFace: React.FC<CertificateFrontFaceProps> = ({
                     />
                 </div>
                 {customBodyContentSlot && customBodyContentSlot}
-                <div className={`${textLightColor} uppercase text-[14px] font-notoSans font-[600]`}>
+                <div
+                    className={`${textLightColor} uppercase text-[14px] font-notoSans font-semibold`}
+                >
                     {categoryTitle}
                 </div>
             </div>

package/src/components/CertificateDisplayCard/CertificateProfileImageDisplay.tsx

@@ -24,7 +24,7 @@ const CertificateProfileImageDisplay: React.FC<CertificateProfileImageDisplayPro
     avatarFallbackVariant = 'initial',
 }) => {
     const imageClassName =
-        'h-[50px] w-[50px] rounded-full overflow-hidden border-[2px] border-solid border-grayscale-200';
+        'h-[50px] w-[50px] rounded-full overflow-hidden border-2 border-solid border-grayscale-200';
     const fingerprintClassName = isIssuer ? 'h-[38px] w-[38px]' : 'h-[36px] w-[36px]';
     const silhouetteClassName = 'h-[38px] w-[38px]';
 

package/src/components/CertificateDisplayCard/MediaAttachmentsBox.tsx

@@ -221,7 +221,7 @@ const MediaAttachmentsBox: React.FC<MediaAttachmentsBoxProps> = ({
                                     className="flex bg-grayscale-100 items-center rounded-[15px] w-full"
                                 >
                                     <button
-                                        className="relative h-[80px] w-[80px] rounded-[15px] overflow-hidden flex-shrink-0"
+                                        className="relative h-[80px] w-[80px] rounded-[15px] overflow-hidden shrink-0"
                                         onClick={e => {
                                             e.stopPropagation();
                                             handleMediaAttachmentClick(media.url, media.type);

package/src/components/CertificateDisplayCard/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/JobHistoryCard/JobHistoryCard.tsx

@@ -21,11 +21,11 @@ export const JobHistoryCard: React.FC<JobHistoryCardProps> = ({
             className={`job-history-card flex h-[88px] max-w-[335px] justify-between shadow-[0_0_8px_0px_rgba(0,0,0,0.2)] relative $ py-[10px] px-[15px] rounded-[20px] ${className}`}
         >
             {dateRange && (
-                <div className="flex flex-shrink-0 rounded-[20px]  bg-emerald-600 pl-[15px] font-bold text-grayscale-50 job-card-date-display w-[108px] h-full items-center">
+                <div className="flex shrink-0 rounded-[20px]  bg-emerald-600 pl-[15px] font-bold text-grayscale-50 job-card-date-display w-[108px] h-full items-center">
                     <p className="line-clamp-2">{dateRange}</p>
                 </div>
             )}
-            <div className="flex flex-grow flex-col job-history-details-display pl-[12px]">
+            <div className="flex grow flex-col job-history-details-display pl-[12px]">
                 <p className="text-grayscale-900 font-bold line-clamp-1">{title}</p>
                 <p className="text-grayscale-600 text-sm line-clamp-1">{company}</p>
                 <p className="text-sm text-indigo-700 uppercase font-bold line-clamp-1">

package/src/components/JobListCard/JobListCard.tsx

@@ -112,15 +112,12 @@ export const JobListCard: React.FC<JobListCardProps> = ({
                     {topText}
                 </div>
             </div>
-            <p className="text-grayscale-500 text-xs line-clamp-1 flex-shrink-0">
-                {' '}
-                {postDateDisplay}
-            </p>
+            <p className="text-grayscale-500 text-xs line-clamp-1 shrink-0"> {postDateDisplay}</p>
 
             <div className="job-listing-center flex mt-[5px]">
                 {imgThumb && (
                     <img
-                        className="object-cover w-[80px] flex-shrink-0 items-center justify-center rounded-[15px] mr-[10px]"
+                        className="object-cover w-[80px] shrink-0 items-center justify-center rounded-[15px] mr-[10px]"
                         src={imgThumb}
                     />
                 )}

package/src/components/LearnCardCreditCardBackFace/LearnCardCreditCardBackFace.tsx

@@ -86,7 +86,7 @@ export const LearnCardCreditCardBackFace: React.FC<LearnCardCreditCardBackFacePr
                         </div>
                     </div>
                     <div>
-                        <div className="h-[33px] w-[55px] rounded-[60px] bg-gradient-to-r from-[#F4F5F5] to-[#E3E5E8]" />
+                        <div className="h-[33px] w-[55px] rounded-[60px] bg-linear-to-r/srgb from-[#F4F5F5] to-[#E3E5E8]" />
                     </div>
                 </div>
 

package/src/components/LearnCardCreditCardFrontFace/LearnCardCreditCardFrontFace.tsx

@@ -43,7 +43,7 @@ export const LearnCardCreditCardFrontFace: React.FC<LearnCardCreditCardFrontFace
                 <div className="absolute top-[-40px] left-0 w-[55%] h-[140%] rounded-tr-[150px] rounded-br-[150px] bg-grayscale-900 credit-card-bubble" />
                 {showActionButton && (
                     <button
-                        className="absolute top-2 right-4 bg-grayscale-500 border-[2px] rounded-3xl border-solid border-color-grayscale-900 min-w-[110px] p-[2px] font-bold text-xs tracking-wide leading-snug text-center text-white"
+                        className="absolute top-2 right-4 bg-grayscale-500 border-2 rounded-3xl border-solid border-color-grayscale-900 min-w-[110px] p-[2px] font-bold text-xs tracking-wide leading-snug text-center text-white"
                         onClick={onClick}
                         data-testid="credit-card-frontface-button"
                     >

package/src/components/MeritBadgeDisplayCard/MediaAttachmentsBox.tsx

@@ -221,7 +221,7 @@ const MediaAttachmentsBox: React.FC<MediaAttachmentsBoxProps> = ({
                                     className="flex media-attachment-box bg-grayscale-100 items-center rounded-[15px] w-full"
                                 >
                                     <button
-                                        className="relative h-[80px] w-[80px] rounded-[15px] overflow-hidden flex-shrink-0"
+                                        className="relative h-[80px] w-[80px] rounded-[15px] overflow-hidden shrink-0"
                                         onClick={e => {
                                             e.stopPropagation();
                                             handleMediaAttachmentClick(media.url, media.type);

package/src/components/MeritBadgeDisplayCard/MeritBadgeBackFace.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { useT } from '../../i18n';
 import { getCategoryDarkColor, getInfoFromCredential } from '../../helpers/credential.helpers';
 import { VC, VerificationItem } from '@learncard/types';
 import {
@@ -44,8 +45,10 @@ export const MeritBadgeBackFace: React.FC<MeritBadgeBackFaceProps> = ({
     handleViewFrontFace,
     customLinkedCredentialsComponent,
 }) => {
+    const t = useT();
     const { createdAt, credentialSubject } = getInfoFromCredential(credential, 'MMM dd, yyyy', {
         uppercaseDate: false,
+        dateType: 'awarded',
     });
 
     const { description } = credentialSubject?.achievement ?? {};
@@ -83,15 +86,17 @@ export const MeritBadgeBackFace: React.FC<MeritBadgeBackFaceProps> = ({
             )}
 
             <TruncateTextBox headerText="About" text={description}>
-                <span
-                    className={`text-grayscale-600 font-poppins text-[12px] font-[600] w-full ${
-                        description
-                            ? 'pt-[10px] border-t-[1px] border-solid border-grayscale-200'
-                            : ''
-                    }`}
-                >
-                    Awarded on {createdAt}
-                </span>
+                {createdAt && (
+                    <span
+                        className={`text-grayscale-600 font-poppins text-[12px] font-[600] w-full ${
+                            description
+                                ? 'pt-[10px] border-t border-solid border-grayscale-200'
+                                : ''
+                        }`}
+                    >
+                        {t('credential.awardedOn', { date: createdAt })}
+                    </span>
+                )}
             </TruncateTextBox>
 
             {criteria && <TruncateTextBox headerText="Criteria" text={criteria} />}

package/src/components/MeritBadgeDisplayCard/MeritBadgeCornerIcon.tsx

@@ -16,20 +16,20 @@ const MeritBadgeCornerIcon: React.FC<MeritBadgeCornerIconProps> = ({ categoryTyp
     switch (position) {
         case 'top-left':
             iconPositionClassName = 'top-[3px] left-[3px] pb-[10px] pr-[10px] pl-[4px] pt-[4px]';
-            cornerPositionClassName = 'bottom-[-1px] right-0';
+            cornerPositionClassName = '-bottom-px right-0';
             break;
         case 'top-right':
             iconPositionClassName = 'top-[3px] right-[3px] pl-[10px] pb-[10px] pr-[4px] pt-[4px]';
-            cornerPositionClassName = 'bottom-[-1px] left-0 rotate-90';
+            cornerPositionClassName = '-bottom-px left-0 rotate-90';
             break;
         case 'bottom-left':
             iconPositionClassName = 'bottom-[3px] left-[3px] pr-[10px] pt-[10px] pl-[4px] pb-[4px]';
-            cornerPositionClassName = 'top-0 right-0 rotate-[270deg]';
+            cornerPositionClassName = 'top-0 right-0 rotate-270';
             break;
         case 'bottom-right':
             iconPositionClassName =
                 'bottom-[3px] right-[3px] pl-[10px] pt-[10px] pr-[4px] pb-[4px]';
-            cornerPositionClassName = 'top-[-1px] left-0 rotate-180';
+            cornerPositionClassName = '-top-px left-0 rotate-180';
             break;
     }