feat: center ecogesture icon and name

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)
 

src/components/CommonKit/SVG/EcogesturesSVG.tsx

 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) {

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>

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">

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;
     }