Merge pull request #11423 from TylerAPfledderer/refactor/quiz-widget-ui

refactor(Quiz): update and reorganize UI

Author: wackerow

src/components/Quiz/QuizItem.tsx

@@ -56,7 +56,6 @@ const QuizItem: React.FC<QuizzesListItem> = (props) => {
           <Flex gap={2} alignItems="center">
             <Text
               color={isCompleted ? "body.medium" : "text"}
-              fontWeight="bold"
               _before={{
                 content: 'counter(list-counter) ". "',
               }}
@@ -65,9 +64,7 @@ const QuizItem: React.FC<QuizzesListItem> = (props) => {
             </Text>
 
             {/* Show green tick if quizz was completed only */}
-            <Box display={isCompleted ? "flex" : "none"}>
-              <GreenTickIcon />
-            </Box>
+            {isCompleted && <GreenTickIcon />}
           </Flex>
 
           {/* Labels */}
@@ -86,7 +83,7 @@ const QuizItem: React.FC<QuizzesListItem> = (props) => {
         {/* Start Button */}
         <Box w={{ base: "full", lg: "auto" }}>
           <Button
-            variant="outline-color"
+            variant="outline"
             w={{ base: "full", lg: "auto" }}
             onClick={handleStart}
           >

src/components/Quiz/QuizRadioGroup.tsx

@@ -4,8 +4,12 @@ import {
   chakra,
   Circle,
   Flex,
+  FlexProps,
   RadioProps,
+  SquareProps,
+  Stack,
   Text,
+  TextProps,
   useRadio,
   useRadioGroup,
   useToken,
@@ -21,6 +25,90 @@ import { Question } from "../../types"
 interface CustomRadioProps extends RadioProps {
   index: number
   label: string
+  showAnswer: boolean
+  isSelectedCorrect: boolean
+}
+
+const CustomRadio: React.FC<CustomRadioProps> = ({
+  index,
+  label,
+  showAnswer,
+  isSelectedCorrect,
+  ...radioProps
+}) => {
+  const { state, getInputProps, getRadioProps, htmlProps } =
+    useRadio(radioProps)
+
+  // Memoized values
+  const buttonBg = useMemo<string>(() => {
+    if (!state.isChecked) return "body.inverted"
+    if (!showAnswer) return "primary.base"
+    if (!isSelectedCorrect) return "error.base"
+    return "success.base"
+  }, [state.isChecked, showAnswer, isSelectedCorrect])
+
+  const primaryBaseColor = useToken("colors", "primary.base")
+
+  const focusProps: FlexProps = {
+    outline: showAnswer ? "none" : `1px solid ${primaryBaseColor}`,
+  }
+
+  const controlFocusProps: SquareProps = {
+    bg: showAnswer ? "white" : "primary.pressed",
+  }
+
+  const getRadioControlBg = (): SquareProps["bg"] => {
+    if (showAnswer) return "white"
+
+    if (state.isChecked) return "primary.pressed"
+
+    return "disabled"
+  }
+
+  const getControlLabelColor = (): TextProps["color"] => {
+    if (!showAnswer) return "white"
+
+    if (isSelectedCorrect) return "success.base"
+
+    return "error.base"
+  }
+
+  // Render CustomRadio component
+  return (
+    <chakra.label {...htmlProps} cursor="pointer" w="100%">
+      <input {...getInputProps()} />
+      <Flex
+        {...getRadioProps()}
+        w="100%"
+        p={2}
+        alignItems="center"
+        bg={buttonBg}
+        color={state.isChecked ? "white" : "text"}
+        borderRadius="base"
+        _hover={{ ...focusProps, cursor: showAnswer ? "default" : "pointer" }}
+        _focus={focusProps}
+        data-group
+      >
+        <Circle
+          size="25px"
+          bg={getRadioControlBg()}
+          _groupHover={controlFocusProps}
+          _groupFocus={controlFocusProps}
+          me={2}
+        >
+          <Text
+            m="0"
+            fontWeight="700"
+            fontSize="lg"
+            color={getControlLabelColor()}
+          >
+            {String.fromCharCode(97 + index).toUpperCase()}
+          </Text>
+        </Circle>
+        {label}
+      </Flex>
+    </chakra.label>
+  )
 }
 
 interface IProps {
@@ -52,91 +140,18 @@ const QuizRadioGroup: React.FC<IProps> = ({
     [selectedAnswer]
   )
 
-  // Custom radio button component
-  const CustomRadio: React.FC<CustomRadioProps> = ({
-    index,
-    label,
-    ...radioProps
-  }) => {
-    const { state, getInputProps, getCheckboxProps, htmlProps } =
-      useRadio(radioProps)
-
-    // Memoized values
-    const buttonBg = useMemo<string>(() => {
-      if (!state.isChecked) return "body.inverted"
-      if (!showAnswer) return "primary.base"
-      if (!isSelectedCorrect) return "error.base"
-      return "success.base"
-    }, [state.isChecked, showAnswer, isSelectedCorrect])
-
-    const primaryBaseColor = useToken("colors", "primary.base")
-
-    // Render CustomRadio component
-    return (
-      <chakra.label {...htmlProps} cursor="pointer" data-group w="100%">
-        <input {...getInputProps({})} hidden />
-        <Flex
-          {...getCheckboxProps()}
-          w="100%"
-          p={2}
-          alignItems="center"
-          bg={buttonBg}
-          color={state.isChecked ? "white" : "text"}
-          borderRadius="base"
-          _hover={{
-            boxShadow: showAnswer ? "none" : "primary.base",
-            outline: showAnswer ? "none" : `1px solid ${primaryBaseColor}`,
-            cursor: showAnswer ? "default" : "pointer",
-          }}
-        >
-          <Circle
-            size="25px"
-            bg={
-              showAnswer
-                ? "white"
-                : state.isChecked
-                ? "primary.pressed"
-                : "disabled"
-            }
-            _groupHover={{
-              bg: showAnswer ? "white" : "primary.pressed",
-            }}
-            me={2}
-          >
-            <Text
-              m="0"
-              fontWeight="700"
-              fontSize="lg"
-              color={
-                !showAnswer
-                  ? "white"
-                  : isSelectedCorrect
-                  ? "success.base"
-                  : "error.base"
-              }
-            >
-              {String.fromCharCode(97 + index).toUpperCase()}
-            </Text>
-          </Circle>
-          {label}
-        </Flex>
-      </chakra.label>
-    )
-  }
-
   // Render QuizRadioGroup
   return (
-    <Flex {...getRootProps()} direction="column" w="100%">
+    <Stack spacing="6" {...getRootProps()} w="100%">
       <Text
         textAlign={{ base: "center", md: "left" }}
         fontWeight="700"
-        fontSize="2xl"
-        mb={6}
+        size="2xl"
       >
         {t(prompt)}
       </Text>
 
-      <Flex direction="column" gap={4}>
+      <Stack gap="4">
         {answers.map(({ id, label }, index) => {
           const display =
             !showAnswer || id === selectedAnswer ? "inline-flex" : "none"
@@ -146,21 +161,23 @@ const QuizRadioGroup: React.FC<IProps> = ({
               display={display}
               index={index}
               label={t(label)}
+              showAnswer={showAnswer}
+              isSelectedCorrect={isSelectedCorrect}
               {...getRadioProps({ value: id })}
             />
           )
         })}
-      </Flex>
+      </Stack>
 
       {showAnswer && (
-        <Box mt={5}>
+        <Box>
           <Text fontWeight="bold" mt={0} mb={2}>
             <Translation id="explanation" />
           </Text>
           <Text m={0}>{t(explanation)}</Text>
         </Box>
       )}
-    </Flex>
+    </Stack>
   )
 }
 

src/components/Quiz/QuizSummary.tsx

@@ -1,9 +1,14 @@
 import React, { useEffect } from "react"
-import { Box, Flex, useMediaQuery } from "@chakra-ui/react"
+import {
+  HStack,
+  StackDivider,
+  Text,
+  useMediaQuery,
+  VStack,
+} from "@chakra-ui/react"
 import { useI18next } from "gatsby-plugin-react-i18next"
 
 import Translation from "../Translation"
-import Text from "../OldText"
 
 import { numberToPercent } from "../../utils/numberToPercent"
 import { updateUserStats } from "./utils"
@@ -31,7 +36,7 @@ const QuizSummary: React.FC<IProps> = ({
   const { language } = useI18next()
   const [largerThanMobile] = useMediaQuery("(min-width: 30em)")
 
-  const valueStyles = { fontWeight: "700", mb: 2 }
+  const valueStyles = { fontWeight: "700", lineHeight: 1 }
   const labelStyles = { fontSize: "sm", m: 0, color: "disabled" }
 
   // QuizSummary is rendered when user has finished the quiz, proper time to update the stats
@@ -45,7 +50,7 @@ const QuizSummary: React.FC<IProps> = ({
   }, [])
 
   return (
-    <Box w="full" fontSize={["xl", "2xl"]}>
+    <VStack spacing="3" w="full" fontSize={["xl", "2xl"]}>
       <Text
         fontWeight="700"
         textAlign="center"
@@ -59,52 +64,48 @@ const QuizSummary: React.FC<IProps> = ({
         )}
       </Text>
 
-      <Flex
-        p={4}
+      <HStack
+        py="4"
+        px="8"
         justify="center"
         boxShadow="drop"
         bg="background.base"
         mx="auto"
-        w="fit-content"
+        spacing="4"
         sx={{
-          "div:not(:last-of-type)": {
-            borderEnd: "1px",
-            borderColor: "disabled",
-          },
-          div: {
-            p: 4,
-            flexDirection: "column",
-            alignItems: "center",
+          "& > div": {
+            py: "4",
           },
         }}
         overflowX="hidden"
+        divider={<StackDivider borderColor="disabled" />}
       >
-        <Flex>
+        <VStack>
           <Text {...valueStyles}>
             {numberToPercent(ratioCorrect, language)}
           </Text>
           <Text {...labelStyles}>
             <Translation id="score" />
           </Text>
-        </Flex>
+        </VStack>
 
-        <Flex>
+        <VStack>
           <Text {...valueStyles}>+{numberOfCorrectAnswers}</Text>
           <Text {...labelStyles}>
             <Translation id="correct" />
           </Text>
-        </Flex>
+        </VStack>
 
         {largerThanMobile && (
-          <Flex>
+          <VStack>
             <Text {...valueStyles}>{questionCount}</Text>
             <Text {...labelStyles}>
               <Translation id="questions" />
             </Text>
-          </Flex>
+          </VStack>
         )}
-      </Flex>
-    </Box>
+      </HStack>
+    </VStack>
   )
 }