Merge pull request #13827 from ethereum/deprecate-expandable-info

Migrate `ExpandableInfo` and `runNodeGradient2`

Author: pettinarip

src/components/ExpandableInfo.tsx

@@ -19,7 +19,6 @@ import type { BasePageProps, ChildOnlyProp, Lang } from "@/lib/types"
 import { Button, ButtonLink } from "@/components/Buttons"
 import Emoji from "@/components/Emoji"
 import ExpandableCard from "@/components/ExpandableCard"
-import ExpandableInfo from "@/components/ExpandableInfo"
 import FeedbackCard from "@/components/FeedbackCard"
 import {
   DecentralizationGlyphIcon,
@@ -31,7 +30,7 @@ import {
   SovereigntyGlyphIcon,
   VoteGlyphIcon,
 } from "@/components/icons/run-a-node"
-import { Image } from "@/components/Image"
+import { Image, TwImage } from "@/components/Image"
 import InlineLink from "@/components/Link"
 import MainArticle from "@/components/MainArticle"
 import OldHeading from "@/components/OldHeading"
@@ -40,7 +39,9 @@ import PageHero from "@/components/PageHero"
 import PageMetadata from "@/components/PageMetadata"
 import { StandaloneQuizWidget as QuizWidget } from "@/components/Quiz/QuizWidget"
 import Translation from "@/components/Translation"
+import { Stack, VStack } from "@/components/ui/flex"
 
+import { cn } from "@/lib/utils/cn"
 import { existsNamespace } from "@/lib/utils/existsNamespace"
 import { getLastDeployDate } from "@/lib/utils/getLastDeployDate"
 import { getLocaleTimestamp } from "@/lib/utils/time"
@@ -284,10 +285,6 @@ const StakingCalloutContainer = (props: ChildOnlyProp) => (
   />
 )
 
-const StrongParagraph = (props: BoxProps) => (
-  <Text fontSize="150%" fontWeight="semibold" {...props} />
-)
-
 const H2 = (props: HeadingProps) => (
   <OldHeading
     fontSize={{ base: "2xl", md: "2rem" }}
@@ -474,27 +471,39 @@ const RunANodePage = () => {
       </Content>
 
       <FlexContent>
-        <ExpandableInfo
-          alignSelf="center"
-          width={{ base: "full", md: "90%" }}
-          mb={{ base: 0, md: 4 }}
-          image={impact}
-          title={<Translation id="page-run-a-node:page-run-a-node-who-title" />}
-          contentPreview={
-            <Translation id="page-run-a-node:page-run-a-node-who-preview" />
-          }
-          background="runNodeGradient2"
-          forceOpen
+        <VStack
+          className={cn(
+            "relative mb-0 w-full gap-0 self-center rounded-sm border p-6 md:mb-4 md:w-[90%]",
+            "bg-gradient-to-br from-blue-500/20 from-10% to-pink-600/20 to-90%"
+          )}
         >
-          <Text>
-            <Translation id="page-run-a-node:page-run-a-node-who-copy-1" />
-          </Text>
-          <Text>{t("page-run-a-node-who-copy-2")}</Text>
-          <Text>{t("page-run-a-node-who-copy-3")}</Text>
-          <StrongParagraph>
-            {t("page-run-a-node-who-copy-bold")}
-          </StrongParagraph>
-        </ExpandableInfo>
+          <Stack className="flex-col items-center justify-between gap-8 md:flex-row md:gap-12">
+            <TwImage
+              src={impact}
+              alt=""
+              sizes="300px"
+              style={{ width: "300px", height: "auto" }}
+            />
+            <div className="me-4">
+              <h2 className="mb-5 mt-4 text-2xl font-semibold leading-[1.4] md:text-[2rem]">
+                <Translation id="page-run-a-node:page-run-a-node-who-title" />
+              </h2>
+              <p className="body-medium mb-0">
+                <Translation id="page-run-a-node:page-run-a-node-who-preview" />
+              </p>
+            </div>
+          </Stack>
+          <div className="mt-8 border-t pt-6">
+            <p className="mb-6">
+              <Translation id="page-run-a-node:page-run-a-node-who-copy-1" />
+            </p>
+            <p className="mb-6">{t("page-run-a-node-who-copy-2")}</p>
+            <p className="mb-6">{t("page-run-a-node-who-copy-3")}</p>
+            <p className="mb-6 text-[150%] font-semibold leading-none">
+              {t("page-run-a-node-who-copy-bold")}
+            </p>
+          </div>
+        </VStack>
       </FlexContent>
 
       <Content>

src/pages/run-a-node.tsx

@@ -151,8 +151,6 @@ const lightColors = {
     "linear-gradient(285.24deg, #F7CBC0 0%, #F4B1AB 29.8%, #8476D9 49.78%, #85ACF9 54.14%, #1C1CE1 61.77%, #000000 69.77%)",
   runNodeGradient:
     "linear-gradient(0deg, rgba(153, 157, 244, 0.1) 0%, rgba(153, 157, 244, 0) 100%), linear-gradient(270.72deg, #FDF0FF 0.62%, rgba(236, 195, 195, 0.557292) 32.61%, rgba(207, 189, 230, 0.296875) 49.67%, rgba(196, 196, 196, 0) 72.88%);",
-  runNodeGradient2:
-    "linear-gradient(135deg, rgba(79, 113, 235, 0.2) 9.8%, rgba(232, 79, 235, 0.2) 92.84%);",
   ghostCardBackground: white,
   ghostCardGhost: white600,
   secondaryButtonBackgroundActive: white700,
@@ -270,8 +268,6 @@ const darkColors = {
     "linear-gradient(285.24deg, #f7cbc0 0%, #fbeae3 17.81%, #f4b1ab 29.8%, #8476d9 49.78%, #8db4ff 69.77%);",
   runNodeGradient:
     "linear-gradient(0deg, rgba(153, 157, 244, 0.35) 0%, rgba(153, 157, 244, 0) 100%), linear-gradient(89.24deg, rgba(253, 240, 255, 0.7) -64.3%, rgba(212, 119, 119, 0.390104) -7.43%, rgba(188, 163, 220, 0.207813) 46.66%, rgba(196, 196, 196, 0) 99.16%);",
-  runNodeGradient2:
-    "linear-gradient(135deg, rgba(79, 113, 235, 0.2) 9.8%, rgba(232, 79, 235, 0.2) 92.84%);",
   primaryHover: primaryDark400,
   primaryActive: primaryDark200,
   ghostCardBackground: black300,