feat: wip styling invoice customize

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

@@ -2,16 +2,19 @@
 .root {
   border-radius: 5px;
   background-color: #fff;
-  box-shadow: inset 0 4px 0px 0 #002762, 0 10px 15px rgba(0, 0, 0, 0.15);
-  padding: 22px;
+  color: #000;
+  box-shadow: inset 0 4px 0px 0 #002762, 0 10px 15px rgba(0, 0, 0, 0.05);
+  padding: 22px 30px;
   position: relative;
 }
 
 .bigTitle{
   font-size: 60px;
   margin: 0;
-  LINE-HEIGHT: 1;
-  MARGIN-BOTTOM: 20px;
+  line-height: 1;
+  margin-bottom: 20px;
+  font-weight: 500;
+  color: #333;
 }
 
 .details {
@@ -22,11 +25,12 @@
 }
 .detail {
   display: flex;
-    flex-direction: row;
-    gap: 10px;
+  flex-direction: row;
+  gap: 12px;
 }
 .detailLabel {
   min-width: 120px;
+  color: #333;
 }
 
 .addressRoot{
@@ -42,7 +46,7 @@
   flex: 1;
 }
 
-.table :global {
+.table {
   margin-top: 40px;
   width: 100%;
   border-collapse: collapse;
@@ -51,6 +55,18 @@
   thead th{
     font-weight: 400;
     border-bottom: 1px solid #000;
+    padding: 5px 10px;
+
+    &.rate,
+    &.total{
+      text-align: right;
+    }
+    &:first-of-type{
+      padding-left: 0;
+    }
+    &:last-of-type{
+      padding-right: 0;
+    }
   }
 
   tbody{
@@ -59,8 +75,20 @@
 
     }
     td{
-      border: 1px solid #F6F6F6;
-      padding: 10px 0;
+      border-bottom: 1px solid #F6F6F6;
+      padding: 12px 10px;
+
+      &:first-of-type{
+        padding-left: 0;
+      }
+      &:last-of-type{
+        padding-right: 0;
+      }
+
+      &.rate,
+      &.total{
+        text-align: right;
+      }
     }
   }
 }
@@ -78,6 +106,13 @@
 .totalsItemLabel{
   min-width: 160px;
 }
+.totalsItemAmount{
+  flex: 1 1 auto;
+  text-align: right;
+}
+.totalBottomBordered {
+  border-bottom: 1px solid #000;
+}
 
 .logoWrap{
   height: 120px;
@@ -85,21 +120,24 @@
   position: absolute;
   right: 20px;
   top: 20px;
+  border-radius: 5px;
+  overflow: hidden;
 
   img{
     max-width: 100%;
   }
 }
 
-
 .footer{
 
 }
 
 .paragraph{
   margin-bottom: 20px;  
+  font-size: 12px;
 }
 
 .paragraphLabel{
-  color: #333333;
+  margin-bottom: 2px;
+  color: #666;
 }