feat: re-design categories list on homepage

webapp/CHANGELOG.md

@@ -1,22 +1,19 @@
 # [0.60.0](https://github.com/SocialGouv/carte-jeune-engage/compare/v0.59.3...v0.60.0) (2024-11-11)
 
-
 ### Bug Fixes
 
-* image in offer obiz page ([9c652ef](https://github.com/SocialGouv/carte-jeune-engage/commit/9c652ef81a07d944de12740211510afac0673297))
-
+- image in offer obiz page ([9c652ef](https://github.com/SocialGouv/carte-jeune-engage/commit/9c652ef81a07d944de12740211510afac0673297))
 
 ### Features
 
-* sort in tags & categories by offer obiz first ([c0c1980](https://github.com/SocialGouv/carte-jeune-engage/commit/c0c19804d1ca17c8dbbd7546635c238c36c6c61f))
+- sort in tags & categories by offer obiz first ([c0c1980](https://github.com/SocialGouv/carte-jeune-engage/commit/c0c19804d1ca17c8dbbd7546635c238c36c6c61f))
 
 ## [0.59.3](https://github.com/SocialGouv/carte-jeune-engage/compare/v0.59.2...v0.59.3) (2024-11-11)
 
-
 ### Bug Fixes
 
-* cards obiz offer partner image display ([b8af2bc](https://github.com/SocialGouv/carte-jeune-engage/commit/b8af2bcce1f4986586edcd2f44142b8a5aae6fbf))
-* phone number login-widget to number field ([5187a3f](https://github.com/SocialGouv/carte-jeune-engage/commit/5187a3f96394c30c476399312e7a4f555506ee2d))
+- cards obiz offer partner image display ([b8af2bc](https://github.com/SocialGouv/carte-jeune-engage/commit/b8af2bcce1f4986586edcd2f44142b8a5aae6fbf))
+- phone number login-widget to number field ([5187a3f](https://github.com/SocialGouv/carte-jeune-engage/commit/5187a3f96394c30c476399312e7a4f555506ee2d))
 
 ## [0.59.2](https://github.com/SocialGouv/carte-jeune-engage/compare/v0.59.1...v0.59.2) (2024-11-11)
 

webapp/src/components/SearchBar.tsx

@@ -33,7 +33,7 @@ export default function SearchBar({
   return (
     <InputGroup
       alignItems="center"
-      background={"cje-gray.500"}
+      background="bgGray"
       borderRadius={"1.125rem"}
       padding={small ? "0.6rem 0.5rem" : "1rem 0.5rem"}
     >

webapp/src/components/lists/CategoriesList.tsx

@@ -1,4 +1,11 @@
-import { Flex, Box, Text, Grid, Link, Skeleton } from "@chakra-ui/react";
+import {
+  Flex,
+  Text,
+  Link,
+  Skeleton,
+  AvatarGroup,
+  Avatar,
+} from "@chakra-ui/react";
 import { api } from "~/utils/api";
 import Image from "../ui/Image";
 import NextLink from "next/link";
@@ -52,7 +59,7 @@ const CategoriesList = (props: CategoriesListProps) => {
   );
 
   const renderCategory = (category: CategoryWithOffers) => {
-    const bgColor = category.color ?? "cje-gray.100";
+    const bgColor = category.color ?? "bgGray";
     const textColor = category.textWhite ? "white" : "black";
 
     return (
@@ -72,51 +79,43 @@ const CategoriesList = (props: CategoriesListProps) => {
           alignItems="center"
           bgColor={bgColor}
           borderRadius="20px"
-          p={4}
+          px={4}
+          pt={4}
+          pb={2}
           minW="160px"
           maxW="160px"
-          minH="196px"
-          height="100%"
         >
           <Image
             src={category.icon.url as string}
             alt={category.icon.alt as string}
-            width={40}
-            height={40}
+            width={32}
+            height={32}
           />
           <Text
             wordBreak="break-word"
             whiteSpace="normal"
-            fontSize="md"
+            lineHeight="normal"
             textAlign="center"
-            fontWeight="extrabold"
+            fontWeight={800}
             color={textColor}
             mb={5}
             noOfLines={2}
+            h="44px"
           >
             {category.label}
           </Text>
-          <Grid templateColumns="repeat(3, 1fr)" gap={2}>
+          <AvatarGroup size="md" max={6}>
             {category.offers?.map((offer) => (
-              <Flex
+              <Avatar
                 key={offer.id}
-                alignItems={"center"}
-                justifyContent={"center"}
-                borderRadius="50%"
-                overflow="hidden"
-                width="40px"
-                height="40px"
+                src={offer.partner.icon.url as string}
+                name={offer.partner.icon.alt as string}
+                width="44px"
+                height="44px"
                 bg="white"
-              >
-                <Image
-                  src={offer.partner.icon.url as string}
-                  alt={offer.partner.icon.alt as string}
-                  width={40}
-                  height={40}
-                />
-              </Flex>
+              />
             ))}
-          </Grid>
+          </AvatarGroup>
         </Flex>
       </Link>
     );
@@ -136,7 +135,7 @@ const CategoriesList = (props: CategoriesListProps) => {
         }}
         px={8}
       >
-        <Flex direction="column" gap={4}>
+        <Flex direction="column" gap={2}>
           {children}
         </Flex>
       </Flex>
@@ -146,24 +145,24 @@ const CategoriesList = (props: CategoriesListProps) => {
   if (isLoadingCategories) {
     return (
       <Layout>
-        <Flex gap={4}>
-          <Skeleton borderRadius="20px" h={48} w={40} />
-          <Skeleton borderRadius="20px" h={48} w={40} />
-          <Skeleton borderRadius="20px" h={48} w={40} />
+        <Flex gap={2}>
+          <Skeleton borderRadius="20px" h={40} w={40} />
+          <Skeleton borderRadius="20px" h={40} w={40} />
+          <Skeleton borderRadius="20px" h={40} w={40} />
         </Flex>
-        <Flex gap={4}>
-          <Skeleton borderRadius="20px" h={48} w={40} />
-          <Skeleton borderRadius="20px" h={48} w={40} />
-          <Skeleton borderRadius="20px" h={48} w={40} />
+        <Flex gap={2}>
+          <Skeleton borderRadius="20px" h={40} w={40} />
+          <Skeleton borderRadius="20px" h={40} w={40} />
+          <Skeleton borderRadius="20px" h={40} w={40} />
         </Flex>
       </Layout>
     );
   }
 
   return (
     <Layout>
-      <Flex gap={4}>{firstCategoryRow.map(renderCategory)}</Flex>
-      <Flex gap={4}>{secondCategoryRow.map(renderCategory)}</Flex>
+      <Flex gap={2}>{firstCategoryRow.map(renderCategory)}</Flex>
+      <Flex gap={2}>{secondCategoryRow.map(renderCategory)}</Flex>
     </Layout>
   );
 };

webapp/src/components/theme/avatar.ts

@@ -0,0 +1,20 @@
+import { avatarAnatomy } from "@chakra-ui/anatomy";
+import { createMultiStyleConfigHelpers } from "@chakra-ui/react";
+
+const { definePartsStyle, defineMultiStyleConfig } =
+  createMultiStyleConfigHelpers(avatarAnatomy.keys);
+
+const baseStyle = definePartsStyle({
+  container: {
+    ...Array.from({ length: 20 }, (_, i) => ({
+      [`&:nth-last-child(${i})`]: {
+        zIndex: i,
+      },
+    })).reduce((acc, val) => ({ ...acc, ...val }), {}),
+  },
+  excessLabel: {
+    zIndex: 20,
+  },
+});
+
+export const avatarTheme = defineMultiStyleConfig({ baseStyle });

webapp/src/utils/chakra-theme.ts

@@ -5,8 +5,10 @@ import {
   theme as defaultTheme,
   defineStyle,
   defineStyleConfig,
+  Avatar,
 } from "@chakra-ui/react";
 import localFont from "next/font/local";
+import { avatarTheme } from "~/components/theme/avatar";
 import { checkboxTheme } from "~/components/theme/checkbox";
 import { modalTheme } from "~/components/theme/modal";
 import { textareaTheme } from "~/components/theme/textarea";
@@ -136,6 +138,7 @@ export const theme = extendTheme({
     Textarea: textareaTheme,
     Modal: modalTheme,
     Checkbox: checkboxTheme,
+    Avatar: avatarTheme,
   },
   styles: {
     global: () => ({