feat: migrate the common requirement components to Tailwind CSS (#1515)

* chore: exclude world id from the requirement type temporarly * feat: `RequirementWarningIcon` component * feat: custom `useCopyToClipboard` hook with timeout * feat: migrate `DataBlock` to Tailwind CSS * feat: migrate `AnyOfHeader` to Tailwind CSS * feat: migrate `RequirementChainIndicator` to Tailwind CSS * feat: migrate `RequirementButton` to Tailwind CSS * feat: migrate `ViewOriginalPopover` to Tailwind CSS & Radix UI * feat: migrate `Visibility` to Tailwind CSS & Radix UI * feat: migrate `RequirementImage` to Tailwind CSS * feat(RequirementDisplayComponent): update prop types and use named export * fix(RequirementButton): consistent styling with chain & visibility indicators * feat: migrate `Requirement` to Tailwind CSS * fix(ResetNewRequirementButton): simplify logic * fix(VisitLinkRequirement): `isCustomName` logic * feat(ResetRequirementButton): use the new `Button` component
guildxyz · Oct 4, 2024 · 016e152 · 016e152
1 parent 6768711
commit 016e152
Show file tree

Hide file tree

Showing 86 changed files with 535 additions and 515 deletions.
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -97,11 +97,10 @@
     --alert-error: 0 78% 98%;
     --alert-error-icon: 0 84% 60%;
 
-    /* we plan to add the whole alpha color palettes */
-    --whiteAlpha-800: rgba(255, 255, 255, 0.8);
-    --blackAlpha-800: rgba(0, 0, 0, 0.8);
-    --blackAlpha-300: rgba(0, 0, 0, 0.3);
-    --blackAlpha-100: rgba(0, 0, 0, 0.1);
+    --blackAlpha-soft: rgba(0, 0, 0, 0.06);
+    --blackAlpha-medium: rgba(0, 0, 0, 0.16);
+    --blackAlpha-hard: rgba(0, 0, 0, 0.8);
+
 
     /* not sure about this approach, we should think about this one too */
     --gray: 240 3% 46%; /* gray.500 from Chakra */
@@ -127,8 +126,12 @@
     --github-active: 0 0% 15%;
 
     --farcaster: 261 55% 61%;
-    --farcaster-hover: 261 55% 55%;
-    --farcaster-active: 239 75% 50%;
+    --farcaster-hover: 261 55% 49%;
+    --farcaster-active: 261 54% 37%;
+
+    --uniswap: 331 100% 45%;
+    --uniswap-hover: 332 100% 35%;
+    --uniswap-active: 331 100% 25%;
 
     /**
      * Missing reward colors to work with the current Chakra driven solution.
@@ -247,8 +250,13 @@
     --google-active: 212 96% 78%;
     --github-hover: 0 0% 44%;
     --github-active: 0 0% 68%;
-    --farcaster-hover: 239 75% 75%;
-    --farcaster-active: 238 76% 81%;
+
+    --farcaster-hover: 261 54% 69%;
+    --farcaster-active: 262 54% 77%;
+
+    --uniswap-hover: 331 100% 55%;
+    --uniswap-active: 331 100% 65%;
+
   }
 }
 

diff --git a/src/components/[guild]/AddAndOrderRoles/components/DraggableRoleCard.tsx b/src/components/[guild]/AddAndOrderRoles/components/DraggableRoleCard.tsx
@@ -1,7 +1,7 @@
 import { HStack, Heading, Icon, Spacer } from "@chakra-ui/react"
 import { DotsSixVertical } from "@phosphor-icons/react"
 import { MemberCount } from "components/[guild]/RoleCard/components/MemberCount"
-import Visibility from "components/[guild]/Visibility"
+import { Visibility } from "components/[guild]/Visibility"
 import Card from "components/common/Card"
 import GuildLogo from "components/common/GuildLogo"
 import { Role } from "types"
@@ -34,10 +34,10 @@ const DraggableRoleCard = ({ role }: Props) => {
             className="!bg-transparent text-muted-foreground"
           />
           <Visibility
-            ml={-2}
-            mt={0.5}
             entityVisibility={role.visibility}
             visibilityRoleId={role.visibilityRoleId}
+            size="sm"
+            className="mt-1"
           />
         </HStack>
 

diff --git a/src/components/[guild]/Requirements/RoleRequirements.tsx b/src/components/[guild]/Requirements/RoleRequirements.tsx
@@ -5,10 +5,13 @@ import { Fragment } from "react"
 import { Role } from "types"
 import { LogicDivider } from "../LogicDivider"
 import useRequirements from "../hooks/useRequirements"
-import AnyOfHeader from "./components/AnyOfHeader"
+import { AnyOfHeader } from "./components/AnyOfHeader"
 import { HiddenRequirementAccessIndicator } from "./components/HiddenRequirementAccessIndicator"
-import RequirementComponent, { RequirementSkeleton } from "./components/Requirement"
-import RequirementDisplayComponent from "./components/RequirementDisplayComponent"
+import {
+  Requirement as RequirementComponent,
+  RequirementSkeleton,
+} from "./components/Requirement"
+import { RequirementDisplayComponent } from "./components/RequirementDisplayComponent"
 
 type Props = {
   role?: Role // Role can be undefined when the role is private

diff --git a/src/components/[guild]/Requirements/components/AnyOfHeader.tsx b/src/components/[guild]/Requirements/components/AnyOfHeader.tsx
@@ -1,42 +1,15 @@
-import { Box, HStack, Text, useColorModeValue } from "@chakra-ui/react"
-
 type Props = {
   anyOfNum?: number
 }
 
-const AnyOfHeader = ({ anyOfNum }: Props): JSX.Element => {
-  const borderColor = useColorModeValue("blackAlpha.400", "whiteAlpha.400")
-  const textColor = useColorModeValue("blackAlpha.500", "whiteAlpha.400")
-
-  return (
-    <HStack py={3} width="full" spacing={4}>
-      <Box
-        width="full"
-        h={4}
-        borderColor={borderColor}
-        borderTopWidth={1}
-        borderTopLeftRadius="xl"
-      />
-      <Text
-        position="relative"
-        top={-2}
-        as="span"
-        fontSize="xs"
-        fontWeight="bold"
-        color={textColor}
-        flexShrink={0}
-      >
-        {`ANY ${anyOfNum} OF`}
-      </Text>
-      <Box
-        width="full"
-        h={4}
-        borderColor={borderColor}
-        borderTopWidth={1}
-        borderTopRightRadius="xl"
-      />
-    </HStack>
-  )
-}
-
-export default AnyOfHeader
+const AnyOfHeader = ({ anyOfNum }: Props): JSX.Element => (
+  <div className="flex items-center gap-4 py-2">
+    <div className="h-4 w-full shrink rounded-tl-xl border-border-muted border-t" />
+    <div className="-top-2 relative flex min-w-max items-center justify-center font-bold text-muted-foreground/50 text-xs">
+      {`ANY ${anyOfNum} OF`}
+    </div>
+    <div className="h-4 w-full shrink rounded-tr-xl border-border-muted border-t" />
+  </div>
+)
+
+export { AnyOfHeader }
diff --git a/src/components/[guild]/Requirements/components/BlockExplorerUrl.tsx b/src/components/[guild]/Requirements/components/BlockExplorerUrl.tsx
@@ -1,5 +1,5 @@
 import { useColorMode } from "@chakra-ui/react"
-import { RequirementLinkButton } from "components/[guild]/Requirements/components/RequirementButton"
+import { RequirementLink } from "components/[guild]/Requirements/components/RequirementButton"
 import { NULL_ADDRESS } from "utils/guildCheckout/constants"
 import { CHAIN_CONFIG, Chain } from "wagmiConfig/chains"
 import { useRequirementContext } from "./RequirementContext"
@@ -35,12 +35,11 @@ const BlockExplorerUrl = ({
       : `${blockExplorerUrl}/${path}/${addressProp ?? address}`
 
   return (
-    <RequirementLinkButton
+    <RequirementLink
       href={url}
       imageUrl={CHAIN_CONFIG[chainProp ?? chain].blockExplorerIconUrl[colorMode]}
-    >
-      {label ?? "View on explorer"}
-    </RequirementLinkButton>
+      label={label ?? "View on explorer"}
+    />
   )
 }
 

diff --git a/src/components/[guild]/Requirements/components/DataBlockWithDate.tsx b/src/components/[guild]/Requirements/components/DataBlockWithDate.tsx
@@ -1,4 +1,4 @@
-import DataBlock from "components/common/DataBlock"
+import { DataBlock } from "components/common/DataBlock"
 
 type Props = {
   timestamp: number
@@ -49,4 +49,4 @@ export const BeforeAfterDates = ({
   return null
 }
 
-export default DataBlockWithDate
+export { DataBlockWithDate }
diff --git a/src/components/[guild]/Requirements/components/DataBlockWithRelativeDate.tsx b/src/components/[guild]/Requirements/components/DataBlockWithRelativeDate.tsx
@@ -1,4 +1,4 @@
-import DataBlock from "components/common/DataBlock"
+import { DataBlock } from "components/common/DataBlock"
 import formatRelativeTimeFromNow from "utils/formatRelativeTimeFromNow"
 
 type Props = {
@@ -9,4 +9,4 @@ const DataBlockWithRelativeDate = ({ timestamp }: Props): JSX.Element => (
   <DataBlock>{formatRelativeTimeFromNow(timestamp)}</DataBlock>
 )
 
-export default DataBlockWithRelativeDate
+export { DataBlockWithRelativeDate }
diff --git a/src/components/[guild]/Requirements/components/Requirement.tsx b/src/components/[guild]/Requirements/components/Requirement.tsx
@@ -1,21 +1,14 @@
-import {
-  Box,
-  HStack,
-  SimpleGrid,
-  Skeleton,
-  Stack,
-  Tag,
-  Text,
-  VStack,
-} from "@chakra-ui/react"
-import Visibility from "components/[guild]/Visibility"
+import { Badge } from "@/components/ui/Badge"
+import { Skeleton } from "@/components/ui/Skeleton"
+import { Visibility } from "components/[guild]/Visibility"
 import dynamic from "next/dynamic"
 import React, { ComponentType, PropsWithChildren } from "react"
 import { useFormContext } from "react-hook-form"
 import { useRequirementContext } from "./RequirementContext"
 import { RequirementImage, RequirementImageCircle } from "./RequirementImage"
-import ResetRequirementButton from "./ResetRequirementButton"
-import ViewOriginalPopover from "./ViewOriginalPopover"
+import { ResetRequirementButton } from "./ResetRequirementButton"
+import { ViewOriginalPopover } from "./ViewOriginalPopover"
+
 const DataProviderRequirement = dynamic(() => import("./DataProviderRequirement"))
 
 export type RequirementProps = PropsWithChildren<{
@@ -50,71 +43,58 @@ const Requirement = ({
       />
     )
 
-  const ChildrenWrapper = childrenWrapper ?? Box
+  const ChildrenWrapper = childrenWrapper ?? "div"
   const ImageWrapper = imageWrapper ?? React.Fragment
 
   return (
-    <SimpleGrid
-      spacing={4}
-      w="full"
-      py={2}
-      templateColumns={`auto 1fr ${rightElement ? "auto" : ""}`}
-      alignItems="center"
-    >
-      <Box mt="3px" alignSelf={"start"}>
-        <RequirementImageCircle isImageLoading={isImageLoading}>
-          <ImageWrapper>
-            <RequirementImage image={requirement?.data?.customImage || image} />
-          </ImageWrapper>
-        </RequirementImageCircle>
-      </Box>
-      <VStack alignItems={"flex-start"} alignSelf="center" spacing={0.5}>
-        <ChildrenWrapper display="inline-block">
-          {requirement?.isNegated && <Tag mr="2">DON'T</Tag>}
+    <div className="flex w-full items-center gap-4 py-2">
+      <RequirementImageCircle isImageLoading={isImageLoading}>
+        <ImageWrapper>
+          <RequirementImage image={requirement?.data?.customImage || image} />
+        </ImageWrapper>
+      </RequirementImageCircle>
+
+      <div className="flex flex-grow flex-col items-start">
+        <ChildrenWrapper className="inline-block w-full">
+          {requirement?.isNegated && <Badge className="mr-2">DON'T</Badge>}
           {requirement?.type === "LINK_VISIT"
             ? children
             : requirement?.data?.customName || children}
-          {!setValue ? (
+        </ChildrenWrapper>
+
+        <div className="flex flex-wrap items-center gap-2 has-[>*]:mt-1">
+          {!setValue && (
             <Visibility
               visibilityRoleId={requirement?.visibilityRoleId || null}
               entityVisibility={requirement?.visibility ?? "PUBLIC"}
-              ml="1"
+              size="sm"
             />
-          ) : null}
-        </ChildrenWrapper>
-
-        <HStack wrap={"wrap"}>
+          )}
+          {footer}
           {showViewOriginal && (
             <ViewOriginalPopover>
-              <HStack p={3} gap={4}>
+              <div className="flex items-center gap-4">
                 <RequirementImageCircle isImageLoading={isImageLoading}>
                   <RequirementImage image={image} />
                 </RequirementImageCircle>
-                <Stack
-                  direction={{ base: "column", md: "row" }}
-                  alignItems={{ base: "flex-start", md: "center" }}
-                  spacing={{ base: 2, md: 5 }}
-                >
-                  <Text wordBreak="break-word" flexGrow={1}>
-                    {children}
-                  </Text>
+                <div className="flex flex-col items-start gap-2 sm:flex-row sm:items-center sm:gap-4">
+                  <p className="break-words">{children}</p>
                   {!!setValue && <ResetRequirementButton />}
-                </Stack>
-              </HStack>
+                </div>
+              </div>
             </ViewOriginalPopover>
           )}
-          {footer}
-        </HStack>
-      </VStack>
+        </div>
+      </div>
       {rightElement}
-    </SimpleGrid>
+    </div>
   )
 }
 
 export const RequirementSkeleton = () => (
   <Requirement isImageLoading={true}>
-    <Skeleton as="span">Loading requirement...</Skeleton>
+    <Skeleton className="h-4 max-w-[75%]" />
   </Requirement>
 )
 
-export default Requirement
+export { Requirement }
diff --git a/src/components/[guild]/Requirements/components/RequirementAccessIndicatorUI.tsx b/src/components/[guild]/Requirements/components/RequirementAccessIndicatorUI.tsx
@@ -31,7 +31,7 @@ const RequirementAccessIndicatorUI = ({
   const [openCount, setOpenCount] = useState(0)
 
   return (
-    <div className="flex items-center justify-center pl-6">
+    <div className="flex size-7 items-center justify-end">
       <Tooltip
         // just an easter egg appreciating the cool morphing animation we have
         onOpenChange={(open) => {