migrate: UpgradeStatus to tw; rm old tokens

rm upgradeStatusBackground, upgradeStatusShippedBackground, upgradeStatusBorder and upgradeStatusShippedBorder src/theme tokens

Author: wackerow

src/components/UpgradeStatus.tsx

@@ -1,15 +1,8 @@
-import React from "react"
 import { useTranslation } from "next-i18next"
-import { Heading, VStack } from "@chakra-ui/react"
-import { useColorModeValue } from "@chakra-ui/react"
 
 import type { TranslationKey } from "@/lib/types"
 
-import Text from "./OldText"
-
-export interface IStyledContainer {
-  isShipped: boolean
-}
+import { cn } from "@/lib/utils/cn"
 
 export type UpgradeStatusProps = {
   children?: React.ReactNode
@@ -22,37 +15,25 @@ const UpgradeStatus = ({
   children,
   isShipped = false,
 }: UpgradeStatusProps) => {
-  const border = useColorModeValue("none", "2px solid")
-  const darkBorderColor = isShipped ? "#3fb181" : "#a4a4ff"
-  const borderColor = useColorModeValue(undefined, darkBorderColor)
   const { t } = useTranslation("page-staking")
 
   return (
-    <VStack
-      as="aside"
-      alignItems="start"
-      bg={
-        isShipped ? "upgradeStatusShippedBackground" : "upgradeStatusBackground"
-      }
-      border={border}
-      borderColor={borderColor}
-      borderRadius="base"
-      boxShadow={`0px 4px 7px rgba(0, 0, 0, 0.05), 0px 10px 17px rgba(0, 0, 0, 0.03),
-       0px 14px 66px rgba(0, 0, 0, 0.07)`}
-      mb={8}
-      mt={{ base: 8, lg: 0 }}
-      p={6}
-      spacing={6}
-      width="100%"
+    <aside
+      className={cn(
+        "my-8 flex w-full flex-col gap-6 rounded p-6 shadow-2xl lg:mt-0",
+        "bg-black/80 bg-gradient-to-b from-accent-c/10",
+        "dark:border-2 dark:bg-gray-700 dark:from-transparent",
+        isShipped
+          ? "bg-success-light dark:border-success"
+          : "bg-accent-a/20 dark:border-primary"
+      )}
     >
-      <Heading fontSize="sm" fontWeight="normal" textTransform="uppercase">
+      <h2 className="text-sm font-normal uppercase">
         {t("common:consensus-when-shipping")}
-      </Heading>
-      <Text fontSize="2.5rem" fontWeight="bold" lineHeight="100%">
-        {t(dateKey)}
-      </Text>
-      <Text fontSize="xl">{children}</Text>
-    </VStack>
+      </h2>
+      <p className="mb-6 text-4xl font-bold leading-none">{t(dateKey)}</p>
+      <p className="text-xl">{children}</p>
+    </aside>
   )
 }
 

src/theme.ts

@@ -206,12 +206,6 @@ const lightColors = {
   grayBackground: "#fcfcfc",
   cardGradient:
     "radial-gradient(46.28% 66.31% at 66.95% 58.35%, #e6e6f7 0%, #e7edfa 50%, #e9fbfa 100%)",
-  upgradeStatusBackground:
-    "linear-gradient(180deg, rgba(0, 240, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%), linear-gradient(0deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8)), #1c1ce1",
-  upgradeStatusShippedBackground:
-    "linear-gradient(180deg, rgba(0, 240, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%), linear-gradient(0deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8)), #109e62",
-  upgradeStatusBorder: "none",
-  upgradeStatusShippedBorder: "none",
   warning: primaryDark100,
   warningLink: primaryDark700,
   warningLinkHover: primaryDark900,
@@ -317,10 +311,6 @@ const darkColors = {
   displayDark: "block",
   displayLight: "none",
   grayBackground: "#272627",
-  upgradeStatusBackground: "#222222",
-  upgradeStatusShippedBackground: "#222222",
-  upgradeStatusBorder: `${primaryLight200} solid 2px`,
-  upgradeStatusShippedBorder: `${success400} solid 2px`,
   warning: primaryDark100,
   warningLink: primaryDark700,
   warningLinkHover: primaryDark900,