Removed all Material Cards

Removed Tailwind
Moved to scss
Moved to material theme 3

overlord/src/app/period/period-detail/period-detail.component.html

@@ -1,37 +1,26 @@
-<mat-card class="lg:max-w-[50%]">
-  <mat-card-header>
-    <mat-card-title>Period</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>Valid From</mat-label>
-          <input
-            matInput
-            #validFromElement
-            [matDatepicker]="validFrom"
-            formControlName="validFrom"
-            autocomplete="off"
-          />
-          <mat-datepicker-toggle matSuffix [for]="validFrom"></mat-datepicker-toggle>
-          <mat-datepicker #validFrom></mat-datepicker>
-        </mat-form-field>
-      </div>
-      <div class="flex flex-row justify-around content-start items-start">
-        <mat-form-field class="flex-auto">
-          <mat-label>Valid Till</mat-label>
-          <input matInput [matDatepicker]="validTill" formControlName="validTill" autocomplete="off" />
-          <mat-datepicker-toggle matSuffix [for]="validTill"></mat-datepicker-toggle>
-          <mat-datepicker #validTill></mat-datepicker>
-        </mat-form-field>
-      </div>
-    </form>
-  </mat-card-content>
-  <mat-card-actions>
-    <button mat-raised-button color="primary" (click)="save()" class="mr-5">Save</button>
-    @if (!!item.id) {
-      <button mat-raised-button color="warn" (click)="confirmDelete()">Delete</button>
-    }
-  </mat-card-actions>
-</mat-card>
+<h2>Period</h2>
+<form [formGroup]="form" class="flex-col wrapped">
+  <div class="row-container">
+    <mat-form-field class="flex-auto">
+      <mat-label>Valid From</mat-label>
+      <input matInput #validFromElement [matDatepicker]="validFrom" formControlName="validFrom" autocomplete="off" />
+      <mat-datepicker-toggle matSuffix [for]="validFrom"></mat-datepicker-toggle>
+      <mat-datepicker #validFrom></mat-datepicker>
+    </mat-form-field>
+  </div>
+  <div class="row-container">
+    <mat-form-field class="flex-auto">
+      <mat-label>Valid Till</mat-label>
+      <input matInput [matDatepicker]="validTill" formControlName="validTill" autocomplete="off" />
+      <mat-datepicker-toggle matSuffix [for]="validTill"></mat-datepicker-toggle>
+      <mat-datepicker #validTill></mat-datepicker>
+    </mat-form-field>
+  </div>
+</form>
+
+<div class="row-container">
+  <button mat-raised-button color="primary" (click)="save()" class="">Save</button>
+  @if (!!item.id) {
+    <button mat-raised-button color="warn" (click)="confirmDelete()">Delete</button>
+  }
+</div>

overlord/src/app/period/period-detail/period-detail.component.ts

@@ -1,7 +1,6 @@
 import { Component, ElementRef, HostListener, 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 { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatDialog } from '@angular/material/dialog';
 import { MatFormFieldModule } from '@angular/material/form-field';
@@ -18,14 +17,7 @@ import { PeriodService } from '../period.service';
   selector: 'app-period-detail',
   templateUrl: './period-detail.component.html',
   styleUrls: ['./period-detail.component.css'],
-  imports: [
-    MatCardModule,
-    ReactiveFormsModule,
-    MatFormFieldModule,
-    MatInputModule,
-    MatDatepickerModule,
-    MatButtonModule,
-  ],
+  imports: [ReactiveFormsModule, MatFormFieldModule, MatInputModule, MatDatepickerModule, MatButtonModule],
 })
 export class PeriodDetailComponent implements OnInit {
   private route = inject(ActivatedRoute);

overlord/src/app/period/period-list/period-list.component.html

@@ -1,33 +1,28 @@
-<mat-card>
-  <mat-card-header>
-    <mat-card-title-group>
-      <mat-card-title>Periods</mat-card-title>
-      <a mat-button [routerLink]="['/periods', 'new']">
-        <mat-icon>add_box</mat-icon>
-        Add
+<h2 class="row-container space-between">
+  <span>Periods</span>
+  <a mat-button [routerLink]="['/periods', 'new']">
+    <mat-icon>add_box</mat-icon>
+    Add
+  </a>
+</h2>
+
+<mat-table #table [dataSource]="dataSource" aria-label="Elements">
+  <!-- Valid From Column -->
+  <ng-container matColumnDef="validFrom">
+    <mat-header-cell *matHeaderCellDef>Valid From</mat-header-cell>
+    <mat-cell *matCellDef="let row">
+      <a [routerLink]="['/periods', row.id]">
+        {{ row.validFrom }}
       </a>
-    </mat-card-title-group>
-  </mat-card-header>
-  <mat-card-content>
-    <mat-table #table [dataSource]="dataSource" aria-label="Elements">
-      <!-- Valid From Column -->
-      <ng-container matColumnDef="validFrom">
-        <mat-header-cell *matHeaderCellDef>Valid From</mat-header-cell>
-        <mat-cell *matCellDef="let row">
-          <a [routerLink]="['/periods', row.id]">
-            {{ row.validFrom }}
-          </a>
-        </mat-cell>
-      </ng-container>
+    </mat-cell>
+  </ng-container>
 
-      <!-- Valid Till Column -->
-      <ng-container matColumnDef="validTill">
-        <mat-header-cell *matHeaderCellDef>Valid Till</mat-header-cell>
-        <mat-cell *matCellDef="let row">{{ row.validTill }}</mat-cell>
-      </ng-container>
+  <!-- Valid Till Column -->
+  <ng-container matColumnDef="validTill">
+    <mat-header-cell *matHeaderCellDef>Valid Till</mat-header-cell>
+    <mat-cell *matCellDef="let row">{{ row.validTill }}</mat-cell>
+  </ng-container>
 
-      <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
-      <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
-    </mat-table>
-  </mat-card-content>
-</mat-card>
+  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+  <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
+</mat-table>

overlord/src/app/period/period-list/period-list.component.ts

@@ -1,5 +1,5 @@
 import { Component, inject, OnInit } from '@angular/core';
-import { MatCardModule } from '@angular/material/card';
+import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
 import { MatTableModule } from '@angular/material/table';
 import { ActivatedRoute, RouterModule } from '@angular/router';
@@ -11,7 +11,7 @@ import { PeriodListDataSource } from './period-list-datasource';
   selector: 'app-period-list',
   templateUrl: './period-list.component.html',
   styleUrls: ['./period-list.component.css'],
-  imports: [MatCardModule, RouterModule, MatIconModule, MatTableModule],
+  imports: [RouterModule, MatIconModule, MatTableModule, MatButtonModule],
 })
 export class PeriodListComponent implements OnInit {
   private route = inject(ActivatedRoute);