Merge branch 'dev' into nov6FarsiJapanese

Author: corwintines

.all-contributorsrc

@@ -10704,6 +10704,15 @@
       "contributions": [
         "doc"
       ]
+    },
+    {
+      "login": "s-crypt",
+      "name": "s-crypt",
+      "avatar_url": "https://avatars.githubusercontent.com/u/41712656?v=4",
+      "profile": "https://blog.insubli.me",
+      "contributions": [
+        "content"
+      ]
     }
   ],
   "contributorsPerLine": 7,

README.md

@@ -1674,6 +1674,7 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/joaolago1113"><img src="https://avatars.githubusercontent.com/u/22820692?v=4?s=100" width="100px;" alt="joao"/><br /><sub><b>joao</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=joaolago1113" title="Documentation">📖</a></td>
       <td align="center" valign="top" width="14.28%"><a href="http://p2p.org"><img src="https://avatars.githubusercontent.com/u/3310192?v=4?s=100" width="100px;" alt="Eugene"/><br /><sub><b>Eugene</b></sub></a><br /><a href="#content-rgb2hsl" title="Content">🖋</a></td>
       <td align="center" valign="top" width="14.28%"><a href="http://www.danielgorbe.com"><img src="https://avatars.githubusercontent.com/u/36860942?v=4?s=100" width="100px;" alt="Dániel Görbe"/><br /><sub><b>Dániel Görbe</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=g0rbe" title="Documentation">📖</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://blog.insubli.me"><img src="https://avatars.githubusercontent.com/u/41712656?v=4?s=100" width="100px;" alt="s-crypt"/><br /><sub><b>s-crypt</b></sub></a><br /><a href="#content-s-crypt" title="Content">🖋</a></td>
     </tr>
   </tbody>
 </table>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ethereum-org-website",
-  "version": "7.22.3",
+  "version": "7.23.0",
   "description": "Website of ethereum.org",
   "main": "index.js",
   "repository": "[email protected]:ethereum/ethereum-org-website.git",

src/assets/heroes/community-hero.png

@@ -55,6 +55,7 @@ const HubHero = (props: HubHeroProps) => {
         transform={{ xl: "translateY(-50%)" }}
         backdropFilter={{ xl: "auto" }}
         backdropBlur={{ xl: "base" }}
+        wordBreak="break-word"
       >
         <Heading
           as="h1"

src/components/Hero/HubHero/index.tsx

@@ -0,0 +1,65 @@
+import React from "react"
+import { calc, Flex, FlexProps, HeadingProps } from "@chakra-ui/react"
+
+import ButtonDropdown, {
+  IProps as ButtonDropdownProps,
+  List as ButtonDropdownList,
+} from "../ButtonDropdown"
+import OldHeading from "../OldHeading"
+import Translation from "../Translation"
+import UpgradeTableOfContents from "../UpgradeTableOfContents"
+
+export const H2 = (props: HeadingProps) => (
+  <OldHeading
+    fontWeight={700}
+    lineHeight={1.4}
+    size="lg"
+    textAlign="left"
+    mt={0}
+    {...props}
+  />
+)
+
+export const StyledButtonDropdown = ({
+  list,
+  ...rest
+}: FlexProps & Pick<ButtonDropdownProps, "list">) => (
+  <Flex align="flex-end" justify="flex-end" mb={8} {...rest} pos="relative">
+    <ButtonDropdown list={list} w="full" minW="240px" />
+  </Flex>
+)
+
+interface IProps {
+  dropdownLinks?: ButtonDropdownList
+  maxDepth?: number
+  tocItems: any[]
+}
+
+const LeftNavBar: React.FC<IProps> = ({
+  dropdownLinks,
+  maxDepth = 1,
+  tocItems,
+}) => {
+  return (
+    <Flex
+      as="aside"
+      flexDirection="column"
+      flex="0 1 400px"
+      ml={8}
+      mr={16}
+      position="sticky"
+      top="6.25rem"
+      height={calc("100vh").subtract("80px").toString()}
+    >
+      {dropdownLinks && <StyledButtonDropdown list={dropdownLinks} />}
+      <H2>
+        <Translation id="on-this-page" />
+      </H2>
+      {tocItems && (
+        <UpgradeTableOfContents items={tocItems} maxDepth={maxDepth} />
+      )}
+    </Flex>
+  )
+}
+
+export default LeftNavBar

src/components/LeftNavBar/index.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/QuizItem.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>
   )
 }