fix: header

dataesr · May 13, 2022 · fcca9b9 · fcca9b9
1 parent 503bb63
commit fcca9b9
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 56 deletions.
diff --git a/src/components/interface/Header/HeaderBody.js b/src/components/interface/Header/HeaderBody.js
@@ -35,7 +35,7 @@ const HeaderBody = ({
     >
       <div className="fr-container">
         <div className={classNames(className, 'fr-header__body-row')}>
-          <div className="fr-header__brand">
+          <div className="fr-header__brand fr-enlarge-link">
             <div className="fr-header__brand-top">
               <div className="fr-header__logo">
                 {logo}

diff --git a/src/components/interface/Header/ToolItemGroup.js b/src/components/interface/Header/ToolItemGroup.js
@@ -17,14 +17,13 @@ const ToolItemGroup = ({ children, className, ...remainingProps }) => {
 
   return (
     <div
+      className={classNames(className, 'fr-header__tools-links')}
       {...dataAttributes.getAll(remainingProps)}
     >
       {isMobile && menuLinkElement && createPortal(children, menuLinkElement)}
-      <div className={classNames(className, 'fr-header__tools-links')}>
-        <ul className="fr-links-group">
-          {children}
-        </ul>
-      </div>
+      <ul className="fr-links-group">
+        {children}
+      </ul>
     </div>
   );
 };

diff --git a/src/components/interface/Header/__tests__/__snapshots__/Header.test.js.snap b/src/components/interface/Header/__tests__/__snapshots__/Header.test.js.snap
@@ -17,7 +17,7 @@ exports[`<Header /> renders correctly 1`] = `
         className="fr-header__body-row"
       >
         <div
-          className="fr-header__brand"
+          className="fr-header__brand fr-enlarge-link"
         >
           <div
             className="fr-header__brand-top"
@@ -85,50 +85,47 @@ exports[`<Header /> renders correctly 1`] = `
           data-testid="tool"
         >
           <div
+            className="fr-header__tools-links"
             data-testid="toolitemgroup"
           >
-            <div
-              className="fr-header__tools-links"
+            <ul
+              className="fr-links-group"
             >
-              <ul
-                className="fr-links-group"
+              <li
+                data-testid="toolitem"
               >
-                <li
-                  data-testid="toolitem"
+                <a
+                  className="ds-fr--flex fr-link"
+                  href="/path"
+                  target="_self"
                 >
-                  <a
-                    className="ds-fr--flex fr-link"
-                    href="/path"
-                    target="_self"
-                  >
-                    <span>
-                      <span
-                        aria-hidden={true}
-                        className="ri-1x icon-left ds-fr--v-middle fr-fi-lock-line"
-                      />
-                      Se connecter
-                    </span>
-                  </a>
-                </li>
-                <li
-                  data-test-id="toolitem"
+                  <span>
+                    <span
+                      aria-hidden={true}
+                      className="ri-1x icon-left ds-fr--v-middle fr-fi-lock-line"
+                    />
+                    Se connecter
+                  </span>
+                </a>
+              </li>
+              <li
+                data-test-id="toolitem"
+              >
+                <a
+                  className="ds-fr--flex fr-link"
+                  href="/path"
+                  target="_self"
                 >
-                  <a
-                    className="ds-fr--flex fr-link"
-                    href="/path"
-                    target="_self"
-                  >
-                    <span>
-                      <span
-                        aria-hidden={true}
-                        className="ri-1x icon-left ds-fr--v-middle fr-fi-add-circle-line"
-                      />
-                      Créer un espace
-                    </span>
-                  </a>
-                </li>
-              </ul>
-            </div>
+                  <span>
+                    <span
+                      aria-hidden={true}
+                      className="ri-1x icon-left ds-fr--v-middle fr-fi-add-circle-line"
+                    />
+                    Créer un espace
+                  </span>
+                </a>
+              </li>
+            </ul>
           </div>
           <div
             className="fr-header__search fr-modal"

diff --git a/src/style/reset-dsfr.css b/src/style/reset-dsfr.css
@@ -25,31 +25,34 @@ span.error {
 /** Icons system from remixicon */
 
 [target=_blank]:after,
+.fr-search-bar button.fr-btn:before,
 .fr-error-text:before,
 .fr-valid-text:before,
+.fr-header__navbar .fr-btn--menu:before,
+.fr-header__navbar .fr-btn--search:before,
+.fr-nav__btn:after,
+button.fr-accordion__btn[aria-expanded=true]:before,
+button.fr-accordion__btn:before,
+.fr-link--close:before,
 [class^="fr-alert"]:before {
     font-family: "remixicon";
     background-color: inherit;
     mask-image: inherit;
     -webkit-mask-image: inherit;
+    line-height: 1.2rem;
+    font-size: 1rem;
 }
 
 /**
   Accordion
  */
 button.fr-accordion__btn:before {
-    font-family: "remixicon";
     content: '\ea13';
-    background-color: inherit;
-    mask-image: inherit;
-    -webkit-mask-image: inherit;
     color: var(--text-action-high-grey);
 }
 
 button.fr-accordion__btn[aria-expanded=true]:before {
     content: '\f1af';
-    mask-image: inherit;
-    -webkit-mask-image: inherit;
 }
 
 /**
@@ -74,12 +77,8 @@ button.fr-accordion__btn[aria-expanded=true]:before {
     content: '\ee58';
 }
 
-.fr-alert .fr-link--close:before{
-    font-family: "remixicon";
+.fr-link--close:before {
     content: '\eb99';
-    background-color: inherit;
-    mask-image: inherit;
-    -webkit-mask-image: inherit;
 }
 
 /**
@@ -91,3 +90,25 @@ button.fr-accordion__btn[aria-expanded=true]:before {
     height: inherit;
     font-size: 0.9rem;
 }
+
+/**
+  Header
+ */
+
+.fr-search-bar button.fr-btn:before {
+    content: '\f0d1';
+}
+
+.fr-header__navbar .fr-btn--menu:before {
+    content: '\ef3e';
+    font-size: 1.2rem;
+}
+
+.fr-header__navbar .fr-btn--search:before {
+    content: '\f0d1';
+    font-size: 1.2rem;
+}
+
+.fr-nav__btn:after {
+    content: '\ea4e';
+}