diff --git a/src/components/Content/Content.tsx b/src/components/Content/Content.tsx
index dad91485624f2be5de3258f192ec0ff3d621103d..0c8052a2184c3dd5c63fb9ea9abce3c1f03a9dd5 100644
--- a/src/components/Content/Content.tsx
+++ b/src/components/Content/Content.tsx
@@ -1,4 +1,5 @@
import React, { useCallback, useEffect } from 'react'
+import './content.scss'
import { useClient } from 'cozy-client'
import { history } from 'components/App'
import { useSelector, useDispatch } from 'react-redux'
@@ -110,7 +111,7 @@ const Content: React.FC<ContentProps> = ({
handleCloseClick={handleFeedbackModalClose}
/>
<div
- className="content-view"
+ className={'content-view'}
style={{
marginTop: height,
paddingBottom: 0,
diff --git a/src/components/Content/content.scss b/src/components/Content/content.scss
new file mode 100644
index 0000000000000000000000000000000000000000..8708454ac40b856ab83e5a64152b93ac5b94fee3
--- /dev/null
+++ b/src/components/Content/content.scss
@@ -0,0 +1,8 @@
+@import 'src/styles/base/breakpoint';
+
+.content-view {
+ margin-top: 116px;
+ @media #{$large-phone} {
+ margin-top: 0;
+ }
+}
diff --git a/src/components/Ecogesture/EcogestureList.tsx b/src/components/Ecogesture/EcogestureList.tsx
index 8eb2a37b427a17a97477911312d798f171d49ca7..8f4705c51240c990f0c7cb6537981c3f26f4c15d 100644
--- a/src/components/Ecogesture/EcogestureList.tsx
+++ b/src/components/Ecogesture/EcogestureList.tsx
@@ -202,7 +202,7 @@ const EcogestureList: React.FC<EcogestureListProps> = ({
</div>
<div className="ecogesture-content">
{!ecogestures || !isLoaded ? (
- <div className="content-view-loading">
+ <div className="ecogesture-content-loading">
<StyledChallengeSpinner size="5em" />
</div>
) : ecogestures && activeFilter === Usage[Usage.ALL] ? (
diff --git a/src/components/Ecogesture/ecogestureList.scss b/src/components/Ecogesture/ecogestureList.scss
index 61e7087cb08676d5244761523d19db65459a27ab..287e7a0649d3052da889cdb4604e5fbda8a415ef 100644
--- a/src/components/Ecogesture/ecogestureList.scss
+++ b/src/components/Ecogesture/ecogestureList.scss
@@ -110,6 +110,15 @@
opacity: 1;
}
}
+ .ecogesture-content-loading {
+ height: 80vh;
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ color: $grey-bright;
+ }
.ecogesture-list-item {
width: 48%;
height: 8rem;
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index 038b0178973e916eb127df1eaf37c0ef042d2bc7..ba1deeb969e1e7a2fbfaf82cc3663a939392399c 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -1,4 +1,5 @@
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'
diff --git a/src/components/Header/header.scss b/src/components/Header/header.scss
new file mode 100644
index 0000000000000000000000000000000000000000..0be60bcfcced78769da2f9081cd1bf78254176e3
--- /dev/null
+++ b/src/components/Header/header.scss
@@ -0,0 +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-bar {
+ background: linear-gradient(180deg, #000000 0%, rgba(27, 28, 34, 0) 70%);
+ height: 8px;
+ width: 100%;
+ }
+ .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;
+ }
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/styles/base/_layout.scss b/src/styles/base/_layout.scss
index eaa7fc1673c05c3a5c57d3da06134eee2cc299f6..bd30179fa9662ff536666f67486a5e2b821eb0b9 100644
--- a/src/styles/base/_layout.scss
+++ b/src/styles/base/_layout.scss
@@ -46,107 +46,6 @@ body {
color: #32363f;
}
-.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-bar {
- background: linear-gradient(180deg, #000000 0%, rgba(27, 28, 34, 0) 70%);
- height: 8px;
- width: 100%;
- }
- .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;
- }
- }
- }
- }
-}
-
-.content-view {
- margin-top: 116px;
- @media #{$large-phone} {
- margin-top: 0;
- }
-}
-
-.content-view-loading {
- height: 80vh;
- width: 100%;
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- color: $grey-bright;
- .content-view-loading-text {
- padding-top: 1rem;
- margin: 0 2rem;
- text-align: center;
- }
- .content-view-loading-button {
- max-width: 50vw;
- margin-top: 1rem;
- }
-}
-
[role='main'] {
/* width */
&::-webkit-scrollbar {