worked on issues raised in the feedback

e-picsa · Jan 18, 2024 · d8c487d · d8c487d
1 parent 47e1ded
commit d8c487d
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 14 deletions.
diff --git a/apps/picsa-tools/budget-tool/src/app/components/budget-summary/budget-summary.component.scss b/apps/picsa-tools/budget-tool/src/app/components/budget-summary/budget-summary.component.scss
@@ -2,13 +2,9 @@
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
-  margin-bottom: 1.2rem;
 
-  h2 {
+  h3 {
     margin: 0 0 0.5rem 0;
-    padding: 0;
-    font-size: 1rem;
-    color: #000;
   }
 
   .summary-list {
@@ -19,11 +15,16 @@
     align-items: flex-start;
 
     p {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
       margin: 0;
       padding: 0;
-      font-size: 1rem;
       font-weight: 400;
-      color: #000;
+
+      .mat-icon {
+        font-size: 1.2rem;
+      }
     }
   }
 }
diff --git a/apps/picsa-tools/budget-tool/src/app/components/budget-summary/budget-summary.component.ts b/apps/picsa-tools/budget-tool/src/app/components/budget-summary/budget-summary.component.ts
@@ -4,22 +4,23 @@ import { Component, Input, OnInit } from '@angular/core';
   selector: 'budget-summary',
   template: `
     <div class="summary-container">
-      <h2>Details</h2>
+      <h3>Details</h3>
       <div class="summary-list">
         <p matTooltip="Total Family Labour Hours">
-          TFLH: <b>{{ totalFamilyLabourHours }}</b>
+          <mat-icon>groups</mat-icon>: <b>{{ totalFamilyLabourHours }}</b>
         </p>
         <p matTooltip="Total Inputs Value">
-          TIV: <b>{{ totalInputsValue }}</b>
+          <mat-icon>receipt</mat-icon> : <b>{{ totalInputsValue }}</b>
         </p>
         <p matTooltip="Total Outputs Value">
-          TOV: <b>{{ totalOutputsValue }}</b>
+          <mat-icon>monetization_on</mat-icon>: <b>{{ totalOutputsValue }}</b>
         </p>
         <p matTooltip="Total Produce Consumed">
-          TPC: <b>{{ totalProduceConsumed }}</b>
+          <mat-icon>restaurant_menu</mat-icon>
+          : <b>{{ totalProduceConsumed }}</b>
         </p>
         <p matTooltip="Final Cash Balance">
-          FCB: <b>{{ finalCashBalance }}</b>
+          <mat-icon>account_balance_wallet</mat-icon>: <b>{{ finalCashBalance }}</b>
         </p>
       </div>
     </div>

diff --git a/apps/picsa-tools/budget-tool/src/app/components/budget-tool.components.ts b/apps/picsa-tools/budget-tool/src/app/components/budget-tool.components.ts
@@ -31,6 +31,7 @@ import { BudgetShareDialogComponent } from './share-dialog/share-dialog.componen
 import { BudgetPeriodSummaryComponent } from './summary/period-summary';
 import { BudgetTableComponent } from './table/budget-table';
 import { BudgetSummaryComponent } from './budget-summary/budget-summary.component';
+import { MatIconModule } from '@angular/material/icon';
 
 const components = [
   BudgetBalanceLegendComponent,
@@ -69,6 +70,7 @@ const components = [
     PicsaDbModule,
     RouterModule,
     MatTooltipModule,
+    MatIconModule,
   ],
   exports: components,
 })

diff --git a/apps/picsa-tools/budget-tool/src/app/components/list-item/budget-list-item.html b/apps/picsa-tools/budget-tool/src/app/components/list-item/budget-list-item.html
@@ -4,7 +4,7 @@
     <div style="flex: 1; position: relative">
       <mat-card-title>{{ budget.meta.title }}</mat-card-title>
       <mat-card-content>{{ budget.meta.description }}</mat-card-content>
-      <budget-summary [budgetData]="budget"></budget-summary>
+      <budget-summary [budgetData]="budget" style="margin-bottom: 1.2rem"></budget-summary>
       <mat-card-subtitle style="position: absolute; bottom: 0; right: 0"
         >{{ budget._created | date }}</mat-card-subtitle
       >