diff --git a/src/components/Ecogesture/EcogestureModal.tsx b/src/components/Ecogesture/EcogestureModal.tsx
index 8d31c646d0f8c35577bc06a00d92010b0dfe7ac2..1ea598db980a17a795365d9bd56faa8dfe97752a 100644
--- a/src/components/Ecogesture/EcogestureModal.tsx
+++ b/src/components/Ecogesture/EcogestureModal.tsx
@@ -120,7 +120,7 @@ const EcogestureModal: React.FC<EcogestureModalProps> = ({
))}
</div>
</div>
- <div className="long-name">{ecogesture.longName}</div>
+ <div className="text-16-bold long-name">{ecogesture.longName}</div>
{isAction ? (
<Button
aria-label={t(
diff --git a/src/components/Ecogesture/SingleEcogesture.tsx b/src/components/Ecogesture/SingleEcogesture.tsx
index 82af5587ee2d8c667ba8b8a93a01af78c27dbb9e..1b5f7e7985a3d339b37a43a7934fdbf9e26edf22 100644
--- a/src/components/Ecogesture/SingleEcogesture.tsx
+++ b/src/components/Ecogesture/SingleEcogesture.tsx
@@ -60,7 +60,7 @@ const SingleEcogesture: React.FC<SingleEcogestureProps> = ({
}
const [, setValidExploration] = useExploration()
const toggleMoreDetail = () => {
- setIsMoreDetail(prev => !prev)
+ setIsMoreDetail((prev) => !prev)
}
const toggleObjective = useCallback(async () => {
if (ecogesture) {
@@ -69,7 +69,7 @@ const SingleEcogesture: React.FC<SingleEcogestureProps> = ({
toUpdate
)
if (updatedEcogesture) {
- setIsObjective(prev => !prev)
+ setIsObjective((prev) => !prev)
setEcogesture(updatedEcogesture)
}
}
@@ -82,7 +82,7 @@ const SingleEcogesture: React.FC<SingleEcogestureProps> = ({
toUpdate
)
if (updatedEcogesture) {
- setIsDoing(prev => !prev)
+ setIsDoing((prev) => !prev)
setEcogesture(updatedEcogesture)
}
}
@@ -142,13 +142,13 @@ const SingleEcogesture: React.FC<SingleEcogestureProps> = ({
return ecogesture ? (
<>
<CozyBar
- titleKey={ecogesture && ecogesture.shortName}
+ titleKey={t('common.title_ecogesture')}
isNotKey={true}
displayBackArrow={true}
/>
<Header
setHeaderHeight={defineHeaderHeight}
- desktopTitleKey={ecogesture && ecogesture.shortName}
+ desktopTitleKey={t('common.title_ecogesture')}
displayBackArrow={true}
isNotKey={true}
></Header>
@@ -164,6 +164,7 @@ const SingleEcogesture: React.FC<SingleEcogestureProps> = ({
)}
</div>
<div className="details">
+ <div className="text-22 title">{ecogesture.shortName}</div>
<div className="efficiency">
<span className="text text-14-normal">
{t('ecogesture_modal.efficiency')}
@@ -172,9 +173,9 @@ const SingleEcogesture: React.FC<SingleEcogestureProps> = ({
</div>
</div>
<div className="styled-container">
- <div className="long-name">{ecogesture.longName}</div>
+ <div className="long-name text-18-bold">{ecogesture.longName}</div>
<div
- className={classNames('description text-16-normal-150', {
+ className={classNames('description text-18-normal-150', {
['block']: isMoreDetail === true,
})}
>
diff --git a/src/components/Ecogesture/__snapshots__/SingleEcogesture.spec.tsx.snap b/src/components/Ecogesture/__snapshots__/SingleEcogesture.spec.tsx.snap
index 163c4e352ae586114f1d2f8aec0842b572e4ecdf..74d690fb4bb3ebbeb961c77fe06678c21f34eb0c 100644
--- a/src/components/Ecogesture/__snapshots__/SingleEcogesture.spec.tsx.snap
+++ b/src/components/Ecogesture/__snapshots__/SingleEcogesture.spec.tsx.snap
@@ -25,14 +25,14 @@ exports[`SingleEcogesture component should be rendered correctly 1`] = `
<Component
displayBackArrow={true}
isNotKey={true}
- titleKey="Bonhomme de neige"
+ titleKey="common.title_ecogesture"
>
<div
id="CozyBar"
/>
</Component>
<Component
- desktopTitleKey="Bonhomme de neige"
+ desktopTitleKey="common.title_ecogesture"
displayBackArrow={true}
isNotKey={true}
setHeaderHeight={[Function]}
@@ -56,6 +56,11 @@ exports[`SingleEcogesture component should be rendered correctly 1`] = `
<div
className="details"
>
+ <div
+ className="text-22 title"
+ >
+ Bonhomme de neige
+ </div>
<div
className="efficiency"
>
@@ -77,12 +82,12 @@ exports[`SingleEcogesture component should be rendered correctly 1`] = `
className="styled-container"
>
<div
- className="long-name"
+ className="long-name text-18-bold"
>
Je baisse le chauffage en mode hors gel lorsque je m'absente plus de 2 jours.
</div>
<div
- className="description text-16-normal-150"
+ className="description text-18-normal-150"
>
On se demande parfois si cela vaut le coup de "couper le chauffage" quand on s’absente… dès qu’il s’agit d’un week-end la réponse est « oui sûrement » ! Attention cependant au retour à ne pas faire de la surchauffe ! L’idéal est bien évidemment de régler sa programmation pour que le chauffage se relance quelques heures avant votre retour…
</div>
diff --git a/src/components/Ecogesture/singleEcogesture.scss b/src/components/Ecogesture/singleEcogesture.scss
index 0ae3efe906985832775fb92aaeab34ff66b97a0d..0ed06b392d43b9e19454b7090a01cce62c826ae0 100644
--- a/src/components/Ecogesture/singleEcogesture.scss
+++ b/src/components/Ecogesture/singleEcogesture.scss
@@ -19,8 +19,7 @@
padding: 1rem 1.2rem;
.icon-container {
margin: auto;
- max-width: 250px;
- height: 250px;
+ max-width: 180px;
width: 100%;
display: flex;
.icon-big {
@@ -28,10 +27,15 @@
}
}
.details {
+ flex-direction: column;
+ display: flex;
+ .title {
+ color: $soft-grey;
+ }
.efficiency {
display: flex;
text-align: center;
- margin: auto;
+ margin: 0.7rem auto 0;
.text {
margin-right: 0.7rem;
}
@@ -39,15 +43,8 @@
}
.styled-container {
line-height: 150%;
- background: radial-gradient(
- 60.65% 30.62% at 50% 3.13%,
- #2a2b30 0%,
- #1b1c22 100%
- );
- border: 3px solid $blue-40;
- padding: 1.5rem 0.6rem;
- border-radius: 50px 1px 50px 1px;
- margin: 1.5rem 0 1rem;
+ padding: 1.5rem 0.6rem 0;
+ margin: 0.5rem 0;
max-width: 500px;
.long-name {
text-align: center;
@@ -65,7 +62,7 @@
.toggle-text {
text-align: center;
text-decoration: underline;
- margin-top: 1rem;
+ margin-top: 2rem;
cursor: pointer;
}
}
diff --git a/src/components/EcogestureSelection/EcogestureSelection.tsx b/src/components/EcogestureSelection/EcogestureSelection.tsx
index 4af2bd0578095060417717d47a94cc0d67bb2df6..43a2b0c6f22ae2e628fb18eeac557f28a06aaee9 100644
--- a/src/components/EcogestureSelection/EcogestureSelection.tsx
+++ b/src/components/EcogestureSelection/EcogestureSelection.tsx
@@ -63,7 +63,7 @@ const EcogestureSelection: React.FC = () => {
const updatedList: Ecogesture[] = ecogestureList
updatedList[indexEcogesture] = updatedEcogesture
setEcogestureList(updatedList)
- setIndexEcogesture(prev => prev + 1)
+ setIndexEcogesture((prev) => prev + 1)
},
[ecogestureList, ecogestureService, indexEcogesture]
)
@@ -124,17 +124,17 @@ const EcogestureSelection: React.FC = () => {
return (
<>
<CozyBar
- titleKey={getTitle()}
+ titleKey={t('common.title_ecogestures_choice')}
isNotKey={true}
displayBackArrow={indexEcogesture === 0 ? false : true}
- backFunction={() => setIndexEcogesture(prev => prev - 1)}
+ backFunction={() => setIndexEcogesture((prev) => prev - 1)}
/>
<Header
setHeaderHeight={defineHeaderHeight}
- desktopTitleKey={getTitle()}
+ desktopTitleKey={t('common.title_ecogestures_choice')}
displayBackArrow={indexEcogesture === 0 ? false : true}
isNotKey={true}
- backFunction={() => setIndexEcogesture(prev => prev - 1)}
+ backFunction={() => setIndexEcogesture((prev) => prev - 1)}
>
<div className="eg-selection-header">
{indexEcogesture <= ecogestureList.length - 1
@@ -147,6 +147,7 @@ const EcogestureSelection: React.FC = () => {
<EcogestureSelectionDetail
ecogesture={ecogestureList[indexEcogesture]}
validate={validateChoice}
+ title={getTitle()}
/>
) : totalAvailable > totalViewed + ecogestureList.length ? (
<EcogestureSelectionRestart
diff --git a/src/components/EcogestureSelection/EcogestureSelectionDetail.tsx b/src/components/EcogestureSelection/EcogestureSelectionDetail.tsx
index 5f79549fc7b92f9214766f98ab9fa43a3454a5d3..4ea75639e9caeb8c2c3a23fc3a2829491d939d29 100644
--- a/src/components/EcogestureSelection/EcogestureSelectionDetail.tsx
+++ b/src/components/EcogestureSelection/EcogestureSelectionDetail.tsx
@@ -13,11 +13,13 @@ import { importIconbyId } from 'utils/utils'
interface EcogestureSelectionDetailProps {
ecogesture: Ecogesture
validate: (objective: boolean, doing: boolean) => void
+ title: string
}
const EcogestureSelectionDetail: React.FC<EcogestureSelectionDetailProps> = ({
ecogesture,
validate,
+ title,
}: EcogestureSelectionDetailProps) => {
const { t } = useI18n()
const [ecogestureIcon, setEcogestureIcon] = useState<string>('')
@@ -44,7 +46,8 @@ const EcogestureSelectionDetail: React.FC<EcogestureSelectionDetailProps> = ({
<div className="eg-selection-detail-container">
<div className="content">
<StyledIcon className="icon" icon={ecogestureIcon} size={240} />
- <div className="text text-16-normal">{ecogesture.longName}</div>
+ <div className="text-22 title">{title}</div>
+ <div className="text text-18-bold">{ecogesture.longName}</div>
</div>
<div className="buttons">
<Button
diff --git a/src/components/EcogestureSelection/__snapshots__/EcogestureSelection.spec.tsx.snap b/src/components/EcogestureSelection/__snapshots__/EcogestureSelection.spec.tsx.snap
index ff696014729bcae1956c5c2c931737879190cad4..7bf5a2890a74340c966a3baadba5fb0b89517315 100644
--- a/src/components/EcogestureSelection/__snapshots__/EcogestureSelection.spec.tsx.snap
+++ b/src/components/EcogestureSelection/__snapshots__/EcogestureSelection.spec.tsx.snap
@@ -18,11 +18,11 @@ exports[`EcogestureSelection component should be rendered correctly 1`] = `
backFunction={[Function]}
displayBackArrow={false}
isNotKey={true}
- titleKey="Bonhomme de neige"
+ titleKey="common.title_ecogestures_choice"
/>
<mock-header
backFunction={[Function]}
- desktopTitleKey="Bonhomme de neige"
+ desktopTitleKey="common.title_ecogestures_choice"
displayBackArrow={false}
isNotKey={true}
setHeaderHeight={[Function]}
@@ -70,6 +70,7 @@ exports[`EcogestureSelection component should be rendered correctly 1`] = `
"viewedInSelection": false,
}
}
+ title="Bonhomme de neige"
validate={[Function]}
/>
</mock-content>
diff --git a/src/components/EcogestureSelection/__snapshots__/EcogestureSelectionDetail.spec.tsx.snap b/src/components/EcogestureSelection/__snapshots__/EcogestureSelectionDetail.spec.tsx.snap
index e019aee7c2e0f43f5ccaf3c56c66c85341b92c00..b75cf8e8a6fc00a05347245c6640bc9071ba725d 100644
--- a/src/components/EcogestureSelection/__snapshots__/EcogestureSelectionDetail.spec.tsx.snap
+++ b/src/components/EcogestureSelection/__snapshots__/EcogestureSelectionDetail.spec.tsx.snap
@@ -77,7 +77,10 @@ exports[`EcogestureSelectionDetail component should be rendered correctly 1`] =
</Icon>
</StyledIcon>
<div
- className="text text-16-normal"
+ className="text-22 title"
+ />
+ <div
+ className="text text-18-bold"
>
Je baisse le chauffage en mode hors gel lorsque je m'absente plus de 2 jours.
</div>
diff --git a/src/components/EcogestureSelection/ecogestureSelectionDetail.scss b/src/components/EcogestureSelection/ecogestureSelectionDetail.scss
index 51956d80474f8324f80b90625194f83d22252cfa..2ef624130480c5ac35b124dd23587eabf102dc99 100644
--- a/src/components/EcogestureSelection/ecogestureSelectionDetail.scss
+++ b/src/components/EcogestureSelection/ecogestureSelectionDetail.scss
@@ -27,6 +27,14 @@
@media #{$large-phone} {
margin: 1rem 0 0;
}
+ @media #{$phone} {
+ width: 50%;
+ height: 50%;
+ }
+ @media #{$small-phone} {
+ width: 30%;
+ height: 30%;
+ }
}
.text {
min-height: 4.875rem;
@@ -63,4 +71,8 @@
background: transparent;
}
}
+
+ .title {
+ color: $soft-grey;
+ }
}
diff --git a/src/locales/fr.json b/src/locales/fr.json
index 40093127f5c35da6708d297694d807ee30a0fc36..a310a5ef9fcb8233d721acfaabdf0bd617f2c61b 100644
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@@ -6,7 +6,9 @@
"title_exploration": "Exploration",
"title_action": "Action",
"title_duel": "Duel final",
+ "title_ecogesture": "Écogeste",
"title_ecogestures": "Écogestes",
+ "title_ecogestures_choice": "Choix des écogestes",
"title_options": "Options",
"title_analysis": "Analyse",
"title_profiletype": "Ajuster mon profil",
@@ -425,8 +427,8 @@
"title_ecogesture": "Écogeste",
"title_action": "Action",
"efficiency": "Efficacité",
- "show_less": "Je veux moins d’infos",
- "show_more": "Je veux plus d’infos",
+ "show_less": "Voir moins d’infos",
+ "show_more": "Voir plus d’infos",
"select_action": "Je choisis cette action",
"accessibility": {
"window_title_ecogesture": "Fenêtre ecogeste",