Merge pull request #11554 from ethereum/dev

Release candidate v7.23.1

Author: corwintines

.all-contributorsrc

@@ -8379,7 +8379,8 @@
       "avatar_url": "https://avatars.githubusercontent.com/u/45835846?v=4",
       "profile": "https://pandapip1.com/",
       "contributions": [
-        "doc"
+        "doc",
+        "ideas"
       ]
     },
     {
@@ -10676,6 +10677,42 @@
       "contributions": [
         "doc"
       ]
+    },
+    {
+      "login": "joaolago1113",
+      "name": "joao",
+      "avatar_url": "https://avatars.githubusercontent.com/u/22820692?v=4",
+      "profile": "https://github.com/joaolago1113",
+      "contributions": [
+        "doc"
+      ]
+    },
+    {
+      "login": "rgb2hsl",
+      "name": "Eugene",
+      "avatar_url": "https://avatars.githubusercontent.com/u/3310192?v=4",
+      "profile": "http://p2p.org",
+      "contributions": [
+        "content"
+      ]
+    },
+    {
+      "login": "g0rbe",
+      "name": "Dániel Görbe",
+      "avatar_url": "https://avatars.githubusercontent.com/u/36860942?v=4",
+      "profile": "http://www.danielgorbe.com",
+      "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,

.github/CODEOWNERS

@@ -5,7 +5,7 @@
 
 # These owners will be the default owners for everything in
 # the repo. Unless a later match takes precedence,
-*       @samajammin @wackerow @corwintines @pettinarip @minimalsm @jmcook1186 @nhsz
+*       @wackerow @corwintines @pettinarip @minimalsm @nhsz
 
 # Owners of specific files
 /src/data/consensus-bounty-hunters.csv @djrtwo @asanso @fredriksvantes

README.md

@@ -1347,7 +1347,7 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
     </tr>
     <tr>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/rogueassasin1729"><img src="https://avatars.githubusercontent.com/u/92800000?v=4?s=100" width="100px;" alt="rogueassasin1729"/><br /><sub><b>rogueassasin1729</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=rogueassasin1729" title="Documentation">📖</a></td>
-      <td align="center" valign="top" width="14.28%"><a href="https://pandapip1.com/"><img src="https://avatars.githubusercontent.com/u/45835846?v=4?s=100" width="100px;" alt="Pandapip1"/><br /><sub><b>Pandapip1</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=Pandapip1" title="Documentation">📖</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://pandapip1.com/"><img src="https://avatars.githubusercontent.com/u/45835846?v=4?s=100" width="100px;" alt="Pandapip1"/><br /><sub><b>Pandapip1</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=Pandapip1" title="Documentation">📖</a> <a href="#ideas-Pandapip1" title="Ideas, Planning, & Feedback">🤔</a></td>
       <td align="center" valign="top" width="14.28%"><a href="http://aldizh.github.io/"><img src="https://avatars.githubusercontent.com/u/2282120?v=4?s=100" width="100px;" alt="Aldi Zhupani"/><br /><sub><b>Aldi Zhupani</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/issues?q=author%3AAldizh" title="Bug reports">🐛</a> <a href="https://github.com/ethereum/ethereum-org-website/commits?author=Aldizh" title="Code">💻</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/linhuatan"><img src="https://avatars.githubusercontent.com/u/94831627?v=4?s=100" width="100px;" alt="linhuatan"/><br /><sub><b>linhuatan</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=linhuatan" title="Documentation">📖</a></td>
       <td align="center" valign="top" width="14.28%"><a href="http://hugh.sh"><img src="https://avatars.githubusercontent.com/u/24587702?v=4?s=100" width="100px;" alt="Hugh"/><br /><sub><b>Hugh</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=hughcrt" title="Documentation">📖</a></td>
@@ -1671,6 +1671,10 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
     </tr>
     <tr>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/costgallo"><img src="https://avatars.githubusercontent.com/u/49433698?v=4?s=100" width="100px;" alt="Costanza"/><br /><sub><b>Costanza</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=costgallo" title="Documentation">📖</a></td>
+      <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>

gatsby-node.ts

@@ -38,7 +38,8 @@ const commonRedirectProps = {
  * @returns boolean for if file is outdated or not
  */
 const checkIsMdxOutdated = (filePath: string): boolean => {
-  const dirname = path.resolve("./")
+  // .replace(/\\/g, "/") to replace \ in windows paths ex: C:\\folder\\myfile.txt becomes C:/folder/myfile.txt
+  const dirname = path.resolve("./").replace(/\\/g, "/")
   const splitPath = filePath.split(dirname)
   const tempSplitPath = splitPath[1]
   const tempSplit = tempSplitPath.split("/")

src/assets/heroes/community-hero.png

@@ -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>
   )
 }