Merge dev into main (production)

.github/workflows/playwright.yml

@@ -17,6 +17,8 @@ jobs:
       run: npm install -g yarn && yarn
     - name: Install Playwright Browsers
       run: yarn playwright install --with-deps
+    - name: Build application
+      run: yarn build
     - name: Run Playwright tests
       run: yarn playwright test
     - uses: actions/upload-artifact@v4

app/claims/ClaimsPageClient.tsx

@@ -518,21 +518,9 @@ const ClaimsPageClient: React.FC = () => {
                           >
                             {getCredentialName(claim)}
                           </Typography>
-                          <Typography
-                            sx={{
-                              color: 'text.secondary',
-                              fontWeight: 'bold',
-                              fontSize: '1.25rem'
-                            }}
-                          >
-                            {getTimeAgo(claim.issuanceDate || new Date().toISOString())}
-                          </Typography>
                         </Box>
                         <Typography sx={{ color: 'text.secondary' }}>
-                          {claim.credentialSubject?.name} - {getCredentialType(claim)} -{' '}
-                          {getTimeDifference(
-                            claim.issuanceDate || new Date().toISOString()
-                          )}
+                          {getCredentialType(claim)}
                         </Typography>
                       </Box>
                     )}

app/components/cards.tsx

@@ -45,6 +45,15 @@ const Card = ({
   showDuration = true,
   showEvidence = true
 }: CardProps) => {
+  // Responsive sizing based on width prop
+  const isSmallCard = width === '160px'
+  const cardFontSizes = {
+    title: isSmallCard ? '12px' : '14px',
+    description: isSmallCard ? '8px' : '9px',
+    criteria: isSmallCard ? '8px' : '9px',
+    evidence: isSmallCard ? '8px' : '9px',
+    label: isSmallCard ? '9px' : '10px'
+  }
   return (
     <Box
       sx={{
@@ -87,14 +96,11 @@ const Card = ({
           <Typography
             sx={{
               color: '#202E5B',
-              // fontSize: '14px',
-              // fontWeight: 600,
               flex: 1,
               ml: '5.5px',
               fontFamily: 'Inter',
-              fontSize: '14px',
+              fontSize: cardFontSizes.title,
               fontWeight: 700,
-              // lineHeight: normal,
               letterSpacing: '0.12px',
               textTransform: 'capitalize'
             }}
@@ -108,9 +114,9 @@ const Card = ({
           sx={{
             color: '#202E5B',
             fontFamily: 'Inter',
-            fontSize: '9px',
+            fontSize: cardFontSizes.description,
             mb: 1,
-            lineHeight: '12px'
+            lineHeight: isSmallCard ? '10px' : '12px'
           }}
         >
           {description}
@@ -184,7 +190,7 @@ const Card = ({
           <Typography
             sx={{
               color: '#000E40',
-              fontSize: '10px',
+              fontSize: cardFontSizes.label,
               fontFamily: 'Inter',
               fontWeight: 400,
               mb: 0.25
@@ -197,7 +203,7 @@ const Card = ({
               key={`criteria-${index}`}
               sx={{
                 color: '#000E40',
-                fontSize: '9px',
+                fontSize: cardFontSizes.criteria,
                 fontFamily: 'Inter',
                 fontWeight: 400,
                 pl: 1,
@@ -214,7 +220,7 @@ const Card = ({
             <Typography
               sx={{
                 color: '#000E40',
-                fontSize: '10px',
+                fontSize: cardFontSizes.label,
                 fontFamily: 'Inter',
                 fontWeight: 400,
                 mb: 0.25
@@ -225,7 +231,7 @@ const Card = ({
             <Typography
               sx={{
                 color: '#000E40',
-                fontSize: '9px',
+                fontSize: cardFontSizes.criteria,
                 fontFamily: 'Inter',
                 pl: 1
               }}
@@ -240,7 +246,7 @@ const Card = ({
             <Typography
               sx={{
                 color: '#000E40',
-                fontSize: '10px',
+                fontSize: cardFontSizes.label,
                 fontWeight: 400,
                 fontFamily: 'Inter',
                 mb: 0.25
@@ -253,7 +259,7 @@ const Card = ({
                 key={`evidence-${index}`}
                 sx={{
                   color: '#000E40',
-                  fontSize: '9px',
+                  fontSize: cardFontSizes.evidence,
                   fontFamily: 'Inter',
                   pl: 1,
                   lineHeight: 1.2

app/components/footer/Footer.tsx

@@ -1,6 +1,13 @@
 import { useTheme } from '@mui/material/styles'
 import React from 'react'
-import { Box, Typography, useMediaQuery, Container } from '@mui/material'
+import {
+  Box,
+  Typography,
+  useMediaQuery,
+  Container,
+  Button,
+  Snackbar
+} from '@mui/material'
 import Link from 'next/link'
 
 const CCHeartIcon = () => (
@@ -139,8 +146,8 @@ const Footer: React.FC = () => {
             />
             <FooterItem
               icon={<EmailIcon />}
-              text='lc.support@allskillscount.org'
-              href='mailto:lc.support@allskillscount.org'
+              text='support@linkedcreds.allskillsscount.com'
+              isEmailActions={true}
             />
           </Box>
         ) : isTablet ? (
@@ -194,8 +201,8 @@ const Footer: React.FC = () => {
               />
               <FooterItem
                 icon={<EmailIcon />}
-                text='lc.support@allskillscount.org'
-                href='mailto:lc.support@allskillscount.org'
+                text='support@linkedcreds.allskillsscount.com'
+                isEmailActions={true}
               />
             </Box>
           </Box>
@@ -235,8 +242,8 @@ const Footer: React.FC = () => {
             />
             <FooterItem
               icon={<EmailIcon />}
-              text='lc.support@allskillscount.org'
-              href='mailto:lc.support@allskillscount.org'
+              text='support@linkedcreds.allskillsscount.com'
+              isEmailActions={true}
             />
           </Box>
         )}
@@ -250,9 +257,19 @@ interface FooterItemProps {
   text: string
   href?: string
   isSourceCode?: boolean
+  isEmailActions?: boolean
 }
 
-const FooterItem: React.FC<FooterItemProps> = ({ icon, text, href, isSourceCode }) => {
+const FooterItem: React.FC<FooterItemProps> = ({
+  icon,
+  text,
+  href,
+  isSourceCode,
+  isEmailActions
+}) => {
+  const [snackbarOpen, setSnackbarOpen] = React.useState(false)
+  const emailAddress = 'support@linkedcreds.allskillsscount.com'
+
   const textStyle = {
     color: '#ffffff',
     fontFamily: 'Nunito Sans, sans-serif',
@@ -287,6 +304,64 @@ const FooterItem: React.FC<FooterItemProps> = ({ icon, text, href, isSourceCode
             https://github.com/Cooperation-org/linked-claims-author
           </Typography>
         </Box>
+      ) : isEmailActions ? (
+        <Box
+          sx={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: 1,
+            ml: 1.5,
+            flexWrap: 'wrap'
+          }}
+        >
+          <Typography sx={textStyle}>{emailAddress}</Typography>
+          <Button
+            variant='contained'
+            size='small'
+            onClick={async () => {
+              try {
+                await navigator.clipboard.writeText(emailAddress)
+                setSnackbarOpen(true)
+              } catch (err) {
+                setSnackbarOpen(true)
+              }
+            }}
+            sx={{
+              color: '#ffffff',
+              textTransform: 'none',
+              backgroundColor: '#3A4260',
+              '&:hover': { backgroundColor: '#4A5373' },
+              borderRadius: '6px'
+            }}
+          >
+            Copy Email Details
+          </Button>
+          <Button
+            variant='outlined'
+            size='small'
+            href={`mailto:${emailAddress}`}
+            sx={{
+              color: '#ffffff',
+              textTransform: 'none',
+              borderColor: '#ffffff',
+              '&:hover': {
+                borderColor: '#ffffff',
+                backgroundColor: 'rgba(255,255,255,0.08)'
+              },
+              borderRadius: '6px'
+            }}
+          >
+            Open in Email App
+          </Button>
+
+          <Snackbar
+            open={snackbarOpen}
+            autoHideDuration={2000}
+            onClose={() => setSnackbarOpen(false)}
+            message='Email copied to clipboard'
+            anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
+          />
+        </Box>
       ) : (
         <Typography sx={href ? linkStyle : textStyle}>{text}</Typography>
       )}

app/components/hamburgerMenu/HamburgerMenu.tsx

@@ -28,7 +28,13 @@ const HamburgerMenu = () => {
   return (
     <>
       <IconButton
-        sx={{ padding: '0px', mr: '15px' }}
+        sx={{
+          padding: { xs: '8px', sm: '10px' },
+          mr: { xs: '0px', sm: '5px' },
+          '&:hover': {
+            backgroundColor: 'rgba(0, 0, 0, 0.04)'
+          }
+        }}
         onClick={toggleDrawer}
         aria-label='Open menu'
       >
@@ -37,11 +43,13 @@ const HamburgerMenu = () => {
       <Drawer anchor='left' open={isOpen} onClose={toggleDrawer}>
         <Box
           sx={{
-            width: '300px',
-            padding: '20px',
+            width: { xs: '280px', sm: '300px' },
+            padding: { xs: '16px', sm: '20px' },
             display: 'flex',
             flexDirection: 'column',
-            alignItems: 'flex-start'
+            alignItems: 'flex-start',
+            height: '100%',
+            overflowY: 'auto'
           }}
         >
           {/* Header Section */}
@@ -62,9 +70,9 @@ const HamburgerMenu = () => {
                 <Logo />
                 <Typography
                   sx={{
-                    ml: '8px',
+                    ml: { xs: '6px', sm: '8px' },
                     fontWeight: 700,
-                    fontSize: '18px',
+                    fontSize: { xs: '16px', sm: '18px' },
                     color: '#000'
                   }}
                 >
@@ -327,7 +335,7 @@ const HamburgerMenu = () => {
           <Box
             sx={{ width: '100%', display: 'flex', flexDirection: 'column', gap: '22px' }}
           >
-            <Link href='/about' passHref>
+            <Link href='/help' passHref>
               <Box
                 sx={{
                   display: 'flex',