Merge pull request #204 from ethereum/quiz-styling

Fix Quiz styling

Author: pettinarip

src/components/Quiz/QuizWidget/QuizContent.tsx

@@ -1,5 +1,5 @@
 import { useCallback } from "react"
-import { Text, VStack } from "@chakra-ui/react"
+import { Text, type TextProps, VStack } from "@chakra-ui/react"
 
 import { ChildOnlyProp } from "@/lib/types"
 
@@ -12,13 +12,20 @@ export const QuizContent = ({ children }: QuizContentProps) => {
 
   const getTitleContent = useCallback((): string => {
     if (!answerStatus) return title
-    
-    return answerStatus === 'correct' ? "Correct!" : "Incorrect"
+
+    return answerStatus === "correct" ? "Correct!" : "Incorrect"
   }, [answerStatus, title])
-  
+
+  const getTitleTextColor = (): TextProps["color"] => {
+    if (!answerStatus) return "primary.hover"
+    return answerStatus === "correct" ? "success.base" : "fail.base"
+  }
+
   return (
     <VStack spacing="4">
-      <Text>{getTitleContent()}</Text>
+      <Text fontWeight="bold" textAlign="center" color={getTitleTextColor()}>
+        {getTitleContent()}
+      </Text>
       {children}
     </VStack>
   )

src/components/Quiz/QuizWidget/QuizRadioGroup.tsx

@@ -118,11 +118,18 @@ const CustomRadio = ({
   ...radioProps
 }: CustomRadioProps) => {
   const INPUT_ID = `quiz-question-answer-${index}`
-  const { getInputProps, getRadioProps, getLabelProps } = useRadio({
+  const { state, getInputProps, getRadioProps, getLabelProps } = useRadio({
     ...radioProps,
     id: INPUT_ID,
   })
 
+  const buttonBg = useMemo<string>(() => {
+    if (!state.isChecked) return "body.inverted"
+    if (!isAnswerVisible) return "primary.base"
+    if (!isSelectedCorrect) return "error.base"
+    return "success.base"
+  }, [state.isChecked, isAnswerVisible, isSelectedCorrect])
+
   const primaryBaseColor = useToken("colors", "primary.base")
 
   const getAnswerColor = (): ChakraProps["bg"] =>
@@ -149,6 +156,7 @@ const CustomRadio = ({
           w="full"
           p="2"
           color="text"
+          bg={buttonBg}
           borderRadius="base"
           _hover={{
             outline: isAnswerVisible ? "none" : `1px solid ${primaryBaseColor}`,