feat: improve explanations UI

Author: danieldanielecki

components/Button.tsx

@@ -4,7 +4,13 @@ import React from "react";
 const button = cva("button", {
   variants: {
     intent: {
-      primary: ["bg-blue-600/50", "border-blue-600", "hover:bg-blue-600/60", "focus:ring-blue-800", "border-blue-600"],
+      primary: [
+        "bg-blue-600/50",
+        "border-blue-600",
+        "hover:bg-blue-600/60",
+        "focus:ring-blue-800",
+        "border-blue-600",
+      ],
       secondary: [
         "bg-emerald-600/50",
         "border-emerald-600",
@@ -19,22 +25,38 @@ const button = cva("button", {
       medium: ["font-medium", "py-2.5", "px-5", "sm:text-sm", "text-xs"],
       small: ["font-small", "py-2", "px-2"],
     },
+    variant: {
+      filled: [],
+      outlined: ["bg-transparent", "hover:bg-opacity-10"],
+    },
     compoundVariants: {
       intent: ["primary", "secondary"],
       size: "medium",
     },
     defaultVariants: {
       intent: "primary",
       size: "medium",
+      variant: "filled",
     },
   },
 });
 
-export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof button> {}
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof button> {}
 
-export const Button: React.FC<ButtonProps> = ({ intent, size, ...props }) => (
+export const Button: React.FC<ButtonProps> = ({
+  intent,
+  size,
+  variant,
+  ...props
+}) => (
   <button
-    className={`${button({ intent, size })} text-white rounded-lg focus:outline-none focus:ring-1 border mb-2 sm:mb-0`}
+    className={`${button({
+      intent,
+      size,
+      variant,
+    })} text-white rounded-lg focus:outline-none focus:ring-1 border mb-2 sm:mb-0`}
     {...props}
   />
 );

components/QuizForm.tsx

@@ -6,6 +6,7 @@ import SelectionInput from "./SelectionInput";
 import { Button } from "./Button";
 import NumberInputComponent from "./NumberInputComponent";
 import LoadingIndicator from "./LoadingIndicator";
+import { SiHelpdesk } from "react-icons/si";
 
 const QuizForm: FC<Props> = ({
   isLoading,
@@ -284,7 +285,19 @@ const QuizForm: FC<Props> = ({
         ))}
       </ul>
       {explanation && (
-        <p className="text-white md:px-12 mb-16 select-none">{explanation}</p>
+        <div className="md:px-12 mb-16">
+          <div className="bg-slate-800 border border-slate-600 rounded-lg p-6 shadow-lg">
+            <div className="flex items-center gap-3 mb-4">
+              <div className="rounded-full flex items-center justify-center">
+                <SiHelpdesk className="w-5 h-5 text-white" />
+              </div>
+              <h3 className="text-lg font-semibold text-white">Explanation</h3>
+            </div>
+            <div className="text-slate-200 leading-relaxed whitespace-pre-line">
+              {explanation}
+            </div>
+          </div>
+        </div>
       )}
       <div className="flex justify-center flex-col sm:flex-row">
         <Button
@@ -300,6 +313,7 @@ const QuizForm: FC<Props> = ({
             type="button"
             intent="secondary"
             size="medium"
+            variant="outlined"
             disabled={isThinking}
             onClick={() => {
               setShowCorrectAnswer(true);