Fix style on home

AtelierdeParis · Feb 20, 2024 · acf8580 · acf8580
1 parent 67957f5
commit acf8580
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 20 deletions.
diff --git a/web/components/Campaign/Places/PlacesListCampaignHelper.tsx b/web/components/Campaign/Places/PlacesListCampaignHelper.tsx
@@ -15,24 +15,30 @@ import { ROUTE_PLACES } from '~constants'
 const PlacesListCampaignHelper = ({
   campaign,
   limitLines,
+  isHome,
   ...props
-}: { campaign?: ActiveCampaign; limitLines?: boolean } & StackProps) => {
+}: {
+  campaign?: ActiveCampaign
+  limitLines?: boolean
+  isHome?: boolean
+} & StackProps) => {
   const { t } = useTranslation('common')
 
   return (
     <VStack
       backgroundColor={campaign ? 'campaign.light' : 'blue.200'}
       borderRadius="4px"
-      borderTopLeftRadius={0}
+      borderTopLeftRadius={isHome ? undefined : 0}
       paddingX={8}
       paddingY={4}
       marginBottom={4}
       spacing={'1rem'}
-      id="hello"
       {...props}
     >
-      {campaign && <ApplicationCounter borderBottom="1px solid lightgray" />}
-      <HStack>
+      {campaign && !isHome && (
+        <ApplicationCounter borderBottom="1px solid lightgray" />
+      )}
+      <HStack width="100%" spacing={6}>
         <VStack flex={4} justifyContent="flex-start" alignItems="flex-start">
           <Text as="span" fontWeight="bold" marginRight={1}>
             {campaign

diff --git a/web/components/Home/HomePlaces.tsx b/web/components/Home/HomePlaces.tsx
@@ -6,6 +6,7 @@ import {
   Button,
   useBreakpointValue,
   HStack,
+  Stack,
 } from '@chakra-ui/react'
 import { useTranslation } from 'next-i18next'
 import Arrow from 'public/assets/img/arrow-bottom.svg'
@@ -50,25 +51,27 @@ const HomePlaces = ({ campaign }: Props) => {
 
   return (
     <Box py={4} w="100%">
-      <HStack alignItems="flex-start" pl={{ base: 0, md: 2 }}>
+      <HStack alignItems="flex-start" pl={{ base: 0, md: 2 }} paddingY={4}>
         <Box w="18px">
           <Arrow />
         </Box>
-        <Text textStyle="h2" mb={4} pl={3} lineHeight={1}>
-          {campaign
-            ? t('campaign.title', { title: campaign?.title })
-            : t('places.title')}
-        </Text>
-        {campaign && (
-          <Tag status="campaign" padding={2} fontSize="sm">
-            {tCommon('campaign.open', {
-              date: format(new Date(campaign?.limitDate), 'd MMMM yyyy'),
-            })}
-          </Tag>
-        )}
+        <Stack direction={{ base: 'column-reverse', sm: 'row' }}>
+          <Text textStyle="h2" mb={4} pl={3} lineHeight={1}>
+            {campaign
+              ? t('campaign.title', { title: campaign?.title })
+              : t('places.title')}
+          </Text>
+          {campaign && (
+            <Tag status="campaign" padding={2} fontSize="sm">
+              {tCommon('campaign.open', {
+                date: format(new Date(campaign?.limitDate), 'd MMMM yyyy'),
+              })}
+            </Tag>
+          )}
+        </Stack>
       </HStack>
 
-      <PlacesListCampaignHelper campaign={campaign} limitLines />
+      <PlacesListCampaignHelper campaign={campaign} limitLines isHome />
 
       <PlaceGrid places={places.slice(0, isLgOrSm ? 4 : 3)} />
       <Flex justifyContent="center" pt={10} pb={{ base: 6, md: 0 }}>
@@ -81,6 +84,10 @@ const HomePlaces = ({ campaign }: Props) => {
             size="xl"
             color={'campaign.dark'}
             _hover={{ bg: 'campaign.light', textDecor: 'none' }}
+            whiteSpace="normal"
+            textAlign="center"
+            p={6}
+            lineHeight="inherit"
           >
             {t('places.campaign.cta', {
               title: campaign?.title,

diff --git a/web/public/locales/fr/home.json b/web/public/locales/fr/home.json
@@ -32,7 +32,7 @@
         "cta": "Mes espaces"
       },
       "applications": {
-        "title": "Les créneaux Émergence sont ouverts !",
+        "title": "Les créneaux sont ouverts !",
         "subtitle": "Candidatez avant le le {{date}}.",
         "cta": "Parcourir"
       }