From 30f76e2088a57eaf42de619ab7f1401acc1ad28a Mon Sep 17 00:00:00 2001
From: radhu587 <makwanar587@gmail.com>
Date: Wed, 6 May 2020 18:02:27 +0530
Subject: [PATCH] Refactor Estimate templates

---
 .../app/pdf/estimate/estimate1.blade.php      |  97 ++++-
 .../app/pdf/estimate/estimate2.blade.php      | 345 ++++++++--------
 .../app/pdf/estimate/estimate3.blade.php      | 382 +++++++++---------
 .../app/pdf/estimate/partials/table.blade.php |  62 ++-
 4 files changed, 472 insertions(+), 414 deletions(-)

diff --git a/resources/views/app/pdf/estimate/estimate1.blade.php b/resources/views/app/pdf/estimate/estimate1.blade.php
index 5bd08298..13348e10 100644
--- a/resources/views/app/pdf/estimate/estimate1.blade.php
+++ b/resources/views/app/pdf/estimate/estimate1.blade.php
@@ -64,13 +64,13 @@
             padding-bottom: 20px;
         }
 
+        /* -------------------------- */
+        /* company details style */
+
         .company-details-container {
             padding-top: 30px;
         }
 
-        /* -------------------------- */
-        /* company address style */
-
         .company-address-container {
             float: left;
             padding-left: 30px;
@@ -100,10 +100,6 @@
             padding: 10px 30px 0 0;
         }
 
-        .amount-due {
-            background-color: #f2f2f2;
-        }
-
         .attribute-label {
             font-size: 12px;
             line-height: 18px;
@@ -118,7 +114,6 @@
             text-align: right;
         }
 
-
         /* -------------------------- */
         /* customer address style */
 
@@ -198,14 +193,17 @@
             width: 160px;
         }
 
-        .item-table {
+        /* -------------------------- */
+        /* items style */
+
+        .items-table {
             margin-top: 35px;
             padding: 0px 30px 10px 30px;
             page-break-before: avoid;
             page-break-after: auto;
         }
 
-        .item-table hr {
+        .items-table hr {
             height: 0.1px;
         }
 
@@ -241,15 +239,15 @@
             border-color: #d9d9d9;
         }
 
-        .padd8 {
-            padding-top: 8px;
-            padding-bottom: 8px;
+        .item-description {
+            color: #595959;
+            font-size: 9px;
+            font-weight:300;
+            line-height: 12px;
         }
 
-        .padd2 {
-            padding-top: 2px;
-            padding-bottom: 2px;
-        }
+        /* -------------------------- */
+        /* total display table style */
 
         .total-display-table {
             border-top: none;
@@ -262,6 +260,23 @@
             margin-top: 10px
         }
 
+        .total-table-attribute-label {
+            font-size: 12px;
+            color: #55547A;
+            text-align: left;
+            padding-left: 10px;
+        }
+
+        .total-table-attribute-value {
+            font-weight: 500;
+            text-align: right;
+            font-size: 12px;
+            color: #040405;
+            padding-right: 10px;
+            padding-top: 2px;
+            padding-bottom: 2px;
+        }
+
         .total-border-left {
             border: 1px solid #E8E8E8 !important;
             border-right: 0px !important;
@@ -276,9 +291,8 @@
             padding: 8px !important;
         }
 
-        .inv-item {
-            border-color: red;
-        }
+        /* -------------------------- */
+        /* notes style */
 
         .notes {
             font-size: 12px;
@@ -300,6 +314,13 @@
             padding-bottom: 10px;
         }
 
+        /* -------------------------- */
+        /* helpers style */
+
+        .text-primary {
+            color: #5851DB;
+        }
+
         .text-center {
             text-align: center
         }
@@ -312,9 +333,43 @@
             text-align: right;
         }
 
-        .no-border {
+        .border-0 {
             border: none;
         }
+
+        .py-2 {
+            padding-top: 2px;
+            padding-bottom: 2px;
+        }
+
+        .py-8 {
+            padding-top: 8px;
+            padding-bottom: 8px;
+        }
+
+        .py-3 {
+            padding: 3px 0;
+        }
+
+        .pr-20 {
+            padding-right: 20px;
+        }
+
+        .pr-10 {
+            padding-right: 10px;
+        }
+
+        .pl-20 {
+            padding-left: 20px;
+        }
+
+        .pl-10 {
+            padding-left: 10px;
+        }
+
+        .pl-0 {
+            padding-left: 0;
+        }
     </style>
 </head>
 
diff --git a/resources/views/app/pdf/estimate/estimate2.blade.php b/resources/views/app/pdf/estimate/estimate2.blade.php
index 5d2d489f..6e0ee7ab 100644
--- a/resources/views/app/pdf/estimate/estimate2.blade.php
+++ b/resources/views/app/pdf/estimate/estimate2.blade.php
@@ -12,25 +12,23 @@
         html {
             margin: 0px;
             padding: 0px;
+            margin-top: 50px;
         }
 
         table {
             border-collapse: collapse;
         }
 
-        .header-left {
-            padding-top: 45px;
-            padding-bottom: 45px;
-            padding-left: 30px;
-            display: inline-block;
-            width: 30%;
+        hr {
+            margin: 0 30px 0 30px;
+            color: rgba(0, 0, 0, 0.2);
+            border: 0.5px solid #EAF1FB;
         }
 
-        @page {
-            margin-top: 60px !important;
-        }
+        /* -------------------------- */
+        /* header style */
 
-        .header-table {
+        .header-container {
             background: #817AE3;
             position: absolute;
             width: 100%;
@@ -39,6 +37,14 @@
             top: -60px;
         }
 
+        .header-section-left {
+            padding-top: 45px;
+            padding-bottom: 45px;
+            padding-left: 30px;
+            display: inline-block;
+            width: 30%;
+        }
+
         .header-logo {
             position: absolute;
             height: 50px;
@@ -46,14 +52,13 @@
             color: #fff;
         }
 
-        .header-right {
+        .header-section-right {
             display: inline-block;
             width: 35%;
             float: right;
             padding: 20px 30px 20px 0px;
             text-align: right;
             color: white;
-
         }
 
         .header {
@@ -61,36 +66,65 @@
             color: rgba(0, 0, 0, 0.7);
         }
 
+        /* -------------------------- */
+        /* estimate details container */
+
+        .estimate-details-container {
+            text-align: center;
+            width: 40%;
+        }
+
+        .estimate-details-container h1 {
+            margin: 0;
+            font-weight: 500;
+            font-size: 24px;
+            line-height: 36px;
+            text-align: right;
+        }
+
+        .estimate-details-container h4 {
+            margin: 0;
+            font-size: 10px;
+            line-height: 15px;
+            text-align: right;
+        }
+
+        .estimate-details-container h3 {
+            margin-bottom: 1px;
+            margin-top: 0;
+        }
+
+        /* -------------------------- */
+        /* address-container */
+
         .wrapper {
             display: block;
             margin-top: 60px;
             padding-bottom: 20px;
         }
 
-        .address {
+        .address-container {
             display: block;
             padding-top: 20px;
         }
 
-        .company {
+        .company-address-container {
             padding: 0 0 0 30px;
             display: inline;
             float: left;
             width: 30%;
         }
 
-        .company h1 {
-            font-style: normal;
+        .company-address-heading {
             font-weight: bold;
             font-size: 15px;
             line-height: 22px;
             letter-spacing: 0.05em;
             margin-bottom: 0;
+            margin-top: 12px;
         }
 
-        .company-address{
-            font-style: normal;
-            font-weight: normal;
+        .company-address-text {
             font-size: 10px;
             line-height: 15px;
             color: #595959;
@@ -99,25 +133,23 @@
 
         /* -------------------------- */
         /* billing style */
-        .bill-address-container {
+
+        .billing-address-container {
             display: block;
             /* position: absolute; */
             float: right;
             padding: 0 40px 0 0;
         }
 
-        .bill-to {
-            font-style: normal;
-            font-weight: normal;
+        .billing-address-label {
             font-size: 12px;
             line-height: 18px;
             padding: 0px;
             margin-bottom: 0px;
         }
 
-        .bill-user-name {
-            max-width: 250px font-style: normal;
-            font-weight: normal;
+        .billing-address-name {
+            max-width: 250px;
             font-size: 15px;
             line-height: 22px;
             padding: 0px;
@@ -125,9 +157,7 @@
             margin-bottom: 0px;
         }
 
-        .bill-user-address {
-            font-style: normal;
-            font-weight: normal;
+        .billing-address-text {
             font-size: 10px;
             line-height: 15px;
             color: #595959;
@@ -136,36 +166,24 @@
             width: 170px;
         }
 
-        .bill-user-phone {
-            font-style: normal;
-            font-weight: normal;
-            font-size: 10px;
-            line-height: 15px;
-            color: #595959;
-            padding: 0px;
-            margin: 0px;
-        }
-
         /* -------------------------- */
         /* shipping style */
-        .ship-address-container {
+
+        .shipping-address-container {
             display: block;
             float: right;
             padding: 0 30px 0 0;
         }
 
-        .ship-to {
-            font-style: normal;
-            font-weight: normal;
+        .shipping-address-label {
             font-size: 12px;
             line-height: 18px;
             padding: 0px;
             margin-bottom: 0px;
         }
 
-        .ship-user-name {
-            max-width: 250px font-style: normal;
-            font-weight: normal;
+        .shipping-address-name {
+            max-width: 250px;
             font-size: 15px;
             line-height: 22px;
             padding: 0px;
@@ -173,9 +191,7 @@
             margin-bottom: 0px;
         }
 
-        .ship-user-address {
-            font-style: normal;
-            font-weight: normal;
+        .shipping-address-text {
             font-size: 10px;
             line-height: 15px;
             color: #595959;
@@ -184,26 +200,6 @@
             width: 170px;
         }
 
-        .ship-user-phone {
-            font-style: normal;
-            font-weight: normal;
-            font-size: 10px;
-            line-height: 15px;
-            color: #595959;
-            padding: 0px;
-            margin: 0px;
-        }
-
-        .job-add {
-            display: inline;
-            float: right;
-            width: 40%;
-        }
-
-        .amount-due {
-            background-color: #f2f2f2;
-        }
-
         .attribute-label {
             font-size: 12;
             font-weight: bold;
@@ -217,29 +213,17 @@
             color: rgba(0, 0, 0, 0.7);
         }
 
-        .item-table-heading-row td {
-            padding: 5px;
-            padding-bottom: 10px;
-        }
+        /* -------------------------- */
+        /* items style */
 
-        .item-table-heading-row {
-            border-bottom: 1px solid red;
-        }
-
-        .table2 {
+        .items-table {
             margin-top: 30px;
             padding: 0px 30px 10px 30px;
             page-break-before: avoid;
             page-break-after: auto;
         }
 
-        hr {
-            margin: 0 30px 0 30px;
-            color: rgba(0, 0, 0, 0.2);
-            border: 0.5px solid #EAF1FB;
-        }
-
-        .table2 hr {
+        .items-table hr {
             height: 0.1px;
         }
 
@@ -250,17 +234,22 @@
             padding: 5px;
         }
 
+        .item-table-heading-row td {
+            padding: 5px;
+            padding-bottom: 10px;
+        }
+
+        .item-table-heading-row {
+            border-bottom: 1px solid red;
+        }
+
         tr.item-table-heading-row th {
             border-bottom: 0.620315px solid #E8E8E8;
-            font-style: normal;
-            font-weight: normal;
             font-size: 12px;
             line-height: 18px;
         }
 
         tr.item-row td {
-            font-style: normal;
-            font-weight: normal;
             font-size: 12px;
             line-height: 18px;
         }
@@ -273,85 +262,63 @@
             padding-top: 10px;
         }
 
-        .note-header {
-            font-size: 13;
-            color: rgba(0, 0, 0, 0.6);
+        .item-description {
+            color: #595959;
+            font-size: 9px;
+            font-weight:300;
+            line-height: 12px;
         }
 
-        .note-text {
-            font-size: 10;
-            color: rgba(0, 0, 0, 0.6);
-        }
+        /* -------------------------- */
+        /* total display table style */
 
-        .padd8 {
-            padding-top: 8px;
-            padding-bottom: 8px;
-        }
-
-        .padd2 {
-            padding-top: 2px;
-            padding-bottom: 2px;
-        }
-
-        .table3 {
-            border: 1px solid #EAF1FB;
+        .total-display-table {
             border-top: none;
             box-sizing: border-box;
             width: 630px;
             page-break-inside: avoid;
             page-break-before: auto;
             page-break-after: auto;
-        }
-
-        .text-per-item-table3 {
+            margin-left:420px;
+            margin-top: 10px;
             border: 1px solid #EAF1FB;
-            border-top: none;
-            padding-right: 30px;
-            box-sizing: border-box;
-            width: 260px;
-            /* height: 100px; */
-            position: absolute;
-            right: -25;
         }
 
-        .inv-item {
-            border-color: #d9d9d9;
+        .total-table-attribute-label {
+            font-size: 12px;
+            color: #55547A;
+            text-align: left;
+            padding-left: 10px;
         }
 
-        .no-border {
-            border: none;
-        }
-
-        .company-details {
-            text-align: center;
-            width: 40%;
-        }
-
-        .company-details h1 {
-            margin: 0;
-            font-style: normal;
+        .total-table-attribute-value {
             font-weight: 500;
-            font-size: 24px;
-            line-height: 36px;
             text-align: right;
+            font-size: 12px;
+            color: #040405;
+            padding-right: 10px;
+            padding-top: 2px;
+            padding-bottom: 2px;
         }
 
-        .company-details h4 {
-            margin: 0;
-            font-style: normal;
-            font-weight: normal;
-            font-size: 10px;
-            line-height: 15px;
-            text-align: right;
+        .total-border-left {
+            border: 1px solid #E8E8E8 !important;
+            border-right: 0px !important;
+            padding-top: 0px;
+            padding: 8px !important;
         }
 
-        .company-details h3 {
-            margin-bottom: 1px;
-            margin-top: 0;
+        .total-border-right {
+            border: 1px solid #E8E8E8 !important;
+            border-left: 0px !important;
+            padding-top: 0px;
+            padding: 8px !important;
         }
 
+        /* -------------------------- */
+        /* notes style */
+
         .notes {
-            font-style: normal;
             font-weight: 300;
             font-size: 12px;
             color: #595959;
@@ -363,8 +330,6 @@
         }
 
         .notes-label {
-            font-style: normal;
-            font-weight: normal;
             font-size: 15px;
             line-height: 22px;
             letter-spacing: 0.05em;
@@ -373,24 +338,81 @@
             height: 19.87px;
             padding-bottom: 10px;
         }
+
+        /* -------------------------- */
+        /* helpers style */
+
+        .text-primary {
+            color: #5851DB;
+        }
+
+        .text-center {
+            text-align: center
+        }
+
+        table .text-left {
+            text-align: left;
+        }
+
+        table .text-right {
+            text-align: right;
+        }
+
+        .border-0 {
+            border: none;
+        }
+
+        .py-2 {
+            padding-top: 2px;
+            padding-bottom: 2px;
+        }
+
+        .py-8 {
+            padding-top: 8px;
+            padding-bottom: 8px;
+        }
+
+        .py-3 {
+            padding: 3px 0;
+        }
+
+        .pr-20 {
+            padding-right: 20px;
+        }
+
+        .pr-10 {
+            padding-right: 10px;
+        }
+
+        .pl-20 {
+            padding-left: 20px;
+        }
+
+        .pl-10 {
+            padding-left: 10px;
+        }
+
+        .pl-0 {
+            padding-left: 0;
+        }
     </style>
 </head>
 
 <body>
-    <div class="header-table">
+    <div class="header-container">
         <table width="100%">
             <tr>
                 @if($logo)
-                <td width="60%" class="header-left">
+                <td width="60%" class="header-section-left">
                     <img class="header-logo" src="{{ $logo }}" alt="Company Logo">
                     @else
-                <td width="60%" class="header-left" style="padding-top: 0px;">
+                <td width="60%" class="header-section-left" style="padding-top: 0px;">
                     @if($estimate->user->company)
                     <h1 class="header-logo"> {{$estimate->user->company->name}} </h1>
                     @endif
                     @endif
                 </td>
-                <td width="40%" class="header-right company-details">
+                <td width="40%" class="header-section-right estimate-details-container">
                     <h1>Estimate</h1>
                     <h4>{{$estimate->estimate_number}}</h4>
                     <h4>{{$estimate->formattedEstimateDate}}</h4>
@@ -400,25 +422,24 @@
     </div>
     <hr>
     <div class="wrapper">
-        <div class="address">
-            <div class="company">
+        <div class="address-container">
+            <div class="company-address-container">
                 @include('app.pdf.estimate.partials.company-address')
             </div>
-            <div class="ship-address-container">
+            <div class="shipping-address-container">
                 @include('app.pdf.estimate.partials.shipping-address')
             </div>
             @if($estimate->user->shippingaddress)
-            <div class="bill-address-container">
-                @else
-                <div class="bill-address-container" style="float:right;padding-right:0px;">
-                    @endif
-                    @include('app.pdf.estimate.partials.billing-address')
-                </div>
-                <div style="clear: both;"></div>
+            <div class="billing-address-container">
+            @else
+            <div class="billing-address-container" style="float:right;padding-right:0px;">
+            @endif
+                @include('app.pdf.estimate.partials.billing-address')
             </div>
+            <div style="clear: both;"></div>
             @include('app.pdf.estimate.partials.table')
             @include('app.pdf.estimate.partials.notes')
         </div>
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/resources/views/app/pdf/estimate/estimate3.blade.php b/resources/views/app/pdf/estimate/estimate3.blade.php
index c35f4142..378e7872 100644
--- a/resources/views/app/pdf/estimate/estimate3.blade.php
+++ b/resources/views/app/pdf/estimate/estimate3.blade.php
@@ -13,31 +13,31 @@
         html {
             margin: 0px;
             padding: 0px;
+            margin-top: 50px;
         }
 
         table {
             border-collapse: collapse;
         }
 
-        .header-line {
-            color: rgba(0, 0, 0, 0.2);
-            position: absolute;
-            top: 80px;
-            left: 0px;
-            right: -70px;
-            width: 100%;
-        }
-
         hr {
             color: rgba(0, 0, 0, 0.2);
             border: 0.5px solid #EAF1FB;
-        }
-
-        .items-table-hr {
             margin: 0 30px 0 30px;
         }
 
-        .header-left {
+        /* -------------------------- */
+        /* header style */
+
+        .header-container {
+            position: absolute;
+            width: 100%;
+            height: 150px;
+            left: 0px;
+            top: -60px;
+        }
+
+        .header-section-left {
             padding-top: 45px;
             padding-bottom: 45px;
             padding-left: 30px;
@@ -45,12 +45,12 @@
             width: 30%;
         }
 
-        .header-table {
+        .header-bottom-divider {
+            color: rgba(0, 0, 0, 0.2);
             position: absolute;
-            width: 100%;
-            height: 150px;
+            top: 100px;
             left: 0px;
-            top: -60px;
+            width: 100%;
         }
 
         .header-logo {
@@ -60,7 +60,7 @@
             color: #817AE3;
         }
 
-        .header-right {
+        .header-section-right {
             display: inline-block;
             position: absolute;
             right: 0;
@@ -68,78 +68,83 @@
             float: right;
         }
 
-
         .header {
             font-size: 20px;
             color: rgba(0, 0, 0, 0.7);
         }
 
+        /* -------------------------- */
+        /* company address container */
+
+        .company-address-container {
+            width: 30%;
+            text-transform: capitalize;
+            margin-bottom: 2px;
+        }
+
+        .company-address-heading {
+            font-size: 15px;
+            line-height: 22px;
+            letter-spacing: 0.05em;
+            margin-bottom: 0px;
+            margin-top: 10px;
+        }
+
+        .company-address-text {
+            margin-top: 2px;
+            text-align: left;
+            font-size: 12px;
+            line-height: 15px;
+            color: #595959;
+        }
+
+        /* -------------------------- */
+        /* main content style */
+
         .wrapper {
             display: block;
             padding-top: 50px;
             padding-bottom: 20px;
         }
 
-        .address {
+        .main-content {
             display: inline-block;
             padding-top: 100px
         }
 
-        .bill-add {
+        .customer-address-container {
             display: inline;
             float: left;
             width: 40%;
             padding: 0 0 0 30px;
         }
 
-        .company {
-            padding-left: 30px;
-            display: inline;
-            float: left;
-            width: 30%;
-        }
-
-        .company h1 {
-            font-style: normal;
-            font-weight: bold;
-            font-size: 18px;
-            line-height: 22px;
-            letter-spacing: 0.05em;
-        }
-
-        .company-address{
-            text-align: left;
-            font-style: normal;
-            font-weight: normal;
-            font-size: 10px;
-            line-height: 15px;
-            color: #595959;
-            margin: 0px;
-        }
-
         /* -------------------------- */
         /* shipping style */
-        .ship-to {
+
+        .shipping-address-container {
+            float: right;
+        }
+
+        .shipping-address-container--left {
+            float: left;
+        }
+
+        .shipping-address-label {
             padding-top: 5px;
-            font-style: normal;
-            font-weight: normal;
             font-size: 12px;
             line-height: 18px;
             margin-bottom: 0px;
         }
 
-        .ship-user-name {
+        .shipping-address-name {
             padding: 0px;
-            font-style: normal;
-            font-weight: normal;
             font-size: 15px;
             line-height: 22px;
             margin: 0px;
         }
 
-        .ship-user-address {
-            font-style: normal;
-            font-weight: normal;
+        .shipping-address-text {
             font-size: 10px;
             line-height: 15px;
             color: #595959;
@@ -147,38 +152,28 @@
             width: 160px;
         }
 
-        .ship-user-phone {
-            font-style: normal;
-            font-weight: normal;
-            font-size: 10px;
-            line-height: 15px;
-            color: #595959;
-            margin: 0px;
-        }
-
         /* -------------------------- */
         /* billing style */
-        .bill-to {
+
+        .billing-address-container {
+            float: left;
+        }
+
+        .billing-address-label {
             padding-top: 5px;
-            font-style: normal;
-            font-weight: normal;
             font-size: 12px;
             line-height: 18px;
             margin-bottom: 0px;
         }
 
-        .bill-user-name {
+        .billing-address-name {
             padding: 0px;
-            font-style: normal;
-            font-weight: normal;
             font-size: 15px;
             line-height: 22px;
             margin: 0px;
         }
 
-        .bill-user-address {
-            font-style: normal;
-            font-weight: normal;
+        .billing-address-text {
             font-size: 10px;
             line-height: 15px;
             color: #595959;
@@ -186,71 +181,40 @@
             width: 160px;
         }
 
-        .bill-user-phone {
-            font-style: normal;
-            font-weight: normal;
-            font-size: 10px;
-            line-height: 15px;
-            color: #595959;
-            margin: 0px;
-        }
+        /* -------------------------- */
+        /* estimate details container */
 
-
-        .job-add {
+        .estimate-details-container {
             display: block;
             float: right;
             padding: 20px 30px 0 0;
         }
 
-        .amount-due {
-            background-color: #f2f2f2;
-        }
-
         .attribute-label {
-            font-style: normal;
-            font-weight: normal;
             font-size: 12px;
             line-height: 18px;
+            text-align: left;
+            color: #55547A
         }
 
         .attribute-value {
-            font-style: normal;
-            font-weight: normal;
             font-size: 12px;
             line-height: 18px;
             text-align: right;
         }
 
-        .item-table-heading-row td {
-            padding: 10px;
-        }
+        /* -------------------------- */
+        /* items style */
 
-        .item-table-heading-row {
-            border-bottom: 1px solid red;
-        }
-
-        tr.item-table-heading-row th {
-            font-style: normal;
-            font-weight: 600;
-            font-size: 12px;
-            line-height: 18px;
-        }
-
-        tr.item-row td {
-            font-style: normal;
-            font-weight: normal;
-            font-size: 12px;
-            line-height: 18px;
-        }
-
-        .table2 {
+        .items-table {
             padding: 0px 30px 10px 30px;
             page-break-before: avoid;
             page-break-after: auto;
         }
 
-        .table2 hr {
+        .items-table hr {
             height: 0.1px;
+            margin: 0 30px 0 30px;
         }
 
         .item-table-heading {
@@ -267,100 +231,75 @@
             padding: 5px;
         }
 
-        .note-header {
-            font-size: 13;
-            color: rgba(0, 0, 0, 0.6);
+        .item-table-heading-row td {
+            padding: 10px;
         }
 
-        .note-text {
-            font-size: 10;
-            color: rgba(0, 0, 0, 0.6);
+        .item-table-heading-row {
+            border-bottom: 1px solid red;
         }
 
-        .padd8 {
-            padding-top: 8px;
-            padding-bottom: 8px;
+        tr.item-table-heading-row th {
+
+            font-weight: 600;
+            font-size: 12px;
+            line-height: 18px;
         }
 
-        .padd2 {
-            padding-top: 2px;
-            padding-bottom: 2px;
+        tr.item-row td {
+            font-size: 12px;
+            line-height: 18px;
         }
 
-        .table3 {
+        /* -------------------------- */
+        /* total display table style */
+
+        .total-display-table {
             border: 1px solid #EAF1FB;
-            border-top: none;
             box-sizing: border-box;
             width: 630px;
             page-break-inside: avoid;
             page-break-before: auto;
             page-break-after: auto;
+            margin-left:420px;
+            margin-top: 10px
         }
 
-        td.estimate-total1 {
-            text-align: left;
-            padding: 15px 0 15px 10px;
+        .total-table-attribute-label {
             font-size: 12px;
-            line-height: 18px;
             color: #55547A;
-            border-bottom: 1px solid #E8E8E8;
-            border-top: 1px solid #E8E8E8;
-            border-left: 1px solid #E8E8E8;
+            text-align: left;
+            padding-left: 10px;
         }
 
-        td.estimate-total2 {
+        .total-table-attribute-value {
             font-weight: 500;
             text-align: right;
             font-size: 12px;
-            line-height: 18px;
-            padding: 15px 10px 15px 0;
-            color: #5851DB;
-            border-bottom: 1px solid #E8E8E8;
-            border-top: 1px solid #E8E8E8;
-            border-right: 1px solid #E8E8E8;
+            color: #040405;
+            padding-right: 10px;
+            padding-top: 2px;
+            padding-bottom: 2px;
         }
 
-        .inv-item {
-            border-color: #d9d9d9;
+        .total-border-left {
+            border: 1px solid #E8E8E8 !important;
+            border-right: 0px !important;
+            padding-top: 0px;
+            padding: 8px !important;
         }
 
-        .no-border {
-            border: none;
+        .total-border-right {
+            border: 1px solid #E8E8E8 !important;
+            border-left: 0px !important;
+            padding-top: 0px;
+            padding: 8px !important;
         }
 
-        .company-details h1 {
-            margin: 0;
-            font-style: normal;
-            font-weight: bold;
-            font-size: 15px;
-            line-height: 22px;
-            letter-spacing: 0.05em;
-            text-align: left;
-            max-width: 220px;
-        }
-
-        .company-details h4 {
-            margin: 0;
-            font-style: normal;
-            font-weight: 100;
-            font-size: 18px;
-            line-height: 25px;
-            text-align: right;
-        }
-
-        .company-details h3 {
-            margin-bottom: 1px;
-            margin-top: 0;
-        }
-
-        tr.total td {
-            border-bottom: 1px solid #E8E8E8;
-            border-top: 1px solid #E8E8E8;
-        }
+        /* -------------------------- */
+        /* notes style */
 
         .notes {
-            font-style: normal;
-            font-weight: 300;
             font-size: 12px;
             color: #595959;
             margin-top: 15px;
@@ -371,8 +310,6 @@
         }
 
         .notes-label {
-            font-style: normal;
-            font-weight: normal;
             font-size: 15px;
             line-height: 22px;
             letter-spacing: 0.05em;
@@ -381,60 +318,117 @@
             height: 19.87px;
             padding-bottom: 10px;
         }
+
+        /* -------------------------- */
+        /* helpers style */
+
+        .text-primary {
+            color: #5851DB;
+        }
+
+        .text-center {
+            text-align: center
+        }
+
+        table .text-left {
+            text-align: left;
+        }
+
+        table .text-right {
+            text-align: right;
+        }
+
+        .border-0 {
+            border: none;
+        }
+
+        .py-2 {
+            padding-top: 2px;
+            padding-bottom: 2px;
+        }
+
+        .py-8 {
+            padding-top: 8px;
+            padding-bottom: 8px;
+        }
+
+        .py-3 {
+            padding: 3px 0;
+        }
+
+        .pr-20 {
+            padding-right: 20px;
+        }
+
+        .pr-10 {
+            padding-right: 10px;
+        }
+
+        .pl-20 {
+            padding-left: 20px;
+        }
+
+        .pl-10 {
+            padding-left: 10px;
+        }
+
+        .pl-0 {
+            padding-left: 0;
+        }
     </style>
 </head>
 
 <body>
-    <div class="header-table">
+    <div class="header-container">
         <table width="100%">
             <tr>
                 @if($logo)
-                <td class="header-left">
+                <td class="header-section-left">
                     <img class="header-logo" src="{{ $logo }}" alt="Company Logo">
                     @else
                     @if($estimate->user->company)
-                <td class="header-left" style="padding-top:0px;">
+                <td class="header-section-left" style="padding-top:0px;">
                     <h1 class="header-logo"> {{$estimate->user->company->name}} </h1>
                     @endif
                     @endif
                 </td>
-                <td class="header-right company-details">
+                <td class="header-section-right company-address-container">
                     @include('app.pdf.estimate.partials.company-address')
                 </td>
             </tr>
         </table>
     </div>
 
-    <hr class="header-line">
+    <hr class="header-bottom-divider">
 
     <div class="wrapper">
-        <div class="address">
-            <div class="bill-add">
-                <div style="float:left;">
+        <div class="main-content">
+            <div class="customer-address-container">
+                <div class="billing-address-container">
                     @include('app.pdf.estimate.partials.billing-address')
                 </div>
                 @if($estimate->user->billingaddress)
-                <div style="float:right;">
+                <div class="shipping-address-container">
                     @else
-                    <div style="float:left;">
+                    <div class="shipping-address-container--left">
                         @endif
                         @include('app.pdf.estimate.partials.shipping-address')
                     </div>
                     <div style="clear: both;"></div>
                 </div>
 
-                <div class="job-add">
+                <div class="estimate-details-container">
                     <table>
                         <tr>
-                            <td class="attribute-label" style="text-align: left; color: #55547A">Estimate Number</td>
+                            <td class="attribute-label">Estimate Number</td>
                             <td class="attribute-value"> &nbsp;{{$estimate->estimate_number}}</td>
                         </tr>
                         <tr>
-                            <td class="attribute-label" style="text-align: left; color: #55547A">Estimate Date </td>
+                            <td class="attribute-label">Estimate Date </td>
                             <td class="attribute-value"> &nbsp;{{$estimate->formattedEstimateDate}}</td>
                         </tr>
                         <tr>
-                            <td class="attribute-label" style="text-align: left; color: #55547A">Expiry Date</td>
+                            <td class="attribute-label">Expiry Date</td>
                             <td class="attribute-value"> &nbsp;{{$estimate->formattedExpiryDate}}</td>
                         </tr>
                     </table>
@@ -446,4 +440,4 @@
         </div>
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/resources/views/app/pdf/estimate/partials/table.blade.php b/resources/views/app/pdf/estimate/partials/table.blade.php
index cd472b33..5cf55b56 100644
--- a/resources/views/app/pdf/estimate/partials/table.blade.php
+++ b/resources/views/app/pdf/estimate/partials/table.blade.php
@@ -1,11 +1,11 @@
-<table width="100%" class="item-table" cellspacing="0" border="0">
+<table width="100%" class="items-table" cellspacing="0" border="0">
     <tr class="item-table-heading-row">
-        <th width="2%" class="item-table-heading text-right" style="padding-right: 20px">#</th>
-        <th width="40%" class="item-table-heading text-left" style="padding-left: 0px">Items</th>
-        <th class="item-table-heading text-right" style="padding-right: 20px">Quantity</th>
-        <th class="item-table-heading text-right" style="padding-right: 20px">Price</th>
+        <th width="2%" class="item-table-heading text-right pr-20">#</th>
+        <th width="40%" class="item-table-heading text-left pl-0">Items</th>
+        <th class="item-table-heading text-right pr-20">Quantity</th>
+        <th class="item-table-heading text-right pr-20">Price</th>
         @if($estimate->discount_per_item === 'YES')
-        <th class="item-table-heading text-right" style="padding-left: 10px">Discount</th>
+        <th class="item-table-heading text-right pl-10">Discount</th>
         @endif
         <th class="item-table-heading text-right">Amount</th>
     </tr>
@@ -15,37 +15,33 @@
     @foreach ($estimate->items as $item)
         <tr class="item-row">
             <td
-                class="item-cell text-right"
-                style="padding-right: 20px; vertical-align: top;"
+                class="item-cell text-right pr-20"
+                style="vertical-align: top;"
             >
                 {{$index}}
             </td>
             <td
-                class="item-cell text-left"
-                style="padding-left: 0px"
+                class="item-cell text-left pl-0"
             >
                 <span>{{ $item->name }}</span><br>
                 <span
-                    class="text-left"
-                    style="color: #595959; font-size: 9px; font-weight:300; line-height: 12px;"
+                    class="item-description"
                 >
                     {!! nl2br(htmlspecialchars($item->description)) !!}
                 </span>
             </td>
             <td
-                class="item-cell text-right"
-                style="padding-right: 20px"
+                class="item-cell text-right pr-20"
             >
                 {{$item->quantity}}
             </td>
             <td
-                class="item-cell text-right"
-                style="padding-right: 20px"
+                class="item-cell text-right pr-20"
             >
                 {!! format_money_pdf($item->price, $estimate->user->currency) !!}
             </td>
             @if($estimate->discount_per_item === 'YES')
-                <td class="item-cell text-right" style="padding-left: 10px">
+                <td class="item-cell text-right pl-10">
                     @if($item->discount_type === 'fixed')
                         {!! format_money_pdf($item->discount_val, $estimate->user->currency) !!}
                     @endif
@@ -68,18 +64,17 @@
 
 <table width="100%" cellspacing="0px" border="0" class="total-display-table @if(count($estimate->items) > 12) page-break @endif">
     <tr>
-        <td class="no-border" style="color: #55547A; padding-left:10px;  font-size:12px;">Subtotal</td>
-        <td class="no-border item-cell"
-            style="padding-right:10px; text-align: right;  font-size:12px; color: #040405; font-weight: 500;">{!! format_money_pdf($estimate->sub_total, $estimate->user->currency) !!}</td>
+        <td class="border-0 total-table-attribute-label">Subtotal</td>
+        <td class="border-0 item-cell total-table-attribute-value ">{!! format_money_pdf($estimate->sub_total, $estimate->user->currency) !!}</td>
     </tr>
 
     @if ($estimate->tax_per_item === 'YES')
         @for ($i = 0; $i < count($labels); $i++)
             <tr>
-                <td class="no-border text-left" style="padding-left:10px; font-size:12px; color: #55547A;">
+                <td class="border-0 total-table-attribute-label">
                     {{$labels[$i]}}
                 </td>
-                <td class="no-border item-cell padd2 text-right" style="padding-right:10px; font-weight: 500; font-size:12px; color: #040405">
+                <td class="border-0 item-cell  total-table-attribute-value">
                     {!! format_money_pdf($taxes[$i], $estimate->user->currency) !!}
                 </td>
             </tr>
@@ -87,10 +82,10 @@
     @else
         @foreach ($estimate->taxes as $tax)
             <tr>
-                <td class="no-border text-left" style="padding-left:10px; font-size:12px;  color: #55547A;">
+                <td class="border-0 total-table-attribute-label">
                     {{$tax->name.' ('.$tax->percent.'%)'}}
                 </td>
-                <td class="no-border item-cell padd2 text-right" style="padding-right:10px; font-weight: 500; font-size:12px;  color: #040405">
+                <td class="border-0 item-cell total-table-attribute-value" >
                     {!! format_money_pdf($tax->amount, $estimate->user->currency) !!}
                 </td>
             </tr>
@@ -99,7 +94,7 @@
 
     @if ($estimate->discount_per_item === 'NO')
         <tr>
-            <td class="no-border" style="padding-left:10px; text-align:left; font-size:12px; color: #55547A;">
+            <td class="border-0 total-table-attribute-label pl-10">
                 @if($estimate->discount_type === 'fixed')
                     Discount
                 @endif
@@ -107,7 +102,7 @@
                     Discount ({{$estimate->discount}}%)
                 @endif
             </td>
-            <td class="no-border item-cell padd2" style="padding-right:10px; font-weight: 500; text-align: right; font-size:12px;  color: #040405">
+            <td class="border-0 item-cell total-table-attribute-value pr-10">
                 @if($estimate->discount_type === 'fixed')
                     {!! format_money_pdf($estimate->discount_val, $estimate->user->currency) !!}
                 @endif
@@ -118,19 +113,12 @@
         </tr>
     @endif
     <tr>
-        <td style="padding:3px 0px"></td>
-        <td style="padding:3px 0px"></td>
+        <td class="py-3"></td>
+        <td class="py-3"></td>
     </tr>
     <tr>
-        <td class="no-border total-border-left"
-            style="padding-left:10px; padding-bottom:10px; text-align:left; padding-top:20px; font-size:12px;  color: #55547A;"
-        >
-            <label class="total-bottom"> Total </label>
-        </td>
-        <td
-            class="no-border total-border-right item-cell padd8"
-            style="padding-right:10px; font-weight: 500; text-align: right; font-size:12px;  padding-top:20px; color: #5851DB"
-        >
+        <td class="border-0 total-border-left total-table-attribute-label">Total</td>
+        <td class="border-0 total-border-right item-cell py-8 total-table-attribute-value text-primary">
             {!! format_money_pdf($estimate->total, $estimate->user->currency)!!}
         </td>
     </tr>