Merge pull request #13829 from ethereum/gradients

Design system, gradient updates

Author: pettinarip

public/content/contributing/index.md

@@ -68,7 +68,7 @@ Before contributing, make sure you're familiar with:
 - our [style guide](/contributing/style-guide/)
 - our [code of conduct](/community/code-of-conduct)
 
-<ContributorsQuizBanner mt={16} mb={8} />
+<ContributorsQuizBanner className="mt-16 mb-8" />
 
 ## How decisions about the site are made {#how-decisions-about-the-site-are-made}
 

public/content/translations/it/contributing/index.md

@@ -68,7 +68,7 @@ Prima di contribuire, assicurati di avere familiarità con:
 - la nostra [guida di stile](/contributing/style-guide/)
 - il nostro [codice di condotta](/community/code-of-conduct)
 
-<ContributorsQuizBanner mt={16} mb={8} />
+<ContributorsQuizBanner className="mt-16 mb-8" />
 
 ## Come vengono prese le decisioni sul sito {#how-decisions-about-the-site-are-made}
 

public/content/translations/ja/contributing/index.md

@@ -68,7 +68,7 @@ ethereum.orgは、オープンソースで運営されているプロジェク
 - [スタイルガイド](/contributing/style-guide/)
 - [行動規範](/community/code-of-conduct)
 
-<ContributorsQuizBanner mt={16} mb={8} />
+<ContributorsQuizBanner className="mt-16 mb-8" />
 
 ## サイトに関する決定 {#how-decisions-about-the-site-are-made}
 

public/content/translations/zh-tw/contributing/index.md

@@ -68,7 +68,7 @@ Ethereum.org 是一個開源專案，擁有超過 **12000 名**貢獻者，幫
 - 我們的[風格指南](/contributing/style-guide/)
 - 我們的[行為準則](/community/code-of-conduct)
 
-<ContributorsQuizBanner mt={16} mb={8} />
+<ContributorsQuizBanner className="mt-16 mb-8" />
 
 ## 如何做出有關網站的決定 {#how-decisions-about-the-site-are-made}
 

src/components/Banners/ContributorsQuizBanner.tsx

@@ -1,19 +1,21 @@
-import { Box, Flex, FlexProps, Heading, Text } from "@chakra-ui/react"
+import { Box, Flex, Heading, Text } from "@chakra-ui/react"
 
 import { Image } from "@/components/Image"
 
+import { cn } from "@/lib/utils/cn"
+
 import { ButtonLink } from "../Buttons"
 
 import PeopleLearning from "@/public/images/people-learning.png"
 
 // TODO: refactor to use CalloutBanner component
-function ContributorsQuizBanner(props: FlexProps) {
+function ContributorsQuizBanner(props: React.HTMLAttributes<HTMLDivElement>) {
   return (
-    <Flex
-      as="aside"
-      flexDir={{ base: "column", md: "row-reverse" }}
-      bg="layer2Gradient"
-      borderRadius="base"
+    <aside
+      className={cn(
+        "flex flex-col rounded md:flex-row",
+        "bg-gradient-to-r from-accent-a/10 to-accent-c/10 dark:from-accent-a/20 dark:to-accent-c-hover/20"
+      )}
       {...props}
     >
       <Flex
@@ -57,7 +59,7 @@ function ContributorsQuizBanner(props: FlexProps) {
           </ButtonLink>
         </Box>
       </Flex>
-    </Flex>
+    </aside>
   )
 }
 

src/components/CalloutBanner.tsx

@@ -1,14 +1,12 @@
 import { useTranslation } from "next-i18next"
-import { Flex, type FlexProps } from "@chakra-ui/react"
 
 import type { TranslationKey } from "@/lib/types"
 
-import { Image, type ImageProps } from "@/components/Image"
-import OldHeading from "@/components/OldHeading"
-import Text from "@/components/OldText"
+import { type ImageProps, TwImage } from "@/components/Image"
 
-export type CalloutBannerProps = FlexProps & {
-  children?: React.ReactNode
+import { cn } from "@/lib/utils/cn"
+
+export type CalloutBannerProps = React.HTMLAttributes<HTMLDivElement> & {
   image: ImageProps["src"]
   imageWidth?: number
   titleKey: TranslationKey
@@ -23,57 +21,39 @@ const CalloutBanner = ({
   descriptionKey,
   alt,
   children,
+  className,
   ...props
 }: CalloutBannerProps) => {
   const { t } = useTranslation("page-staking")
 
   return (
-    <Flex
-      as="aside"
-      direction={{ base: "column", lg: "row-reverse" }}
-      bg="layer2Gradient"
-      p={{ base: 8, sm: 12 }}
-      borderRadius="base"
+    <aside
+      className={cn(
+        "flex flex-col rounded p-8 sm:p-12 lg:flex-row-reverse",
+        "bg-gradient-to-r from-accent-a/10 to-accent-c/10 dark:from-accent-a/20 dark:to-accent-c-hover/20",
+        className
+      )}
       {...props}
     >
-      {image && (
-        <Flex>
-          <Image
-            src={image}
-            alt={alt}
-            width={imageWidth}
-            style={{
-              objectFit: "contain",
-            }}
-            mx="auto"
-            mt={-24}
-            mb={{ base: 0, lg: -24 }}
-          />
-        </Flex>
-      )}
-      <Flex
-        flexGrow={1}
-        flexShrink={0}
-        flexBasis="50%"
-        direction="column"
-        justifyContent="center"
-        ps={{ base: 0, sm: 4, lg: 8 }}
-        w={{ base: "full", lg: "inherit" }}
-      >
-        <OldHeading
-          as="h2"
-          mt={0}
-          fontSize={{ base: "2xl", sm: "2rem" }}
-          lineHeight="1.4"
-        >
+      <div className="flex">
+        <TwImage
+          src={image}
+          alt={alt}
+          width={imageWidth}
+          className="-my-24 mx-auto object-contain max-lg:mb-0"
+        />
+      </div>
+
+      <div className="flex w-full flex-shrink-0 flex-grow basis-1/2 flex-col justify-center sm:ps-4 lg:w-[inherit] lg:ps-8">
+        <h2 className="mb-8 text-2xl leading-xs sm:text-[2rem]">
           {t(titleKey)}
-        </OldHeading>
-        <Text fontSize="xl" w="90%" lineHeight="140%" mb={8} color="text200">
+        </h2>
+        <p className="mb-8 w-[90%] text-xl text-body-medium">
           {t(descriptionKey)}
-        </Text>
+        </p>
         {children}
-      </Flex>
-    </Flex>
+      </div>
+    </aside>
   )
 }
 

src/components/Layer2/Layer2Onboard.tsx

@@ -13,6 +13,7 @@ import type { ChildOnlyProp } from "@/lib/types"
 
 import { Image } from "@/components/Image"
 
+import { cn } from "@/lib/utils/cn"
 import { trackCustomEvent } from "@/lib/utils/matomo"
 
 // Data
@@ -213,7 +214,12 @@ const Layer2Onboard = ({
   }
 
   return (
-    <Box bg="layer2Gradient" borderRadius="sm" p={10}>
+    <div
+      className={cn(
+        "rounded-sm p-10",
+        "bg-gradient-to-r from-accent-a/10 to-accent-c/10 dark:from-accent-a/20 dark:to-accent-c-hover/20"
+      )}
+    >
       <Box textAlign="center" maxW="75ch" m="auto">
         <OldHeading
           fontSize={{ base: "2xl", md: "2rem" }}
@@ -347,7 +353,7 @@ const Layer2Onboard = ({
           />
         </Box>
       </SimpleGrid>
-    </Box>
+    </div>
   )
 }
 

src/components/Staking/StakingCommunityCallout.tsx

@@ -1,5 +1,6 @@
+import React from "react"
 import { useTranslation } from "next-i18next"
-import { Flex, type FlexProps } from "@chakra-ui/react"
+import { Flex } from "@chakra-ui/react"
 
 import { ButtonLink } from "@/components/Buttons"
 import CalloutBanner from "@/components/CalloutBanner"
@@ -8,9 +9,10 @@ import { trackCustomEvent } from "@/lib/utils/matomo"
 
 import image from "@/public/images/enterprise-eth.png"
 
-export type StakingCommunityCalloutProps = FlexProps & {
-  id?: string
-}
+export type StakingCommunityCalloutProps =
+  React.HTMLAttributes<HTMLDivElement> & {
+    id?: string
+  }
 
 const StakingCommunityCallout = (props: StakingCommunityCalloutProps) => {
   const { t } = useTranslation("page-staking")

src/components/Staking/StakingComparison.tsx

@@ -1,5 +1,5 @@
 import { useTranslation } from "next-i18next"
-import { Box, Flex, Heading, useTheme } from "@chakra-ui/react"
+import { Box, Heading, useTheme } from "@chakra-ui/react"
 
 import type { StakingPage, TranslationKey } from "@/lib/types"
 
@@ -12,8 +12,11 @@ import InlineLink from "@/components/Link"
 import OldHeading from "@/components/OldHeading"
 import Text from "@/components/OldText"
 
+import { cn } from "@/lib/utils/cn"
 import { MatomoEventOptions, trackCustomEvent } from "@/lib/utils/matomo"
 
+import { Flex } from "../ui/flex"
+
 interface DataType {
   title: TranslationKey
   linkText: TranslationKey
@@ -112,33 +115,20 @@ const StakingComparison = ({ page, className }: StakingComparisonProps) => {
 
   return (
     <Flex
-      direction="column"
-      gap={8}
-      bg="linear-gradient(
-      83.46deg,
-      rgba(127, 127, 213, 0.2) 7.03%,
-      rgba(138, 168, 231, 0.2) 52.42%,
-      rgba(145, 234, 228, 0.2) 98.77%
-    )"
-      py={8}
-      px={{ base: 6, md: 8 }}
-      mt={16}
-      className={className}
+      className={cn(
+        "mt-16 flex-col gap-8 px-6 py-8 md:px-8",
+        "bg-gradient-to-r from-accent-a/10 to-accent-c/10 dark:from-accent-a/20 dark:to-accent-c-hover/20",
+        className
+      )}
     >
       <OldHeading fontSize="2rem">
         {t("page-staking-comparison-with-other-options")}
       </OldHeading>
       {selectedData.map(
         ({ title, linkText, href, color, content, glyph, matomo }, idx) => (
-          <Flex gap={6} direction={{ base: "column", md: "row" }} key={idx}>
+          <Flex className="flex-col gap-6 md:flex-row" key={idx}>
             {!!glyph && (
-              <Flex
-                direction="column"
-                justify="flex-start"
-                align="center"
-                w={12}
-                maxH={12}
-              >
+              <Flex className="max-h-12 w-12 flex-col items-center justify-start">
                 {glyph}
               </Flex>
             )}

src/components/Staking/StakingLaunchpadWidget.tsx

@@ -1,14 +1,16 @@
 import { useState } from "react"
 import { useTranslation } from "next-i18next"
 import { FaTools } from "react-icons/fa"
-import { Box, Flex } from "@chakra-ui/react"
+import { Box } from "@chakra-ui/react"
 
 import { ButtonLink } from "@/components/Buttons"
 import Text from "@/components/OldText"
 import Translation from "@/components/Translation"
 
+import { cn } from "@/lib/utils/cn"
 import { trackCustomEvent } from "@/lib/utils/matomo"
 
+import { Flex } from "../ui/flex"
 import Select, { type SelectOnChange } from "../ui/Select"
 
 type StakingDataOption = { label: string; value: string }
@@ -47,10 +49,10 @@ const StakingLaunchpadWidget = () => {
 
   return (
     <Flex
-      bg="layer2Gradient"
-      borderRadius="base"
-      flexDir="column"
-      p={{ base: 6, md: 8 }}
+      className={cn(
+        "flex-col rounded p-6 md:p-8",
+        "bg-gradient-to-r from-accent-a/10 to-accent-c/10 dark:from-accent-a/20 dark:to-accent-c-hover/20"
+      )}
     >
       <Text as="span" color="text200">
         <Translation id="page-staking:page-staking-launchpad-widget-span" />