From 6f91fc1955292085442ef3fe5853c2823c99440e Mon Sep 17 00:00:00 2001
From: Yoan VALLET <ext.sopra.yvallet@grandlyon.com>
Date: Wed, 27 May 2020 19:20:49 +0200
Subject: [PATCH] feat: center ecogesture icon and name
---
.../ecogesture}/accelerateur.svg | 0
.../{eco/picto => visu/ecogesture}/casque.svg | 0
.../{eco/picto => visu/ecogesture}/cymbal.svg | 0
.../picto => visu/ecogesture}/electro.svg | 0
.../picto => visu/ecogesture}/frerots.svg | 0
.../picto => visu/ecogesture}/hibernation.svg | 0
.../{eco/picto => visu/ecogesture}/poings.svg | 0
.../picto => visu/ecogesture}/vaisselle.svg | 0
.../CommonKit/Card/StyledEcogestureCard.tsx | 6 ++-
.../CommonKit/SVG/EcogesturesSVG.tsx | 16 ++++----
.../EcogestureCard/EcogestureCard.tsx | 37 +++++++++++--------
.../EcogestureModal/EcogestureModal.tsx | 22 ++++++-----
src/styles/components/_ecogesture.scss | 32 ++++++++++++----
13 files changed, 70 insertions(+), 43 deletions(-)
rename src/assets/icons/{eco/picto => visu/ecogesture}/accelerateur.svg (100%)
rename src/assets/icons/{eco/picto => visu/ecogesture}/casque.svg (100%)
rename src/assets/icons/{eco/picto => visu/ecogesture}/cymbal.svg (100%)
rename src/assets/icons/{eco/picto => visu/ecogesture}/electro.svg (100%)
rename src/assets/icons/{eco/picto => visu/ecogesture}/frerots.svg (100%)
rename src/assets/icons/{eco/picto => visu/ecogesture}/hibernation.svg (100%)
rename src/assets/icons/{eco/picto => visu/ecogesture}/poings.svg (100%)
rename src/assets/icons/{eco/picto => visu/ecogesture}/vaisselle.svg (100%)
diff --git a/src/assets/icons/eco/picto/accelerateur.svg b/src/assets/icons/visu/ecogesture/accelerateur.svg
similarity index 100%
rename from src/assets/icons/eco/picto/accelerateur.svg
rename to src/assets/icons/visu/ecogesture/accelerateur.svg
diff --git a/src/assets/icons/eco/picto/casque.svg b/src/assets/icons/visu/ecogesture/casque.svg
similarity index 100%
rename from src/assets/icons/eco/picto/casque.svg
rename to src/assets/icons/visu/ecogesture/casque.svg
diff --git a/src/assets/icons/eco/picto/cymbal.svg b/src/assets/icons/visu/ecogesture/cymbal.svg
similarity index 100%
rename from src/assets/icons/eco/picto/cymbal.svg
rename to src/assets/icons/visu/ecogesture/cymbal.svg
diff --git a/src/assets/icons/eco/picto/electro.svg b/src/assets/icons/visu/ecogesture/electro.svg
similarity index 100%
rename from src/assets/icons/eco/picto/electro.svg
rename to src/assets/icons/visu/ecogesture/electro.svg
diff --git a/src/assets/icons/eco/picto/frerots.svg b/src/assets/icons/visu/ecogesture/frerots.svg
similarity index 100%
rename from src/assets/icons/eco/picto/frerots.svg
rename to src/assets/icons/visu/ecogesture/frerots.svg
diff --git a/src/assets/icons/eco/picto/hibernation.svg b/src/assets/icons/visu/ecogesture/hibernation.svg
similarity index 100%
rename from src/assets/icons/eco/picto/hibernation.svg
rename to src/assets/icons/visu/ecogesture/hibernation.svg
diff --git a/src/assets/icons/eco/picto/poings.svg b/src/assets/icons/visu/ecogesture/poings.svg
similarity index 100%
rename from src/assets/icons/eco/picto/poings.svg
rename to src/assets/icons/visu/ecogesture/poings.svg
diff --git a/src/assets/icons/eco/picto/vaisselle.svg b/src/assets/icons/visu/ecogesture/vaisselle.svg
similarity index 100%
rename from src/assets/icons/eco/picto/vaisselle.svg
rename to src/assets/icons/visu/ecogesture/vaisselle.svg
diff --git a/src/components/CommonKit/Card/StyledEcogestureCard.tsx b/src/components/CommonKit/Card/StyledEcogestureCard.tsx
index 7adb223e6..1f893366d 100644
--- a/src/components/CommonKit/Card/StyledEcogestureCard.tsx
+++ b/src/components/CommonKit/Card/StyledEcogestureCard.tsx
@@ -20,8 +20,10 @@ const CardBase = withStyles({
const CardUnlocked = withStyles({
root: {
- color: 'var(--darkLight2)',
- background: 'var(--blue)',
+ border: '1px solid var(--blue)',
+ color: 'white',
+ height: '100%',
+ padding: 0,
},
})(CardBase)
diff --git a/src/components/CommonKit/SVG/EcogesturesSVG.tsx b/src/components/CommonKit/SVG/EcogesturesSVG.tsx
index 2ea81d2e2..7d173550b 100644
--- a/src/components/CommonKit/SVG/EcogesturesSVG.tsx
+++ b/src/components/CommonKit/SVG/EcogesturesSVG.tsx
@@ -1,12 +1,12 @@
import { EcogesturesIcon } from 'enum/ecogestureIcon.enum'
-import AccelerateurSVG from 'assets/icons/eco/picto/accelerateur.svg'
-import CasqueSVG from 'assets/icons/eco/picto/casque.svg'
-import CymbalSVG from 'assets/icons/eco/picto/cymbal.svg'
-import ElectroSVG from 'assets/icons/eco/picto/electro.svg'
-import FrerotsSVG from 'assets/icons/eco/picto/frerots.svg'
-import HibernationSVG from 'assets/icons/eco/picto/hibernation.svg'
-import PoingsSVG from 'assets/icons/eco/picto/poings.svg'
-import VaisselleSVG from 'assets/icons/eco/picto/vaisselle.svg'
+import AccelerateurSVG from 'assets/icons/visu/ecogesture/accelerateur.svg'
+import CasqueSVG from 'assets/icons/visu/ecogesture/casque.svg'
+import CymbalSVG from 'assets/icons/visu/ecogesture/cymbal.svg'
+import ElectroSVG from 'assets/icons/visu/ecogesture/electro.svg'
+import FrerotsSVG from 'assets/icons/visu/ecogesture/frerots.svg'
+import HibernationSVG from 'assets/icons/visu/ecogesture/hibernation.svg'
+import PoingsSVG from 'assets/icons/visu/ecogesture/poings.svg'
+import VaisselleSVG from 'assets/icons/visu/ecogesture/vaisselle.svg'
export const getEcogestureIconSVG = (iconName: string) => {
switch (iconName) {
diff --git a/src/components/ContentComponents/EcogestureCard/EcogestureCard.tsx b/src/components/ContentComponents/EcogestureCard/EcogestureCard.tsx
index 276f6fb62..f2a879782 100644
--- a/src/components/ContentComponents/EcogestureCard/EcogestureCard.tsx
+++ b/src/components/ContentComponents/EcogestureCard/EcogestureCard.tsx
@@ -27,18 +27,21 @@ const EcogestureCard: React.FC<EcogestureCardProps> = ({
{challengeEcogesture ? (
<div className={`cp-eg-${challengeEcogesture}`}>
<StyledEcogestureCard border={true} onClick={handleCardclick}>
- {ecogesture.iconName && (
- <div>
- <Icon
- className="Icon"
- icon={getEcogestureIconSVG(ecogesture.iconName)}
- size={64}
- />
+ <div className="ec">
+ <div className="ec-content ec-content-challenge">
+ {ecogesture.iconName && (
+ <div>
+ <Icon
+ className="Icon"
+ icon={getEcogestureIconSVG(ecogesture.iconName)}
+ size={64}
+ />
+ </div>
+ )}
+ <div className="ec-content-challenge-text">
+ {ecogesture.shortName}
+ </div>
</div>
- )}
- <div className="challenge-eg">
- {ecogesture.shortName}
- {/* {`${t('CHALLENGE.ECOGESTURE')} ${challengeEcogesture}`} */}
</div>
</StyledEcogestureCard>
</div>
@@ -48,20 +51,24 @@ const EcogestureCard: React.FC<EcogestureCardProps> = ({
onClick={handleCardclick}
>
<div className="ec">
- <div className="ec-content">
- {ecogesture.iconName && (
+ <div
+ className={`ec-content ${
+ ecogesture.unlocked ? 'ec-content-unlocked' : ''
+ }`}
+ >
+ {ecogesture.unlocked && ecogesture.iconName && (
<div>
<Icon
className="Icon"
icon={getEcogestureIconSVG(ecogesture.iconName)}
- size={64}
+ size={50}
/>
</div>
)}
<div className="ec-content-short-name text-16-bold">
{ecogesture.shortName}
</div>
- <div className={`ec-content-nwh-${ecogesture.unlocked}`}>
+ <div className="ec-content-nwh">
<span className="text-16-bold">{ecogesture.nwh}</span>
<span className="text-16-normal"> nWh</span>
</div>
diff --git a/src/components/ContentComponents/EcogestureModal/EcogestureModal.tsx b/src/components/ContentComponents/EcogestureModal/EcogestureModal.tsx
index 091623e03..40876f4c0 100644
--- a/src/components/ContentComponents/EcogestureModal/EcogestureModal.tsx
+++ b/src/components/ContentComponents/EcogestureModal/EcogestureModal.tsx
@@ -34,17 +34,19 @@ const EcogestureModal: React.FC<EcogestureModalProps> = ({
</div>
<div className="em-content-box">
<div className="em-content-box-text">
- {ecogesture.iconName !== '' && (
- <div>
- <Icon
- className="icon"
- icon={getEcogestureIconSVG(ecogesture.iconName)}
- size={100}
- />
+ <div className="em-content-box-text-header">
+ {ecogesture.iconName !== '' && (
+ <div>
+ <Icon
+ className="icon"
+ icon={getEcogestureIconSVG(ecogesture.iconName)}
+ size={100}
+ />
+ </div>
+ )}
+ <div className="em-title text-24-bold ">
+ {ecogesture.shortName}
</div>
- )}
- <div className="em-title text-24-bold ">
- {ecogesture.shortName}
</div>
<div className="em-detail">
<div className="em-detail-nwh">
diff --git a/src/styles/components/_ecogesture.scss b/src/styles/components/_ecogesture.scss
index ad7d87741..097270835 100644
--- a/src/styles/components/_ecogesture.scss
+++ b/src/styles/components/_ecogesture.scss
@@ -31,7 +31,7 @@
}
.ecogesture-list-item {
width: 48%;
- height: 7rem;
+ height: 7.45rem;
margin: 1% 1%;
}
.ecogesture-list-item > button {
@@ -47,35 +47,45 @@
}
.ec {
display: flex;
+ justify-content: center;
width: 100%;
height: 100%;
.ec-content {
display: flex;
flex-direction: column;
- align-items: flex-start;
+ align-items: center;
justify-content: flex-end;
- .ec-content-short-name {
+ &.ec-content-unlocked {
+ padding: 0.4rem 0;
+ }
+ &.ec-content-challenge {
+ padding: 0.1rem 0;
+ }
+ .ec-content-challenge-text {
display: flex;
flex: 1;
align-items: center;
- // color: var(--textWhite)
}
- .ec-content-nwh-true {
- margin-top: 0.25rem;
- color: $dark-light-2;
+ .ec-content-short-name {
+ display: flex;
+ flex: 1;
+ align-items: flex-end;
+ text-align: center;
}
- .ec-content-nwh-undefined {
+ .ec-content-nwh {
margin-top: 0.25rem;
color: $text-dark;
}
}
}
.cp-eg-1 {
+ height: 6.3rem;
width: 100%;
margin-right: 0.25rem;
text-align: center;
}
.cp-eg-2 {
+ height: 6.3rem;
width: 100%;
margin-left: 0.25rem;
text-align: center;
@@ -145,6 +155,12 @@
@media #{$large-phone} {
width: 100%;
}
+ .em-content-box-text-header {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ }
.em-description {
padding-bottom: 2.5rem;
}
--
GitLab