style: game review UI polish and arrow key navigation

Author: tmcarmichael

apps/frontend/src/components/review/ReviewControlPanel/ReviewControlPanel.module.css

@@ -24,7 +24,7 @@
   overflow-y: auto;
   display: flex;
   flex-direction: column;
-  gap: var(--space-sm);
+  gap: var(--space-md);
   padding: var(--space-sm);
 }
 
@@ -40,23 +40,24 @@
   font-family: var(--font-body);
   font-size: var(--text-sm);
   font-weight: 600;
-  background: var(--surface-3);
-  border: 1px solid var(--border-subtle);
+  background: transparent;
+  border: 1px solid var(--error);
   border-radius: var(--radius-md);
-  color: var(--text-secondary);
+  color: var(--error);
   cursor: pointer;
   transition:
     background var(--transition-fast),
     color var(--transition-fast);
 }
 
 .exitButton:hover {
-  background: var(--surface-4);
-  color: var(--text-primary);
+  background: var(--error);
+  color: var(--surface-0);
 }
 
 .exitButton:active {
-  background: var(--surface-4);
+  background: var(--error);
+  color: var(--surface-0);
   transform: scale(0.97);
 }
 

apps/frontend/src/components/review/ReviewEvalGraph/ReviewEvalGraph.module.css

@@ -7,6 +7,9 @@
 }
 
 .evalGraphHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
   padding: var(--space-sm) var(--space-md) 0;
   font-size: var(--text-sm);
   font-weight: 600;
@@ -15,6 +18,30 @@
   letter-spacing: 0.05em;
 }
 
+.evalLegend {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.evalLegendDot {
+  width: 6px;
+  height: 6px;
+  border-radius: var(--radius-full);
+}
+
+.evalLegendLabel {
+  font-size: 10px;
+  font-weight: 500;
+  color: var(--text-muted);
+  letter-spacing: 0;
+  margin-right: 4px;
+}
+
+.evalLegendLabel:last-child {
+  margin-right: 0;
+}
+
 .graphArea {
   position: relative;
   padding: 0 var(--space-sm);
@@ -63,6 +90,10 @@
   transition: opacity 0.15s ease;
 }
 
+.graphArea + .evalGraphHeader {
+  margin-top: var(--space-md);
+}
+
 .timingGraphArea {
   position: relative;
   padding: 0 var(--space-sm) var(--space-sm);

apps/frontend/src/components/review/ReviewEvalGraph/ReviewEvalGraph.tsx

@@ -20,11 +20,9 @@ const ReviewEvalGraph: Component<ReviewEvalGraphProps> = (props) => {
       const heightPx = Math.max(2, (Math.abs(clamped) / EVAL_CLAMP) * MID_Y);
       const isWhiteAdvantage = clamped >= 0;
       const topPx = isWhiteAdvantage ? MID_Y - heightPx : MID_Y;
+      const isWhite = p.side === 'w';
 
-      let color = 'var(--accent)';
-      if (p.quality === 'blunder') color = 'var(--move-blunder)';
-      else if (p.quality === 'mistake') color = 'var(--move-mistake)';
-      else if (p.quality === 'inaccuracy') color = 'var(--move-inaccuracy)';
+      const color = isWhite ? 'var(--text-secondary)' : 'var(--text-muted)';
 
       return {
         moveIndex: p.moveIndex,
@@ -64,7 +62,15 @@ const ReviewEvalGraph: Component<ReviewEvalGraphProps> = (props) => {
 
   return (
     <div class={styles.evalGraphContainer}>
-      <div class={styles.evalGraphHeader}>Evaluation</div>
+      <div class={styles.evalGraphHeader}>
+        <span>Evaluation</span>
+        <span class={styles.evalLegend}>
+          <span class={styles.evalLegendDot} style={{ background: 'var(--text-secondary)' }} />
+          <span class={styles.evalLegendLabel}>W</span>
+          <span class={styles.evalLegendDot} style={{ background: 'var(--text-muted)' }} />
+          <span class={styles.evalLegendLabel}>B</span>
+        </span>
+      </div>
       <div class={styles.graphArea} style={{ height: `${GRAPH_HEIGHT}px` }}>
         <div class={styles.midLine} />
         <div class={styles.barContainer}>
@@ -106,7 +112,7 @@ const ReviewEvalGraph: Component<ReviewEvalGraphProps> = (props) => {
                   style={{
                     height: `${bar.heightPx}px`,
                     top: `${bar.topPx}px`,
-                    background: bar.isWhite ? 'var(--text-muted)' : 'var(--text-secondary)',
+                    background: bar.isWhite ? 'var(--text-secondary)' : 'var(--text-muted)',
                     opacity: bar.isCurrent ? '1' : '0.6',
                   }}
                 />

apps/frontend/src/components/review/ReviewSummaryPanel/ReviewSummaryPanel.module.css

@@ -1,7 +1,7 @@
 .summaryContainer {
   display: flex;
   flex-direction: column;
-  gap: var(--space-sm);
+  gap: var(--space-md);
   padding: var(--space-sm) var(--space-md);
   background: var(--surface-2);
   border-radius: var(--radius-md);
@@ -30,8 +30,8 @@
 }
 
 .ringSvg {
-  width: 64px;
-  height: 64px;
+  width: 80px;
+  height: 80px;
   transform: rotate(-90deg);
 }
 
@@ -58,9 +58,9 @@
 
 .accuracyValue {
   position: absolute;
-  top: 50%;
+  top: 40px;
   left: 50%;
-  transform: translate(-50%, -70%);
+  transform: translate(-50%, -50%);
   font-family: var(--font-display);
   font-size: var(--text-base);
   font-weight: 700;
@@ -79,6 +79,7 @@
   display: flex;
   flex-direction: column;
   gap: var(--space-sm);
+  margin-top: var(--space-xs);
 }
 
 .distributionRow {
@@ -168,11 +169,12 @@
   }
 
   .ringSvg {
-    width: 56px;
-    height: 56px;
+    width: 68px;
+    height: 68px;
   }
 
   .accuracyValue {
+    top: 34px;
     font-size: var(--text-sm);
   }
 

apps/frontend/src/shared/hooks/useKeyboardNavigation.ts

@@ -32,10 +32,10 @@ export const useKeyboardNavigation = (options: KeyboardNavigationOptions): void
       } else if (e.key === 'ArrowRight') {
         e.preventDefault();
         onNext();
-      } else if (e.key === 'Home') {
+      } else if (e.key === 'Home' || e.key === 'ArrowUp') {
         e.preventDefault();
         onFirst();
-      } else if (e.key === 'End') {
+      } else if (e.key === 'End' || e.key === 'ArrowDown') {
         e.preventDefault();
         onLast();
       } else if (e.key === 'f') {