From 4f3b98f169fc5061287b3bde207ca00987ac939d Mon Sep 17 00:00:00 2001
From: Charles Reis Ribeiro <charles.r.ribeiro@gmail.com>
Date: Sun, 13 Aug 2023 03:26:15 -0300
Subject: [PATCH] add styles to settings page

---
 .../components/settings.component.html        | 38 ++++++++++++-------
 .../components/settings.component.sass        |  4 ++
 .../settings/components/settings.component.ts |  1 +
 .../shared/header/header.component.html       | 11 +++---
 .../shared/header/header.component.sass       |  0
 .../shared/header/header.component.ts         |  4 +-
 6 files changed, 37 insertions(+), 21 deletions(-)
 create mode 100644 src/app/features/settings/components/settings.component.sass
 delete mode 100644 src/app/features/shared/header/header.component.sass

diff --git a/src/app/features/settings/components/settings.component.html b/src/app/features/settings/components/settings.component.html
index 4097c52..4ba2cd5 100644
--- a/src/app/features/settings/components/settings.component.html
+++ b/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>
\ No newline at end of file
diff --git a/src/app/features/settings/components/settings.component.sass b/src/app/features/settings/components/settings.component.sass
new file mode 100644
index 0000000..590599b
--- /dev/null
+++ b/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
\ No newline at end of file
diff --git a/src/app/features/settings/components/settings.component.ts b/src/app/features/settings/components/settings.component.ts
index e4700a5..63986be 100644
--- a/src/app/features/settings/components/settings.component.ts
+++ b/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;
diff --git a/src/app/features/shared/header/header.component.html b/src/app/features/shared/header/header.component.html
index 32ed9e0..81b254b 100644
--- a/src/app/features/shared/header/header.component.html
+++ b/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>
\ No newline at end of file
diff --git a/src/app/features/shared/header/header.component.sass b/src/app/features/shared/header/header.component.sass
deleted file mode 100644
index e69de29..0000000
diff --git a/src/app/features/shared/header/header.component.ts b/src/app/features/shared/header/header.component.ts
index ad3af15..f5865f3 100644
--- a/src/app/features/shared/header/header.component.ts
+++ b/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 {}