feat: formumaire de contact

mission-apprentissage · Dec 19, 2024 · 76137e8 · 76137e8
1 parent 93bd169
commit 76137e8
Show file tree

Hide file tree

Showing 7 changed files with 57 additions and 22 deletions.
diff --git a/ui/app/(accompagnateur)/components/ConstructionHeader.tsx b/ui/app/(accompagnateur)/components/ConstructionHeader.tsx
@@ -60,11 +60,12 @@ export default function ConstructionHeader() {
                 ou encore{" "}
                 <Link
                   noIcon
-                  href="mailto:contact@inserjeunes.beta.gouv.fr"
+                  target="_blank"
+                  href="https://tally.so/r/wz0AOR"
                   style={{ color: fr.colors.decisions.text.title.blueFrance.default, backgroundImage: "none" }}
                 >
                   <MailSendIcon style={{ verticalAlign: "text-top", marginLeft: "0.25rem", marginRight: "0.5rem" }} />
-                  Rejoindre l’expérimentation !
+                  Partager votre avis !
                 </Link>
               </Typography>
             </Box>

diff --git a/ui/app/(accompagnateur)/components/FormationCard.tsx b/ui/app/(accompagnateur)/components/FormationCard.tsx
@@ -12,6 +12,7 @@ import { formatAccessTime, formatLibelle, formatStatut } from "#/app/utils/forma
 import { TagStatutPrive, TagStatutPublic } from "#/app/components/Tag";
 import { capitalize } from "lodash-es";
 import FormationsFamilleMetier from "./FormationFamilleMetier";
+import { SerializedStyles } from "@emotion/react";
 
 export default React.memo(function FormationCard({
   latitude,
@@ -21,10 +22,11 @@ export default React.memo(function FormationCard({
   onMouseEnter,
   onMouseLeave,
   tabIndex,
-  focusHighlight = false,
   withJPO = true,
   withDuration = true,
   style = undefined,
+  css = undefined,
+  className = undefined,
 }: {
   latitude: number;
   longitude: number;
@@ -33,10 +35,11 @@ export default React.memo(function FormationCard({
   onMouseEnter?: Function;
   onMouseLeave?: Function;
   tabIndex: number;
-  focusHighlight?: boolean;
   withJPO?: boolean;
   withDuration?: boolean;
   style?: React.CSSProperties;
+  css?: SerializedStyles;
+  className?: string;
 }) {
   const { formationEtablissement, formation, etablissement } = formationDetail;
   const formationLink = useFormationLink({
@@ -56,8 +59,8 @@ export default React.memo(function FormationCard({
       linkTarget="_blank"
       tabIndex={tabIndex}
       style={style}
+      className={className}
       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)/details/[id]/FormationSimilaire.tsx b/ui/app/(accompagnateur)/details/[id]/FormationSimilaire.tsx
@@ -61,14 +61,22 @@ 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}
                   selected={false}
                   tabIndex={index}
                   withDuration={false}
                   withJPO={false}
+                  css={css`
+                    &.MuiButtonBase-root:hover {
+                      background-color: white;
+                    }
+
+                    & .MuiCardActionArea-focusHighlight {
+                      display: block;
+                    }
+                  `}
                   style={{
                     height: "100%",
                     display: "flex",

diff --git a/ui/app/(accompagnateur)/style.scss b/ui/app/(accompagnateur)/style.scss
@@ -1,9 +1,13 @@
 
+:root { 
+    --background-raised-grey-hover: #ECECFE;
+    --background-default-grey-hover: #ECECFE;
+}
+
 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,7 +13,6 @@ export type CardProps = Omit<MUICardProps, "title"> & {
   selected?: boolean;
   actionProps?: CardActionAreaProps;
   type?: "details" | "formation";
-  focusHighlight?: boolean;
 };
 
 const StyledLink = styled(Link)`
@@ -122,15 +121,9 @@ export default styled(Card)<CardProps>`
     return !isNil(selected) && selected ? "background-color: var(--hover);" : "";
   }}
 
-  ${({ focusHighlight }) => {
-    return (
-      focusHighlight ||
-      `& .MuiCardActionArea-focusHighlight {
-  display: none;
-}`
-    );
-  }}
-
+  & .MuiCardActionArea-focusHighlight {
+    display: none;
+  }
 
   & .MuiButtonBase-root {
     background-color: white;
@@ -140,6 +133,10 @@ export default styled(Card)<CardProps>`
     background-color: var(--hover);
   }
 
+  &.MuiButtonBase-root:hover {
+    background-color: var(--hover);
+  }
+
   &.MuiButtonBase-root {
     background-color: white;
   }

diff --git a/ui/app/components/Header.tsx b/ui/app/components/Header.tsx
@@ -1,5 +1,5 @@
 "use client";
-import Header from "@codegouvfr/react-dsfr/Header";
+import Header, { HeaderProps } from "@codegouvfr/react-dsfr/Header";
 import { Badge } from "@codegouvfr/react-dsfr/Badge";
 import { css } from "@emotion/css";
 import { fr } from "@codegouvfr/react-dsfr";
@@ -12,10 +12,9 @@ export default function CustomHeader({
 }: {
   title: string;
   tagline?: string;
-  quickAccessItems?: JSX.Element[];
+  quickAccessItems?: (JSX.Element | HeaderProps.QuickAccessItem)[];
   withBetaTag?: boolean;
 }) {
-
   return (
     <Header
       className={css`
@@ -28,6 +27,10 @@ export default function CustomHeader({
         .${fr.cx("fr-header__tools")} {
           flex: 1 1 auto;
         }
+
+        & .fr-btns-group li {
+          flex-direction: row-reverse;
+        }
       `}
       brandTop={
         <>

diff --git a/ui/app/layout.tsx b/ui/app/layout.tsx
@@ -6,15 +6,30 @@ import "./(accompagnateur)/style.scss";
 import Title from "./(accompagnateur)/components/Title";
 import { Footer } from "@codegouvfr/react-dsfr/Footer";
 import Link from "./components/Link";
-import { ConsentBannerAndConsentManagement } from "./components/ConsentManagement";
 import ConstructionHeader from "./(accompagnateur)/components/ConstructionHeader";
+import Button from "./components/Button";
 
 export default function MainLayout({ children }: { children: JSX.Element }) {
   return (
     <RootLayout>
       <>
         <Title />
-        <Layout header={<Header title={title} tagline={tagline} />} title={title}>
+        <Layout
+          header={
+            <Header
+              title={title}
+              tagline={tagline}
+              quickAccessItems={[
+                <Link key={"donner-votre-avis"} noIcon target="_blank" href="https://tally.so/r/wz0AOR">
+                  <Button iconId="ri-emotion-happy-fill" priority="tertiary">
+                    Donner votre avis
+                  </Button>
+                </Link>,
+              ]}
+            />
+          }
+          title={title}
+        >
           <div>
             <ConstructionHeader />
             {children}
@@ -48,6 +63,10 @@ export default function MainLayout({ children }: { children: JSX.Element }) {
                   text: "Documentation",
                   linkProps: { href: "/documentation", target: "_blank" },
                 },
+                {
+                  text: "Nous contacter",
+                  linkProps: { href: "https://tally.so/r/wz0AOR", target: "_blank" },
+                },
               ]}
             />
           </div>