feat(Web3InboxRequirement): use Tailwind CSS

guildxyz · Oct 17, 2024 · 3904093 · 3904093
1 parent a82d243
commit 3904093
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 46 deletions.
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -135,6 +135,10 @@
     --uniswap-hover: 332 100% 35%;
     --uniswap-active: 331 100% 25%;
 
+    --web3inbox: 179 99% 32%;
+    --web3inbox-hover: 179 99% 29%;
+    --web3inbox-active: 179 98% 25%;
+
     /**
      * Missing reward colors to work with the current Chakra driven solution.
      * Should find a better solution when we ditch Chakra and won't need to be backward compatible
@@ -257,6 +261,8 @@
     --uniswap-hover: 331 100% 55%;
     --uniswap-active: 331 100% 65%;
 
+    --web3inbox-hover: 179 99% 38%;
+    --web3inbox-active: 179 99% 44%;
   }
 }
 

diff --git a/src/requirements/Web3Inbox/Web3InboxForm.tsx b/src/requirements/Web3Inbox/Web3InboxForm.tsx
@@ -10,32 +10,13 @@ import OptionImage from "components/common/StyledSelect/components/CustomSelectO
 import { useFormState, useWatch } from "react-hook-form"
 import { RequirementFormProps } from "requirements/types"
 import parseFromObject from "utils/parseFromObject"
-
-const WEB3INBOX_APPS = ["GUILD", "WEB3INBOX", "SHEFI"] as const
-export const APP_DETAILS: Record<
-  (typeof WEB3INBOX_APPS)[number],
-  {
-    name: string
-    image: string
-  }
-> = {
-  GUILD: {
-    name: "Guild.xyz",
-    image: "/requirementLogos/guild.png",
-  },
-  WEB3INBOX: {
-    name: "Web3Inbox",
-    image: "/requirementLogos/web3inbox.png",
-  },
-  SHEFI: {
-    name: "SheFi Summit",
-    image: "/requirementLogos/shefi.jpg",
-  },
-}
+import { APP_DETAILS, WEB3INBOX_APPS } from "./constants"
 
 const Web3InboxForm = ({ baseFieldPath }: RequirementFormProps) => {
   const { errors } = useFormState()
-  const app = useWatch({ name: `${baseFieldPath}.data.app` })
+  const app: (typeof WEB3INBOX_APPS)[number] = useWatch({
+    name: `${baseFieldPath}.data.app`,
+  })
 
   return (
     <FormControl

diff --git a/src/requirements/Web3Inbox/Web3InboxRequirement.tsx b/src/requirements/Web3Inbox/Web3InboxRequirement.tsx
@@ -1,16 +1,15 @@
-import { Link, Text } from "@chakra-ui/react"
-import { ArrowSquareOut } from "@phosphor-icons/react"
+import { buttonVariants } from "@/components/ui/Button"
+import { ArrowSquareOut } from "@phosphor-icons/react/dist/ssr"
 import {
   Requirement,
   RequirementProps,
 } from "components/[guild]/Requirements/components/Requirement"
 import { useRequirementContext } from "components/[guild]/Requirements/components/RequirementContext"
-import Button from "components/common/Button"
 import { useRoleMembership } from "components/explorer/hooks/useMembership"
-import { APP_DETAILS } from "./Web3InboxForm"
+import { APP_DETAILS } from "./constants"
 
 const Web3InboxRequirement = (props: RequirementProps) => {
-  const { id, roleId, data } = useRequirementContext()
+  const { id, roleId, data } = useRequirementContext<"WEB3INBOX_SUBSCRIBERS">()
   const { reqAccesses, isValidating } = useRoleMembership(roleId)
   const hasAccess = reqAccesses?.find((req) => req.requirementId === id)?.access
 
@@ -19,30 +18,23 @@ const Web3InboxRequirement = (props: RequirementProps) => {
       image={APP_DETAILS[data.app]?.image}
       footer={
         !isValidating &&
-        !hasAccess && (
-          <Link
+        !!hasAccess && (
+          <a
             href="https://app.web3inbox.com"
-            isExternal
-            _hover={{
-              textDecoration: "none",
-            }}
+            className={buttonVariants({
+              size: "xs",
+              className:
+                "bg-web3inbox text-white hover:bg-web3inbox-hover hover:no-underline active:bg-web3inbox-active",
+            })}
           >
-            <Button
-              size="xs"
-              colorScheme="WEB3INBOX"
-              rightIcon={<ArrowSquareOut />}
-              iconSpacing={1}
-            >
-              Subscribe
-            </Button>
-          </Link>
+            <span>Subscribe</span>
+            <ArrowSquareOut weight="bold" />
+          </a>
         )
       }
       {...props}
     >
-      <Text as="span">
-        {`Subscribe to the ${APP_DETAILS[data.app]?.name} app on Web3Inbox`}
-      </Text>
+      {`Subscribe to the ${APP_DETAILS[data.app]?.name} app on Web3Inbox`}
     </Requirement>
   )
 }

diff --git a/src/requirements/Web3Inbox/constants.ts b/src/requirements/Web3Inbox/constants.ts
@@ -0,0 +1,21 @@
+export const WEB3INBOX_APPS = ["GUILD", "WEB3INBOX", "SHEFI"] as const
+export const APP_DETAILS: Record<
+  (typeof WEB3INBOX_APPS)[number],
+  {
+    name: string
+    image: string
+  }
+> = {
+  GUILD: {
+    name: "Guild.xyz",
+    image: "/requirementLogos/guild.png",
+  },
+  WEB3INBOX: {
+    name: "Web3Inbox",
+    image: "/requirementLogos/web3inbox.png",
+  },
+  SHEFI: {
+    name: "SheFi Summit",
+    image: "/requirementLogos/shefi.jpg",
+  },
+}
diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -185,6 +185,11 @@ const config = {
           hover: "hsl(var(--uniswap-hover))",
           active: "hsl(var(--uniswap-active))",
         },
+        web3inbox: {
+          DEFAULT: "hsl(var(--web3inbox))",
+          hover: "hsl(var(--web3inbox-hover))",
+          active: "hsl(var(--web3inbox-active))",
+        },
       },
       opacity: {
         banner: "var(--banner-opacity)"