favicon and simple styling

src/app/app.html

@@ -2,6 +2,7 @@
   <header class="app-header">
     <h1>Common Cents</h1>
     <h2>The common sense expense tracker.</h2>
+    <app-divider />
   </header>
 
   <main class="app-content">

src/app/app.scss

@@ -2,6 +2,17 @@
   padding: 0.5rem;
 }
 
+.app-header {
+  padding: 0.5rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  app-divider {
+    width: 100%;
+  }
+}
+
 h1 {
   font-size: 3.125rem;
   line-height: 100%;

src/app/app.ts

@@ -1,9 +1,10 @@
 import { Component } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
+import { Divider } from './components/divider/divider';
 
 @Component({
   selector: 'app-root',
-  imports: [RouterOutlet],
+  imports: [RouterOutlet, Divider],
   templateUrl: './app.html',
   styleUrl: './app.scss'
 })

src/app/components/divider/divider.html

@@ -0,0 +1 @@
+<div class="divider"></div>

src/app/components/divider/divider.scss

@@ -0,0 +1,4 @@
+.divider {
+  padding-top: 1rem;
+  border-bottom: 1px #80808042 solid;
+}

src/app/components/divider/divider.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-divider',
+  imports: [],
+  templateUrl: './divider.html',
+  styleUrl: './divider.scss'
+})
+export class Divider { }

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

@@ -1,6 +1,17 @@
 <div class="expense-list-container">
-  <h2>Expenses</h2>
-  @for (expense of expenses(); track expense.id) {
-    <app-expense [expense]="expense" />
-  }
+  <div class="expense-list-header">
+    <p>Expenses</p>
+    <app-divider />
+  </div>
+
+  <div class="expense-list">
+    @for (expense of expenses(); track expense.id) {
+      <app-expense [expense]="expense" />
+    }
+    @if (!expenses().length) {
+      <div class="expense-list-empty">
+        No expenses to display
+      </div>
+    }
+  </div>
 </div>

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

@@ -2,3 +2,28 @@
   display: grid;
   gap: 1rem;
 }
+
+.expense-list-header {
+  padding-top: 1rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  p {
+    font-size: 1.8rem;
+    line-height: 100%;
+    font-weight: 200;
+    margin: 0;
+    font-family: sans-serif;
+  }
+
+  app-divider {
+    width: 100%;
+  }
+}
+
+.expense-list {
+  display: grid;
+  gap: 1rem;
+  justify-content: center;
+}

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

@@ -3,10 +3,11 @@ import { ExpenseService } from '../../services/expense.service';
 import { MatTableModule } from '@angular/material/table';
 import { MatCardModule } from '@angular/material/card';
 import { ExpenseComponent } from '../expense/expense.component';
+import {Divider} from '../divider/divider';
 
 @Component({
   selector: 'app-expense-list',
-  imports: [MatTableModule, MatCardModule, ExpenseComponent],
+  imports: [MatTableModule, MatCardModule, ExpenseComponent, Divider],
   templateUrl: './expense-list.component.html',
   styleUrl: './expense-list.component.scss'
 })

src/index.html

@@ -5,7 +5,11 @@
   <title>Common Cents</title>
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96" />
+  <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+  <link rel="shortcut icon" href="/favicon.ico" />
+  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
+  <link rel="manifest" href="/site.webmanifest" />
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">