Merge branch 'dev' into TranslationLeaderboard

Author: pettinarip

src/components/ActionCard.tsx

@@ -1,33 +1,18 @@
 import { StaticImageData } from "next/image"
-import type { ReactNode } from "react"
-import {
-  Box,
-  type BoxProps,
-  Flex,
-  Heading,
-  LinkBox,
-  type LinkBoxProps,
-  LinkOverlay,
-  useColorModeValue,
-} from "@chakra-ui/react"
+import type { BaseHTMLAttributes, ElementType, ReactNode } from "react"
 
-import { Image } from "@/components/Image"
-import { BaseLink } from "@/components/Link"
-import Text from "@/components/OldText"
+import { TwImage } from "@/components/Image"
+import InlineLink from "@/components/ui/Link"
+import { LinkBox, LinkOverlay } from "@/components/ui/link-box"
 
-const linkBoxFocusStyles: BoxProps = {
-  borderRadius: "base",
-  boxShadow: "0px 8px 17px rgba(0, 0, 0, 0.15)",
-  bg: "tableBackgroundHover",
-  transition: "transform 0.1s",
-  transform: "scale(1.02)",
-}
-
-const linkFocusStyles: BoxProps = {
-  textDecoration: "none",
-}
+import { cn } from "@/lib/utils/cn"
 
-export type ActionCardProps = Omit<LinkBoxProps, "title"> & {
+import { Flex } from "./ui/flex"
+export type ActionCardProps = Omit<
+  BaseHTMLAttributes<HTMLDivElement>,
+  "title"
+> & {
+  as?: ElementType
   children?: ReactNode
   href: string
   alt?: string
@@ -53,64 +38,43 @@ const ActionCard = ({
   isBottom = true,
   ...props
 }: ActionCardProps) => {
-  const descriptionColor = useColorModeValue("blackAlpha.700", "whiteAlpha.800")
-
   return (
     <LinkBox
-      boxShadow="
-	  0px 14px 66px rgba(0, 0, 0, 0.07),
-    0px 10px 17px rgba(0, 0, 0, 0.03), 0px 4px 7px rgba(0, 0, 0, 0.05)"
-      color="text"
-      flex="1 1 372px"
-      _hover={linkBoxFocusStyles}
-      _focus={linkBoxFocusStyles}
-      className={className}
-      m={4}
+      className={cn(
+        "flex shadow-table hover:scale-[1.02] hover:rounded hover:bg-background-highlight hover:shadow-table-box-hover hover:duration-100 focus:scale-[1.02] focus:rounded focus:shadow-table-box-hover focus:duration-100",
+        className
+      )}
       {...props}
     >
       <Flex
-        h="260px"
-        bg="cardGradient"
-        direction="row"
-        justify={isRight ? "flex-end" : "center"}
-        align={isBottom ? "flex-end" : "center"}
-        className="action-card-image-wrapper"
-        boxShadow="inset 0px -1px 0px rgba(0, 0, 0, 0.1)"
+        className={cn(
+          "flex h-[260px] flex-row bg-gradient-to-r from-accent-a/10 to-accent-c/10",
+          isBottom ? "items-end" : "items-center",
+          isRight ? "justify-end" : "justify-center"
+        )}
       >
-        <Image
+        <TwImage
           src={image}
-          width={imageWidth}
-          maxH="full"
           alt={alt || ""}
-          style={{ objectFit: "cover" }}
+          width={imageWidth}
+          className="max-h-full object-cover p-4"
         />
       </Flex>
-      <Box p={6} className="action-card-content">
-        <Heading
-          as="h3"
-          fontSize="2xl"
-          mt={2}
-          mb={4}
-          fontWeight={600}
-          lineHeight={1.4}
-        >
-          <LinkOverlay
-            as={BaseLink}
-            color="text"
-            hideArrow
-            textDecoration="none"
-            href={href}
-            _hover={linkFocusStyles}
-            _focus={linkFocusStyles}
-          >
-            {title}
+      <div className="flex flex-col justify-center p-6">
+        <h3 className="mb-4 mt-2 text-2xl font-semibold leading-snug">
+          <LinkOverlay asChild>
+            <InlineLink
+              href={href}
+              hideArrow
+              className="text-body no-underline"
+            >
+              {title}
+            </InlineLink>
           </LinkOverlay>
-        </Heading>
-        <Text mb={0} color={descriptionColor}>
-          {description}
-        </Text>
-        {children && <Box mt={8}>{children}</Box>}
-      </Box>
+        </h3>
+        <p className={"mb-0 text-body/65"}>{description}</p>
+        {children && <div className="mt-8">{children}</div>}
+      </div>
     </LinkBox>
   )
 }

src/components/FileContributors.tsx

@@ -12,12 +12,15 @@ import type { ChildOnlyProp, FileContributor } from "@/lib/types"
 
 import { Button } from "@/components/Buttons"
 import InlineLink from "@/components/Link"
-import Modal from "@/components/Modal"
 import Text from "@/components/OldText"
 import Translation from "@/components/Translation"
 
 import { trackCustomEvent } from "@/lib/utils/matomo"
 
+import Modal from "./ui/dialog-modal"
+
+import { useBreakpointValue } from "@/hooks/useBreakpointValue"
+
 const ContributorList = ({ children }: Required<ChildOnlyProp>) => (
   <UnorderedList maxH="2xs" m={0} mt={6} overflowY="scroll">
     {children}
@@ -61,12 +64,14 @@ const FileContributors = ({
         date: Date.now().toString(),
       } as FileContributor)
 
+  const modalSize = useBreakpointValue({ base: "xl", md: "md" } as const)
+
   return (
     <>
       <Modal
-        isOpen={isModalOpen}
-        onClose={() => setModalOpen(false)}
-        size={{ base: "full", md: "xl" }}
+        open={isModalOpen}
+        onOpenChange={(open) => setModalOpen(open)}
+        size={modalSize}
         title={<Translation id="contributors" />}
       >
         <Translation id="contributors-thanks" />

src/components/HorizontalCard.tsx

@@ -1,35 +1,37 @@
 import React, { ReactNode } from "react"
-import { Box, Flex, FlexProps } from "@chakra-ui/react"
 
 import { cn } from "@/lib/utils/cn"
 
 import Emoji from "./Emoji"
-import Text from "./OldText"
 
-export type HorizontalCardProps = Omit<FlexProps, "title"> & {
+export interface HorizontalCardProps
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
   emoji: string
+  emojiClassName?: string
   title?: ReactNode
   description: ReactNode
+  children?: ReactNode
 }
 
 const HorizontalCard = ({
   emoji,
+  emojiClassName,
   title,
   description,
   children,
   className,
-  ...rest
-}: HorizontalCardProps) => (
-  <Flex borderRadius="base" {...rest}>
-    <Emoji className={cn("text-5xl", className)} text={emoji} />
-    <Box flexGrow="0" flexShrink="1" flexBasis="75%" ms="8">
-      <Text fontSize="lg">{title}</Text>
-      <Text mt="-4" mb="2">
-        {description}
-      </Text>
-      <>{children}</>
-    </Box>
-  </Flex>
-)
+  ...props
+}: HorizontalCardProps) => {
+  return (
+    <div className={cn("flex items-center gap-8", className)} {...props}>
+      <Emoji text={emoji} className={cn("text-5xl", emojiClassName)} />
+      <div className="flex-shrink flex-grow-0 basis-3/4 space-y-2">
+        <p className="text-lg">{title}</p>
+        <p>{description}</p>
+        {children}
+      </div>
+    </div>
+  )
+}
 
 export default HorizontalCard

src/components/Layer2ProductCard.tsx

@@ -1,12 +1,11 @@
-// Libraries
 import { StaticImageData } from "next/image"
 import { useTranslation } from "next-i18next"
-import { Box, Center, Flex, Heading } from "@chakra-ui/react"
 
-import { ButtonLink } from "@/components/Buttons"
-import { Image } from "@/components/Image"
-import InlineLink from "@/components/Link"
-import Text from "@/components/OldText"
+import { Card, CardContent, CardFooter, CardHeader } from "@/components/ui/card"
+
+import { ButtonLink } from "./ui/buttons/Button"
+import InlineLink from "./ui/Link"
+import { TwImage } from "./Image"
 
 export type Layer2ProductCardProps = {
   children?: React.ReactNode
@@ -38,72 +37,75 @@ const Layer2ProductCard = ({
   const { t } = useTranslation("page-layer-2")
 
   return (
-    <Flex
-      color="text"
-      boxShadow={"0px 14px 66px rgba(0, 0, 0, 0.07)"}
-      direction="column"
-      justify="space-between"
-      bg="searchBackground"
-      borderRadius="base"
-      border={"1px solid lightBorder"}
-      textDecoration="none"
-      padding={2}
-      _hover={{ transition: "transform 0.1s", transform: "scale(1.02)" }}
-    >
-      <Center
-        bg={background}
-        boxShadow="inset 0px -1px 0px rgba(0, 0, 0, 0.1)"
-        minH="200px"
+    <Card className="flex flex-col justify-between rounded-md border-0 bg-background-highlight p-2 shadow-lg transition-transform duration-100 hover:scale-[1.02]">
+      <div
+        className="mb-4 flex min-h-[200px] items-center justify-center border-b"
+        style={{ backgroundColor: background }}
       >
-        <Image
+        <TwImage
           src={image}
           alt={alt}
           width={100}
-          maxH={"257px"}
-          style={{ objectFit: "contain" }}
+          className="max-h-[257px] object-cover"
         />
-      </Center>
-      <Flex p={6} h="100%" direction="column">
-        <Box>
-          <Heading as="h3" fontSize={{ base: "xl", md: "2xl" }} mb={3}>
-            {name}
-          </Heading>
-          {children && (
-            <Box mt={4} mb={4}>
-              {children}
-            </Box>
-          )}
-          <Text fontSize="sm" mb={2} lineHeight="140%">
-            {description}
-          </Text>
-          {note.length > 0 && (
-            <Text fontSize="sm" mb={2} lineHeight="140%">
+      </div>
+
+      <CardHeader className="py-0">
+        <div className="space-y-4">
+          <h3 className="mb-3 text-xl font-semibold md:text-2xl">{name}</h3>
+          {children && <div>{children}</div>}
+        </div>
+      </CardHeader>
+
+      <CardContent className="flex flex-grow flex-col gap-0 space-y-1 px-6 py-4">
+        <div className="space-y-2">
+          <p className="text-sm leading-snug">{description}</p>
+
+          {note && (
+            <p className="text-sm leading-snug">
               {t("layer-2-note")} {note}
-            </Text>
+            </p>
           )}
-        </Box>
-        {bridge && (
-          <InlineLink href={bridge}>
-            {name} {t("layer-2-bridge")}
-          </InlineLink>
-        )}
-        {ecosystemPortal && (
-          <InlineLink href={ecosystemPortal}>
-            {name} {t("layer-2-ecosystem-portal")}
-          </InlineLink>
-        )}
-        {tokenLists && (
-          <InlineLink href={tokenLists}>
-            {name} {t("layer-2-token-lists")}
-          </InlineLink>
+        </div>
+
+        <div className="space-y-1">
+          {bridge && (
+            <InlineLink
+              href={bridge}
+              className="block text-primary underline hover:text-primary/80"
+            >
+              {name} {t("layer-2-bridge")}
+            </InlineLink>
+          )}
+
+          {ecosystemPortal && (
+            <InlineLink
+              href={ecosystemPortal}
+              className="block text-primary underline hover:text-primary/80"
+            >
+              {name} {t("layer-2-ecosystem-portal")}
+            </InlineLink>
+          )}
+
+          {tokenLists && (
+            <InlineLink
+              href={tokenLists}
+              className="block text-primary underline hover:text-primary/80"
+            >
+              {name} {t("layer-2-token-lists")}
+            </InlineLink>
+          )}
+        </div>
+      </CardContent>
+
+      <CardFooter className="mt-2 p-2">
+        {url && (
+          <ButtonLink className="w-full" href={url}>
+            {t("layer-2-explore")} {name}
+          </ButtonLink>
         )}
-      </Flex>
-      <Box>
-        <ButtonLink m={2} href={url} display="flex">
-          {t("layer-2-explore")} {name}
-        </ButtonLink>
-      </Box>
-    </Flex>
+      </CardFooter>
+    </Card>
   )
 }