style: APP-432 certificate footer update

tailwind.css

@@ -346,7 +346,18 @@
     --sc-text-paragraph: var(--ac-neutral-200);
   }
 
+  /* 
+    Custom CSS classes that mimic the behavior of some Tailwind 
+    utility classes that currently don't work due to preflight being disabled.
+    See tailwind.common.js
+  */
   .bg-transparent {
     background-color: transparent;
   }
+  .space-x-2 > * + * {
+    margin-left: 0.5rem;
+  }
+  .space-x-4 > * + * {
+    margin-left: 1rem;
+  }
 }

web-components/src/components/icons/ShareIcons.tsx

@@ -2,6 +2,7 @@ import { useState } from 'react';
 import { useTheme } from '@mui/material';
 import Grid from '@mui/material/Grid';
 import { makeStyles } from 'tss-react/mui';
+import { cn } from 'web-components/src/utils/styles/cn';
 
 import copyTextToClipboard from '../../utils/copy';
 import Banner from '../banner';
@@ -70,17 +71,21 @@ export default function ShareIcons({
 
   return (
     <>
-      <Grid container className={classes.root} spacing={4}>
+      <Grid container className={cn(classes.root, 'space-x-2 lg:space-x-4')}>
         <Grid item>
           <a
             href={`https://twitter.com/intent/tweet?url=${url}&text=${twitterShare}`}
             rel="noopener noreferrer"
             target="_blank"
-            className={classes.iconContainer}
+            className={cn(
+              classes.iconContainer,
+              'flex items-center justify-center',
+            )}
           >
             <TwitterIcon
               color={theme.palette.primary.main}
               hoverColor={theme.palette.secondary.main}
+              className="!w-25 md:!w-30"
             />
           </a>
         </Grid>

web-marketplace/src/pages/Certificate/Certificate.styles.ts

@@ -15,28 +15,18 @@ export const useCertificateStyles = makeStyles<{
   },
   certificate: {
     margin: '0 auto',
+    maxWidth: theme.spacing(236),
     [theme.breakpoints.up('sm')]: {
       paddingTop: theme.spacing(25),
     },
-    [theme.breakpoints.up('md')]: {
-      paddingRight: theme.spacing(60),
-      paddingLeft: theme.spacing(60),
-    },
-    [theme.breakpoints.between(theme.breakpoints.values.tablet, 'lg')]: {
-      paddingRight: theme.spacing(30),
-      paddingLeft: theme.spacing(30),
-    },
-    [theme.breakpoints.up('xl')]: {
-      maxWidth: theme.spacing(236),
-      paddingRight: 0,
-      paddingLeft: 0,
+    [theme.breakpoints.down('md')]: {
+      paddingRight: theme.spacing(10),
+      paddingLeft: theme.spacing(10),
     },
     [theme.breakpoints.down('sm')]: {
       paddingTop: theme.spacing(10),
-    },
-    [theme.breakpoints.down(theme.breakpoints.values.tablet)]: {
-      paddingRight: theme.spacing(4),
-      paddingLeft: theme.spacing(4),
+      paddingRight: theme.spacing(5),
+      paddingLeft: theme.spacing(5),
     },
     '@media print': {
       padding: '0 !important',
@@ -67,22 +57,23 @@ export const useCertificateStyles = makeStyles<{
   },
   share: {
     margin: '0 auto',
+    width: theme.spacing(236),
+    maxWidth: '100%',
     [theme.breakpoints.up('sm')]: {
       paddingTop: theme.spacing(21.25),
       paddingBottom: theme.spacing(23),
-      paddingRight: theme.spacing(60),
-      paddingLeft: theme.spacing(60),
-    },
-    [theme.breakpoints.up('xl')]: {
-      maxWidth: theme.spacing(236),
-      paddingRight: 0,
-      paddingLeft: 0,
+      paddingRight: theme.spacing(10),
+      paddingLeft: theme.spacing(10),
     },
     [theme.breakpoints.down('sm')]: {
       paddingTop: theme.spacing(9.25),
       paddingBottom: theme.spacing(20),
-      paddingRight: theme.spacing(10),
-      paddingLeft: theme.spacing(10),
+      paddingRight: theme.spacing(20),
+      paddingLeft: theme.spacing(20),
+    },
+    [theme.breakpoints.up('md')]: {
+      paddingRight: theme.spacing(0),
+      paddingLeft: theme.spacing(0),
     },
   },
   shareTitle: {
@@ -101,7 +92,6 @@ export const useCertificateStyles = makeStyles<{
     [theme.breakpoints.down('sm')]: {
       fontSize: theme.spacing(3.5),
       height: theme.spacing(10),
-      marginTop: theme.spacing(7.5),
       paddingLeft: theme.spacing(10.5),
       paddingRight: theme.spacing(10.5),
       width: '100%',

web-marketplace/src/pages/Certificate/Certificate.tsx

@@ -11,6 +11,7 @@ import PrintIcon from 'web-components/src/components/icons/PrintIcon';
 import ShareIcons from 'web-components/src/components/icons/ShareIcons';
 import { Title } from 'web-components/src/components/typography';
 import { LinkComponentType } from 'web-components/src/types/shared/linkComponentType';
+import { cn } from 'web-components/src/utils/styles/cn';
 
 import { Link } from 'components/atoms';
 import WithLoader from 'components/atoms/WithLoader';
@@ -75,26 +76,28 @@ function CertificatePage(): JSX.Element {
       {certificateData && (
         <Grid
           container
-          className={classes.share}
-          alignItems="flex-end"
-          sx={{ displayPrint: 'none' }}
+          className={cn(
+            classes.share,
+            'flex justify-center min-[675px]:justify-between print:hidden',
+          )}
         >
-          <Grid item xs={12} md={6} sx={{ mb: { xs: 0, sm: 2 } }}>
-            <Title
-              variant="h4"
-              sx={{ pb: 3.75, textAlign: { xs: 'center', sm: 'inherit' } }}
-            >
-              <Trans>Share</Trans>
-            </Title>
+          <Title
+            className="w-full text-center sm:text-left"
+            variant="h4"
+            sx={{ pb: 3.75 }}
+          >
+            <Trans>Share</Trans>
+          </Title>
+          <Grid item sx={{ mb: { xs: 0, sm: 2 } }}>
             <ShareIcons
               xsSize={theme.spacing(10)}
               url={`${window.location.origin}/certificate/${id}`}
               copySuccessText={_(msg`Link copied to your clipboard`)}
             />
           </Grid>
-          <Grid item xs={12} md={6}>
+          <Grid item className="md:flex md:justify-end">
             <OutlinedButton
-              className={classes.printButton}
+              className={cn(classes.printButton, 'ml-auto mt-20 sm:mt-0')}
               onClick={() => window.print()}
             >
               <PrintIcon className={classes.icon} />{' '}