Focus Mode buttons css fixed

Author: psriraj3

src/App.tsx

@@ -321,9 +321,9 @@ export default function App() {
                   {!generated ? (
                       <div className="card">No set yet.</div>
                   ) : mode === "focus" ? (
-                      <FocusMode subject={subject} ukYear={ukYear} difficulty={difficulty} seed={seed} />
+                      <FocusMode key={generated.seed} subject={subject} ukYear={ukYear} difficulty={difficulty} seed={seed} />
                   ) : mode === "practice" ? (
-                      <PracticeRunner set={generated} />
+                      <PracticeRunner key={generated.seed} set={generated} />
                   ) : (
                       <WorksheetBuilder set={generated} />
                   )}

src/index.css

@@ -381,4 +381,10 @@ body { padding-bottom: 0 !important; }
   color:#666;
 }
 
-.footerSep{ opacity:.55; }
+.footerSep{ opacity:.55; }
+
+.secondary{
+  background:#fff;
+  color:#111;
+  border:1px solid #ddd;
+}

src/ui/FocusMode.tsx

@@ -1055,7 +1055,7 @@ export function FocusMode({ subject, ukYear, difficulty, seed }: Props) {
                             ⏳ {formatMMSS(secondsLeft)}
                         </div>
 
-                        <button className="fBtn" onClick={() => submitExam(false)}>
+                        <button className="button secondary" type="button" onClick={() => submitExam(false)}>
                             Submit
                         </button>
                     </div>
@@ -1145,7 +1145,7 @@ export function FocusMode({ subject, ukYear, difficulty, seed }: Props) {
                                             Focus breaks detected: <b>{last.focusBreaks ?? violations}</b>
                                         </div>
                                     </div>
-                                    <button className="fBtn" onClick={resetToSetup}>
+                                    <button className="button secondary" type="button" onClick={resetToSetup}>
                                         Close
                                     </button>
                                 </div>
@@ -1154,7 +1154,7 @@ export function FocusMode({ subject, ukYear, difficulty, seed }: Props) {
                                     <button className="fBtn fBtnPrimary" onClick={retrySameSettings}>
                                         Try another Focus Exam
                                     </button>
-                                    <button className="fBtn" onClick={resetToSetup}>
+                                    <button className="button secondary" type="button" onClick={resetToSetup}>
                                         Back to Parent setup
                                     </button>
                                 </div>