style: public privé

mission-apprentissage · Sep 26, 2024 · 01601e1 · 01601e1
1 parent 92a24f3
commit 01601e1
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 14 deletions.
diff --git a/ui/app/(accompagnateur)/components/FormationAllTags.tsx b/ui/app/(accompagnateur)/components/FormationAllTags.tsx
@@ -18,6 +18,7 @@ function FilterTag({
   return (
     <Tag
       variant="filter"
+      bold
       active={selected === tagElt.tag}
       nativeButtonProps={{
         onClick: function () {

diff --git a/ui/app/(accompagnateur)/components/FormationCard.tsx b/ui/app/(accompagnateur)/components/FormationCard.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { Grid, Stack, Typography } from "@mui/material";
+import { Box, Grid, Stack, Typography } from "@mui/material";
 import { fr } from "@codegouvfr/react-dsfr";
 import { FormationDetail } from "#/types/formation";
 import "moment/locale/fr";
@@ -9,6 +9,8 @@ import FormationTags from "./FormationTags";
 import { useFormationLink } from "../hooks/useFormationLink";
 import { LabelApprentissage } from "./Apprentissage";
 import { formatLibelle } from "#/app/utils/formation";
+import { TagStatutPrive, TagStatutPublic } from "#/app/components/Tag";
+import { capitalize } from "lodash-es";
 
 function formatAccessTime(time: number) {
   if (time >= 3600) {
@@ -81,12 +83,21 @@ export default React.memo(function FormationCard({
       <Typography variant={"body2"} style={{ color: "#3A3A3A", lineHeight: "24px" }}>
         {etablissement.libelle}
       </Typography>
-      <Typography variant={"body2"} style={{ color: "#3A3A3A", lineHeight: "24px", marginBottom: fr.spacing("5v") }}>
+      <Typography variant={"body2"} style={{ color: "#3A3A3A", lineHeight: "24px" }}>
         {etablissement.addressCity}
       </Typography>
+      {etablissement.statut && (
+        <Box style={{ marginTop: "0.75rem" }}>
+          {etablissement.statut === "public" ? (
+            <TagStatutPublic>{capitalize(etablissement.statut)}</TagStatutPublic>
+          ) : (
+            <TagStatutPrive>{capitalize(etablissement.statut)}</TagStatutPrive>
+          )}
+        </Box>
+      )}
 
       {withDuration && (
-        <Grid container>
+        <Grid container style={{ marginTop: fr.spacing("5v") }}>
           <Grid item xs={10}>
             {etablissement.accessTime ? (
               <Typography variant="subtitle4" color={"var(--blue-france-sun-113-625)"}>

diff --git a/ui/app/(accompagnateur)/components/PortesOuvertes.tsx b/ui/app/(accompagnateur)/components/PortesOuvertes.tsx
@@ -67,7 +67,11 @@ export function TagPortesOuvertes({ etablissement }: { etablissement: Etablissem
   }
 
   return (
-    <Tag style={{ marginTop: fr.spacing("5v") }} variant={strPortesOuvertes.ended ? "grey" : "button-white"}>
+    <Tag
+      bold={strPortesOuvertes.ended ? false : true}
+      style={{ marginTop: fr.spacing("5v") }}
+      variant={strPortesOuvertes.ended ? "grey" : "button-white"}
+    >
       {strPortesOuvertes.str}
     </Tag>
   );

diff --git a/ui/app/(accompagnateur)/details/[id]/FormationHeader.tsx b/ui/app/(accompagnateur)/details/[id]/FormationHeader.tsx
@@ -64,12 +64,18 @@ export default function FormationHeader({
         <Stack spacing={1} direction={"row"}>
           {etablissement.statut &&
             (etablissement.statut === "public" ? (
-              <TagStatutPublic square>{etablissement.statut.toUpperCase()}</TagStatutPublic>
+              <TagStatutPublic square bold>
+                {etablissement.statut.toUpperCase()}
+              </TagStatutPublic>
             ) : (
-              <TagStatutPrive square>{etablissement.statut.toUpperCase()}</TagStatutPrive>
+              <TagStatutPrive square bold>
+                {etablissement.statut.toUpperCase()}
+              </TagStatutPrive>
             ))}
           {formationEtablissement.duree && (
-            <TagDuree square>{`En ${formationEtablissement.duree}`.toUpperCase()}</TagDuree>
+            <TagDuree bold square>
+              {`En ${formationEtablissement.duree}`.toUpperCase()}
+            </TagDuree>
           )}
           <TagApprentissage formation={formation} />
         </Stack>

diff --git a/ui/app/components/Tag.tsx b/ui/app/components/Tag.tsx
@@ -10,11 +10,12 @@ export type TagProps = {
   active?: boolean;
   level?: Level;
   square?: boolean;
+  bold?: boolean;
 } & DSFRBTagProps;
 
 // TODO: fix css order
 const TagStyled = styled(Tag, {
-  shouldForwardProp: (prop) => !["variant", "square", "level", "active"].includes(prop),
+  shouldForwardProp: (prop) => !["variant", "square", "level", "active", "bold"].includes(prop),
 })<TagProps>`
   &,
   &.fr-tag {
@@ -29,7 +30,6 @@ const TagStyled = styled(Tag, {
           return `
           background-color: var(--grey-1000-50);
           color: var(--blue-france-sun-113-625);
-          font-weight: 700;
           border: 1px solid #ECECFE;
           
           &:not(:disabled):hover {
@@ -48,8 +48,6 @@ const TagStyled = styled(Tag, {
         case "filter":
           return `
           background-color: var(--grey-1000-50);
-          color: var(--blue-france-sun-113-625);
-          font-weight: 700;
           padding-top: 0.5rem;
           padding-bottom: 0.5rem;
           padding-left: 1rem;
@@ -82,25 +80,24 @@ const TagStyled = styled(Tag, {
     ${({ square }) => {
       return square ? `border-radius: 4px;` : "";
     }}
+
+    ${({ bold }) => (bold ? "font-weight: 700;" : "")}
   }
 `;
 
 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);
-  font-weight: 700;
 `;
 
 export default TagStyled;