From c492529c1d0e769f4332b60a9857cf28bcd0aa1e Mon Sep 17 00:00:00 2001
From: MayaTheShy <MayaTheShy@gmail.com>
Date: Mon, 16 Feb 2026 02:14:23 -0500
Subject: [PATCH] feat: Update Control Panel styles for improved aesthetics and
 contrast

---
 client/src/components/ControlPanel.css | 43 +++++++++++++-------------
 1 file changed, 22 insertions(+), 21 deletions(-)

diff --git a/client/src/components/ControlPanel.css b/client/src/components/ControlPanel.css
index 5032b74..1293abd 100644
--- a/client/src/components/ControlPanel.css
+++ b/client/src/components/ControlPanel.css
@@ -455,9 +455,9 @@
   align-items: center;
   gap: 0.5rem;
   padding: 1rem;
-  background: #f9fafb;
+  background: #1f2937;
   border-radius: 0.5rem;
-  border: 1px solid #e5e7eb;
+  border: 1px solid #374151;
 }
 
 .movement-row {
@@ -473,9 +473,9 @@
 .movement-controls button {
   width: 3rem;
   height: 3rem;
-  border: 2px solid #e5e7eb;
-  background: #ffffff;
-  color: #3b82f6;
+  border: 2px solid #374151;
+  background: #111827;
+  color: #60a5fa;
   border-radius: 0.5rem;
   font-size: 1.25rem;
   cursor: pointer;
@@ -483,13 +483,13 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
 }
 
 .movement-controls button:hover {
-  background: #eff6ff;
-  border-color: #3b82f6;
-  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2);
+  background: #1f2937;
+  border-color: #60a5fa;
+  box-shadow: 0 0 15px rgba(96, 165, 250, 0.3);
   transform: scale(1.05);
 }
 
@@ -506,9 +506,9 @@
 
 .action-btn {
   padding: 0.75rem;
-  border: 2px solid #e5e7eb;
-  background: #ffffff;
-  color: #3b82f6;
+  border: 2px solid #374151;
+  background: #1f2937;
+  color: #60a5fa;
   border-radius: 0.5rem;
   font-size: 0.8125rem;
   font-weight: 600;
@@ -519,13 +519,14 @@
   justify-content: center;
   gap: 0.375rem;
   white-space: nowrap;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
 }
 
 .action-btn:hover {
-  border-color: #3b82f6;
+  border-color: #60a5fa;
+  background: #111827;
   transform: translateY(-1px);
-  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2);
+  box-shadow: 0 4px 8px rgba(96, 165, 250, 0.2);
 }
 
 .action-btn.dig {
@@ -577,15 +578,15 @@
   align-items: center;
   gap: 0.625rem;
   padding: 0.625rem;
-  background: #f9fafb;
-  border: 1px solid #e5e7eb;
+  background: #1f2937;
+  border: 1px solid #374151;
   border-radius: 0.375rem;
   transition: all 0.2s;
 }
 
 .inventory-item:hover {
-  border-color: #3b82f6;
-  background: #eff6ff;
+  border-color: #60a5fa;
+  background: #1e3a5f;
   transform: translateX(4px);
 }
 
@@ -596,13 +597,13 @@
 
 .item-name {
   flex: 1;
-  color: #111827;
+  color: #e5e7eb;
   font-size: 0.8125rem;
   text-transform: capitalize;
 }
 
 .item-count {
-  color: #6b7280;
+  color: #9ca3af;
   font-weight: 600;
   font-family: 'Courier New', monospace;
   font-size: 0.8125rem;