From 89eb2c6ad961ed0f9c89eccfaa8b53401e53a5a3 Mon Sep 17 00:00:00 2001
From: Elijah <elijah.kuntz@gmail.com>
Date: Sat, 27 Jun 2026 20:31:38 -0700
Subject: [PATCH] style: Change rationale badge to a full-width banner above
 the rationale box

---
 src/components/quizzes/QuizViewer.tsx | 47 +++++++++++++++++++--------
 1 file changed, 33 insertions(+), 14 deletions(-)

diff --git a/src/components/quizzes/QuizViewer.tsx b/src/components/quizzes/QuizViewer.tsx
index dec1689..d678761 100644
--- a/src/components/quizzes/QuizViewer.tsx
+++ b/src/components/quizzes/QuizViewer.tsx
@@ -366,30 +366,49 @@ export function QuizViewer({ quiz, retakeIds, isShared = false, onFinished }: Qu
             };
             const qScore = scoreQuestion(formattedQ, currentSelections);
             let badgeText = "Incorrect";
-            let badgeColor = "bg-error text-white";
+            let bannerBg = "bg-error/10 border-error/20 text-error";
+            let icon = (
+              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            );
             
             if (qScore === 1) {
               badgeText = "Correct";
-              badgeColor = "bg-success text-white";
+              bannerBg = "bg-success/10 border-success/20 text-success";
+              icon = (
+                <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M5 13l4 4L19 7" />
+                </svg>
+              );
             } else if (qScore > 0) {
               badgeText = "Partially Correct";
-              badgeColor = "bg-amber-500 text-white";
+              bannerBg = "bg-amber-500/10 border-amber-500/20 text-amber-600";
+              icon = (
+                <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+                </svg>
+              );
             }
 
             return (
-              <div className="mt-8 bg-bg-callout border border-primary/20 rounded-xl p-5 animate-slide-up">
-                <div className="flex items-center gap-3 mb-3">
-                  <h4 className="text-sm font-bold text-text-heading uppercase tracking-wider">Rationale</h4>
-                  <span className={`px-2.5 py-0.5 rounded-full text-xs font-bold uppercase tracking-wider ${badgeColor}`}>
-                    {badgeText}
-                  </span>
+              <div className="mt-8 flex flex-col gap-4 animate-slide-up">
+                {/* Result Banner */}
+                <div className={`flex items-center gap-3 px-5 py-4 rounded-xl border ${bannerBg} font-bold text-lg tracking-wide shadow-sm`}>
+                  {icon}
+                  {badgeText}
+                </div>
+
+                {/* Rationale Box */}
+                <div className="bg-bg-callout border border-primary/20 rounded-xl p-5 shadow-sm">
+                  <h4 className="text-sm font-bold text-text-heading uppercase tracking-wider mb-2">Rationale</h4>
+                  <div className="markdown-content text-sm text-text-body">
+                    <ReactMarkdown remarkPlugins={[remarkGfm]}>
+                      {currentQ.rationale}
+                    </ReactMarkdown>
+                  </div>
                 </div>
-                <div className="markdown-content text-sm text-text-body">
-                <ReactMarkdown remarkPlugins={[remarkGfm]}>
-                  {currentQ.rationale}
-                </ReactMarkdown>
               </div>
-            </div>
             );
           })()}
         </div>