mission-apprentissage · bdavidxyz · Oct 3, 2022 · Oct 3, 2022 · Oct 3, 2022 · Oct 3, 2022
diff --git a/server/CHANGELOG.md b/server/CHANGELOG.md
@@ -168,6 +168,7 @@ Amélioration du retour des intitulés ROME pour Matcha
 Ajout d'une route sur l'intitulé ROME
 Ajout du détail du code ROME sur les offres Matcha
 Endpoint mise à jour email Bonne Boîte
+[337] Essai ChakraUI
 
 ## 1.18.3 [23/02/2022]
 Adaptation script pour SAVE update

diff --git a/ui/components/HeaderForm/HeaderForm.js b/ui/components/HeaderForm/HeaderForm.js
@@ -134,7 +134,7 @@ const HeaderForm = ({ handleSearchSubmit, isHome }) => {
             <div className="c-logobar-formgroup ml-md-1 ml-lg-3 border-0 c-logobar-submit-container">
               <button
                 type="submit"
-                className={`d-block btn btn-lg btn-dark w-100 font-weight-bold c-regular-darkbtn c-logobar-submit is-home-${isHome}`}
+                className={`btn btn-lg btn-dark w-100 font-weight-bold c-regular-darkbtn c-logobar-submit is-home-${isHome}`}
                 disabled={isSubmitting}
                 alt="Lancer la recherche"
               >

diff --git a/ui/components/footer.js b/ui/components/footer.js
@@ -13,7 +13,7 @@ const Footer = (props) => {
           <Row>
             <Col className="col-12 col-lg-3">
               <img
-                src="/images/marianne.svg#svgView(viewBox(19 0 162 78))"
+                src="/images/marianne.svg#svgView(viewBox(0 0 162 78))"
                 alt="Logo république française"
                 width="290"
                 height="130"

diff --git a/ui/context/Providers.js b/ui/context/Providers.js
@@ -3,25 +3,29 @@ import SearchResultContextProvider from "./SearchResultContextProvider";
 import ParameterContextProvider from "./ParameterContextProvider";
 import DisplayContextProvider from "./DisplayContextProvider";
 import PlausibleProvider from "next-plausible";
+import { ChakraProvider } from '@chakra-ui/react'
+import theme from '../theme/theme'
 
 const Providers = ({ env, children }) => {
   return (
-    <PlausibleProvider
-      domain={
-        env !== "production"
-          ? "labonnealternance-recette2.apprentissage.beta.gouv.fr"
-          : "labonnealternance.apprentissage.beta.gouv.fr"
-      }
-      trackOutboundLinks={true}
-      trackLocalhost={true}
-      enabled={true}
-    >
-      <SearchResultContextProvider>
-        <ParameterContextProvider>
-          <DisplayContextProvider>{children}</DisplayContextProvider>
-        </ParameterContextProvider>
-      </SearchResultContextProvider>
-    </PlausibleProvider>
+    <ChakraProvider theme={theme}>
+      <PlausibleProvider
+        domain={
+          env !== "production"
+            ? "labonnealternance-recette2.apprentissage.beta.gouv.fr"
+            : "labonnealternance.apprentissage.beta.gouv.fr"
+        }
+        trackOutboundLinks={true}
+        trackLocalhost={true}
+        enabled={true}
+      >
+        <SearchResultContextProvider>
+          <ParameterContextProvider>
+            <DisplayContextProvider>{children}</DisplayContextProvider>
+          </ParameterContextProvider>
+        </SearchResultContextProvider>
+      </PlausibleProvider>
+    </ChakraProvider>
   );
 };
 

diff --git a/ui/package.json b/ui/package.json
@@ -27,6 +27,9 @@
   },
   "dependencies": {
     "@appbaseio/reactivesearch": "^3.11.7",
+    "@chakra-ui/react": "2.3.5",
+    "@emotion/react": "^11",
+    "@emotion/styled": "^11",
     "@fortawesome/fontawesome-svg-core": "^1.2.28",
     "@fortawesome/free-regular-svg-icons": "^5.13.0",
     "@fortawesome/free-solid-svg-icons": "^5.13.0",
@@ -48,6 +51,7 @@
     "downshift": "5.2.0",
     "email-misspelled": "3.3.9",
     "formik": "^2.1.4",
+    "framer-motion": "^6",
     "history": "^4.10.1",
     "local-web-server": "4.2.0",
     "lodash": "4.17.20",

diff --git a/ui/public/styles/components/breadcrumb.scss b/ui/public/styles/components/breadcrumb.scss
@@ -4,5 +4,5 @@
 }
 
 .c-breadcrumb-separator {
-  margin-top: -5px;
+  margin-top: 3px;
 }
diff --git a/ui/public/styles/components/logo-idea.scss b/ui/public/styles/components/logo-idea.scss
@@ -6,7 +6,7 @@
 @media only screen and (min-width: 1250px) {
   .c-logoheader
   {
-    display: inline-block;
+    display: flex;
   }
 }
 

diff --git a/ui/public/styles/components/logobar.scss b/ui/public/styles/components/logobar.scss
@@ -103,6 +103,9 @@ form.c-logobar-form {
 }
 
 .c-regular-darkbtn.c-logobar-submit.is-home-true {
+  display: flex;
+  align-items: center;
+  justify-content: center;
   @include media-breakpoint-up(xl) { 
     padding-left: 38px;
     padding-right: 42px;

diff --git a/ui/public/styles/components/navigation.scss b/ui/public/styles/components/navigation.scss
@@ -6,6 +6,12 @@
   }
 }
 
+.c-navigation .navbar-brand {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
 .c-marianne-header {
   margin-right: 0.3rem;
   @include media-breakpoint-up(md) { 

diff --git a/ui/theme/theme.js b/ui/theme/theme.js
@@ -0,0 +1,11 @@
+import { extendTheme } from '@chakra-ui/react'
+
+const theme = extendTheme({
+  colors: {
+    overcompiled: {
+      100: "#123FFF"
+    },
+  },
+})
+
+export default theme