From fafd0ddd6788f317eaacd35757ba18e0d6432f60 Mon Sep 17 00:00:00 2001
From: Romain CREY <ext.sopra.rcrey@grandlyon.com>
Date: Fri, 29 May 2020 14:40:55 +0200
Subject: [PATCH] modal end of challenges
---
src/assets/icons/visu/challenge/star.svg | 13 +++++++--
.../FinishedChallengeDetailsViewContainer.tsx | 2 +-
.../OngoingChallengeDetailsViewContainer.tsx | 2 --
.../ChallengeList/ChallengesList.tsx | 2 +-
.../ChallengeModal/ChallengeModal.tsx | 25 ++++++++++-------
src/custom.d.ts | 4 +++
src/locales/en.json | 5 ++--
src/styles/components/_challenges.scss | 27 ++++++++++++++-----
8 files changed, 56 insertions(+), 24 deletions(-)
diff --git a/src/assets/icons/visu/challenge/star.svg b/src/assets/icons/visu/challenge/star.svg
index 704f5efab..2e43ac212 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 35aa3c747..cdba82c2b 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 5e389db5a..4532e2fc9 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 ef84ae360..0a7180cc8 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 a25644a65..5227b7d35 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 a97fbda78..9c3a50175 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 c1d503cf7..dfdf54dd7 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 c2c327a4a..2abef4606 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;
--
GitLab