From d66237bc7c0281b953497615c4e0b36bad08f543 Mon Sep 17 00:00:00 2001
From: Bastien DUMONT <bdumont@grandlyon.com>
Date: Wed, 28 Sep 2022 08:31:24 +0000
Subject: [PATCH] style: global-design-checkup
---
src/assets/icons/ico/export.svg | 10 +--
src/assets/icons/ico/feedback.svg | 4 ++
src/assets/icons/ico/feedbacks.svg | 13 ----
src/assets/icons/ico/hammer-left.svg | 3 -
src/assets/icons/ico/hammer-right.svg | 3 -
src/assets/icons/ico/profile.svg | 2 +-
src/assets/icons/ico/questionMark.svg | 5 +-
src/components/Action/ActionBegin.tsx | 3 +-
src/components/Action/ActionCard.tsx | 3 +-
src/components/Action/actionBegin.scss | 6 +-
src/components/Action/actionDone.scss | 12 ++--
src/components/Action/actionList.scss | 4 +-
src/components/Analysis/MonthlyAnalysis.tsx | 11 ++--
.../Analysis/analysisConsumption.scss | 1 +
src/components/Analysis/monthlyanalysis.scss | 2 +-
.../Challenge/ChallengeCardDone.spec.tsx | 9 +--
.../Challenge/ChallengeCardDone.tsx | 8 ++-
.../Challenge/ChallengeCardLocked.tsx | 5 +-
.../Challenge/ChallengeCardOnGoing.tsx | 7 +-
.../Challenge/ChallengeCardUnlocked.spec.tsx | 6 +-
.../Challenge/ChallengeCardUnlocked.tsx | 6 +-
.../ChallengeCardDone.spec.tsx.snap | 2 +-
.../ChallengeCardLocked.spec.tsx.snap | 3 +-
src/components/Challenge/challengeCard.scss | 5 +-
.../Challenge/challengeCardDone.scss | 1 +
.../Challenge/challengeCardLocked.scss | 1 +
.../Challenge/challengeCardOnGoing.scss | 13 ++--
.../Challenge/challengeCardUnlocked.scss | 10 +--
src/components/Challenge/challengeView.scss | 5 +-
src/components/Duel/DuelUnlocked.tsx | 2 +-
src/components/Duel/duelUnlocked.scss | 5 +-
src/components/Ecogesture/EcogestureView.tsx | 31 ++++-----
.../EcogestureView.spec.tsx.snap | 66 +++++++++----------
src/components/Ecogesture/ecogestureList.scss | 2 +-
.../Ecogesture/ecogestureModal.scss | 6 +-
src/components/Ecogesture/ecogestureView.scss | 14 ++++
.../Ecogesture/singleEcogesture.scss | 1 +
.../ecogestureSelectionDetail.scss | 2 +
.../Exploration/explorationFinished.scss | 2 +-
.../Exploration/explorationOngoing.scss | 14 ++--
src/components/FAQ/FAQLink.tsx | 2 +-
src/components/FormGlobal/FormProgress.tsx | 2 +-
src/components/GCU/GCULink.tsx | 2 +-
.../GCU/__snapshots__/GCULink.spec.tsx.snap | 2 +-
src/components/Header/CozyBar.tsx | 5 +-
src/components/Header/Header.tsx | 10 ++-
src/components/Header/header.scss | 6 +-
.../LegalNotice/LegalNoticeLink.tsx | 2 +-
.../LegalNoticeLink.spec.tsx.snap | 2 +-
src/components/Options/ProfileTypeOptions.tsx | 2 +-
src/components/Options/exportOptions.scss | 2 +-
.../ProfileType/profileTypeFinished.scss | 6 +-
.../ProfileType/profileTypeForm.scss | 4 +-
src/components/Quiz/quizBegin.scss | 12 ++--
src/components/Quiz/quizExplanationModal.scss | 5 +-
src/components/Quiz/quizFinish.scss | 6 +-
src/components/Quiz/quizQuestion.scss | 7 +-
src/db/challengeEntity.json | 15 +++--
src/db/duelEntity.json | 10 +--
src/locales/fr.json | 22 +++----
src/models/challenge.model.ts | 1 +
src/styles/base/_color.scss | 5 +-
src/styles/components/_buttons.scss | 5 +-
src/styles/components/_card.scss | 2 +-
src/utils/utils.spec.ts | 18 ++++-
src/utils/utils.ts | 14 ++++
66 files changed, 268 insertions(+), 209 deletions(-)
create mode 100644 src/assets/icons/ico/feedback.svg
delete mode 100644 src/assets/icons/ico/feedbacks.svg
delete mode 100644 src/assets/icons/ico/hammer-left.svg
delete mode 100644 src/assets/icons/ico/hammer-right.svg
diff --git a/src/assets/icons/ico/export.svg b/src/assets/icons/ico/export.svg
index 596e78e0a..36d80fec5 100644
--- a/src/assets/icons/ico/export.svg
+++ b/src/assets/icons/ico/export.svg
@@ -1,6 +1,6 @@
-<svg width="40" height="38" viewBox="0 0 40 38" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M38.3692 18.5C38.3692 28.424 30.0181 36.5 19.6776 36.5C9.33703 36.5 0.985977 28.424 0.985977 18.5C0.985977 8.57601 9.33703 0.5 19.6776 0.5C30.0181 0.5 38.3692 8.57601 38.3692 18.5Z" stroke="white"/>
-<path d="M17.6589 26L17.6589 27.5L20.6589 27.5L20.6589 26L17.6589 26ZM20.6589 10C20.6589 9.17157 19.9873 8.5 19.1589 8.5C18.3304 8.5 17.6589 9.17157 17.6589 10L20.6589 10ZM20.6589 26L20.6589 10L17.6589 10L17.6589 26L20.6589 26Z" fill="white"/>
-<path d="M11.4346 26L11.4346 27.5L14.4346 27.5L14.4346 26L11.4346 26ZM14.4346 18C14.4346 17.1716 13.763 16.5 12.9346 16.5C12.1061 16.5 11.4346 17.1716 11.4346 18L14.4346 18ZM14.4346 26L14.4346 18L11.4346 18L11.4346 26L14.4346 26Z" fill="white"/>
-<path d="M23.8832 26L23.8832 27.5L26.8832 27.5L26.8832 26L23.8832 26ZM26.8832 14C26.8832 13.1716 26.2116 12.5 25.3832 12.5C24.5548 12.5 23.8832 13.1716 23.8832 14L26.8832 14ZM26.8832 26L26.8832 14L23.8832 14L23.8832 26L26.8832 26Z" fill="white"/>
+<svg width="38" height="38" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="18.5" cy="18.5" r="18" stroke="white"/>
+<path d="M16.5 26L16.5 27.5L19.5 27.5L19.5 26L16.5 26ZM19.5 10C19.5 9.17157 18.8284 8.5 18 8.5C17.1716 8.5 16.5 9.17157 16.5 10L19.5 10ZM19.5 26L19.5 10L16.5 10L16.5 26L19.5 26Z" fill="white"/>
+<path d="M10.5 26L10.5 27.5L13.5 27.5L13.5 26L10.5 26ZM13.5 18C13.5 17.1716 12.8284 16.5 12 16.5C11.1716 16.5 10.5 17.1716 10.5 18L13.5 18ZM13.5 26L13.5 18L10.5 18L10.5 26L13.5 26Z" fill="white"/>
+<path d="M22.5 26L22.5 27.5L25.5 27.5L25.5 26L22.5 26ZM25.5 14C25.5 13.1716 24.8284 12.5 24 12.5C23.1716 12.5 22.5 13.1716 22.5 14L25.5 14ZM25.5 26L25.5 14L22.5 14L22.5 26L25.5 26Z" fill="white"/>
</svg>
diff --git a/src/assets/icons/ico/feedback.svg b/src/assets/icons/ico/feedback.svg
new file mode 100644
index 000000000..0f29f2d77
--- /dev/null
+++ b/src/assets/icons/ico/feedback.svg
@@ -0,0 +1,4 @@
+<svg width="38" height="38" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="18.5" cy="18.5" r="18" stroke="white"/>
+<path d="M14.4691 13.1925C14.7071 12.9825 14.9661 12.783 15.2461 12.594C15.5331 12.405 15.8411 12.2405 16.1701 12.1005C16.4991 11.9605 16.8561 11.852 17.2411 11.775C17.6261 11.691 18.0426 11.649 18.4906 11.649C19.0996 11.649 19.6526 11.733 20.1496 11.901C20.6536 12.069 21.0841 12.3105 21.4411 12.6255C21.7981 12.9335 22.0746 13.308 22.2706 13.749C22.4666 14.19 22.5646 14.6835 22.5646 15.2295C22.5646 15.7615 22.4876 16.2235 22.3336 16.6155C22.1796 17.0005 21.9836 17.3365 21.7456 17.6235C21.5146 17.9105 21.2626 18.159 20.9896 18.369C20.7166 18.579 20.4576 18.7785 20.2126 18.9675C19.9676 19.1495 19.7541 19.3315 19.5721 19.5135C19.3971 19.6885 19.2921 19.888 19.2571 20.112L19.0156 21.645H17.2411L17.0626 19.9335C17.0556 19.8985 17.0521 19.8705 17.0521 19.8495C17.0521 19.8215 17.0521 19.79 17.0521 19.755C17.0521 19.447 17.1291 19.181 17.2831 18.957C17.4371 18.726 17.6296 18.5125 17.8606 18.3165C18.0916 18.1135 18.3401 17.9175 18.6061 17.7285C18.8721 17.5395 19.1206 17.3365 19.3516 17.1195C19.5826 16.8955 19.7751 16.6435 19.9291 16.3635C20.0831 16.0835 20.1601 15.7545 20.1601 15.3765C20.1601 15.1245 20.1111 14.9005 20.0131 14.7045C19.9221 14.5015 19.7926 14.33 19.6246 14.19C19.4566 14.043 19.2536 13.931 19.0156 13.854C18.7846 13.777 18.5326 13.7385 18.2596 13.7385C17.8606 13.7385 17.5211 13.784 17.2411 13.875C16.9681 13.959 16.7336 14.057 16.5376 14.169C16.3486 14.274 16.1876 14.372 16.0546 14.463C15.9216 14.547 15.8026 14.589 15.6976 14.589C15.4456 14.589 15.2636 14.484 15.1516 14.274L14.4691 13.1925ZM16.4536 25.572C16.4536 25.355 16.4921 25.1485 16.5691 24.9525C16.6531 24.7565 16.7651 24.5885 16.9051 24.4485C17.0521 24.3085 17.2236 24.1965 17.4196 24.1125C17.6156 24.0285 17.8256 23.9865 18.0496 23.9865C18.2666 23.9865 18.4731 24.0285 18.6691 24.1125C18.8651 24.1965 19.0331 24.3085 19.1731 24.4485C19.3131 24.5885 19.4251 24.7565 19.5091 24.9525C19.5931 25.1485 19.6351 25.355 19.6351 25.572C19.6351 25.796 19.5931 26.006 19.5091 26.202C19.4251 26.391 19.3131 26.5555 19.1731 26.6955C19.0331 26.8355 18.8651 26.944 18.6691 27.021C18.4731 27.105 18.2666 27.147 18.0496 27.147C17.8256 27.147 17.6156 27.105 17.4196 27.021C17.2236 26.944 17.0521 26.8355 16.9051 26.6955C16.7651 26.5555 16.6531 26.391 16.5691 26.202C16.4921 26.006 16.4536 25.796 16.4536 25.572Z" fill="white"/>
+</svg>
diff --git a/src/assets/icons/ico/feedbacks.svg b/src/assets/icons/ico/feedbacks.svg
deleted file mode 100644
index 0fb3cc501..000000000
--- a/src/assets/icons/ico/feedbacks.svg
+++ /dev/null
@@ -1,13 +0,0 @@
-<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="40" height="40" rx="4" fill="#E3B82A"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M14.2754 27.6534C13.6706 29.3898 12.4366 31.3312 10.125 33C14.2496 33 17.4731 30.9987 19.6699 28.8121C19.9581 28.8262 20.2488 28.8333 20.5416 28.8333C28.0205 28.8333 34.0833 24.1696 34.0833 18.4167C34.0833 12.6637 28.0205 8 20.5416 8C13.0628 8 6.99998 12.6637 6.99998 18.4167C6.99998 22.4304 9.95113 25.914 14.2754 27.6534Z" fill="url(#paint0_radial)"/>
-<rect x="27.509" y="17.4715" width="2.78115" height="2.78115" transform="rotate(90 27.509 17.4715)" fill="#E3B82A"/>
-<rect x="21.9468" y="17.4715" width="2.78115" height="2.78115" transform="rotate(90 21.9468 17.4715)" fill="#E3B82A"/>
-<rect x="16.3845" y="17.4715" width="2.78115" height="2.78115" transform="rotate(90 16.3845 17.4715)" fill="#E3B82A"/>
-<defs>
-<radialGradient id="paint0_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(20.5416 32.2187) rotate(-90) scale(7.65625 16.4253)">
-<stop stop-color="#2A2B30"/>
-<stop offset="1" stop-color="#1B1C22"/>
-</radialGradient>
-</defs>
-</svg>
diff --git a/src/assets/icons/ico/hammer-left.svg b/src/assets/icons/ico/hammer-left.svg
deleted file mode 100644
index 51f73a92e..000000000
--- a/src/assets/icons/ico/hammer-left.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="19" height="16" viewBox="0 0 19 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M17.8438 6.0625C18.0938 6.29167 18.0938 6.53125 17.8438 6.78125L15.0312 9.59375C14.8021 9.82292 14.5625 9.82292 14.3125 9.59375L13.625 8.875C13.375 8.64583 13.375 8.41667 13.625 8.1875L13.9688 7.8125L13.0625 6.9375C12.3125 7.125 11.6667 6.94792 11.125 6.40625L9.59375 4.875C9.19792 4.47917 9 4.01042 9 3.46875V2.875L6.1875 1.46875C7.16667 0.489583 8.34375 0 9.71875 0C11.0938 0 12.2708 0.489583 13.25 1.46875L14.6562 2.875C15.1979 3.41667 15.375 4.0625 15.1875 4.8125L16.0938 5.71875L16.4375 5.34375C16.6667 5.11458 16.9062 5.11458 17.1562 5.34375L17.8438 6.0625ZM8.90625 5.59375L10.4375 7.125C10.5208 7.20833 10.6354 7.30208 10.7812 7.40625L3.34375 15.375C2.96875 15.7917 2.51042 16 1.96875 16C1.42708 16 0.958333 15.8021 0.5625 15.4062C0.1875 15.0312 0 14.5729 0 14.0312C0 13.4896 0.208333 13.0312 0.625 12.6562L8.59375 5.21875C8.69792 5.36458 8.80208 5.48958 8.90625 5.59375Z" fill="#E2A70D"/>
-</svg>
diff --git a/src/assets/icons/ico/hammer-right.svg b/src/assets/icons/ico/hammer-right.svg
deleted file mode 100644
index 27ba34f5c..000000000
--- a/src/assets/icons/ico/hammer-right.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="19" height="16" viewBox="0 0 19 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M0.1875 6.0625C-0.0625 6.29167 -0.0625 6.53125 0.1875 6.78125L3 9.59375C3.22917 9.82292 3.46875 9.82292 3.71875 9.59375L4.40625 8.875C4.65625 8.64583 4.65625 8.41667 4.40625 8.1875L4.0625 7.8125L4.96875 6.9375C5.71875 7.125 6.36458 6.94792 6.90625 6.40625L8.4375 4.875C8.83333 4.47917 9.03125 4.01042 9.03125 3.46875V2.875L11.8438 1.46875C10.8646 0.489583 9.6875 0 8.3125 0C6.9375 0 5.76042 0.489583 4.78125 1.46875L3.375 2.875C2.83333 3.41667 2.65625 4.0625 2.84375 4.8125L1.9375 5.71875L1.59375 5.34375C1.36458 5.11458 1.125 5.11458 0.875 5.34375L0.1875 6.0625ZM9.125 5.59375L7.59375 7.125C7.51042 7.20833 7.39583 7.30208 7.25 7.40625L14.6875 15.375C15.0625 15.7917 15.5208 16 16.0625 16C16.6042 16 17.0729 15.8021 17.4688 15.4062C17.8438 15.0312 18.0312 14.5729 18.0312 14.0312C18.0312 13.4896 17.8229 13.0312 17.4062 12.6562L9.4375 5.21875C9.33333 5.36458 9.22917 5.48958 9.125 5.59375Z" fill="#E2A70D"/>
-</svg>
diff --git a/src/assets/icons/ico/profile.svg b/src/assets/icons/ico/profile.svg
index aff18fe54..a61d6c577 100644
--- a/src/assets/icons/ico/profile.svg
+++ b/src/assets/icons/ico/profile.svg
@@ -1,4 +1,4 @@
-<svg width="42" height="42" viewBox="0 0 42 42" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="38" height="38" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="18.5" cy="18.5" r="18" stroke="white"/>
<circle cx="18.5" cy="13.5" r="5.5" fill="white"/>
<path d="M8 26C8 22.4735 9.60771 19.4852 13 19C14.3163 20.1296 16.5 21 18.5 21C22 21 22.5 20 24 19C27.3923 19.4852 29 22.4735 29 26V27C29 27 25 28 18.5 28C12 28 8 27 8 27V26Z" fill="white"/>
diff --git a/src/assets/icons/ico/questionMark.svg b/src/assets/icons/ico/questionMark.svg
index b633290c9..0f29f2d77 100644
--- a/src/assets/icons/ico/questionMark.svg
+++ b/src/assets/icons/ico/questionMark.svg
@@ -1,3 +1,4 @@
-<svg width="21" height="41" viewBox="0 0 21 41" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M0 4.09723C0.637168 3.5251 1.31859 2.98987 2.04425 2.49156C2.78761 1.99325 3.58407 1.55953 4.43362 1.19041C5.30088 0.821293 6.23008 0.535225 7.22124 0.33221C8.23008 0.110737 9.30974 0 10.4602 0C12.0531 0 13.4956 0.230701 14.7876 0.692102C16.0797 1.13505 17.1858 1.781 18.1062 2.62998C19.0266 3.4605 19.7345 4.46635 20.2301 5.64754C20.7434 6.82872 21 8.14833 21 9.60635C21 11.009 20.8053 12.2271 20.4159 13.2606C20.0443 14.2757 19.5664 15.1616 18.9823 15.9183C18.4159 16.675 17.7876 17.3302 17.0973 17.8839C16.4071 18.4375 15.7522 18.9543 15.1327 19.4342C14.5133 19.914 13.9734 20.3939 13.5133 20.8737C13.0708 21.3351 12.7965 21.8519 12.6903 22.424L12.0266 26.3829H7.00885L6.50442 21.898C6.38053 21.0122 6.48673 20.2462 6.82301 19.6003C7.15929 18.9359 7.61062 18.336 8.17699 17.8008C8.74337 17.2471 9.37169 16.7211 10.062 16.2228C10.7699 15.7061 11.4248 15.1616 12.0266 14.5895C12.646 13.9989 13.1593 13.3437 13.5664 12.6239C13.9912 11.8857 14.2035 11.0182 14.2035 10.0216C14.2035 8.80351 13.7965 7.83457 12.9823 7.11479C12.1858 6.395 11.1239 6.03511 9.79646 6.03511C8.82301 6.03511 8 6.14585 7.32744 6.36732C6.67257 6.58879 6.10619 6.83795 5.62832 7.11479C5.15044 7.37317 4.74336 7.6131 4.40708 7.83457C4.07079 8.05604 3.75222 8.16678 3.45133 8.16678C2.77876 8.16678 2.27434 7.86226 1.93805 7.25321L0 4.09723ZM4.96461 36.5982C4.96461 35.9892 5.07079 35.4171 5.28318 34.8818C5.51327 34.3282 5.82302 33.8575 6.2124 33.47C6.60178 33.0639 7.05309 32.7502 7.56637 32.5287C8.09734 32.2888 8.67256 32.1688 9.29203 32.1688C9.8938 32.1688 10.4602 32.2888 10.9912 32.5287C11.5221 32.7502 11.9823 33.0639 12.3717 33.47C12.7611 33.8575 13.0619 34.3282 13.2743 34.8818C13.5044 35.4171 13.6195 35.9892 13.6195 36.5982C13.6195 37.2257 13.5044 37.8071 13.2743 38.3423C13.0619 38.8776 12.7611 39.3482 12.3717 39.7542C11.9823 40.1418 11.5221 40.4463 10.9912 40.6678C10.4602 40.8893 9.8938 41 9.29203 41C8.67256 41 8.09734 40.8893 7.56637 40.6678C7.05309 40.4463 6.60178 40.1418 6.2124 39.7542C5.82302 39.3482 5.51327 38.8776 5.28318 38.3423C5.07079 37.8071 4.96461 37.2257 4.96461 36.5982Z" fill="#E3B82A"/>
+<svg width="38" height="38" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="18.5" cy="18.5" r="18" stroke="white"/>
+<path d="M14.4691 13.1925C14.7071 12.9825 14.9661 12.783 15.2461 12.594C15.5331 12.405 15.8411 12.2405 16.1701 12.1005C16.4991 11.9605 16.8561 11.852 17.2411 11.775C17.6261 11.691 18.0426 11.649 18.4906 11.649C19.0996 11.649 19.6526 11.733 20.1496 11.901C20.6536 12.069 21.0841 12.3105 21.4411 12.6255C21.7981 12.9335 22.0746 13.308 22.2706 13.749C22.4666 14.19 22.5646 14.6835 22.5646 15.2295C22.5646 15.7615 22.4876 16.2235 22.3336 16.6155C22.1796 17.0005 21.9836 17.3365 21.7456 17.6235C21.5146 17.9105 21.2626 18.159 20.9896 18.369C20.7166 18.579 20.4576 18.7785 20.2126 18.9675C19.9676 19.1495 19.7541 19.3315 19.5721 19.5135C19.3971 19.6885 19.2921 19.888 19.2571 20.112L19.0156 21.645H17.2411L17.0626 19.9335C17.0556 19.8985 17.0521 19.8705 17.0521 19.8495C17.0521 19.8215 17.0521 19.79 17.0521 19.755C17.0521 19.447 17.1291 19.181 17.2831 18.957C17.4371 18.726 17.6296 18.5125 17.8606 18.3165C18.0916 18.1135 18.3401 17.9175 18.6061 17.7285C18.8721 17.5395 19.1206 17.3365 19.3516 17.1195C19.5826 16.8955 19.7751 16.6435 19.9291 16.3635C20.0831 16.0835 20.1601 15.7545 20.1601 15.3765C20.1601 15.1245 20.1111 14.9005 20.0131 14.7045C19.9221 14.5015 19.7926 14.33 19.6246 14.19C19.4566 14.043 19.2536 13.931 19.0156 13.854C18.7846 13.777 18.5326 13.7385 18.2596 13.7385C17.8606 13.7385 17.5211 13.784 17.2411 13.875C16.9681 13.959 16.7336 14.057 16.5376 14.169C16.3486 14.274 16.1876 14.372 16.0546 14.463C15.9216 14.547 15.8026 14.589 15.6976 14.589C15.4456 14.589 15.2636 14.484 15.1516 14.274L14.4691 13.1925ZM16.4536 25.572C16.4536 25.355 16.4921 25.1485 16.5691 24.9525C16.6531 24.7565 16.7651 24.5885 16.9051 24.4485C17.0521 24.3085 17.2236 24.1965 17.4196 24.1125C17.6156 24.0285 17.8256 23.9865 18.0496 23.9865C18.2666 23.9865 18.4731 24.0285 18.6691 24.1125C18.8651 24.1965 19.0331 24.3085 19.1731 24.4485C19.3131 24.5885 19.4251 24.7565 19.5091 24.9525C19.5931 25.1485 19.6351 25.355 19.6351 25.572C19.6351 25.796 19.5931 26.006 19.5091 26.202C19.4251 26.391 19.3131 26.5555 19.1731 26.6955C19.0331 26.8355 18.8651 26.944 18.6691 27.021C18.4731 27.105 18.2666 27.147 18.0496 27.147C17.8256 27.147 17.6156 27.105 17.4196 27.021C17.2236 26.944 17.0521 26.8355 16.9051 26.6955C16.7651 26.5555 16.6531 26.391 16.5691 26.202C16.4921 26.006 16.4536 25.796 16.4536 25.572Z" fill="white"/>
</svg>
diff --git a/src/components/Action/ActionBegin.tsx b/src/components/Action/ActionBegin.tsx
index ee9176d30..ca25da039 100644
--- a/src/components/Action/ActionBegin.tsx
+++ b/src/components/Action/ActionBegin.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from 'react'
+import React, { useCallback, useState, useEffect } from 'react'
import { Client, useClient } from 'cozy-client'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import { useSelector } from 'react-redux'
@@ -9,7 +9,6 @@ import ActionModal from 'components/Action/ActionModal'
import './actionBegin.scss'
import { AppStore } from 'store'
import ActionService from 'services/action.service'
-import { useEffect } from 'react'
import { importIconbyId } from 'utils/utils'
import { Button } from '@material-ui/core'
import defaultIcon from 'assets/icons/visu/ecogesture/default.svg'
diff --git a/src/components/Action/ActionCard.tsx b/src/components/Action/ActionCard.tsx
index 05abf2dc2..6dcfbfac6 100644
--- a/src/components/Action/ActionCard.tsx
+++ b/src/components/Action/ActionCard.tsx
@@ -1,7 +1,6 @@
-import React, { useState, useCallback } from 'react'
+import React, { useState, useCallback, useEffect } from 'react'
import { Ecogesture } 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'
diff --git a/src/components/Action/actionBegin.scss b/src/components/Action/actionBegin.scss
index 8385a1830..7548ee19c 100644
--- a/src/components/Action/actionBegin.scss
+++ b/src/components/Action/actionBegin.scss
@@ -13,12 +13,12 @@
align-items: center;
justify-content: space-around;
box-sizing: border-box;
- margin: 5rem 1rem 0 1rem;
+ margin: 8rem 1.5rem auto;
box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.55);
border-radius: 4px;
transition: all 300ms ease;
color: $white;
- background: linear-gradient(180deg, #323339 0%, #25262b 100%);
+ background: $grey-linear-gradient-background;
height: 63vh;
text-align: center;
position: relative;
@@ -34,7 +34,7 @@
right: 0;
margin: 0 auto;
top: -70px;
- background: linear-gradient(180deg, #323339 0%, #25262b 100%);
+ background: $grey-linear-gradient-background;
box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.55);
border-radius: 8px;
border: solid 2px $blue;
diff --git a/src/components/Action/actionDone.scss b/src/components/Action/actionDone.scss
index 8167fdb4d..2107b706c 100644
--- a/src/components/Action/actionDone.scss
+++ b/src/components/Action/actionDone.scss
@@ -7,25 +7,21 @@
width: 100%;
padding: 1.5rem;
box-sizing: border-box;
- min-height: 75vh;
+
display: flex;
flex-direction: column;
.action-done {
- box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
- width: 100%;
padding: 3rem 1.2rem;
- margin: auto;
+ margin: 5rem auto auto;
color: white;
- background: linear-gradient(180deg, #323339 0%, #25262b 100%);
+ background: $grey-linear-gradient-background;
box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.55);
- @media all and(max-width:$width-large-phone) {
- min-height: 75vh;
- }
+
.result-title {
font-size: 1.8rem;
color: white;
diff --git a/src/components/Action/actionList.scss b/src/components/Action/actionList.scss
index 4a3f1ec5a..30824bec5 100644
--- a/src/components/Action/actionList.scss
+++ b/src/components/Action/actionList.scss
@@ -1,3 +1,5 @@
+@import '../../styles/base/color';
+
.action-list-container {
padding: 1.5rem 2rem;
display: flex;
@@ -14,7 +16,7 @@ button.action-card {
align-items: center;
justify-content: flex-start;
height: 10rem;
- background: linear-gradient(180deg, #323339 0%, #25262b 100%);
+ background: $grey-linear-gradient-background;
box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.55);
border-radius: 4px;
padding: 1rem;
diff --git a/src/components/Analysis/MonthlyAnalysis.tsx b/src/components/Analysis/MonthlyAnalysis.tsx
index 94e0b0b6e..617818b2b 100644
--- a/src/components/Analysis/MonthlyAnalysis.tsx
+++ b/src/components/Analysis/MonthlyAnalysis.tsx
@@ -109,7 +109,12 @@ const MonthlyAnalysis: React.FC<MonthlyAnalysisProps> = ({
return (
<>
- {isLoaded ? (
+ {!isLoaded && (
+ <div className="analysis-container-spinner" aria-busy="true">
+ <StyledSpinner size="5em" fluidType={FluidType.MULTIFLUID} />
+ </div>
+ )}
+ {isLoaded && (
<div className="analysis-root black">
{fluidTypes.length >= 1 ? (
<>
@@ -175,10 +180,6 @@ const MonthlyAnalysis: React.FC<MonthlyAnalysisProps> = ({
<AnalysisErrorModal />
)}
</div>
- ) : (
- <div className="analysis-container-spinner" aria-busy="true">
- <StyledSpinner size="5em" fluidType={FluidType.MULTIFLUID} />
- </div>
)}
</>
)
diff --git a/src/components/Analysis/analysisConsumption.scss b/src/components/Analysis/analysisConsumption.scss
index f14658990..ffd6593c0 100644
--- a/src/components/Analysis/analysisConsumption.scss
+++ b/src/components/Analysis/analysisConsumption.scss
@@ -66,6 +66,7 @@
display: inline-block;
vertical-align: middle;
font-weight: bold;
+ line-height: 100%;
}
&.active {
.link-label {
diff --git a/src/components/Analysis/monthlyanalysis.scss b/src/components/Analysis/monthlyanalysis.scss
index 298a5c2bf..63a26ff9d 100644
--- a/src/components/Analysis/monthlyanalysis.scss
+++ b/src/components/Analysis/monthlyanalysis.scss
@@ -6,7 +6,7 @@
flex-direction: column;
align-items: center;
justify-content: center;
- padding: 0.5rem 1.5rem;
+ padding: 0 1.5rem 2rem;
&.black {
background: var(--darkLight2);
}
diff --git a/src/components/Challenge/ChallengeCardDone.spec.tsx b/src/components/Challenge/ChallengeCardDone.spec.tsx
index 911ad8aaf..aed2d7c32 100644
--- a/src/components/Challenge/ChallengeCardDone.spec.tsx
+++ b/src/components/Challenge/ChallengeCardDone.spec.tsx
@@ -16,12 +16,9 @@ const mockImportIconbyId = jest.fn()
const mockFormatNumberValues = jest.fn()
jest.mock('utils/utils', () => {
return {
- importIconbyId: jest.fn(() => {
- return mockImportIconbyId
- }),
- formatNumberValues: jest.fn(() => {
- return mockFormatNumberValues
- }),
+ importIconbyId: jest.fn(() => mockImportIconbyId),
+ formatNumberValues: jest.fn(() => mockFormatNumberValues),
+ getChallengeTitleWithLineReturn: jest.fn(() => 'Challenge 1'),
}
})
diff --git a/src/components/Challenge/ChallengeCardDone.tsx b/src/components/Challenge/ChallengeCardDone.tsx
index 74c094636..5ad7f626d 100644
--- a/src/components/Challenge/ChallengeCardDone.tsx
+++ b/src/components/Challenge/ChallengeCardDone.tsx
@@ -2,7 +2,11 @@ import React, { useEffect, useState } from 'react'
import './challengeCardDone.scss'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import classNames from 'classnames'
-import { formatNumberValues, importIconbyId } from 'utils/utils'
+import {
+ formatNumberValues,
+ getChallengeTitleWithLineReturn,
+ importIconbyId,
+} from 'utils/utils'
import { UserChallenge } from 'models'
import { UserChallengeSuccess } from 'enum/userChallenge.enum'
import defaultIcon from 'assets/icons/visu/duelResult/default.svg'
@@ -71,7 +75,7 @@ const ChallengeCardDone: React.FC<ChallengeCardDoneProps> = ({
return (
<div className="cardContent cardDone">
<div className="challengeName text-22-bold">
- {userChallenge.duel.title}
+ {getChallengeTitleWithLineReturn(userChallenge.id)}
</div>
<div className="iconResult">
<StyledIcon
diff --git a/src/components/Challenge/ChallengeCardLocked.tsx b/src/components/Challenge/ChallengeCardLocked.tsx
index 2145bae9d..980beac58 100644
--- a/src/components/Challenge/ChallengeCardLocked.tsx
+++ b/src/components/Challenge/ChallengeCardLocked.tsx
@@ -4,6 +4,7 @@ import { UserChallenge } from 'models'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import challengeLockedIcon from 'assets/icons/visu/challenge/challengeLocked.svg'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { getChallengeTitleWithLineReturn } from 'utils/utils'
interface ChallengeCardLockedProps {
userChallenge: UserChallenge
@@ -15,7 +16,9 @@ const ChallengeCardLocked: React.FC<ChallengeCardLockedProps> = ({
return (
<div className="cardContent cardLocked">
- <span className="challengeTitle">{userChallenge.title}</span>
+ <span className="challengeTitle">
+ {getChallengeTitleWithLineReturn(userChallenge.id)}
+ </span>
<StyledIcon className="challengeIcon" icon={challengeLockedIcon} />
<p className="toUnlock text-16-normal-150">
{t('challenge.card.locked.desc')}
diff --git a/src/components/Challenge/ChallengeCardOnGoing.tsx b/src/components/Challenge/ChallengeCardOnGoing.tsx
index 25388104f..54c9d6b68 100644
--- a/src/components/Challenge/ChallengeCardOnGoing.tsx
+++ b/src/components/Challenge/ChallengeCardOnGoing.tsx
@@ -14,7 +14,7 @@ import circleChecked from 'assets/icons/visu/challenge/circleChecked.svg'
import StarsContainer from './StarsContainer'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
-import { importIconbyId } from 'utils/utils'
+import { getChallengeTitleWithLineReturn, importIconbyId } from 'utils/utils'
import defaultIcon from 'assets/icons/visu/duel/default.svg'
import defaultChallengeIcon from 'assets/icons/visu/challenge/CHALLENGE0001.svg'
import circleStar from 'assets/icons/visu/duel/circleStar.svg'
@@ -27,6 +27,7 @@ import ChallengeNoFluidModal from './ChallengeNoFluidModal'
import { UserExplorationState } from 'enum/userExploration.enum'
import { UserActionState } from 'enum/userAction.enum'
import StyledBlackSpinner from 'components/CommonKit/Spinner/StyledBlackSpinner'
+import { decoreText } from 'utils/decoreText'
interface ChallengeCardOnGoingProps {
userChallenge: UserChallenge
@@ -150,7 +151,9 @@ const ChallengeCardOnGoing: React.FC<ChallengeCardOnGoingProps> = ({
return (
<div className="cardContent onGoing">
<div className="titleBlock">
- <span className="challengeTitle">{userChallenge.title}</span>
+ <span className="challengeTitle">
+ {getChallengeTitleWithLineReturn(userChallenge.id)}
+ </span>
</div>
<button
title={t('challenge.card.ongoing.quiz')}
diff --git a/src/components/Challenge/ChallengeCardUnlocked.spec.tsx b/src/components/Challenge/ChallengeCardUnlocked.spec.tsx
index 22c9a2f9d..658306cec 100644
--- a/src/components/Challenge/ChallengeCardUnlocked.spec.tsx
+++ b/src/components/Challenge/ChallengeCardUnlocked.spec.tsx
@@ -7,6 +7,7 @@ import { userChallengeData } from '../../../tests/__mocks__/userChallengeData.mo
import { globalStateData } from '../../../tests/__mocks__/globalStateData.mock'
import ChallengeNoFluidModal from './ChallengeNoFluidModal'
import { FluidType } from 'enum/fluid.enum'
+import { getChallengeTitleWithLineReturn } from 'utils/utils'
jest.mock('cozy-ui/transpiled/react/I18n', () => {
return {
@@ -29,9 +30,8 @@ jest.mock('services/challenge.service', () => {
const mockImportIconbyId = jest.fn()
jest.mock('utils/utils', () => {
return {
- importIconbyId: jest.fn(() => {
- return mockImportIconbyId
- }),
+ importIconbyId: jest.fn(() => mockImportIconbyId),
+ getChallengeTitleWithLineReturn: jest.fn(() => 'Challenge 1'),
}
})
diff --git a/src/components/Challenge/ChallengeCardUnlocked.tsx b/src/components/Challenge/ChallengeCardUnlocked.tsx
index d5ad1daa2..eaf5718d1 100644
--- a/src/components/Challenge/ChallengeCardUnlocked.tsx
+++ b/src/components/Challenge/ChallengeCardUnlocked.tsx
@@ -11,7 +11,7 @@ import ChallengeNoFluidModal from './ChallengeNoFluidModal'
import { AppStore } from 'store'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import defaultIcon from 'assets/icons/visu/challenge/challengeLocked.svg'
-import { importIconbyId } from 'utils/utils'
+import { getChallengeTitleWithLineReturn, importIconbyId } from 'utils/utils'
import UsageEventService from 'services/usageEvent.service'
import { UsageEventType } from 'enum/usageEvent.enum'
import { FluidState } from 'enum/fluid.enum'
@@ -83,7 +83,9 @@ const ChallengeCardUnlocked: React.FC<ChallengeCardUnlockedProps> = ({
return (
<>
<div className="cardContent cardUnlocked">
- <span className="challengeTitle">{userChallenge.title}</span>
+ <span className="challengeTitle">
+ {getChallengeTitleWithLineReturn(userChallenge.id)}
+ </span>
<StyledIcon className="challengeIcon" icon={challengeIcon} />
<Button
aria-label={t('challenge.accessibility.button_launch')}
diff --git a/src/components/Challenge/__snapshots__/ChallengeCardDone.spec.tsx.snap b/src/components/Challenge/__snapshots__/ChallengeCardDone.spec.tsx.snap
index ff1a9be37..54a1e470a 100644
--- a/src/components/Challenge/__snapshots__/ChallengeCardDone.spec.tsx.snap
+++ b/src/components/Challenge/__snapshots__/ChallengeCardDone.spec.tsx.snap
@@ -7,7 +7,7 @@ exports[`ChallengeCardDone component should be rendered correctly 1`] = `
<div
className="challengeName text-22-bold"
>
- Title DUEL001
+ Challenge 1
</div>
<div
className="iconResult"
diff --git a/src/components/Challenge/__snapshots__/ChallengeCardLocked.spec.tsx.snap b/src/components/Challenge/__snapshots__/ChallengeCardLocked.spec.tsx.snap
index 57d90c6c6..fda39f814 100644
--- a/src/components/Challenge/__snapshots__/ChallengeCardLocked.spec.tsx.snap
+++ b/src/components/Challenge/__snapshots__/ChallengeCardLocked.spec.tsx.snap
@@ -7,7 +7,8 @@ exports[`ChallengeCardLocked component should be rendered correctly 1`] = `
<span
className="challengeTitle"
>
- Challenge 4
+ Bernard
+PIV'EAU
</span>
<StyledIcon
className="challengeIcon"
diff --git a/src/components/Challenge/challengeCard.scss b/src/components/Challenge/challengeCard.scss
index 467bf027d..17ca524a3 100644
--- a/src/components/Challenge/challengeCard.scss
+++ b/src/components/Challenge/challengeCard.scss
@@ -1,3 +1,5 @@
+@import '../../styles/base/color';
+
.slide {
margin: 1rem 1rem 1rem 0;
box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.55);
@@ -13,11 +15,12 @@
transform: scale(0.9);
}
.cardContent {
- background: linear-gradient(180deg, #323339 0%, #25262b 100%);
+ background: $grey-linear-gradient-background;
width: 100%;
height: inherit;
box-sizing: border-box;
padding: 5% 10%;
transition: all 300ms ease;
+ border-radius: 4px;
}
}
diff --git a/src/components/Challenge/challengeCardDone.scss b/src/components/Challenge/challengeCardDone.scss
index f03683ea5..2a31e78e5 100644
--- a/src/components/Challenge/challengeCardDone.scss
+++ b/src/components/Challenge/challengeCardDone.scss
@@ -13,6 +13,7 @@
.challengeName {
margin: 0.5rem 0rem;
+ text-align: center;
}
.iconResult {
display: flex;
diff --git a/src/components/Challenge/challengeCardLocked.scss b/src/components/Challenge/challengeCardLocked.scss
index 35d10645f..279b8f1ac 100644
--- a/src/components/Challenge/challengeCardLocked.scss
+++ b/src/components/Challenge/challengeCardLocked.scss
@@ -12,4 +12,5 @@
.toUnlock {
text-align: center;
color: $grey-bright;
+ font-weight: 700;
}
diff --git a/src/components/Challenge/challengeCardOnGoing.scss b/src/components/Challenge/challengeCardOnGoing.scss
index 73bc4b49d..d86d01aca 100644
--- a/src/components/Challenge/challengeCardOnGoing.scss
+++ b/src/components/Challenge/challengeCardOnGoing.scss
@@ -2,10 +2,10 @@
@import '../../styles/base/color';
.cardContent {
- background: transparent !important;
+ background: transparent;
&.onGoing {
border: 1px solid #e0e0e0;
- position: relative;
+ background: inherit !important;
.challengeTitle {
margin-top: 0;
}
@@ -19,16 +19,18 @@
left: 0;
right: 0;
margin: auto;
- top: -1rem;
+ top: -1.5rem;
background: $dark-light-2;
width: fit-content;
padding: 0 1rem;
max-width: 235px;
}
.smallCard {
+ display: flex;
+ align-items: center;
border: none;
width: 100%;
- background: linear-gradient(180deg, #323339 0%, #25262b 100%);
+ background: $grey-linear-gradient-background;
height: 24%;
max-height: 90px;
margin: 0.5rem 0;
@@ -37,7 +39,6 @@
border-radius: 4px;
color: $grey-bright;
box-sizing: border-box;
- display: flex;
font-family: $text-font;
transition: all 300ms ease;
@@ -75,7 +76,7 @@
margin: auto;
}
.cardIcon {
- margin-right: 0.6rem;
+ margin-right: 1rem;
}
span {
font-size: 1.1rem;
diff --git a/src/components/Challenge/challengeCardUnlocked.scss b/src/components/Challenge/challengeCardUnlocked.scss
index 643b024ea..16e4bf2bb 100644
--- a/src/components/Challenge/challengeCardUnlocked.scss
+++ b/src/components/Challenge/challengeCardUnlocked.scss
@@ -1,17 +1,17 @@
+@import '../../styles/base/color';
+
.modal-overlay {
width: 100%;
height: 100%;
}
.cardUnlocked {
+ background: linear-gradient(180deg, #323339 0%, $dark-light 100%);
filter: drop-shadow(0px 4px 16px rgba(0, 0, 0, 0.55));
button.btn-duel-active {
- width: fit-content !important;
- margin: auto !important;
- text-align: center;
- display: block !important;
- padding: 1rem 1.5rem !important;
+ margin: auto;
+ padding: 1.2rem 1.5rem;
}
.challengeIcon {
@media all and(max-height: 700px) {
diff --git a/src/components/Challenge/challengeView.scss b/src/components/Challenge/challengeView.scss
index 00af8a20b..16d49aef6 100644
--- a/src/components/Challenge/challengeView.scss
+++ b/src/components/Challenge/challengeView.scss
@@ -11,14 +11,15 @@
flex-direction: column;
align-items: center;
padding: 0 2rem;
+ margin: 1rem auto;
}
.challenge-container {
position: relative;
width: 100%;
display: flex;
flex: 1;
+ align-items: center;
transition: all 300ms ease;
- margin-top: 3rem;
}
.cardContent {
margin: auto;
@@ -36,7 +37,7 @@
text-align: center;
font-family: $text-font;
color: $grey-bright;
- font-size: 1.3rem;
+ font-size: 1.5rem;
margin-top: 1rem;
}
.challengeIcon {
diff --git a/src/components/Duel/DuelUnlocked.tsx b/src/components/Duel/DuelUnlocked.tsx
index 18cafb63c..c542baeb0 100644
--- a/src/components/Duel/DuelUnlocked.tsx
+++ b/src/components/Duel/DuelUnlocked.tsx
@@ -69,10 +69,10 @@ const DuelUnlocked: React.FC<DuelUnlockedProps> = ({
<>
<div className="duel-unlocked-container">
<StyledIcon className="duel-icon" icon={duelIcon} size={219} />
+ <div className="duel-description text-20-italic">{`"${description}"`}</div>
<div className="duel-title text-16-normal">
{userChallenge.duel.title}
</div>
- <div className="duel-description text-20-italic">{`"${description}"`}</div>
<div className="duel-average-info text-18-normal">
{`${t('duel.average_info', {
average,
diff --git a/src/components/Duel/duelUnlocked.scss b/src/components/Duel/duelUnlocked.scss
index b787378c7..077c1eed9 100644
--- a/src/components/Duel/duelUnlocked.scss
+++ b/src/components/Duel/duelUnlocked.scss
@@ -20,10 +20,9 @@
}
.duel-average-info {
color: $grey-bright;
- margin-top: 0.75rem;
+ margin-top: 2.5rem;
text-align: center;
}
.button-start {
- width: 11rem;
- margin-top: 2.5rem;
+ margin-top: 1rem;
}
diff --git a/src/components/Ecogesture/EcogestureView.tsx b/src/components/Ecogesture/EcogestureView.tsx
index 05f9f3cf7..c09e4e049 100644
--- a/src/components/Ecogesture/EcogestureView.tsx
+++ b/src/components/Ecogesture/EcogestureView.tsx
@@ -64,7 +64,7 @@ const EcogestureView: React.FC = () => {
(state: AppStore) => state.ecolyo.profile
)
const [tabValue, setTabValue] = useState<EcogestureStatus>(
- tab ? parseInt(tab) : EcogestureStatus.ALL
+ tab ? parseInt(tab) : EcogestureStatus.OBJECTIVE
)
const history = useHistory()
const [isLoaded, setIsLoaded] = useState<boolean>(false)
@@ -184,13 +184,14 @@ const EcogestureView: React.FC = () => {
return (
<>
<CozyBar titleKey={'common.title_ecogestures'} />
- {!isLoaded ? (
+ {!isLoaded && (
<Content height={headerHeight}>
<div className="ecogesture-spinner" aria-busy="true">
<StyledSpinner size="5em" fluidType={FluidType.MULTIFLUID} />
</div>
</Content>
- ) : (
+ )}
+ {isLoaded && (
<>
<Header
setHeaderHeight={defineHeaderHeight}
@@ -210,28 +211,28 @@ const EcogestureView: React.FC = () => {
['active']: tabValue === EcogestureStatus.OBJECTIVE,
})}
{...tabProps(EcogestureStatus.OBJECTIVE)}
- ></Tab>
+ />
<Tab
label={getLabel(EcogestureStatus.DOING)}
className={classNames('single-tab', {
['active']: tabValue === EcogestureStatus.DOING,
})}
{...tabProps(EcogestureStatus.DOING)}
- ></Tab>
-
+ />
<Tab
label={getLabel(EcogestureStatus.ALL)}
className={classNames('single-tab', {
['active']: tabValue === EcogestureStatus.ALL,
})}
{...tabProps(EcogestureStatus.ALL)}
- ></Tab>
+ />
</Tabs>
</Header>
+
<Content height={headerHeight}>
<TabPanel value={tabValue} index={EcogestureStatus.OBJECTIVE}>
- {isProfileEcogestureCompleted === true ? (
- totalAvailable === totalViewed &&
+ {isProfileEcogestureCompleted &&
+ (totalAvailable === totalViewed &&
objectiveEcogestureList.length === 0 ? (
<EcogestureEmptyList
setTab={setTabValue}
@@ -248,8 +249,8 @@ const EcogestureView: React.FC = () => {
index={EcogestureStatus.OBJECTIVE}
handleReinitClick={handleReinitClick}
/>
- )
- ) : (
+ ))}
+ {!isProfileEcogestureCompleted && (
<EcogestureEmptyList
setTab={setTabValue}
isObjective={true}
@@ -260,8 +261,8 @@ const EcogestureView: React.FC = () => {
</TabPanel>
<TabPanel value={tabValue} index={EcogestureStatus.DOING}>
- {isProfileEcogestureCompleted === true ? (
- totalAvailable === totalViewed &&
+ {isProfileEcogestureCompleted &&
+ (totalAvailable === totalViewed &&
doingEcogestureList.length === 0 ? (
<EcogestureEmptyList
setTab={setTabValue}
@@ -278,8 +279,8 @@ const EcogestureView: React.FC = () => {
index={EcogestureStatus.DOING}
handleReinitClick={handleReinitClick}
/>
- )
- ) : (
+ ))}
+ {!isProfileEcogestureCompleted && (
<EcogestureEmptyList
setTab={setTabValue}
isObjective={false}
diff --git a/src/components/Ecogesture/__snapshots__/EcogestureView.spec.tsx.snap b/src/components/Ecogesture/__snapshots__/EcogestureView.spec.tsx.snap
index ad6c92b1e..4d6d99ca2 100644
--- a/src/components/Ecogesture/__snapshots__/EcogestureView.spec.tsx.snap
+++ b/src/components/Ecogesture/__snapshots__/EcogestureView.spec.tsx.snap
@@ -31,7 +31,7 @@ exports[`EcogestureView component should be rendered correctly 1`] = `
centered={true}
className="ecogestures-tabs"
onChange={[Function]}
- value={2}
+ value={0}
>
<ForwardRef(Tabs)
TabIndicatorProps={
@@ -58,7 +58,7 @@ exports[`EcogestureView component should be rendered correctly 1`] = `
}
}
onChange={[Function]}
- value={2}
+ value={0}
>
<div
className="MuiTabs-root ecogestures-tabs"
@@ -81,7 +81,7 @@ exports[`EcogestureView component should be rendered correctly 1`] = `
>
<WithStyles(ForwardRef(Tab))
aria-controls="simple-tabpanel-0"
- className="single-tab"
+ className="single-tab active"
fullWidth={false}
id="simple-tab-0"
indicator={false}
@@ -94,13 +94,13 @@ exports[`EcogestureView component should be rendered correctly 1`] = `
</React.Fragment>
}
onChange={[Function]}
- selected={false}
+ selected={true}
textColor="inherit"
value={0}
>
<ForwardRef(Tab)
aria-controls="simple-tabpanel-0"
- className="single-tab"
+ className="single-tab active"
classes={
Object {
"disabled": "Mui-disabled",
@@ -126,26 +126,26 @@ exports[`EcogestureView component should be rendered correctly 1`] = `
</React.Fragment>
}
onChange={[Function]}
- selected={false}
+ selected={true}
textColor="inherit"
value={0}
>
<WithStyles(ForwardRef(ButtonBase))
aria-controls="simple-tabpanel-0"
- aria-selected={false}
- className="MuiTab-root MuiTab-textColorInherit single-tab"
+ aria-selected={true}
+ className="MuiTab-root MuiTab-textColorInherit single-tab active Mui-selected"
disabled={false}
focusRipple={true}
id="simple-tab-0"
onClick={[Function]}
onFocus={[Function]}
role="tab"
- tabIndex={-1}
+ tabIndex={0}
>
<ForwardRef(ButtonBase)
aria-controls="simple-tabpanel-0"
- aria-selected={false}
- className="MuiTab-root MuiTab-textColorInherit single-tab"
+ aria-selected={true}
+ className="MuiTab-root MuiTab-textColorInherit single-tab active Mui-selected"
classes={
Object {
"disabled": "Mui-disabled",
@@ -159,12 +159,12 @@ exports[`EcogestureView component should be rendered correctly 1`] = `
onClick={[Function]}
onFocus={[Function]}
role="tab"
- tabIndex={-1}
+ tabIndex={0}
>
<button
aria-controls="simple-tabpanel-0"
- aria-selected={false}
- className="MuiButtonBase-root MuiTab-root MuiTab-textColorInherit single-tab"
+ aria-selected={true}
+ className="MuiButtonBase-root MuiTab-root MuiTab-textColorInherit single-tab active Mui-selected"
disabled={false}
id="simple-tab-0"
onBlur={[Function]}
@@ -180,7 +180,7 @@ exports[`EcogestureView component should be rendered correctly 1`] = `
onTouchMove={[Function]}
onTouchStart={[Function]}
role="tab"
- tabIndex={-1}
+ tabIndex={0}
type="button"
>
<span
@@ -369,7 +369,7 @@ exports[`EcogestureView component should be rendered correctly 1`] = `
</WithStyles(ForwardRef(Tab))>
<WithStyles(ForwardRef(Tab))
aria-controls="simple-tabpanel-2"
- className="single-tab active"
+ className="single-tab"
fullWidth={false}
id="simple-tab-2"
indicator={false}
@@ -382,13 +382,13 @@ exports[`EcogestureView component should be rendered correctly 1`] = `
</React.Fragment>
}
onChange={[Function]}
- selected={true}
+ selected={false}
textColor="inherit"
value={2}
>
<ForwardRef(Tab)
aria-controls="simple-tabpanel-2"
- className="single-tab active"
+ className="single-tab"
classes={
Object {
"disabled": "Mui-disabled",
@@ -414,26 +414,26 @@ exports[`EcogestureView component should be rendered correctly 1`] = `
</React.Fragment>
}
onChange={[Function]}
- selected={true}
+ selected={false}
textColor="inherit"
value={2}
>
<WithStyles(ForwardRef(ButtonBase))
aria-controls="simple-tabpanel-2"
- aria-selected={true}
- className="MuiTab-root MuiTab-textColorInherit single-tab active Mui-selected"
+ aria-selected={false}
+ className="MuiTab-root MuiTab-textColorInherit single-tab"
disabled={false}
focusRipple={true}
id="simple-tab-2"
onClick={[Function]}
onFocus={[Function]}
role="tab"
- tabIndex={0}
+ tabIndex={-1}
>
<ForwardRef(ButtonBase)
aria-controls="simple-tabpanel-2"
- aria-selected={true}
- className="MuiTab-root MuiTab-textColorInherit single-tab active Mui-selected"
+ aria-selected={false}
+ className="MuiTab-root MuiTab-textColorInherit single-tab"
classes={
Object {
"disabled": "Mui-disabled",
@@ -447,12 +447,12 @@ exports[`EcogestureView component should be rendered correctly 1`] = `
onClick={[Function]}
onFocus={[Function]}
role="tab"
- tabIndex={0}
+ tabIndex={-1}
>
<button
aria-controls="simple-tabpanel-2"
- aria-selected={true}
- className="MuiButtonBase-root MuiTab-root MuiTab-textColorInherit single-tab active Mui-selected"
+ aria-selected={false}
+ className="MuiButtonBase-root MuiTab-root MuiTab-textColorInherit single-tab"
disabled={false}
id="simple-tab-2"
onBlur={[Function]}
@@ -468,7 +468,7 @@ exports[`EcogestureView component should be rendered correctly 1`] = `
onTouchMove={[Function]}
onTouchStart={[Function]}
role="tab"
- tabIndex={0}
+ tabIndex={-1}
type="button"
>
<span
@@ -563,11 +563,11 @@ exports[`EcogestureView component should be rendered correctly 1`] = `
>
<TabPanel
index={0}
- value={2}
+ value={0}
>
<div
aria-labelledby="simple-tab-0"
- hidden={true}
+ hidden={false}
id="simple-tabpanel-0"
role="tabpanel"
>
@@ -899,7 +899,7 @@ exports[`EcogestureView component should be rendered correctly 1`] = `
</TabPanel>
<TabPanel
index={1}
- value={2}
+ value={0}
>
<div
aria-labelledby="simple-tab-1"
@@ -1235,11 +1235,11 @@ exports[`EcogestureView component should be rendered correctly 1`] = `
</TabPanel>
<TabPanel
index={2}
- value={2}
+ value={0}
>
<div
aria-labelledby="simple-tab-2"
- hidden={false}
+ hidden={true}
id="simple-tabpanel-2"
role="tabpanel"
>
diff --git a/src/components/Ecogesture/ecogestureList.scss b/src/components/Ecogesture/ecogestureList.scss
index 501534cc2..58f38c24f 100644
--- a/src/components/Ecogesture/ecogestureList.scss
+++ b/src/components/Ecogesture/ecogestureList.scss
@@ -153,7 +153,7 @@ div.filter-menu {
rgba(255, 255, 255, 0.09),
rgba(255, 255, 255, 0.09)
),
- linear-gradient(180deg, #323339 0%, #25262b 100%);
+ $grey-linear-gradient-background;
border: 1px solid $soft-grey;
box-sizing: border-box;
box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.55);
diff --git a/src/components/Ecogesture/ecogestureModal.scss b/src/components/Ecogesture/ecogestureModal.scss
index 6a0b07182..1e95283c9 100644
--- a/src/components/Ecogesture/ecogestureModal.scss
+++ b/src/components/Ecogesture/ecogestureModal.scss
@@ -78,7 +78,7 @@
#2a2b30 0%,
#1b1c22 100%
);
- border: 2px solid $blue-40;
+ border: 1px solid $blue;
padding: 1.5rem 0.6rem;
border-radius: 50px 1px 50px 1px;
text-align: center;
@@ -90,7 +90,7 @@
text-align: left;
}
button.btn-action-launch {
- background-color: #58ffff;
+ background: $blue-radial-gradient;
border: none;
border-radius: 2px;
margin: 1.5rem 0 0;
@@ -132,4 +132,4 @@
#accessibility-title {
display: none;
-}
\ No newline at end of file
+}
diff --git a/src/components/Ecogesture/ecogestureView.scss b/src/components/Ecogesture/ecogestureView.scss
index 9206f18f6..4d6106f9e 100644
--- a/src/components/Ecogesture/ecogestureView.scss
+++ b/src/components/Ecogesture/ecogestureView.scss
@@ -18,6 +18,9 @@
justify-content: center;
margin: 0 1rem;
box-sizing: border-box;
+ button {
+ border-radius: 4px 4px 0 0;
+ }
.single-tab {
width: 32%;
text-transform: initial;
@@ -32,5 +35,16 @@
.indicator-tab {
background: $gold-shadow;
height: 1px;
+ &::before {
+ content: '';
+ position: absolute;
+ height: 12px;
+ left: 10.41%;
+ right: 10.42%;
+ bottom: -6px;
+ background: $gold-shadow;
+ opacity: 0.35;
+ filter: blur(10px);
+ }
}
}
diff --git a/src/components/Ecogesture/singleEcogesture.scss b/src/components/Ecogesture/singleEcogesture.scss
index 640b5afaf..555733dcc 100644
--- a/src/components/Ecogesture/singleEcogesture.scss
+++ b/src/components/Ecogesture/singleEcogesture.scss
@@ -31,6 +31,7 @@
display: flex;
.title {
color: $soft-grey;
+ font-weight: 700;
}
.efficiency {
display: flex;
diff --git a/src/components/EcogestureSelection/ecogestureSelectionDetail.scss b/src/components/EcogestureSelection/ecogestureSelectionDetail.scss
index 2ef624130..332f7af65 100644
--- a/src/components/EcogestureSelection/ecogestureSelectionDetail.scss
+++ b/src/components/EcogestureSelection/ecogestureSelectionDetail.scss
@@ -73,6 +73,8 @@
}
.title {
+ margin-top: 1rem;
color: $soft-grey;
+ font-weight: 700;
}
}
diff --git a/src/components/Exploration/explorationFinished.scss b/src/components/Exploration/explorationFinished.scss
index 4a16d89fd..57ce2cb88 100644
--- a/src/components/Exploration/explorationFinished.scss
+++ b/src/components/Exploration/explorationFinished.scss
@@ -11,7 +11,7 @@
border-radius: 4px;
transition: all 300ms ease;
color: $white;
- background: linear-gradient(180deg, #323339 0%, #25262b 100%);
+ background: $grey-linear-gradient-background;
width: 80%;
text-align: center;
padding: 0.5rem 1rem 1rem;
diff --git a/src/components/Exploration/explorationOngoing.scss b/src/components/Exploration/explorationOngoing.scss
index 8d1e55337..f533e291e 100644
--- a/src/components/Exploration/explorationOngoing.scss
+++ b/src/components/Exploration/explorationOngoing.scss
@@ -12,15 +12,18 @@
flex-direction: column;
align-items: center;
justify-content: space-around;
- margin: 2rem 1rem;
- padding: 1rem;
+ margin: 8rem 1.5rem auto;
+ padding: 2rem 1rem;
box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.55);
border-radius: 4px;
transition: all 300ms ease;
color: $white;
- background: linear-gradient(180deg, #323339 0%, #25262b 100%);
- height: 70vh;
- width: 80%;
+ background: $grey-linear-gradient-background;
+
+ svg {
+ margin-top: -33%;
+ }
+
text-align: center;
@media (min-width: $width-large-phone) {
width: 60%;
@@ -57,6 +60,7 @@
}
}
.stars {
+ margin-top: 1rem;
svg {
margin-right: 0.25rem;
}
diff --git a/src/components/FAQ/FAQLink.tsx b/src/components/FAQ/FAQLink.tsx
index 472d4dfa8..39dbdbdfe 100644
--- a/src/components/FAQ/FAQLink.tsx
+++ b/src/components/FAQ/FAQLink.tsx
@@ -31,7 +31,7 @@ const FAQLink: React.FC = () => {
<StyledIcon
className="faq-card-content-icon"
icon={QuestionMarkIcon}
- size={50}
+ size={42}
/>
<div className="faq-card-content-title">
{t('faq.read_faq')}
diff --git a/src/components/FormGlobal/FormProgress.tsx b/src/components/FormGlobal/FormProgress.tsx
index 77c7f732f..8f8616872 100644
--- a/src/components/FormGlobal/FormProgress.tsx
+++ b/src/components/FormGlobal/FormProgress.tsx
@@ -16,7 +16,7 @@ const FormProgress: React.FC<FormProgressProps> = ({
const total: number =
Object.values(formType === 'sge' ? SgeStep : ProfileTypeStepForm).length /
2
- const progress: number = Math.round((step / total) * 100)
+ const progress: number = Math.round((step / total) * 100) || 1
return progress
}
return (
diff --git a/src/components/GCU/GCULink.tsx b/src/components/GCU/GCULink.tsx
index 105d65d2f..2ae3e6428 100644
--- a/src/components/GCU/GCULink.tsx
+++ b/src/components/GCU/GCULink.tsx
@@ -25,7 +25,7 @@ const GCULink: React.FC = () => {
<StyledIcon
className="gcu-link-card-content-icon"
icon={LegalNoticeIcon}
- size={50}
+ size={42}
/>
<div className="gcu-link-card-content-title">
{t('gcu_option.read_gcu')}
diff --git a/src/components/GCU/__snapshots__/GCULink.spec.tsx.snap b/src/components/GCU/__snapshots__/GCULink.spec.tsx.snap
index df9075557..0723f105c 100644
--- a/src/components/GCU/__snapshots__/GCULink.spec.tsx.snap
+++ b/src/components/GCU/__snapshots__/GCULink.spec.tsx.snap
@@ -43,7 +43,7 @@ exports[`LegalNoticeLink component should be rendered correctly 1`] = `
<StyledIcon
className="legal-notice-card-content-icon"
icon="test-file-stub"
- size={50}
+ size={42}
/>
<div
className="legal-notice-card-content-title"
diff --git a/src/components/Header/CozyBar.tsx b/src/components/Header/CozyBar.tsx
index ba259603d..1509fc50c 100644
--- a/src/components/Header/CozyBar.tsx
+++ b/src/components/Header/CozyBar.tsx
@@ -4,9 +4,10 @@ import { useSelector, useDispatch } from 'react-redux'
import { AppStore } from 'store'
import { updateModalIsFeedbacksOpen } from 'store/modal/modal.actions'
import { useHistory } from 'react-router-dom'
+
import { ScreenType } from 'enum/screen.enum'
import BackArrowIcon from 'assets/icons/ico/back-arrow.svg'
-import FeedbacksIcon from 'assets/icons/ico/feedbacks.svg'
+import FeedbackIcon from 'assets/icons/ico/feedback.svg'
import StyledIconButton from 'components/CommonKit/IconButton/StyledIconButton'
interface CozyBarProps {
@@ -65,7 +66,7 @@ const CozyBar = ({
<StyledIconButton
aria-label={t('header.accessibility.button_open_feedbacks')}
className="cv-button"
- icon={FeedbacksIcon}
+ icon={FeedbackIcon}
size={40}
onClick={handleClickFeedbacks}
/>
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index 47a5a307c..3a469698a 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -7,11 +7,10 @@ import { updateModalIsFeedbacksOpen } from 'store/modal/modal.actions'
import { useHistory } from 'react-router-dom'
import { ScreenType } from 'enum/screen.enum'
-
-import IconButton from '@material-ui/core/IconButton'
-import Icon from 'cozy-ui/transpiled/react/Icon'
import BackArrowIcon from 'assets/icons/ico/back-arrow.svg'
-import FeedbacksIcon from 'assets/icons/ico/feedbacks.svg'
+import FeedbackIcon from 'assets/icons/ico/feedback.svg'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import IconButton from '@material-ui/core/IconButton'
interface HeaderProps {
textKey?: string
@@ -101,7 +100,6 @@ const Header: React.FC<HeaderProps> = ({
<Icon icon={BackArrowIcon} size={16} />
</IconButton>
)}
- {/* {t(desktopTitleKey)} */}
<span>{isNotKey ? desktopTitleKey : t(desktopTitleKey)}</span>
</div>
)}
@@ -114,7 +112,7 @@ const Header: React.FC<HeaderProps> = ({
}
onClick={handleClickFeedbacks}
>
- <Icon icon={FeedbacksIcon} size={40} />
+ <Icon icon={FeedbackIcon} size={40} />
</IconButton>
</div>
{children}
diff --git a/src/components/Header/header.scss b/src/components/Header/header.scss
index 4cfbd9ed7..58b400875 100644
--- a/src/components/Header/header.scss
+++ b/src/components/Header/header.scss
@@ -17,9 +17,9 @@
}
.header-top {
background: radial-gradient(
- circle,
- rgba(52, 54, 65, 1) 0%,
- rgba(27, 28, 34, 1) 100%
+ 51.85% 47.89% at 50% 13.32%,
+ #343641 0%,
+ $dark-2 100%
);
width: 100%;
.header-text {
diff --git a/src/components/LegalNotice/LegalNoticeLink.tsx b/src/components/LegalNotice/LegalNoticeLink.tsx
index cf86ad493..06e3ad554 100644
--- a/src/components/LegalNotice/LegalNoticeLink.tsx
+++ b/src/components/LegalNotice/LegalNoticeLink.tsx
@@ -35,7 +35,7 @@ const LegalNoticeLink: React.FC = () => {
<StyledIcon
className="legal-notice-card-content-icon"
icon={LegalNoticeIcon}
- size={50}
+ size={42}
/>
<div className="legal-notice-card-content-title">
{t('legal.read_legal')}
diff --git a/src/components/LegalNotice/__snapshots__/LegalNoticeLink.spec.tsx.snap b/src/components/LegalNotice/__snapshots__/LegalNoticeLink.spec.tsx.snap
index c4d14015b..06fbb1b9c 100644
--- a/src/components/LegalNotice/__snapshots__/LegalNoticeLink.spec.tsx.snap
+++ b/src/components/LegalNotice/__snapshots__/LegalNoticeLink.spec.tsx.snap
@@ -42,7 +42,7 @@ exports[`GCULink component should be rendered correctly 1`] = `
<StyledIcon
className="gcu-link-card-content-icon"
icon="test-file-stub"
- size={50}
+ size={42}
/>
<div
className="gcu-link-card-content-title"
diff --git a/src/components/Options/ProfileTypeOptions.tsx b/src/components/Options/ProfileTypeOptions.tsx
index 003cadb61..3959c2c12 100644
--- a/src/components/Options/ProfileTypeOptions.tsx
+++ b/src/components/Options/ProfileTypeOptions.tsx
@@ -69,7 +69,7 @@ const ProfileTypeOptions: React.FC = () => {
content: 'expansion-panel-content',
}}
>
- <Icon className="profile-icon" icon={profileIcon} size={38} />
+ <Icon className="profile-icon" icon={profileIcon} size={42} />
<div className="text-16-normal profile-title">
{t('profile_type.your_profile')}
</div>
diff --git a/src/components/Options/exportOptions.scss b/src/components/Options/exportOptions.scss
index 876ce05c3..cd552f415 100644
--- a/src/components/Options/exportOptions.scss
+++ b/src/components/Options/exportOptions.scss
@@ -9,7 +9,7 @@ div.expansion-panel-root.Mui-expanded:last-child {
flex-direction: column;
align-items: center;
justify-content: center;
- padding: 0 1.5rem;
+ padding: 0.5rem 1.5rem 0;
}
.export-option-content {
width: 45.75rem;
diff --git a/src/components/ProfileType/profileTypeFinished.scss b/src/components/ProfileType/profileTypeFinished.scss
index 5c04aa795..e96777520 100644
--- a/src/components/ProfileType/profileTypeFinished.scss
+++ b/src/components/ProfileType/profileTypeFinished.scss
@@ -11,7 +11,7 @@
border-radius: 4px;
transition: all 300ms ease;
color: $white;
- background: linear-gradient(180deg, #323339 0%, #25262b 100%);
+ background: $grey-linear-gradient-background;
width: 80%;
text-align: center;
padding: 0.5rem 1rem 1rem;
@@ -23,7 +23,7 @@
width: 40%;
min-height: 28.75rem;
}
- button.profile-type-finished-button{
+ button.profile-type-finished-button {
margin-top: 2.875rem;
}
}
@@ -32,4 +32,4 @@
}
.profile-type-finished-description {
margin-top: 1.875rem;
-}
\ No newline at end of file
+}
diff --git a/src/components/ProfileType/profileTypeForm.scss b/src/components/ProfileType/profileTypeForm.scss
index 363995f8e..e24cda70d 100644
--- a/src/components/ProfileType/profileTypeForm.scss
+++ b/src/components/ProfileType/profileTypeForm.scss
@@ -56,7 +56,7 @@
.radio_short,
.radio_long,
.checkbox {
- background: linear-gradient(180deg, #323339 0%, #25262b 100%);
+ background: $grey-linear-gradient-background;
box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.55);
margin: 0.5rem 0;
display: flex;
@@ -201,7 +201,7 @@
}
ul {
- background: linear-gradient(180deg, #323339 0%, #25262b 100%);
+ background: $grey-linear-gradient-background;
color: $white;
font-weight: normal;
.MuiMenuItem-root {
diff --git a/src/components/Quiz/quizBegin.scss b/src/components/Quiz/quizBegin.scss
index 33a7d565b..a9bf7ddf2 100644
--- a/src/components/Quiz/quizBegin.scss
+++ b/src/components/Quiz/quizBegin.scss
@@ -11,15 +11,19 @@
display: flex;
flex-direction: column;
align-items: center;
- margin: 2rem 1rem;
- padding: 1rem;
+ margin: 8rem 1.5rem auto;
+ padding: 2rem 1rem;
box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.55);
border-radius: 4px;
transition: all 300ms ease;
color: $white;
- background: linear-gradient(180deg, #323339 0%, #25262b 100%);
- height: 70vh;
+ background: $grey-linear-gradient-background;
text-align: center;
+
+ svg {
+ margin-top: -33%;
+ }
+
@media (min-width: $width-large-phone) {
max-width: 60%;
justify-content: space-evenly;
diff --git a/src/components/Quiz/quizExplanationModal.scss b/src/components/Quiz/quizExplanationModal.scss
index eb9a05c7a..a1c48112a 100644
--- a/src/components/Quiz/quizExplanationModal.scss
+++ b/src/components/Quiz/quizExplanationModal.scss
@@ -7,14 +7,14 @@
align-items: center;
padding: 1.5rem 0.5rem;
text-align: center;
- .quiz-modal-answer{
+ .quiz-modal-answer {
font-weight: bold;
font-size: 1.7rem;
text-transform: uppercase;
margin-top: 0;
margin-bottom: 1rem;
&.correct {
- color: $blue-light;
+ color: $gold-shadow;
}
&.wrong {
color: $red-primary;
@@ -35,4 +35,3 @@
#accessibility-title {
display: none;
}
-
diff --git a/src/components/Quiz/quizFinish.scss b/src/components/Quiz/quizFinish.scss
index 0608c2cbf..b85d44272 100644
--- a/src/components/Quiz/quizFinish.scss
+++ b/src/components/Quiz/quizFinish.scss
@@ -6,12 +6,12 @@
flex-direction: column;
justify-content: center;
align-items: center;
- margin: 3rem 1rem 1rem;
+ margin: 8rem 1.5rem auto;
box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.55);
border-radius: 4px;
transition: all 300ms ease;
color: $white;
- background: linear-gradient(180deg, #323339 0%, #25262b 100%);
+ background: $grey-linear-gradient-background;
height: 100%;
width: 80%;
text-align: center;
@@ -24,7 +24,7 @@
}
button.btn-secondary-negative {
border-color: $grey-bright;
- min-width: 11rem;
+ min-width: 15rem;
}
}
.score-final-title {
diff --git a/src/components/Quiz/quizQuestion.scss b/src/components/Quiz/quizQuestion.scss
index 048cdc970..4534723f9 100644
--- a/src/components/Quiz/quizQuestion.scss
+++ b/src/components/Quiz/quizQuestion.scss
@@ -2,19 +2,18 @@
@import '../../styles/base/breakpoint';
.quiz-container {
- text-align: center;
.question-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
- margin: 3rem 1rem 1rem;
+ margin: 8rem 1.5rem auto;
padding: 0.5rem 1rem;
box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.55);
border-radius: 4px;
transition: all 300ms ease;
color: $white;
- background: linear-gradient(180deg, #323339 0%, #25262b 100%);
+ background: $grey-linear-gradient-background;
position: relative;
width: 80%;
@media (min-width: $width-large-phone) {
@@ -79,7 +78,7 @@
}
input[type='radio']:checked + label,
label:hover {
- background: $blue-light;
+ background: $blue-radial-gradient;
color: $dark-light-2;
border-color: $blue-light;
}
diff --git a/src/db/challengeEntity.json b/src/db/challengeEntity.json
index 790d0a869..a8c0710ad 100644
--- a/src/db/challengeEntity.json
+++ b/src/db/challengeEntity.json
@@ -1,7 +1,8 @@
[
{
"_id": "CHALLENGE0001",
- "title": "Simone Veille",
+ "title": "Simone VEILLE",
+ "title_line_return": "Simone\nVEILLE",
"description": "foobar",
"target": 15,
"relationships": {
@@ -23,7 +24,8 @@
},
{
"_id": "CHALLENGE0002",
- "title": "Jean-Jacques Ruisseau",
+ "title": "Jean-Jacques RUISSEAU",
+ "title_line_return": "Jean-Jacques\nRUISSEAU",
"description": "foobar",
"target": 15,
"relationships": {
@@ -45,7 +47,8 @@
},
{
"_id": "CHALLENGE0003",
- "title": "Usain Volt",
+ "title": "Usain VOLT",
+ "title_line_return": "Usain\nVOLT",
"description": "foobar",
"target": 15,
"relationships": {
@@ -67,7 +70,8 @@
},
{
"_id": "CHALLENGE0004",
- "title": "Bernard Piv'eau",
+ "title": "Bernard PIV'EAU",
+ "title_line_return": "Bernard\nPIV'EAU",
"description": "foobar",
"target": 15,
"relationships": {
@@ -93,7 +97,8 @@
},
{
"_id": "CHALLENGE0005",
- "title": "Maria SharapoWatt",
+ "title": "Maria SHARAPOWATT",
+ "title_line_return": "Maria\nSHARAPOWATT",
"description": "foobar",
"target": 15,
"relationships": {
diff --git a/src/db/duelEntity.json b/src/db/duelEntity.json
index c8a41ec42..65f25650d 100644
--- a/src/db/duelEntity.json
+++ b/src/db/duelEntity.json
@@ -1,31 +1,31 @@
[
{
"_id": "DUEL001",
- "title": "Simone Veille",
+ "title": "Simone VEILLE",
"description": "Je vous défie de consommer moins que #CONSUMPTION € dans les #DURATION prochains jours",
"duration": { "days": 7 }
},
{
"_id": "DUEL002",
- "title": "Jean-Jacques Ruisseau",
+ "title": "Jean-Jacques RUISSEAU",
"description": "Je vous défie de consommer moins que #CONSUMPTION € dans les #DURATION prochains jours",
"duration": { "days": 14 }
},
{
"_id": "DUEL003",
- "title": "Usain Volt",
+ "title": "Usain VOLT",
"description": "Je vous défie de consommer moins que #CONSUMPTION € dans les #DURATION prochains jours",
"duration": { "days": 14 }
},
{
"_id": "DUEL004",
- "title": "Bernard Piv'eau",
+ "title": "Bernard PIV'EAU",
"description": "Je vous défie de consommer moins que #CONSUMPTION € dans les #DURATION prochains jours",
"duration": { "days": 21 }
},
{
"_id": "DUEL005",
- "title": "Maria SharapoWatt",
+ "title": "Maria SHARAPOWATT",
"description": "Je vous défie de consommer moins que #CONSUMPTION € dans les #DURATION prochains jours",
"duration": { "days": 28 }
}
diff --git a/src/locales/fr.json b/src/locales/fr.json
index 8c4fd0e4e..d12000478 100644
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@@ -154,7 +154,7 @@
"zipCode": "Code postal",
"city": "Ville",
"headConsent": "Vous allez partager vos données à la Métropole de Lyon. Elles seront directement transférées à Ecolyo à l'intérieur de votre cloud personnel, sans que la Métropole n'y accède ni ne les visualise.",
- "textConsent": "Afin de vous offrir des fonctionnalités de visualisation et d'analyse, Ecolyo a besoin des données suivantes : ",
+ "textConsent": "Afin de vous offrir des fonctionnalités de visualisation et d'analyse, Ecolyo a besoin des données suivantes\u00a0: ",
"consentLi1": "L'historique et le relevé de vos consommations quotidiennes en kWh",
"consentLi2": "L'historique et le relevé de vos consommations au pas de temps 30 minutes",
"consentLi3": "Les puissances maximales atteintes quotidiennement",
@@ -232,7 +232,7 @@
"duelDone": "du duel final"
},
"locked": {
- "desc": "À débloquer en terminant le challenge précédent"
+ "desc": "À débloquer en terminant le défi précédent"
}
},
"card_done": {
@@ -250,10 +250,10 @@
"button": "Suggérer une idée de défi"
},
"card_unlocked": {
- "button_launch": "Lancer le challenge"
+ "button_launch": "Lancer le défi"
},
"accessibility": {
- "button_launch": "Lancer le challenge",
+ "button_launch": "Lancer le défi",
"button_goto_konnector": "Aller aux connecteurs",
"button_slider_previous": "Précédent",
"button_slider_next": "Suivant"
@@ -279,7 +279,7 @@
},
"partners_issue_modal": {
"title": "Un problème dans la récupération de vos données",
- "text_1": "Ces partenaires nous indiquent qu’ils subissent en ce moment un soucis technique :",
+ "text_1": "Ces partenaires nous indiquent qu’ils subissent en ce moment un soucis technique\u00a0:",
"text_2": "La visualisation de vos consommations peut s’en trouver affectée.",
"button_validate": "J'ai compris"
}
@@ -303,7 +303,7 @@
"dataModal": {
"list_title": "3 raisons possibles :",
"item1": "le lien entre Ecolyo et le fournisseur de données est rompu : une mise à jour de ce lien (en bas de la page) peut résoudre ce problème.",
- "item2": "un problème technique chez votre gestionnaire : se connecter directement chez ce gestionnaire pour vérifier que cette donnée apparaît.",
+ "item2": "un problème technique chez votre gestionnaire\u00a0: se connecter directement chez ce gestionnaire pour vérifier que cette donnée apparaît.",
"item3": "vous n'aviez tout simplement pas de compteur communicant à l'époque !"
},
"modal": {
@@ -319,7 +319,7 @@
},
"release_notes_modal": {
"title": "Du nouveau sur Ecolyo !",
- "message": "Les mises à jour suivantes ont été effectuées sur votre application :",
+ "message": "Les mises à jour suivantes ont été effectuées sur votre application\u00a0:",
"go_back": "Retour",
"accessibility": {
"window_title": "Fenêtre de notifications",
@@ -606,7 +606,7 @@
"title2Update": "Pour continuer à utiliser Ecolyo, merci d’accepter les modalités de traitement des données ci-dessous.",
"part1": "Pour le bon fonctionnement du service, nous avons besoin de l’adresse email utilisée lors la création de votre cloud personnel Grand Lyon.",
"part2": "Cette donnée de compte est conservée dans Ecolyo le temps de l’utilisation de ce service.",
- "part3": "La Métropole de Lyon utilisera cet email afin de vous tenir informé·e :",
+ "part3": "La Métropole de Lyon utilisera cet email afin de vous tenir informé·\u00a0 :",
"item1": "En réponse à vos demandes, si vous avez pris l’initiative de nous contacter.",
"item2": "En cas de problème majeur avec la gestion de votre compte.",
"item3": "De l’évolution de vos consommations, des nouveautés et de la qualité du service via une lettre mensuelle. Vous pouvez à tout moment vous désinscrire de cette lettre via la page Options du service.",
@@ -616,7 +616,7 @@
"part7": "Au sein de votre cloud personnel, vous pouvez à tout moment exercer vos droits d’accès, de rectification, de portabilité, de limitation et d’opposition en consultant notamment la page Options.",
"part8": "Vous pouvez également exercer vos droits d’accès, de rectification, de limitation, d’opposition et d’effacement de vos données personnelles en contactant directement le Délégué à la Protection des Données par courrier en écrivant à l’adresse :",
"part9": "Métropole de Lyon – Délégué à la Protection des Données - Direction des Assemblées, des Affaires Juridiques et des Assurances - 20, rue du Lac - BP 33569 - 69505 Lyon Cedex 03 ",
- "part10": "ou en ligne, au moyen du formulaire disponible à l'adresse suivante : ",
+ "part10": "ou en ligne, au moyen du formulaire disponible à l'adresse suivante\u00a0: ",
"link1": "<a href=\"https://demarches.toodego.com/sve/proteger-mes-donnees-personnelles/\">https://demarches.toodego.com/sve/proteger-mes-donnees-personnelles/</a>",
"validDataConsent": "Je consens au traitement de mes données tel que décrit ci-dessus.",
"validCGU": "Je valide les <span class=\"action\">Conditions Générales d’Utilisation</span> ",
@@ -641,7 +641,7 @@
"part1_3": "Tous les termes « techniques » sont définis en bas de page.",
"title2": "Quelles fonctionnalités le service propose-t-il ?",
"part2_1": "La fonctionnalité principale d’Ecolyo est la visualisation, au même endroit, de vos consommations d’électricité, de gaz et d’eau et ce, à différents pas de temps (de la demi-heure – uniquement pour l’électricité, à plusieurs années, en passant par les pas de temps journaliers et mensuels). La visualisation des consommations se fait en kWh pour l’énergie et en L pour l’eau ainsi qu’en euros (euros résultant d’un prix moyenné).",
- "part2_2": "Au-delà de la visualisation de vos consommations et parce que nous souhaitons vous aider à diminuer ces consommations vous retrouverez plusieurs autres pages : ",
+ "part2_2": "Au-delà de la visualisation de vos consommations et parce que nous souhaitons vous aider à diminuer ces consommations vous retrouverez plusieurs autres pages\u00a0: ",
"part2_2_list1": "Défis : Des quiz, et actions à mettre en place vous seront proposés pour vous pousser à réduire vos consommations.",
"part2_2_list2": "Écogestes : Une liste d’écogestes à trier par usage, et avec une possibilité de les adapter plus précisément à votre profil.",
"part2_2_list3": "Analyse : Une analyse de vos consommations réelles en comparaison à celle d’un foyer étant proche d’une vôtre.",
@@ -968,7 +968,7 @@
"switch_label_bilan": "Je reçois la lettre mensuelle contenant un bilan et des conseils sur ma consommation.",
"switch_label_alert": "Être prévenu d’un dépassement anormal de ma consommation d’eau",
"input_label_alert": "Si ma consommation d’eau quotidienne dépasse :",
- "input_label_subtext_alert": "(Votre consommation quotidienne maximum sur les 6 derniers mois : ",
+ "input_label_subtext_alert": "(Votre consommation quotidienne maximum sur les 6 derniers mois\u00a0: ",
"activate": "Activer",
"deactivate": "Désactiver"
},
diff --git a/src/models/challenge.model.ts b/src/models/challenge.model.ts
index c7d720aad..cfda80f6d 100644
--- a/src/models/challenge.model.ts
+++ b/src/models/challenge.model.ts
@@ -44,6 +44,7 @@ export interface ChallengeProgress {
export interface UserChallengeEntity {
id: string
title: string
+ title_line_return?: string
description: string
state: UserChallengeState
target: number
diff --git a/src/styles/base/_color.scss b/src/styles/base/_color.scss
index 354840a88..b53334afc 100644
--- a/src/styles/base/_color.scss
+++ b/src/styles/base/_color.scss
@@ -3,6 +3,7 @@ $dark: #242633;
$dark-2: #1b1c22;
$dark-light: #25262b;
$dark-light-2: #121212;
+$dark-light-3: #323339;
$dark-3: #181819;
$dark-background: radial-gradient(
60.65% 30.62% at 50% 3.13%,
@@ -55,8 +56,8 @@ $soft-grey: #a0a0a0;
$grey-dark: #7b7b7b;
$grey-linear-gradient-background: linear-gradient(
180deg,
- rgb(50, 51, 57) 0%,
- rgb(37, 38, 43) 100%
+ #323339 0%,
+ #25262b 100%
);
$grey-linear-gradient-background-hover: linear-gradient(
180deg,
diff --git a/src/styles/components/_buttons.scss b/src/styles/components/_buttons.scss
index a5bab7174..974a18400 100644
--- a/src/styles/components/_buttons.scss
+++ b/src/styles/components/_buttons.scss
@@ -70,9 +70,8 @@ button {
}
}
&.btn-duel-active {
- @include button($blue, $dark-light-2, none, $blue) {
- background-color: darken($blue, 30%);
- }
+ border-radius: 4px !important;
+ @include button($blue-radial-gradient, $dark-light-2, none);
}
&.btn-duel-on {
@include button($dark-light-2, $white, 1px solid $blue, $dark-background) {
diff --git a/src/styles/components/_card.scss b/src/styles/components/_card.scss
index fb7a468e5..76039f6ff 100644
--- a/src/styles/components/_card.scss
+++ b/src/styles/components/_card.scss
@@ -5,7 +5,7 @@
box-sizing: border-box;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.75);
border-radius: 4px;
- margin: 10px 0px 20px 0px;
+ margin-top: 1.5rem;
padding: 16px;
&:hover {
background: $grey-linear-gradient-background-hover;
diff --git a/src/utils/utils.spec.ts b/src/utils/utils.spec.ts
index f6bbc82d9..0d32300e7 100644
--- a/src/utils/utils.spec.ts
+++ b/src/utils/utils.spec.ts
@@ -1,7 +1,12 @@
import { DateTime } from 'luxon'
import { Season } from 'enum/ecogesture.enum'
import { FluidType } from 'enum/fluid.enum'
-import { formatNumberValues, getFluidType, getSeason } from './utils'
+import {
+ formatNumberValues,
+ getChallengeTitleWithLineReturn,
+ getFluidType,
+ getSeason,
+} from './utils'
describe('utilis utilis test', () => {
describe('getFluidType test', () => {
@@ -72,4 +77,15 @@ describe('utilis utilis test', () => {
expect(result).toBe(Season.NONE)
})
})
+
+ describe('getChallengeTitleWithLineReturn test', () => {
+ it('should return Simone\\nVEILLE', () => {
+ expect(getChallengeTitleWithLineReturn('CHALLENGE0001')).toBe(
+ 'Simone\nVEILLE'
+ )
+ })
+ it('should return undefined', () => {
+ expect(getChallengeTitleWithLineReturn('CHALLENGE0000')).toBe(undefined)
+ })
+ })
})
diff --git a/src/utils/utils.ts b/src/utils/utils.ts
index a14861d1a..fe01a1317 100644
--- a/src/utils/utils.ts
+++ b/src/utils/utils.ts
@@ -4,6 +4,7 @@ import { FluidState, FluidType } from '../enum/fluid.enum'
import { KonnectorUpdate } from '../enum/konnectorUpdate.enum'
import { DateTime, Interval } from 'luxon'
import { Season } from 'enum/ecogesture.enum'
+import challengeData from '../db/challengeEntity.json'
export function getFluidType(type: string) {
switch (type.toUpperCase()) {
@@ -223,3 +224,16 @@ export const getSeason = (): Season => {
return Season.NONE
}
}
+
+/**
+ * Returns the challenge title with line return ( \n ). The result is coming from challengeEntity.json
+ * @param userChallengeId EXPLORATION001
+ * @returns Simone\nVEILLE
+ */
+export const getChallengeTitleWithLineReturn = (userChallengeId: string) => {
+ for (const chalModel of challengeData) {
+ if (chalModel._id === userChallengeId) {
+ return chalModel.title_line_return
+ }
+ }
+}
--
GitLab