style: review du design

mission-apprentissage · Sep 12, 2024 · 08f93e9 · 08f93e9
1 parent 4a96321
commit 08f93e9
Show file tree

Hide file tree

Showing 8 changed files with 69 additions and 34 deletions.
diff --git a/ui/app/(accompagnateur)/components/SearchHeader.tsx b/ui/app/(accompagnateur)/components/SearchHeader.tsx
@@ -1,26 +1,38 @@
 "use client";
 import Container from "#/app/components/Container";
 import SearchFormationHomeForm from "#/app/components/form/SearchFormationHomeForm";
-import { Grid } from "#/app/components/MaterialUINext";
+import { Box, Grid } from "#/app/components/MaterialUINext";
 
 export default function SearchHeader() {
   return (
-    <Container nopadding={true} maxWidth={false}>
-      <Grid container spacing={0}>
-        <Grid
-          item
-          xs={12}
-          lg={10}
-          xl={8}
-          sx={{ padding: { md: "2rem", xs: "1rem" }, paddingLeft: { md: "5rem" }, paddingRight: { md: "5rem" } }}
+    <Container nopadding={true} maxWidth={false} style={{ paddingLeft: 0, paddingRight: 0 }}>
+      <Box
+        sx={{
+          display: "flex",
+          justifyContent: "center",
+          marginTop: "2rem",
+          marginBottom: "2rem",
+        }}
+      >
+        <Box
+          sx={{
+            maxWidth: "78rem",
+            width: "100%",
+            paddingLeft: "1rem",
+            paddingRight: {
+              xl: "20rem",
+              lg: "10rem",
+              xs: "1rem",
+            },
+          }}
         >
           <SearchFormationHomeForm
             url={"/recherche"}
             defaultValues={{ address: null, distance: 0, time: 90 }}
             bordered
           />
-        </Grid>
-      </Grid>
+        </Box>
+      </Box>
     </Container>
   );
 }
diff --git a/ui/app/(accompagnateur)/details/[id]/FormationContent.tsx b/ui/app/(accompagnateur)/details/[id]/FormationContent.tsx
@@ -36,7 +36,7 @@ export default function FormationContent({ formationDetail }: { formationDetail:
   useScrollToLocation();
 
   return (
-    <Container style={{ marginTop: fr.spacing("5v") }} maxWidth={"xl"}>
+    <Container style={{ marginTop: fr.spacing("5v"), marginBottom: "9.375rem" }} maxWidth={"xl"}>
       <Grid container>
         <FormationHeader refHeader={refHeader} refResume={refResume} formationDetail={formationDetail} />
         <Grid item xs={12} style={{ backgroundColor: "#fff", zIndex: 99 }}>

diff --git a/ui/app/(accompagnateur)/details/[id]/FormationHeader.tsx b/ui/app/(accompagnateur)/details/[id]/FormationHeader.tsx
@@ -11,7 +11,7 @@ import Divider from "#/app/components/Divider";
 import Card from "#/app/components/Card";
 import PortesOuvertesHeader from "./PortesOuvertesHeader";
 import FormationResume from "./FormationResume";
-import { TagStatut, TagDuree } from "#/app/components/Tag";
+import { TagStatutPublic, TagStatutPrive, TagDuree } from "#/app/components/Tag";
 import { useSize } from "#/app/(accompagnateur)/hooks/useSize";
 import { modalMinistage } from "#/app/(accompagnateur)/components/DialogMinistage";
 import FormationRoute from "./FormationRoute";
@@ -43,6 +43,20 @@ export default function FormationHeader({
       <Grid item xs={12}>
         <PortesOuvertesHeader etablissement={etablissement} />
       </Grid>
+      <Grid item xs={12} style={{ paddingLeft: fr.spacing("5v"), marginBottom: fr.spacing("3v") }}>
+        <Stack spacing={1} direction={"row"}>
+          {etablissement.statut &&
+            (etablissement.statut === "public" ? (
+              <TagStatutPublic square>{etablissement.statut.toUpperCase()}</TagStatutPublic>
+            ) : (
+              <TagStatutPrive square>{etablissement.statut.toUpperCase()}</TagStatutPrive>
+            ))}
+          {formationEtablissement.duree && (
+            <TagDuree square>{`En ${formationEtablissement.duree}`.toUpperCase()}</TagDuree>
+          )}
+          <TagApprentissage formation={formation} />
+        </Stack>
+      </Grid>
       <Grid
         item
         xs={12}
@@ -71,15 +85,6 @@ export default function FormationHeader({
         `}
       >
         <Grid container>
-          <Grid item xs={12} style={{ paddingLeft: fr.spacing("5v"), marginBottom: fr.spacing("3v") }}>
-            <Stack spacing={1} direction={"row"}>
-              {etablissement.statut && <TagStatut square>{etablissement.statut.toUpperCase()}</TagStatut>}
-              {formationEtablissement.duree && (
-                <TagDuree square>{`En ${formationEtablissement.duree}`.toUpperCase()}</TagDuree>
-              )}
-              <TagApprentissage formation={formation} />
-            </Stack>
-          </Grid>
           <Grid item xs={12} md={6} style={{ paddingLeft: fr.spacing("5v") }}>
             <Typography
               variant="h5"
@@ -135,7 +140,10 @@ export default function FormationHeader({
                     }
                   `}
                 >
-                  <Typography variant="subtitle2" style={{ color: "var(--blue-france-sun-113-625-hover)" }}>
+                  <Typography
+                    variant="subtitle2"
+                    style={{ fontWeight: "500", color: "var(--blue-france-sun-113-625-hover)" }}
+                  >
                     <i className={fr.cx("fr-icon-calendar-2-line")} style={{ marginRight: fr.spacing("2v") }} />
                     Découvrir la formation lors d’un mini-stage ⓘ
                   </Typography>

diff --git a/ui/app/(accompagnateur)/details/[id]/FormationResume.tsx b/ui/app/(accompagnateur)/details/[id]/FormationResume.tsx
@@ -42,7 +42,7 @@ function FormationResumeBlock({
           ? css`
               cursor: pointer;
               :hover .resumeUnderline {
-                display: block;
+                opacity: 100;
               }
             `
           : null
@@ -62,9 +62,9 @@ function FormationResumeBlock({
           <Box
             className="resumeUnderline"
             css={css`
-              display: none;
               border-top: 3px solid black;
               margin-top: 0.25rem;
+              opacity: 0;
             `}
           ></Box>
         )}
@@ -89,12 +89,17 @@ function FormationResumeBlockAdmission({ formationEtablissement }: { formationEt
       : "hard";
 
   return (
-    <FormationResumeBlock title={"L'admission"} icon={"ri-calendar-line"} anchor="l-admission">
+    <FormationResumeBlock title={"L'admission"} icon={"ri-calendar-check-line"} anchor="l-admission">
       <>
         {admissionLevel === "easy" && (
-          <Tag square level="easy">
-            Facile
-          </Tag>
+          <>
+            <Tag square level="easy">
+              Facile
+            </Tag>
+            <Tag square level="easy">
+              Nombreuses places
+            </Tag>
+          </>
         )}
       </>
       <>
@@ -114,7 +119,7 @@ function FormationResumeBlockAdmission({ formationEtablissement }: { formationEt
       <>
         {admissionLevel === "unknow" && (
           <Tag square level="unknow">
-            Difficulté d’intégration inconnue
+            Difficulté d&apos;admission inconnue
           </Tag>
         )}
       </>

diff --git a/ui/app/(accompagnateur)/recherche/FormationCard.tsx b/ui/app/(accompagnateur)/recherche/FormationCard.tsx
@@ -78,13 +78,13 @@ export default React.memo(function FormationCard({
       <Grid container>
         <Grid item xs={10}>
           {etablissement.accessTime ? (
-            <Typography variant="subtitle2" color={"var(--blue-france-sun-113-625)"}>
+            <Typography variant="subtitle4" color={"var(--blue-france-sun-113-625)"}>
               <i style={{ marginRight: fr.spacing("2v") }} className={fr.cx("fr-icon-bus-fill")} />
               {formatAccessTime(etablissement.accessTime)}
             </Typography>
           ) : (
             etablissement.distance && (
-              <Typography variant="subtitle2" color={"var(--blue-france-sun-113-625)"}>
+              <Typography variant="subtitle4" color={"var(--blue-france-sun-113-625)"}>
                 <i style={{ marginRight: fr.spacing("2v") }} className={fr.cx("fr-icon-bus-fill")} />À{" "}
                 {(etablissement.distance / 1000).toFixed(2)} km
               </Typography>

diff --git a/ui/app/(accompagnateur)/style.scss b/ui/app/(accompagnateur)/style.scss
@@ -50,6 +50,10 @@ form[target=_blank]::after {
     color: #ddd;
 }
 
+.color-orange {
+    color : #FA7659;
+}
+
 .circle-icon {
     padding: 5px;
     border-radius: 50%;

diff --git a/ui/app/components/Map.tsx b/ui/app/components/Map.tsx
@@ -36,7 +36,7 @@ export const LeafletSelectedEtablissementIcon = new DivIcon({
   iconSize: [58, 64],
   iconAnchor: [29, 64],
   popupAnchor: [-3, -76],
-  className: "custom-leaflet-icon color-grey leaflet-icon-selected",
+  className: "custom-leaflet-icon color-orange leaflet-icon-selected",
   html: renderToString(<EtablissementIcon />),
 });
 

diff --git a/ui/app/components/Tag.tsx b/ui/app/components/Tag.tsx
@@ -51,12 +51,18 @@ const TagStyled = styled(Tag, {
   }
 `;
 
-export const TagStatut = styled(TagStyled)`
+export const TagStatutPublic = styled(TagStyled)`
   background-color: var(--info-950-100);
   color: var(--blue-france-sun-113-625);
   font-weight: 700;
 `;
 
+export const TagStatutPrive = styled(TagStyled)`
+  background-color: #feebcb;
+  color: #7b341e;
+  font-weight: 700;
+`;
+
 export const TagDuree = styled(TagStyled)`
   background-color: var(--info-950-100);
   color: var(--info-425-625);