diff --git a/docs/chakra-migration-guide.md b/docs/chakra-migration-guide.md index a63c87915eb..357d9e12c05 100644 --- a/docs/chakra-migration-guide.md +++ b/docs/chakra-migration-guide.md @@ -86,13 +86,12 @@ const Paragraph = styled.p` We will use [the Chakra default breakpoints](https://chakra-ui.com/docs/styled-system/theme#breakpoints) from now on. Check the following table to do the conversion: | old breakpoints | new breakpoints | |-----------------|-----------------| -| xs | - | -| s | sm | -| m | md | -| l | lg | -| xl | xl | -| - | 2xl | - +| xs | - | +| s | sm | +| m | md | +| l | lg | +| xl | xl | +| - | 2xl | ```tsx // before diff --git a/package.json b/package.json index 15164862f89..f69790871b6 100644 --- a/package.json +++ b/package.json @@ -69,6 +69,7 @@ "react-icons": "^4.3.1", "react-instantsearch-dom": "^6.32.0", "react-intl": "^3.12.1", + "react-rewards": "^2.0.4", "react-select": "^4.3.0", "recharts": "^2.1.9", "styled-system": "^5.1.5", diff --git a/src/assets/home/default_hero.png b/src/assets/home/default_hero.png new file mode 100644 index 00000000000..ae5670ad9ef Binary files /dev/null and b/src/assets/home/default_hero.png differ diff --git a/src/assets/home/hero.png b/src/assets/home/hero.png index ae5670ad9ef..df2adb14963 100644 Binary files a/src/assets/home/hero.png and b/src/assets/home/hero.png differ diff --git a/src/components/BannerNotification.tsx b/src/components/BannerNotification.tsx index 6604ff14ce1..7918d440e7f 100644 --- a/src/components/BannerNotification.tsx +++ b/src/components/BannerNotification.tsx @@ -1,37 +1,33 @@ import React from "react" -import { Flex, useMediaQuery } from "@chakra-ui/react" +import { Flex, FlexProps, useMediaQuery } from "@chakra-ui/react" import { lightTheme as oldTheme } from "../theme" -export interface IProps { - children?: React.ReactNode +export interface IProps extends FlexProps { shouldShow?: boolean - className?: string } const BannerNotification: React.FC = ({ children, - className, shouldShow = false, + ...props }) => { const [isLGScreen] = useMediaQuery(`min-width: ${oldTheme.breakpoints.l}`) - return ( <> {shouldShow && ( {children} diff --git a/src/components/Banners/PostMergeBanner.tsx b/src/components/Banners/PostMergeBanner.tsx new file mode 100644 index 00000000000..610bcf300b9 --- /dev/null +++ b/src/components/Banners/PostMergeBanner.tsx @@ -0,0 +1,35 @@ +import React from "react" +import styled from "@emotion/styled" +import BannerNotification from "../BannerNotification" +import Translation from "../Translation" + +import { TranslationKey } from "../../utils/translations" + +const StyledBannerNotification = styled(BannerNotification)` + display: flex; + z-index: 1; + justify-content: center; + p { + max-width: 100ch; + margin: 0; + padding: 0; + } + a { + text-decoration: underline; + } + text-align: center; +` + +export interface IProps { + translationString: TranslationKey +} + +const PostMergeBanner: React.FC = ({ translationString }) => ( + +

+ +

+ +) + +export default PostMergeBanner diff --git a/src/components/EnergyConsumptionChart.tsx b/src/components/EnergyConsumptionChart.tsx index 7a4beb095ba..86689699674 100644 --- a/src/components/EnergyConsumptionChart.tsx +++ b/src/components/EnergyConsumptionChart.tsx @@ -1,6 +1,6 @@ import React, { useMemo } from "react" +import { Box, Center } from "@chakra-ui/react" import { useTheme } from "@emotion/react" -import styled from "@emotion/styled" import { BarChart, Bar, @@ -12,39 +12,9 @@ import { ResponsiveContainer, Legend, } from "recharts" - +import Translation from "./Translation" import { useWindowSize } from "../hooks/useWindowSize" -const Container = styled.div` - max-width: 500px; - width: 100%; - border-radius: 0.3rem; -` - -// @ts-ignore -const StyledText = styled(Text)` - font-size: 10px; - - @media (min-width: ${({ theme }) => theme.breakpoints.m}) { - font-size: 12px; - } -` - -const StyledLegend = styled.div` - text-align: center; - color: ${({ theme }) => (theme.isDark ? theme.colors.text : "#08084d")}; - font-weight: 600; - margin-top: 2rem; -` - -interface ILegendProps { - legend: string -} - -const CustomLegend: React.FC = ({ legend }) => { - return {legend} -} - interface ITickProps { x: number y: number @@ -56,7 +26,7 @@ const CustomTick: React.FC = ({ x, y, payload }) => { return ( - = ({ x, y, payload }) => { fill={theme.colors.text} textAnchor="middle" verticalAnchor="middle" + fontSize="10px" > {payload.value} - + ) } -export interface IProps { - data: Array<{ +const EnergyConsumptionChart: React.FC = () => { + const theme = useTheme() + const [width] = useWindowSize() + + const smallBreakpoint = Number(theme.breakpoints.s.replace("px", "")) + const mediumBreakpoint = Number(theme.breakpoints.m.replace("px", "")) + + type Data = Array<{ name: string amount: number color: string breakpoint?: number }> - legend: string -} - -const EnergyConsumptionChart: React.FC = ({ data, legend }) => { - const theme = useTheme() - const [width] = useWindowSize() - - const filteredData = useMemo(() => { - return data.filter((cell) => { - if (!cell.breakpoint) { - return true - } - return cell.breakpoint < width - }) - }, [data, width]) + // TODO: Extract translatable strings + const energyConsumptionChartData: Data = [ + { + name: "YouTube", + amount: 244, + color: "#FF0000", + }, + { + name: "Gold mining", + amount: 240, + color: "#D7B14A", + breakpoint: mediumBreakpoint, + }, + { + name: "BTC PoW", + amount: 200, + color: "#F2A900", + }, + { + name: "ETH PoW", + amount: 112, + color: "#C1B6F5", + }, + { + name: "Netflix", + amount: 94, + color: "#E50914", + breakpoint: smallBreakpoint, + }, + { + name: "Gaming", + amount: 34, + color: "#71BB8A", + breakpoint: mediumBreakpoint, + }, + { + name: "PayPal", + amount: 0.26, + color: "#C1B6F5", + breakpoint: smallBreakpoint, + }, + { + name: "ETH PoS", + amount: 0.01, + color: "#C1B6F5", + }, + ] + + const filteredData = useMemo( + () => + energyConsumptionChartData.filter( + (cell) => !cell.breakpoint || cell.breakpoint < width + ), + [energyConsumptionChartData, width] + ) return ( - - - - - } - interval={0} - /> - } /> - + + + - + } + interval={0} + /> + + + + } /> - {filteredData.map((cell, index) => ( - - ))} - - - - + + + {filteredData.map((cell, index) => ( + + ))} + + + + + ) } diff --git a/src/components/EthVideo.tsx b/src/components/EthVideo.tsx index f415b5c9feb..d74d9e0c655 100644 --- a/src/components/EthVideo.tsx +++ b/src/components/EthVideo.tsx @@ -5,7 +5,6 @@ import { Box } from "@chakra-ui/react" import darkVideo from "../assets/ethereum-hero-dark.mp4" import lightVideo from "../assets/ethereum-hero-light.mp4" - export interface IProps { className?: string videoSrc?: string diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx index b86297affd9..ab508771838 100644 --- a/src/components/Layout.tsx +++ b/src/components/Layout.tsx @@ -8,6 +8,9 @@ import { LocaleProvider } from "gatsby-theme-i18n" import { lightTheme, darkTheme } from "../theme" +import BannerNotification from "./BannerNotification" +import Link from "./Link" +import Translation from "./Translation" import Footer from "./Footer" import VisuallyHidden from "./VisuallyHidden" import Nav from "./Nav" @@ -21,6 +24,7 @@ import { SkipLink, SkipLinkAnchor } from "./SkipLink" import { ZenModeContext } from "../contexts/ZenModeContext" import { useKeyPress } from "../hooks/useKeyPress" +import { useConfetti } from "../hooks/useConfetti" import { isLangRightToLeft } from "../utils/translations" import { scrollIntoView } from "../utils/scrollIntoView" @@ -64,6 +68,11 @@ const Main = styled.main` flex-grow: 1; ` +const Centered = styled.div` + display: flex; + justify-content: center; +` + export interface IProps { children?: React.ReactNode data?: { @@ -92,7 +101,8 @@ const Layout: React.FC = ({ const [isZenMode, setIsZenMode] = useState(false) const [shouldShowSideNav, setShouldShowSideNav] = useState(false) - + const [isHomepage, setIsHomepage] = useState(false) + const [isMergePage, setIsMergePage] = useState(false) const locale = pageContext.locale const messages = require(`../intl/${locale}.json`) @@ -116,8 +126,12 @@ const Layout: React.FC = ({ const idTag = location.hash.split("#") scrollIntoView(idTag[1]) } + setIsHomepage(path === `/${locale}/`) + setIsMergePage(path === `/${locale}/upgrades/merge/`) }, [path, location]) + useConfetti("confetti-easter-egg") + const handleZenModeChange = (val?: boolean): void => { // Use 'val' param if provided. Otherwise toggle const newVal = val !== undefined ? val : !isZenMode @@ -166,7 +180,22 @@ const Layout: React.FC = ({