diff --git a/src/pages-conditional/what-is-ethereum.tsx b/src/pages-conditional/what-is-ethereum.tsx index 551e963982b..c75f042802b 100644 --- a/src/pages-conditional/what-is-ethereum.tsx +++ b/src/pages-conditional/what-is-ethereum.tsx @@ -111,9 +111,11 @@ const TwoColumnContent = (props: FlexProps) => ( const Section = (props: BoxProps) => -const Width60 = (props: ChildOnlyProp) => +export const Width60 = (props: ChildOnlyProp) => ( + +) -const Width40 = (props: ChildOnlyProp) => ( +export const Width40 = (props: ChildOnlyProp) => (
) diff --git a/src/pages/run-a-node.tsx b/src/pages/run-a-node.tsx index 3d01c4e7873..febd70cab1b 100644 --- a/src/pages/run-a-node.tsx +++ b/src/pages/run-a-node.tsx @@ -1,10 +1,22 @@ // Libraries -import React, { ReactNode } from "react" +import React, { ComponentProps, ReactNode } from "react" import { graphql, PageProps } from "gatsby" import { GatsbyImage } from "gatsby-plugin-image" import { useTranslation } from "gatsby-plugin-react-i18next" -import styled from "@emotion/styled" -import { type Icon as ChakraIcon } from "@chakra-ui/react" +import { + Box, + BoxProps, + Center, + CenterProps, + Flex, + FlexProps, + Heading, + HeadingProps, + Img, + Text, + type Icon as ChakraIcon, +} from "@chakra-ui/react" +import { FaDiscord } from "react-icons/fa" // Assets import Dappnode from "../assets/run-a-node/dappnode.svg" @@ -25,369 +37,285 @@ import { import PageHero from "../components/PageHero" import PageMetadata from "../components/PageMetadata" import Translation from "../components/Translation" -import { - Content, - Divider, - Page, - InfoGrid, - Width60, - Width40, -} from "../components/SharedStyledComponents" import ExpandableCard from "../components/ExpandableCard" import ExpandableInfo from "../components/ExpandableInfo" -import Emoji from "../components/OldEmoji" +import Emoji from "../components/Emoji" import Link from "../components/Link" import ButtonLink from "../components/ButtonLink" import FeedbackCard from "../components/FeedbackCard" -import Icon from "../components/Icon" +import Button from "../components/Button" +import { InfoGrid } from "../templates/staking" +import { Width40, Width60 } from "../pages-conditional/what-is-ethereum" // Utils -import { TranslationKey } from "../utils/translations" -import { scrollIntoView } from "../utils/scrollIntoView" import { getImage } from "../utils/image" -// Styles -const GappedPage = styled(Page)` - gap: 4rem; - @media (max-width: ${({ theme }) => theme.breakpoints.l}) { - gap: 3rem; - } - * { - scroll-margin-top: 5.5rem; - } -` - -const GappedContent = styled(Content)` - display: flex; - flex-direction: column; - gap: 3rem; - padding: 1rem 4rem; - @media (max-width: ${({ theme }) => theme.breakpoints.l}) { - gap: 2rem; - padding: 1rem 2rem; - } - @media (max-width: ${({ theme }) => theme.breakpoints.m}) { - padding: 1rem 0; - } -` - -const HeroContainer = styled.div` - background: ${({ theme }) => theme.colors.runNodeGradient}; - width: 100%; -` - -const Hero = styled(PageHero)` - padding-bottom: 2rem; -` - -const TwoColumnContent = styled.div` - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: 2rem; - gap: 2rem; - @media (max-width: ${({ theme }) => theme.breakpoints.l}) { - flex-direction: column; - align-items: flex-start; - margin-left: 0rem; - margin-right: 0rem; - } -` - -const SplitContent = styled.div` - display: flex; - align-items: center; - gap: 2rem; - - @media (max-width: ${({ theme }) => theme.breakpoints.m}) { - width: 100%; - flex-direction: column-reverse; - } -` - -const Column = styled.div` - flex: 1; -` - -const ResponsiveButtonLink = styled(ButtonLink)` - gap: 1rem; - padding-left: 2rem; - padding-right: 2rem; - - &:hover { - svg { - fill: ${({ theme }) => theme.colors.buttonColor}; - transform: scale(1.15); - transition: 0.1s; - } - } - @media (max-width: ${({ theme }) => theme.breakpoints.s}) { - width: 100%; - justify-content: center; - } -` - -const Highlight = styled(Content)<{ backgroundColor: string }>` - display: flex; - justify-content: center; - align-items: center; - background: ${({ theme, backgroundColor }) => theme.colors[backgroundColor]}; - border: 1px solid #dadada; - box-sizing: border-box; - border-radius: 4px; - padding: 2rem 6rem; - color: ${({ theme }) => theme.colors.text}; - position: relative; - isolation: isolate; - svg { - margin: 0 0 0 2rem; - } - &:nth-of-type(even) { - flex-direction: row-reverse; - svg { - margin: 0 2rem 0 0; - } - } - @media (max-width: ${({ theme }) => theme.breakpoints.m}) { - padding: 2rem; - flex-direction: column-reverse; - &:nth-of-type(even) { - flex-direction: column-reverse; - svg { - margin: 0 0 2rem; - } - } - svg { - margin: 0 0 2rem; - } - } - &::after { - content: ""; - position: absolute; - inset: 0; - z-index: -1; - background: inherit; - filter: blur(1rem); - } -` - -const SoftwareHighlight = styled(Highlight)`` - -const ColumnFill = styled.div` - line-height: 2; - box-sizing: border-box; - flex: 1; - ul { - list-style: none; - } - @media (max-width: ${({ theme }) => theme.breakpoints.m}) { - width: 100%; - } -` - -const ColumnNarrow = styled.div` - box-sizing: border-box; - display: flex; - inset: auto; - justify-content: center; - align-items: center; - @media (max-width: ${({ theme }) => theme.breakpoints.m}) { - width: 100%; - } -` - -const FlexContent = styled(Content)` - display: flex; - flex-direction: column; -` - -const Flex = styled.div` - display: flex; - gap: 2rem; - @media (max-width: ${({ theme }) => theme.breakpoints.l}) { - flex-direction: column; - } -` - -const MarginFlex = styled(Flex)` - margin: 3rem 0; -` - -const Container = styled.div` - background: ${({ theme }) => theme.colors.grayBackground}; - border: 1px solid #d1d1d1; - box-sizing: border-box; - border-radius: 5px; - color: ${({ theme }) => theme.colors.text}; - padding: 0 2rem; -` - -const BuildBox = styled(Container)` - background: ${({ theme }) => theme.colors.preBackground}; - flex: 1; - padding: 2rem; - @media (max-width: ${({ theme }) => theme.breakpoints.m}) { - flex-direction: column; - } - - & > p:last-of-type { - margin-bottom: 2rem; - } -` - -const BuildBoxSpace = styled(BuildBox)` - display: flex; - flex-direction: column; - justify-content: space-between; - &:hover { - transform: scale(1.02); - transition: transform 0.1s; - } -` - -const FullyLoaded = styled(Container)` - display: flex; - flex-direction: column; - justify-content: space-between; - line-height: 200%; - padding: 2rem; - flex: 1; - p { - font-size: 110%; - } - code { - font-weight: 600; - line-height: 125%; - } - @media (max-width: ${({ theme }) => theme.breakpoints.l}) { - button { - width: fit-content; - padding-left: 2rem; - padding-right: 2rem; - } - } - @media (max-width: ${({ theme }) => theme.breakpoints.s}) { - button { - width: 100%; - } - } - &:hover { - transition: transform 0.1s; - transform: scale(1.02); - } -` - -const SvgTitle = styled.div` - display: flex; - gap: 1rem; - align-items: center; -` - -const ButtonContainer = styled.div` - display: flex; - gap: 1rem; - margin-top: auto; - @media (max-width: ${({ theme }) => theme.breakpoints.l}) { - flex-direction: column; - } -` - -const DappNodeButtonLink = styled(ResponsiveButtonLink)` - background-color: #007dfc; - span { - color: ${({ theme }) => theme.colors.white}; - } - &:hover { - background-color: #0077be; - box-shadow: 4px 4px 0 0 rgba(#007dfc, 0.47); - } -` - -const AvadoButtonLink = styled(ResponsiveButtonLink)` - background-color: #37822e; - span { - color: ${({ theme }) => theme.colors.white}; - } - &:hover { - background-color: #2e6d2e; - box-shadow: 4px 4px 0 0 rgba(#37822e, 0.47); - } -` - -const StyledEmoji = styled(Emoji)` - margin-right: 1rem; -` - -const BuildContainer = styled(Container)` - flex: 1; - padding: 2rem; - border-radius: none; - border: none; - background: none; - @media (max-width: ${({ theme }) => theme.breakpoints.m}) { - padding: 2rem 0; - } -` - -const ScrollButtonSecondary = styled.button` - text-decoration: none; - display: inline-block; - padding: 0.5rem 2rem; - margin-top: 1rem; - font-size: 1rem; - border-radius: 0.25em; - text-align: center; - cursor: pointer; - - color: ${({ theme }) => theme.colors.text}; - border: 1px solid ${({ theme }) => theme.colors.text}; - background-color: transparent; - &:hover { - color: ${({ theme }) => theme.colors.primary}; - border: 1px solid ${({ theme }) => theme.colors.primary}; - box-shadow: ${({ theme }) => theme.colors.cardBoxShadow}; - } - &:active { - background-color: ${({ theme }) => - theme.colors.secondaryButtonBackgroundActive}; - } - &:hover { - transition: transform 0.1s; - transform: scale(1.05); - } -` - -const DiscordIcon = styled(Icon)` - fill: ${({ theme }) => theme.colors.buttonColor}; -` - -const StakingCalloutContainer = styled(SplitContent)` - background: linear-gradient( - 262.78deg, - rgba(152, 186, 249, 0.25) 0%, - rgba(207, 177, 251, 0.25) 53.12%, - rgba(151, 252, 246, 0.25) 100% - ); - width: 100%; - padding: 2rem; - gap: 5rem; - @media (max-width: ${({ theme }) => theme.breakpoints.m}) { - flex-direction: column; - gap: 3rem; - } -` - -const Leslie = styled(GatsbyImage)` - transform: scaleX(-1) scale(1.15) translateX(2rem); - @media (max-width: ${({ theme }) => theme.breakpoints.l}) { - transform: scaleX(-1) translateY(-3rem); - } -` - -const StrongParagraph = styled.p` - font-size: 150%; - font-weight: 600; -` +import type { ChildOnlyProp } from "../types" + +const Divider = () => + +const GappedPage = (props: ChildOnlyProp) => ( + +) + +const GappedContent = (props: ChildOnlyProp) => ( + +) + +const HeroContainer = (props: ChildOnlyProp) => ( + +) + +const Content = (props: BoxProps) => + +const TwoColumnContent = (props: ChildOnlyProp) => ( + +) + +const SplitContent = (props: FlexProps) => ( + +) + +const Column = (props: ChildOnlyProp) => + +const SoftwareHighlight = (props: CenterProps) => ( +
+) + +const ColumnFill = (props: ChildOnlyProp) => ( + +) + +const ColumnNarrow = (props: ChildOnlyProp) => ( + +) + +const FlexContent = (props: ChildOnlyProp) => ( + +) + +const FlexContainer = (props: FlexProps) => ( + +) + +const MarginFlex = (props: ChildOnlyProp) => ( + +) + +const Container = (props: FlexProps) => ( + +) + +const BuildBox = (props: ComponentProps) => ( + p:last-of-type": { + mb: 8, + }, + "li:last-child": { + mb: 0, + }, + }} + {...props} + /> +) + +const BuildBoxSpace = (props: ChildOnlyProp) => ( + +) + +const FullyLoaded = (props: ChildOnlyProp) => ( + +) + +const SvgTitle = (props: ChildOnlyProp) => ( + +) + +const ButtonContainer = (props: ChildOnlyProp) => ( + +) + +const DappNodeButtonLink = (props: ComponentProps) => ( + +) + +const AvadoButtonLink = (props: ComponentProps) => ( + +) + +const BuildContainer = (props: ChildOnlyProp) => ( + +) + +const StakingCalloutContainer = (props: ChildOnlyProp) => ( + +) + +const StrongParagraph = (props: BoxProps) => ( + +) + +const H2 = (props: HeadingProps) => ( + +) + +const H3 = (props: HeadingProps) => ( + +) + +const H4 = (props: ChildOnlyProp) => ( + +) interface RunANodeCard { image: typeof ChakraIcon @@ -499,33 +427,35 @@ const RunANodePage = ({ data }: PageProps) => { description={t("page-run-a-node-meta-description")} /> - + + + -

+

-

-

+

+

-

-

+ + -

-

+ +

-

-

+ + -

-

+ +

-

-

+ + -

+ @@ -544,15 +474,15 @@ const RunANodePage = ({ data }: PageProps) => { background="runNodeGradient2" forceOpen > -

+ -

-

+ + -

-

+ + -

+ @@ -560,9 +490,9 @@ const RunANodePage = ({ data }: PageProps) => { -

+

-

+ {whyRunANodeCards.map(({ image, title, preview, body, alt }, idx) => { return ( @@ -587,21 +517,24 @@ const RunANodePage = ({ data }: PageProps) => { -

+

-

+ - + -

+ -

-

- - + + + + - -

+ + @@ -615,12 +548,7 @@ const RunANodePage = ({ data }: PageProps) => { - - -

- -

- + ) @@ -628,16 +556,24 @@ const RunANodePage = ({ data }: PageProps) => { alt={t("page-run-a-node-glyph-alt-dappnode")} /> + + + + + - + -

+ -

-

+ + -

+ ) => { -

+

-

-

+ + -

-

+ + -

+ -
-

- + +

+ -

-

+

+ -

+
  • @@ -678,12 +614,12 @@ const RunANodePage = ({ data }: PageProps) => {
  • - + - +
-
+ @@ -695,14 +631,14 @@ const RunANodePage = ({ data }: PageProps) => { -
-

- + +

+ -

-

+

+ -

+
  • @@ -714,20 +650,18 @@ const RunANodePage = ({ data }: PageProps) => {
-
- scrollIntoView("build-your-own")} - > + + -

+

-

+ @@ -736,79 +670,79 @@ const RunANodePage = ({ data }: PageProps) => { // @ts-ignore alt={t("page-run-a-node-glyph-alt-hardware")} /> -

+

-

+ - + -

+

-

+
  • -

    + -

    -

    + + -

    -

    + + -

    +
  • -

    + -

    -

    - - + + + + - - -

    + + +
-

+

-

+
  • -

    - + + - -

    + +
  • -

    - + + - -

    + +
  • -

    - + + - -

    + +
- + @@ -818,21 +752,21 @@ const RunANodePage = ({ data }: PageProps) => { // @ts-ignore alt={t("page-run-a-node-glyph-alt-software")} /> -

+

-

+ - + -
-

+ +

-

-

+

+ -

-
+ + @@ -841,52 +775,54 @@ const RunANodePage = ({ data }: PageProps) => { -
-

+ +

-

-

+

+ -

-

+ + -

-
+ + - - + - - + + - + - + -

+

-

-

+ + -

-

+ + -

+ - - + } + to="https://discord.gg/c28an8dA5k" + > - - + + - + @@ -896,18 +832,18 @@ const RunANodePage = ({ data }: PageProps) => { -

+

-

+
  • {" "} -{" "} - + - +
  • @@ -919,9 +855,9 @@ const RunANodePage = ({ data }: PageProps) => { {" "} -{" "} - + - +
@@ -930,71 +866,79 @@ const RunANodePage = ({ data }: PageProps) => { - + -

+

-

-

+ + -

+ - + - + -

- +

+ -

-

+

+ -

-

+ + {" "} -{" "} -

-

- + +

+ -

-

+

+ -

+
  • {" "} -{" "} - + - +
  • {" "} -{" "} - + - +
  • {" "} -{" "} - + - +
diff --git a/src/templates/staking.tsx b/src/templates/staking.tsx index a593c2ba9e7..4e0502fa5e8 100644 --- a/src/templates/staking.tsx +++ b/src/templates/staking.tsx @@ -119,7 +119,7 @@ const Header4 = (props: ChildOnlyProp) => ( /> ) -const InfoGrid = (props: ChildOnlyProp) => ( +export const InfoGrid = (props: ChildOnlyProp) => (