Merge branch 'dev' into Shadcn_Migrate_Leaderboard.tsx

Author: pettinarip

src/components/BoxGrid.tsx

@@ -1,12 +1,10 @@
 import React, { useState } from "react"
-import { Box, Flex, GridItem, SimpleGrid } from "@chakra-ui/react"
 
 import { cn } from "@/lib/utils/cn"
 import { MatomoEventOptions, trackCustomEvent } from "@/lib/utils/matomo"
 
+import { Flex } from "./ui/flex"
 import Emoji from "./Emoji"
-import OldHeading from "./OldHeading"
-import Text from "./OldText"
 
 export interface BoxItem {
   emoji: string
@@ -32,54 +30,33 @@ const hashCode = (stringPhrase: string): number => {
 
 // Theme variables from Theme.js
 const colors = [
-  "gridYellow",
-  "gridRed",
-  "gridBlue",
-  "gridGreen",
-  "warning",
-  "gridPink",
-  "gridPurple",
+  "bg-[#ffe78e]",
+  "bg-[#ef7d7d]",
+  "bg-[#a7d0f4]",
+  "bg-[#6fc4a0]",
+  "bg-[#ffe3d3]",
+  "bg-[#ffa1c3]",
+  "bg-[#a4a4ff]",
 ]
 
 const BoxGrid = ({ items }: BoxGridProps) => {
   const [indexOpen, setOpenIndex] = useState(0)
 
   return (
-    <SimpleGrid columns={{ base: 1, lg: 4 }} my={16} borderRadius="sm">
+    <div className="my-16 grid grid-cols-1 rounded-sm lg:grid-cols-4">
       {items.map((item, idx: number) => {
-        let columnNumber = idx + 1
-        if (columnNumber > 4) {
-          columnNumber = columnNumber - 3
-        }
         const colorIdx = hashCode(item.emoji) % colors.length
         const color = colors[colorIdx]
         const isOpen = idx === indexOpen
 
         return (
-          <GridItem
-            as={Flex}
-            rowStart={{ ...(isOpen && { lg: 1 }) }}
-            rowEnd={{ ...(isOpen && { lg: 3 }) }}
-            colStart={{ ...(isOpen && { lg: columnNumber }) }}
-            color={isOpen ? "black300" : "text"}
-            cursor="pointer"
-            bg={isOpen ? color : "background.base"}
-            direction={{
-              base: isOpen ? "column" : "column-reverse",
-              sm: isOpen ? "column" : "row-reverse",
-              lg: isOpen ? "column" : "column-reverse",
-            }}
-            align={{ base: "center", lg: "stretch" }}
-            justify="space-between"
-            border="1px solid"
-            borderColor="text"
-            p={6}
-            _hover={{
-              bg: isOpen ? color : "ednBackground",
-              transition: "transform 0.5s",
-              transform: "skewX(-5deg)",
-              boxShadow: "tableBoxShadow",
-            }}
+          <Flex
+            className={cn(
+              "cursor-pointer items-center justify-between border border-body p-6 transition-transform duration-500 hover:-skew-x-6 hover:shadow-table-box-hover lg:items-stretch",
+              isOpen
+                ? `flex-col text-gray-600 sm:flex-col lg:row-start-1 lg:row-end-3 lg:flex-col ${color}`
+                : "flex-col-reverse bg-background text-body hover:bg-background-highlight sm:flex-row-reverse lg:flex-col-reverse"
+            )}
             onClick={() => {
               setOpenIndex(idx)
               trackCustomEvent({
@@ -99,26 +76,20 @@ const BoxGrid = ({ items }: BoxGridProps) => {
               )}
               text={item.emoji}
             />
-            <Box>
-              <OldHeading
-                as="h3"
-                fontSize="2.5rem"
-                fontWeight="normal"
-                mt={0}
-                lineHeight={1.4}
-              >
+            <div>
+              <h3 className="mb-8 mt-0 text-[2.5rem] font-normal leading-xs">
                 {item.title}
-              </OldHeading>
+              </h3>
               {isOpen && (
-                <Text fontSize="xl" lineHeight={1.4} color="black300">
+                <p className="mb-6 text-xl leading-xs text-gray-600">
                   {item.description}
-                </Text>
+                </p>
               )}
-            </Box>
-          </GridItem>
+            </div>
+          </Flex>
         )
       })}
-    </SimpleGrid>
+    </div>
   )
 }
 

src/components/CallToContribute/index.tsx

@@ -1,65 +1,36 @@
-import React, { ReactNode } from "react"
+import React from "react"
 import { FaGithub } from "react-icons/fa"
-import { Flex, FlexProps, Icon } from "@chakra-ui/react"
 
 import { ChildOnlyProp } from "@/lib/types"
 
-import { ButtonLink } from "@/components/Buttons"
-import InlineLink from "@/components/Link"
-import OldHeading from "@/components/OldHeading"
-import Text from "@/components/OldText"
 import Translation from "@/components/Translation"
 
+import { ButtonLink } from "../ui/buttons/Button"
+import { Flex } from "../ui/flex"
+import InlineLink from "../ui/Link"
+
 export type CallToContributeProps = {
   editPath: string
 }
 
-const ContentColumn = (props: {
-  children: ReactNode
-  hideBelow?: FlexProps["hideBelow"]
-}) => (
+const ContentColumn = (props: ChildOnlyProp) => (
   <Flex
-    direction="column"
-    flexGrow={1}
-    flexShrink={1}
-    flexBasis="50%"
-    p={4}
-    color="text"
-    textAlign={{ base: "center", lg: "start" }}
+    className="flex-1 basis-1/2 flex-col p-4 text-body lg:text-start"
     {...props}
   />
 )
 
 const DescriptionParagraph = ({ children }: ChildOnlyProp) => (
-  <Text lineHeight="140%" color="text" fontFamily="monospace">
-    {children}
-  </Text>
+  <p className="mb-6 font-monospace leading-xs text-body">{children}</p>
 )
 
 const CallToContribute = ({ editPath }: CallToContributeProps) => {
   return (
-    <Flex
-      as="aside"
-      bg="ednBackground"
-      align="center"
-      mt={8}
-      border="1px"
-      borderColor="primary.base"
-      borderRadius="base"
-      boxShadow="inset 0 -2px 0 0 var(--eth-colors-primary400)"
-    >
+    <aside className="mt-8 items-center rounded-md border border-b-4 border-primary bg-background-highlight">
       <ContentColumn>
-        <OldHeading
-          as="h2"
-          fontFamily="monospace"
-          textTransform="uppercase"
-          p={1}
-          fontSize="2rem"
-          lineHeight={1.4}
-          mt={0}
-        >
+        <h2 className="mb-8 mt-0 p-1 font-monospace uppercase leading-xs">
           <Translation id="page-developers-docs:page-calltocontribute-title" />
-        </OldHeading>
+        </h2>
         <DescriptionParagraph>
           <Translation id="page-developers-docs:page-calltocontribute-desc-1" />
         </DescriptionParagraph>
@@ -78,22 +49,12 @@ const CallToContribute = ({ editPath }: CallToContributeProps) => {
             <Translation id="page-developers-docs:page-calltocontribute-link-2" />
           </InlineLink>{" "}
         </DescriptionParagraph>
-        <ButtonLink
-          href={editPath}
-          leftIcon={
-            <Icon
-              fill="background.base"
-              w={6}
-              h={6}
-              as={FaGithub}
-              name="github"
-            />
-          }
-        >
+        <ButtonLink href={editPath}>
+          <FaGithub className="h-6 w-6" />
           <Translation id="page-developers-docs:page-calltocontribute-span" />
         </ButtonLink>
       </ContentColumn>
-    </Flex>
+    </aside>
   )
 }
 

src/components/FileContributors.tsx

@@ -1,5 +1,4 @@
 import { BaseHTMLAttributes, useState } from "react"
-import { Avatar } from "@chakra-ui/react"
 
 import type { ChildOnlyProp, FileContributor } from "@/lib/types"
 
@@ -12,6 +11,7 @@ import { ScrollArea } from "@/components/ui/scroll-area"
 
 import { trackCustomEvent } from "@/lib/utils/matomo"
 
+import { Avatar } from "./ui/avatar"
 import Modal from "./ui/dialog-modal"
 
 import { useBreakpointValue } from "@/hooks/useBreakpointValue"
@@ -22,19 +22,27 @@ const ContributorList = ({ children }: Required<ChildOnlyProp>) => (
   </ScrollArea>
 )
 
+const ContributorAvatar = ({
+  contributor,
+  label,
+}: ContributorProps & { label?: string }) => (
+  <Avatar
+    src={contributor.avatar_url}
+    name={contributor.login}
+    href={`https://github.com/${contributor.login}`}
+    // `size-10` is not part of the "size" variants
+    className="me-2 size-10"
+    label={label}
+  />
+)
+
 type ContributorProps = { contributor: FileContributor }
 const Contributor = ({ contributor }: ContributorProps) => (
   <ListItem className="flex items-center p-2">
-    <Avatar
-      height="40px"
-      width="40px"
-      src={contributor.avatar_url}
-      name={contributor.login}
-      me={2}
+    <ContributorAvatar
+      contributor={contributor}
+      label={"@" + contributor.login}
     />
-    <InlineLink href={"https://github.com/" + contributor.login}>
-      @{contributor.login}
-    </InlineLink>
   </ListItem>
 )
 
@@ -84,13 +92,7 @@ const FileContributors = ({
 
       <Flex className="flex-col p-0 md:flex-row md:p-2" {...props}>
         <Flex className="invisible me-4 flex-1 items-center md:visible md:flex">
-          <Avatar
-            height="40px"
-            width="40px"
-            src={lastContributor.avatar_url}
-            name={lastContributor.login}
-            me={2}
-          />
+          <ContributorAvatar contributor={lastContributor} />
 
           <p className="m-0 text-body-medium">
             <Translation id="last-edit" />:{" "}

src/components/IssuesList/index.tsx

@@ -1,6 +1,5 @@
 import Emoji from "react-emoji-render"
 import {
-  Avatar,
   Flex,
   HStack,
   SimpleGrid,
@@ -13,6 +12,7 @@ import type { GHIssue } from "@/lib/types"
 
 import InlineLink from "../Link"
 import Tag from "../Tag"
+import { Avatar } from "../ui/avatar"
 
 type IssuesListProps = SimpleGridProps & {
   issues: GHIssue[]
@@ -35,8 +35,8 @@ const IssuesList = ({ issues, ...props }: IssuesListProps) => {
               <Avatar
                 name={issue.user.login}
                 src={issue.user.avatar_url}
-                w="32px"
-                h="32px"
+                size="sm"
+                href={`https://github.com/${issue.user.login}`}
               />
               <Text size="sm">by {issue.user.login}</Text>
             </HStack>

src/components/Leaderboard.tsx

@@ -57,10 +57,12 @@ const Leaderboard = ({ content, limit = 100 }: LeaderboardProps) => {
               >
                 <div className="me-4 opacity-40">{idx + 1}</div>
                 <Avatar
-                  className="me-4 flex h-10 w-10 flex-wrap sm:block"
-                  href={avatarImg}
                   src={avatarImg}
                   name={avatarAlt}
+                  // This meets the Design System requirement, despite the leaderboard item itself being a link
+                  href={hasGitHub ? `${GITHUB_URL}${username}` : "#"}
+                  // `size-10` is not part of a "size" variant
+                  className="me-4 size-10"
                 />
                 <Flex className="me-8 flex-1 basis-3/4 flex-col">
                   <LinkOverlay

src/components/Roadmap/RoadmapActionCard/index.tsx

@@ -1,14 +1,8 @@
-import {
-  Center,
-  Flex,
-  Heading,
-  LinkBox,
-  LinkOverlay,
-  Text,
-} from "@chakra-ui/react"
-
 import { ButtonLink } from "@/components/Buttons"
-import { Image } from "@/components/Image"
+import { TwImage } from "@/components/Image"
+import { Center, Flex } from "@/components/ui/flex"
+import { LinkBox } from "@/components/ui/link-box"
+import { LinkOverlay } from "@/components/ui/link-box"
 
 import futureProofing from "@/public/images/roadmap/roadmap-future.png"
 import security from "@/public/images/roadmap/roadmap-security.png"
@@ -41,22 +35,15 @@ const RoadmapActionCard = ({
   const imgSrc = images[image] ?? images.futureProofing
 
   return (
-    <LinkBox
-      as={Flex}
-      direction="column"
-      border="1px solid"
-      borderColor="lightBorder"
-    >
-      <Center background="cardGradient" h="260px">
-        <Image src={imgSrc} alt={alt} style={{ objectFit: "contain" }} />
+    <LinkBox className="flex flex-col border">
+      <Center className="h-[260px] bg-gradient-main">
+        <TwImage src={imgSrc} alt={alt} style={{ objectFit: "contain" }} />
       </Center>
-      <Flex p={6} flex="1" flexDir="column" justify="space-between" gap={4}>
-        <Heading as="h3" size="md">
-          {title}
-        </Heading>
-        <Text flex="1">{description}</Text>
-        <LinkOverlay as={ButtonLink} href={href}>
-          {buttonText}
+      <Flex className="flex-1 flex-col justify-between gap-4 p-6">
+        <h3 className="text-2xl">{title}</h3>
+        <p className="flex-1">{description}</p>
+        <LinkOverlay asChild>
+          <ButtonLink href={href}>{buttonText}</ButtonLink>
         </LinkOverlay>
       </Flex>
     </LinkBox>

src/components/ui/avatar.tsx

@@ -12,8 +12,8 @@ import { LinkBox, LinkOverlay } from "./link-box"
 const avatarStyles = tv({
   slots: {
     container:
-      "relative shrink-0 flex overflow-hidden rounded-full focus:outline-4 focus:-outline-offset-1 focus:rounded-full active:shadow-none [&_img]:hover:opacity-70 border border-transparent active:border-primary-hover justify-center items-center",
-    fallback: "bg-body text-body-inverse",
+      "relative shrink-0 overflow-hidden rounded-full focus:outline-4 focus:-outline-offset-1 focus:rounded-full active:shadow-none [&_img]:hover:opacity-70 border border-transparent active:border-primary-hover ",
+    fallback: "bg-body text-body-inverse flex justify-center items-center",
   },
   variants: {
     size: {
@@ -126,7 +126,7 @@ const Avatar = React.forwardRef<
     href,
     src,
     name,
-    size,
+    size = "md",
     label,
     className,
     direction = "row",