style: background du résumé

mission-apprentissage · Jan 7, 2025 · 95b7d68 · 95b7d68
1 parent 0fbbcba
commit 95b7d68
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 17 deletions.
diff --git a/ui/app/(accompagnateur)/details/[id]/FormationHeader.tsx b/ui/app/(accompagnateur)/details/[id]/FormationHeader.tsx
@@ -199,17 +199,24 @@ const FormationHeader = React.memo(function ({ formationDetail }: { formationDet
           }
         `}
       >
-        <BoxContainer
-          maxWidth={"xl"}
+        <Box
           css={css`
             background-color: #fff;
-            ${theme.breakpoints.up("md")} {
-              padding-left: 1.25rem;
-            }
           `}
         >
-          <Divider variant="middle" style={{ marginTop: 0, marginBottom: 0 }} />
-        </BoxContainer>
+          <BoxContainer maxWidth={"xl"}>
+            <Divider
+              variant="middle"
+              css={css`
+                margin-top: 0;
+                margin-bottom: 0;
+                ${theme.breakpoints.up("md")} {
+                  margin-left: 2.5rem;
+                }
+              `}
+            />
+          </BoxContainer>
+        </Box>
         <FormationResume formationDetail={formationDetail} />
       </BoxContainer>
     </>

diff --git a/ui/app/(accompagnateur)/details/[id]/FormationResume.tsx b/ui/app/(accompagnateur)/details/[id]/FormationResume.tsx
@@ -388,23 +388,32 @@ const FormationResumeHideTagFix = React.memo(function ({ formationDetail }: { fo
         <Box style={{ gridRowStart: 1, gridColumnStart: 1 }}>
           <Box
             css={css`
-              backgroundcolor: #fff;
+              background-color: #fff;
             `}
           >
             <BoxContainer
               maxWidth={"xl"}
               css={css`
                 pointer-events: auto;
-                padding-left: 1.25rem;
               `}
             >
-              <FormationResume formationDetail={formationDetail} hideTag={hideResumeTag} />
+              <Box
+                css={css`
+                  padding-left: 1.25rem;
+                `}
+              >
+                <FormationResume formationDetail={formationDetail} hideTag={hideResumeTag} />
+              </Box>
 
               <Divider
                 variant="middle"
-                style={{
-                  marginBottom: 0,
-                }}
+                css={css`
+                  margin-bottom: 0;
+                  margin-top: 0;
+                  ${theme.breakpoints.up("md")} {
+                    margin-left: 2.5rem;
+                  }
+                `}
               />
             </BoxContainer>
           </Box>

diff --git a/ui/app/components/Divider.tsx b/ui/app/components/Divider.tsx
@@ -1,21 +1,26 @@
 /** @jsxImportSource @emotion/react */
 import { fr } from "@codegouvfr/react-dsfr";
-import { css } from "@emotion/react";
+import { css, SerializedStyles } from "@emotion/react";
 import Divider, { DividerProps } from "@mui/material/Divider";
 import { useTheme } from "@mui/material/styles";
 
-export default function CustomDivider({ margin, className, ...props }: DividerProps & { margin?: string }) {
+export default function CustomDivider({
+  margin,
+  className,
+  css: cssParent,
+  ...props
+}: DividerProps & { css?: SerializedStyles; margin?: string }) {
   const theme = useTheme();
   return (
     <Divider
       component="div"
       style={{
-        marginTop: margin !== undefined ? margin : fr.spacing("5v"),
-        marginBottom: margin !== undefined ? margin : fr.spacing("5v"),
         ...props.style,
       }}
       className={className}
       css={css`
+        margin-top: ${margin !== undefined ? margin : fr.spacing("5v")};
+        margin-bottom: ${margin !== undefined ? margin : fr.spacing("5v")};
         ${theme.breakpoints.down("md")} {
           margin: 0;
         }