From cab4757be2a2259e649556575f2a7735a3049d37 Mon Sep 17 00:00:00 2001
From: Elijah <elijah.kuntz@gmail.com>
Date: Sat, 27 Jun 2026 20:36:36 -0700
Subject: [PATCH] style: Align quiz results options UI with quiz viewer options
 UI

---
 src/components/quizzes/QuizResults.tsx | 45 ++++++++++++++++++++++----
 1 file changed, 38 insertions(+), 7 deletions(-)

diff --git a/src/components/quizzes/QuizResults.tsx b/src/components/quizzes/QuizResults.tsx
index 7c7c2a3..4eaf406 100644
--- a/src/components/quizzes/QuizResults.tsx
+++ b/src/components/quizzes/QuizResults.tsx
@@ -118,17 +118,48 @@ export function QuizResults({ quiz, attempt, onRetake, onClose }: QuizResultsPro
                   <div className="space-y-2 mb-6">
                     {q.options.map((opt: any) => {
                       const isSelected = sels.includes(opt.id);
-                      let style = "text-text-body";
-                      if (opt.isCorrect) style = "text-success font-medium bg-success-bg/50 border-success/30";
-                      else if (isSelected && !opt.isCorrect) style = "text-error font-medium line-through bg-error-bg/50 border-error/30";
-                      else style = "border-transparent";
+                      let stateClass = "cursor-default opacity-80";
+                      let icon = null;
+
+                      if (opt.isCorrect) {
+                        stateClass = "border-success bg-success-bg/30 text-text-heading";
+                        icon = (
+                          <svg className="w-5 h-5 text-success flex-shrink-0" 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 (isSelected && !opt.isCorrect) {
+                        stateClass = "border-error bg-error-bg/30 text-text-heading";
+                        icon = (
+                          <svg className="w-5 h-5 text-error flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M6 18L18 6M6 6l12 12" />
+                          </svg>
+                        );
+                      } else {
+                        stateClass = "border-border-light bg-bg-surface-alt/50";
+                      }
                       
                       return (
-                        <div key={opt.id} className={`flex items-start gap-3 p-3 rounded-lg border ${style}`}>
+                        <div key={opt.id} className={`flex items-start gap-4 p-4 rounded-xl border-2 transition-all duration-200 ${stateClass}`}>
                           <div className="pt-0.5">
-                            {opt.isCorrect ? "✓" : (isSelected ? "✗" : "•")}
+                            <div className={`w-5 h-5 rounded ${q.type === 'SATA' ? 'border' : 'border rounded-full'} flex items-center justify-center transition-colors ${
+                              isSelected ? 'border-primary bg-primary text-white' : 'border-border-light bg-bg-surface'
+                            }`}>
+                              {isSelected && (
+                                <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" />
+                                </svg>
+                              )}
+                            </div>
                           </div>
-                          <div>{opt.text}</div>
+                          <div className="flex-1 text-text-body font-medium leading-snug">
+                            {opt.text}
+                          </div>
+                          {icon && (
+                            <div className="pt-0.5 pl-2">
+                              {icon}
+                            </div>
+                          )}
                         </div>
                       );
                     })}