diff --git a/.all-contributorsrc b/.all-contributorsrc
index 3ff698b1c0b..83771e9871c 100644
--- a/.all-contributorsrc
+++ b/.all-contributorsrc
@@ -9590,6 +9590,15 @@
"contributions": [
"doc"
]
+ },
+ {
+ "login": "florath",
+ "name": "Andreas Florath",
+ "avatar_url": "https://avatars.githubusercontent.com/u/11856543?v=4",
+ "profile": "https://github.com/florath",
+ "contributions": [
+ "doc"
+ ]
}
],
"contributorsPerLine": 7,
diff --git a/README.md b/README.md
index f619ddaaea1..6f0e0604c5d 100644
--- a/README.md
+++ b/README.md
@@ -1509,6 +1509,7 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
Owen Hwang
📖 |
+ 
Andreas Florath
📖 |
diff --git a/package.json b/package.json
index f90115198f2..40bff430f0e 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "ethereum-org-website",
- "version": "6.9.2",
+ "version": "6.9.3",
"description": "Website of ethereum.org",
"main": "index.js",
"repository": "git@github.com:ethereum/ethereum-org-website.git",
diff --git a/src/@chakra-ui/gatsby-plugin/styles.ts b/src/@chakra-ui/gatsby-plugin/styles.ts
index 72db8b3b515..14150469e9f 100644
--- a/src/@chakra-ui/gatsby-plugin/styles.ts
+++ b/src/@chakra-ui/gatsby-plugin/styles.ts
@@ -19,6 +19,10 @@ const styles = {
bg: mode("white", "gray.700")(props),
lineHeight: "1.6rem",
},
+ a: {
+ color: "primary",
+ textDecoration: "underline",
+ },
// should be replace with https://chakra-ui.com/docs/components/text
p: {
margin: "0px 0px 1.45rem",
diff --git a/src/components/CardList.tsx b/src/components/CardList.tsx
index cc27069d997..501552e4c8f 100644
--- a/src/components/CardList.tsx
+++ b/src/components/CardList.tsx
@@ -7,6 +7,7 @@ import {
LinkBox,
LinkOverlay,
StackProps,
+ useColorModeValue,
} from "@chakra-ui/react"
import { ImageProp } from "../types"
@@ -50,6 +51,8 @@ const Card = (props: CardListItem & Omit) => {
const isLink = !!link
const isExternal = url.isExternal(link || "")
+ const descriptionColor = useColorModeValue("gray.500", "gray.400")
+
return (
{image && }
@@ -69,7 +72,7 @@ const Card = (props: CardListItem & Omit) => {
{title}
)}
-
+
{description}
diff --git a/src/components/Pill.tsx b/src/components/Pill.tsx
index eb58df45037..7cf65ef2f2b 100644
--- a/src/components/Pill.tsx
+++ b/src/components/Pill.tsx
@@ -1,32 +1,6 @@
import React from "react"
-import styled from "@emotion/styled"
+import { Flex } from "@chakra-ui/react"
-const Primary = styled.div<{ color?: string }>`
- display: flex;
- background: ${(props) =>
- props.color
- ? props.theme.colors[props.color]
- : props.theme.colors.primary100};
- color: ${(props) => props.theme.colors.black300};
- text-transform: uppercase;
- text-align: center;
- display: inline-block;
- padding: 0.25rem 0.5rem;
- margin-right: 0.5rem;
- font-size: 0.75rem;
- border-radius: 0.25rem;
-`
-const Secondary = styled.div`
- display: flex;
- border: 1px solid ${(props) => props.theme.colors.primary100};
- color: ${(props) => props.theme.colors.text};
- text-transform: uppercase;
- text-align: center;
- display: inline-block;
- padding: 0.25rem 0.5rem;
- font-size: 0.75rem;
- border-radius: 0.25rem;
-`
export interface IProps {
children?: React.ReactNode
className?: string
@@ -41,11 +15,38 @@ const Pill: React.FC = ({
color,
}) => {
return isSecondary ? (
- {children}
+
+ {children}
+
) : (
-
+
{children}
-
+
)
}
diff --git a/src/components/Staking/StakingStatsBox.tsx b/src/components/Staking/StakingStatsBox.tsx
index 683a7fb3d28..1289e3e2a7b 100644
--- a/src/components/Staking/StakingStatsBox.tsx
+++ b/src/components/Staking/StakingStatsBox.tsx
@@ -5,6 +5,9 @@ import { useIntl } from "react-intl"
import { Spinner } from "@chakra-ui/react"
// Import components
import Translation from "../Translation"
+import Tooltip from "../Tooltip"
+import Link from "../Link"
+import Icon from "../Icon"
// Import utilities
import { Lang } from "../../utils/languages"
import { getData } from "../../utils/cache"
@@ -49,12 +52,40 @@ const Value = styled.code`
color: ${({ theme }) => theme.colors.primary};
`
-const Label = styled.p`
+const Label = styled.div`
+ display: flex;
+ flex-wrap: nowrap;
+ align-items: center;
text-transform: uppercase;
font-size: 0.875rem;
margin-top: 0.5rem;
`
+const StyledIcon = styled(Icon)`
+ fill: ${({ theme }) => theme.colors.text};
+ margin-inline-start: 0.5rem;
+ @media (max-width: ${({ theme }) => theme.breakpoints.l}) {
+ }
+ &:hover,
+ &:active,
+ &:focus {
+ fill: ${({ theme }) => theme.colors.primary};
+ }
+`
+
+const BeaconchainTooltip = () => (
+
+ {" "}
+ Beaconcha.in
+
+ }
+ >
+
+
+)
+
// Interfaces
export interface IProps {}
@@ -128,6 +159,7 @@ const StakingStatsBox: React.FC = () => {
)}
@@ -140,6 +172,7 @@ const StakingStatsBox: React.FC = () => {
)}
|
@@ -152,6 +185,7 @@ const StakingStatsBox: React.FC = () => {
)}
|
diff --git a/src/components/StatsBoxGrid.tsx b/src/components/StatsBoxGrid.tsx
index 254522ace9a..c9f8be6f672 100644
--- a/src/components/StatsBoxGrid.tsx
+++ b/src/components/StatsBoxGrid.tsx
@@ -62,9 +62,7 @@ const Grid = styled.div`
}
`
-const Box = styled.div<{
- color?: string
-}>`
+const Box = styled.div`
position: relative;
color: ${({ theme }) => theme.colors.text};
height: 20rem;
@@ -111,14 +109,12 @@ const Lines = styled.div`
const ButtonContainer = styled.div<{ dir?: Direction }>`
position: absolute;
- ${({ dir }) => (dir === "rtl" ? "left:" : "right:")} 20px;
+ ${({ dir }) => (dir === "rtl" ? "left" : "right")}: 20px;
bottom: 20px;
font-family: ${(props) => props.theme.fonts.monospace};
`
-const Button = styled.button<{
- color: string
-}>`
+const Button = styled.button<{ color: string }>`
background: ${(props) => props.theme.colors.background};
font-family: ${(props) => props.theme.fonts.monospace};
font-size: 1.25rem;
@@ -134,9 +130,7 @@ const Button = styled.button<{
}
`
-const ButtonToggle = styled(Button)<{
- active: boolean
-}>`
+const ButtonToggle = styled(Button)<{ active: boolean }>`
${({ active, theme }) =>
active &&
`
diff --git a/src/components/UpgradeStatus.tsx b/src/components/UpgradeStatus.tsx
index 8b66af8e35d..5725481b4af 100644
--- a/src/components/UpgradeStatus.tsx
+++ b/src/components/UpgradeStatus.tsx
@@ -1,7 +1,7 @@
import React from "react"
import { TranslationKey } from "../utils/translations"
import Translation from "./Translation"
-import { Heading, Text, useColorMode, VStack } from "@chakra-ui/react"
+import { Heading, Text, useColorModeValue, VStack } from "@chakra-ui/react"
export interface IStyledContainer {
isShipped: boolean
@@ -18,10 +18,10 @@ const UpgradeStatus: React.FC = ({
children,
isShipped = false,
}) => {
- const { colorMode } = useColorMode()
- const border = colorMode === "dark" ? "2px solid" : "none"
+ const border = useColorModeValue("none", "2px solid")
const darkBorderColor = isShipped ? "#3fb181" : "#a4a4ff"
- const borderColor = colorMode === "dark" ? darkBorderColor : undefined
+
+ const borderColor = useColorModeValue(undefined, darkBorderColor)
return (