implement mat card for categories for consistency

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;
 }

src/app/components/metadata/categories/categories.component.html

@@ -1,17 +1,16 @@
 <div class="categories-container">
-  <div class="category-list-header">
+  <mat-card appearance="outlined">
-    <p>Categories</p>
+    <mat-card-header>
-    <app-divider />
+      <mat-card-title>Categories</mat-card-title>
-  </div>
+    </mat-card-header>
 
-  <div class="category-list">
+    <mat-card-content>
-    @for (category of categories(); track category.id) {
+      @for (category of categories(); track category.id) {
-      <div>{{ category.name }}</div>
+        {{ category.name }}
-    }
+      }
-    @if (!categories().length) {
+      @if (!categories().length) {
-      <div class="category-list-empty">
         No categories to display
-      </div>
+      }
-    }
+    </mat-card-content>
-  </div>
+  </mat-card>
 </div>

src/app/components/metadata/categories/categories.component.scss

@@ -1,28 +1,13 @@
-.categories-container {
+@use "variables";
-  display: grid;
-  gap: 1rem;
-}
 
-.category-list-header {
+.categories-container {
-  padding-top: 1rem;
+  padding-top: 0.5rem;
   display: flex;
   flex-direction: column;
   align-items: center;
 
-  p {
+  mat-card {
-    font-size: 1.8rem;
+    max-width: variables.$wide-screen;
-    line-height: 100%;
-    font-weight: 400;
-    margin: 0;
-  }
-
-  app-divider {
     width: 100%;
   }
 }
-
-.category-list {
-  display: grid;
-  gap: 1rem;
-  justify-content: center;
-}

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'