Removed all Material Cards

Removed Tailwind
Moved to scss
Moved to material theme 3

overlord/src/app/cost-centre/cost-centre-detail/cost-centre-detail.component.html

@@ -1,18 +1,14 @@
-<mat-card class="lg:max-w-[50%]">
-  <mat-card-header>
-    <mat-card-title>Cost Center</mat-card-title>
-  </mat-card-header>
-  <mat-card-content>
-    <form [formGroup]="form" class="flex flex-col">
-      <div class="flex flex-row justify-around content-start items-start">
-        <mat-form-field class="flex-auto">
-          <mat-label>Name</mat-label>
-          <input matInput #nameElement formControlName="name" (keyup.enter)="save()" />
-        </mat-form-field>
-      </div>
-    </form>
-  </mat-card-content>
-  <mat-card-actions>
-    <button mat-raised-button (click)="save()" color="primary">Save</button>
-  </mat-card-actions>
-</mat-card>
+<h2>Cost Center</h2>
+
+<form [formGroup]="form" class="flex-col wrapped">
+  <div class="row-container">
+    <mat-form-field class="flex-auto">
+      <mat-label>Name</mat-label>
+      <input matInput #nameElement formControlName="name" (keyup.enter)="save()" />
+    </mat-form-field>
+  </div>
+</form>
+
+<div class="row-container">
+  <button mat-raised-button (click)="save()" color="primary">Save</button>
+</div>

overlord/src/app/cost-centre/cost-centre-detail/cost-centre-detail.component.ts

@@ -1,7 +1,6 @@
 import { AfterViewInit, Component, ElementRef, inject, OnInit, ViewChild } from '@angular/core';
 import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
-import { MatCardModule } from '@angular/material/card';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { MatSnackBar } from '@angular/material/snack-bar';
@@ -14,7 +13,7 @@ import { CostCentreService } from '../cost-centre.service';
   selector: 'app-cost-centre-detail',
   templateUrl: './cost-centre-detail.component.html',
   styleUrls: ['./cost-centre-detail.component.css'],
-  imports: [MatCardModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, MatButtonModule],
+  imports: [ReactiveFormsModule, MatFormFieldModule, MatInputModule, MatButtonModule],
 })
 export class CostCentreDetailComponent implements OnInit, AfterViewInit {
   private route = inject(ActivatedRoute);

overlord/src/app/cost-centre/cost-centre-list/cost-centre-list.component.html

@@ -1,40 +1,35 @@
-<mat-card>
-  <mat-card-header>
-    <mat-card-title-group>
-      <mat-card-title>Cost Centers</mat-card-title>
-      <a mat-button [routerLink]="['/cost-centres', 'new']">
-        <mat-icon>add_box</mat-icon>
-        Add
-      </a>
-    </mat-card-title-group>
-  </mat-card-header>
-  <mat-card-content>
-    <mat-table #table [dataSource]="dataSource" matSort aria-label="Elements">
-      <!-- Name Column -->
-      <ng-container matColumnDef="name">
-        <mat-header-cell *matHeaderCellDef mat-sort-header>Name</mat-header-cell>
-        <mat-cell *matCellDef="let row"
-          ><a [routerLink]="['/cost-centres', row.id]">{{ row.name }}</a></mat-cell
-        >
-      </ng-container>
+<h2 class="row-container space-between">
+  <span>Cost Centers</span>
+  <a mat-button [routerLink]="['/cost-centres', 'new']">
+    <mat-icon>add_box</mat-icon>
+    Add
+  </a>
+</h2>
 
-      <!-- Name Column -->
-      <ng-container matColumnDef="isFixture">
-        <mat-header-cell *matHeaderCellDef mat-sort-header>Is Fixture?</mat-header-cell>
-        <mat-cell *matCellDef="let row">{{ row.isFixture }}</mat-cell>
-      </ng-container>
-
-      <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
-      <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
-    </mat-table>
-
-    <mat-paginator
-      #paginator
-      [length]="dataSource.data.length"
-      [pageIndex]="0"
-      [pageSize]="50"
-      [pageSizeOptions]="[25, 50, 100, 250]"
+<mat-table #table [dataSource]="dataSource" matSort aria-label="Elements">
+  <!-- Name Column -->
+  <ng-container matColumnDef="name">
+    <mat-header-cell *matHeaderCellDef mat-sort-header>Name</mat-header-cell>
+    <mat-cell *matCellDef="let row"
+      ><a [routerLink]="['/cost-centres', row.id]">{{ row.name }}</a></mat-cell
     >
-    </mat-paginator>
-  </mat-card-content>
-</mat-card>
+  </ng-container>
+
+  <!-- Name Column -->
+  <ng-container matColumnDef="isFixture">
+    <mat-header-cell *matHeaderCellDef mat-sort-header>Is Fixture?</mat-header-cell>
+    <mat-cell *matCellDef="let row">{{ row.isFixture }}</mat-cell>
+  </ng-container>
+
+  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+  <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
+</mat-table>
+
+<mat-paginator
+  #paginator
+  [length]="dataSource.data.length"
+  [pageIndex]="0"
+  [pageSize]="50"
+  [pageSizeOptions]="[25, 50, 100, 250]"
+>
+</mat-paginator>

overlord/src/app/cost-centre/cost-centre-list/cost-centre-list.component.ts

@@ -1,5 +1,5 @@
 import { Component, inject, OnInit, ViewChild } from '@angular/core';
-import { MatCardModule } from '@angular/material/card';
+import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
 import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
 import { MatSort, MatSortModule } from '@angular/material/sort';
@@ -13,7 +13,7 @@ import { CostCentreListDataSource } from './cost-centre-list-datasource';
   selector: 'app-cost-centre-list',
   templateUrl: './cost-centre-list.component.html',
   styleUrls: ['./cost-centre-list.component.css'],
-  imports: [MatCardModule, RouterModule, MatIconModule, MatTableModule, MatSortModule, MatPaginatorModule],
+  imports: [RouterModule, MatIconModule, MatTableModule, MatSortModule, MatPaginatorModule, MatButtonModule],
 })
 export class CostCentreListComponent implements OnInit {
   private route = inject(ActivatedRoute);