feat: migrate AssetDownloadArtist to tailwind

Author: saurabhburade

src/components/AssetDownload/AssetDownloadArtist.tsx

@@ -1,9 +1,11 @@
 import { useTranslation } from "next-i18next"
-import { Flex } from "@chakra-ui/react"
 
 import Emoji from "@/components/Emoji"
-import Link from "@/components/Link"
-import Text from "@/components/OldText"
+
+import { cn } from "@/lib/utils/cn"
+
+import { Flex } from "../ui/flex"
+import { BaseLink } from "../ui/Link"
 
 type AssetDownloadArtistProps = {
   artistName: string
@@ -17,20 +19,17 @@ const AssetDownloadArtist = ({
   const { t } = useTranslation("page-assets")
   return (
     <Flex
-      mb="4"
-      border="1px"
-      borderTop="none"
-      borderColor="white700"
-      py="2"
-      px="4"
-      borderRadius="0 0 4px 4px"
+      className={cn(
+        "mb-4 border border-t-0 border-[#e5e5e5]",
+        "rounded-b-[4px] px-4 py-2"
+      )}
     >
-      <Flex me="2" fontSize="md" textColor="text300">
+      <Flex className="me-2 text-md text-text-300">
         <Emoji text=":artist_palette:" className="me-2 text-2xl" />
         {t("page-assets-download-artist")}
       </Flex>
-      {artistUrl && <Link href={artistUrl}>{artistName}</Link>}
-      {!artistUrl && <Text m="0">{artistName}</Text>}
+      {artistUrl && <BaseLink href={artistUrl}>{artistName}</BaseLink>}
+      {!artistUrl && <p>{artistName}</p>}
     </Flex>
   )
 }

src/styles/global.css

@@ -43,6 +43,7 @@
       rgba(145, 234, 228, 0.2) 100%
     );
     --search-background: var(--background);
+    --text-300: #4c4c4c;
   }
 
   [data-theme="dark"] {
@@ -71,6 +72,7 @@
       rgba(134, 253, 232, 0.08) 100%
     );
     --search-background: #4c4c4c;
+    --text-300: #cccccc;
   }
 }
 

tailwind.config.ts

@@ -202,6 +202,7 @@ const config = {
         "tooltip-shadow": "var(--tooltip-shadow)",
         "hub-hero-content": "var(--hub-hero-content)",
         "search-background": "var(--search-background)",
+        "text-300": "var(--text-300)",
       },
 
       backgroundImage: {