diff --git a/src/assets/png/badges/CHA00000003-0.png b/src/assets/png/badges/CHA00000003-0.png index bad09c3516c15277abd6b9adc44b4653ec40abb2..f71ef47156b5c0a10f247dd9a0dcc08dfe5b515e 100644 Binary files a/src/assets/png/badges/CHA00000003-0.png and b/src/assets/png/badges/CHA00000003-0.png differ diff --git a/src/assets/png/badges/CHA00000003-1.png b/src/assets/png/badges/CHA00000003-1.png index e16bba433ca3ece0ba70d5f0435443e57bcba00b..043748e2ba4c3f9ff731d28f8bfe542c0fb6cbdb 100644 Binary files a/src/assets/png/badges/CHA00000003-1.png and b/src/assets/png/badges/CHA00000003-1.png differ diff --git a/src/components/ContainerComponents/ViewContainer/OngoingChallengeDetailsViewContainer.tsx b/src/components/ContainerComponents/ViewContainer/OngoingChallengeDetailsViewContainer.tsx index a1e1417e3012ff763bc55b35a01fbc90e57544f9..f92d439bbadad1d3d9311c573fd2fb845a3d3ef3 100644 --- a/src/components/ContainerComponents/ViewContainer/OngoingChallengeDetailsViewContainer.tsx +++ b/src/components/ContainerComponents/ViewContainer/OngoingChallengeDetailsViewContainer.tsx @@ -152,11 +152,14 @@ const OngoingChallengeDetailsViewContainer: React.FC<OngoingChallengeDetailsView </div> </div> </div> - <EcogestureModal - opened={openEcogestureModal} - ecogesture={challenge.selectedEcogestures[challengeEcogesture]} - handleCloseClick={handleCloseClick} - /> + {openEcogestureModal && ( + <EcogestureModal + opened={openEcogestureModal} + ecogesture={challenge.selectedEcogestures[challengeEcogesture]} + handleCloseClick={handleCloseClick} + unlockedEcogesture={true} + /> + )} </> )} </Content> diff --git a/src/components/ContentComponents/Challenge/OngoingChallengePile.tsx b/src/components/ContentComponents/Challenge/OngoingChallengePile.tsx index 50fec394180785ce3834b7ace49835f901737366..5cf63f5b57ce901e1d2166a20fcc51fc5719f117 100644 --- a/src/components/ContentComponents/Challenge/OngoingChallengePile.tsx +++ b/src/components/ContentComponents/Challenge/OngoingChallengePile.tsx @@ -39,7 +39,7 @@ const OngoingChallengePile: React.FC<OngoingChallengePileProps> = ({ return ( <React.Fragment> - <div className="pile-energy-follow"> + <div className={`pile-energy-follow ${small ? '--home' : null}`}> <div className="pile-section"> <div className="filter-pile" diff --git a/src/components/ContentComponents/ChallengeModal/ChallengeModal.tsx b/src/components/ContentComponents/ChallengeModal/ChallengeModal.tsx index b1456acf4026379b6d6a5219d18a65ece2cdee6d..a428aa8ab05a9fbfd502f0f1e49f9aaabee45c87 100644 --- a/src/components/ContentComponents/ChallengeModal/ChallengeModal.tsx +++ b/src/components/ContentComponents/ChallengeModal/ChallengeModal.tsx @@ -3,7 +3,7 @@ import { translate } from 'cozy-ui/react/I18n' import { UserChallenge } from 'services/dataChallengeContracts' import Modal from 'components/CommonKit/Modal/Modal' import StyledSpinner from 'components/CommonKit/Spinner/StyledSpinner' -import StarIcon from 'assets/png/challenge/star.png' +import StarIcon from 'assets/icons/visu/challenge/star.svg' import StyledButtonValid from 'components/CommonKit/Button/StyledButtonValid' import StyledIcon from 'components/CommonKit/Icon/StyledIcon' import { formatNumberValues } from 'utils/utils' @@ -80,11 +80,11 @@ const ChallengeModal: React.FC<ChallengeModalProps> = ({ src={badgeIcon} width={screenType === ScreenType.MOBILE ? 160 : 180} ></img> - <img + <StyledIcon className="cm-win-star" - src={StarIcon} - width={screenType === ScreenType.MOBILE ? 300 : 400} - ></img> + icon={StarIcon} + size={ScreenType.MOBILE ? 260 : 320} + /> </div> <div className="cm-txt"> {' '} diff --git a/src/components/ContentComponents/EcogestureModal/EcogestureModal.tsx b/src/components/ContentComponents/EcogestureModal/EcogestureModal.tsx index 4ade458920055b4268bee1ad6d67ccfa69d6b01e..635e1591259a1bee46c838e8952c4e887d34223a 100644 --- a/src/components/ContentComponents/EcogestureModal/EcogestureModal.tsx +++ b/src/components/ContentComponents/EcogestureModal/EcogestureModal.tsx @@ -10,6 +10,7 @@ import def from 'assets/icons/visu/ecogesture/default.svg' interface EcogestureModalProps { opened: boolean ecogesture: EcogestureType + unlockedEcogesture: boolean t: Function handleCloseClick: () => void handleStartClick: () => void @@ -18,6 +19,7 @@ interface EcogestureModalProps { const EcogestureModal: React.FC<EcogestureModalProps> = ({ opened, ecogesture, + unlockedEcogesture, t, handleCloseClick, }: EcogestureModalProps) => { @@ -47,7 +49,7 @@ const EcogestureModal: React.FC<EcogestureModalProps> = ({ {ecogesture && ( <Modal open={opened} - border={ecogesture.unlocked} + border={ecogesture.unlocked || unlockedEcogesture} handleCloseClick={handleCloseClick} > <div className="em-header text-14-normal-uppercase"> @@ -56,7 +58,7 @@ const EcogestureModal: React.FC<EcogestureModalProps> = ({ <div className="em-content-box"> <div className="em-content-box-text"> <div className="em-content-box-text-header"> - {ecogesture.unlocked && ecogestureIcon && ( + {(ecogesture.unlocked || unlockedEcogesture) && ecogestureIcon && ( <div> <Icon className="icon" icon={ecogestureIcon} size={100} /> </div> diff --git a/src/styles/components/_challenges.scss b/src/styles/components/_challenges.scss index e72710f8ffc0dcb3f0a0d028e2a4bf83efecb1ac..8014aeb72d297ee87c413faeaafdd089e3faa03b 100644 --- a/src/styles/components/_challenges.scss +++ b/src/styles/components/_challenges.scss @@ -242,9 +242,9 @@ } &.--ecolyo-royal { @extend .cp-content; - top: -38px; + top: 0px; @media #{$large-phone} { - top: 12px; + top: 5px; } } .cm-win-badge { @@ -364,6 +364,10 @@ align-items: center; justify-content: center; width: 100%; + &.--home { + @extend .pile-energy-follow; + justify-content: start; + } .pile-section { display: grid; .filter-pile {