From bffacbf8c8a69094b8fd70a7677487028e1af2fa Mon Sep 17 00:00:00 2001
From: MayaTheShy <MayaTheShy@gmail.com>
Date: Mon, 16 Feb 2026 01:48:46 -0500
Subject: [PATCH] feat: Refine command button styles and enhance layout for
 improved usability and responsiveness

---
 client/src/components/ControlPanel.css | 213 +++++++++++++++++++------
 1 file changed, 165 insertions(+), 48 deletions(-)

diff --git a/client/src/components/ControlPanel.css b/client/src/components/ControlPanel.css
index fb14eba..74e368a 100644
--- a/client/src/components/ControlPanel.css
+++ b/client/src/components/ControlPanel.css
@@ -234,18 +234,23 @@
 .command-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
-  gap: 1rem;
+  gap: 0.75rem;
+  margin-bottom: 1rem;
 }
 
 .command-btn {
-  padding: 1rem;
+  padding: 0.875rem 1rem;
   border: none;
   border-radius: 0.5rem;
-  font-size: 1rem;
+  font-size: 0.95rem;
   font-weight: 600;
   cursor: pointer;
   transition: all 0.2s;
   color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
 }
 
 .command-btn:hover {
@@ -253,93 +258,205 @@
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
 }
 
+.command-btn:active {
+  transform: translateY(0);
+}
+
 .command-btn.explore {
-  background: #3b82f6;
+  background: linear-gradient(135deg, #3b82f6, #2563eb);
 }
 
 .command-btn.mine {
-  background: #10b981;
+  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
 }
 
 .command-btn.return {
-  background: #f59e0b;
+  background: linear-gradient(135deg, #f59e0b, #d97706);
 }
 
 .command-btn.stop {
-  background: #ef4444;
+  background: linear-gradient(135deg, #ef4444, #dc2626);
 }
 
-.manual-controls {
-  margin-top: 1rem;
-  padding-top: 1rem;
-  border-top: 1px solid #334155;
+.command-btn.manual {
+  background: linear-gradient(135deg, #a855f7, #9333ea);
 }
 
-.direction-pad {
+.command-btn.setHome {
+  background: linear-gradient(135deg, #06b6d4, #0891b2);
+}
+
+.command-btn.refuel {
+  background: linear-gradient(135deg, #10b981, #059669);
+}
+
+.command-btn.status {
+  background: linear-gradient(135deg, #64748b, #475569);
+}
+
+/* Movement Controls */
+.movement-controls {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 0.5rem;
-  margin-bottom: 1rem;
-}
-
-.horizontal-controls {
-  display: flex;
-  gap: 3rem;
-}
-
-.direction-pad button,
-.vertical-controls button {
-  width: 3rem;
-  height: 3rem;
-  border: none;
-  background: #334155;
-  color: white;
+  padding: 1rem;
+  background: #1e293b;
   border-radius: 0.5rem;
-  font-size: 1.5rem;
-  cursor: pointer;
-  transition: all 0.2s;
 }
 
-.direction-pad button:hover,
-.vertical-controls button:hover {
-  background: #475569;
-  transform: scale(1.1);
-}
-
-.vertical-controls {
+.movement-row {
   display: flex;
   gap: 0.5rem;
   justify-content: center;
 }
 
-.vertical-controls button {
-  width: auto;
-  padding: 0 1.5rem;
-  font-size: 1rem;
+.movement-row.vertical {
+  gap: 1rem;
 }
 
-.inventory-list {
+.movement-controls button {
+  width: 3.5rem;
+  height: 3.5rem;
+  border: 2px solid #334155;
+  background: #0f172a;
+  color: #60a5fa;
+  border-radius: 0.5rem;
+  font-size: 1.5rem;
+  cursor: pointer;
+  transition: all 0.2s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.movement-controls button:hover {
+  background: #1e293b;
+  border-color: #60a5fa;
+  box-shadow: 0 0 15px rgba(96, 165, 250, 0.3);
+  transform: scale(1.05);
+}
+
+.movement-controls button:active {
+  transform: scale(0.95);
+}
+
+/* Action Grid */
+.action-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  grid-template-columns: repeat(2, 1fr);
   gap: 0.75rem;
 }
 
+.action-btn {
+  padding: 1rem;
+  border: 2px solid #334155;
+  border-radius: 0.5rem;
+  font-size: 0.95rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s;
+  color: white;
+  background: #1e293b;
+}
+
+.action-btn:hover {
+  border-color: #60a5fa;
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(96, 165, 250, 0.2);
+}
+
+.action-btn.dig {
+  border-color: #f59e0b;
+  color: #f59e0b;
+}
+
+.action-btn.dig:hover {
+  background: rgba(245, 158, 11, 0.1);
+  border-color: #f59e0b;
+  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
+}
+
+.action-btn.digup,
+.action-btn.digdown {
+  border-color: #f59e0b;
+  color: #f59e0b;
+}
+
+.action-btn.digup:hover,
+.action-btn.digdown:hover {
+  background: rgba(245, 158, 11, 0.1);
+  border-color: #f59e0b;
+  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
+}
+
+.action-btn.place {
+  border-color: #10b981;
+  color: #10b981;
+}
+
+.action-btn.place:hover {
+  background: rgba(16, 185, 129, 0.1);
+  border-color: #10b981;
+  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
+}
+
+/* Inventory List */
+.inventory-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  max-height: 300px;
+  overflow-y: auto;
+}
+
 .inventory-item {
   display: flex;
-  justify-content: space-between;
+  align-items: center;
+  gap: 0.75rem;
   padding: 0.75rem;
-  background: #0f172a;
-  border: 1px solid #334155;
-  border-radius: 0.375rem;
+  background: #1e293b;
+  border: 2px solid #334155;
+  border-radius: 0.5rem;
+  transition: all 0.2s;
+}
+
+.inventory-item:hover {
+  border-color: #60a5fa;
+  transform: translateX(4px);
+}
+
+.item-icon {
+  font-size: 1.5rem;
+  flex-shrink: 0;
 }
 
 .item-name {
-  color: #cbd5e1;
+  flex: 1;
+  color: #e2e8f0;
+  font-size: 0.95rem;
   text-transform: capitalize;
 }
 
 .item-count {
   color: #94a3b8;
   font-weight: 600;
+  font-family: 'Courier New', monospace;
+}
+
+/* Responsive Design */
+@media (max-width: 1024px) {
+  .command-grid {
+    grid-template-columns: 1fr;
+  }
+  
+  .action-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 768px) {
+  .turtle-grid {
+    grid-template-columns: 1fr;
+  }
 }