fix(Challenge): fix challenge title and banner display, it was overflowing on header.

src/components/Analysis/totalAnalysisChart.scss

 @import '../../styles/base/color';
 @import '../../styles/base/breakpoint';
+@import '../../styles/base/z-index';
 
 .totalAnalysis-container {
   display: flex;
@@ -26,7 +27,7 @@
     position: absolute;
     border-radius: 50%;
     background: $dark-light-2;
-    z-index: 5;
+    z-index: $z-pieChart;
     padding: 1rem;
     display: flex;
     flex-direction: column;

src/components/Challenge/ChallengeView.tsx

@@ -135,12 +135,9 @@ const ChallengeView: React.FC = () => {
       <Header
         setHeaderHeight={defineHeaderHeight}
         desktopTitleKey={'common.title_challenge'}
+        isBuilding={true}
       ></Header>
       <Content height={headerHeight}>
-        <div className="building-banner">
-          <div className="title">{t('challenge.banner.title')}</div>
-          <div className="content">{t('challenge.banner.content')}</div>
-        </div>
         <div
           className="challengeSlider"
           onClick={resetValues}
@@ -151,6 +148,10 @@ const ChallengeView: React.FC = () => {
           onMouseMove={handleClickOrTouchMove}
           onMouseUp={handleClickOrTouchEnd}
         >
+          <div className="building-banner">
+            <div className="title">{t('challenge.banner.title')}</div>
+            <div className="content">{t('challenge.banner.content')}</div>
+          </div>
           <div
             className="container"
             style={{

src/components/Challenge/__snapshots__/ChallengeView.spec.tsx.snap

@@ -8,25 +8,12 @@ exports[`ChallengeView component should be rendered correctly 1`] = `
   />
   <Header
     desktopTitleKey="common.title_challenge"
+    isBuilding={true}
     setHeaderHeight={[Function]}
   />
   <Content
     height={0}
   >
-    <div
-      className="building-banner"
-    >
-      <div
-        className="title"
-      >
-        challenge.banner.title
-      </div>
-      <div
-        className="content"
-      >
-        challenge.banner.content
-      </div>
-    </div>
     <div
       className="challengeSlider"
       onClick={[Function]}
@@ -37,6 +24,20 @@ exports[`ChallengeView component should be rendered correctly 1`] = `
       onTouchMove={[Function]}
       onTouchStart={[Function]}
     >
+      <div
+        className="building-banner"
+      >
+        <div
+          className="title"
+        >
+          challenge.banner.title
+        </div>
+        <div
+          className="content"
+        >
+          challenge.banner.content
+        </div>
+      </div>
       <div
         className="container"
         style={

src/components/Challenge/challengeView.scss

 @import '../../styles/base/breakpoint';
 @import '../../styles/base/typo-variables';
 @import '../../styles/base/color';
+@import '../../styles/base/z-index';
 
 .challengeSlider {
   min-height: inherit;
@@ -12,7 +13,7 @@
   user-select: none;
   @media all and (min-width: $width-tablet) {
     margin: auto;
-    margin-top: 3rem;
+    // margin-top: 3rem; //TODO: uncomment when wip is removed from challenges
     padding: 5rem 2rem 2rem 2rem;
     min-height: 0;
   }
@@ -39,13 +40,11 @@
   padding: 0.5rem 1rem;
   text-align: center;
   height: 75px;
-  margin: 1rem;
-  z-index: 10000;
-  top: 0;
+  margin: 0 1rem;
+  z-index: calc(#{$z-header} - 1);
   border-radius: 6px;
-  @media all and (min-width: $width-tablet) {
-    top: 4rem;
-  }
+  top: 14px;
+  left: 0;
   .title {
     font-weight: 700;
     margin-bottom: 0.1rem;

src/components/Ecogesture/ecogestureList.scss

 @import 'src/styles/base/breakpoint';
 @import 'src/styles/base/color';
 @import 'src/styles/base/typo-variables';
+@import 'src/styles/base/z-index';
 
 // EcogestureCardContainer
 .ecogesture-root {
@@ -147,7 +148,7 @@ div.filter-menu {
   box-sizing: border-box;
   box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.55);
   border-radius: 4px;
-  z-index: 3;
+  z-index: $z-filterMenu;
   width: 220px;
   padding: 0.5rem 0rem;
   font-size: 0.875rem;

src/components/Header/Header.tsx

-import React, { useCallback, useEffect, useRef } from 'react'
-import './header.scss'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import { useSelector, useDispatch } from 'react-redux'
-import { AppStore } from 'store'
-import { updateModalIsFeedbacksOpen } from 'store/modal/modal.actions'
-import { useHistory } from 'react-router-dom'
-
-import { ScreenType } from 'enum/screen.enum'
-
-import IconButton from '@material-ui/core/IconButton'
-import Icon from 'cozy-ui/transpiled/react/Icon'
-import BackArrowIcon from 'assets/icons/ico/back-arrow.svg'
-import FeedbacksIcon from 'assets/icons/ico/feedbacks.svg'
-
-interface HeaderProps {
-  textKey?: string
-  desktopTitleKey?: string
-  displayBackArrow?: boolean
-  children?: React.ReactNode
-  setHeaderHeight(height: number): void
-}
-
-const Header: React.FC<HeaderProps> = ({
-  textKey,
-  desktopTitleKey,
-  displayBackArrow,
-  children,
-  setHeaderHeight,
-}: HeaderProps) => {
-  const { t } = useI18n()
-  const history = useHistory()
-  const header = useRef(null)
-  const dispatch = useDispatch()
-  const { screenType } = useSelector((state: AppStore) => state.ecolyo.global)
-
-  const cozyBarHeight = 48
-  const headerBottomHeight = 8
-
-  const handleClickBack = useCallback(() => {
-    history.goBack()
-  }, [history])
-
-  const handleClickFeedbacks = () => {
-    dispatch(updateModalIsFeedbacksOpen(true))
-  }
-
-  useEffect(() => {
-    if (screenType === ScreenType.MOBILE) {
-      setHeaderHeight(
-        header.current
-          ? header.current.clientHeight - cozyBarHeight - headerBottomHeight
-          : 0
-      )
-    } else {
-      setHeaderHeight(
-        header.current ? header.current.clientHeight - headerBottomHeight : 0
-      )
-    }
-  }, [screenType, children, setHeaderHeight])
-
-  return (
-    <div className="header" ref={header}>
-      <div className="header-top">
-        <div className="header-content">
-          <div
-            className={
-              !textKey && !desktopTitleKey
-                ? 'header-content-top header-content-top-right'
-                : 'header-content-top'
-            }
-          >
-            {textKey && (
-              <div
-                className={`header-text ${
-                  screenType === ScreenType.MOBILE
-                    ? 'text-14-normal-uppercase'
-                    : 'text-22-bold'
-                }`}
-              >
-                {t(textKey)}
-              </div>
-            )}
-            {desktopTitleKey && (
-              <div
-                className={`header-text-desktop ${
-                  screenType === ScreenType.MOBILE
-                    ? 'text-14-normal-uppercase'
-                    : 'text-22-bold'
-                }`}
-              >
-                {displayBackArrow && (
-                  <IconButton
-                    aria-label={t('header.accessibility.button_back')}
-                    className="header-back-button"
-                    onClick={handleClickBack}
-                  >
-                    <Icon icon={BackArrowIcon} size={16} />
-                  </IconButton>
-                )}
-                {t(desktopTitleKey)}
-              </div>
-            )}
-            <IconButton
-              aria-label={t('header.accessibility.button_open_feedbacks')}
-              className={
-                !textKey && !desktopTitleKey
-                  ? 'header-feedbacks-button right'
-                  : 'header-feedbacks-button'
-              }
-              onClick={handleClickFeedbacks}
-            >
-              <Icon icon={FeedbacksIcon} size={40} />
-            </IconButton>
-          </div>
-          {children}
-        </div>
-      </div>
-      <div className="header-bar"></div>
-    </div>
-  )
-}
-
-export default Header
+import React, { useCallback, useEffect, useRef } from 'react'
+import './header.scss'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { useSelector, useDispatch } from 'react-redux'
+import { AppStore } from 'store'
+import { updateModalIsFeedbacksOpen } from 'store/modal/modal.actions'
+import { useHistory } from 'react-router-dom'
+
+import { ScreenType } from 'enum/screen.enum'
+
+import IconButton from '@material-ui/core/IconButton'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import BackArrowIcon from 'assets/icons/ico/back-arrow.svg'
+import FeedbacksIcon from 'assets/icons/ico/feedbacks.svg'
+import HammerLeft from 'assets/icons/ico/hammer-left.svg'
+import HammerRight from 'assets/icons/ico/hammer-right.svg'
+
+interface HeaderProps {
+  textKey?: string
+  desktopTitleKey?: string
+  displayBackArrow?: boolean
+  children?: React.ReactNode
+  setHeaderHeight(height: number): void
+  isBuilding?: boolean
+}
+
+const Header: React.FC<HeaderProps> = ({
+  textKey,
+  desktopTitleKey,
+  displayBackArrow,
+  children,
+  setHeaderHeight,
+  isBuilding,
+}: HeaderProps) => {
+  const { t } = useI18n()
+  const history = useHistory()
+  const header = useRef(null)
+  const dispatch = useDispatch()
+  const { screenType } = useSelector((state: AppStore) => state.ecolyo.global)
+
+  const cozyBarHeight = 48
+  const headerBottomHeight = 8
+
+  const handleClickBack = useCallback(() => {
+    history.goBack()
+  }, [history])
+
+  const handleClickFeedbacks = () => {
+    dispatch(updateModalIsFeedbacksOpen(true))
+  }
+
+  useEffect(() => {
+    if (screenType === ScreenType.MOBILE) {
+      setHeaderHeight(
+        header.current
+          ? header.current.clientHeight - cozyBarHeight - headerBottomHeight
+          : 0
+      )
+    } else {
+      setHeaderHeight(
+        header.current ? header.current.clientHeight - headerBottomHeight : 0
+      )
+    }
+  }, [screenType, children, setHeaderHeight])
+
+  return (
+    <div className="header" ref={header}>
+      <div className="header-top">
+        <div className="header-content">
+          <div
+            className={
+              !textKey && !desktopTitleKey
+                ? 'header-content-top header-content-top-right'
+                : 'header-content-top'
+            }
+          >
+            {textKey && (
+              <div
+                className={`header-text ${
+                  screenType === ScreenType.MOBILE
+                    ? 'text-14-normal-uppercase'
+                    : 'text-22-bold'
+                }`}
+              >
+                {t(textKey)}
+              </div>
+            )}
+            {desktopTitleKey && (
+              <div
+                className={`header-text-desktop ${
+                  screenType === ScreenType.MOBILE
+                    ? 'text-14-normal-uppercase'
+                    : 'text-22-bold'
+                }`}
+              >
+                {displayBackArrow && (
+                  <IconButton
+                    aria-label={t('header.accessibility.button_back')}
+                    className="header-back-button"
+                    onClick={handleClickBack}
+                  >
+                    <Icon icon={BackArrowIcon} size={16} />
+                  </IconButton>
+                )}
+                {/* {t(desktopTitleKey)} */}
+                {isBuilding ? (
+                  <>
+                    <div className="building-title">
+                      <Icon icon={HammerLeft} size={17} />
+                      <span className="isBuilding">{t(desktopTitleKey)}</span>
+                      <Icon icon={HammerRight} size={17} />
+                    </div>
+                  </>
+                ) : (
+                  <span>{t(desktopTitleKey)}</span>
+                )}
+              </div>
+            )}
+            <IconButton
+              aria-label={t('header.accessibility.button_open_feedbacks')}
+              className={
+                !textKey && !desktopTitleKey
+                  ? 'header-feedbacks-button right'
+                  : 'header-feedbacks-button'
+              }
+              onClick={handleClickFeedbacks}
+            >
+              <Icon icon={FeedbacksIcon} size={40} />
+            </IconButton>
+          </div>
+          {children}
+        </div>
+      </div>
+      <div className="header-bar"></div>
+    </div>
+  )
+}
+
+export default Header

src/components/Header/header.scss

-@import 'src/styles/base/breakpoint';
-@import 'src/styles/base/color';
-
-.header {
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-  overflow: hidden;
-  width: 100%;
-  z-index: 18;
-  position: fixed;
-  top: 48px;
-  left: 0;
-  @media #{$large-phone} {
-    top: 0;
-  }
-  .header-top {
-    background: radial-gradient(
-      74.83% 76.97% at 50% 13.64%,
-      #343641 0%,
-      #1b1c22 100%
-    );
-    width: 100%;
-    .header-text {
-      padding: 0 1rem 1rem 1rem;
-      color: $grey-bright;
-    }
-  }
-  .header-content {
-    margin: 0 0 0 220px;
-    display: flex;
-    flex-direction: column;
-    @media #{$tablet} {
-      margin: 0;
-    }
-    @media #{$large-phone} {
-      margin: 60px 0 0 0;
-    }
-    .header-content-top {
-      display: flex;
-      flex-direction: row;
-      &.header-content-top-right {
-        justify-content: flex-end;
-      }
-      .header-text {
-        padding: 2rem 1rem;
-        flex: 1;
-      }
-      .header-text-desktop {
-        display: flex;
-        flex: 1;
-        padding: 2rem 1.25rem;
-        color: $grey-bright;
-      }
-      .header-back-button {
-        padding: 0 0.75rem;
-      }
-      @media #{$large-phone} {
-        .header-text {
-          padding: 0 1rem 1rem 1rem;
-          color: $grey-bright;
-        }
-        .header-text-desktop {
-          display: none;
-        }
-        .header-feedbacks-button {
-          display: none;
-        }
-      }
-    }
-  }
-}
+@import 'src/styles/base/breakpoint';
+@import 'src/styles/base/color';
+@import 'src/styles/base/z-index';
+
+.header {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  overflow: hidden;
+  width: 100%;
+  z-index: $z-header;
+  position: fixed;
+  top: 48px;
+  left: 0;
+  @media #{$large-phone} {
+    top: 0;
+  }
+  .header-top {
+    background: radial-gradient(
+      74.83% 76.97% at 50% 13.64%,
+      #343641 0%,
+      #1b1c22 100%
+    );
+    width: 100%;
+    .header-text {
+      padding: 0 1rem 1rem 1rem;
+      color: $grey-bright;
+    }
+  }
+  .header-content {
+    margin: 0 0 0 220px;
+    display: flex;
+    flex-direction: column;
+    @media #{$tablet} {
+      margin: 0;
+    }
+    @media #{$large-phone} {
+      margin: 60px 0 0 0;
+    }
+    .header-content-top {
+      display: flex;
+      flex-direction: row;
+      &.header-content-top-right {
+        justify-content: flex-end;
+      }
+      .header-text {
+        padding: 2rem 1rem;
+        flex: 1;
+      }
+      .header-text-desktop {
+        display: flex;
+        flex: 1;
+        padding: 2rem 1.25rem;
+        color: $grey-bright;
+      }
+      .header-back-button {
+        padding: 0 0.75rem;
+      }
+      @media #{$large-phone} {
+        .header-text {
+          padding: 0 1rem 1rem 1rem;
+          color: $grey-bright;
+        }
+        .header-text-desktop {
+          display: none;
+        }
+        .header-feedbacks-button {
+          display: none;
+        }
+      }
+    }
+  }
+}
+
+.building-title {
+  text-align: center;
+}

src/components/Navbar/navBar.scss

 @import 'src/styles/base/color';
 @import 'src/styles/base/breakpoint';
+@import 'src/styles/base/z-index';
 
 .o-sidebar {
   background-color: $dark-light;
@@ -8,7 +9,7 @@
   border-top: unset;
   border-right: unset;
   position: relative;
-  z-index: 19;
+  z-index: calc(#{$z-header} + 1);
 }
 .logos-container {
   position: absolute;

src/components/Splash/splashRoot.scss

 @import 'src/styles/base/color';
 @import 'src/styles/base/breakpoint';
+@import 'src/styles/base/z-index';
 
 .splash-root {
   position: fixed;
-  z-index: 1500;
+  z-index: $z-splash;
   left: 0;
   top: 0;
   height: 100vh;

src/styles/base/_layout.scss

 @import 'color';
 @import '../base/breakpoint';
+@import '../base/z-index';
 
 html {
   background: $dark-2;
@@ -52,7 +53,7 @@ body {
   flex-direction: column;
   overflow: hidden;
   width: 100%;
-  z-index: 18;
+  z-index: $z-header;
   position: fixed;
   top: 48px;
   left: 0;

src/styles/base/_z-index.scss

+$z-filterMenu: 3;
+$z-pieChart: 5;
+$z-dialog: 10;
+$z-header: 18;
+$z-splash: 1500;

src/styles/components/_dialog.scss

 @import '../base/color';
+@import '../base/z-index';
 
 div.modal-root {
   .MuiBackdrop-root {
@@ -42,7 +43,7 @@ div.modal-paper {
     top: 0.5rem;
     right: 0.5rem;
     padding: 5px 5px;
-    z-index: 10;
+    z-index: $z-dialog;
   }
 }