From fed12b0d46519504dccc554693d9c708a5569bb9 Mon Sep 17 00:00:00 2001
From: gosangam <sangam4742@gmail.com>
Date: Sat, 17 Oct 2026 02:41:32 +0530
Subject: [PATCH] ui fix

---
 .../(reader)/transcriptions/[slug]/page.tsx   |  2 +-
 components/quiz/quiz-button.tsx               | 27 +++++++++++++++----
 2 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/app/(app)/(reader)/transcriptions/[slug]/page.tsx b/app/(app)/(reader)/transcriptions/[slug]/page.tsx
index 164d5573..34c7ac79 100644
--- a/app/(app)/(reader)/transcriptions/[slug]/page.tsx
+++ b/app/(app)/(reader)/transcriptions/[slug]/page.tsx
@@ -173,7 +173,7 @@ export default async function TranscriptionPage({
           {/* Play Audio button */}
           {t.audioUrl && (
             <div className="w-full md:w-auto flex flex-wrap items-center justify-end gap-2">
-              <QuizButton path={`/transcriptions/${t.slug}`} className="py-2" />
+              <QuizButton path={`/transcriptions/${t.slug}`} size="lg" />
               <PlayAudioButton
                 audioUrl={t.audioUrl}
                 title={t.name}
diff --git a/components/quiz/quiz-button.tsx b/components/quiz/quiz-button.tsx
index fa481a83..f8ed1aa5 100644
--- a/components/quiz/quiz-button.tsx
+++ b/components/quiz/quiz-button.tsx
@@ -18,10 +18,17 @@ import { cn } from "@/lib/utils";
 
 export function QuizButton({
   path,
+  size = "sm",
   className,
 }: {
   /** The content page's own path, e.g. /books/bg/2. */
   path: string;
+  /**
+   * "sm" for the page header's controls row; "lg" to sit beside the lecture
+   * page's Play Audio button as an equal — same height, padding, type and
+   * colours.
+   */
+  size?: "sm" | "lg";
   className?: string;
 }) {
   const { user } = useAuth();
@@ -49,21 +56,31 @@ export function QuizButton({
   if (!card || !user) return null;
 
   const done = card.my.state === "completed";
+  const lg = size === "lg";
   return (
     <Link
       href={`/quizzes/${card.id}`}
       title={card.title}
       className={cn(
-        "inline-flex items-center gap-1.5 rounded-md border px-2.5 py-1 text-xs font-medium transition-colors",
+        "inline-flex items-center border transition-colors",
+        lg
+          ? // Mirrors PlayAudioButton's default variant. That has no border,
+            // so 1px less vertical padding keeps the two exactly as tall.
+            "gap-2 rounded-lg px-5 py-[9px] text-sm font-semibold transition-all"
+          : "gap-1.5 rounded-md px-2.5 py-1 text-xs font-medium",
         done
           ? "border-border text-muted-foreground hover:bg-muted hover:text-foreground"
-          : // Take / Continue: solid, so a pending quiz stands out in the
-            // header beside the quieter page controls.
-            "border-primary bg-primary text-primary-foreground shadow-sm hover:bg-primary/90 dark:text-white",
+          : // Take / Continue: solid, so a pending quiz stands out.
+            cn(
+              "border-primary bg-primary text-primary-foreground shadow-sm hover:bg-primary/90",
+              // Header pill keeps white text in dark mode; beside Play Audio
+              // it takes Play Audio's own foreground so the pair match.
+              lg ? "hover:shadow-md" : "dark:text-white",
+            ),
         className,
       )}
     >
-      <ClipboardCheck className="size-3.5" />
+      <ClipboardCheck className={lg ? "size-4" : "size-3.5"} />
       {quizActionLabel(card.my.state)}
       {card.my.state === "in_progress" && (
         <span className="tabular-nums opacity-70">