From 66ce603affc69c011745fe7081a401421f7532bc Mon Sep 17 00:00:00 2001 From: Antoine Lelong Date: Tue, 12 Nov 2024 11:29:57 +0100 Subject: [PATCH] feat: re-design categories list on homepage --- webapp/CHANGELOG.md | 11 +-- webapp/src/components/SearchBar.tsx | 2 +- .../src/components/lists/CategoriesList.tsx | 73 +++++++++---------- webapp/src/components/theme/avatar.ts | 20 +++++ webapp/src/utils/chakra-theme.ts | 3 + 5 files changed, 64 insertions(+), 45 deletions(-) create mode 100644 webapp/src/components/theme/avatar.ts diff --git a/webapp/CHANGELOG.md b/webapp/CHANGELOG.md index 211c80cb..e9ae565c 100644 --- a/webapp/CHANGELOG.md +++ b/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) diff --git a/webapp/src/components/SearchBar.tsx b/webapp/src/components/SearchBar.tsx index 5767d68a..bbf403af 100644 --- a/webapp/src/components/SearchBar.tsx +++ b/webapp/src/components/SearchBar.tsx @@ -33,7 +33,7 @@ export default function SearchBar({ return ( diff --git a/webapp/src/components/lists/CategoriesList.tsx b/webapp/src/components/lists/CategoriesList.tsx index 0a851d0d..0dbfcb7d 100644 --- a/webapp/src/components/lists/CategoriesList.tsx +++ b/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%" > {category.icon.alt {category.label} - + {category.offers?.map((offer) => ( - - {offer.partner.icon.alt - + /> ))} - + ); @@ -136,7 +135,7 @@ const CategoriesList = (props: CategoriesListProps) => { }} px={8} > - + {children} @@ -146,15 +145,15 @@ const CategoriesList = (props: CategoriesListProps) => { if (isLoadingCategories) { return ( - - - - + + + + - - - - + + + + ); @@ -162,8 +161,8 @@ const CategoriesList = (props: CategoriesListProps) => { return ( - {firstCategoryRow.map(renderCategory)} - {secondCategoryRow.map(renderCategory)} + {firstCategoryRow.map(renderCategory)} + {secondCategoryRow.map(renderCategory)} ); }; diff --git a/webapp/src/components/theme/avatar.ts b/webapp/src/components/theme/avatar.ts new file mode 100644 index 00000000..9698234a --- /dev/null +++ b/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 }); diff --git a/webapp/src/utils/chakra-theme.ts b/webapp/src/utils/chakra-theme.ts index 7508081d..62f4530c 100644 --- a/webapp/src/utils/chakra-theme.ts +++ b/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: () => ({