add hilight and address

Client/src/app/components/contributor-yearly-report/contributor-yearly-report.component.css

@@ -7,6 +7,9 @@
   @media print {
     :host {
         display: block;
+        margin-top: -50px;
+        -webkit-print-color-adjust: exact;
+        color-adjust: exact;
     }
   }
 
@@ -58,6 +61,10 @@
       text-align: left;
   }
 
+  .mt-5 {
+      margin-top: 5px;
+  }
+
   .mt-20 {
       margin-top: 20px;
   }
@@ -80,7 +87,6 @@
 
   .hilight-yellow {
       background-color: yellow;
-      -webkit-print-color-adjust: exact;
   }
 
   table.borders {
@@ -93,4 +99,8 @@
 
   table.cell-padding-5 td, table.cell-padding-5 th {
       padding: 5px;
+  }
+
+  table.highlight-even tr:nth-child(even) {
+    background-color: #e6ffe6;    
   }

Client/src/app/components/contributor-yearly-report/contributor-yearly-report.component.html

@@ -1,11 +1,13 @@
 <div class="h-100 flex flex-align-center flex-justify-center flex-direction-column">
   <img src="../../../assets/images/original/logo_dark.png">
-  <p>
+  <p class="mt-5">
     Old Fashion Baptist Church Contribution Report {{taxYear}}
   </p>
-  <p>
+  <p class="mt-5">
     {{contributorName}}
   </p>
+  <p>{{contributorStreet}}</p>
+  <p>{{contributorCity}} {{contributorState}}, {{contributorZip}}</p>
 </div>
 
 <div class="page-break-before">
@@ -62,7 +64,7 @@
   </div>
 </div>
 
-<table class="page-break-before cell-padding-5 w-100 borders">
+<table class="highlight-even cell-padding-5 w-100 borders page-break-before">
   <thead>
     <tr>
       <th class="text-left">Date</th>
@@ -75,12 +77,12 @@
   </thead>
   <tbody>
     <tr *ngFor="let t of transactions">
-      <td nowrap>{{t.date}}</td>
-      <td nowrap>{{t.type === 0 ? 'Cash' : 'Check'}}</td>
-      <td nowrap>{{t.checkNumber}}</td>
-      <td nowrap>{{t.fund === 0 ? 'General' : 'Missions'}}</td>
-      <td width="99%">{{t.description}}</td>
-      <td nowrap>{{t.amount | currency}}</td>
-    </tr>
+        <td nowrap>{{t.date}}</td>
+        <td nowrap>{{t.type === 0 ? 'Cash' : 'Check'}}</td>
+        <td nowrap>{{t.checkNumber}}</td>
+        <td nowrap>{{t.fund === 0 ? 'General' : 'Missions'}}</td>
+        <td width="99%">{{t.description}}</td>
+        <td nowrap>{{t.amount | currency}}</td>
+      </tr>   
   </tbody>
 </table>

Client/src/app/components/contributor-yearly-report/contributor-yearly-report.component.ts

@@ -11,6 +11,10 @@ export class ContributorYearlyReportComponent implements OnInit {
 
   public transactions: Transaction[] = [];
   public contributorName: string = 'Bob and Jill Handerson';
+  public contributorStreet: string = '7878 Washington St';
+  public contributorCity: string = 'Butte';
+  public contributorState: string = 'MT';
+  public contributorZip: string = '59701';
   public taxYear: number = 2019;
   public registrationCode: string = 'HDIJDHDFD*#*@';
 
@@ -18,7 +22,7 @@ export class ContributorYearlyReportComponent implements OnInit {
 
   ngOnInit() {
     const t = new Transaction();
-    t.amount = 400;
+    t.amount = 100;
     t.checkNumber = '3434';
     t.contributorId = 45;
     t.date = '2019-10-20';
@@ -38,7 +42,7 @@ export class ContributorYearlyReportComponent implements OnInit {
       t2.goodsOrServices = false;
       t2.taxYear = 2019;
       t2.typeId = 2;
-      this.transactions.push(t);
+      this.transactions.push(t2);
     }
     this.transactions.push(t);
     this.printService.setPrinting(true);