add styles to settings page

src/app/features/settings/components/settings.component.html

@@ -1,21 +1,31 @@
 <div class="grid h-screen place-items-center">
-  <form [formGroup]="form">
-    <div>
-      <label for="width">Width:</label>
-      <input type="number" id="width" formControlName="width">
+  <form [formGroup]="form" class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
+    <div class="mb-4">
+      <label class="block text-gray-700 text-sm font-bold mb-2" for="width">Width:</label>
+      <input
+        class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
+        type="number" id="width" formControlName="width">
     </div>
-  
+
     <div>
-      <label for="height">Height:</label>
-      <input type="number" id="height" formControlName="height">
+      <label class="block text-gray-700 text-sm font-bold mb-2" for="height">Height:</label>
+      <input
+        class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
+        type="number" id="height" formControlName="height">
     </div>
-  
+
     <div>
-      <label for="totalMines">Total Mines:</label>
-      <input type="number" id="totalMines" formControlName="totalMines">
+      <label class="block text-gray-700 text-sm font-bold mb-2" for="totalMines">Total Mines:</label>
+      <input
+        class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
+        type="number" id="totalMines" formControlName="totalMines">
+    </div>
+
+    <div class="py-8">
+      <button
+        class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline float-right"
+        type="button" (click)="saveForm()">Save Settings
+      </button>
     </div>
-
-    <button type="button" (click)="saveForm()">Save Settings</button>
   </form>
-
-</div>
+</div>

src/app/features/settings/components/settings.component.sass

@@ -0,0 +1,4 @@
+label
+    @apply block text-gray-700 text-sm font-bold mb-2
+input 
+    @apply shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline

src/app/features/settings/components/settings.component.ts

@@ -13,6 +13,7 @@ import { UntilDestroy, untilDestroyed } from "@ngneat/until-destroy";
 @Component({
   selector: "app-settings",
   templateUrl: "./settings.component.html",
+  styleUrls: ["./settings.component.html"],
 })
 export class SettingsComponent implements OnInit {
   form: FormGroup;

src/app/features/shared/header/header.component.html

@@ -1,5 +1,6 @@
-<div class="flex">
-  <nav><a routerLink="/game">Game</a></nav>
-  <nav><a routerLink="/save-load">Save and Load</a></nav>
-  <nav><a routerLink="/settings">Settings</a></nav>
-</div>
+<div class="flex items-center flex-wrap bg-pink-400 p-6 text-sm lg:flex-grow" >
+  <nav><a class="block mt-4 lg:inline-block lg:mt-0 text-white hover:text-white mr-4" routerLink="/game">Game</a>
+  </nav>
+  <nav><a class="block mt-4 lg:inline-block lg:mt-0 text-white hover:text-white mr-4" routerLink="/settings">Settings</a></nav>
+  <nav><a class="block mt-4 lg:inline-block lg:mt-0 text-white hover:text-white mr-4" routerLink="/save-load">Save and Load</a></nav>
+</div>

src/app/features/shared/header/header.component.ts

@@ -1,8 +1,8 @@
-import { Component } from "@angular/core";
+import { ChangeDetectionStrategy, Component } from "@angular/core";
 
 @Component({
   selector: "app-header",
   templateUrl: "./header.component.html",
-  styleUrls: ["./header.component.sass"],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class HeaderComponent {}