Merge branch 'dev' into nov6Filipino

Author: wackerow

.all-contributorsrc

@@ -10704,6 +10704,33 @@
       "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"
+      ]
+    },
+    {
+      "login": "tudorpintea999",
+      "name": "iwantanode",
+      "avatar_url": "https://avatars.githubusercontent.com/u/87604944?v=4",
+      "profile": "https://github.com/tudorpintea999",
+      "contributions": [
+        "content"
+      ]
+    },
+    {
+      "login": "shak58",
+      "name": "shak58",
+      "avatar_url": "https://avatars.githubusercontent.com/u/150069539?v=4",
+      "profile": "https://github.com/shak58",
+      "contributions": [
+        "content"
+      ]
     }
   ],
   "contributorsPerLine": 7,

README.md

@@ -1674,6 +1674,9 @@ 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>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/tudorpintea999"><img src="https://avatars.githubusercontent.com/u/87604944?v=4?s=100" width="100px;" alt="iwantanode"/><br /><sub><b>iwantanode</b></sub></a><br /><a href="#content-tudorpintea999" title="Content">🖋</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/shak58"><img src="https://avatars.githubusercontent.com/u/150069539?v=4?s=100" width="100px;" alt="shak58"/><br /><sub><b>shak58</b></sub></a><br /><a href="#content-shak58" 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/@chakra-ui/gatsby-plugin/styles.ts

@@ -1,7 +1,5 @@
-import { mode } from "@chakra-ui/theme-tools"
-
 const styles = {
-  global: (props) => ({
+  global: {
     /**
      * THESE ARE OLD GLOBAL STYLES - carried over from old css files
      *
@@ -12,9 +10,7 @@ const styles = {
      * don't need the global styles anymore
      */
     body: {
-      // TODO: when we have Chakra v2, this should be done by overriding the
-      // native Chakra semantic tokens
-      bg: mode("white", "gray.800")(props),
+      bg: "background.base",
       lineHeight: "base",
       fontSize: "md",
     },
@@ -83,7 +79,7 @@ const styles = {
       lineHeight: "base",
       fontFamily: "monospace",
     },
-  }),
+  },
 }
 
 export default styles

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