Merge pull request #12 from DeDuckProject/styling

Styling

Author: DeDuckProject

package.json

@@ -14,11 +14,13 @@
     "mathjs": "^14.4.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "react-hotkeys-hook": "^5.0.1"
+    "react-hotkeys-hook": "^5.0.1",
+    "react-xarrows": "^2.0.2"
   },
   "devDependencies": {
     "@eslint/js": "^9.21.0",
     "@jest/globals": "^29.7.0",
+    "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",

src/components/App.css

@@ -1,29 +1,34 @@
 /* Main App Layout */
 .app-container {
-  font-family: 'Roboto', 'Segoe UI', Arial, sans-serif;
+  font-family: var(--font-family);
   max-width: 1200px;
   margin: 0 auto;
-  padding: 20px;
-  background: linear-gradient(to bottom, #f9f9f9, #e9e9e9);
+  padding: 28px;
+  background-color: var(--card-bg);
   min-height: 100vh;
-  color: #333;
+  color: var(--text-color);
+  border-radius: var(--border-radius);
+  box-shadow: var(--box-shadow);
 }
 
 header {
   text-align: center;
-  margin-bottom: 30px;
-  padding-bottom: 20px;
-  border-bottom: 1px solid #ddd;
+  margin-bottom: 32px;
+  padding-bottom: 24px;
+  border-bottom: 1px solid var(--soft-gray);
 }
 
 header h1 {
-  color: #2c3e50;
-  margin-bottom: 5px;
+  color: var(--secondary-color);
+  font-size: 32px;
+  font-weight: 700;
+  margin-bottom: 8px;
 }
 
 header h2 {
-  color: #3498db;
-  font-weight: normal;
+  color: var(--primary-color);
+  font-weight: 500;
+  font-size: 18px;
 }
 
 main {
@@ -49,58 +54,110 @@ main {
 /* Simulation Display */
 .simulation-display {
   flex: 1;
-  padding: 25px;
-  background-color: white;
-  border-radius: 12px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  padding: 28px;
+  background-color: var(--card-bg);
+  border-radius: var(--border-radius);
+  box-shadow: var(--box-shadow);
 }
 
 .simulation-display h2 {
-  color: #2c3e50;
+  color: var(--secondary-color);
+  font-size: 24px;
+  font-weight: 600;
   margin-top: 0;
   margin-bottom: 20px;
   padding-bottom: 10px;
-  border-bottom: 2px solid #3498db;
+  border-bottom: 2px solid var(--primary-color);
 }
 
 /* Messages */
 .fidelity-info {
-  margin-top: 30px;
-  padding: 15px;
+  margin-top: 32px;
+  padding: 20px;
   background-color: #f8f9fa;
-  border-radius: 8px;
-  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.05);
+  border-radius: var(--border-radius);
+  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.03);
 }
 
 .fidelity-info h3 {
-  color: #2c3e50;
+  color: var(--secondary-color);
+  font-size: 18px;
+  font-weight: 600;
   margin-top: 0;
-  margin-bottom: 10px;
+  margin-bottom: 12px;
 }
 
 .completion-message {
-  padding: 15px;
-  background-color: #d4edda;
-  color: #155724;
-  border-radius: 8px;
+  padding: 16px 20px;
+  background-color: rgba(16, 185, 129, 0.1);
+  color: var(--highlight-green);
+  border-radius: var(--border-radius);
   margin-top: 20px;
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
-  border-left: 5px solid #28a745;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03);
+  border-left: 4px solid var(--highlight-green);
   animation: fadeIn 0.5s;
 }
 
 .completion-message.error {
-  background-color: #f8d7da;
-  color: #721c24;
-  border-left-color: #dc3545;
+  background-color: rgba(239, 68, 68, 0.1);
+  color: #dc2626;
+  border-left-color: #dc2626;
 }
 
 /* Footer */
 footer {
-  margin-top: 40px;
+  margin-top: 48px;
   text-align: center;
   font-size: 14px;
-  color: #777;
-  padding: 20px;
-  border-top: 1px solid #eee;
+  color: #94a3b8;
+  padding: 24px;
+  border-top: 1px solid var(--soft-gray);
+}
+
+/* Mobile responsive styles */
+@media (max-width: 768px) {
+  .app-container {
+    padding: 16px;
+    border-radius: 0;
+  }
+
+  header h1 {
+    font-size: 24px;
+  }
+
+  header h2 {
+    font-size: 16px;
+  }
+
+  main {
+    padding-top: 20px; /* Add space for the fixed toggle button */
+  }
+
+  .simulation-area {
+    flex-direction: column;
+    gap: 16px;
+  }
+
+  /* The drawer now handles the control panel display independently */
+  .simulation-area > :nth-child(2) {
+    width: 100%;
+  }
+
+  .simulation-display {
+    padding: 16px;
+  }
+  
+  .drawer-toggle.open {
+    display: none;
+  }
+  
+  .drawer-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100vh;
+    background-color: rgba(0, 0, 0, 0.5);
+    z-index: 900;
+  }
 } 

src/components/App.tsx

@@ -10,6 +10,7 @@ const App: React.FC = () => {
   const [controller, setController] = useState<SimulationController | null>(null);
   const [engineType, setEngineType] = useState<EngineType>(EngineType.Average);
   const [viewBasis, setViewBasis] = useState<Basis>(Basis.Bell);
+  const [drawerOpen, setDrawerOpen] = useState(false);
 
   useEffect(() => {
     // Initialize controller with default parameters
@@ -44,8 +45,25 @@ const App: React.FC = () => {
       </header>
 
       <main>
+        {drawerOpen && (
+          <div
+            data-testid="drawer-overlay"
+            className="drawer-overlay"
+            onClick={() => setDrawerOpen(false)}
+          />
+        )}
+        <button
+          className={`drawer-toggle${drawerOpen ? ' open' : ''}`}
+          aria-label="Toggle controls"
+          onClick={() => setDrawerOpen(o => !o)}
+        >
+          ☰
+        </button>
         <div className="simulation-area">
           <ControlPanel
+            className={drawerOpen ? 'open' : ''}
+            isDrawerOpen={drawerOpen}
+            onDrawerClose={() => setDrawerOpen(false)}
             onNextStep={() => controller.nextStep()}
             onCompleteRound={() => controller.completeRound()}
             onRunAll={() => controller.runUntilComplete()}