From 2582f8e4d68b2bc1479059a0b012575cff023822 Mon Sep 17 00:00:00 2001
From: shahdlala66 <shahd.lala66@gmail.com>
Date: Sun, 19 Apr 2026 00:05:52 +0200
Subject: [PATCH] style: brought back old style for text input

---
 src/app/pages/game/game.component.css  | 62 ++++++++++++++++++++------
 src/app/pages/game/game.component.html | 20 +++------
 2 files changed, 55 insertions(+), 27 deletions(-)

diff --git a/src/app/pages/game/game.component.css b/src/app/pages/game/game.component.css
index edf4e18..34fc047 100644
--- a/src/app/pages/game/game.component.css
+++ b/src/app/pages/game/game.component.css
@@ -42,25 +42,50 @@ h2 {
 }
 
 .top-section {
-  background: #F3C8A0;
-  padding: 0.75rem;
-  border-radius: 8px;
-  border: 1px solid #5A2C28;
+  display: grid;
+  gap: 0.5rem;
+  margin-bottom: 0.5rem;
+  flex: 0 0 auto;
 }
 
 .move-form {
+  display: flex;
+  flex-wrap: wrap;
   align-items: center;
+  gap: 0.75rem;
 }
 
 .move-form label {
   color: #5A2C28;
   font-weight: 600;
-  white-space: nowrap;
 }
 
 .board-hint {
-  color: #5A2C28;
   margin: 0;
+  color: #5A2C28;
+}
+
+.move-form input {
+  border: 2px solid #5A2C28;
+  border-radius: 10px;
+  background: #B9DAD1;
+  padding: 0.6rem 0.75rem;
+  min-width: 180px;
+}
+
+.move-form button {
+  border: 2px solid #5A2C28;
+  border-radius: 10px;
+  background: #C19EF5;
+  color: #5A2C28;
+  padding: 0.6rem 1rem;
+  cursor: pointer;
+  font-weight: 600;
+}
+
+.move-form button:hover {
+  background: #BA6D4B;
+  color: #F3C8A0;
 }
 
 .center-column {
@@ -169,23 +194,32 @@ h2 {
   }
 
   .top-section {
-    padding: 0.5rem;
-    margin-bottom: 0.75rem;
+    gap: 0.25rem;
+    margin-bottom: 0.25rem;
   }
 
   .move-form {
-    flex-wrap: wrap;
+    flex-direction: column;
+    gap: 0.5rem;
   }
 
   .move-form label {
-    flex-basis: 100%;
-    margin-bottom: 0.5rem;
+    align-self: flex-start;
+  }
+
+  .move-form input {
+    width: 100%;
+    min-width: unset;
+  }
+
+  .move-form button {
+    width: 100%;
+    padding: 0.5rem 0.75rem;
   }
 
   .board-section {
     min-height: 300px;
   }
-
   .import-card {
     padding: 0.75rem;
     gap: 0.5rem;
@@ -231,8 +265,8 @@ h2 {
   }
 
   .top-section {
-    padding: 0.4rem;
-    margin-bottom: 0.5rem;
+    gap: 0.15rem;
+    margin-bottom: 0.25rem;
   }
 
   .board-section {
diff --git a/src/app/pages/game/game.component.html b/src/app/pages/game/game.component.html
index 41a3bc3..237e5ef 100644
--- a/src/app/pages/game/game.component.html
+++ b/src/app/pages/game/game.component.html
@@ -29,20 +29,14 @@
           <!-- Center - Chess Board -->
           <div class="col-lg-6 col-md-12 col-12 order-lg-2 order-1">
             <section class="center-column d-flex flex-column h-100">
-              <div class="top-section mb-3">
-                <form class="move-form d-flex flex-wrap gap-2 mb-2" (ngSubmit)="facade.submitMove()">
-                  <label for="uciMove" class="form-label mb-0">Play move (UCI)</label>
-                  <input 
-                    id="uciMove" 
-                    name="uciMove" 
-                    class="form-control flex-grow-1"
-                    [(ngModel)]="facade.moveInput" 
-                    placeholder="e2e4" 
-                  />
-                  <button type="submit" class="btn">Send Move</button>
+              <section class="top-section">
+                <form class="move-form" (ngSubmit)="facade.submitMove()">
+                  <label for="uciMove">Play move (UCI)</label>
+                  <input id="uciMove" name="uciMove" [(ngModel)]="facade.moveInput" placeholder="e2e4" />
+                  <button type="submit">Send Move</button>
                 </form>
-                <p class="board-hint small mb-0">Click your piece to highlight legal targets.</p>
-              </div>
+                <p class="board-hint">Click your piece to highlight legal targets.</p>
+              </section>
 
               <div class="board-section flex-grow-1 d-flex align-items-center justify-content-center">
                 <app-chess-board