refactor: migrate gradients on stablecoins page

Author: wackerow

src/pages/stablecoins.tsx

@@ -36,6 +36,7 @@ import StablecoinsTable from "@/components/StablecoinsTable"
 import Tooltip from "@/components/Tooltip"
 import Translation from "@/components/Translation"
 
+import { cn } from "@/lib/utils/cn"
 import { existsNamespace } from "@/lib/utils/existsNamespace"
 import { getLastDeployDate } from "@/lib/utils/getLastDeployDate"
 import { runOnlyOnce } from "@/lib/utils/runOnlyOnce"
@@ -474,13 +475,12 @@ const StablecoinsPage = ({ markets, marketsHasError }) => {
           </GhostCard>
         </Flex>
       </Content>
-      <Box
-        w="full"
-        py={16}
-        mt={8}
-        mb={8}
-        background="cardGradient"
-        boxShadow="inset 0px 1px 0px var(--eth-colors-tableItemBoxShadow)"
+      <div
+        className={cn(
+          "my-8 w-full py-16 shadow-inner",
+          "bg-gradient-to-r from-accent-a/10 to-accent-c/10",
+          "dark:bg-gradient-to-tr dark:from-primary/20 dark:from-20% dark:via-accent-a/20 dark:via-60% dark:to-accent-c/20 dark:to-95%"
+        )}
       >
         <Box mb={-8} py={4} px={8} w="full">
           <H2 mt={0}>{t("page-stablecoins-find-stablecoin")}</H2>
@@ -635,7 +635,7 @@ const StablecoinsPage = ({ markets, marketsHasError }) => {
             hasError={marketsHasError}
           />
         </Box>
-      </Box>
+      </div>
       <Content id="explore">
         <H2>{t("page-stablecoins-get-stablecoins")}</H2>
       </Content>
@@ -660,7 +660,7 @@ const StablecoinsPage = ({ markets, marketsHasError }) => {
           imageWidth={600}
           alt={t("page-stablecoins-stablecoins-dapp-callout-image-alt")}
         >
-          <Flex flexFlow="wrap" gap="1em">
+          <div className="flex flex-wrap gap-4">
             <ButtonLink href="/dapps/">
               {t("page-stablecoins-explore-dapps")}
             </ButtonLink>
@@ -672,7 +672,7 @@ const StablecoinsPage = ({ markets, marketsHasError }) => {
             >
               {t("page-stablecoins-more-defi-button")}
             </ButtonLink>
-          </Flex>
+          </div>
         </CalloutBanner>
         <H2>{t("page-stablecoins-save-stablecoins")}</H2>
         <Flex

src/theme.ts

@@ -205,6 +205,7 @@ const lightColors = {
   displayLight: "block",
   grayBackground: "#fcfcfc",
   cardGradient:
+    // Migrate to: "bg-gradient-to-r from-accent-a/10 to-accent-c/10"
     "radial-gradient(46.28% 66.31% at 66.95% 58.35%, #e6e6f7 0%, #e7edfa 50%, #e9fbfa 100%)",
   warning: primaryDark100,
   warningLink: primaryDark700,
@@ -333,6 +334,7 @@ const darkColors = {
   rollupDevDocList: "#4c4c4c",
   beta: "background: radial-gradient(25.56% 133.51% at 28.36% 45.54%, rgba(255, 143, 80, 0.72) 0%, rgba(255, 143, 80, 0.22) 100%)",
   cardGradient:
+    // Migrate to: "dark:bg-gradient-to-tr dark:from-primary/20 dark:from-20% dark:via-accent-a/20 dark:via-60% dark:to-accent-c/20 dark:to-95%"
     "linear-gradient(49.21deg, rgba(127, 127, 213, 0.2) 19.87%, rgba(134, 168, 231, 0.2) 58.46%, rgba(145, 234, 228, 0.2) 97.05% )",
   offBackground: "#181818",
   stakingPillPlatform: "#cd9df3",