MPDX-8392 - Fix print styles (#1144)

* Adds additional print styles for more rows in 14 month report
CruGlobal · Oct 22, 2024 · 0b3c384 · 0b3c384
1 parent 1180b32
commit 0b3c384
Show file tree

Hide file tree

Showing 7 changed files with 50 additions and 13 deletions.
diff --git a/src/components/Layouts/Primary/TopBar/TopBar.tsx b/src/components/Layouts/Primary/TopBar/TopBar.tsx
@@ -23,7 +23,12 @@ interface TopBarProps {
   onMobileNavOpen?: () => void;
 }
 
-const Offset = styled('div')(({ theme }) => theme.mixins.toolbar);
+const Offset = styled('div')(({ theme }) => ({
+  ...theme.mixins.toolbar,
+  '@media print': {
+    display: 'none',
+  },
+}));
 
 const StyledAppBar = styled(AppBar)(({ theme }) => ({
   backgroundColor: theme.palette.cruGrayDark.main,

diff --git a/src/components/Reports/FourteenMonthReports/FourteenMonthReport.tsx b/src/components/Reports/FourteenMonthReports/FourteenMonthReport.tsx
@@ -54,6 +54,8 @@ export const FourteenMonthReport: React.FC<Props> = ({
     theme.breakpoints.down('sm'),
   );
 
+  const isPrint = useMediaQuery('print');
+
   const { data, error } = useFourteenMonthReportQuery({
     variables: {
       accountListId,
@@ -117,7 +119,7 @@ export const FourteenMonthReport: React.FC<Props> = ({
       ) : error ? (
         <Notification type="error" message={error.toString()} />
       ) : currencyTables.length > 0 ? (
-        <Box display="flex" flexDirection="column" gap={4}>
+        <Box display="flex" flexDirection="column" gap={isPrint ? 1 : 4}>
           {currencyTables.map(({ currency, orderedContacts, totals }) => (
             <Table
               key={currency}

diff --git a/src/components/Reports/FourteenMonthReports/Layout/Header/Header.tsx b/src/components/Reports/FourteenMonthReports/Layout/Header/Header.tsx
@@ -24,7 +24,10 @@ const StickyHeader = styled(Box)(({}) => ({
   top: 0,
   height: 96,
   '@media print': {
-    paddingTop: '0',
+    position: 'static',
+    paddingTop: '1rem',
+    paddingBottom: '1rem',
+    height: 'auto',
   },
 }));
 

diff --git a/src/components/Reports/FourteenMonthReports/Layout/Table/StyledComponents.ts b/src/components/Reports/FourteenMonthReports/Layout/Table/StyledComponents.ts
@@ -3,6 +3,6 @@ import { styled } from '@mui/material/styles';
 
 export const StyledTableCell = styled(TableCell)(({}) => ({
   '@media print': {
-    padding: '8px',
+    padding: '4px',
   },
 }));
diff --git a/src/components/Reports/FourteenMonthReports/Layout/Table/Table.tsx b/src/components/Reports/FourteenMonthReports/Layout/Table/Table.tsx
@@ -45,6 +45,12 @@ const NameTypography = styled(Typography, {
   },
 }));
 
+const StyledLink = styled(Link)({
+  '@media print': {
+    color: theme.palette.text.primary,
+  },
+});
+
 const PrintableContainer = styled(TableContainer)({
   // First style sets size as landscape
   '@media print': {
@@ -129,13 +135,13 @@ export const FourteenMonthReportTable: React.FC<
                   <Box display="flex" alignItems="center">
                     {!isExpanded && <StyledInfoIcon fontSize="small" />}
                     <NameTypography variant="body1" expanded={isExpanded}>
-                      <Link
+                      <StyledLink
                         onClick={() => onSelectContact(contact.id)}
                         onMouseEnter={preloadContactsRightPanel}
                         underline="hover"
                       >
                         {contact.name}
-                      </Link>
+                      </StyledLink>
                     </NameTypography>
                   </Box>
                   {isExpanded && (

diff --git a/src/components/Reports/FourteenMonthReports/Layout/Table/TableHead/TableHead.tsx b/src/components/Reports/FourteenMonthReports/Layout/Table/TableHead/TableHead.tsx
@@ -29,10 +29,24 @@ export interface FourteenMonthReportTableHeadProps {
 
 const YearTableCell = styled(TableCell)(({}) => ({
   paddingLeft: 0,
+  '@media print': {
+    padding: '0px',
+  },
 }));
 
 const YearTypography = styled(Typography)(({ theme }) => ({
   borderLeft: `1px solid ${theme.palette.cruGrayLight.main}`,
+  '@media print': {
+    lineHeight: 1,
+    fontSize: '1rem',
+  },
+}));
+
+const CurrencyTypography = styled(Typography)(() => ({
+  '@media print': {
+    lineHeight: 1,
+    fontSize: '1rem',
+  },
 }));
 
 export const FourteenMonthReportTableHead: FC<
@@ -69,7 +83,7 @@ export const FourteenMonthReportTableHead: FC<
     <TableHead data-testid="SalaryReportTableHead">
       <TableRow>
         <StyledTableCell>
-          <Typography variant="h6">{salaryCurrency}</Typography>
+          <CurrencyTypography variant="h6">{salaryCurrency}</CurrencyTypography>
         </StyledTableCell>
         {isExpanded && (
           <>

diff --git a/...nents/Reports/FourteenMonthReports/Layout/Table/TableHead/TableHeadCell/TableHeadCell.tsx b/...nents/Reports/FourteenMonthReports/Layout/Table/TableHead/TableHeadCell/TableHeadCell.tsx
@@ -30,6 +30,17 @@ const PrintableTableSortLabel = styled(TableSortLabel)(() => ({
   },
 }));
 
+const TableCell = styled(StyledTableCell)(() => ({
+  top: 65,
+  position: 'sticky',
+  '@media print': {
+    position: 'static',
+    top: 0,
+    paddingTop: 0,
+    paddingBottom: 0,
+  },
+}));
+
 const HeadCellSpan = styled('span')(() => ({
   border: 0,
   clip: 'rect(0 0 0 0)',
@@ -54,11 +65,7 @@ export const TableHeadCell: React.FC<FourteenMonthReportTableCellProps> = ({
   onClick,
 }) => {
   return (
-    <StyledTableCell
-      align={align}
-      sortDirection={sortDirection}
-      style={{ top: 65 }}
-    >
+    <TableCell align={align} sortDirection={sortDirection}>
       <PrintableTableSortLabel
         active={isActive}
         direction={direction}
@@ -71,6 +78,6 @@ export const TableHeadCell: React.FC<FourteenMonthReportTableCellProps> = ({
           </HeadCellSpan>
         )}
       </PrintableTableSortLabel>
-    </StyledTableCell>
+    </TableCell>
   );
 };