feat(RoleCard): simplify height logic & migrate to shadcn/ui (#1513)

* feat: migrate `RoleRequirements` & simplify `RoleCard` height logic

* feat(`LogicDivider`): migrate to Tailwind CSS

* feat: implement collapsible description, simplify requirements height logic

* feat(RoleHeader): use Tailwind CSS

* fix(RoleRequirements): dynamic flex basis

* feat(RoleRequirementsSection): use Tailwind CSS

* feat(RoleRequirementsSectionHeader): use Tailwind CSS

* feat(RoleCard): use Tailwind CSS

* fix(RoleDescription): use simple CSS transition for height animation

* fix: requirements skeleton loaders

* fix(RequirementAccessIndicatorUI): render tooltip in a portal

* fix(AccessIndicator): proper styles on sm breakpoint

* fix(RoleDescription): set initial max height

* fix(RoleCard): leave the role opened by default

* fix(RoleDescription): add `transition-all` class

package.json

@@ -126,7 +126,6 @@
     "uuidv7": "^0.6.3",
     "viem": "^2.21.1",
     "wagmi": "^2.12.8",
-    "wicg-inert": "^3.1.2",
     "zod": "^3.22.4"
   },
   "devDependencies": {

src/app/globals.css

@@ -263,6 +263,48 @@
 }
 
 @layer utilities {
+  .scroll-shadow {
+    --scroll-shadow-bg: hsl(var(--card-secondary));
+    --scroll-shadow-from: rgba(0, 0, 0, 0.1);
+    --scroll-shadow-to: rgba(0, 0, 0, 0);
+
+    background:
+    /* Shadow Cover TOP */
+    linear-gradient(
+      var(--scroll-shadow-bg) 30%,
+      rgba(255, 255, 255, 0)
+    ) center top,
+
+    /* Shadow Cover BOTTOM */
+    linear-gradient(
+      rgba(255, 255, 255, 0), 
+      var(--scroll-shadow-bg) 70%
+    ) center bottom,
+
+    /* Shadow TOP */
+    linear-gradient(
+      to bottom,
+      var(--scroll-shadow-from),
+      var(--scroll-shadow-to)
+    ) center top,
+
+    /* Shadow BOTTOM */
+    linear-gradient(
+      to top,
+      var(--scroll-shadow-from),
+      var(--scroll-shadow-to)
+    ) center bottom;
+
+  background-repeat: no-repeat;
+  background-size: 100% 2.5rem, 100% 2.5rem, 100% 1rem, 100% 1rem;
+  background-attachment: local, local, scroll, scroll;
+  }
+
+  [data-theme="dark"] .scroll-shadow {
+    --scroll-shadow-from: rgba(0, 0, 0, 0.25);
+    --scroll-shadow-to: rgba(0, 0, 0, 0);
+  }
+
   .custom-scrollbar::-webkit-scrollbar,
   .custom-menu-list > div::-webkit-scrollbar {
     width: 8px;

src/components/[guild]/LogicDivider.tsx

@@ -1,40 +1,23 @@
-import { Divider, Flex, HStack, useColorMode } from "@chakra-ui/react"
+import { Separator } from "@/components/ui/Separator"
+import { cn } from "@/lib/utils"
 import { Logic } from "@guildxyz/types"
-import { Rest } from "types"
-
-type Props = { logic: Logic } & Rest
+type Props = { logic: Logic; className?: string }
 
 export const formattedLogic: Record<Logic, string> = {
   AND: "AND",
   OR: "OR",
   ANY_OF: "OR",
 }
 
-const LogicDivider = ({ logic, ...rest }: Props): JSX.Element => {
-  const { colorMode } = useColorMode()
-
-  return (
-    <HStack py={3} width="full" {...rest} spacing={4}>
-      <Divider
-        width="full"
-        borderColor={colorMode === "light" ? "blackAlpha.400" : "whiteAlpha.400"}
-      />
-      <Flex
-        alignItems="center"
-        justifyContent="center"
-        fontSize="xs"
-        fontWeight="bold"
-        color={colorMode === "light" ? "blackAlpha.500" : "whiteAlpha.400"}
-        flexShrink={0}
-      >
-        {formattedLogic[logic]}
-      </Flex>
-      <Divider
-        width="full"
-        borderColor={colorMode === "light" ? "blackAlpha.400" : "whiteAlpha.400"}
-      />
-    </HStack>
-  )
-}
+const LogicDivider = ({ logic, className }: Props): JSX.Element => (
+  <div className={cn("flex items-center gap-4 py-2", className)}>
+    <Separator variant="muted" className="shrink" />
+    {/* TODO: Not sure if this custom text color is a good practice or not, we should think about it */}
+    <div className="flex items-center justify-center font-bold text-muted-foreground/50 text-xs">
+      {formattedLogic[logic]}
+    </div>
+    <Separator variant="muted" className="shrink" />
+  </div>
+)
 
-export default LogicDivider
+export { LogicDivider }