Merge pull request #700 from bigcapitalhq/fix-company-logo-dimenstion-pdf-template

fix: Set max width/height to company logo of pdf templates

packages/server/resources/views/modules/credit-note-standard.pug

@@ -30,17 +30,17 @@ block head
       flex: 1 1 0%;
     }
     .#{prefix}-big-title {
-      font-size: 60px;
+      font-size: 30px;
       margin: 0;
       line-height: 1;
       font-weight: 500;
       color: #333;
     }
     .#{prefix}-logo-wrap img {
-      height: auto;
+      width: 100%;
-      width: auto;
+      height: 100%;
-      max-width: 400px;
+      max-width: 260px;
-      max-height: 160px;
+      max-height: 100px;
     }
     .#{prefix}-terms-list {
       display: flex;

packages/server/resources/views/modules/estimate-regular.pug

@@ -30,17 +30,17 @@ block head
       flex: 1 1 0%;
     }
     .#{prefix}-big-title {
-      font-size: 60px;
+      font-size: 30px;
       margin: 0;
       line-height: 1;
       font-weight: 500;
       color: #333;
     }
     .#{prefix}-logo-wrap img {
-      height: auto;
+      width: 100%;
-      width: auto;
+      height: 100%;
-      max-width: 400px;
+      max-width: 260px;
-      max-height: 160px;
+      max-height: 100px;
     }
     .#{prefix}-terms {
       display: flex;

packages/server/resources/views/modules/invoice-standard.pug

@@ -30,17 +30,17 @@ block head
       flex: 1 1 0%;
     }
     .#{prefix}-big-title {
-      font-size: 60px;
+      font-size: 30px;
       margin: 0;
       line-height: 1;
       font-weight: 500;
       color: #333;
     }
     .#{prefix}-logo-wrap img {
-      height: auto;
+      width: 100%;
-      width: auto;
+      height: 100%;
-      max-width: 400px;
+      max-width: 260px;
-      max-height: 160px;
+      max-height: 100px;
     }
     .#{prefix}-details {
       display: flex;

packages/server/resources/views/modules/payment-receive-standard.pug

@@ -31,17 +31,17 @@ block head
       flex: 1 1 0%;
     }
     .#{prefix}-big-title{ 
-      font-size: 60px;
+      font-size: 30px;
       margin: 0;
       line-height: 1;
       font-weight: 500;
       color: #333;
     }
     .#{prefix}-logo-wrap img {
-      height: auto;
+      width: 100%;
-      width: auto;
+      height: 100%;
-      max-width: 400px;
+      max-width: 260px;
-      max-height: 160px;
+      max-height: 100px;
     }
     .#{prefix}-terms-list{ 
       display: flex;

packages/server/resources/views/modules/receipt-regular.pug

@@ -28,13 +28,13 @@ block head
       flex: 1 1 0%;
     }
     .#{prefix}-logo-wrap img {
-      height: auto;
+      width: 100%;
-      width: auto;
+      height: 100%;
-      max-width: 400px;
+      max-width: 260px;
-      max-height: 160px;
+      max-height: 100px;
     }
     .#{prefix}-big-title {
-      font-size: 60px;
+      font-size: 30px;
       margin: 0;
       line-height: 1;
       font-weight: 500;

packages/webapp/src/containers/ElementCustomize/components/BrandingCompanyLogoUploadField.tsx

@@ -13,6 +13,9 @@ export function BrandingCompanyLogoUploadField() {
         onChange={(file) => {
           const imageUrl = file ? URL.createObjectURL(file) : '';
 
+          // Reset the logo key since it is changed.
+          setFieldValue('companyLogoKey', '');
+
           setFieldValue('_companyLogoFile', file);
           setFieldValue('companyLogoUri', imageUrl);
         }}

packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoicePaperTemplate.module.scss

@@ -4,7 +4,7 @@
   background-color: #fff;
   color: #111;
   box-shadow: inset 0 4px 0px 0 var(--invoice-primary-color), 0 10px 15px rgba(0, 0, 0, 0.05);
-  padding: 24px 30px;
+  padding: 30px 30px;
   font-size: 12px;
   position: relative;
   margin: 0 auto;
@@ -12,7 +12,7 @@
   height: 1123px;
 }
 .bigTitle{
-  font-size: 60px;
+  font-size: 30px;
   margin: 0;
   line-height: 1;
   font-weight: 500;
@@ -105,7 +105,10 @@
   overflow: hidden;
 
   img{
-    max-width: 100%;
+    width: 100%;
+    height: 100%;
+    max-width: 260px;
+    max-height: 100px;
   }
 }
 .logoImg {

packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/PaperTemplate.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import clsx from 'classnames';
 import { get } from 'lodash';
-import { Box, Group, GroupProps, Stack } from '@/components';
+import { Box, Group, GroupProps } from '@/components';
 import styles from './InvoicePaperTemplate.module.scss';
 
 export interface PaperTemplateProps {