Use Material Cards for budget dashboard

src/app/app.module.ts

@@ -15,6 +15,7 @@ import { MatSelectModule } from '@angular/material/select';
 import { MatSidenavModule } from '@angular/material/sidenav';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatCardModule } from '@angular/material/card';
 
 import { AppComponent } from './app.component';
 import { TransactionsComponent } from './transactions/transactions.component';
@@ -105,6 +106,7 @@ export const CustomCurrencyMaskConfig: CurrencyMaskConfig = {
     CurrencyMaskModule,
     ChartsModule,
     MatCheckboxModule,
+    MatCardModule,
   ],
   providers: [
     { provide: CURRENCY_MASK_CONFIG, useValue: CustomCurrencyMaskConfig },

src/app/budgets/budget-details/budget-details.component.css

@@ -6,7 +6,7 @@
     padding: 1em;
   }
   
-  .dashboard > div {
+  .dashboard > mat-card {
     background: #212121;
     display: inline-block;
     margin: 1em;

src/app/budgets/budget-details/budget-details.component.html

@@ -1,5 +1,5 @@
 <div class="dashboard">
-  <div class="dashboard-primary" [hidden]="!budget">
+  <mat-card class="dashboard-primary" [hidden]="!budget">
     <h2 class="balance">
       Current Balance: <br />
       <span
@@ -10,8 +10,8 @@
     <div class="transaction-navigation">
       <a mat-button routerLink="/budgets/{{ budget.id }}/transactions" *ngIf="budget">View Transactions</a>
     </div>
-  </div>
-  <div class="dashboard-categories" [hidden]="!budget">
+  </mat-card>
+  <mat-card class="dashboard-categories" [hidden]="!budget">
     <h3 class="categories">Income</h3>
     <a mat-button routerLink="/budgets/{{ budget.id }}/categories/new" class="view-all" *ngIf="budget">Add Category</a>
     <div class="no-categories" *ngIf="!income || income.length === 0">
@@ -24,8 +24,8 @@
       <app-category-list [budgetId]="budget.id" [categories]="income" [categoryBalances]="categoryBalances">
       </app-category-list>
     </div>
-  </div>
-  <div class="dashboard-categories" [hidden]="!budget">
+  </mat-card>
+  <mat-card class="dashboard-categories" [hidden]="!budget">
     <h3 class="categories">Expenses</h3>
     <a mat-button routerLink="/budgets/{{ budget.id }}/categories/new" class="view-all" *ngIf="budget">Add Category</a>
     <div class="no-categories" *ngIf="!expenses || expenses.length === 0">
@@ -38,7 +38,7 @@
       <app-category-list [budgetId]="budget.id" [categories]="expenses" [categoryBalances]="categoryBalances">
       </app-category-list>
     </div>
-  </div>
+  </mat-card>
 </div>
 <a mat-fab routerLink="/budgets/{{ budget.id }}/transactions/new" *ngIf="budget">
   <mat-icon aria-label="Add">add</mat-icon>