Merge pull request #741 from bigcapitalhq/fix-ssr-invoice-template

fix: style SSR invoice paper template

packages/server/src/interfaces/Http.ts

@@ -4,4 +4,5 @@ export const ACCEPT_TYPE = {
   APPLICATION_JSON_TABLE: 'application/json+table',
   APPLICATION_XLSX: 'application/xlsx',
   APPLICATION_CSV: 'application/csv',
+  APPLICATION_TEXT_HTML: 'application/json+html',
 };

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

@@ -250,6 +250,7 @@ export function InvoicePaperTemplate({
                     </Text>
                   </Stack>
                 ),
+                thStyle: { width: '60%' },
               },
               { label: lineQuantityLabel, accessor: 'quantity', align: 'right' },
               { label: lineRateLabel, accessor: 'rate', align: 'right' },

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

@@ -89,6 +89,7 @@ interface PaperTemplateTableProps {
     label: string;
     value?: JSX.Element;
     align?: 'left' | 'center' | 'right';
+    thStyle?: React.CSSProperties;
   }>;
   data: Array<Record<string, any>>;
 }
@@ -140,7 +141,7 @@ PaperTemplate.Table = ({ columns, data }: PaperTemplateTableProps) => {
       <thead>
         <tr>
           {columns.map((col, index) => (
-            <x.th key={index} textAlign={col.align}>
+            <x.th key={index} textAlign={col.align} style={col.thStyle}>
               {col.label}
             </x.th>
           ))}
@@ -210,6 +211,7 @@ PaperTemplate.TotalLine = ({
         [totalBottomBordered]: border === PaperTemplateTotalBorder.Dark,
         [totalBottomGrayBordered]: border === PaperTemplateTotalBorder.Gray,
       })}
+      style={style}
     >
       <x.div min-w="160px">{label}</x.div>
       <x.div flex={'1 1 auto'} textAlign={'right'}>

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

@@ -46,7 +46,6 @@ th {
   border-style: solid;
   border-width: 0;
 }
-
 body{
   margin: 0;
   font-size: 1rem;
@@ -57,10 +56,12 @@ body{
   -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;
 }
+strong {
+  font-weight: 600;
+}
 `;