diff --git a/src/components/Analysis/totalAnalysisChart.scss b/src/components/Analysis/totalAnalysisChart.scss
index 520b08898791bcdba250b4002237188bdf1450ce..348f80301afc486e3072d34f954603d51a093bb5 100644
--- a/src/components/Analysis/totalAnalysisChart.scss
+++ b/src/components/Analysis/totalAnalysisChart.scss
@@ -1,5 +1,6 @@
@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;
diff --git a/src/components/Challenge/ChallengeView.tsx b/src/components/Challenge/ChallengeView.tsx
index ad5bfc1ee6c758c95f1673f8fc6bbbd7e492030a..973567aa27d99829bc479d0f5c96f65b25f95db9 100644
--- a/src/components/Challenge/ChallengeView.tsx
+++ b/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={{
diff --git a/src/components/Challenge/__snapshots__/ChallengeView.spec.tsx.snap b/src/components/Challenge/__snapshots__/ChallengeView.spec.tsx.snap
index 10e28a6a62a8e05a6dbf062b751c7e5035aaa225..bcc90ac093e8f250c8c5cd6dc483834e8ad85012 100644
--- a/src/components/Challenge/__snapshots__/ChallengeView.spec.tsx.snap
+++ b/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={
diff --git a/src/components/Challenge/challengeView.scss b/src/components/Challenge/challengeView.scss
index d49e515500a74b2cc9e3b425cdcd952170452c50..55fb3f25e166b550df3fde5585c9b1f80ed28635 100644
--- a/src/components/Challenge/challengeView.scss
+++ b/src/components/Challenge/challengeView.scss
@@ -1,6 +1,7 @@
@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;
diff --git a/src/components/Ecogesture/ecogestureList.scss b/src/components/Ecogesture/ecogestureList.scss
index 64944bf567292a7c9ce996e2cf11215651ca9a49..3d857bdcb5f9aecde4d6b0acc4f97264bcdd7980 100644
--- a/src/components/Ecogesture/ecogestureList.scss
+++ b/src/components/Ecogesture/ecogestureList.scss
@@ -1,6 +1,7 @@
@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;
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index ba1deeb969e1e7a2fbfaf82cc3663a939392399c..b8ea60d70de0d180bd59ed48e142b0eab31967d2 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -1,124 +1,139 @@
-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
diff --git a/src/components/Header/header.scss b/src/components/Header/header.scss
index 35ef9122812653b396cdcc5eec1ec7df64932472..325ab08bd8fd1171b56dc7dc20bbfb2fef5bb917 100644
--- a/src/components/Header/header.scss
+++ b/src/components/Header/header.scss
@@ -1,72 +1,77 @@
-@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;
+}
diff --git a/src/components/Navbar/navBar.scss b/src/components/Navbar/navBar.scss
index a252b6b325af4e88335531c12ae1ecc223ed45b9..d9b924b35db71101867b68dbe59387a300f817b6 100644
--- a/src/components/Navbar/navBar.scss
+++ b/src/components/Navbar/navBar.scss
@@ -1,5 +1,6 @@
@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;
diff --git a/src/components/Splash/splashRoot.scss b/src/components/Splash/splashRoot.scss
index 11f02d688547e70bd3f40719993fcabd7356472b..2ecb1128187bac7bd228bf2baaf358e17b56a404 100644
--- a/src/components/Splash/splashRoot.scss
+++ b/src/components/Splash/splashRoot.scss
@@ -1,9 +1,10 @@
@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;
diff --git a/src/styles/base/_layout.scss b/src/styles/base/_layout.scss
index 5210a2da96856e9b50517dc5741819354bbe29df..f0f737c9184f4eaed17de52e74406e069bba8ee6 100644
--- a/src/styles/base/_layout.scss
+++ b/src/styles/base/_layout.scss
@@ -1,5 +1,6 @@
@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;
diff --git a/src/styles/base/_z-index.scss b/src/styles/base/_z-index.scss
new file mode 100644
index 0000000000000000000000000000000000000000..17a5dea8e7482596a2e437d272f293d7242f99c8
--- /dev/null
+++ b/src/styles/base/_z-index.scss
@@ -0,0 +1,5 @@
+$z-filterMenu: 3;
+$z-pieChart: 5;
+$z-dialog: 10;
+$z-header: 18;
+$z-splash: 1500;
diff --git a/src/styles/components/_dialog.scss b/src/styles/components/_dialog.scss
index fd224c27ae7739cd2c077407db263d1052c02883..46650413df5aae5d31bad6a80dfb57df8bd3b6d1 100644
--- a/src/styles/components/_dialog.scss
+++ b/src/styles/components/_dialog.scss
@@ -1,4 +1,5 @@
@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;
}
}