feat: add style to SSR invoice paper template

shared/pdf-templates/src/components/InvoicePaperTemplate.tsx

@@ -243,15 +243,15 @@ export function InvoicePaperTemplate({
                   <Stack spacing={2}>
                     <Text>{data.item}</Text>
                     <Text
-                    // variant={'muted'}
-                    // style={{ fontSize: 12 }}
+                      color={'#5f6b7c'}
+                      fontSize={12}
                     >
                       {data.description}
                     </Text>
                   </Stack>
                 ),
               },
-              { label: lineQuantityLabel, accessor: 'quantity' },
+              { label: lineQuantityLabel, accessor: 'quantity', align: 'right' },
               { label: lineRateLabel, accessor: 'rate', align: 'right' },
               { label: lineTotalLabel, accessor: 'total', align: 'right' },
             ]}

shared/pdf-templates/src/components/PaperTemplate.tsx

@@ -20,10 +20,9 @@ export function PaperTemplate({
 }: PaperTemplateProps) {
   return (
     <Box
-      borderRadius="5px"
       backgroundColor="#fff"
       color="#111"
-      boxShadow="inset 0 4px 0px 0 var(--invoice-primary-color), 0 10px 15px rgba(0, 0, 0, 0.05)"
+      boxShadow="inset 0 4px 0px 0 var(--invoice-primary-color)"
       padding="30px 30px"
       fontSize="12px"
       position="relative"
@@ -31,7 +30,15 @@ export function PaperTemplate({
       h="1123px"
       w="794px"
       {...restProps}
-      className={restProps?.className}
+      className={clsx(
+        restProps?.className,
+        css`
+          @media print {
+            width: auto !important;
+            height: auto !important;
+          }
+        `
+      )}
     >
       <style>{`:root { --invoice-primary-color: ${primaryColor}; --invoice-secondary-color: ${secondaryColor}; }`}</style>
       {children}
@@ -39,16 +46,6 @@ export function PaperTemplate({
   );
 }
 
-interface PaperTemplateTableProps {
-  columns: Array<{
-    accessor: string | ((data: Record<string, any>) => JSX.Element);
-    label: string;
-    value?: JSX.Element;
-    align?: 'left' | 'center' | 'right';
-  }>;
-  data: Array<Record<string, any>>;
-}
-
 interface PaperTemplateBigTitleProps {
   title: string;
 }
@@ -86,6 +83,16 @@ PaperTemplate.Logo = ({ logoUri }: PaperTemplateLogoProps) => {
   );
 };
 
+interface PaperTemplateTableProps {
+  columns: Array<{
+    accessor: string | ((data: Record<string, any>) => JSX.Element);
+    label: string;
+    value?: JSX.Element;
+    align?: 'left' | 'center' | 'right';
+  }>;
+  data: Array<Record<string, any>>;
+}
+
 PaperTemplate.Table = ({ columns, data }: PaperTemplateTableProps) => {
   return (
     <table
@@ -133,9 +140,9 @@ PaperTemplate.Table = ({ columns, data }: PaperTemplateTableProps) => {
       <thead>
         <tr>
           {columns.map((col, index) => (
-            <th key={index} align={col.align}>
+            <x.th key={index} textAlign={col.align}>
               {col.label}
-            </th>
+            </x.th>
           ))}
         </tr>
       </thead>
@@ -144,11 +151,11 @@ PaperTemplate.Table = ({ columns, data }: PaperTemplateTableProps) => {
         {data.map((_data: any) => (
           <tr>
             {columns.map((column, index) => (
-              <td align={column.align} key={index}>
+              <x.td textAlign={column.align} key={index}>
                 {isFunction(column?.accessor)
                   ? column?.accessor(_data)
                   : get(_data, column.accessor)}
-              </td>
+              </x.td>
             ))}
           </tr>
         ))}
@@ -183,6 +190,7 @@ const totalBottomBordered = css`
 const totalBottomGrayBordered = css`
   border-bottom: 1px solid #dadada;
 `;
+
 PaperTemplate.TotalLine = ({
   label,
   amount,
@@ -262,7 +270,9 @@ PaperTemplate.TermsItem = ({
 }) => {
   return (
     <Group spacing={12}>
-      <x.div minWidth={'12px'} color={'#333'}>{label}</x.div>
+      <x.div minWidth={'120px'} color={'#333'}>
+        {label}
+      </x.div>
       <x.div>{children}</x.div>
     </Group>
   );

shared/pdf-templates/src/components/PaperTemplateLayout.tsx

@@ -1,7 +1,7 @@
 import { CacheProvider, ThemeProvider } from '@emotion/react';
 import { EmotionCache } from '@emotion/cache';
 import { defaultTheme } from '@xstyled/system';
-import { Preflight } from '@xstyled/emotion';
+import { createGlobalStyle, Preflight } from '@xstyled/emotion';
 
 const theme = {
   ...defaultTheme,
@@ -17,8 +17,50 @@ export function PaperTemplateLayout({
     <CacheProvider value={cache}>
       <ThemeProvider theme={theme}>
         <Preflight />
+        <GlobalStyles />
+
         {children}
       </ThemeProvider>
     </CacheProvider>
   );
 }
+
+// Create global styles to set the body font
+const GlobalStyles = createGlobalStyle`
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+th {
+  text-align: inherit;
+  text-align: -webkit-match-parent;
+}
+thead,
+tbody,
+tfoot,
+tr,
+td,
+th {
+  border-color: inherit;
+  border-style: solid;
+  border-width: 0;
+}
+
+body{
+  margin: 0;
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.5;
+  color: #000;
+  background-color: #fff;
+  -webkit-text-size-adjust: 100%;
+  -webkit-tap-highlight-color: transparent;
+}
+
+body, h1, h2, h3, h4, h5, h6{
+  font-family: "Open Sans", sans-serif;
+  font-optical-sizing: auto;
+  font-style: normal;
+}
+`;