fix: rtl quiz icon and text positioning

Author: wackerow

src/components/Quiz/QuizWidget/QuizRadioGroup.tsx

@@ -61,7 +61,7 @@ export const QuizRadioGroup = () => {
     <Box as="fieldset" w="full" {...getRootProps()}>
       <Text
         as="legend"
-        textAlign={{ base: "center", md: "left" }}
+        textAlign={{ base: "center", md: "start" }}
         fontWeight="700"
         size="2xl"
         w="full"

src/components/Quiz/QuizWidget/index.tsx

@@ -1,5 +1,6 @@
 import { Dispatch, SetStateAction, useEffect, useRef } from "react"
 import {
+  calc,
   Center,
   Heading,
   Spinner,
@@ -24,6 +25,8 @@ import { QuizRadioGroup } from "./QuizRadioGroup"
 import { QuizSummary } from "./QuizSummary"
 import { useQuizWidget } from "./useQuizWidget"
 
+import { useRtlFlip } from "@/hooks/useRtlFlip"
+
 type CommonProps = {
   quizKey: string
   updateUserStats: Dispatch<SetStateAction<UserStats>>
@@ -69,6 +72,8 @@ const QuizWidget = ({
     setCurrentQuestionAnswerChoice,
   } = useQuizWidget({ quizKey, updateUserStats })
 
+  const { isRtl } = useRtlFlip()
+
   const quizPageProps = useRef<
     | (Required<Pick<QuizWidgetProps, "currentHandler" | "statusHandler">> & {
         nextQuiz: string | undefined
@@ -129,7 +134,7 @@ const QuizWidget = ({
           top={{ base: 2, md: 0 }}
           insetInlineStart={{ md: "50%" }}
           transform="auto"
-          translateX={{ md: "-50%" }}
+          translateX={{ md: calc.multiply("50%", isRtl ? 1 : -1) }}
           translateY={{ md: "-50%" }}
         >
           <AnswerIcon answerStatus={answerStatus} />