diff --git a/src/assets/icons/visu/challenge/star.svg b/src/assets/icons/visu/challenge/star.svg
index 704f5efab44156bab3f7d7328743ff447784260b..2e43ac2127a589e2c1751e018f2b535bf07cf23a 100644
--- a/src/assets/icons/visu/challenge/star.svg
+++ b/src/assets/icons/visu/challenge/star.svg
@@ -1,3 +1,12 @@
-<svg width="316" height="316" viewBox="0 0 316 316" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M158 0L158.708 148.547L181.549 1.76472L160.109 148.758L204.571 7.0195L161.463 149.175L226.554 15.6469L162.74 149.79L247.005 27.4543L163.911 150.588L265.467 42.1778L164.949 151.552L281.529 59.4886L165.833 152.66L294.832 79L166.541 153.887L305.078 100.276L167.059 155.206L312.039 122.842L167.374 156.587L315.558 146.193L167.48 158L315.558 169.807L167.374 159.413L312.039 193.158L167.059 160.794L305.078 215.724L166.541 162.113L294.832 237L165.833 163.34L281.529 256.511L164.949 164.448L265.467 273.822L163.911 165.412L247.005 288.546L162.74 166.21L226.554 300.353L161.463 166.825L204.571 308.98L160.109 167.242L181.549 314.235L158.708 167.453L158 316L157.292 167.453L134.451 314.235L155.891 167.242L111.429 308.98L154.537 166.825L89.4464 300.353L153.26 166.21L68.9954 288.546L152.089 165.412L50.5327 273.822L151.051 164.448L34.4706 256.511L150.167 163.34L21.168 237L149.459 162.113L10.922 215.724L148.941 160.794L3.9614 193.158L148.626 159.413L0.441803 169.807L148.52 158L0.441803 146.193L148.626 156.587L3.9614 122.842L148.941 155.206L10.922 100.276L149.459 153.887L21.168 79L150.167 152.66L34.4706 59.4886L151.051 151.552L50.5327 42.1778L152.089 150.588L68.9954 27.4543L153.26 149.79L89.4464 15.6469L154.537 149.175L111.429 7.0195L155.891 148.758L134.451 1.76472L157.292 148.547L158 0Z" fill="#7B7B7B"/>
+<svg width="362" height="364" viewBox="0 0 362 364" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g opacity="0.6" filter="url(#filter0_f)">
+<path d="M157.993 25.6841L180.324 172.544L181.547 24.001L181.741 172.549L205.09 25.8473L183.141 172.765L228.094 31.1818L184.494 173.187L250.046 39.8854L185.768 173.807L270.456 51.7636L186.936 174.609L288.868 66.551L187.971 175.576L304.87 83.9174L188.851 176.687L318.105 103.475L189.555 177.916L328.277 124.786L190.068 179.237L335.159 147.376L190.379 180.62L338.598 170.739L190.48 182.033L338.516 194.353L190.369 183.445L334.916 217.692L190.049 184.826L327.877 240.233L189.527 186.143L317.557 261.474L188.814 187.367L304.187 280.939L187.927 188.472L288.065 298.194L186.885 189.432L269.551 312.853L185.711 190.226L249.059 324.59L184.433 190.837L227.047 333.141L183.077 191.25L204.007 338.316L181.675 191.456L180.452 339.999L180.258 191.451L156.91 338.153L178.858 191.235L133.905 332.818L177.506 190.813L111.953 324.115L176.231 190.193L91.5432 312.236L175.063 189.391L73.1316 297.449L174.028 188.424L57.1296 280.083L173.148 187.313L43.8947 260.525L172.444 186.084L33.7225 239.214L171.931 184.763L26.8402 216.624L171.621 183.38L23.4015 193.261L171.52 181.967L23.4834 169.647L171.631 180.555L27.0839 146.308L171.951 179.174L34.1226 123.767L172.473 177.857L44.4423 102.526L173.186 176.633L57.8125 83.061L174.073 175.528L73.9345 65.806L175.115 174.568L92.4482 51.1465L176.288 173.774L112.94 39.4102L177.567 173.163L134.952 30.859L178.922 172.75L157.993 25.6841Z" fill="#FFD951"/>
+</g>
+<defs>
+<filter id="filter0_f" x="0.11377" y="0.741394" width="361.772" height="362.517" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="1" result="effect1_foregroundBlur"/>
+</filter>
+</defs>
</svg>
diff --git a/src/components/ContainerComponents/ViewContainer/FinishedChallengeDetailsViewContainer.tsx b/src/components/ContainerComponents/ViewContainer/FinishedChallengeDetailsViewContainer.tsx
index 35aa3c74743e6342b57805f16c381c957f21543a..cdba82c2b859e898df29174f897585a3eab0eed9 100644
--- a/src/components/ContainerComponents/ViewContainer/FinishedChallengeDetailsViewContainer.tsx
+++ b/src/components/ContainerComponents/ViewContainer/FinishedChallengeDetailsViewContainer.tsx
@@ -123,7 +123,7 @@ const FinishedChallengeDetailsViewContainer: React.FC<FinishedChallengeDetailsVi
<StyledIcon
className="cp-win-star"
icon={StarIcon}
- size={screenType === ScreenType.MOBILE ? 250 : 350}
+ size={screenType === ScreenType.MOBILE ? 350 : 480}
/>
) : null}
</div>
diff --git a/src/components/ContainerComponents/ViewContainer/OngoingChallengeDetailsViewContainer.tsx b/src/components/ContainerComponents/ViewContainer/OngoingChallengeDetailsViewContainer.tsx
index 5e389db5a397e08750b1ae4284db581acdca63e6..4532e2fc98968a1f59ff318be530c1f1a6d842e2 100644
--- a/src/components/ContainerComponents/ViewContainer/OngoingChallengeDetailsViewContainer.tsx
+++ b/src/components/ContainerComponents/ViewContainer/OngoingChallengeDetailsViewContainer.tsx
@@ -18,11 +18,9 @@ import ChallengeManager from 'services/challengeDataManagerService'
import { Client, withClient } from 'cozy-client'
import StyledStopButton from 'components/CommonKit/Button/StyledStopButton'
import { formatCompareChallengeDate } from 'utils/utils'
-// import AvailableChallengeIcon from 'assets/icons/badges/available-big.svg'
import OngoingChallengePile from 'components/ContentComponents/Challenge/OngoingChallengePile'
import OngoingChallengeViewingDate from 'components/ContentComponents/Challenge/OngoingChallengeViewingDate'
import FollowChallengeTimeline from 'components/ContentComponents/Challenge/FollowChallengeTimeline'
-import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import AvailableChallengeIcon from 'assets/png-badges/available.png'
import { ScreenType } from 'enum/screen.enum'
diff --git a/src/components/ContentComponents/ChallengeList/ChallengesList.tsx b/src/components/ContentComponents/ChallengeList/ChallengesList.tsx
index ef84ae36011d931eaa2a734e712dce8723516c30..0a7180cc816246e789496e5f9c388114cf5da156 100644
--- a/src/components/ContentComponents/ChallengeList/ChallengesList.tsx
+++ b/src/components/ContentComponents/ChallengeList/ChallengesList.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useContext, useRef } from 'react'
+import React, { useState, useEffect, useContext } from 'react'
import { withClient, Client } from 'cozy-client'
import {
ChallengeType,
diff --git a/src/components/ContentComponents/ChallengeModal/ChallengeModal.tsx b/src/components/ContentComponents/ChallengeModal/ChallengeModal.tsx
index a25644a6595f8845017bb6022163a3c1a947fa7d..5227b7d357a21dedeab7de2439bc7f0bbdfc2ecd 100644
--- a/src/components/ContentComponents/ChallengeModal/ChallengeModal.tsx
+++ b/src/components/ContentComponents/ChallengeModal/ChallengeModal.tsx
@@ -37,6 +37,11 @@ const ChallengeModal: React.FC<ChallengeModalProps> = ({
}
const showTheRightBadge = (badgeStatus: number | null) => {
+ const result =
+ challenge &&
+ formatNumberValues(
+ Math.abs(challenge.maxEnergy - challenge.currentEnergy)
+ )
const challengeId = challenge.challengeType
? challenge.challengeType.id
: ''
@@ -50,11 +55,15 @@ const ChallengeModal: React.FC<ChallengeModalProps> = ({
{' '}
{t('CHALLENGE.CONGRATULATION')}
</div>
+ <div className="cm-result text-18-bold">
+ <div>{t('CHALLENGE.RESULT_POSITIF')}</div>
+ <div className="cm-result-positif text-18-normal">{`${result} €`}</div>
+ </div>
<div className="cm-win-badge-star">
<img
className="cm-win-badge"
src={badgeIcon}
- width={screenType === ScreenType.MOBILE ? 200 : 300}
+ width={screenType === ScreenType.MOBILE ? 160 : 180}
></img>
<StyledIcon className="cm-win-star" icon={StarIcon} size={300} />
</div>
@@ -88,20 +97,18 @@ const ChallengeModal: React.FC<ChallengeModalProps> = ({
<>
<div className="cm-title defeat text-24-bold ">
{t('CHALLENGE.DEFEAT')}
+ </div>
+ <div className="cm-result text-18-bold">
+ <div>{t('CHALLENGE.DEFEAT_RESULT')}</div>
<div>
- {t('CHALLENGE.DEFEAT2')}
- <span className="cm-overspent-value">
- {formatNumberValues(
- challenge.currentEnergy - challenge.maxEnergy
- )}
- €
- </span>
+ {t('CHALLENGE.DEFEAT_RESULT2')}
+ <span className="cm-result-negatif text-18-normal">{`${result} €`}</span>
</div>
</div>
<img
className="cm-badge"
src={badgeIcon}
- width={screenType === ScreenType.MOBILE ? 180 : 200}
+ width={screenType === ScreenType.MOBILE ? 160 : 180}
></img>
<div className="cm-txt text-18-bold ">
{' '}
diff --git a/src/custom.d.ts b/src/custom.d.ts
index a97fbda7848346e1600bfe2624dddde0cf8a2004..9c3a50175ffad9a357b86574d04428527d0ee49e 100644
--- a/src/custom.d.ts
+++ b/src/custom.d.ts
@@ -1,3 +1,7 @@
+declare module '*.png' {
+ const content: string
+ export default content
+}
declare module '*.svg' {
const content: string
export default content
diff --git a/src/locales/en.json b/src/locales/en.json
index c1d503cf778c0dc9b949b06c740d581a50f5772c..dfdf54dd78ef588ddcdd1222b48ab66e6e7df5c6 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -157,8 +157,9 @@
"RESULT_POSITIF": "Vous avez économisé",
"RESULT_NEGATIF": "Vous avez dépassé de",
"RESULT_NOT_AVAILABLE": "Objectif à venir",
- "DEFEAT": "Vous avez dépassé",
- "DEFEAT2": "de ",
+ "DEFEAT": "Presque... ",
+ "DEFEAT_RESULT": "Vous avez dépassé",
+ "DEFEAT_RESULT2": "de ",
"CONSOLATION": "Vous êtes proches de votre objectif, gardez le cap avec ce badge ",
"CONSOLATION2": " en chocolat."
},
diff --git a/src/styles/components/_challenges.scss b/src/styles/components/_challenges.scss
index c2c327a4a322a73c047c533036a1c4dd5fd068bd..2abef46066d35c619f39965bfe6f92b1d1dce1db 100644
--- a/src/styles/components/_challenges.scss
+++ b/src/styles/components/_challenges.scss
@@ -198,7 +198,7 @@
flex-direction: column;
justify-content: space-around;
align-items: center;
- padding: 1.5rem 1rem 0.5rem;
+ padding: 1.5rem 1rem 1.5rem;
width: 22.125rem;
@media #{$large-phone} {
width: 90%;
@@ -230,14 +230,13 @@
}
.cm-title {
text-align: center;
- margin-bottom: 210px;
}
.cm-win-badge-star {
display: grid;
align-items: center;
justify-items: center;
position: absolute;
- top: 22px;
+ top: 65px;
.cm-win-badge {
grid-column: 1;
grid-row: 1;
@@ -248,9 +247,25 @@
grid-row: 1;
}
}
+ .cm-result {
+ color: $text-bright;
+ text-align: center;
+ margin-top: 1.5rem;
+ margin-bottom: 0.5rem;
+ margin-bottom: 165px;
+ .cm-result-positif {
+ color: $green-2;
+ }
+ .cm-result-negatif {
+ color: $red-no-data;
+ }
+ }
.cm-badge {
position: absolute;
- top: 115px;
+ top: 135px;
+ @media #{$large-phone} {
+ top: 142px;
+ }
}
.cm-button-valid {
margin-top: 1rem;
@@ -265,9 +280,6 @@
margin-top: 1.25rem;
}
}
-.cm-overspent-value {
- color: $red-primary;
-}
// FollowChallengeTimeLine
.list-of-days-duration {
@@ -404,6 +416,7 @@
display: grid;
align-items: center;
justify-items: center;
+ margin: -100px;
.cp-win-badge {
grid-column: 1;
grid-row: 1;