Feat/fix admin place style (#70)

* Fix admin place * Fix color * Clean logs
AtelierdeParis · Feb 20, 2024 · 67957f5 · 67957f5
1 parent 112a570
commit 67957f5
Show file tree

Hide file tree

Showing 9 changed files with 52 additions and 28 deletions.
diff --git a/web/components/Account/Place/Schedule.tsx b/web/components/Account/Place/Schedule.tsx
@@ -25,7 +25,7 @@ export const StyleWrapper = styled.div`
     inset: 0;
     display: block;
     position: absolute;
-    z-index: 20;
+    z-index: 11;
     border-radius: 8px;
     margin: 3px 2px 3px 2px;
   }
@@ -137,9 +137,14 @@ const Schedule = ({ isCampaignMode }: { isCampaignMode?: boolean }) => {
           }}
           initialDate={isCampaignMode && currentCampaign?.campaign_start}
           dayCellContent={(day) => {
-            const hasEvent = events.some((event) =>
+            const event = events.find((event) =>
               isSameDay(event.start, day.date),
             )
+            const hasEvent = Boolean(event)
+            const isCampaignEvent = event?.extendedProps?.isCampaignEvent
+            const isDisabled =
+              (isCampaignMode && !isCampaignEvent) ||
+              (!isCampaignMode && isCampaignEvent)
 
             return (
               <Box
@@ -148,6 +153,7 @@ const Schedule = ({ isCampaignMode }: { isCampaignMode?: boolean }) => {
                 lineHeight="1"
                 fontSize={{ base: '11px', sm: 'sm', md: 'md' }}
                 pt={{ base: 0, sm: 0.5 }}
+                opacity={isDisabled ? 0.6 : 1}
               >
                 {day.dayNumberText}
               </Box>

diff --git a/web/components/Account/Place/ScheduleDelete.tsx b/web/components/Account/Place/ScheduleDelete.tsx
@@ -19,7 +19,7 @@ import Delete from 'public/assets/img/delete.svg'
 import ScheduleContext from '~components/Account/Place/ScheduleContext'
 import { useQueryClient } from 'react-query'
 
-const ScheduleDelete = () => {
+const ScheduleDelete = ({ isCampaignTab }: { isCampaignTab?: boolean }) => {
   const { place, setToDelete, eventsIdToDelete } = useContext(ScheduleContext)
   const { available, booked } = useMemo(
     () =>
@@ -110,17 +110,21 @@ const ScheduleDelete = () => {
       borderColor="gray.100"
     >
       <Text fontFamily="mabry medium" pb={2}>
-        {t(`schedule.delete.title${isPlural}`, {
-          nb: eventsIdToDelete.length,
-        })}
+        {isCampaignTab
+          ? t(`schedule.delete.title${isAvailablePlural}Campaign`)
+          : t(`schedule.delete.title${isPlural}`, {
+              nb: eventsIdToDelete.length,
+            })}
       </Text>
       {available.length > 0 && (
         <>
-          <Text pt={5} fontFamily="mabry medium" pb={1.5}>
-            {t(`schedule.delete.slotAvailable${isAvailablePlural}`, {
-              nb: available.length,
-            })}
-          </Text>
+          {!isCampaignTab && (
+            <Text pt={5} fontFamily="mabry medium" pb={1.5}>
+              {t(`schedule.delete.slotAvailable${isAvailablePlural}`, {
+                nb: available.length,
+              })}
+            </Text>
+          )}
           <VStack spacing={1} alignItems="flex-start">
             {available.map((dispo) => (
               <Box key={dispo.id} fontSize={{ base: 'sm', sm: 'md' }}>
@@ -134,15 +138,20 @@ const ScheduleDelete = () => {
                         {format(dispo.end)}
                       </Text>
                     )}
-                    <Text textTransform="lowercase" pl={1.5}>
-                      {`(${
-                        dispo.when
-                          ? t(`schedule.${dispo.when}`)
-                          : t(`schedule.type.${dispo.type}`)
-                      })`}
-                    </Text>
-                    {dispo.dispositif && (
-                      <Text pl={1.5}>{`- ${dispo.dispositif.name}`}</Text>
+
+                    {!isCampaignTab && (
+                      <>
+                        <Text textTransform="lowercase" pl={1.5}>
+                          {`(${
+                            dispo.when
+                              ? t(`schedule.${dispo.when}`)
+                              : t(`schedule.type.${dispo.type}`)
+                          })`}
+                        </Text>
+                        {dispo.dispositif && (
+                          <Text pl={1.5}>{`- ${dispo.dispositif.name}`}</Text>
+                        )}
+                      </>
                     )}
                   </Flex>
                 </Flex>
@@ -157,7 +166,9 @@ const ScheduleDelete = () => {
               isLoading={isLoading}
             >
               <Text ml={2}>
-                {t(`schedule.delete.delete${isAvailablePlural}`)}
+                {isCampaignTab
+                  ? t(`schedule.delete.delete${isAvailablePlural}Campaign`)
+                  : t(`schedule.delete.delete${isAvailablePlural}`)}
               </Text>
             </Button>
             <Button

diff --git a/web/components/Account/Place/ScheduleSlot.tsx b/web/components/Account/Place/ScheduleSlot.tsx
@@ -113,7 +113,7 @@ const Event = ({
       }}
       borderColor={isSelected ? 'blue.500' : 'transparent'}
       {...getStyle(status)}
-      opacity={isDisabled ? 0.2 : 1}
+      opacity={isDisabled ? 0.6 : 1}
     >
       {isPeriod && (
         <PeriodEvent

diff --git a/web/components/Campaign/Home/HomeCampaignInsert.tsx b/web/components/Campaign/Home/HomeCampaignInsert.tsx
@@ -31,12 +31,12 @@ const HomeCampaignInsert = () => {
             height="22px"
           />
           <VStack width="100%">
-            <HStack>
+            <HStack width="100%">
               <Box flex={1}>
                 <Text fontWeight="bold">
                   {t(`campaign.insert.${mode}.title`)}
                 </Text>
-                <Text>
+                <Text opacity={0.5}>
                   {t(`campaign.insert.${mode}.subtitle`, {
                     date: format(new Date(limitDate), 'd MMMM'),
                   })}

diff --git a/web/components/Campaign/Places/Admin/CampaignScheduleInfo.tsx b/web/components/Campaign/Places/Admin/CampaignScheduleInfo.tsx
@@ -32,7 +32,7 @@ const CampaignScheduleInfo = ({ place, showForm }: Props) => {
   const { eventsIdToDelete } = useContext(ScheduleContext)
 
   if (eventsIdToDelete.length > 0) {
-    return <ScheduleDelete />
+    return <ScheduleDelete isCampaignTab />
   }
 
   return (
@@ -64,6 +64,7 @@ const CampaignScheduleInfo = ({ place, showForm }: Props) => {
           {currentCampaign?.mode === 'disponibilities'
             ? t(
                 `campaign.helpers.disponibilities.schedule.open_disponibilities`,
+                { title: currentCampaign?.title },
               )
             : t(
                 `campaign.helpers.applications.schedule.${

diff --git a/web/components/Home/HomeActions.tsx b/web/components/Home/HomeActions.tsx
@@ -14,6 +14,7 @@ const HomeActions = () => {
       pos={{ base: 'static', lg: 'relative' }}
       zIndex={99}
       paddingX={{ base: 0, lg: 8 }}
+      width="100%"
     >
       <Box flex={hasActiveCampaign ? 3 : 1}>
         <HomeSearch hasActiveCampaign={hasActiveCampaign} />

diff --git a/web/components/Home/HomeCarousel.tsx b/web/components/Home/HomeCarousel.tsx
@@ -73,7 +73,9 @@ const HomeCarousel = () => {
           position="relative"
           top="40px"
           zIndex={10}
-          display={{ base: 'none', lg: 'block' }}
+          display={{ base: 'none', lg: 'flex' }}
+          width="100%"
+          justifyContent={'center'}
         >
           <HomeActions />
         </Box>

diff --git a/web/components/Place/PeriodEvent.tsx b/web/components/Place/PeriodEvent.tsx
@@ -47,7 +47,6 @@ const PeriodEvent = ({ isMonth, start, end, isCampaignEvent }: Props) => {
       fontSize={{ base: '11px', sm: 'sm' }}
       {...(isMonth && stylePeriodMonth)}
       {...(isLastDay && styleLastDay)}
-      id="licorne"
     >
       <Box color={status === 'selected' ? 'blue.500' : 'black'}>
         {`${formattedStart} - ${formattedEnd}`}

diff --git a/web/public/locales/fr/place.json b/web/public/locales/fr/place.json
@@ -306,12 +306,16 @@
       "success": "Les créneaux sélectionnés ont été supprimés",
       "title": "Vous avez sélectionné {{nb}} créneau.",
       "titles": "Vous avez sélectionné {{nb}} créneaux.",
+      "titleCampaign": "Vous avez sélectionné le créneau suivant :",
+      "titlesCampaign": "Vous avez sélectionné les créneaux suivants :",
       "slotAvailable": "Ce créneau ne fait l’objet d’aucune demande ou réservation :",
       "slotAvailables": "{{nb}} créneaux ne font l’objet d’aucune demande ou réservation :",
       "slotNotAvailable": "Ce créneau ne peut pas être supprimé :",
       "slotNotAvailables": "Plusieurs créneaux ne peuvent pas être supprimés :",
       "delete": "Supprimer le créneau disponible",
       "deletes": "Supprimer les créneaux disponibles",
+      "deleteCampaign": "Supprimer le créneau",
+      "deletesCampaign": "Supprimer les créneaux",
       "booked": "Une demande de réservation a été déposée par la Compagnie {{name}}.",
       "notBooked": "Le créneau ne fait l’objet d’aucune demande ou réservation.",
       "notBookeds": "Les créneaux ne font l’objet d’aucune demande ou réservation.",
@@ -579,7 +583,7 @@
         "schedule": {
           "title": "Ajoutez ou modifiez vos créneaux avant le {{disponibility_end}}. ",
           "description": "\n Vous pouvez ajouter jusqu’à {{disponibilities_max}} créneaux dédiés au dispositif {{title}} pour un même espace. Les créneaux doivent impérativement faire {{duration}} jours, et se dérouler entre le {{campaign_start}} et le {{campaign_end}}",
-          "open_disponibilities": "créneaux ouverts à candidatures Émergence"
+          "open_disponibilities": "créneaux qui seront ouverts à candidatures {{title}}"
         }
       }
     }