Merge pull request #5736 from beganovich/v5-1805-design-updates

(v5) Design fixes & improvements

resources/views/pdf-designs/bold.html

@@ -26,6 +26,7 @@
     .header-wrapper {
         display: grid;
         grid-template-columns: 1.5fr 1fr 1fr;
+        gap: 20px;
         background-color: #2d2c2a;
         padding: 3rem;
         color: white;
@@ -33,7 +34,7 @@
     }
 
     .company-logo {
-        height: 6rem;
+        width: auto; /** If logo is too big or too small, modify using percentages. Example: width: 90%; **/
     }
 
     #company-details,

resources/views/pdf-designs/business.html

@@ -28,12 +28,12 @@
         grid-gap: 20px;
     }
 
-    .header-container > span {
-        display: block;
+    .company-logo {
+        width: auto; /** If logo is too big or too small, modify using percentages. Example: width: 90%; **/
     }
 
-    .company-logo {
-        height: 4rem;
+    .header-container > span {
+        display: block;
     }
 
     #company-details {

resources/views/pdf-designs/clean.html

@@ -28,8 +28,8 @@
         gap: 20px;
     }
 
-    .header-container .company-logo {
-        height: 4rem;
+    .company-logo {
+        width: auto; /** If logo is too big or too small, modify using percentages. Example: width: 90%; **/
     }
 
     #company-details {
@@ -47,8 +47,8 @@
     }
 
     .entity-label {
+        margin-top: 1rem;
         text-transform: uppercase;
-        margin-top: 3.5rem;
         padding-left: 1rem;
         margin-bottom: 1rem;
         font-weight: bold;

resources/views/pdf-designs/creative.html

@@ -28,8 +28,8 @@
         gap: 20px;
     }
 
-    .header-wrapper .company-logo {
-        height: 5rem;
+    .company-logo {
+        width: auto; /** If logo is too big or too small, modify using percentages. Example: width: 90%; **/
     }
 
     .header-wrapper #client-details,

resources/views/pdf-designs/elegant.html

@@ -22,6 +22,10 @@
         padding: 0;
     }
 
+    .company-logo {
+        width: auto; /** If logo is too big or too small, modify using percentages. Example: width: 90%; **/
+    }
+
     .company-logo-wrapper {
         display: flex;
         flex-direction: row;
@@ -30,7 +34,7 @@
         border-bottom: 4px solid;
     }
 
-    .company-logo-wrapper .company-logo {
+    .company-logo-wrapper {
         height: 5rem;
     }
 

resources/views/pdf-designs/hipster.html

@@ -66,13 +66,12 @@
         margin-top: 0.8rem;
     }
 
-    .header-right-side-wrapper-right {
-        display: flex;
+    .header-wrapper {
+        margin-left: auto;
     }
 
-    .header-wrapper .company-logo {
-        height: 5rem;
-        margin-left: auto;
+    .company-logo {
+        width: auto; /** If logo is too big or too small, modify using percentages. Example: width: 90%; **/
     }
 
     .entity-label {

resources/views/pdf-designs/modern.html

@@ -54,16 +54,16 @@
         padding-bottom: 0.5rem;
     }
 
-    .company-logo {
-        height: 5rem;
-    }
-
     .logo-client-wrapper {
         margin: 3rem 2rem;
         display: grid;
         grid-template-columns: 1.5fr 1fr;
     }
 
+    .company-logo {
+        width: auto; /** If logo is too big or too small, modify using percentages. Example: width: 90%; **/
+    }
+
     #client-details {
         display: flex;
         flex-direction: column;

resources/views/pdf-designs/plain.html

@@ -27,8 +27,8 @@
         grid-template-columns: 1fr 1fr 1fr;
     }
 
-    .header-wrapper .company-logo {
-        height: 5rem;
+    .company-logo {
+        width: auto; /** If logo is too big or too small, modify using percentages. Example: width: 90%; **/
     }
 
     .header-wrapper #company-address {

resources/views/pdf-designs/playful.html

@@ -25,14 +25,10 @@
     .header-wrapper {
         margin-top: 2rem;
         display: grid;
-        grid-template-columns: 1fr 1fr 1fr;
+        grid-template-columns: 1fr 0.5fr 2fr;
         padding: 2rem 3rem;
     }
 
-    .header-wrapper .company-logo {
-        height: 5rem;
-    }
-
     .header-wrapper .entity-details-wrapper {
         background-color: var(--primary-color);
         padding: 1rem;
@@ -50,6 +46,10 @@
         font-weight: normal;
     }
 
+    .company-logo {
+        width: auto; /** If logo is too big or too small, modify using percentages. Example: width: 90%; **/
+    }
+
     .contacts-wrapper {
         display: grid;
         grid-template-columns: 1fr 1fr;