Review UI and suggest improvements

frontend/src/App.css

@@ -1,21 +1,52 @@
 .App {
   text-align: center;
+  min-height: 100vh;
+  background-color: #fafafa;
+}
+
+/* Toolbar below header */
+.app-toolbar {
+  display: flex;
+  justify-content: flex-end;
+  padding: 12px 24px;
+  background-color: #f0f0f5;
+  border-bottom: 1px solid #ddd;
 }
 
 /* New Proof Button */
 .new-proof-btn {
-  position: absolute;
-  top: 20px;
-  right: 20px;
-  padding: 10px 20px;
+  padding: 9px 20px;
   font-size: 1rem;
   border: none;
   border-radius: 4px;
   background-color: #007bff;
   color: #fff;
   cursor: pointer;
+  transition: background-color 0.2s;
 }
 
 .new-proof-btn:hover {
   background-color: #0056b3;
 }
+
+.new-proof-btn:focus {
+  outline: none;
+  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.4);
+}
+
+/* Main content area */
+.app-main {
+  padding: 0 16px 40px;
+}
+
+/* Empty proof placeholder */
+.empty-proof-state {
+  margin: 40px auto;
+  max-width: 500px;
+  padding: 32px;
+  background-color: #fff;
+  border: 2px dashed #ccc;
+  border-radius: 8px;
+  color: #888;
+  font-size: 1.1rem;
+}

frontend/src/App.tsx

@@ -50,15 +50,31 @@
     setColorMapping(new Map<number, string>())
   };
 
+  const hasProof = proof.goal !== '' || proof.steps.length > 0;
+
   return (
     <div className="App">
       <Header />
-      <button className="new-proof-btn" onClick={handleOpenModal}>
-        New Proof
-      </button>
-      <Menu logic={LOGIC} proof={proof} setProof={setProof} onColorChange={onColorChange} />
-      <Proof proof={proof} coloring={colorMapping} />
-
+      <div className="app-toolbar">
+        <button
+          className="new-proof-btn"
+          onClick={handleOpenModal}
+          aria-label="Start a new proof"
+        >
+          New Proof
+        </button>
+      </div>
+      <main className="app-main">
+        <Menu logic={LOGIC} proof={proof} setProof={setProof} onColorChange={onColorChange} />
+        {hasProof ? (
+          <Proof proof={proof} coloring={colorMapping} />
+        ) : (
+          <div className="empty-proof-state" role="status">
+            <p>No proof loaded. Click <strong>New Proof</strong> to begin.</p>
+          </div>
+        )}
+      </main>
+
       <NewProofModal
         isOpen={isModalOpen}
         onClose={handleCloseModal}

frontend/src/components/Expressions.css

@@ -11,67 +11,63 @@
     width: 100%;
     border-collapse: collapse;
     margin: 20px auto;
-    /* Top and bottom margin, auto for left and right */
     padding: 0;
-    /* Reset padding to avoid unwanted spacing */
     max-width: 1200px;
-    /* Optional: limit table width */
 }
 
 .proof-viewer th,
 .proof-viewer td {
     border: none;
-    /* No borders */
-    padding: 4px 8px;
-    /* Reduced padding for closer lines */
+    padding: 6px 12px;
     text-align: left;
 }
 
 /* Header Styles */
 .proof-viewer th {
     background-color: #f4f4f4;
-    color: #333;
+    color: #555;
     text-align: center;
-    /* Center align headers */
-    font-size: 3rem;
-    /* Larger header text size to match expressions */
+    font-size: 1rem;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    border-bottom: 2px solid #ddd;
 }
 
 .proof-viewer td.rule {
     text-align: right;
-    /* Right align for rule column cells */
 }
 
 /* Expression and Rule Styles with Preformatted Text */
 .step-viewer pre {
     margin: 0;
     font-family: "Courier New", Courier, monospace;
     white-space: pre;
-    font-size: 3rem;
-    /* Large text for expressions */
-    line-height: 1.2;
-    /* Adjust line height to keep it tight */
+    font-size: 1.4rem;
+    line-height: 1.4;
 }
 
-/* Make Line Numbers and Rules As Big As Expressions */
+/* Line numbers and rule cells */
 .proof-viewer td {
-    font-size: 3rem;
-    /* Large text for both line numbers and rules */
-    line-height: 1.2;
-    /* Keep line height tight for uniformity */
+    font-size: 1.4rem;
+    line-height: 1.4;
+    vertical-align: middle;
 }
 
 /* No Alternate Row Colors */
 .proof-viewer tbody tr {
     background-color: transparent;
-    /* Keep the background consistent */
 }
 
-/* Highlight Rows on Hover */
+/* Subtle hover for rows */
+.proof-viewer tbody tr:hover {
+    background-color: #f5f5f5;
+}
+
+/* Highlight Rows on Hover (rule reference) */
 .proof-viewer tbody tr.highlighted {
-    background-color: #000; /* Black background */
-    color: #ff69b4; /* Pink color for the text */
-    font-weight: bold; /* Make the font thick */
+    background-color: #1a1a2e;
+    color: #ff69b4;
+    font-weight: bold;
 }
 
 /* Heading Styles */
@@ -88,9 +84,20 @@ h3 {
     color: #444;
 }
 
-  .glow {
-    box-shadow: inset 0 0 10px var(--glow-color), 
-                inset 0 0 20px var(--glow-color), 
+.glow {
+    box-shadow: inset 0 0 10px var(--glow-color),
+                inset 0 0 20px var(--glow-color),
                 inset 0 0 30px var(--glow-color);
-  }
-
+}
+
+/* Proof wrapper and divider */
+.proof-viewer-wrapper {
+    max-width: 1200px;
+    margin: 0 auto;
+}
+
+.proof-divider {
+    border: none;
+    border-top: 2px solid #333;
+    margin: 0;
+}

frontend/src/components/Header.css

@@ -0,0 +1,15 @@
+.app-header {
+  background-color: #1a1a2e;
+  padding: 16px 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.app-title {
+  margin: 0;
+  font-size: 1.6rem;
+  font-weight: 600;
+  color: #e0e0ff;
+  letter-spacing: 0.03em;
+}

frontend/src/components/Header.tsx

@@ -1,7 +1,12 @@
 import React, { FC } from 'react';
+import './Header.css';
 
 const Header: FC<{}> = () => {
-  return <h1>NATURAL DEDUCTION APPLICATION</h1>;
+  return (
+    <header className="app-header">
+      <h1 className="app-title">Natural Deduction Proof Assistant</h1>
+    </header>
+  );
 };
 
-export default Header;
+export default Header;

frontend/src/components/menu/Menu.css

@@ -10,6 +10,14 @@
     font-family: Arial, sans-serif;
 }
 
+/* Empty state */
+.empty-state {
+    font-size: 1.1rem;
+    color: #666;
+    margin: 0;
+    padding: 10px 0;
+}
+
 /* Label for Select */
 .menu-label {
     display: block;
@@ -27,6 +35,13 @@
     border-radius: 4px;
     margin-bottom: 20px;
     background-color: #fff;
+    cursor: pointer;
+}
+
+.menu-select:focus {
+    outline: none;
+    border-color: #007bff;
+    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.2);
 }
 
 /* Input Container */
@@ -56,7 +71,13 @@
     border: 1px solid #ccc;
     border-radius: 4px;
     outline: none;
-    transition: box-shadow 0.3s ease;
+    box-sizing: border-box;
+    transition: box-shadow 0.3s ease, border-color 0.2s;
+}
+
+.input-field:focus {
+    border-color: #007bff;
+    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.2);
 }
 
 /* Glowing Input Field */
@@ -67,9 +88,22 @@
 
 /* No Inputs Message */
 .no-inputs {
-    font-size: 1.2rem;
+    font-size: 1.1rem;
     color: #666;
     margin-bottom: 20px;
+    font-style: italic;
+}
+
+/* Inline error message */
+.menu-error {
+    color: #c0392b;
+    background-color: #fdecea;
+    border: 1px solid #f5c6cb;
+    border-radius: 4px;
+    padding: 8px 12px;
+    font-size: 1rem;
+    margin-bottom: 12px;
+    text-align: left;
 }
 
 /* Action Button */
@@ -84,6 +118,17 @@
     transition: background-color 0.3s ease;
 }
 
-.menu-button:hover {
+.menu-button:hover:not(:disabled) {
     background-color: #0056b3;
 }
+
+.menu-button:focus {
+    outline: none;
+    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.4);
+}
+
+.menu-button:disabled {
+    background-color: #9ec5fe;
+    cursor: not-allowed;
+    opacity: 0.7;
+}