implemented consistent styling

src/app/app.scss

@@ -1,3 +1,7 @@
+.app-content {
+  padding: 2rem;
+}
+
 h1 {
   font-size: 3.125rem;
   line-height: 100%;

src/app/components/add-expense/add-expense.component.html

@@ -5,7 +5,6 @@
       <div>Amount</div>
       <div>Category</div>
       <div>Merchant</div>
-      <div>Tags</div>
     </div>
 
     <div>
@@ -13,7 +12,7 @@
     </div>
 
     <div class="card-footer">
-      Test
+      <div>Tags</div>
     </div>
   </app-card>
 </div>

src/app/components/card/card.component.scss

@@ -6,3 +6,9 @@
   flex-direction: column;
   gap: 0.5rem;
 }
+
+.card-header {
+  font-size: 1.25rem;
+  font-weight: 700;
+  font-family: sans-serif;
+}

src/app/components/expense-list/expense-list.component.scss

@@ -1,7 +1,3 @@
-.expense-list-container {
-  padding: 1rem;
-}
-
 .expense-item {
   padding-bottom: 1rem;
 }

src/app/components/expense/expense.component.html

@@ -1,28 +1,27 @@
 <div class="expense-container">
-  <div class="expense-header">
-    {{ `${expense().year}/${expense().month}/${expense().day}` | date }}: {{ (expense().cents / 100) | currency: 'USD' }}
-
-    @if (expense().merchant) {
-      at {{ expense().merchant?.name }}
-    }
-  </div>
-
-  <div class="expense-body">
-    <div>
-      Category: {{ expense().category.name }}
+  <app-card>
+    <div class="expense-header">
+      {{ `${expense().year}/${expense().month}/${expense().day}` | date }}: {{ (expense().cents / 100) | currency: 'USD' }}
     </div>
 
-    <div>
-      Note: {{ expense().note ?? 'N/A' }}
-    </div>
-  </div>
+    <div class="expense-body">
+      <div>Merchant: {{ expense().merchant?.name ?? '--' }}</div>
 
-  <div class="expense-footer">
-    <div class="expense-tags">
-      Tags:
-      @for (tag of expense().tags; track tag.id) {
-        <div>{{ tag.name }}</div>
+      <div>Category: {{ expense().category.name }}</div>
+
+      <div>Note: {{ expense().note ?? '--' }}</div>
+    </div>
+
+    <div class="expense-footer">
+      <div>Tags:</div>
+
+      @if (expense().tags.length) {
+        @for (tag of expense().tags; track tag.id) {
+          <div class="expense-tag">{{ tag.name }}</div>
+        }
+      } @else {
+        <div>--</div>
       }
     </div>
-  </div>
+  </app-card>
 </div>

src/app/components/expense/expense.component.scss

@@ -1,24 +1,26 @@
-.expense-container {
-  border-radius: 5px;
-  padding: 1rem;
-  box-shadow: rgba(99, 99, 99, 0.2) 0 2px 8px 0;
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-
 .expense-header {
-  display: flex;
-  gap: 0.5rem;
+  font-family: sans-serif;
+  font-weight: bold;
 }
 
 .expense-body {
-
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
 }
 
 .expense-footer {
-  .expense-tags {
-    display: flex;
-    gap: 0.5rem;
-  }
+  font-family: sans-serif;
+  font-size: 0.8rem;
+  font-weight: lighter;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  color: #515151;
+}
+
+.expense-tag {
+  border-radius: 0.5rem;
+  background-color: #f1f1f1;
+  padding: 0.1rem 0.5rem;
 }

src/app/components/expense/expense.component.ts

@@ -1,12 +1,14 @@
-import {Component, input} from '@angular/core';
+import { Component, input } from '@angular/core';
 import { Expense } from '../../services/expense.service';
-import {CurrencyPipe, DatePipe} from '@angular/common';
+import { CurrencyPipe, DatePipe } from '@angular/common';
+import { CardComponent } from '../card/card.component';
 
 @Component({
   selector: 'app-expense',
   imports: [
     CurrencyPipe,
-    DatePipe
+    DatePipe,
+    CardComponent
   ],
   templateUrl: './expense.component.html',
   styleUrl: './expense.component.scss',

src/app/pages/expenses/expenses.scss

@@ -0,0 +1,5 @@
+.expenses-container {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}