Merge branch 'dev' into post-merge

.all-contributorsrc

@@ -8556,6 +8556,15 @@
         "doc",
         "translation"
       ]
+    },
+    {
+      "login": "SavPhill",
+      "name": "Phill",
+      "avatar_url": "https://avatars.githubusercontent.com/u/38789408?v=4",
+      "profile": "https://github.com/SavPhill",
+      "contributions": [
+        "content"
+      ]
     }
   ],
   "contributorsPerLine": 7,

README.md

@@ -1362,6 +1362,9 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
     <td align="center"><a href="http://stackoverflow.com/users/5062825/ramansb"><img src="https://avatars.githubusercontent.com/u/13969478?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Ramandeep</b></sub></a><br /><a href="#ideas-RamanSB" title="Ideas, Planning, & Feedback">🤔</a></td>
     <td align="center"><a href="https://github.com/vvladd"><img src="https://avatars.githubusercontent.com/u/13506999?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Vlad Kokhan</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=vvladd" title="Documentation">📖</a> <a href="#translation-vvladd" title="Translation">🌍</a></td>
   </tr>
+  <tr>
+    <td align="center"><a href="https://github.com/SavPhill"><img src="https://avatars.githubusercontent.com/u/38789408?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Phill</b></sub></a><br /><a href="#content-SavPhill" title="Content">🖋</a></td>
+  </tr>
 </table>
 
 <!-- markdownlint-restore -->

docs/chakra-migration-guide.md

@@ -107,10 +107,24 @@ const Text = styled.p`
 ```tsx
 import { Icon } from "@chakra-ui/react"
 import { BsQuestionSquareFill } from "react-icons/bs"
+
 ;<Icon as={BsQuestionSquareFill} />
 ```
 
-- [Deprecated]`src/components/SharedStyledComponents` - we are not using this anymore, use Chakra components instead.
+- [Deprecated]`src/components/SharedStyledComponents` - we are not using this anymore, replace everything with Chakra components.
+
+```tsx
+// before
+import { ButtonPrimary, ButtonSecondary } from "../SharedStyledComponents"
+
+// now
+import Button from "../Button" // <-- use the new Button component built with Chakra
+
+// use our primary button (uses the default `solid` variant)
+<Button />
+// or the outline version
+<Button variant="outline" />
+```
 
 ## Do you have any other question?
 

gatsby-config.ts

@@ -203,7 +203,7 @@ const config: GatsbyConfig = {
     {
       resolve: "@chakra-ui/gatsby-plugin",
       options: {
-        resetCSS: false,
+        resetCSS: true,
         isUsingColorMode: true,
       },
     },

package.json

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

src/@chakra-ui/gatsby-plugin/components/Button.ts

@@ -0,0 +1,74 @@
+import type { ComponentStyleConfig } from "@chakra-ui/theme"
+
+const commonOutline = {
+  border: "1px",
+  color: "text",
+  bg: "transparent",
+  borderColor: "text",
+  _hover: {
+    color: "primary",
+    bg: "background",
+    borderColor: "primary",
+  },
+  _active: {
+    color: "primary",
+    bg: "primaryLight",
+    borderColor: "primary",
+  },
+  _focus: {
+    color: "primary",
+    borderColor: "background",
+  },
+  _disabled: {
+    color: "disabled",
+    borderColor: "disabled",
+    opacity: 1,
+  },
+}
+
+export const Button: ComponentStyleConfig = {
+  baseStyle: {
+    fontWeight: "normal",
+    borderRadius: "base",
+    _hover: {
+      textDecoration: "none",
+      boxShadow: "primary",
+    },
+    _focus: {
+      boxShadow: "outline",
+      outline: 0,
+    },
+  },
+  sizes: {
+    md: {
+      h: 42,
+    },
+  },
+  variants: {
+    // solid is the default variant used by chakra
+    solid: {
+      color: "buttonColor",
+      bg: "primary",
+      border: 0,
+      _hover: {
+        bg: "primary",
+        opacity: 0.8,
+      },
+      _active: {
+        bg: "primaryHover",
+      },
+      _disabled: {
+        bg: "disabled",
+        opacity: 1,
+      },
+    },
+    outline: {
+      ...commonOutline,
+    },
+    "outline-color": {
+      ...commonOutline,
+      color: "primary",
+      borderColor: "primary",
+    },
+  },
+}

src/@chakra-ui/gatsby-plugin/components/Link.ts

@@ -0,0 +1,15 @@
+import type { ComponentStyleConfig } from "@chakra-ui/theme"
+
+export const Link: ComponentStyleConfig = {
+  baseStyle: {
+    color: "primary",
+    textDecoration: "underline",
+    _focus: {
+      boxShadow: "none",
+    },
+    _focusVisible: {
+      boxShadow: "none",
+      outline: "auto",
+    },
+  },
+}

src/@chakra-ui/gatsby-plugin/components/index.ts

@@ -0,0 +1,2 @@
+export * from "./Link"
+export * from "./Button"

src/@chakra-ui/gatsby-plugin/foundations/colors.ts

@@ -4,6 +4,7 @@ const colors = {
   grey: {
     100: "#f7f7f7",
     300: "#d4d4d4",
+    400: "#b0b0b0",
     500: "#646464",
     700: "#222222",
     900: "#141414",
@@ -21,7 +22,7 @@ const colors = {
     800: "#451900",
   },
   red: {
-    600: "#b80000",
+    500: "#b80000",
   },
   green: {
     500: "#109e62",

src/@chakra-ui/gatsby-plugin/foundations/index.ts

@@ -1,7 +1,11 @@
 import colors from "./colors"
+import shadows from "./shadows"
 
+// Check the following link to see all the possible options:
+// https://github.com/chakra-ui/chakra-ui/blob/main/packages/theme/src/foundations/index.ts
 const foundations = {
   colors,
+  shadows,
 }
 
 export default foundations

src/@chakra-ui/gatsby-plugin/foundations/shadows.ts

@@ -0,0 +1,7 @@
+const shadows = {
+  // using css variables bc shadows do not support color tokens yet
+  primary: "4px 4px 0px 0px var(--eth-colors-primaryLight)",
+  outline: "0 0 0 4px var(--eth-colors-primaryHover)",
+}
+
+export default shadows

src/@chakra-ui/gatsby-plugin/semanticTokens.ts

@@ -31,15 +31,15 @@ const semanticTokens = {
 
     // Design System colors
     primary: { _light: "blue.500", _dark: "orange.500" },
+    primaryLight: { _light: "blue.100", _dark: "orange.100" },
     primaryDark: { _light: "blue.700", _dark: "orange.800" },
     primaryHover: { _light: "blue.300", _dark: "orange.300" },
-    primaryLight: { _light: "blue.100", _dark: "orange.100" },
     body: { _light: "grey.700", _dark: "grey.100" },
     bodyLight: { _light: "grey.500", _dark: "grey.100" },
-    disabled: { _light: "grey.300", _dark: "grey.500" },
+    disabled: { _light: "grey.400", _dark: "grey.500" },
     background: { _light: "white", _dark: "grey.700" },
     success: "green.500",
-    error: "red.600",
+    error: "red.500",
     attention: "yellow.200",
   },
 }

src/@chakra-ui/gatsby-plugin/theme.ts

@@ -10,6 +10,9 @@ import styles from "./styles"
 // Foundational style overrides
 import foundations from "./foundations"
 
+// Component style overrides
+import * as components from "./components"
+
 import semanticTokens from "./semanticTokens"
 
 const config: ThemeConfig = {
@@ -18,11 +21,18 @@ const config: ThemeConfig = {
   useSystemColorMode: true,
 }
 
+/**
+ * Override default styles with our custom theme.
+ *
+ * The complete list of default Chakra styles can be found here:
+ * https://github.com/chakra-ui/chakra-ui/tree/main/packages/theme/src
+ */
 const theme: ThemeOverride = {
   config,
   styles,
   ...foundations,
   semanticTokens,
+  components,
 }
 
 export default extendTheme(theme)

src/components/ActionCard.tsx

@@ -57,6 +57,7 @@ const Card = styled(Link)`
 
   &:hover,
   &:focus {
+    text-decoration: none;
     border-radius: 4px;
     box-shadow: 0px 8px 17px rgba(0, 0, 0, 0.15);
     background: ${(props) => props.theme.colors.tableBackgroundHover};

src/components/BeaconChainActions.tsx

@@ -156,7 +156,7 @@ const BeaconChainActions: React.FC = () => {
           <StyledButtonLink to="https://launchpad.ethereum.org">
             <Translation id="get-started" />
           </StyledButtonLink>
-          <ButtonLink isSecondary to="/staking/">
+          <ButtonLink variant="outline" to="/staking/">
             <Translation id="page-upgrades-index-staking-learn" />
           </ButtonLink>
         </StyledCardLeft>
@@ -168,7 +168,7 @@ const BeaconChainActions: React.FC = () => {
             intl
           )}
         >
-          <ButtonLink isSecondary to="/upgrades/get-involved/">
+          <ButtonLink variant="outline" to="/upgrades/get-involved/">
             <Translation id="consensus-run-beacon-chain" />
           </ButtonLink>
         </StyledCardRight>

src/components/Breadcrumbs.tsx

@@ -39,6 +39,7 @@ const CrumbLink = styled(Link)`
   color: ${(props) => props.theme.colors.textTableOfContents};
 
   &:hover {
+    text-decoration: none;
     color: ${(props) => props.theme.colors.primary};
   }
 

src/components/Button.tsx

@@ -0,0 +1,26 @@
+import React from "react"
+import { Button as ChakraButton, ButtonProps } from "@chakra-ui/react"
+
+import { scrollIntoView } from "../utils/scrollIntoView"
+
+export interface IProps extends ButtonProps {
+  toId?: string
+}
+
+const Button: React.FC<IProps> = ({ toId, children, ...props }) => {
+  const handleOnClick = () => {
+    if (!toId) {
+      return
+    }
+
+    scrollIntoView(toId)
+  }
+
+  return (
+    <ChakraButton onClick={handleOnClick} {...props}>
+      {children}
+    </ChakraButton>
+  )
+}
+
+export default Button

src/components/ButtonDropdown.tsx

@@ -3,12 +3,12 @@ import React, { useState, createRef } from "react"
 import styled from "@emotion/styled"
 import { useIntl } from "react-intl"
 import { motion } from "framer-motion"
+import { MdMenu } from "react-icons/md"
 
 // Components
-import Icon from "./Icon"
 import Link from "./Link"
+import Button from "./Button"
 import Translation from "./Translation"
-import { ButtonSecondary } from "./SharedStyledComponents"
 
 // Utils
 import { useOnClickOutside } from "../hooks/useOnClickOutside"
@@ -65,24 +65,6 @@ const listVariants = {
   },
 }
 
-const Button = styled(ButtonSecondary)`
-  display: flex;
-  align-items: center;
-  justify-content: space-around;
-  min-width: 240px;
-  @media (max-width: ${(props) => props.theme.breakpoints.l}) {
-    width: 100%;
-    justify-content: center;
-  }
-`
-
-const StyledIcon = styled(Icon)`
-  fill: ${(props) => props.theme.colors.text};
-  @media (max-width: ${(props) => props.theme.breakpoints.l}) {
-    margin-right: 1rem;
-  }
-`
-
 const DropdownItem = styled.li`
   margin: 0;
   color: ${(props) => props.theme.colors.text};
@@ -98,6 +80,7 @@ const NavLink = styled(Link)`
   padding: 0.5rem;
   color: ${(props) => props.theme.colors.text};
   &:hover {
+    text-decoration: none;
     color: ${(props) => props.theme.colors.primary};
   }
 `
@@ -156,11 +139,13 @@ const ButtonDropdown: React.FC<IProps> = ({ list, className }) => {
       aria-label={`Select ${translateMessageId(list.text, intl)}`}
     >
       <Button
+        variant="outline"
+        minW={{ base: "100%", lg: "240" }}
+        leftIcon={<MdMenu />}
         onClick={() => setIsOpen(!isOpen)}
         onKeyDown={onKeyDownHandler}
         tabIndex={0}
       >
-        <StyledIcon name="menu" />
         <Translation id={list.text} />
       </Button>
       <DropdownList