From dd8495611aa0c1127603a61bb8ab3ae26afa6dc2 Mon Sep 17 00:00:00 2001
From: gcarron <gcarron@grandlyon.com>
Date: Tue, 2 Mar 2021 17:52:05 +0100
Subject: [PATCH] Fix css + add css modal
---
src/assets/icons/visu/action/chrono-mini.svg | 22 ++++++++
src/components/Action/ActionCard.tsx | 9 ++--
src/components/Action/ActionChoose.tsx | 12 +----
src/components/Action/ActionDone.tsx | 2 +-
src/components/Action/ActionList.tsx | 2 -
src/components/Action/ActionModal.tsx | 50 +++++++++++++------
src/components/Action/ActionOnGoing.tsx | 6 +--
src/components/Action/actionModal.scss | 21 ++++++++
src/components/Action/actionOnGoing.scss | 1 -
src/components/Ecogesture/EcogestureModal.tsx | 4 +-
.../Ecogesture/ecogestureModal.scss | 4 +-
src/locales/fr.json | 2 +
12 files changed, 96 insertions(+), 39 deletions(-)
create mode 100644 src/assets/icons/visu/action/chrono-mini.svg
create mode 100644 src/components/Action/actionModal.scss
diff --git a/src/assets/icons/visu/action/chrono-mini.svg b/src/assets/icons/visu/action/chrono-mini.svg
new file mode 100644
index 000000000..ee00c672d
--- /dev/null
+++ b/src/assets/icons/visu/action/chrono-mini.svg
@@ -0,0 +1,22 @@
+<svg width="77" height="85" viewBox="0 0 77 85" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M33.8738 2C32.5909 2 31.5509 3.03999 31.5509 4.32289C31.5509 5.60579 32.5909 6.64578 33.8738 6.64578C34.6068 6.64578 35.2011 7.24001 35.2011 7.97303V8.61444C35.2011 9.63533 34.4183 10.4803 33.4079 10.6262C17.9088 12.8632 6 26.2003 6 42.3188C6 60.0045 20.3371 74.3416 38.0227 74.3416C55.7084 74.3416 70.0455 60.0045 70.0455 42.3188C70.0455 34.1551 66.9905 26.7048 61.9615 21.0489C61.1189 20.1012 61.0229 18.6788 61.8138 17.6876C62.665 16.6208 62.4902 15.0659 61.4234 14.2147L60.8213 13.7343C59.7852 12.9077 58.2752 13.0774 57.4486 14.1134C56.6651 15.0955 55.2614 15.2981 54.1772 14.6635C50.6954 12.6252 46.7943 11.2257 42.6346 10.6257C41.6242 10.48 40.8424 9.63515 40.8424 8.61428V8.30512C40.8424 7.38869 41.5853 6.64578 42.5017 6.64578C43.7846 6.64578 44.8246 5.60579 44.8246 4.32289C44.8246 3.03999 43.7846 2 42.5017 2H33.8738Z" fill="#7B7B7B"/>
+</g>
+<circle cx="38" cy="42.0001" r="28" transform="rotate(-61.9545 38 42.0001)" fill="#121212"/>
+<path d="M50.3018 18.9079C46.715 16.9971 42.7324 15.9481 38.6696 15.8441L38 42L50.3018 18.9079Z" fill="url(#paint0_linear)"/>
+<defs>
+<filter id="filter0_d" x="0" y="0" width="76.0455" height="84.3416" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+<feOffset dy="4"/>
+<feGaussianBlur stdDeviation="3"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.55 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
+</filter>
+<linearGradient id="paint0_linear" x1="14.4851" y1="30.492" x2="60.6692" y2="55.0956" gradientUnits="userSpaceOnUse">
+<stop stop-color="#61F0F2"/>
+<stop offset="1" stop-color="#48C2C4"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/src/components/Action/ActionCard.tsx b/src/components/Action/ActionCard.tsx
index 439ab775c..3cc90b5d8 100644
--- a/src/components/Action/ActionCard.tsx
+++ b/src/components/Action/ActionCard.tsx
@@ -25,11 +25,11 @@ const ActionCard: React.FC<ActionCardProps> = ({
setOpenEcogestureModal(prev => !prev)
}, [])
- const closeModal = useCallback(() => {
+ const selectEcogesture = useCallback(() => {
setSelectedAction(action)
setShowList(false)
- setOpenEcogestureModal(false)
- }, [setSelectedAction, setShowList, action])
+ toggleModal()
+ }, [setSelectedAction, setShowList, action, toggleModal])
useEffect(() => {
importIconbyId(action.id, 'ecogesture').then(icon => {
@@ -49,7 +49,8 @@ const ActionCard: React.FC<ActionCardProps> = ({
<EcogestureModal
ecogesture={action}
isAction={true}
- handleCloseClick={closeModal}
+ handleCloseClick={toggleModal}
+ selectEcogesture={selectEcogesture}
/>
)}
</>
diff --git a/src/components/Action/ActionChoose.tsx b/src/components/Action/ActionChoose.tsx
index e72aa8e04..675f5275d 100644
--- a/src/components/Action/ActionChoose.tsx
+++ b/src/components/Action/ActionChoose.tsx
@@ -1,12 +1,5 @@
import React, { useState } from 'react'
import { Ecogesture, UserChallenge } from 'models'
-import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
-import { useEffect } from 'react'
-import { importIconbyId } from 'utils/utils'
-import './actionList.scss'
-import { Button } from '@material-ui/core'
-import EcogestureModal from 'components/Ecogesture/EcogestureModal'
-import { useCallback } from 'react'
import ActionBegin from './ActionBegin'
import ActionList from './ActionList'
interface ActionChooseProps {
@@ -17,11 +10,8 @@ const ActionChoose: React.FC<ActionChooseProps> = ({
userChallenge,
}: ActionChooseProps) => {
const [selectedAction, setSelectedAction] = useState<Ecogesture | null>(null)
- const [showList, setShowList] = useState(false)
+ const [showList, setShowList] = useState<boolean>(false)
- useEffect(() => {
- console.log('selected', selectedAction)
- }, [selectedAction])
return (
<>
{!selectedAction && !showList ? (
diff --git a/src/components/Action/ActionDone.tsx b/src/components/Action/ActionDone.tsx
index 4bebb28b3..79b5b62f2 100644
--- a/src/components/Action/ActionDone.tsx
+++ b/src/components/Action/ActionDone.tsx
@@ -25,7 +25,7 @@ const ActionDone: React.FC<ActionDoneProps> = ({
const handleEndAction = useCallback(async () => {
const challengeService = new ChallengeService(client)
- const updatedChallenge = await challengeService.updateUserChallenge(
+ const updatedChallenge: UserChallenge = await challengeService.updateUserChallenge(
currentChallenge,
UserChallengeUpdateFlag.ACTION_DONE
)
diff --git a/src/components/Action/ActionList.tsx b/src/components/Action/ActionList.tsx
index f84c3a6ce..9c3afb0d7 100644
--- a/src/components/Action/ActionList.tsx
+++ b/src/components/Action/ActionList.tsx
@@ -40,9 +40,7 @@ const ActionList: React.FC<ActionListProps> = ({
setActions(actions)
}
}
-
getActions()
-
return () => {
subscribed = false
}
diff --git a/src/components/Action/ActionModal.tsx b/src/components/Action/ActionModal.tsx
index b42112ab8..f4dad1ff0 100644
--- a/src/components/Action/ActionModal.tsx
+++ b/src/components/Action/ActionModal.tsx
@@ -1,7 +1,6 @@
import React from 'react'
import { Ecogesture, UserChallenge } from 'models'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
-import './actionList.scss'
import Modal from 'components/CommonKit/Modal/Modal'
import { Button } from '@material-ui/core'
import { useCallback } from 'react'
@@ -10,6 +9,9 @@ import { UserChallengeUpdateFlag } from 'enum/userChallenge.enum'
import { updateUserChallengeList } from 'store/challenge/challenge.actions'
import { useClient } from 'cozy-client'
import { useDispatch } from 'react-redux'
+import chronoMini from 'assets/icons/visu/action/chrono-mini.svg'
+import './actionModal.scss'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
interface ActionModalProps {
action: Ecogesture
handleCloseClick: () => void
@@ -23,10 +25,10 @@ const ActionModal: React.FC<ActionModalProps> = ({
}: ActionModalProps) => {
const dispatch = useDispatch()
const client = useClient()
-
+ const { t } = useI18n()
const launchAction = useCallback(async () => {
const challengeService = new ChallengeService(client)
- const updatedChallenge = await challengeService.updateUserChallenge(
+ const updatedChallenge: UserChallenge = await challengeService.updateUserChallenge(
userChallenge,
UserChallengeUpdateFlag.ACTION_START,
undefined,
@@ -38,18 +40,38 @@ const ActionModal: React.FC<ActionModalProps> = ({
}, [action, client, dispatch, userChallenge, handleCloseClick])
return (
- <Modal border={true} handleCloseClick={handleCloseClick}>
- <>
- <StyledIcon icon={'lauchAction'} />
- <div className="action-title text-18-bold">{action.longName}</div>
+ <Modal border={false} handleCloseClick={handleCloseClick}>
+ <div className="action-modal">
+ <StyledIcon icon={chronoMini} size={75} />
- <Button className="action-card" onClick={launchAction}>
- Je relève le défi
- </Button>
- <Button className="action-card" onClick={handleCloseClick}>
- Je me défile
- </Button>
- </>
+ <div className="action-title text-16-normal">
+ {t('action.duration', {
+ // eslint-disable-next-line @typescript-eslint/camelcase
+ smart_count: action.actionDuration,
+ })}
+ </div>
+ <div className="action-text text-16-normal">{action.longName}</div>
+ <div className="buttons">
+ <Button
+ classes={{
+ root: 'btn-secondary-negative',
+ label: 'text-16-normal',
+ }}
+ onClick={launchAction}
+ >
+ {t('action.accept')}
+ </Button>
+ <Button
+ classes={{
+ root: 'btn-secondary-negative',
+ label: 'text-16-normal',
+ }}
+ onClick={handleCloseClick}
+ >
+ {t('action.refuse')}
+ </Button>
+ </div>
+ </div>
</Modal>
)
}
diff --git a/src/components/Action/ActionOnGoing.tsx b/src/components/Action/ActionOnGoing.tsx
index ae9ee67b1..4e7e2e9c3 100644
--- a/src/components/Action/ActionOnGoing.tsx
+++ b/src/components/Action/ActionOnGoing.tsx
@@ -25,8 +25,8 @@ const ActionOnGoing: React.FC<ActionOnGoingProps> = ({
const setGradient = useCallback(() => {
if (userAction.startDate && userAction.ecogesture) {
const circle = 360
- const durationInDays = userAction.ecogesture.actionDuration
- const ratio = circle / durationInDays
+ const durationInDays: number = userAction.ecogesture.actionDuration
+ const ratio: number = circle / durationInDays
let progressionInDays = -Math.round(
userAction.startDate.diffNow('days').days
)
@@ -49,7 +49,7 @@ const ActionOnGoing: React.FC<ActionOnGoingProps> = ({
const getResultDate = useCallback(() => {
if (userAction.startDate && userAction.ecogesture) {
const startDate: DateTime = userAction.startDate
- const durationInHours = userAction.ecogesture.actionDuration * 24
+ const durationInHours: number = userAction.ecogesture.actionDuration * 24
const resultDate: string = startDate
.plus({ hours: durationInHours })
.setLocale('fr')
diff --git a/src/components/Action/actionModal.scss b/src/components/Action/actionModal.scss
new file mode 100644
index 000000000..837126721
--- /dev/null
+++ b/src/components/Action/actionModal.scss
@@ -0,0 +1,21 @@
+@import '../../styles/base/color';
+
+.action-modal {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ text-align: center;
+ color: $grey-bright;
+ padding: 1.5rem;
+ max-width: 400px;
+ .action-duration {
+ margin-top: 1rem;
+ }
+ .action-text {
+ margin: 1.6rem 0;
+ }
+ .buttons button {
+ margin-top: 0.5rem;
+ }
+}
diff --git a/src/components/Action/actionOnGoing.scss b/src/components/Action/actionOnGoing.scss
index 7d256e6dd..bda18974b 100644
--- a/src/components/Action/actionOnGoing.scss
+++ b/src/components/Action/actionOnGoing.scss
@@ -1,5 +1,4 @@
@import '../../styles/base/color';
-@import '../../styles/base/breakpoint';
.action-ongoing {
box-sizing: border-box;
diff --git a/src/components/Ecogesture/EcogestureModal.tsx b/src/components/Ecogesture/EcogestureModal.tsx
index 929f6fe80..09c5da14b 100644
--- a/src/components/Ecogesture/EcogestureModal.tsx
+++ b/src/components/Ecogesture/EcogestureModal.tsx
@@ -18,12 +18,14 @@ interface EcogestureModalProps {
ecogesture: Ecogesture
isAction: boolean
handleCloseClick: () => void
+ selectEcogesture?: () => void
}
const EcogestureModal: React.FC<EcogestureModalProps> = ({
ecogesture,
isAction,
handleCloseClick,
+ selectEcogesture,
}: EcogestureModalProps) => {
const { t } = useI18n()
const [ecogestureIcon, setEcogestureIcon] = useState('')
@@ -89,7 +91,7 @@ const EcogestureModal: React.FC<EcogestureModalProps> = ({
root: 'btn-duel-active',
label: 'text-14-normal',
}}
- onClick={handleCloseClick}
+ onClick={selectEcogesture}
>
{t('action.select_action')}
</MuiButton>
diff --git a/src/components/Ecogesture/ecogestureModal.scss b/src/components/Ecogesture/ecogestureModal.scss
index b3d288073..ffeb76ca0 100644
--- a/src/components/Ecogesture/ecogestureModal.scss
+++ b/src/components/Ecogesture/ecogestureModal.scss
@@ -28,12 +28,12 @@
background: $scrollbar-thumb;
}
.em-content {
- padding: 1.5rem 2.5rem 0;
+ padding: 1.5rem 2.5rem;
width: 100%;
@media #{$large-phone} {
width: 100%;
- padding: 1.5rem 1.5rem 0;
+ padding: 2rem;
}
.em-content-box-img {
display: flex;
diff --git a/src/locales/fr.json b/src/locales/fr.json
index 54d341af1..a0344cd54 100644
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@@ -440,6 +440,8 @@
"apply": "J'applique cette action",
"other": "Je choisis une autre action",
"hint": "Je pourrais visualiser la différence à la fin du défi.",
+ "accept": "Je relève le défi",
+ "refuse": "Je me défile",
"resultText1": "Cela n'a pas été trop difficile ?",
"resultText2": "Jetez un coup d'oeil dans la page conso dans 1 à 3 jours, le temps que vos données arrivent, pour voir l'impact de votre écogeste.",
"resultText3": "Pas de baisse de significative ? Pas de panique, en maintenant cette pratique dans le temps, les économies d'énergies et d'eau seront davantage visibles.",
--
GitLab