re: minor refactor changes + bg patterns added

Author: BessonovMax

src/App.tsx

@@ -3,8 +3,8 @@ import Header from "./components/Header";
 
 function App() {
   return (
-    <div className="bg-background text-text-primary font-display min-h-dvh px-6 leading-none font-medium md:px-16 xl:px-[8.75rem]">
-      <div className="mx-auto max-w-[1440px] gap-[2.5rem] md:gap-[4rem] xl:gap-[8rem] 2xl:max-w-[1650px]">
+    <div className="bg-background text-text-primary font-display min-h-dvh bg-[image:var(--image-mobile)] bg-cover bg-center bg-no-repeat px-6 leading-none font-medium md:bg-[image:var(--image-tablet)] md:bg-size-[58%] md:bg-top-left md:px-16 xl:bg-[image:var(--image-desktop)] xl:bg-cover xl:bg-center xl:px-[8.75rem]">
+      <div className="mx-auto max-w-[1440px] gap-[2.5rem] md:gap-[4rem] xl:gap-[8rem]">
         <Header />
         <main>
           <Outlet />

src/components/Header.tsx

@@ -1,21 +1,20 @@
 import Title from "./Title";
-import data from "../data/data.json";
 import type { TitleType } from "../types";
 import ThemeSwitcher from "./ThemeSwitcher";
 import useQuiz from "../hooks/useQuiz";
 
 export default function Header() {
-  const { topic } = useQuiz();
+  const { quiz } = useQuiz();
 
   const title: TitleType = {
-    title: data.quizzes.find((quiz) => quiz.title === topic)?.title || "",
-    iconPath: data.quizzes.find((quiz) => quiz.title === topic)?.icon || "",
+    title: quiz?.title ?? "",
+    iconPath: quiz?.icon ?? "",
   };
 
   return (
     <header className="pb- flex justify-between pt-4 pb-[48px] md:py-[3.125rem] xl:py-[83px]">
       <div>
-        {topic ? <Title title={title.title} iconPath={title.iconPath} /> : ""}
+        {quiz ? <Title title={title.title} iconPath={title.iconPath} /> : ""}
       </div>
       <ThemeSwitcher />
     </header>

src/components/QuizButton.tsx

@@ -7,6 +7,7 @@ const QuizButton = ({ onClickHandler, children }: Props) => {
   return (
     <button
       onClick={onClickHandler}
+      type="button"
       className={`bg-primary relative isolate flex w-full cursor-pointer items-center justify-center overflow-hidden rounded-[12px] py-[19px] transition-colors duration-300 before:absolute before:inset-0 before:bg-white/50 before:opacity-0 before:transition-opacity before:duration-300 hover:before:opacity-100 focus:outline-0 focus:before:opacity-100 md:rounded-[24px] md:p-8`}
     >
       <div className="text-[1.125rem] text-white md:text-[1.75rem]">

src/components/quiz/QuestionArea.tsx

@@ -12,7 +12,7 @@ export default function QuestionArea({
   const totalQuestions = questions.length;
 
   // Calculate the progress percentage
-  const progressPercentage = (questionIndex / totalQuestions) * 100;
+  const progressPercentage = ((questionIndex + 1) / totalQuestions) * 100;
 
   return (
     <div className="flex flex-col gap-6 md:gap-10 xl:max-w-[472px] xl:gap-[11.5rem]">

src/components/quiz/VariantButton.tsx

@@ -44,6 +44,7 @@ const VariantButton = ({
             },
       )}
       onClick={onClick}
+      type="button"
       disabled={isAnswered ? true : false}
     >
       <div

src/index.css

@@ -40,6 +40,9 @@
   --color-text-letter: var(--text-letter);
   --color-circle: var(--circle);
   --color-variant-foreground-text: var(--variant-foreground-text);
+  --image-desktop: var(--bg-image-desktop);
+  --image-tablet: var(--bg-image-tablet);
+  --image-mobile: var(--bg-image-mobile);
 }
 
 :root {
@@ -59,6 +62,9 @@
   --js-background: #ebf0ff;
   --accessibility-background: #f6e7ff;
   --variant-foreground-text: #626c7f;
+  --bg-image-desktop: url("./assets/images/pattern-background-desktop-light.svg");
+  --bg-image-tablet: url("./assets/images/pattern-background-tablet-light.svg");
+  --bg-image-mobile: url("./assets/images/pattern-background-mobile-light.svg");
 }
 
 .dark {
@@ -77,4 +83,7 @@
   --css-background: #e0fdef;
   --js-background: #ebf0ff;
   --accessibility-background: #f6e7ff;
+  --bg-image-desktop: url("./assets/images/pattern-background-desktop-dark.svg");
+  --bg-image-tablet: url("./assets/images/pattern-background-tablet-dark.svg");
+  --bg-image-mobile: url("./assets/images/pattern-background-mobile-dark.svg");
 }

src/pages/QuizPage.tsx

@@ -26,7 +26,7 @@ export default function QuizPage() {
     if (isLastQuestion) {
       navigate(`/result/${topic}`);
     } else {
-      setIsAnswered((prev): boolean => !prev);
+      setIsAnswered(false);
       setSelectedOption(null);
       setQuestionIndex((prev) => prev + 1);
     }
@@ -50,7 +50,7 @@ export default function QuizPage() {
       increaseScore();
     }
 
-    setIsAnswered((prev): boolean => !prev);
+    setIsAnswered(true);
   };
 
   const handleSelectedOption = (index: number) => {