diff --git a/src/components/ContentComponents/EcogestureCard/EcogestureCard.tsx b/src/components/ContentComponents/EcogestureCard/EcogestureCard.tsx index f2a879782fdafbfbc3ec052f107d88bb9ec07b8d..f639613b2bec76aa67cf8927873848b392a648fa 100644 --- a/src/components/ContentComponents/EcogestureCard/EcogestureCard.tsx +++ b/src/components/ContentComponents/EcogestureCard/EcogestureCard.tsx @@ -56,15 +56,15 @@ const EcogestureCard: React.FC<EcogestureCardProps> = ({ ecogesture.unlocked ? 'ec-content-unlocked' : '' }`} > - {ecogesture.unlocked && ecogesture.iconName && ( - <div> + <div className="ec-content-icon"> + {ecogesture.unlocked && ecogesture.iconName && ( <Icon className="Icon" icon={getEcogestureIconSVG(ecogesture.iconName)} size={50} /> - </div> - )} + )} + </div> <div className="ec-content-short-name text-16-bold"> {ecogesture.shortName} </div> diff --git a/src/styles/components/_ecogesture.scss b/src/styles/components/_ecogesture.scss index 926ae5157a6ad575f11436a1c774a2392f19f086..b5900788c3578ae130b1d2bff715184dc220bc91 100644 --- a/src/styles/components/_ecogesture.scss +++ b/src/styles/components/_ecogesture.scss @@ -61,6 +61,9 @@ &.ec-content-challenge { padding: 0.5rem 0; } + .ec-content-icon{ + min-height: 50px; + } .ec-content-challenge-text { display: flex; flex: 1; @@ -69,7 +72,7 @@ .ec-content-short-name { display: flex; flex: 1; - align-items: flex-end; + align-items: center; text-align: center; } .ec-content-nwh {