diff --git a/src/components/GCU/GCULink.tsx b/src/components/GCU/GCULink.tsx
index 2ae3e642845ab2ab2f853c9477519c31f3f7e9d8..d3bdd037f4985be8786cc229f8117744d67e7288 100644
--- a/src/components/GCU/GCULink.tsx
+++ b/src/components/GCU/GCULink.tsx
@@ -11,15 +11,12 @@ const GCULink: React.FC = () => {
return (
<div className="gcu-link-root">
<div className="gcu-link-content">
- <div className="gcu-link-header text-16-normal-uppercase">
- {t('gcu_option.title')}
- </div>
<Link
className="gcu-link-card-link"
component={RouterLink}
to="options/gcu"
>
- <div className="card">
+ <div className="card optionCard">
<div className="gcu-link-card">
<div className="gcu-link-card-content">
<StyledIcon
@@ -28,7 +25,7 @@ const GCULink: React.FC = () => {
size={42}
/>
<div className="gcu-link-card-content-title">
- {t('gcu_option.read_gcu')}
+ {t('gcu_option.title')}
</div>
</div>
</div>
diff --git a/src/components/GCU/__snapshots__/GCULink.spec.tsx.snap b/src/components/GCU/__snapshots__/GCULink.spec.tsx.snap
index 0723f105cc5aaf29e6d48b123cabc995fb9f0483..da5e1b8ff218650aaa87b7e74b76df94ceeaf5cc 100644
--- a/src/components/GCU/__snapshots__/GCULink.spec.tsx.snap
+++ b/src/components/GCU/__snapshots__/GCULink.spec.tsx.snap
@@ -31,7 +31,7 @@ exports[`LegalNoticeLink component should be rendered correctly 1`] = `
to="options/legalnotice"
>
<div
- className="card"
+ className="card optionCard"
onClick={[Function]}
>
<div
diff --git a/src/components/GCU/gcuLink.scss b/src/components/GCU/gcuLink.scss
index b7545dd98ecfd6a257b712c512e5ec91e04f5ac4..42e9c1500da97f3a40f4cfe27d61c6d834fe42c4 100644
--- a/src/components/GCU/gcuLink.scss
+++ b/src/components/GCU/gcuLink.scss
@@ -7,8 +7,7 @@
align-items: center;
justify-content: center;
color: $white;
- padding: 1rem 1.5rem 0;
- margin-top: 1rem;
+ padding: 0 1.5rem 0;
.gcu-link-header {
margin-bottom: 1.25rem;
}
@@ -39,6 +38,9 @@
}
}
}
+.optionCard {
+ padding: 0.938rem 1rem;
+}
.gcu-link-card-link {
color: black;
}
diff --git a/src/components/LegalNotice/LegalNoticeLink.tsx b/src/components/LegalNotice/LegalNoticeLink.tsx
index 06e3ad554cbe966ffe9837e4eb6b7a66c8f6b6c6..d787f0f87ab10fab63b2e1b38e30c566121578c4 100644
--- a/src/components/LegalNotice/LegalNoticeLink.tsx
+++ b/src/components/LegalNotice/LegalNoticeLink.tsx
@@ -29,7 +29,7 @@ const LegalNoticeLink: React.FC = () => {
component={RouterLink}
to="options/legalnotice"
>
- <div className="card" onClick={emitNavEvent}>
+ <div className="card optionCard" onClick={emitNavEvent}>
<div className="legal-notice-card">
<div className="legal-notice-card-content">
<StyledIcon
diff --git a/src/components/LegalNotice/__snapshots__/LegalNoticeLink.spec.tsx.snap b/src/components/LegalNotice/__snapshots__/LegalNoticeLink.spec.tsx.snap
index 06fbb1b9c3ac92f421eb1a7a724c649795acdefe..7a39bbb71ebbb419d51b357898ae570d3e1624a9 100644
--- a/src/components/LegalNotice/__snapshots__/LegalNoticeLink.spec.tsx.snap
+++ b/src/components/LegalNotice/__snapshots__/LegalNoticeLink.spec.tsx.snap
@@ -7,11 +7,6 @@ exports[`GCULink component should be rendered correctly 1`] = `
<div
className="gcu-link-content"
>
- <div
- className="gcu-link-header text-16-normal-uppercase"
- >
- gcu_option.title
- </div>
<WithStyles(ForwardRef(Link))
className="gcu-link-card-link"
component={
@@ -31,7 +26,7 @@ exports[`GCULink component should be rendered correctly 1`] = `
to="options/gcu"
>
<div
- className="card"
+ className="card optionCard"
>
<div
className="gcu-link-card"
@@ -47,7 +42,7 @@ exports[`GCULink component should be rendered correctly 1`] = `
<div
className="gcu-link-card-content-title"
>
- gcu_option.read_gcu
+ gcu_option.title
</div>
</div>
</div>
diff --git a/src/components/LegalNotice/legalNoticeLink.scss b/src/components/LegalNotice/legalNoticeLink.scss
index 402a22fc23d7dd52321ea2a21ae2de308b2350a2..21067f1035d1ed0140d7af4c033553c179127b45 100644
--- a/src/components/LegalNotice/legalNoticeLink.scss
+++ b/src/components/LegalNotice/legalNoticeLink.scss
@@ -9,9 +9,10 @@
justify-content: center;
color: $white;
padding: 1rem 1.5rem 0;
- margin-top: 1rem;
+ margin-top: 2rem;
.legal-notice-header {
margin-bottom: 1.25rem;
+ color: $grey-bright;
}
.legal-notice-content {
max-width: 45.75rem;
diff --git a/src/components/Options/HelpLink.scss b/src/components/Options/HelpLink.scss
new file mode 100644
index 0000000000000000000000000000000000000000..7046efa09ce216c0661785197782cec52cdf6ea4
--- /dev/null
+++ b/src/components/Options/HelpLink.scss
@@ -0,0 +1,51 @@
+@import 'src/styles/base/color';
+@import 'src/styles/base/breakpoint';
+
+.help-root {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ padding: 0 1.5rem;
+ .help-content {
+ margin-bottom: -1rem;
+ width: 45.75rem;
+ a {
+ color: $white;
+ text-decoration: none;
+ }
+ @media #{$large-phone} {
+ width: 100%;
+ }
+ .help-header {
+ margin-top: 1.5rem;
+ margin-bottom: 1.25rem;
+ color: $grey-bright;
+ }
+ }
+}
+
+.help-card-link {
+ color: $white;
+}
+.help-card {
+ display: flex;
+ flex-direction: row;
+ margin: -0.75rem 0;
+ width: 100%;
+ @media #{$large-phone} {
+ width: 100%;
+ }
+ .help-card-content {
+ display: flex;
+ flex-direction: row;
+ .help-card-content-icon {
+ margin: 0.5rem 0;
+ }
+ .help-card-content-title {
+ margin: 0 1rem;
+ align-self: center;
+ text-decoration: none;
+ }
+ }
+}
diff --git a/src/components/Options/HelpLink.tsx b/src/components/Options/HelpLink.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..495bea2f8af87ee3fc63b73b312427403673d465
--- /dev/null
+++ b/src/components/Options/HelpLink.tsx
@@ -0,0 +1,37 @@
+import React from 'react'
+import './HelpLink.scss'
+import Link from '@material-ui/core/Link'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+import QuestionMarkIcon from 'assets/icons/ico/question-mark.svg'
+
+const HelpLink: React.FC = () => {
+ const { t } = useI18n()
+ return (
+ <div className="help-root">
+ <div className="help-content">
+ <div className="help-header text-16-normal-uppercase">
+ {t('help.title_help')}
+ </div>
+ <Link className="help-card-link">
+ <div className="card optionCard">
+ <div className="help-card">
+ <div className="help-card-content">
+ <StyledIcon
+ className="help-card-content-icon"
+ icon={QuestionMarkIcon}
+ size={42}
+ />
+ <div className="help-card-content-title">
+ {t('help.read_help')}
+ </div>
+ </div>
+ </div>
+ </div>
+ </Link>
+ </div>
+ </div>
+ )
+}
+
+export default HelpLink
diff --git a/src/components/Options/OptionsView.tsx b/src/components/Options/OptionsView.tsx
index 6d757880660925c68a700276234f36339ca771eb..a8e7ea2486a7bfd401247703c0a73e75700265a9 100644
--- a/src/components/Options/OptionsView.tsx
+++ b/src/components/Options/OptionsView.tsx
@@ -4,7 +4,7 @@ import Header from 'components/Header/Header'
import Content from 'components/Content/Content'
import ExportOptions from 'components/Options/exportOptions'
import ReportOptions from 'components/Options/ReportOptions'
-import FAQLink from 'components/FAQ/FAQLink'
+import HelpLink from './HelpLink'
import LegalNoticeLink from 'components/LegalNotice/LegalNoticeLink'
import GCULink from 'components/GCU/GCULink'
import Version from 'components/Version/Version'
@@ -29,7 +29,7 @@ const OptionsView: React.FC = () => {
<ProfileTypeOptions />
<ExportOptions />
<ReportOptions />
- <FAQLink />
+ <HelpLink />
<LegalNoticeLink />
<GCULink />
<MatomoOptOut />
diff --git a/src/components/Options/ProfileTypeOptions.tsx b/src/components/Options/ProfileTypeOptions.tsx
index 580b086d3d4ef2e8b28ce910308958e3103ec688..c22a535b6a7b3c25419a46f28ef8f9a4fd0f7f3f 100644
--- a/src/components/Options/ProfileTypeOptions.tsx
+++ b/src/components/Options/ProfileTypeOptions.tsx
@@ -241,7 +241,7 @@ const ProfileTypeOptions: React.FC = () => {
)}
{profile.isProfileTypeCompleted === false && (
<StyledCard onClick={goToForm} className="profile-link">
- <StyledIcon className="profile-icon" icon={profileIcon} size={50} />
+ <StyledIcon className="profile-icon" icon={profileIcon} size={42} />
<span className="link-label text-16-normal">
{t('profile_type.read_profile')}
</span>
diff --git a/src/components/Options/ReportOptions.tsx b/src/components/Options/ReportOptions.tsx
index 0a5778ad3741afaf1cd7afc9c7aff452e0e1e061..04a5d172ef22a84b3bdf3855b2fa9874cb736d49 100644
--- a/src/components/Options/ReportOptions.tsx
+++ b/src/components/Options/ReportOptions.tsx
@@ -166,7 +166,7 @@ const ReportOptions: React.FC = () => {
<div className="alert-input-subtext">
{t('profile.report.input_label_subtext_alert')}
{Math.round(maxDayData.value)}
- {' L)'}
+ {' L'}
</div>
)}
</div>
diff --git a/src/components/Options/__snapshots__/OptionsView.spec.tsx.snap b/src/components/Options/__snapshots__/OptionsView.spec.tsx.snap
index 8889596f229dbeef4341f3f654f6cb9502b91401..1fcb358c2fd2fdfedf95ab7a6e2f06504c83460f 100644
--- a/src/components/Options/__snapshots__/OptionsView.spec.tsx.snap
+++ b/src/components/Options/__snapshots__/OptionsView.spec.tsx.snap
@@ -15,7 +15,7 @@ exports[`OptionsView component should be rendered correctly 1`] = `
<ProfileTypeOptions />
<ExportOptions />
<ReportOptions />
- <FAQLink />
+ <HelpLink />
<LegalNoticeLink />
<GCULink />
<MatomoOptOut />
diff --git a/src/components/Options/exportOptions.scss b/src/components/Options/exportOptions.scss
index cd552f4159660e8524de2ed84e6783c5495ca25f..9c291d0a334df0e1ac6df0087ff47f4cc97a6109 100644
--- a/src/components/Options/exportOptions.scss
+++ b/src/components/Options/exportOptions.scss
@@ -16,8 +16,11 @@ div.expansion-panel-root.Mui-expanded:last-child {
@media #{$large-phone} {
width: 100%;
}
+ .MuiAccordionSummary-content {
+ margin: 0;
+ }
.accordion-title {
- padding-left: 0.7rem;
+ padding-left: 1rem;
}
.expansion-panel-details {
flex-direction: column;
@@ -57,4 +60,7 @@ div.expansion-panel-root.Mui-expanded:last-child {
left: 4px;
}
}
+ div.expansion-panel-summary {
+ padding: 0 1.2rem;
+ }
}
diff --git a/src/components/Options/matomoOptOut.scss b/src/components/Options/matomoOptOut.scss
index 184e9e44e3ae351ae99a80537907fc0d187336bc..830a9fb804007b926142b5da14febf8facf8cca5 100644
--- a/src/components/Options/matomoOptOut.scss
+++ b/src/components/Options/matomoOptOut.scss
@@ -8,7 +8,7 @@
align-items: center;
justify-content: center;
padding: 0 1.5rem;
- margin: 1rem 0;
+ margin: 2rem 0;
.matomo-opt-out {
margin: 0 auto;
diff --git a/src/components/Options/profileTypeOptions.scss b/src/components/Options/profileTypeOptions.scss
index d0cb8f934d1926cedafc918bd49ed13937a87532..9781a99617dfbd29a014ce4f7bd323dcf6b1789e 100644
--- a/src/components/Options/profileTypeOptions.scss
+++ b/src/components/Options/profileTypeOptions.scss
@@ -2,7 +2,7 @@
@import 'src/styles/base/breakpoint';
.profile-type-root {
- margin-top: 1.75rem;
+ margin-top: 2rem;
padding: 0 1.5rem;
.profile-type-content {
margin: 0 auto;
@@ -10,6 +10,10 @@
@media (min-width: $width-large-phone) {
width: 45.75rem;
}
+ .MuiButtonBase-root {
+ height: 4rem;
+ margin: 0 -6px 0 0;
+ }
}
.value {
color: $white;
@@ -50,7 +54,7 @@
width: 100%;
}
.profile-title {
- padding-left: 0.5rem;
+ padding-left: 1rem;
}
button.profile-link {
@@ -70,4 +74,10 @@
}
}
}
+ div.expansion-panel-summary {
+ padding: 0 1.2rem;
+ }
+ .MuiCardContent-root {
+ padding: 0 1rem !important;
+ }
}
diff --git a/src/locales/fr.json b/src/locales/fr.json
index d345c478197c3660cf6fee6fa0546db5d5536fbd..13670e21d13d83b86833cdaed908c6748c797fdf 100644
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@@ -574,6 +574,10 @@
"button_toggle_detail": "Afficher ou masquer le détail de la question"
}
},
+ "help": {
+ "title_help": "Besoin d'aide ?",
+ "read_help": "Accéder au Service d'Assistance Utilisateur"
+ },
"feedback": {
"title": "Partagez-nous vos retours",
"type": "Motif du retour :",
@@ -811,7 +815,7 @@
},
"legal": {
"read_legal": "Lire les mentions légales",
- "title_legal": "Mentions légales",
+ "title_legal": "Mentions légales & CGU",
"version": "V3.0 du 27.06.2022",
"site": "Site du service Ecolyo : <a href=\"https://ecolyo.com/\"> https://ecolyo.com/</a>",
"adress": "Métropole de Lyon - 20, rue du Lac – CS 33569 - 69505 Lyon cedex 03",
@@ -965,11 +969,11 @@
"profile": {
"report": {
"title_alert": "Alerte fuite d'eau",
- "title_bilan": "Bilan et conseils",
+ "title_bilan": "Notification par mail",
"switch_label_bilan": "Je reçois la lettre mensuelle contenant un bilan et des conseils sur ma consommation.",
"switch_label_alert": "Être prévenu d’un dépassement anormal de ma consommation d’eau",
"input_label_alert": "Si ma consommation d’eau quotidienne dépasse :",
- "input_label_subtext_alert": "(Votre consommation quotidienne maximum sur les 6 derniers mois\u00a0: ",
+ "input_label_subtext_alert": "Votre consommation quotidienne maximum sur les 6 derniers mois\u00a0: ",
"activate": "Activer",
"deactivate": "Désactiver"
},
diff --git a/yarn.lock b/yarn.lock
index 6ed912bdbfe9a4840753f23ddd77e35b95be2533..f5105684842ae72c8f01beba05583edb395723ee 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3012,6 +3012,14 @@
"@typescript-eslint/typescript-estree" "5.37.0"
debug "^4.3.4"
+"@typescript-eslint/scope-manager@5.30.0":
+ version "5.30.0"
+ resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-5.30.0.tgz#bf585ee801ab4ad84db2f840174e171a6bb002c7"
+ integrity sha512-3TZxvlQcK5fhTBw5solQucWSJvonXf5yua5nx8OqK94hxdrT7/6W3/CS42MLd/f1BmlmmbGEgQcTHHCktUX5bQ==
+ dependencies:
+ "@typescript-eslint/types" "5.30.0"
+ "@typescript-eslint/visitor-keys" "5.30.0"
+
"@typescript-eslint/scope-manager@5.30.5":
version "5.30.5"
resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-5.30.5.tgz#7f90b9d6800552c856a5f3644f5e55dd1469d964"
@@ -3061,6 +3069,11 @@
resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-5.30.5.tgz#36a0c05a72af3623cdf9ee8b81ea743b7de75a98"
integrity sha512-kZ80w/M2AvsbRvOr3PjaNh6qEW1LFqs2pLdo2s5R38B2HYXG8Z0PP48/4+j1QHJFL3ssHIbJ4odPRS8PlHrFfw==
+"@typescript-eslint/types@5.30.5":
+ version "5.30.5"
+ resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-5.30.5.tgz#36a0c05a72af3623cdf9ee8b81ea743b7de75a98"
+ integrity sha512-kZ80w/M2AvsbRvOr3PjaNh6qEW1LFqs2pLdo2s5R38B2HYXG8Z0PP48/4+j1QHJFL3ssHIbJ4odPRS8PlHrFfw==
+
"@typescript-eslint/types@5.36.0":
version "5.36.0"
resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-5.36.0.tgz#cde7b94d1c09a4f074f46db99e7bd929fb0a5559"
@@ -3071,6 +3084,19 @@
resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-5.37.0.tgz#09e4870a5f3af7af3f84e08d792644a87d232261"
integrity sha512-3frIJiTa5+tCb2iqR/bf7XwU20lnU05r/sgPJnRpwvfZaqCJBrl8Q/mw9vr3NrNdB/XtVyMA0eppRMMBqdJ1bA==
+"@typescript-eslint/typescript-estree@5.30.0":
+ version "5.30.0"
+ resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-5.30.0.tgz#4565ee8a6d2ac368996e20b2344ea0eab1a8f0bb"
+ integrity sha512-hDEawogreZB4n1zoqcrrtg/wPyyiCxmhPLpZ6kmWfKF5M5G0clRLaEexpuWr31fZ42F96SlD/5xCt1bT5Qm4Nw==
+ dependencies:
+ "@typescript-eslint/types" "5.30.0"
+ "@typescript-eslint/visitor-keys" "5.30.0"
+ debug "^4.3.4"
+ globby "^11.1.0"
+ is-glob "^4.0.3"
+ semver "^7.3.7"
+ tsutils "^3.21.0"
+
"@typescript-eslint/typescript-estree@5.30.5":
version "5.30.5"
resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-5.30.5.tgz#c520e4eba20551c4ec76af8d344a42eb6c9767bb"
@@ -3110,6 +3136,18 @@
semver "^7.3.7"
tsutils "^3.21.0"
+"@typescript-eslint/utils@5.30.5":
+ version "5.30.5"
+ resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-5.30.5.tgz#3999cbd06baad31b9e60d084f20714d1b2776765"
+ integrity sha512-o4SSUH9IkuA7AYIfAvatldovurqTAHrfzPApOZvdUq01hHojZojCFXx06D/aFpKCgWbMPRdJBWAC3sWp3itwTA==
+ dependencies:
+ "@types/json-schema" "^7.0.9"
+ "@typescript-eslint/scope-manager" "5.30.5"
+ "@typescript-eslint/types" "5.30.5"
+ "@typescript-eslint/typescript-estree" "5.30.5"
+ eslint-scope "^5.1.1"
+ eslint-utils "^3.0.0"
+
"@typescript-eslint/utils@5.36.0":
version "5.36.0"
resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-5.36.0.tgz#104c864ecc1448417606359275368bf3872bbabb"