From e3e045956329235aa6102a053e90025ad8259e37 Mon Sep 17 00:00:00 2001
From: gcarron <gcarron@grandlyon.com>
Date: Thu, 10 Dec 2020 10:55:23 +0100
Subject: [PATCH] Split all css stylesheet
---
scripts/createConnections.js | 4 +-
.../CommonKit/Modal/Modal.scss} | 28 +-
src/components/CommonKit/Modal/Modal.tsx | 2 +-
.../Connection/Auth.scss} | 14 +-
.../Connection/ConnectionLaunch.scss | 40 ++
.../Connection/ConnectionLaunch.tsx | 1 +
.../Connection/ConnectionLoginForm.scss} | 18 +-
.../Connection/ConnectionLoginForm.tsx | 2 +
.../Connection/ConnectionNotFound.scss | 16 +
.../Connection/ConnectionNotFound.tsx | 2 +-
.../Connection/ConnectionOAuthForm.scss | 21 +
.../Connection/ConnectionOAuthForm.tsx | 2 +-
.../Connection/ConnectionResult.scss | 67 ++
.../Connection/ConnectionResult.tsx | 2 +-
src/components/Connection/OAuthForm.tsx | 2 +-
.../ActivateHalfHourLoad.scss | 44 ++
.../ActivateHalfHourLoad.tsx | 1 +
.../ConsumptionNavigator.scss} | 7 +-
.../ConsumptionNavigator.tsx | 2 +-
.../ConsumptionVisualizer.scss | 17 +
.../ConsumptionVisualizer.tsx | 2 +-
.../DataloadConsumptionVisualizer.scss | 79 +++
.../DataloadConsumptionVisualizer.tsx | 2 +-
.../DetailedConsumptionVisualizer.scss | 8 +
.../DetailedConsumptionVisualizer.tsx | 2 +-
.../ErrorDataConsumptionVisualizer.scss | 14 +
.../ErrorDataConsumptionVisualizer.tsx | 1 +
.../LastDataConsumptionVisualizer.tsx | 1 +
src/components/Ecogesture/EcogestureCard.scss | 64 ++
src/components/Ecogesture/EcogestureCard.tsx | 2 +-
.../Ecogesture/EcogestureList.scss} | 167 +----
src/components/Ecogesture/EcogestureList.tsx | 1 +
.../Ecogesture/EcogestureModal.scss | 103 +++
src/components/Ecogesture/EcogestureModal.tsx | 1 +
src/components/FAQ/FAQContent.scss | 30 +
src/components/FAQ/FAQContent.tsx | 1 +
.../_faq.scss => components/FAQ/FAQLink.scss} | 33 +-
src/components/FAQ/FAQLink.tsx | 1 +
src/components/Favorite/FavoriteModal.scss | 31 +
src/components/Favorite/FavoriteModal.tsx | 2 +-
.../Feedback/FeedBackModal.scss} | 3 +-
src/components/Feedback/FeedbackModal.tsx | 1 +
src/components/FluidChart/FluidChart.scss | 51 ++
src/components/FluidChart/FluidChart.tsx | 2 +-
.../FluidChart/FluidChartContent.scss | 64 ++
.../FluidChart/FluidChartContent.tsx | 1 +
.../FluidChart/FluidChartSlide.scss | 19 +
src/components/FluidChart/FluidChartSlide.tsx | 1 +
.../FluidChart/FluidChartSwipe.scss | 15 +
src/components/FluidChart/FluidChartSwipe.tsx | 1 +
.../Home/OldFluidDataModal.scss} | 2 +
src/components/Home/OldFluidDataModal.tsx | 2 +-
.../Konnector/KonnectorViewerCard.scss | 54 ++
.../Konnector/KonnectorViewerCard.tsx | 2 +-
.../Konnector/KonnectorViewerList.scss | 28 +
.../Konnector/KonnectorViewerList.tsx | 2 +-
.../LegalNotice/LegalNoticeLink.scss} | 5 +-
.../LegalNotice/LegalNoticeLink.tsx | 1 +
.../LegalNotice/LegalNoticeView.scss | 38 ++
.../LegalNotice/LegalNoticeView.tsx | 1 +
.../Navbar/NavBar.scss} | 4 +-
src/components/Navbar/Navbar.tsx | 1 +
.../Options/ReportOptions.scss} | 2 +
src/components/Options/ReportOptions.tsx | 1 +
.../FluidPerformanceIndicator.scss} | 31 +-
.../FluidPerformanceIndicator.tsx | 2 +-
.../PerformanceIndicatorContent.tsx | 1 +
.../SingleFluid/SingleFluidIndicators.scss | 26 +
.../SingleFluid/SingleFluidIndicators.tsx | 2 +-
.../SingleFluid/SingleFluidRedirect.scss} | 3 -
.../SingleFluid/SingleFluidRedirect.tsx | 2 +-
.../SingleFluid/SingleFluidView.scss | 8 +
.../SingleFluid/SingleFluidView.tsx | 2 +-
src/components/Splash/SplashRoot.scss | 29 +
src/components/Splash/SplashRoot.tsx | 2 +-
src/components/Splash/SplashScreen.scss | 45 ++
src/components/Splash/SplashScreen.tsx | 1 +
src/components/Splash/SplashScreenError.tsx | 1 +
.../Version/Version.scss} | 3 +-
src/components/Version/Version.tsx | 1 +
src/components/Welcome/WelcomeModal.scss | 31 +
src/components/Welcome/WelcomeModal.tsx | 2 +-
src/styles/components/_challenges.scss | 628 ------------------
.../components/_consumptionvisualizer.scss | 111 ----
src/styles/components/_fluid.scss | 194 ------
src/styles/components/_konnector.scss | 235 -------
src/styles/components/_panel.scss | 6 -
src/styles/components/_splash.scss | 72 --
src/styles/index.scss | 20 -
89 files changed, 1032 insertions(+), 1564 deletions(-)
rename src/{styles/components/_modal.scss => components/CommonKit/Modal/Modal.scss} (65%)
rename src/{styles/components/_auth.scss => components/Connection/Auth.scss} (59%)
create mode 100644 src/components/Connection/ConnectionLaunch.scss
rename src/{styles/components/_form.scss => components/Connection/ConnectionLoginForm.scss} (77%)
create mode 100644 src/components/Connection/ConnectionNotFound.scss
create mode 100644 src/components/Connection/ConnectionOAuthForm.scss
create mode 100644 src/components/Connection/ConnectionResult.scss
create mode 100644 src/components/ConsumptionNavigator/ActivateHalfHourLoad.scss
rename src/{styles/components/_navigator.scss => components/ConsumptionNavigator/ConsumptionNavigator.scss} (75%)
create mode 100644 src/components/ConsumptionVisualizer/ConsumptionVisualizer.scss
create mode 100644 src/components/ConsumptionVisualizer/DataloadConsumptionVisualizer.scss
create mode 100644 src/components/ConsumptionVisualizer/DetailedConsumptionVisualizer.scss
create mode 100644 src/components/ConsumptionVisualizer/ErrorDataConsumptionVisualizer.scss
create mode 100644 src/components/Ecogesture/EcogestureCard.scss
rename src/{styles/components/_ecogesture.scss => components/Ecogesture/EcogestureList.scss} (51%)
create mode 100644 src/components/Ecogesture/EcogestureModal.scss
create mode 100644 src/components/FAQ/FAQContent.scss
rename src/{styles/components/_faq.scss => components/FAQ/FAQLink.scss} (59%)
create mode 100644 src/components/Favorite/FavoriteModal.scss
rename src/{styles/components/_feedback.scss => components/Feedback/FeedBackModal.scss} (96%)
create mode 100644 src/components/FluidChart/FluidChart.scss
create mode 100644 src/components/FluidChart/FluidChartContent.scss
create mode 100644 src/components/FluidChart/FluidChartSlide.scss
create mode 100644 src/components/FluidChart/FluidChartSwipe.scss
rename src/{styles/components/_oldDataModal.scss => components/Home/OldFluidDataModal.scss} (94%)
create mode 100644 src/components/Konnector/KonnectorViewerCard.scss
create mode 100644 src/components/Konnector/KonnectorViewerList.scss
rename src/{styles/components/_legalnotice.scss => components/LegalNotice/LegalNoticeLink.scss} (93%)
create mode 100644 src/components/LegalNotice/LegalNoticeView.scss
rename src/{styles/components/_nav.scss => components/Navbar/NavBar.scss} (96%)
rename src/{styles/components/_report.scss => components/Options/ReportOptions.scss} (94%)
rename src/{styles/components/_indicators.scss => components/PerformanceIndicator/FluidPerformanceIndicator.scss} (83%)
create mode 100644 src/components/SingleFluid/SingleFluidIndicators.scss
rename src/{styles/components/_card.scss => components/SingleFluid/SingleFluidRedirect.scss} (67%)
create mode 100644 src/components/SingleFluid/SingleFluidView.scss
create mode 100644 src/components/Splash/SplashRoot.scss
create mode 100644 src/components/Splash/SplashScreen.scss
rename src/{styles/components/_version.scss => components/Version/Version.scss} (61%)
create mode 100644 src/components/Welcome/WelcomeModal.scss
delete mode 100644 src/styles/components/_challenges.scss
delete mode 100644 src/styles/components/_consumptionvisualizer.scss
delete mode 100644 src/styles/components/_fluid.scss
delete mode 100644 src/styles/components/_konnector.scss
delete mode 100644 src/styles/components/_panel.scss
delete mode 100644 src/styles/components/_splash.scss
diff --git a/scripts/createConnections.js b/scripts/createConnections.js
index 4cd7ec75f..52e256761 100644
--- a/scripts/createConnections.js
+++ b/scripts/createConnections.js
@@ -4,9 +4,9 @@ const axios = require('axios')
const headers = {
Accept: 'application/json',
Authorization:
- 'Bearer eyJhbGciOiJIUzUxMiIsInR5cCI6IkpXVCJ9.eyJhdWQiOiJhcHAiLCJpYXQiOjE2MDY5OTU1OTgsImlzcyI6ImNvenkudG9vbHM6ODA4MCIsInN1YiI6ImVjb2x5byIsInNlc3Npb25faWQiOiI5ODI3ZmVlMjc5MDNmN2U2MGRmNjUwMThjZjAwOTk1ZiJ9.epzyD0QWnP5LHTXgEFaKLAGyrtDT0gjFzW6bQFsoLu2YFYN1ZVLyhz4vF5gTHZoaIwHETCXShnpwQiAICwtU8w',
+ 'Bearer eyJhbGciOiJIUzUxMiIsInR5cCI6IkpXVCJ9.eyJhdWQiOiJhcHAiLCJpYXQiOjE2MDc1OTMzNzAsImlzcyI6ImNvenkudG9vbHM6ODA4MCIsInN1YiI6ImVjb2x5byIsInNlc3Npb25faWQiOiI5ZDMxM2U2OThjMmQ5ZDE4NTZhMmJmNmMxMTAwOWU1MyJ9.TMoNUwm-omHauYmYzoep7I94e-NftJ7BX9jThe6axJThroRdng-SaADDvnTgSwB4UJF6rVIpdfMrOPG5k-rRow',
Cookie:
- 'cozysessid=AAAAAF_Izko5ODI3ZmVlMjc5MDNmN2U2MGRmNjUwMThjZjAwOTk1Zo-CT2_orrO4wnc6rr-gk-V_8gYax1xpEJmZpStKuADY',
+ 'cozysessid=AAAAAF_OTPM5ZDMxM2U2OThjMmQ5ZDE4NTZhMmJmNmMxMTAwOWU1Mw_c9TTnUCv2heuSwCbk7S4-Bdykc1uey24fI6j1ePpz',
'content-type': 'application/json',
}
diff --git a/src/styles/components/_modal.scss b/src/components/CommonKit/Modal/Modal.scss
similarity index 65%
rename from src/styles/components/_modal.scss
rename to src/components/CommonKit/Modal/Modal.scss
index f8035c490..c9126fb52 100644
--- a/src/styles/components/_modal.scss
+++ b/src/components/CommonKit/Modal/Modal.scss
@@ -1,5 +1,5 @@
-@import '../base/color';
-@import '../base/breakpoint';
+@import 'src/styles/base/color';
+@import 'src/styles/base/breakpoint';
.modal-overlay {
display: none;
@@ -53,33 +53,9 @@
align-items: center;
color: $white;
}
- .wm-header {
- background: $multi-color-radial-gradient;
- background-clip: 'text';
- -webkit-background-clip: text;
- color: transparent;
- margin-top: 2rem;
- }
- .wm-name {
- background: $multi-color-radial-gradient;
- background-clip: 'text';
- -webkit-background-clip: text;
- color: transparent;
- margin-bottom: 1.25rem;
- }
.button-ok {
width: 90%;
margin-bottom: 2rem;
}
- .wm-perso {
- text-align: center;
- width: 60%;
- margin: 1rem;
- }
- .wm-connect {
- text-align: center;
- width: 88%;
- margin: 1rem;
- }
}
}
diff --git a/src/components/CommonKit/Modal/Modal.tsx b/src/components/CommonKit/Modal/Modal.tsx
index 5a1b69cf3..49e08848b 100644
--- a/src/components/CommonKit/Modal/Modal.tsx
+++ b/src/components/CommonKit/Modal/Modal.tsx
@@ -1,7 +1,7 @@
import React, { useEffect, ReactNode } from 'react'
import StyledIconButton from 'components/CommonKit/IconButton/StyledIconButton'
import CloseIcon from 'assets/icons/ico/close.svg'
-
+import './Modal.scss'
interface ModalProps {
open: boolean
border?: boolean
diff --git a/src/styles/components/_auth.scss b/src/components/Connection/Auth.scss
similarity index 59%
rename from src/styles/components/_auth.scss
rename to src/components/Connection/Auth.scss
index b4c77eef0..c9f2c45ea 100644
--- a/src/styles/components/_auth.scss
+++ b/src/components/Connection/Auth.scss
@@ -1,22 +1,22 @@
-@import '../base/color';
-@import '../base/breakpoint';
+@import 'src/styles/base/color';
+@import 'src/styles/base/breakpoint';
-.authform-button-content{
+.authform-button-content {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
@media #{$large-phone} {
- justify-content: left;
+ justify-content: left;
}
- .authform-button-content-icon{
+ .authform-button-content-icon {
margin: 0 1.375rem;
}
- .authform-button-text{
+ .authform-button-text {
display: flex;
flex-direction: column;
align-items: flex-start;
text-align: left;
max-width: 10.625rem;
}
-}
\ No newline at end of file
+}
diff --git a/src/components/Connection/ConnectionLaunch.scss b/src/components/Connection/ConnectionLaunch.scss
new file mode 100644
index 000000000..52183f931
--- /dev/null
+++ b/src/components/Connection/ConnectionLaunch.scss
@@ -0,0 +1,40 @@
+@import 'src/styles/base/color';
+@import 'src/styles/base/breakpoint';
+
+// KonnectorLoading
+.klaunch-content {
+ margin: 0.5rem 1.5rem;
+ @media #{$large-phone} {
+ margin: 0.5rem 0;
+ }
+ .klaunch-content-text {
+ color: $grey-bright;
+ margin: 1rem;
+ text-align: center;
+ .kc-wait {
+ color: $soft-grey;
+ margin-bottom: 2rem;
+ }
+ }
+ .klaunch-content-text-center {
+ text-align: center;
+ }
+ .klaunch-info {
+ margin: 1.5rem;
+ .konnector-config {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ text-align: center;
+ .kce-picto-txt {
+ color: $red-primary;
+ margin: 1.25rem;
+ }
+ .kcs-picto-txt {
+ color: $multi-color;
+ margin: 1.25rem;
+ }
+ }
+ }
+}
diff --git a/src/components/Connection/ConnectionLaunch.tsx b/src/components/Connection/ConnectionLaunch.tsx
index 0a221cacb..fc63cb1a6 100644
--- a/src/components/Connection/ConnectionLaunch.tsx
+++ b/src/components/Connection/ConnectionLaunch.tsx
@@ -17,6 +17,7 @@ import Modal from 'components/CommonKit/Modal/Modal'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import errorIcon from 'assets/icons/visu/data-nok.svg'
import successIcon from 'assets/icons/visu/data-ok.svg'
+import './ConnectionLaunch.scss'
const loadingOptions = {
loop: true,
diff --git a/src/styles/components/_form.scss b/src/components/Connection/ConnectionLoginForm.scss
similarity index 77%
rename from src/styles/components/_form.scss
rename to src/components/Connection/ConnectionLoginForm.scss
index cdacb2d40..258cf9df8 100644
--- a/src/styles/components/_form.scss
+++ b/src/components/Connection/ConnectionLoginForm.scss
@@ -1,5 +1,19 @@
-@import '../base/color';
-@import '../base/breakpoint';
+@import 'src/styles/base/color';
+@import 'src/styles/base/breakpoint';
+
+// KonnectorLoginForm
+.kloginauthform {
+ .create-account {
+ color: $grey-bright;
+ }
+ .kloginauthform-text {
+ color: $grey-bright;
+ padding-top: 1rem;
+ }
+ .kloginauthform-button {
+ margin-bottom: 1rem;
+ }
+}
.form {
padding: 1rem;
diff --git a/src/components/Connection/ConnectionLoginForm.tsx b/src/components/Connection/ConnectionLoginForm.tsx
index e8a494ea2..c61650dae 100644
--- a/src/components/Connection/ConnectionLoginForm.tsx
+++ b/src/components/Connection/ConnectionLoginForm.tsx
@@ -14,6 +14,8 @@ import iconGRDFLogo from 'assets/icons/visu/grdf-logo.svg'
import iconEGLLogo from 'assets/icons/visu/egl-logo.svg'
import StyledAuthButton from 'components/CommonKit/Button/StyledAuthButton'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+import './Auth.scss'
+import './ConnectionLoginForm.scss'
interface ConnectionLoginFormProps {
fluidConfig: FluidConfig
diff --git a/src/components/Connection/ConnectionNotFound.scss b/src/components/Connection/ConnectionNotFound.scss
new file mode 100644
index 000000000..180ec9800
--- /dev/null
+++ b/src/components/Connection/ConnectionNotFound.scss
@@ -0,0 +1,16 @@
+@import 'src/styles/base/color';
+@import 'src/styles/base/breakpoint';
+// KonnectorNotFound
+.knotfound {
+ margin: 0 1.5rem;
+ @media #{$large-phone} {
+ margin: 0;
+ }
+ .knotfound-text {
+ color: $grey-bright;
+ padding-top: 1rem;
+ }
+ .knotfound-button {
+ margin-bottom: 1rem;
+ }
+}
diff --git a/src/components/Connection/ConnectionNotFound.tsx b/src/components/Connection/ConnectionNotFound.tsx
index 96a388bb3..fa24ecf2a 100644
--- a/src/components/Connection/ConnectionNotFound.tsx
+++ b/src/components/Connection/ConnectionNotFound.tsx
@@ -2,7 +2,7 @@ import React from 'react'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import StyledButton from 'components/CommonKit/Button/StyledButton'
-
+import './ConnectionNotFound.scss'
interface ConnectionNotFoundProps {
konnectorSlug: string
}
diff --git a/src/components/Connection/ConnectionOAuthForm.scss b/src/components/Connection/ConnectionOAuthForm.scss
new file mode 100644
index 000000000..ba1d2923f
--- /dev/null
+++ b/src/components/Connection/ConnectionOAuthForm.scss
@@ -0,0 +1,21 @@
+@import 'src/styles/base/color';
+@import 'src/styles/base/breakpoint';
+// KonnectorOAuthForm
+.koauthform {
+ margin: 0 1.5rem;
+ padding: 0 1rem;
+ .create-account {
+ color: $grey-bright;
+ }
+ @media #{$large-phone} {
+ margin: 0;
+ padding: 0 1rem;
+ }
+ .koauthform-text {
+ color: $grey-bright;
+ padding-top: 1rem;
+ }
+ .koauthform-button {
+ margin-bottom: 1rem;
+ }
+}
diff --git a/src/components/Connection/ConnectionOAuthForm.tsx b/src/components/Connection/ConnectionOAuthForm.tsx
index 550f0d8d6..6594f99ea 100644
--- a/src/components/Connection/ConnectionOAuthForm.tsx
+++ b/src/components/Connection/ConnectionOAuthForm.tsx
@@ -7,7 +7,7 @@ import OAuthForm from 'components/Connection/OAuthForm'
import StyledButton from 'components/CommonKit/Button/StyledButton'
import AccountService from 'services/account.service'
import TriggerService from 'services/triggers.service'
-
+import './ConnectionOAuthForm.scss'
interface ConnectionOAuthFormProps {
fluidConfig: FluidConfig
konnector: Konnector
diff --git a/src/components/Connection/ConnectionResult.scss b/src/components/Connection/ConnectionResult.scss
new file mode 100644
index 000000000..aefee5e65
--- /dev/null
+++ b/src/components/Connection/ConnectionResult.scss
@@ -0,0 +1,67 @@
+@import 'src/styles/base/color';
+@import 'src/styles/base/breakpoint';
+
+.accordion-update-result {
+ margin: 1rem 0;
+ @media #{$large-phone} {
+ margin: 0.5rem 0;
+ }
+}
+.accordion-update {
+ flex: 2;
+ padding: 0.5rem 1rem;
+}
+.accordion-update-errored {
+ padding: 0.5rem 1rem;
+ background-color: $red-primary;
+}
+.accordion-state {
+ flex: 2;
+ margin-right: 1rem;
+}
+.accordion-frequency {
+ flex: 1;
+ padding: 0 1rem;
+}
+.accordion-caption {
+ color: $grey-bright;
+ text-transform: lowercase;
+ &::first-letter {
+ text-transform: uppercase;
+ }
+}
+.accordion-caption-errored {
+ display: flex;
+ align-items: center;
+ color: $grey-bright;
+}
+.warning-white {
+ margin-right: 1rem;
+}
+.warning-icon {
+ margin-right: 1rem;
+}
+.accordion-content {
+ overflow: hidden;
+ transition: max-height 0.6s ease;
+ .info-provider {
+ padding: 0;
+ color: $grey-bright;
+ margin-bottom: 0;
+ }
+}
+.inline-buttons {
+ display: flex;
+ flex-flow: row nowrap;
+ padding: 0 2rem;
+ @media #{$large-phone} {
+ padding: 0 1rem;
+ }
+}
+.konnector-delete {
+ margin-right: 0.25rem;
+ color: $red-primary !important;
+}
+.konnector-update {
+ margin-left: 0.25rem;
+}
diff --git a/src/components/Connection/ConnectionResult.tsx b/src/components/Connection/ConnectionResult.tsx
index 769b85633..2dbea0945 100644
--- a/src/components/Connection/ConnectionResult.tsx
+++ b/src/components/Connection/ConnectionResult.tsx
@@ -22,7 +22,7 @@ import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import warningWhite from 'assets/icons/ico/warning-white.svg'
import StyledButton from 'components/CommonKit/Button/StyledButton'
import StyledBlackSpinner from 'components/CommonKit/Spinner/StyledBlackSpinner'
-
+import './ConnectionResult.scss'
interface ConnectionResultProps {
account: Account
konnector: Konnector
diff --git a/src/components/Connection/OAuthForm.tsx b/src/components/Connection/OAuthForm.tsx
index 252f08b71..bace6ef62 100644
--- a/src/components/Connection/OAuthForm.tsx
+++ b/src/components/Connection/OAuthForm.tsx
@@ -14,7 +14,7 @@ import StyledAuthButton from 'components/CommonKit/Button/StyledAuthButton'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import StyledBlackSpinner from 'components/CommonKit/Spinner/StyledBlackSpinner'
import ModalGRDF from './ModalGRDF'
-
+import './Auth.scss'
interface OAuthFormProps {
konnector: Konnector
onSuccess: Function
diff --git a/src/components/ConsumptionNavigator/ActivateHalfHourLoad.scss b/src/components/ConsumptionNavigator/ActivateHalfHourLoad.scss
new file mode 100644
index 000000000..8182aca7a
--- /dev/null
+++ b/src/components/ConsumptionNavigator/ActivateHalfHourLoad.scss
@@ -0,0 +1,44 @@
+@import 'src/styles/base/breakpoint';
+@import 'src/styles/base/color';
+
+// Enedis Half Hour Load Activation
+.cta-box {
+ background-color: rgba(18, 18, 18, 0.8);
+ position: absolute;
+ left: 0;
+ width: calc(100vw - 220px);
+ padding: 0rem 1rem 0rem 0rem;
+ z-index: 1;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-direction: column;
+ height: 37.5rem;
+ @media #{$large-phone} {
+ height: 29rem;
+ width: 100vw;
+ }
+ @media #{$tablet} {
+ width: 100vw;
+ }
+
+ .cta-box-header {
+ text-align: center;
+ font-weight: bold;
+ letter-spacing: 0.2px;
+ margin-bottom: 1.5em;
+ color: $grey-bright;
+ width: 50%;
+ @media #{$large-phone} {
+ width: 80%;
+ }
+ }
+ .cta-box-button {
+ margin-left: auto;
+ margin-right: auto;
+ width: 50%;
+ @media #{$large-phone} {
+ width: 80%;
+ }
+ }
+}
diff --git a/src/components/ConsumptionNavigator/ActivateHalfHourLoad.tsx b/src/components/ConsumptionNavigator/ActivateHalfHourLoad.tsx
index 9f1a5da15..d05189156 100644
--- a/src/components/ConsumptionNavigator/ActivateHalfHourLoad.tsx
+++ b/src/components/ConsumptionNavigator/ActivateHalfHourLoad.tsx
@@ -6,6 +6,7 @@ import ConfigService from 'services/fluidConfig.service'
import StyledAuthButton from 'components/CommonKit/Button/StyledAuthButton'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import iconEnedisLogo from 'assets/icons/visu/enedis-logo.svg'
+import './ActivateHalfHourLoad.scss'
const ActivateHalfHourLoad = () => {
const { t } = useI18n()
diff --git a/src/styles/components/_navigator.scss b/src/components/ConsumptionNavigator/ConsumptionNavigator.scss
similarity index 75%
rename from src/styles/components/_navigator.scss
rename to src/components/ConsumptionNavigator/ConsumptionNavigator.scss
index 4c06c7623..c934f5412 100644
--- a/src/styles/components/_navigator.scss
+++ b/src/components/ConsumptionNavigator/ConsumptionNavigator.scss
@@ -1,10 +1,9 @@
-@import '../base/color';
-@import '../base/breakpoint';
+@import 'src/styles/base/breakpoint';
.cn {
display: flex;
justify-content: center;
- .cn-tabs{
+ .cn-tabs {
width: 50.625rem;
@media #{$large-phone} {
width: 100%;
@@ -14,4 +13,4 @@
outline: none !important;
}
}
-}
\ No newline at end of file
+}
diff --git a/src/components/ConsumptionNavigator/ConsumptionNavigator.tsx b/src/components/ConsumptionNavigator/ConsumptionNavigator.tsx
index d20588ec8..3b1ba0aa5 100644
--- a/src/components/ConsumptionNavigator/ConsumptionNavigator.tsx
+++ b/src/components/ConsumptionNavigator/ConsumptionNavigator.tsx
@@ -6,7 +6,7 @@ import { TimeStep } from 'enum/timeStep.enum'
import Tabs from 'components/CommonKit/Tabs/StyledTabs'
import Tab from 'components/CommonKit/Tabs/StyledTab'
-
+import './ConsumptionNavigator.scss'
interface ConsumptionNavigatorProps {
fluidTypes: FluidType[]
multiFluid: boolean
diff --git a/src/components/ConsumptionVisualizer/ConsumptionVisualizer.scss b/src/components/ConsumptionVisualizer/ConsumptionVisualizer.scss
new file mode 100644
index 000000000..59e717757
--- /dev/null
+++ b/src/components/ConsumptionVisualizer/ConsumptionVisualizer.scss
@@ -0,0 +1,17 @@
+@import 'src/styles/base/color';
+@import 'src/styles/base/breakpoint';
+
+.cv {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ width: 27.5rem;
+ @media #{$large-phone} {
+ width: 100%;
+ }
+ .cv-info {
+ min-height: 1.5rem;
+ display: flex;
+ align-items: center;
+ }
+}
diff --git a/src/components/ConsumptionVisualizer/ConsumptionVisualizer.tsx b/src/components/ConsumptionVisualizer/ConsumptionVisualizer.tsx
index ad0b3b4fc..e4a5af3b8 100644
--- a/src/components/ConsumptionVisualizer/ConsumptionVisualizer.tsx
+++ b/src/components/ConsumptionVisualizer/ConsumptionVisualizer.tsx
@@ -11,7 +11,7 @@ import DataloadConsumptionVisualizer from 'components/ConsumptionVisualizer/Data
import DetailedConsumptionVisualizer from 'components/ConsumptionVisualizer/DetailedConsumptionVisualizer'
import LastDataConsumptionVisualizer from 'components/ConsumptionVisualizer/LastDataConsumptionVisualizer'
import ErrorDataConsumptionVisualizer from 'components/ConsumptionVisualizer/ErrorDataConsumptionVisualizer'
-
+import './ConsumptionVisualizer.scss'
interface ConsumptionVisualizerProps {
fluidTypes: FluidType[]
timeStep: TimeStep
diff --git a/src/components/ConsumptionVisualizer/DataloadConsumptionVisualizer.scss b/src/components/ConsumptionVisualizer/DataloadConsumptionVisualizer.scss
new file mode 100644
index 000000000..d8e7927d5
--- /dev/null
+++ b/src/components/ConsumptionVisualizer/DataloadConsumptionVisualizer.scss
@@ -0,0 +1,79 @@
+@import 'src/styles/base/color';
+@import 'src/styles/base/breakpoint';
+
+.cv-load {
+ min-height: 5.25rem;
+ display: flex;
+ align-items: center;
+ .cv-load-content {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ color: $grey-bright;
+ .cv-load-section {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: 0.5rem 0.5rem;
+ &.cv-load-section-left {
+ align-items: flex-end;
+ }
+ &.cv-load-section-right {
+ align-items: flex-start;
+ }
+ .cv-load-value {
+ flex-direction: row;
+ & span {
+ align-self: flex-end;
+ margin-left: 0.5em;
+ }
+ }
+ }
+ }
+}
+.cv-euro {
+ display: flex;
+ flex-direction: row;
+ .cv-euro-link {
+ text-decoration: none;
+ color: transparent;
+ }
+ .cv-euro-fluid {
+ padding: 0 0.5rem;
+ display: flex;
+ align-items: center;
+ .cv-euro-fluid-icon {
+ margin-right: 0.5rem;
+ }
+ & div {
+ padding-top: 0.2rem;
+ }
+ }
+ .electricity {
+ color: $elec-color;
+ }
+ .electricity-compare {
+ color: $elec-compare-color;
+ }
+ .water {
+ color: $water-color;
+ }
+ .water-compare {
+ color: $water-compare-color;
+ }
+ .gas {
+ color: $gas-color;
+ }
+ .gas-compare {
+ color: $gas-compare-color;
+ }
+ .multifluid {
+ color: $white;
+ }
+ .multifluid-compare {
+ color: $multi-compare-color;
+ }
+ .error {
+ color: $red-primary;
+ }
+}
diff --git a/src/components/ConsumptionVisualizer/DataloadConsumptionVisualizer.tsx b/src/components/ConsumptionVisualizer/DataloadConsumptionVisualizer.tsx
index 6c17b3cf3..e2cd4fec9 100644
--- a/src/components/ConsumptionVisualizer/DataloadConsumptionVisualizer.tsx
+++ b/src/components/ConsumptionVisualizer/DataloadConsumptionVisualizer.tsx
@@ -11,7 +11,7 @@ import { getPicto } from 'utils/picto'
import { formatNumberValues } from 'utils/utils'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
-
+import './DataloadConsumptionVisualizer.scss'
interface DataloadConsumptionVisualizerProps {
fluidTypes: FluidType[]
dataload: Dataload
diff --git a/src/components/ConsumptionVisualizer/DetailedConsumptionVisualizer.scss b/src/components/ConsumptionVisualizer/DetailedConsumptionVisualizer.scss
new file mode 100644
index 000000000..5ddc316fa
--- /dev/null
+++ b/src/components/ConsumptionVisualizer/DetailedConsumptionVisualizer.scss
@@ -0,0 +1,8 @@
+@import 'src/styles/base/color';
+
+.cv-button {
+ border: none;
+ background: none;
+ color: $soft-grey;
+ text-decoration: underline;
+}
diff --git a/src/components/ConsumptionVisualizer/DetailedConsumptionVisualizer.tsx b/src/components/ConsumptionVisualizer/DetailedConsumptionVisualizer.tsx
index 32da7289e..0b23e1f5f 100644
--- a/src/components/ConsumptionVisualizer/DetailedConsumptionVisualizer.tsx
+++ b/src/components/ConsumptionVisualizer/DetailedConsumptionVisualizer.tsx
@@ -2,7 +2,7 @@ import React from 'react'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import { FluidType } from 'enum/fluid.enum'
import { TimeStep } from 'enum/timeStep.enum'
-
+import './DetailedConsumptionVisualizer.scss'
interface DetailedConsumptionVisualizerProps {
fluidTypes: FluidType[]
timeStep: TimeStep
diff --git a/src/components/ConsumptionVisualizer/ErrorDataConsumptionVisualizer.scss b/src/components/ConsumptionVisualizer/ErrorDataConsumptionVisualizer.scss
new file mode 100644
index 000000000..f53c69afa
--- /dev/null
+++ b/src/components/ConsumptionVisualizer/ErrorDataConsumptionVisualizer.scss
@@ -0,0 +1,14 @@
+@import 'src/styles/base/color';
+
+.error-line {
+ color: $red-primary;
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+}
+.underlined-error {
+ border-bottom: solid 1px $red-primary;
+}
+.warning-icon {
+ margin-right: 4px;
+}
diff --git a/src/components/ConsumptionVisualizer/ErrorDataConsumptionVisualizer.tsx b/src/components/ConsumptionVisualizer/ErrorDataConsumptionVisualizer.tsx
index 4e0b09de5..117d342f5 100644
--- a/src/components/ConsumptionVisualizer/ErrorDataConsumptionVisualizer.tsx
+++ b/src/components/ConsumptionVisualizer/ErrorDataConsumptionVisualizer.tsx
@@ -3,6 +3,7 @@ import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import { DateTime, Interval } from 'luxon'
import warning from 'assets/icons/ico/warning.svg'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+import './ErrorDataConsumptionVisualizer.scss'
interface ErrorDataConsumptionVisualizerProps {
lastDateWithAllData: DateTime
diff --git a/src/components/ConsumptionVisualizer/LastDataConsumptionVisualizer.tsx b/src/components/ConsumptionVisualizer/LastDataConsumptionVisualizer.tsx
index b0b464f86..04437e19c 100644
--- a/src/components/ConsumptionVisualizer/LastDataConsumptionVisualizer.tsx
+++ b/src/components/ConsumptionVisualizer/LastDataConsumptionVisualizer.tsx
@@ -2,6 +2,7 @@ import React from 'react'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import { FluidType } from 'enum/fluid.enum'
import { TimeStep } from 'enum/timeStep.enum'
+import './DetailedConsumptionVisualizer.scss'
interface LastDataConsumptionVisualizerProps {
fluidTypes: FluidType[]
diff --git a/src/components/Ecogesture/EcogestureCard.scss b/src/components/Ecogesture/EcogestureCard.scss
new file mode 100644
index 000000000..4442a9373
--- /dev/null
+++ b/src/components/Ecogesture/EcogestureCard.scss
@@ -0,0 +1,64 @@
+@import 'src/styles/base/breakpoint';
+@import 'src/styles/base/color';
+
+// EcogestureCard
+.ec {
+ display: flex;
+ justify-content: center;
+ width: 100%;
+ height: 100%;
+ .ecogesture-card-notif {
+ position: absolute;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ right: 8px;
+ top: 8px;
+ width: 1.25rem;
+ height: 1.25rem;
+ color: $dark-light;
+ border-radius: 50%;
+ border: 1px solid $dark-light;
+ z-index: 1;
+ background: $blue-radial-gradient;
+ font-size: 12px;
+ }
+
+ .ec-content {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: space-around;
+ &.ec-content-unlocked {
+ padding: 0.4rem 0;
+ }
+ &.ec-content-challenge {
+ padding: 0.5rem 0;
+ }
+ .ec-content-icon {
+ min-height: 50px;
+ }
+ .ec-content-short-name {
+ display: flex;
+ flex: 1;
+ align-items: center;
+ text-align: center;
+ }
+ .ec-content-nwh {
+ margin-top: 0.25rem;
+ color: $soft-grey;
+ }
+ }
+}
+.cp-eg-1 {
+ height: 8rem;
+ width: 100%;
+ margin-right: 0.25rem;
+ text-align: center;
+}
+.cp-eg-2 {
+ height: 8rem;
+ width: 100%;
+ margin-left: 0.25rem;
+ text-align: center;
+}
diff --git a/src/components/Ecogesture/EcogestureCard.tsx b/src/components/Ecogesture/EcogestureCard.tsx
index e3771b68f..4fc5078f0 100644
--- a/src/components/Ecogesture/EcogestureCard.tsx
+++ b/src/components/Ecogesture/EcogestureCard.tsx
@@ -4,7 +4,7 @@ import StyledEcogestureCard from 'components/CommonKit/Card/StyledEcogestureCard
import defaultIcon from 'assets/icons/visu/ecogesture/default.svg'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import { importIconbyId } from 'utils/utils'
-
+import './EcogestureCard.scss'
interface EcogestureCardProps {
ecogesture: Ecogesture
handleClick?: (ecogesture: Ecogesture) => void
diff --git a/src/styles/components/_ecogesture.scss b/src/components/Ecogesture/EcogestureList.scss
similarity index 51%
rename from src/styles/components/_ecogesture.scss
rename to src/components/Ecogesture/EcogestureList.scss
index 10332c12e..9a77dc7b9 100644
--- a/src/styles/components/_ecogesture.scss
+++ b/src/components/Ecogesture/EcogestureList.scss
@@ -1,5 +1,5 @@
-@import '../base/color';
-@import '../base/breakpoint';
+@import 'src/styles/base/breakpoint';
+@import 'src/styles/base/color';
// EcogestureCardContainer
.ecogesture-root {
@@ -153,166 +153,3 @@
}
}
}
-
-// EcogestureCard
-.ec {
- display: flex;
- justify-content: center;
- width: 100%;
- height: 100%;
- .ecogesture-card-notif {
- position: absolute;
- display: flex;
- justify-content: center;
- align-items: center;
- right: 8px;
- top: 8px;
- width: 1.25rem;
- height: 1.25rem;
- color: $dark-light;
- border-radius: 50%;
- border: 1px solid $dark-light;
- z-index: 1;
- background: $blue-radial-gradient;
- font-size: 12px;
- }
-
- .ec-content {
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: space-around;
- &.ec-content-unlocked {
- padding: 0.4rem 0;
- }
- &.ec-content-challenge {
- padding: 0.5rem 0;
- }
- .ec-content-icon {
- min-height: 50px;
- }
- .ec-content-short-name {
- display: flex;
- flex: 1;
- align-items: center;
- text-align: center;
- }
- .ec-content-nwh {
- margin-top: 0.25rem;
- color: $soft-grey;
- }
- }
-}
-.cp-eg-1 {
- height: 8rem;
- width: 100%;
- margin-right: 0.25rem;
- text-align: center;
-}
-.cp-eg-2 {
- height: 8rem;
- width: 100%;
- margin-left: 0.25rem;
- text-align: center;
-}
-
-// EcogestureModal
-.em-header {
- color: $grey-bright;
- border-bottom: 1px solid rgba(163, 163, 163, 0.4);
- padding-bottom: 1em;
- width: 100%;
- display: flex;
- justify-content: center;
-}
-
-.em-root {
- overflow: auto;
- width: 100%;
- display: flex;
- justify-content: center;
- /* width */
- &::-webkit-scrollbar {
- width: 10px;
- }
- /* Track */
- &::-webkit-scrollbar-track {
- background: $scrollbar-track;
- }
- /* Handle */
- &::-webkit-scrollbar-thumb {
- background: $scrollbar-thumb;
- }
- .em-content {
- padding: 1.5rem 2.5rem 0;
-
- @media #{$large-phone} {
- width: 100%;
- padding: 1.5rem 1.5rem 0;
- }
- .em-content-box-img {
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- .icon {
- margin-bottom: 1rem;
- }
- }
- .em-detail {
- display: flex;
- flex-direction: row;
- margin: 0.5em 0;
- .em-detail-nwh {
- display: flex;
- flex: 1;
- align-self: flex-start;
- margin-top: 0.65rem;
- color: $soft-grey;
- .em-detail-nwh-unit {
- margin-left: 0.2rem;
- }
- }
- .em-picto-flow {
- display: flex;
- align-self: flex-end;
- .em-pic-content {
- margin: 0.3em;
- }
- }
- }
- .em-title {
- margin-bottom: 0;
- text-align: center;
- }
-
- .long-name {
- font-weight: bold;
- line-height: 150%;
- margin: 0.5rem 0 1rem;
- }
- .em-description {
- padding-bottom: 2rem;
- }
- }
-}
-.em-content-box-text {
- display: flex;
- flex-direction: column;
- padding: 1.5rem 2.5rem;
- @media #{$large-phone} {
- padding: 1.5rem 1.5rem;
- }
- .em-description {
- padding-bottom: 2rem;
- }
- .em-description-2 {
- padding-top: 2rem;
- }
- .em-description-3 {
- padding-bottom: 0.5rem;
- }
- .em-title {
- margin-bottom: 0;
- }
-}
diff --git a/src/components/Ecogesture/EcogestureList.tsx b/src/components/Ecogesture/EcogestureList.tsx
index c6c6506f9..9dda23d54 100644
--- a/src/components/Ecogesture/EcogestureList.tsx
+++ b/src/components/Ecogesture/EcogestureList.tsx
@@ -19,6 +19,7 @@ import EcogestureModal from 'components/Ecogesture/EcogestureModal'
import NegaWattModal from 'components/Ecogesture/NegaWattModal'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import StyledStopButton from 'components/CommonKit/Button/StyledStopButton'
+import './EcogestureList.scss'
const EcogesturesList: React.FC = () => {
const { t } = useI18n()
diff --git a/src/components/Ecogesture/EcogestureModal.scss b/src/components/Ecogesture/EcogestureModal.scss
new file mode 100644
index 000000000..549348ef0
--- /dev/null
+++ b/src/components/Ecogesture/EcogestureModal.scss
@@ -0,0 +1,103 @@
+@import 'src/styles/base/breakpoint';
+@import 'src/styles/base/color';
+
+// EcogestureModal
+.em-header {
+ color: $grey-bright;
+ border-bottom: 1px solid rgba(163, 163, 163, 0.4);
+ padding-bottom: 1em;
+ width: 100%;
+ display: flex;
+ justify-content: center;
+}
+
+.em-root {
+ overflow: auto;
+ width: 100%;
+ display: flex;
+ justify-content: center;
+ /* width */
+ &::-webkit-scrollbar {
+ width: 10px;
+ }
+ /* Track */
+ &::-webkit-scrollbar-track {
+ background: $scrollbar-track;
+ }
+ /* Handle */
+ &::-webkit-scrollbar-thumb {
+ background: $scrollbar-thumb;
+ }
+ .em-content {
+ padding: 1.5rem 2.5rem 0;
+
+ @media #{$large-phone} {
+ width: 100%;
+ padding: 1.5rem 1.5rem 0;
+ }
+ .em-content-box-img {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ .icon {
+ margin-bottom: 1rem;
+ }
+ }
+ .em-detail {
+ display: flex;
+ flex-direction: row;
+ margin: 0.5em 0;
+ .em-detail-nwh {
+ display: flex;
+ flex: 1;
+ align-self: flex-start;
+ margin-top: 0.65rem;
+ color: $soft-grey;
+ .em-detail-nwh-unit {
+ margin-left: 0.2rem;
+ }
+ }
+ .em-picto-flow {
+ display: flex;
+ align-self: flex-end;
+ .em-pic-content {
+ margin: 0.3em;
+ }
+ }
+ }
+ .em-title {
+ margin-bottom: 0;
+ text-align: center;
+ }
+
+ .long-name {
+ font-weight: bold;
+ line-height: 150%;
+ margin: 0.5rem 0 1rem;
+ }
+ .em-description {
+ padding-bottom: 2rem;
+ }
+ }
+}
+.em-content-box-text {
+ display: flex;
+ flex-direction: column;
+ padding: 1.5rem 2.5rem;
+ @media #{$large-phone} {
+ padding: 1.5rem 1.5rem;
+ }
+ .em-description {
+ padding-bottom: 2rem;
+ }
+ .em-description-2 {
+ padding-top: 2rem;
+ }
+ .em-description-3 {
+ padding-bottom: 0.5rem;
+ }
+ .em-title {
+ margin-bottom: 0;
+ }
+}
diff --git a/src/components/Ecogesture/EcogestureModal.tsx b/src/components/Ecogesture/EcogestureModal.tsx
index 4f00d0212..6392042a3 100644
--- a/src/components/Ecogesture/EcogestureModal.tsx
+++ b/src/components/Ecogesture/EcogestureModal.tsx
@@ -8,6 +8,7 @@ import Modal from 'components/CommonKit/Modal/Modal'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import defaultIcon from 'assets/icons/visu/ecogesture/default.svg'
import { importIconbyId } from 'utils/utils'
+import './EcogestureModal.scss'
interface EcogestureModalProps {
open: boolean
diff --git a/src/components/FAQ/FAQContent.scss b/src/components/FAQ/FAQContent.scss
new file mode 100644
index 000000000..b33647103
--- /dev/null
+++ b/src/components/FAQ/FAQContent.scss
@@ -0,0 +1,30 @@
+@import 'src/styles/base/breakpoint';
+
+// FAQ
+.faq-view-root {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ padding: 1rem 0;
+ margin-top: 1.5rem;
+ .faq-view-content {
+ width: 45.75rem;
+ @media #{$large-phone} {
+ width: 100%;
+ }
+ .faq-content-detail {
+ padding-bottom: 0.6rem;
+ .text-bold {
+ font-weight: bold;
+ }
+ .text-underline {
+ text-decoration: underline;
+ }
+ .spaceline {
+ height: 0.6rem;
+ display: block;
+ }
+ }
+ }
+}
diff --git a/src/components/FAQ/FAQContent.tsx b/src/components/FAQ/FAQContent.tsx
index b677f3fbb..eb00f7bb2 100644
--- a/src/components/FAQ/FAQContent.tsx
+++ b/src/components/FAQ/FAQContent.tsx
@@ -1,6 +1,7 @@
import React, { useState } from 'react'
import GenericExpansionPanel from 'components/CommonKit/ExpansionPanel/StyledSampleExpansionPanel'
import FAQJSon from 'db/FAQ.json'
+import './FAQContent.scss'
const decoreText = (line: string) => {
if (line === ' ') {
diff --git a/src/styles/components/_faq.scss b/src/components/FAQ/FAQLink.scss
similarity index 59%
rename from src/styles/components/_faq.scss
rename to src/components/FAQ/FAQLink.scss
index f825f0989..2e042d93e 100644
--- a/src/styles/components/_faq.scss
+++ b/src/components/FAQ/FAQLink.scss
@@ -1,5 +1,5 @@
-@import '../base/color';
-@import '../base/breakpoint';
+@import 'src/styles/base/color';
+@import 'src/styles/base/breakpoint';
// FAQContainer
.faq-root {
@@ -49,32 +49,3 @@
}
}
}
-
-// FAQ
-.faq-view-root {
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- padding: 1rem 0;
- margin-top: 1.5rem;
- .faq-view-content {
- width: 45.75rem;
- @media #{$large-phone} {
- width: 100%;
- }
- .faq-content-detail {
- padding-bottom: 0.6rem;
- .text-bold {
- font-weight: bold;
- }
- .text-underline {
- text-decoration: underline;
- }
- .spaceline {
- height: 0.6rem;
- display: block;
- }
- }
- }
-}
diff --git a/src/components/FAQ/FAQLink.tsx b/src/components/FAQ/FAQLink.tsx
index 941d6020f..0b1759d52 100644
--- a/src/components/FAQ/FAQLink.tsx
+++ b/src/components/FAQ/FAQLink.tsx
@@ -5,6 +5,7 @@ import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import StyledCard from 'components/CommonKit/Card/StyledCard'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import QuestionMarkIcon from 'assets/icons/ico/question-mark.svg'
+import './FAQLink.scss'
const FAQLink: React.FC = () => {
const { t } = useI18n()
diff --git a/src/components/Favorite/FavoriteModal.scss b/src/components/Favorite/FavoriteModal.scss
new file mode 100644
index 000000000..441bb698e
--- /dev/null
+++ b/src/components/Favorite/FavoriteModal.scss
@@ -0,0 +1,31 @@
+@import 'src/styles/base/color';
+@import 'src/styles/base/breakpoint';
+
+.wm-header {
+ background: $multi-color-radial-gradient;
+ background-clip: 'text';
+ -webkit-background-clip: text;
+ color: transparent;
+ margin-top: 2rem;
+}
+.wm-name {
+ background: $multi-color-radial-gradient;
+ background-clip: 'text';
+ -webkit-background-clip: text;
+ color: transparent;
+ margin-bottom: 1.25rem;
+}
+.button-ok {
+ width: 90%;
+ margin-bottom: 2rem;
+}
+.wm-perso {
+ text-align: center;
+ width: 60%;
+ margin: 1rem;
+}
+.wm-connect {
+ text-align: center;
+ width: 88%;
+ margin: 1rem;
+}
diff --git a/src/components/Favorite/FavoriteModal.tsx b/src/components/Favorite/FavoriteModal.tsx
index 7c474a97b..2afbc7e4e 100644
--- a/src/components/Favorite/FavoriteModal.tsx
+++ b/src/components/Favorite/FavoriteModal.tsx
@@ -2,7 +2,7 @@ import React, { useCallback, useEffect, useState } from 'react'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import Modal from 'components/CommonKit/Modal/Modal'
import StyledButton from 'components/CommonKit/Button/StyledButton'
-
+import './FavoriteModal.scss'
interface FavoriteModalContainerProps {
open: boolean
handleCloseClick: () => void
diff --git a/src/styles/components/_feedback.scss b/src/components/Feedback/FeedBackModal.scss
similarity index 96%
rename from src/styles/components/_feedback.scss
rename to src/components/Feedback/FeedBackModal.scss
index baab42b3b..954428c80 100644
--- a/src/styles/components/_feedback.scss
+++ b/src/components/Feedback/FeedBackModal.scss
@@ -1,5 +1,4 @@
-@import '../base/color';
-@import '../base/breakpoint';
+@import 'src/styles/base/color';
.fb-root {
overflow-y: auto;
diff --git a/src/components/Feedback/FeedbackModal.tsx b/src/components/Feedback/FeedbackModal.tsx
index ac63c359d..2ab2c918c 100644
--- a/src/components/Feedback/FeedbackModal.tsx
+++ b/src/components/Feedback/FeedbackModal.tsx
@@ -17,6 +17,7 @@ import OtherOffIcon from 'assets/icons/visu/feedback/other-off.svg'
import warningIcon from 'assets/icons/ico/warning-yellow.svg'
import successIcon from 'assets/icons/visu/data-ok.svg'
import MailService from 'services/mail.service'
+import './FeedbackModal.scss'
const FEEDBACK_EMAIL = 'ecolyo@grandlyon.com'
const browser = detect()
diff --git a/src/components/FluidChart/FluidChart.scss b/src/components/FluidChart/FluidChart.scss
new file mode 100644
index 000000000..8b8dba015
--- /dev/null
+++ b/src/components/FluidChart/FluidChart.scss
@@ -0,0 +1,51 @@
+@import 'src/styles/base/color';
+@import 'src/styles/base/breakpoint';
+
+//SelectFluid
+// .sf {
+// display: flex;
+// flex-direction: column;
+// .sf-header {
+// .sf-header-title {
+// color: $grey-bright;
+// }
+// .sf-header-text {
+// color: $soft-grey;
+// }
+// }
+// .sf-content {
+// display: flex;
+// flex-direction: column;
+// align-items: center;
+// margin-top: 3rem;
+// .sf-link {
+// margin: 1rem;
+// }
+// }
+// }
+
+//FluidContainer
+.fc-root {
+ background-color: $dark-light-2;
+ padding: 2rem 2rem 1rem 2rem;
+ margin-bottom: 1rem;
+ @media #{$large-phone} {
+ padding: 1.5rem 1rem 1rem 1rem;
+ margin-bottom: 0.5rem;
+ }
+ .fc-content {
+ min-height: 31.875rem;
+ @media #{$large-phone} {
+ min-height: 23.875rem;
+ }
+ .fc-loader {
+ min-height: 31.875rem;
+ @media #{$large-phone} {
+ min-height: 23.875rem;
+ }
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ }
+ }
+}
diff --git a/src/components/FluidChart/FluidChart.tsx b/src/components/FluidChart/FluidChart.tsx
index 2ab7a96b9..5c10d3b6e 100644
--- a/src/components/FluidChart/FluidChart.tsx
+++ b/src/components/FluidChart/FluidChart.tsx
@@ -8,7 +8,7 @@ import ConsumptionService from 'services/consumption.service'
import FluidChartContent from 'components/FluidChart/FluidChartContent'
import ActivateHalfHourLoad from 'components/ConsumptionNavigator/ActivateHalfHourLoad'
-
+import './FluidChart.scss'
interface FluidChartProps {
timeStep: TimeStep
fluidTypes: FluidType[]
diff --git a/src/components/FluidChart/FluidChartContent.scss b/src/components/FluidChart/FluidChartContent.scss
new file mode 100644
index 000000000..21ac4548f
--- /dev/null
+++ b/src/components/FluidChart/FluidChartContent.scss
@@ -0,0 +1,64 @@
+@import 'src/styles/base/color';
+@import 'src/styles/base/breakpoint';
+
+//FluidView
+.fv-root {
+ direction: 'rtl';
+ .fv-nav-period {
+ display: flex;
+ flex-direction: row;
+ & .nav-button {
+ flex: 1;
+ font-size: large;
+ }
+ }
+ .fv-header {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ min-height: 8.375rem;
+ margin-bottom: 0.25rem;
+ }
+ .fv-footer {
+ display: flex;
+ justify-content: center;
+ .fv-footer-compare {
+ width: 100%;
+ max-width: 58.75rem;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ & :hover {
+ cursor: pointer;
+ }
+ & .fv-footer-label {
+ flex: 1;
+ display: flex;
+ justify-content: flex-start;
+ color: $soft-grey;
+ &.selected {
+ color: $white;
+ }
+ }
+ }
+
+ .fv-footer-challenge {
+ width: 100%;
+ max-width: 58.75rem;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ .fv-link {
+ text-decoration: none;
+ color: $soft-grey;
+ }
+ & .fv-footer-label-padding {
+ flex: 1;
+ display: flex;
+ justify-content: flex-start;
+ padding-left: 0.75rem;
+ color: $soft-grey;
+ }
+ }
+ }
+}
diff --git a/src/components/FluidChart/FluidChartContent.tsx b/src/components/FluidChart/FluidChartContent.tsx
index 2790d0bea..3ac06b9f1 100644
--- a/src/components/FluidChart/FluidChartContent.tsx
+++ b/src/components/FluidChart/FluidChartContent.tsx
@@ -10,6 +10,7 @@ import DateChartService from 'services/dateChart.service'
import Switch from 'components/CommonKit/Switch/StyledSwitch'
import FluidChartSwipe from 'components/FluidChart/FluidChartSwipe'
import ConsumptionVisualizer from 'components/ConsumptionVisualizer/ConsumptionVisualizer'
+import './FluidChartContent.scss'
interface FluidChartContentProps {
fluidTypes: FluidType[]
diff --git a/src/components/FluidChart/FluidChartSlide.scss b/src/components/FluidChart/FluidChartSlide.scss
new file mode 100644
index 000000000..0a247a323
--- /dev/null
+++ b/src/components/FluidChart/FluidChartSlide.scss
@@ -0,0 +1,19 @@
+@import 'src/styles/base/breakpoint';
+
+.fs-slide {
+ min-height: 22rem;
+ overflow-x: hidden;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ @media #{$large-phone} {
+ min-height: 14rem;
+ }
+ .chart-none {
+ visibility: hidden;
+ width: 0;
+ }
+ .chart-block {
+ visibility: visible;
+ }
+}
diff --git a/src/components/FluidChart/FluidChartSlide.tsx b/src/components/FluidChart/FluidChartSlide.tsx
index 0f3ca01e7..bd0e58fff 100644
--- a/src/components/FluidChart/FluidChartSlide.tsx
+++ b/src/components/FluidChart/FluidChartSlide.tsx
@@ -13,6 +13,7 @@ import DateChartService from 'services/dateChart.service'
import BarChart from 'components/Charts/BarChart'
import StyledSpinner from 'components/CommonKit/Spinner/StyledSpinner'
+import './FluidChartSlide.scss'
interface FluidChartSlideProps {
index: number
diff --git a/src/components/FluidChart/FluidChartSwipe.scss b/src/components/FluidChart/FluidChartSwipe.scss
new file mode 100644
index 000000000..df38cdc35
--- /dev/null
+++ b/src/components/FluidChart/FluidChartSwipe.scss
@@ -0,0 +1,15 @@
+@import 'src/styles/base/breakpoint';
+
+//FluidSwipe
+.fs-root {
+ flex: 1;
+ height: 22rem;
+ @media #{$large-phone} {
+ height: 14rem;
+ }
+ .chart-loading {
+ width: 100%;
+ justify-content: center;
+ display: flex;
+ }
+}
diff --git a/src/components/FluidChart/FluidChartSwipe.tsx b/src/components/FluidChart/FluidChartSwipe.tsx
index bb612c347..999ea2f9e 100644
--- a/src/components/FluidChart/FluidChartSwipe.tsx
+++ b/src/components/FluidChart/FluidChartSwipe.tsx
@@ -8,6 +8,7 @@ import { FluidType } from 'enum/fluid.enum'
import { Dataload } from 'models'
import FluidChartSlide from 'components/FluidChart/FluidChartSlide'
+import './FluidChartSwipe.scss'
const VirtualizeSwipeableViews = virtualize(SwipeableViews)
diff --git a/src/styles/components/_oldDataModal.scss b/src/components/Home/OldFluidDataModal.scss
similarity index 94%
rename from src/styles/components/_oldDataModal.scss
rename to src/components/Home/OldFluidDataModal.scss
index 9902b3804..5b7e8ab37 100644
--- a/src/styles/components/_oldDataModal.scss
+++ b/src/components/Home/OldFluidDataModal.scss
@@ -1,3 +1,5 @@
+@import 'src/styles/base/color';
+
.od-content {
padding: 1.5rem;
p {
diff --git a/src/components/Home/OldFluidDataModal.tsx b/src/components/Home/OldFluidDataModal.tsx
index a9dca0ffc..1c8a50d64 100644
--- a/src/components/Home/OldFluidDataModal.tsx
+++ b/src/components/Home/OldFluidDataModal.tsx
@@ -9,7 +9,7 @@ import { Redirect } from 'react-router-dom'
import { FluidType } from 'enum/fluid.enum'
import { FluidStatus } from 'models'
-
+import './OldFluidDataModal.scss'
interface OldFluidDataModalProps {
open: boolean
fluidStatus: FluidStatus[]
diff --git a/src/components/Konnector/KonnectorViewerCard.scss b/src/components/Konnector/KonnectorViewerCard.scss
new file mode 100644
index 000000000..6eb517cf0
--- /dev/null
+++ b/src/components/Konnector/KonnectorViewerCard.scss
@@ -0,0 +1,54 @@
+@import 'src/styles/base/color';
+@import 'src/styles/base/breakpoint';
+
+.accordion {
+ display: flex;
+ flex-direction: column;
+ color: $white;
+ padding: 1rem 0;
+ margin-bottom: 2vh;
+ border-radius: 4px;
+ background: $grey-linear-gradient-background;
+ box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.75);
+ transition: background-color 0.6s ease;
+ &.active {
+ background-color: $accordion-active-background;
+ }
+
+ .accordion-header {
+ display: flex;
+ align-items: center;
+ border: none;
+ outline: none;
+ padding: 0 1rem;
+ &:hover {
+ cursor: pointer;
+ }
+ .accordion-icon {
+ margin-right: 1rem;
+ @media #{$large-phone} {
+ max-width: 16vw;
+ }
+ }
+ .accordion-info {
+ flex: 3;
+ color: $grey-bright;
+ @media #{$large-phone} {
+ display: block;
+ }
+ .accordion-title {
+ flex: 1;
+ @media #{$large-phone} {
+ // margin-bottom: 1rem;
+ }
+ }
+ }
+ .state-picto {
+ position: absolute;
+ display: flex;
+ }
+ }
+}
+.--errored {
+ border: solid 1px $red-primary;
+}
diff --git a/src/components/Konnector/KonnectorViewerCard.tsx b/src/components/Konnector/KonnectorViewerCard.tsx
index 7acc60717..5107dba19 100644
--- a/src/components/Konnector/KonnectorViewerCard.tsx
+++ b/src/components/Konnector/KonnectorViewerCard.tsx
@@ -19,7 +19,7 @@ import ConnectionNotFound from 'components/Connection/ConnectionNotFound'
import ConnectionForm from 'components/Connection/ConnectionForm'
import ConnectionResult from 'components/Connection/ConnectionResult'
import ConnectionLaunch from 'components/Connection/ConnectionLaunch'
-
+import './KonnectorViewerCard.scss'
interface KonnectorViewerCardProps {
fluidConfig: FluidConfig
konnector: Konnector | null
diff --git a/src/components/Konnector/KonnectorViewerList.scss b/src/components/Konnector/KonnectorViewerList.scss
new file mode 100644
index 000000000..43a42bff7
--- /dev/null
+++ b/src/components/Konnector/KonnectorViewerList.scss
@@ -0,0 +1,28 @@
+@import 'src/styles/base/color';
+@import 'src/styles/base/breakpoint';
+
+.kv-root {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ padding: 0 1.5rem;
+ .kv-content {
+ width: 45.75rem;
+ @media #{$large-phone} {
+ width: 100%;
+ }
+ .kv-header {
+ margin-top: 2.5rem;
+ margin-bottom: 1.25rem;
+ color: $grey-bright;
+ }
+ }
+}
+.state-icon {
+ height: 22px;
+ width: 22px;
+ position: absolute;
+ bottom: 8px;
+ left: 30px;
+}
diff --git a/src/components/Konnector/KonnectorViewerList.tsx b/src/components/Konnector/KonnectorViewerList.tsx
index 4dc60c021..25cdafcf2 100644
--- a/src/components/Konnector/KonnectorViewerList.tsx
+++ b/src/components/Konnector/KonnectorViewerList.tsx
@@ -7,7 +7,7 @@ import { FluidConfig } from 'models'
import ConfigService from 'services/fluidConfig.service'
import KonnectorViewerListItem from 'components/Konnector/KonnectorViewerListItem'
-
+import './KonnectorViewerList.scss'
interface KonnectorViewerListProps {
isParam: boolean
}
diff --git a/src/styles/components/_legalnotice.scss b/src/components/LegalNotice/LegalNoticeLink.scss
similarity index 93%
rename from src/styles/components/_legalnotice.scss
rename to src/components/LegalNotice/LegalNoticeLink.scss
index 7a121180a..0e881bb07 100644
--- a/src/styles/components/_legalnotice.scss
+++ b/src/components/LegalNotice/LegalNoticeLink.scss
@@ -1,5 +1,5 @@
-@import '../base/color';
-@import '../base/breakpoint';
+@import 'src/styles/base/breakpoint';
+@import 'src/styles/base/color';
// LegalContainer
.legal-notice-root {
@@ -36,7 +36,6 @@
}
}
}
-
.legal-notice-card-link {
color: black;
}
diff --git a/src/components/LegalNotice/LegalNoticeLink.tsx b/src/components/LegalNotice/LegalNoticeLink.tsx
index efc793674..cc63978a3 100644
--- a/src/components/LegalNotice/LegalNoticeLink.tsx
+++ b/src/components/LegalNotice/LegalNoticeLink.tsx
@@ -5,6 +5,7 @@ import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import StyledCard from 'components/CommonKit/Card/StyledCard'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import LegalNoticeIcon from 'assets/icons/ico/legal-notice.svg'
+import './LegalNoticeLink.scss'
const LegalNoticeLink: React.FC = () => {
const { t } = useI18n()
diff --git a/src/components/LegalNotice/LegalNoticeView.scss b/src/components/LegalNotice/LegalNoticeView.scss
new file mode 100644
index 000000000..4892e19f7
--- /dev/null
+++ b/src/components/LegalNotice/LegalNoticeView.scss
@@ -0,0 +1,38 @@
+@import 'src/styles/base/color';
+@import 'src/styles/base/breakpoint';
+
+// LegalContainer
+.legal-notice-root {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ color: $white;
+ padding: 1.5rem 1.5rem 0;
+ .legal-notice-content {
+ p {
+ color: $white;
+ }
+ a {
+ color: $white;
+ text-decoration: none;
+ }
+ li {
+ margin: 1rem 0;
+ }
+ h2 {
+ color: $white;
+ }
+ h3 {
+ color: $white;
+ margin: 2.5rem 0 1rem;
+ }
+ .ln-contact {
+ color: $multi-color;
+ }
+ width: 45.75rem;
+ @media #{$large-phone} {
+ width: 100%;
+ }
+ }
+}
diff --git a/src/components/LegalNotice/LegalNoticeView.tsx b/src/components/LegalNotice/LegalNoticeView.tsx
index 71e43ff84..526e260ee 100644
--- a/src/components/LegalNotice/LegalNoticeView.tsx
+++ b/src/components/LegalNotice/LegalNoticeView.tsx
@@ -2,6 +2,7 @@ import React, { useCallback, useState } from 'react'
import CozyBar from 'components/Header/CozyBar'
import Header from 'components/Header/Header'
import Content from 'components/Content/Content'
+import './LegalNoticeView.scss'
const LegalNoticeView: React.FC = () => {
const [headerHeight, setHeaderHeight] = useState<number>(0)
diff --git a/src/styles/components/_nav.scss b/src/components/Navbar/NavBar.scss
similarity index 96%
rename from src/styles/components/_nav.scss
rename to src/components/Navbar/NavBar.scss
index 29fc68653..29e8a99cf 100644
--- a/src/styles/components/_nav.scss
+++ b/src/components/Navbar/NavBar.scss
@@ -1,5 +1,5 @@
-@import '../base/color';
-@import '../base/breakpoint';
+@import 'src/styles/base/color';
+@import 'src/styles/base/breakpoint';
.o-sidebar {
background-color: $dark-light;
diff --git a/src/components/Navbar/Navbar.tsx b/src/components/Navbar/Navbar.tsx
index 922c3c192..2cc1a3689 100644
--- a/src/components/Navbar/Navbar.tsx
+++ b/src/components/Navbar/Navbar.tsx
@@ -17,6 +17,7 @@ import logoGrandLyon from 'assets/icons/tabbar/grand-lyon.svg'
import logoTiga from 'assets/png/logo-TIGA.png'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import { EcolyoState } from 'store'
+import './NavBar.scss'
export const Navbar: React.FC = () => {
const { t } = useI18n()
diff --git a/src/styles/components/_report.scss b/src/components/Options/ReportOptions.scss
similarity index 94%
rename from src/styles/components/_report.scss
rename to src/components/Options/ReportOptions.scss
index 16505e1fc..9f9fde66e 100644
--- a/src/styles/components/_report.scss
+++ b/src/components/Options/ReportOptions.scss
@@ -1,3 +1,5 @@
+@import 'src/styles/base/color';
+@import 'src/styles/base/breakpoint';
.report-option-root {
display: flex;
flex-direction: column;
diff --git a/src/components/Options/ReportOptions.tsx b/src/components/Options/ReportOptions.tsx
index 584e6b79c..a9f7ee7a1 100644
--- a/src/components/Options/ReportOptions.tsx
+++ b/src/components/Options/ReportOptions.tsx
@@ -5,6 +5,7 @@ import { useSelector, useDispatch } from 'react-redux'
import { EcolyoState } from 'store'
import { updateProfile } from 'store/profile/profile.actions'
import ProfileService from 'services/profile.service'
+import './ReportOptions.scss'
const ReportOptions: React.FC = () => {
const { t } = useI18n()
diff --git a/src/styles/components/_indicators.scss b/src/components/PerformanceIndicator/FluidPerformanceIndicator.scss
similarity index 83%
rename from src/styles/components/_indicators.scss
rename to src/components/PerformanceIndicator/FluidPerformanceIndicator.scss
index 9a7f344e6..216632e09 100644
--- a/src/styles/components/_indicators.scss
+++ b/src/components/PerformanceIndicator/FluidPerformanceIndicator.scss
@@ -1,5 +1,5 @@
-@import '../base/color';
-@import '../base/breakpoint';
+@import 'src/styles/base/color';
+@import 'src/styles/base/breakpoint';
//FluidIndicator
.fi-root {
@@ -25,30 +25,6 @@
font-size: 1rem;
}
}
- //SingleFluidIndicator
- .sfi-content {
- min-height: 16rem;
- width: 45.75rem;
- @media #{$large-phone} {
- width: 100%;
- }
- .sfi-header {
- margin-top: 2.5rem;
- margin-bottom: 1.25rem;
- color: $grey-bright;
- }
- .sfi-redirect {
- margin-bottom: 1.25rem;
- display: flex;
- flex-wrap: wrap;
- .redirect-card-link:nth-child(2) {
- margin-left: 0.625rem;
- }
- .redirect-card-link {
- flex: 1;
- }
- }
- }
}
//FluidPerformanceIndicator
@@ -76,7 +52,7 @@
.fpi-content {
display: flex;
flex-direction: row;
- justify-content: center;
+ // justify-content: center;
&:first-child() {
margin-bottom: 0.75rem;
}
@@ -168,4 +144,3 @@
justify-content: center;
align-items: center;
}
-
diff --git a/src/components/PerformanceIndicator/FluidPerformanceIndicator.tsx b/src/components/PerformanceIndicator/FluidPerformanceIndicator.tsx
index 5c8c81d42..5b1ce95fb 100644
--- a/src/components/PerformanceIndicator/FluidPerformanceIndicator.tsx
+++ b/src/components/PerformanceIndicator/FluidPerformanceIndicator.tsx
@@ -11,7 +11,7 @@ import StyledCard from 'components/CommonKit/Card/StyledCard'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import BlackArrowIcon from 'assets/icons/ico/black-arrow.svg'
import ConverterService from 'services/converter.service'
-
+import './FluidPerformanceIndicator.scss'
interface FluidPerformanceIndicatorProps {
performanceIndicator: PerformanceIndicator
fluidType: FluidType
diff --git a/src/components/PerformanceIndicator/PerformanceIndicatorContent.tsx b/src/components/PerformanceIndicator/PerformanceIndicatorContent.tsx
index a53b6c94d..5a3196835 100644
--- a/src/components/PerformanceIndicator/PerformanceIndicatorContent.tsx
+++ b/src/components/PerformanceIndicator/PerformanceIndicatorContent.tsx
@@ -13,6 +13,7 @@ import RedIndicatorIcon from 'assets/icons/visu/indicator/red.svg'
import GreyIndicatorIcon from 'assets/icons/visu/indicator/grey.svg'
import ErrorIndicatorIcon from 'assets/icons/visu/indicator/error.svg'
import { FluidType } from 'enum/fluid.enum'
+import './FluidPerformanceIndicator.scss'
interface PerformanceIndicatorContentProps {
performanceIndicator: PerformanceIndicator
diff --git a/src/components/SingleFluid/SingleFluidIndicators.scss b/src/components/SingleFluid/SingleFluidIndicators.scss
new file mode 100644
index 000000000..58f76cc9c
--- /dev/null
+++ b/src/components/SingleFluid/SingleFluidIndicators.scss
@@ -0,0 +1,26 @@
+@import 'src/styles/base/color';
+@import 'src/styles/base/breakpoint';
+//SingleFluidIndicator
+.sfi-content {
+ min-height: 16rem;
+ width: 45.75rem;
+ @media #{$large-phone} {
+ width: 100%;
+ }
+ .sfi-header {
+ margin-top: 2.5rem;
+ margin-bottom: 1.25rem;
+ color: $grey-bright;
+ }
+ .sfi-redirect {
+ margin-bottom: 1.25rem;
+ display: flex;
+ flex-wrap: wrap;
+ .redirect-card-link:nth-child(2) {
+ margin-left: 0.625rem;
+ }
+ .redirect-card-link {
+ flex: 1;
+ }
+ }
+}
diff --git a/src/components/SingleFluid/SingleFluidIndicators.tsx b/src/components/SingleFluid/SingleFluidIndicators.tsx
index 08602d77c..2100f3684 100644
--- a/src/components/SingleFluid/SingleFluidIndicators.tsx
+++ b/src/components/SingleFluid/SingleFluidIndicators.tsx
@@ -14,7 +14,7 @@ import PerformanceIndicatorService from 'services/performanceIndicator.service'
import PerformanceIndicatorContent from 'components/PerformanceIndicator/PerformanceIndicatorContent'
import SingleFluidRedirect from 'components/SingleFluid/SingleFluidRedirect'
-
+import './SingleFluidIndicators.scss'
interface SingleFluidIndicatorsProps {
timeStep: TimeStep
setIndicatorsLoaded(): void
diff --git a/src/styles/components/_card.scss b/src/components/SingleFluid/SingleFluidRedirect.scss
similarity index 67%
rename from src/styles/components/_card.scss
rename to src/components/SingleFluid/SingleFluidRedirect.scss
index 1db79c854..e6c5ef02b 100644
--- a/src/styles/components/_card.scss
+++ b/src/components/SingleFluid/SingleFluidRedirect.scss
@@ -1,6 +1,3 @@
-@import '../base/color';
-@import '../base/breakpoint';
-
// RedirectionMiniCard
.redirect-card-link {
color: transparent;
diff --git a/src/components/SingleFluid/SingleFluidRedirect.tsx b/src/components/SingleFluid/SingleFluidRedirect.tsx
index 729dbda1d..7ef0fd51b 100644
--- a/src/components/SingleFluid/SingleFluidRedirect.tsx
+++ b/src/components/SingleFluid/SingleFluidRedirect.tsx
@@ -3,7 +3,7 @@ import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import { FluidType } from 'enum/fluid.enum'
import StyledIconCard from 'components/CommonKit/Card/StyledIconCard'
import { NavLink } from 'react-router-dom'
-
+import './SingleFluidRedirect.scss'
export interface SingleFluidRedirectProps {
fluidTypes: FluidType[]
}
diff --git a/src/components/SingleFluid/SingleFluidView.scss b/src/components/SingleFluid/SingleFluidView.scss
new file mode 100644
index 000000000..bf7115a90
--- /dev/null
+++ b/src/components/SingleFluid/SingleFluidView.scss
@@ -0,0 +1,8 @@
+.chart-indicator-none {
+ visibility: hidden;
+ height: 0;
+}
+.chart-indicator-block {
+ visibility: visible;
+ height: auto;
+}
diff --git a/src/components/SingleFluid/SingleFluidView.tsx b/src/components/SingleFluid/SingleFluidView.tsx
index 0c49371a3..df334963e 100644
--- a/src/components/SingleFluid/SingleFluidView.tsx
+++ b/src/components/SingleFluid/SingleFluidView.tsx
@@ -13,7 +13,7 @@ import Content from 'components/Content/Content'
import FluidChart from 'components/FluidChart/FluidChart'
import ConsumptionNavigator from 'components/ConsumptionNavigator/ConsumptionNavigator'
import SingleFluidIndicators from 'components/SingleFluid/SingleFluidIndicators'
-
+import './SingleFluidView.scss'
interface SingleFluidViewProps {
fluidTypes: FluidType[]
}
diff --git a/src/components/Splash/SplashRoot.scss b/src/components/Splash/SplashRoot.scss
new file mode 100644
index 000000000..42e4ab918
--- /dev/null
+++ b/src/components/Splash/SplashRoot.scss
@@ -0,0 +1,29 @@
+@import 'src/styles/base/color';
+@import 'src/styles/base/breakpoint';
+
+.splash-root {
+ position: fixed;
+ z-index: 1500;
+ left: 0;
+ top: 0;
+ height: 100vh;
+ width: 100vw;
+ opacity: 1;
+ overflow: hidden;
+ background-color: rgba(27, 28, 34, 1);
+ display: flex;
+ flex-direction: column;
+ transition-property: opacity;
+ transition-timing-function: ease-in-out;
+ &.splash-fade {
+ opacity: 0;
+ }
+}
+
+// .splash-header {
+// height: 6rem;
+// display: flex;
+// align-items: center;
+// justify-content: center;
+// color: var(--greyBright);
+// }
diff --git a/src/components/Splash/SplashRoot.tsx b/src/components/Splash/SplashRoot.tsx
index 89b2a5617..5b3f68ebe 100644
--- a/src/components/Splash/SplashRoot.tsx
+++ b/src/components/Splash/SplashRoot.tsx
@@ -9,7 +9,7 @@ import {
import { updateProfile } from 'store/profile/profile.actions'
import { setUserSeasonList } from 'store/season/season.actions'
import InitializationService from 'services/initialization.service'
-
+import './SplashRoot.scss'
interface SplashRootProps {
fadeTimer?: number
splashComponent: ComponentType
diff --git a/src/components/Splash/SplashScreen.scss b/src/components/Splash/SplashScreen.scss
new file mode 100644
index 000000000..5415ff640
--- /dev/null
+++ b/src/components/Splash/SplashScreen.scss
@@ -0,0 +1,45 @@
+@import 'src/styles/base/color';
+@import 'src/styles/base/breakpoint';
+.splash-content {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: flex-end;
+ flex: 1;
+ &:first-child {
+ margin: auto;
+ }
+ .splash-logos-container {
+ align-self: flex-end;
+ margin-top: 3rem;
+ width: 100%;
+ display: flex;
+ justify-content: center;
+ gap: 1.5rem;
+ align-items: center;
+ .logo-grand-lyon {
+ width: 100%;
+ max-width: 100px;
+ }
+ .logo-tiga {
+ width: 100%;
+ max-width: 80px;
+ }
+ }
+}
+.splash-footer {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: flex-start;
+ height: 10rem;
+ margin: 0 2rem;
+ .splash-footer-error-text {
+ text-align: center;
+ color: red;
+ margin: 0.5rem 0;
+ }
+ .splash-footer-button {
+ max-width: 50vw;
+ }
+}
diff --git a/src/components/Splash/SplashScreen.tsx b/src/components/Splash/SplashScreen.tsx
index 706d00ec6..85617cdbd 100644
--- a/src/components/Splash/SplashScreen.tsx
+++ b/src/components/Splash/SplashScreen.tsx
@@ -5,6 +5,7 @@ import logoTiga from 'assets/png/logo-TIGA.png'
import * as loadingData from 'assets/anims/splash.json'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+import './SplashScreen.scss'
const loadingOptions = {
loop: true,
diff --git a/src/components/Splash/SplashScreenError.tsx b/src/components/Splash/SplashScreenError.tsx
index 35fe0743d..bdb7cbfb5 100644
--- a/src/components/Splash/SplashScreenError.tsx
+++ b/src/components/Splash/SplashScreenError.tsx
@@ -7,6 +7,7 @@ import logoTiga from 'assets/png/logo-TIGA.png'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import * as loadingData from 'assets/anims/splash.json'
+import './SplashScreen.scss'
const loadingOptions = {
loop: false,
diff --git a/src/styles/components/_version.scss b/src/components/Version/Version.scss
similarity index 61%
rename from src/styles/components/_version.scss
rename to src/components/Version/Version.scss
index 655b9fcfc..3aa3284d9 100644
--- a/src/styles/components/_version.scss
+++ b/src/components/Version/Version.scss
@@ -1,5 +1,4 @@
-@import '../base/color';
-@import '../base/breakpoint';
+@import 'src/styles/base/color';
.version-root {
color: $grey-bright;
diff --git a/src/components/Version/Version.tsx b/src/components/Version/Version.tsx
index 36a3b85fe..a30c8428e 100644
--- a/src/components/Version/Version.tsx
+++ b/src/components/Version/Version.tsx
@@ -1,5 +1,6 @@
import React from 'react'
import { Client, useClient } from 'cozy-client'
+import './Version.scss'
const Version: React.FC = () => {
const client: Client = useClient()
diff --git a/src/components/Welcome/WelcomeModal.scss b/src/components/Welcome/WelcomeModal.scss
new file mode 100644
index 000000000..441bb698e
--- /dev/null
+++ b/src/components/Welcome/WelcomeModal.scss
@@ -0,0 +1,31 @@
+@import 'src/styles/base/color';
+@import 'src/styles/base/breakpoint';
+
+.wm-header {
+ background: $multi-color-radial-gradient;
+ background-clip: 'text';
+ -webkit-background-clip: text;
+ color: transparent;
+ margin-top: 2rem;
+}
+.wm-name {
+ background: $multi-color-radial-gradient;
+ background-clip: 'text';
+ -webkit-background-clip: text;
+ color: transparent;
+ margin-bottom: 1.25rem;
+}
+.button-ok {
+ width: 90%;
+ margin-bottom: 2rem;
+}
+.wm-perso {
+ text-align: center;
+ width: 60%;
+ margin: 1rem;
+}
+.wm-connect {
+ text-align: center;
+ width: 88%;
+ margin: 1rem;
+}
diff --git a/src/components/Welcome/WelcomeModal.tsx b/src/components/Welcome/WelcomeModal.tsx
index afffbfc47..a44184566 100644
--- a/src/components/Welcome/WelcomeModal.tsx
+++ b/src/components/Welcome/WelcomeModal.tsx
@@ -3,7 +3,7 @@ import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import Modal from 'components/CommonKit/Modal/Modal'
import StyledButton from 'components/CommonKit/Button/StyledButton'
import userInstanceSettings from 'components/Hooks/userInstanceSettings'
-
+import './WelcomeModal.scss'
interface WelcomeModalProps {
open: boolean
handleCloseClick: () => void
diff --git a/src/styles/components/_challenges.scss b/src/styles/components/_challenges.scss
deleted file mode 100644
index aa4e5c4fd..000000000
--- a/src/styles/components/_challenges.scss
+++ /dev/null
@@ -1,628 +0,0 @@
-@import '../base/color';
-@import '../base/breakpoint';
-
-// ChallengeCardContainer
-.ccc-root {
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- padding: 1rem 1.5rem;
- .ccc-content {
- min-height: 9rem;
- width: 45.75rem;
- @media #{$large-phone} {
- width: 100%;
- }
- .ccc-header {
- margin-top: 0.375rem;
- margin-bottom: 1.25rem;
- color: $grey-bright;
- }
- }
-}
-.loc-root {
- display: flex;
- justify-content: center;
- .loc-content {
- width: 100%;
- max-width: 53rem;
- display: grid;
- @media #{$large-phone} {
- display: block;
- }
- .timeline-line {
- background-color: $grey-bright;
- width: 1px;
- height: calc(100vh);
- grid-column: 1;
- grid-row: 1;
- position: unset;
- margin-left: 3.8rem;
- @media #{$tablet} {
- height: calc(100vh - 229px);
- }
- @media #{$large-phone} {
- height: 100vh;
- display: block;
- position: fixed;
- }
- }
- .list-of-challenge-cards {
- padding-top: 1rem;
- width: 100%;
- grid-column: 1;
- grid-row: 1;
-
- @media #{$large-phone} {
- display: block;
- }
- }
- }
-}
-
-// ChallengeListItem
-.cli-link {
- color: black;
- text-decoration: none;
-}
-.cli {
- cursor: pointer;
- display: flex;
- flex-direction: row;
- margin: 2rem 0.5rem;
- border-radius: 2px;
- @media #{$large-phone} {
- margin: 1rem 0.5rem;
- }
- &.cli-available {
- background: $blue-gradient;
- -webkit-transform: translateZ(0);
- transform: translateZ(0);
- }
- &.cli-ongoing {
- border: 1px solid $blue;
- background: $dark-light-2;
- -webkit-transform: translateZ(0);
- transform: translateZ(0);
- }
- .cli-left {
- flex: 1;
- display: flex;
- flex-direction: column;
- padding-left: 1.415rem;
- .cli-content {
- display: flex;
- flex-direction: row;
- .cli-content-icon {
- margin: 0.5rem 0;
- z-index: 5;
- width: 62px;
- height: 62px;
- }
- .cli-content-title {
- color: $white;
- margin: 0 1rem;
- align-self: center;
- }
- .subtitle-finished {
- color: $soft-grey;
- }
- .title-finished {
- color: $grey-bright;
- }
- .subtitle-ongoing {
- color: $blue;
- }
- .title-ongoing {
- color: $white;
- }
- .subtitle-available {
- color: $dark-light-2;
- }
- .title-available {
- color: $dark-light-2;
- }
- .title-locked {
- color: $soft-grey;
- opacity: 0.35;
- }
- }
- }
- .cli-right {
- align-self: center;
- padding-right: 1.2rem;
- &.cli-right-ongoing {
- padding-right: calc(1.2rem + 2px);
- }
- &.cli-right-available {
- padding-right: calc(1.2rem + 2px);
- }
- }
-}
-
-// ChallengeCard
-.cc-link {
- color: black;
- text-decoration: none;
-}
-.cc {
- cursor: pointer;
- display: flex;
- flex-direction: row;
- margin: 0.25rem 0.25rem;
- width: 100%;
- .cc-content-left {
- flex: 1;
- display: flex;
- flex-direction: column;
- justify-content: center;
- width: inherit;
- .cc-content-title {
- color: $white;
- &.cc-content-title-padding {
- padding-top: 1rem;
- }
- }
- .cc-content-progress {
- margin-top: 1rem;
- }
- .cc-content-timeline {
- padding: 0 0.5rem;
- }
- .cc-content-visu {
- padding: 1rem 0;
- }
- }
- .cc-content-right {
- display: flex;
- flex-direction: row;
- justify-content: center;
- align-items: center;
- align-self: center;
- .cc-notification {
- display: flex;
- align-items: center;
- justify-content: center;
- height: 1.8125rem;
- width: 1.8125rem;
- border-radius: 50%;
- background: $blue-radial-gradient;
- color: $dark-light;
- margin-right: 1rem;
- }
- }
-}
-
-// ChallengePage
-.cm-content {
- display: flex;
- flex-direction: column;
- justify-content: space-around;
- align-items: center;
- padding: 1.5rem 1rem 1.5rem;
- width: 22.125rem;
- @media #{$large-phone} {
- width: 90%;
- }
- .win {
- background: rgb(238, 213, 130);
- background: Linear-gradient(
- 90deg,
- #bf723b 0%,
- #dd9a2b 26.04%,
- #f6d74c 45.31%,
- #d1880d 75%,
- #a05b11 100%
- );
- background-clip: text;
- -webkit-background-clip: text;
- -webkit-text-fill-color: transparent;
- }
- .defeat {
- background: rgb(238, 213, 130);
- background: Linear-gradient(
- 90deg,
- #a66340 0%,
- #ae5f38 33.33%,
- #9e4e24 51.56%,
- #a4573a 66.67%
- );
- background-clip: text;
- -webkit-background-clip: text;
- -webkit-text-fill-color: transparent;
- }
- .cm-title {
- text-align: center;
- }
- .cm-win-badge-star {
- display: grid;
- align-items: center;
- justify-items: center;
- position: absolute;
- top: 52px;
- @media #{$large-phone} {
- top: 65px;
- }
- &.--ecolyo-royal {
- @extend .cp-content;
- top: 0px;
- @media #{$large-phone} {
- top: 5px;
- }
- }
- .cm-win-badge {
- -webkit-animation: scale-in-center 0.6s
- cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.1s both;
- animation: scale-in-center 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.1s
- both;
- grid-column: 1;
- grid-row: 1;
- z-index: 1;
- }
- .cm-win-star {
- grid-column: 1;
- grid-row: 1;
- -webkit-animation: rotating 60s linear infinite;
- animation: rotating 60s linear infinite;
- }
- }
- .cm-result {
- color: $grey-bright;
- text-align: center;
- margin-top: 1.5rem;
- margin-bottom: 0.5rem;
- margin-bottom: 165px;
- .cm-result-positif {
- color: $green;
- }
- .cm-result-negatif {
- color: $red-primary;
- }
- }
- .cm-badge {
- position: absolute;
- top: 135px;
- @media #{$large-phone} {
- top: 142px;
- }
- }
- .cm-button-valid {
- margin-top: 1rem;
- width: 100%;
- }
- .cm-txt {
- text-align: center;
- margin-bottom: 1rem;
- width: 100%;
- }
- .cm-text-new-available {
- margin-top: 1.25rem;
- }
-}
-
-// FollowChallengeTimeLine
-.list-of-days-duration {
- display: flex;
- flex-direction: row;
- justify-content: center;
- margin-top: 3rem;
- width: 100%;
- @media #{$large-phone} {
- margin-top: 1rem;
- }
- .day-solo {
- display: flex;
- flex-direction: column;
- width: 100%;
- .day-line-label {
- display: flex;
- flex-direction: row;
- justify-content: center;
- align-items: center;
- width: 100%;
- .date-dash {
- width: 50%;
- height: 2px;
- background-color: $grey-dark;
- }
- .past {
- background-color: $blue;
- }
- .futur {
- background-color: $grey-dark;
- }
- .none {
- opacity: 0;
- }
- .date-label {
- width: 0.625rem;
- height: 0.625rem;
- border-radius: 50%;
- position: absolute;
- }
- }
- .day-letter {
- margin-top: 0.8rem;
- text-align: center;
- color: $soft-grey;
- }
- .day-date {
- margin-top: 0.2rem;
- text-align: center;
- color: $soft-grey;
- }
- }
-}
-
-// OngoingChallengeFirstViewingDate
-.view-start-date {
- padding: 0.25rem 0;
- color: $blue;
-}
-
-// OngoingChallengePile
-.pile-energy-follow {
- display: flex;
- flex-direction: row;
- align-items: center;
- justify-content: center;
- width: 100%;
- &.--home {
- @extend .pile-energy-follow;
- justify-content: start;
- }
- .pile-section {
- display: grid;
- .filter-pile {
- grid-column: 1;
- grid-row: 1;
- justify-self: flex-end;
- align-self: center;
- width: 0%;
- position: relative;
- right: 0;
- opacity: 0.8;
- background-color: $dark-light-2;
- z-index: 1;
- }
- .pile-icon {
- grid-column: 1;
- grid-row: 1;
- margin: -25px 0;
- }
- }
- .max-energy {
- color: $grey-dark;
- }
- .values-section {
- margin-left: 1rem;
- }
- .no-values-section {
- color: $white;
- margin-left: 1rem;
- }
-}
-
-// ChallengeDetailsViewContainer
-.ongoing-challenge {
- min-height: 620px;
-}
-.cp-root {
- width: 100%;
- .cp-content {
- display: flex;
- align-items: center;
- flex-direction: column;
- color: $grey-bright;
- min-height: 84vh;
- justify-content: space-between;
-
- &.--locked {
- @extend .cp-content;
- justify-content: center;
- }
-
- .cp-info {
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: space-between;
- background-color: $dark-light-2;
- width: 100%;
- min-height: 55vh;
- padding-top: 1rem;
- padding-bottom: 0.5rem;
- &.--available {
- @extend .cp-info;
- height: 74vh;
- }
- .cp-icon {
- margin: 1rem;
- }
- .cp-icon-available {
- margin: 2rem;
- }
- .cp-win-badge-star {
- display: grid;
- align-items: center;
- justify-items: center;
- margin: -100px;
- .cp-win-badge {
- grid-column: 1;
- grid-row: 1;
- z-index: 1;
- }
- .cp-win-star {
- grid-column: 1;
- grid-row: 1;
- }
- }
- .cp-date {
- color: $soft-grey;
- text-align: center;
- margin-top: 1rem;
- }
- .cp-title {
- color: $grey-bright;
- text-align: center;
- margin-top: 0.5rem;
- }
- .cp-result {
- color: $grey-bright;
- text-align: center;
- margin-top: 1.5rem;
- margin-bottom: 0.5rem;
- .cp-result-positif {
- color: $green;
- }
- .cp-result-negatif {
- color: $red-primary;
- }
- }
- .cp-description {
- text-align: center;
- margin-top: 1rem;
- margin-bottom: 0.5rem;
- margin-left: 1.25rem;
- margin-right: 1.25rem;
- max-width: 53rem;
- }
- .cp-valid {
- justify-content: center;
- display: flex;
- flex-direction: row;
- width: 90%;
- margin-top: 0.75rem;
- max-width: 53rem;
- &.--ongoing {
- @extend .cp-valid;
- width: 25%;
- @media #{$large-phone} {
- width: 60%;
- }
- }
- .cp-left-button {
- margin-right: 0.25rem;
- margin-left: 0;
- width: 100%;
- }
- .cp-right-button {
- margin-left: 0.25rem;
- margin-right: 0;
- width: 100%;
- }
- }
- .lack-of-data-challenge {
- margin: auto;
- padding: 1rem;
- width: 90%;
- background-color: $red-primary;
- display: flex;
- justify-content: center;
- }
- .lack-of-data-content {
- align-items: center;
- flex-direction: column;
- max-width: 80%;
- }
- .lack-of-data-content > div,span {
- margin: 0.3rem 0;
- }
- .warning-white {
- position: relative;
-
- & svg {
- position: absolute;
- top: 0;
- left: -45px;
- }
- }
- .fluid-enum {
- font-weight: bold;
- }
-
- }
- .cp-follow {
- width: 90%;
- display: flex;
- flex-direction: column;
- align-items: center;
- margin-bottom: 1rem;
- max-width: 53rem;
- }
- .cp-valid-locked {
- margin-top: 2rem;
- width: 80%;
- max-width: 53rem;
- }
- .cp-bottom {
- padding: 1.25rem 1.25rem;
- width: 90%;
- display: flex;
- flex-direction: column;
- justify-content: space-between;
- max-width: 53rem;
- margin-bottom: 2rem;
- @media #{$large-phone} {
- margin-bottom: 0;
- }
- .cp-eg-content {
- width: 100%;
- .linked-ecogestures {
- text-transform: uppercase;
- }
- .cp-ecogestures {
- width: 100%;
- display: flex;
- flex-direction: row;
- justify-content: space-between;
- }
- }
- }
- }
-}
-
-// animations
-
-@-webkit-keyframes scale-in-center {
- 0% {
- -webkit-transform: scale(0);
- transform: scale(0);
- opacity: 1;
- }
- 100% {
- -webkit-transform: scale(1);
- transform: scale(1);
- opacity: 1;
- }
-}
-@keyframes scale-in-center {
- 0% {
- -webkit-transform: scale(0);
- transform: scale(0);
- opacity: 1;
- }
- 100% {
- -webkit-transform: scale(1);
- transform: scale(1);
- opacity: 1;
- }
-}
-
-@-webkit-keyframes rotating {
- from {
- -webkit-transform: rotate(0deg);
- }
- to {
- -webkit-transform: rotate(360deg);
- }
-}
-@keyframes rotating {
- from {
- -webkit-transform: rotate(0deg);
- }
- to {
- -webkit-transform: rotate(360deg);
- }
-}
diff --git a/src/styles/components/_consumptionvisualizer.scss b/src/styles/components/_consumptionvisualizer.scss
deleted file mode 100644
index 48519bbff..000000000
--- a/src/styles/components/_consumptionvisualizer.scss
+++ /dev/null
@@ -1,111 +0,0 @@
-@import '../base/color';
-@import '../base/breakpoint';
-
-.cv {
- display: flex;
- flex-direction: column;
- align-items: center;
- width: 27.5rem;
- @media #{$large-phone} {
- width: 100%;
- }
- .cv-load {
- min-height: 5.25rem;
- display: flex;
- align-items: center;
- .cv-load-content {
- display: flex;
- flex-direction: row;
- align-items: center;
- .cv-load-section {
- display: flex;
- flex-direction: column;
- align-items: center;
- padding: 0.5rem 0.5rem;
- &.cv-load-section-left {
- align-items: flex-end;
- }
- &.cv-load-section-right {
- align-items: flex-start;
- }
- .cv-load-value {
- flex-direction: row;
- & span {
- align-self: flex-end;
- margin-left: 0.5em;
- }
- }
- }
- }
- }
- .cv-euro {
- display: flex;
- flex-direction: row;
- .cv-euro-link {
- text-decoration: none;
- color: transparent;
- }
- .cv-euro-fluid {
- padding: 0 0.5rem;
- display: flex;
- align-items: center;
- .cv-euro-fluid-icon {
- margin-right: 0.5rem;
- }
- & div {
- padding-top: 0.2rem;
- }
- }
- }
- .cv-info {
- min-height: 1.5rem;
- display: flex;
- align-items: center;
- }
- .electricity {
- color: $elec-color;
- }
- .electricity-compare {
- color: $elec-compare-color;
- }
- .water {
- color: $water-color;
- }
- .water-compare {
- color: $water-compare-color;
- }
- .gas {
- color: $gas-color;
- }
- .gas-compare {
- color: $gas-compare-color;
- }
- .multifluid {
- color: $white;
- }
- .multifluid-compare {
- color: $multi-compare-color;
- }
- .error {
- color: $red-primary;
- }
- .error-line {
- color: $red-primary;
- cursor: pointer;
- display: flex;
- align-items: center;
- }
- .underlined-error {
- border-bottom: solid 1px $red-primary;
- }
- .warning-icon {
- margin-right: 4px;
- }
- .cv-button {
- border: none;
- background: none;
- color: $soft-grey;
- text-decoration: underline;
- }
-
-}
diff --git a/src/styles/components/_fluid.scss b/src/styles/components/_fluid.scss
deleted file mode 100644
index 04e1689f4..000000000
--- a/src/styles/components/_fluid.scss
+++ /dev/null
@@ -1,194 +0,0 @@
-@import '../base/color';
-@import '../base/breakpoint';
-
-//SelectFluid
-.sf {
- display: flex;
- flex-direction: column;
- .sf-header {
- .sf-header-title {
- color: $grey-bright;
- }
- .sf-header-text {
- color: $soft-grey;
- }
- }
- .sf-content {
- display: flex;
- flex-direction: column;
- align-items: center;
- margin-top: 3rem;
- .sf-link {
- margin: 1rem;
- }
- }
-}
-
-//FluidContainer
-.fc-root {
- background-color: $dark-light-2;
- padding: 2rem 2rem 1rem 2rem;
- margin-bottom: 1rem;
- @media #{$large-phone} {
- padding: 1.5rem 1rem 1rem 1rem;
- margin-bottom: 0.5rem;
- }
- .fc-content {
- min-height: 31.875rem;
- @media #{$large-phone} {
- min-height: 23.875rem;
- }
- .fc-loader {
- min-height: 31.875rem;
- @media #{$large-phone} {
- min-height: 23.875rem;
- }
- display: flex;
- justify-content: center;
- align-items: center;
- }
- }
-}
-
-//FluidView
-.fv-root {
- direction: 'rtl';
- .fv-nav-period {
- display: flex;
- flex-direction: row;
- & .nav-button {
- flex: 1;
- font-size: large;
- }
- }
- .fv-header {
- display: flex;
- flex-direction: column;
- align-items: center;
- min-height: 8.375rem;
- margin-bottom: 0.25rem;
- }
- .fv-footer {
- display: flex;
- justify-content: center;
- .fv-footer-compare {
- width: 100%;
- max-width: 58.75rem;
- display: flex;
- flex-direction: row;
- align-items: center;
- & :hover {
- cursor: pointer;
- }
- & .fv-footer-label {
- flex: 1;
- display: flex;
- justify-content: flex-start;
- color: $soft-grey;
- &.selected {
- color: $white;
- }
- }
- }
-
- .fv-footer-challenge {
- width: 100%;
- max-width: 58.75rem;
- display: flex;
- flex-direction: row;
- align-items: center;
- .fv-link {
- text-decoration: none;
- color: $soft-grey;
- }
- & .fv-footer-label-padding {
- flex: 1;
- display: flex;
- justify-content: flex-start;
- padding-left: 0.75rem;
- color: $soft-grey;
- }
- }
- }
-}
-.chart-indicator-none {
- visibility: hidden;
- height: 0;
-}
-.chart-indicator-block {
- visibility: visible;
- height: auto;
-}
-
-//FluidSwipe
-.fs-root {
- flex: 1;
- height: 22rem;
- @media #{$large-phone} {
- height: 14rem;
- }
- .chart-loading {
- width: 100%;
- justify-content: center;
- display: flex;
- }
- .fs-slide {
- min-height: 22rem;
- overflow-x: hidden;
- display: flex;
- justify-content: center;
- align-items: center;
- @media #{$large-phone} {
- min-height: 14rem;
- }
- .chart-none {
- visibility: hidden;
- width: 0;
- }
- .chart-block {
- visibility: visible;
- }
- }
-}
-
-// Enedis Half Hour Load Activation
-.cta-box {
- background-color: rgba(18, 18, 18, 0.8);
- position: absolute;
- left: 0;
- width: calc(100vw - 220px);
- padding: 0rem 1rem 0rem 0rem;
- z-index: 1;
- display: flex;
- justify-content: center;
- align-items: center;
- flex-direction: column;
- height: 37.5rem;
- @media #{$large-phone} {
- height: 29rem;
- width: 100vw;
- }
- @media #{$tablet} {
- width: 100vw;
- }
-
- .cta-box-header {
- text-align: center;
- font-weight: bold;
- letter-spacing: 0.2px;
- margin-bottom: 1.5em;
- color: $grey-bright;
- width: 50%;
- @media #{$large-phone} {
- width: 80%;
- }
- }
- .cta-box-button {
- margin-left: auto;
- margin-right: auto;
- width: 50%;
- @media #{$large-phone} {
- width: 80%;
- }
- }
-}
diff --git a/src/styles/components/_konnector.scss b/src/styles/components/_konnector.scss
deleted file mode 100644
index 26a1bd78f..000000000
--- a/src/styles/components/_konnector.scss
+++ /dev/null
@@ -1,235 +0,0 @@
-@import '../base/color';
-@import '../base/breakpoint';
-.accordion {
- display: flex;
- flex-direction: column;
- color: $white;
- padding: 1rem 0;
- margin-bottom: 2vh;
- border-radius: 4px;
- background: $grey-linear-gradient-background;
- box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.75);
- transition: background-color 0.6s ease;
- &.active {
- background-color: $accordion-active-background;
- }
-
- .accordion-header {
- display: flex;
- align-items: center;
- border: none;
- outline: none;
- padding: 0 1rem;
- &:hover {
- cursor: pointer;
- }
- .accordion-icon {
- margin-right: 1rem;
- @media #{$large-phone} {
- max-width: 16vw;
- }
- }
- .accordion-info {
- flex: 3;
- color: $grey-bright;
- @media #{$large-phone} {
- display: block;
- }
- .accordion-title {
- flex: 1;
- @media #{$large-phone} {
- // margin-bottom: 1rem;
- }
- }
- }
- .state-picto {
- position: absolute;
- display: flex;
- }
- }
- .accordion-update-result {
- margin: 1rem 0;
- @media #{$large-phone} {
- margin: 0.5rem 0;
- }
- }
- .accordion-update {
- flex: 2;
- padding: 0.5rem 1rem;
- }
- .accordion-update-errored {
- padding: 0.5rem 1rem;
- background-color: $red-primary;
- }
- .accordion-state {
- flex: 2;
- margin-right: 1rem;
- }
- .accordion-frequency {
- flex: 1;
- padding: 0 1rem;
- }
- .accordion-caption {
- color: $grey-bright;
- text-transform: lowercase;
- &::first-letter {
- text-transform: uppercase;
- }
- }
- .accordion-caption-errored {
- display: flex;
- align-items: center;
- color: $grey-bright;
- }
- .warning-white {
- margin-right: 1rem;
- }
- .warning-icon {
- margin-right: 1rem;
- }
- .accordion-content {
- overflow: hidden;
- transition: max-height 0.6s ease;
- .info-provider {
- padding: 0;
- color: $grey-bright;
- margin-bottom: 0;
- }
- }
- .inline-buttons {
- display: flex;
- flex-flow: row nowrap;
- padding: 0 2rem;
- @media #{$large-phone} {
- padding: 0 1rem;
- }
- }
- .konnector-delete {
- margin-right: 0.25rem;
- color: $red-primary !important;
- }
- .konnector-update {
- margin-left: 0.25rem;
- }
- .btn-position {
- width: 100%;
- margin: 0.5rem 1rem;
- }
-}
-.--errored {
- border: solid 1px $red-primary;
-}
-
-.kv-root {
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- padding: 0 1.5rem;
- .kv-content {
- width: 45.75rem;
- @media #{$large-phone} {
- width: 100%;
- }
- .kv-header {
- margin-top: 2.5rem;
- margin-bottom: 1.25rem;
- color: $grey-bright;
- }
- }
-}
-
-// KonnectorNotFound
-.knotfound {
- margin: 0 1.5rem;
- @media #{$large-phone} {
- margin: 0;
- }
- .knotfound-text {
- color: $grey-bright;
- padding-top: 1rem;
- }
- .knotfound-button {
- margin-bottom: 1rem;
- }
-}
-
-// KonnectorOAuthForm
-.koauthform {
- margin: 0 1.5rem;
- padding: 0 1rem;
- .create-account {
- color: $grey-bright;
- }
- @media #{$large-phone} {
- margin: 0;
- padding: 0 1rem;
- }
- .koauthform-text {
- color: $grey-bright;
- padding-top: 1rem;
- }
- .koauthform-button {
- margin-bottom: 1rem;
- }
-}
-
-// KonnectorLoginForm
-.kloginauthform {
- .create-account {
- color: $grey-bright;
- }
- .kloginauthform-text {
- color: $grey-bright;
- padding-top: 1rem;
- }
- .kloginauthform-button {
- margin-bottom: 1rem;
- }
-}
-
-// KonnectorLoading
-.klaunch-content {
- margin: 0.5rem 1.5rem;
- @media #{$large-phone} {
- margin: 0.5rem 0;
- }
- .klaunch-content-text {
- color: $grey-bright;
- margin: 1rem;
- text-align: center;
- .kc-wait {
- color: $soft-grey;
- margin-bottom: 2rem;
- }
- }
- .klaunch-content-text-center {
- text-align: center;
- }
- .klaunch-info {
- margin: 1.5rem;
- .konnector-config {
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- text-align: center;
- .kce-picto-txt {
- color: $red-primary;
- margin: 1.25rem;
- }
- .kcs-picto-txt {
- color: $multi-color;
- margin: 1.25rem;
- }
- }
- }
-}
-
-.state-icon {
- height: 22px;
- width: 22px;
- position: absolute;
- bottom: 8px;
- left: 30px;
-}
diff --git a/src/styles/components/_panel.scss b/src/styles/components/_panel.scss
deleted file mode 100644
index e40dec4c4..000000000
--- a/src/styles/components/_panel.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-
-@import "../base/color";
-@import "../base/breakpoint";
-
-
-
diff --git a/src/styles/components/_splash.scss b/src/styles/components/_splash.scss
deleted file mode 100644
index 797facc9b..000000000
--- a/src/styles/components/_splash.scss
+++ /dev/null
@@ -1,72 +0,0 @@
-@import '../base/color';
-@import '../base/breakpoint';
-
-.splash-root {
- position: fixed;
- z-index: 1500;
- left: 0;
- top: 0;
- height: 100vh;
- width: 100vw;
- opacity: 1;
- overflow: hidden;
- background-color: rgba(27, 28, 34, 1);
- display: flex;
- flex-direction: column;
- transition-property: opacity;
- transition-timing-function: ease-in-out;
- &.splash-fade {
- opacity: 0;
- }
-}
-
-.splash-header {
- height: 6rem;
- display: flex;
- align-items: center;
- justify-content: center;
- color: var(--greyBright);
- }
- .splash-content {
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: flex-end;
- flex: 1;
- &:first-child {
- margin: auto;
- }
- .splash-logos-container {
- align-self: flex-end;
- margin-top: 3rem;
- width: 100%;
- display: flex;
- justify-content: center;
- gap: 1.5rem;
- align-items: center;
- .logo-grand-lyon {
- width: 100%;
- max-width: 100px;
- }
- .logo-tiga {
- width: 100%;
- max-width: 80px;
- }
- }
- }
- .splash-footer {
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: flex-start;
- height: 10rem;
- margin: 0 2rem;
- .splash-footer-error-text {
- text-align: center;
- color: red;
- margin: 0.5rem 0;
- }
- .splash-footer-button {
- max-width: 50vw;
- }
- }
\ No newline at end of file
diff --git a/src/styles/index.scss b/src/styles/index.scss
index adfc221e3..418f64c99 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -7,27 +7,7 @@
@import 'base/color';
@import 'base/breakpoint';
@import 'base/typography';
-@import 'components/card';
-@import 'components/form';
-// @import 'components/button';
-@import 'components/konnector';
-@import 'components/fluid';
-@import 'components/navigator';
-@import 'components/consumptionvisualizer';
@import 'components/barchart';
-@import 'components/nav';
-@import 'components/indicators';
-@import 'components/challenges';
-@import 'components/ecogesture';
-@import 'components/modal';
-@import 'components/faq';
-@import 'components/legalnotice';
-@import 'components/splash';
-@import 'components/auth';
-@import 'components/feedback';
-@import 'components/version';
-@import 'components/report';
-@import 'components/oldDataModal';
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap');
--
GitLab