Fix: Added hover effect on cancel animation

lfglabs-dev · Mar 1, 2025 · e0027d1 · e0027d1
1 parent 72bef6e
commit e0027d1
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 97 deletions.
diff --git a/components/UI/button.tsx b/components/UI/button.tsx
@@ -8,6 +8,7 @@ type ButtonProps = {
   disabled?: boolean;
   color?: string;
   loading?: boolean;
+  className?: string;
 };
 
 const Button: FunctionComponent<ButtonProps> = ({
@@ -16,17 +17,14 @@ const Button: FunctionComponent<ButtonProps> = ({
   disabled = false,
   color = "primary",
   loading = false,
+  className = "",
 }) => {
   return (
     <button
       disabled={disabled}
       onClick={onClick}
       className={
-        styles["nq-button"] +
-        " " +
-        (color === "primary" ? "" : styles["nq-button-secondary"]) +
-        " " +
-        (disabled ? styles.disabled_button : "")
+        `${styles["nq-button"]} ${color === "primary" ? "" : styles["nq-button-secondary"]} ${disabled ? styles.disabled_button : ""} ${className}`.trim()
       }
     >
       {loading ? (

diff --git a/components/quiz/quizControls.tsx b/components/quiz/quizControls.tsx
@@ -16,7 +16,7 @@ const QuizControls: FunctionComponent<QuizControlsProps> = ({
   return (
     <div className={styles.controls}>
       <BackButton onClick={() => setStep(step - 1)} />
-      <button onClick={() => (onCancel ? onCancel() : setStep(-2))}>
+      <button className={styles.closeButton} onClick={() => (onCancel ? onCancel() : setStep(-2))}>
         Cancel
       </button>
     </div>

diff --git a/components/quiz/startScreen.tsx b/components/quiz/startScreen.tsx
@@ -27,8 +27,9 @@ const StartScreen: FunctionComponent<StartScreenProps> = ({
           actionBar={
             <Button onClick={() => setStep(step + 1)}>Start Quiz</Button>
           }
+          highlightTitle={false}
         >
-          <Typography type={TEXT_TYPE.BODY_DEFAULT}>{description}</Typography>
+          <Typography type={TEXT_TYPE.BODY_DEFAULT} className="mt-4 text-white/50 text-sm">{description}</Typography>
         </ScreenLayout>
       </div>
       <QuizControls step={step} setStep={setStep} />