From f71dd5b315bef265eacdcc83e19d6760ecf8208a Mon Sep 17 00:00:00 2001
From: Joe Arndt <jmarndt@users.noreply.github.com>
Date: Wed, 25 Feb 2026 16:15:42 -0600
Subject: [PATCH] implement mat card for categories for consistency

---
 .../expense-list/expense-list.component.scss  |  2 +-
 .../categories/categories.component.html      | 25 +++++++++----------
 .../categories/categories.component.scss      | 25 ++++---------------
 .../categories/categories.component.ts        |  4 +--
 4 files changed, 20 insertions(+), 36 deletions(-)

diff --git a/src/app/components/expense-list/expense-list.component.scss b/src/app/components/expense-list/expense-list.component.scss
index f6d8b5f..99f5d4f 100644
--- a/src/app/components/expense-list/expense-list.component.scss
+++ b/src/app/components/expense-list/expense-list.component.scss
@@ -24,5 +24,5 @@
 .expense-list {
   display: grid;
   gap: 1rem;
-  justify-content: center;
+  justify-content: stretch;
 }
diff --git a/src/app/components/metadata/categories/categories.component.html b/src/app/components/metadata/categories/categories.component.html
index 9534c08..3917051 100644
--- a/src/app/components/metadata/categories/categories.component.html
+++ b/src/app/components/metadata/categories/categories.component.html
@@ -1,17 +1,16 @@
 <div class="categories-container">
-  <div class="category-list-header">
-    <p>Categories</p>
-    <app-divider />
-  </div>
+  <mat-card appearance="outlined">
+    <mat-card-header>
+      <mat-card-title>Categories</mat-card-title>
+    </mat-card-header>
 
-  <div class="category-list">
-    @for (category of categories(); track category.id) {
-      <div>{{ category.name }}</div>
-    }
-    @if (!categories().length) {
-      <div class="category-list-empty">
+    <mat-card-content>
+      @for (category of categories(); track category.id) {
+        {{ category.name }}
+      }
+      @if (!categories().length) {
         No categories to display
-      </div>
-    }
-  </div>
+      }
+    </mat-card-content>
+  </mat-card>
 </div>
diff --git a/src/app/components/metadata/categories/categories.component.scss b/src/app/components/metadata/categories/categories.component.scss
index 85a72d5..7faa374 100644
--- a/src/app/components/metadata/categories/categories.component.scss
+++ b/src/app/components/metadata/categories/categories.component.scss
@@ -1,28 +1,13 @@
-.categories-container {
-  display: grid;
-  gap: 1rem;
-}
+@use "variables";
 
-.category-list-header {
-  padding-top: 1rem;
+.categories-container {
+  padding-top: 0.5rem;
   display: flex;
   flex-direction: column;
   align-items: center;
 
-  p {
-    font-size: 1.8rem;
-    line-height: 100%;
-    font-weight: 400;
-    margin: 0;
-  }
-
-  app-divider {
+  mat-card {
+    max-width: variables.$wide-screen;
     width: 100%;
   }
 }
-
-.category-list {
-  display: grid;
-  gap: 1rem;
-  justify-content: center;
-}
diff --git a/src/app/components/metadata/categories/categories.component.ts b/src/app/components/metadata/categories/categories.component.ts
index 3028dbd..ae44c8b 100644
--- a/src/app/components/metadata/categories/categories.component.ts
+++ b/src/app/components/metadata/categories/categories.component.ts
@@ -1,11 +1,11 @@
 import { Component, computed } from '@angular/core';
 import { CategoryService } from '../../../services/category.service';
-import { DividerComponent } from '../../divider/divider.component';
+import { MatCardModule } from '@angular/material/card';
 
 @Component({
   selector: 'app-categories',
   imports: [
-    DividerComponent,
+    MatCardModule
   ],
   templateUrl: './categories.component.html',
   styleUrl: './categories.component.scss'