style: refine shared UI primitives and management flows

src/app/(modules)/ticket/[ticketId]/components/TicketClassDetectionPreview.tsx

@@ -149,7 +149,7 @@ export function TicketClassDetectionPreview({
         <div className="flex min-w-0 items-center gap-3">
           <span
             className={cn(
-              'flex size-10 shrink-0 items-center justify-center rounded-full',
+              'flex size-10 shrink-0 self-start items-center justify-center rounded-lg',
               visual.cardClassName,
             )}
           >
@@ -157,13 +157,13 @@ export function TicketClassDetectionPreview({
           </span>
           <div className="min-w-0 space-y-1">
             <div className="flex min-w-0 flex-wrap items-center gap-2">
-              <h3 className="truncate text-lg font-semibold text-foreground">
+              <h3 >
                 {displayName}
               </h3>
               <Badge
                 variant="secondary"
                 className={cn(
-                  'rounded-full border-0 px-2.5 py-1 text-xs font-semibold',
+                  'rounded-lg',
                   visual.cardClassName,
                   visual.colorClassName,
                 )}
@@ -171,7 +171,7 @@ export function TicketClassDetectionPreview({
                 {detectionCount} Detections
               </Badge>
             </div>
-            <p className="text-sm text-muted-foreground">
+            <p className="text-muted-foreground">
               Review detections in ascending timestamp order.
             </p>
           </div>
@@ -180,8 +180,7 @@ export function TicketClassDetectionPreview({
         <div className="flex items-center gap-2 self-start sm:self-auto">
           <Button
             type="button"
-            variant="outline"
-            size="sm"
+            variant="secondary"
             onClick={() => setCurrentIndex((index) => Math.max(index - 1, 0))}
             disabled={isPreviousDisabled}
             aria-label="Previous detection"
@@ -195,8 +194,7 @@ export function TicketClassDetectionPreview({
           </div>
           <Button
             type="button"
-            variant="outline"
-            size="sm"
+            variant="secondary"
             onClick={() => setCurrentIndex((index) => index + 1)}
             disabled={isNextDisabled}
             aria-label="Next detection"
@@ -233,7 +231,7 @@ export function TicketClassDetectionPreview({
         <>
           <div className="grid grid-cols-1 items-start gap-4 xl:grid-cols-2">
             <div className="min-w-0 space-y-2">
-              <p className="text-xs font-medium text-muted-foreground">
+              <p className="text-muted-foreground">
                 Detection Image
               </p>
               <div className="overflow-hidden rounded-lg">