From b036218fff67d50843d17f3e1bf03664091bd138 Mon Sep 17 00:00:00 2001
From: MayaTheShy <MayaTheShy@gmail.com>
Date: Mon, 16 Feb 2026 02:06:03 -0500
Subject: [PATCH] feat: Adjust typography and spacing in turtle details and
 inventory sections for improved readability and layout

---
 client/src/components/ControlPanel.css | 31 +++++++++++++-------------
 1 file changed, 16 insertions(+), 15 deletions(-)

diff --git a/client/src/components/ControlPanel.css b/client/src/components/ControlPanel.css
index 759436a..1b7933d 100644
--- a/client/src/components/ControlPanel.css
+++ b/client/src/components/ControlPanel.css
@@ -297,20 +297,20 @@
 }
 
 .turtle-details h2 {
-  font-size: 2rem;
-  margin-bottom: 2rem;
+  font-size: 1.5rem;
+  margin-bottom: 1.25rem;
   color: #f1f5f9;
   font-weight: 700;
   display: flex;
   align-items: center;
   gap: 0.75rem;
-  padding-bottom: 1rem;
+  padding-bottom: 0.75rem;
   border-bottom: 2px solid #334155;
 }
 
 .turtle-details h2::before {
   content: '🐢';
-  font-size: 2rem;
+  font-size: 1.5rem;
 }
 
 .detail-section {
@@ -347,14 +347,14 @@
 .status-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
-  gap: 1.25rem;
+  gap: 0.75rem;
 }
 
 .status-item {
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
-  padding: 1rem;
+  gap: 0.375rem;
+  padding: 0.75rem;
   background: rgba(15, 23, 42, 0.6);
   border-radius: 0.5rem;
   border: 1px solid rgba(51, 65, 85, 0.5);
@@ -368,7 +368,7 @@
 
 .status-item .label {
   color: #94a3b8;
-  font-size: 0.875rem;
+  font-size: 0.75rem;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.05em;
@@ -378,7 +378,7 @@
   color: #f1f5f9;
   font-weight: 700;
   font-family: 'Courier New', monospace;
-  font-size: 1.125rem;
+  font-size: 0.95rem;
 }
 
 .command-grid {
@@ -569,11 +569,11 @@
 .inventory-item {
   display: flex;
   align-items: center;
-  gap: 0.75rem;
-  padding: 0.75rem;
+  gap: 0.625rem;
+  padding: 0.625rem;
   background: #1e293b;
-  border: 2px solid #334155;
-  border-radius: 0.5rem;
+  border: 1px solid #334155;
+  border-radius: 0.375rem;
   transition: all 0.2s;
 }
 
@@ -583,14 +583,14 @@
 }
 
 .item-icon {
-  font-size: 1.5rem;
+  font-size: 1.25rem;
   flex-shrink: 0;
 }
 
 .item-name {
   flex: 1;
   color: #e2e8f0;
-  font-size: 0.95rem;
+  font-size: 0.8125rem;
   text-transform: capitalize;
 }
 
@@ -598,6 +598,7 @@
   color: #94a3b8;
   font-weight: 600;
   font-family: 'Courier New', monospace;
+  font-size: 0.8125rem;
 }
 
 /* Responsive Design */