Implement dynamic header and table color functionality

This commit is contained in:
Srinath 2026-03-05 12:04:59 +05:30
parent 4f9e42cba0
commit 7feaa85d41
1 changed files with 22 additions and 22 deletions

View File

@ -293,7 +293,7 @@ export const printDCToInvoiceStyles = (printStyle) => {
} }
.header-section-wrapper { .header-section-wrapper {
padding: 5px 0px; padding: 5px 0px;
background: #f3f3f3; // background: #f3f3f3;
border-radius: 1%; border-radius: 1%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -435,7 +435,7 @@ export const printDCToInvoiceStyles = (printStyle) => {
.invoice-head{ .invoice-head{
font-weight: light; font-weight: light;
font-size: 18px; font-size: 18px;
color: #5e5e5e; // color: #5e5e5e;
} }
.meta-info { .meta-info {
margin-top: 1rem; margin-top: 1rem;
@ -453,7 +453,7 @@ export const printDCToInvoiceStyles = (printStyle) => {
border-spacing: 0px 5px; border-spacing: 0px 5px;
} }
.product-table th { .product-table th {
background: #ebebebff; // background: #ebebebff;
padding: 4px; padding: 4px;
text-align: left; text-align: left;
} }
@ -583,7 +583,7 @@ export const printDCToInvoiceStyles = (printStyle) => {
.invoice-head{ .invoice-head{
font-weight: light; font-weight: light;
font-size: 16px; font-size: 16px;
color: #5e5e5e; // color: #5e5e5e;
} }
.meta-info { .meta-info {
display: flex; display: flex;
@ -888,7 +888,7 @@ export const printDCToInvoiceStyles = (printStyle) => {
text-align: center; text-align: center;
} }
.header-section-wrapper { .header-section-wrapper {
background: #ccccccff; // background: #ccccccff;
font-size: 15px; font-size: 15px;
font-weight: bold; font-weight: bold;
display: flex; display: flex;
@ -928,7 +928,7 @@ export const printDCToInvoiceStyles = (printStyle) => {
.product-table th { .product-table th {
padding: 4px; padding: 4px;
text-align: left; text-align: left;
background: #ccccccff; // background: #ccccccff;
} }
.product-table td { .product-table td {
padding: 4px; padding: 4px;
@ -1057,7 +1057,7 @@ export const printDCToInvoiceStyles = (printStyle) => {
font-weight: bold; font-weight: bold;
padding: 4px; padding: 4px;
text-align: left; text-align: left;
background: #ccccccff; // background: #ccccccff;
} }
.product-table td { .product-table td {
padding: 4px; padding: 4px;
@ -1153,7 +1153,7 @@ export const printDCToInvoiceStyles = (printStyle) => {
} }
.header-section { .header-section {
text-align: center; text-align: center;
background: #dbdbdb; // background: #dbdbdb;
padding: 1px 8px; padding: 1px 8px;
} }
.header-section-wrapper { .header-section-wrapper {
@ -1192,7 +1192,7 @@ export const printDCToInvoiceStyles = (printStyle) => {
.product-table th { .product-table th {
padding: 4px; padding: 4px;
text-align: left; text-align: left;
background: #ccccccff; // background: #ccccccff;
} }
.product-table td { .product-table td {
padding: 4px; padding: 4px;
@ -1297,7 +1297,7 @@ export const printDCToInvoiceStyles = (printStyle) => {
margin-bottom: 8px; margin-bottom: 8px;
align-items: center; align-items: center;
font-weight: 500; font-weight: 500;
background: #dbdbdb; // background: #dbdbdb;
} }
.header-company { .header-company {
font-size: 20px; font-size: 20px;
@ -1327,7 +1327,7 @@ export const printDCToInvoiceStyles = (printStyle) => {
.product-table th { .product-table th {
padding: 4px; padding: 4px;
text-align: left; text-align: left;
background: #ccccccff; // background: #ccccccff;
} }
.product-table td { .product-table td {
padding: 4px; padding: 4px;
@ -1436,7 +1436,7 @@ export const printDCToInvoiceStyles = (printStyle) => {
width: 100%; width: 100%;
font-size: 20px; font-size: 20px;
font-weight: 600; font-weight: 600;
background: #dbdbdb; // background: #dbdbdb;
} }
.branch-address { .branch-address {
margin: 5px 0px; margin: 5px 0px;
@ -1463,7 +1463,7 @@ export const printDCToInvoiceStyles = (printStyle) => {
.product-table th { .product-table th {
padding: 4px; padding: 4px;
text-align: left; text-align: left;
background: #ccccccff; // background: #ccccccff;
} }
.product-table td { .product-table td {
padding: 4px; padding: 4px;
@ -1621,7 +1621,7 @@ export const printDCToInvoiceStyles = (printStyle) => {
font-weight: bold; font-weight: bold;
padding: 4px; padding: 4px;
text-align: left; text-align: left;
background: #ccccccff; // background: #ccccccff;
border-bottom: 2px dashed #000; border-bottom: 2px dashed #000;
} }
.product-table td { .product-table td {
@ -1808,8 +1808,8 @@ export const printDCToInvoiceStyles = (printStyle) => {
padding: 4px; padding: 4px;
text-align: left; text-align: left;
border: 2px solid #fff; border: 2px solid #fff;
background: rgb(55, 59, 68); // background: rgb(55, 59, 68);
color:rgb(255, 255, 255); // color:rgb(255, 255, 255);
} }
.product-table tr:nth-child(even) { .product-table tr:nth-child(even) {
background-color: #E8E8E8; background-color: #E8E8E8;
@ -1899,7 +1899,7 @@ export const printDCToInvoiceStyles = (printStyle) => {
font-size: 20px; font-size: 20px;
padding: 10px 0; padding: 10px 0;
font-weight: 600; font-weight: 600;
background: rgb(253, 199, 22); // background: rgb(253, 199, 22);
width: 100%; width: 100%;
display : flex; display : flex;
justify-content :center; justify-content :center;
@ -1988,11 +1988,11 @@ export const printDCToInvoiceStyles = (printStyle) => {
padding: 4px; padding: 4px;
text-align: left; text-align: left;
border: 2px solid #fff; border: 2px solid #fff;
background: rgb(55, 59, 68); // background: rgb(55, 59, 68);
color:rgb(255, 255, 255); // color:rgb(255, 255, 255);
} }
.product-table tr:nth-child(even) { .product-table tr:nth-child(even) {
background-color: #E8E8E8; // background-color: #E8E8E8;
} }
.product-table td { .product-table td {
padding: 4px; padding: 4px;
@ -2018,7 +2018,7 @@ export const printDCToInvoiceStyles = (printStyle) => {
.footer-notes { .footer-notes {
font-size: 17px; font-size: 17px;
text-align: left; text-align: left;
color: #5e5e5e; // color: #5e5e5e;
font-weight: bold; font-weight: bold;
} }
.greeting-section { .greeting-section {
@ -2079,7 +2079,7 @@ export const printDCToInvoiceStyles = (printStyle) => {
font-size: 20px; font-size: 20px;
padding: 10px 0; padding: 10px 0;
font-weight: 600; font-weight: 600;
background: rgb(253, 199, 22); // background: rgb(253, 199, 22);
width: 100%; width: 100%;
display : flex; display : flex;
justify-content :center; justify-content :center;