style: review design

mission-apprentissage · Dec 17, 2024 · 16c92c8 · 16c92c8
1 parent 52a15f1
commit 16c92c8
Show file tree

Hide file tree

Showing 9 changed files with 50 additions and 13 deletions.
diff --git a/server/src/jobs/formations/importIndicateurEntree.ts b/server/src/jobs/formations/importIndicateurEntree.ts
@@ -81,7 +81,7 @@ export async function importIndicateurEntree(options = { exportEtablissementsOri
     filterData((data) => data),
     writeData(
       async ({ formationEtablissement: { formationEtablissement, formation, etablissement }, data }) => {
-        const effectifsAnnee = (formationEtablissement.familleMetierId ? ["1", "2"] : ["1"])
+        const effectifsAnnee = (formation.familleMetierId ? ["1", "2"] : ["1"])
           .filter((a) => data[`Année ${a}`] !== undefined)
           .find((_) => true);
 
@@ -104,6 +104,7 @@ export async function importIndicateurEntree(options = { exportEtablissementsOri
           if (
             previousYearExist &&
             previousYearExist.effectifsAnnee !== null &&
+            previousYearExist.effectifs !== null &&
             previousYearExist.effectifsAnnee < indicateurEntree.effectifsAnnee
           ) {
             return;

diff --git a/ui/app/(accompagnateur)/components/FormationCard.tsx b/ui/app/(accompagnateur)/components/FormationCard.tsx
@@ -21,6 +21,7 @@ export default React.memo(function FormationCard({
   onMouseEnter,
   onMouseLeave,
   tabIndex,
+  focusHighlight = false,
   withJPO = true,
   withDuration = true,
   style = undefined,
@@ -32,6 +33,7 @@ export default React.memo(function FormationCard({
   onMouseEnter?: Function;
   onMouseLeave?: Function;
   tabIndex: number;
+  focusHighlight?: boolean;
   withJPO?: boolean;
   withDuration?: boolean;
   style?: React.CSSProperties;
@@ -55,6 +57,7 @@ export default React.memo(function FormationCard({
       tabIndex={tabIndex}
       style={style}
       type={"formation"}
+      focusHighlight={focusHighlight}
     >
       <Box style={{ padding: "1.25rem" }}>
         <Stack direction={"row"} spacing={1} useFlexGap sx={{ flexWrap: "wrap", marginBottom: fr.spacing("3v") }}>

diff --git a/ui/app/(accompagnateur)/components/FormationFamilleMetier.tsx b/ui/app/(accompagnateur)/components/FormationFamilleMetier.tsx
@@ -97,10 +97,14 @@ export default function FormationsFamilleMetier({
         css={css`
           margin: 0;
           & li {
-            font-size: ${small ? "0.875rem" : "1.125rem"};
+            font-size: ${small ? "1rem" : "1.125rem"};
             line-height: ${small ? "1.5rem" : "1.75rem"};
             padding-bottom: 0;
           }
+
+          & li:not(:last-child) {
+            margin-bottom: ${small ? "0.25rem" : "0.25rem"};
+          }
         `}
       >
         {formations.map((detail, index) => {

diff --git a/ui/app/(accompagnateur)/constants/constants.ts b/ui/app/(accompagnateur)/constants/constants.ts
@@ -1,2 +1,2 @@
-export const title = "C’EST QUI LE PRO ?";
+export const title = "C’est qui le pro ?";
 export const tagline = "Découvre les formations professionnelles en sortie de collège";
diff --git a/ui/app/(accompagnateur)/details/[id]/FormationSimilaire.tsx b/ui/app/(accompagnateur)/details/[id]/FormationSimilaire.tsx
@@ -61,6 +61,7 @@ export default function FormationSimilare({ formationDetail }: { formationDetail
             <Grow in={true} unmountOnExit key={`formation-similaire-${index}`}>
               <Grid item xs={12 / eltByLine}>
                 <FormationCard
+                  focusHighlight
                   formationDetail={formationDetail}
                   latitude={latitude}
                   longitude={longitude}
@@ -73,7 +74,6 @@ export default function FormationSimilare({ formationDetail }: { formationDetail
                     display: "flex",
                     justifyContent: "flex-start",
                     alignItems: "flex-start",
-                    backgroundColor: "white",
                   }}
                 />
               </Grid>

diff --git a/ui/app/(accompagnateur)/style.scss b/ui/app/(accompagnateur)/style.scss
@@ -1,3 +1,9 @@
+
+body {
+    --hover: #ECECFE;
+}
+
+
 [target=_blank]::after {
     -webkit-mask-image: url("../dsfr/icons/external-link-fill.svg") !important;
     mask-image: url("../dsfr/icons/external-link-fill.svg") !important;

diff --git a/ui/app/components/Card.tsx b/ui/app/components/Card.tsx
@@ -13,6 +13,7 @@ export type CardProps = Omit<MUICardProps, "title"> & {
   selected?: boolean;
   actionProps?: CardActionAreaProps;
   type?: "details" | "formation";
+  focusHighlight?: boolean;
 };
 
 const StyledLink = styled(Link)`
@@ -35,6 +36,7 @@ export function Card({ title, link, linkTarget, style, children, className, acti
     return (
       <CardActionArea
         {...actionProps}
+        disableRipple
         className={className}
         style={style}
         onClick={(e) => {
@@ -112,12 +114,33 @@ export default styled(Card)<CardProps>`
 
         & .MuiContainer-root {
           padding: ${fr.spacing("3v")};
-        }  
-        `;
+        }`;
     }
   }};
 
   ${({ selected }) => {
     return !isNil(selected) && selected ? "background-color: var(--hover);" : "";
   }}
+
+  ${({ focusHighlight }) => {
+    return (
+      focusHighlight ||
+      `& .MuiCardActionArea-focusHighlight {
+  display: none;
+}`
+    );
+  }}
+
+
+  & .MuiButtonBase-root {
+    background-color: white;
+  }
+
+  & .MuiButtonBase-root:hover {
+    background-color: var(--hover);
+  }
+
+  &.MuiButtonBase-root {
+    background-color: white;
+  }
 `;
diff --git a/ui/app/components/Tag.tsx b/ui/app/components/Tag.tsx
@@ -101,8 +101,8 @@ export const TagDuree = styled(TagStyled)`
 `;
 
 export const TagApprentissage = styled(TagStyled)`
-  color: var(--warning-425-625-hover);
-  background-color: var(--error-950-100);
+  color: ${fr.colors.decisions.text.default.success.default};
+  background-color: ${fr.colors.options.greenMenthe._975_75.default};
 `;
 
 export default TagStyled;
diff --git a/ui/app/services/formation.ts b/ui/app/services/formation.ts
@@ -1,6 +1,6 @@
 import { FormationDomaine, FormationTag } from "shared";
 import CalendarIcon from "#/app/components/icon/CalendarIcon";
-import { FrCxArg, FrIconClassName, RiIconClassName } from "@codegouvfr/react-dsfr";
+import { FrCxArg, FrIconClassName, RiIconClassName, fr } from "@codegouvfr/react-dsfr";
 import MoneyIcon from "../components/icon/MoneyIcon";
 
 export type FormationTagType = {
@@ -14,16 +14,16 @@ export const FORMATION_TAG: FormationTagType[] = [
   {
     tag: FormationTag.POUR_TRAVAILLER_RAPIDEMENT,
     libelle: "TAUX D'INSERTION FAVORABLE",
-    color: "#18753c",
-    bgColor: "var(--success-975-75)",
+    color: fr.colors.decisions.text.default.success.default,
+    bgColor: fr.colors.decisions.background.contrast.success.default,
     icon: MoneyIcon,
   },
 
   {
     tag: FormationTag.FAIBLE_TAUX_PRESSION,
     libelle: "TAUX DE PRESSION FAIBLE",
-    color: "var(--info-425-625)",
-    bgColor: "var(--info-975-75)",
+    color: fr.colors.decisions.text.default.success.default,
+    bgColor: fr.colors.decisions.background.contrast.success.default,
     icon: CalendarIcon,
   },
 ];