diff --git a/src/assets/icons/ico/export.svg b/src/assets/icons/ico/export.svg
index 596e78e0a2698c0fd96b5e4bf78d457f73d47057..36d80fec554362ed245149e9d40e7b5983f80152 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 0000000000000000000000000000000000000000..0f29f2d778e5b4a6b64d8ec24f0d5e2584a948b7
--- /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 0fb3cc501600908046de752323123bd30a6ee5b9..0000000000000000000000000000000000000000
--- 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 51f73a92e31dc8a6aefc4459201e19c3513f0383..0000000000000000000000000000000000000000
--- 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 27ba34f5c28ffd3a75bc5be198b0f8498ddea2dc..0000000000000000000000000000000000000000
--- 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 aff18fe54813cc5f5777ce35bf1ecfb93fc533a7..a61d6c5778b01e1eca1dbf6fd1bfadf4c4c15199 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 b633290c9775786a543936c2b65803b7203a755e..0f29f2d778e5b4a6b64d8ec24f0d5e2584a948b7 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 ee9176d302d6698c2eb0ba9126770409e9649997..ca25da039fdcd87347f43df0ebd138f2d06834c2 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 05abf2dc2ff83fe176fd73ed487ccc150e4bd5e3..6dcfbfac60b6b6d5adcdb5d538d2fa558416a633 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 8385a18303fb5ec622f0cd9a04ecb6ffa5bbbc45..7548ee19c779011fc63f6acec0b088af174025f0 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 8167fdb4d761685099968d4a7d07cffa90b124a9..2107b706c1ef66c13577507b7a95e597a5622bb4 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 4a3f1ec5a807d478013c74e4c08b4f68e381294a..30824bec53818fbc47886dca93e74a4a7a47732b 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 94e0b0b6e15183bafca04028e2cb0c69b2c73447..617818b2b59a750ed9eceb4fa8a955c961887f17 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 f1465899023a2716a54d40fc243024e660bc0b9d..ffd6593c0d8b512ce5929b90c9a2db1d7dd0f613 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 298a5c2bfe4916330cc53e4ba4ba86ac28c0a5c5..63a26ff9dc3254d077c3fd4369785914bb54d95c 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 911ad8aafb4179d1b28446a183eeb8fa4c10bb85..aed2d7c32e5144ba4da88082915aea8c158b0ab8 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 74c094636db04e5a10f59194ff0b4d07649d38f5..5ad7f626d5a2bb3b14241444eb7faf726bc53254 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 2145bae9d39386f9e74d1644b937a4edeb84d50a..980beac580f7ef4b6425b2c9dd910293c63685ff 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 25388104f9af31a5870a45002f7c9b249acecd68..54c9d6b686c1b4a53ec3167e7494f4461607d91c 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 22c9a2f9d376cfc4da5c088bf102268b51593210..658306cec60a835795aaca679cacfc2bf1d20c0b 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 d5ad1daa2354ff346042b918a3418ec3194e6265..eaf5718d192cf3e11a74c324d43783f8b41eee51 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 ff1a9be37f62505fd20e7b875e84fa34b3ff37b2..54a1e470aabfe564142211875f79cde6e1102c84 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 57d90c6c65c183692181ef93da20a0b32d59f294..fda39f814bb35524b8a1bbc95e8f9e1740ddfdea 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 467bf027d6cb61a93c8df01b7b56a48e6a6addd2..17ca524a3559185768f0969a217df639a0a3bfb8 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 f03683ea5b0f4e48af5fb1d90e269d2969e96de6..2a31e78e55fb7db7e719b575e83b98d1848258e7 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 35d10645f1eb0de597b6f2f9d60cd867728dbf49..279b8f1acfdac4be950684ba27e303a0078009d4 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 73bc4b49d39ffa2dc03467a8aed215217038c1fb..d86d01acafe11d67fc9f1df36201c91f94ce1c19 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 643b024ea098228bd9db084b5cab3abb3c761640..16e4bf2bbf4e99045335009969c4fd28afe40420 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 00af8a20ba27b7d7fa017dbbd9ba83c5b2102999..16d49aef6359d3918a097e20758d85aa67ff936c 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 18cafb63c82946dddecdc0fc39ea7df5fb4fa911..c542baeb0a557ed1899f306b8865ceb285ca93fa 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 b787378c76622ff62741ee16c410d208edd89138..077c1eed988fa2c8797b9610d87350a3b3eefd71 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 05f9f3cf7953ef73a7f3b1e53021c0aea41dff43..c09e4e0498c885a3c6766ebc494ae6fa18994dc5 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 ad6c92b1efe5377c455bb714d02db5bfcb985c76..4d6d99ca21929de48c0845070944a44c21130222 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 501534cc2b6d0885885cd91ee5164a26d521aa3e..58f38c24f8d9340a9262a223760fbc501f7122e3 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 6a0b07182a582a57ce43b1b51c80e3605fa7e8b6..1e95283c966cc380368f103f3c025e8d47c8c98e 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 9206f18f6160faf74105a212b5c2c27fab9dd00d..4d6106f9e04789dd82d6f8cbefe7092a0206275d 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 640b5afaf5c769bd2604849835c2f73c3c3dec07..555733dccd5512536ecf76bc0b7e04dccf27d5d7 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 2ef624130480c5ac35b124dd23587eabf102dc99..332f7af6592df06e568c62b3402c3e094a1fed37 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 4a16d89fdc7f19f43b105064559cdd2306aca6e7..57ce2cb88b64e55b5352bef9b39941edbf7f8bd3 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 8d1e55337cf1efd4a67abf4d4bf74e09c41bdbc2..f533e291e45e70b4a40709cb7f6b5803fd44954f 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 472d4dfa8f492ba7ad2a7930d42221fbd192cba7..39dbdbdfed93739582710d09cab505c7a170dc8d 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 77c7f732f4a02adc8e90678d12215b2e6f32f15a..8f8616872dbadd4abe525f2482831a8fa9c82ff4 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 105d65d2f990f479080fce8317f92eff033aad84..2ae3e642845ab2ab2f853c9477519c31f3f7e9d8 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 df907555797df2ce84ce553ff836c1df72ec76da..0723f105cc5aaf29e6d48b123cabc995fb9f0483 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 ba259603d494ed79dad9424893fe9615bcb92e55..1509fc50cd6ec2eb4167e6506e57104c7ebc359e 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 47a5a307c4516f6743d0839601c49157951a8d04..3a469698acd1c2763813fac605baae53afe10cfe 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 4cfbd9ed7448d121cc44202e0a4c239a305a980c..58b400875df97adae6f402c919734b5db7e52a09 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 cf86ad49327d5f2bcaa79cb29b616d9f62ee83af..06e3ad554cbe966ffe9837e4eb6b7a66c8f6b6c6 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 c4d14015bda3938d182a0621237e2abfef34032f..06fbb1b9c3ac92f421eb1a7a724c649795acdefe 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 003cadb6181ba568e477c6ce532a38ddbbcac189..3959c2c124e6b67b3760b2b0611c10df36346dbe 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 876ce05c38a813210814aa39cf520d48a425be7c..cd552f4159660e8524de2ed84e6783c5495ca25f 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 5c04aa795846b0a105ee401c1e3247985f92fd38..e967775202f6933af1463599f9d09ac5c507b835 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 363995f8e2d743265a3943e76749c788b3dce129..e24cda70ddb652d8d0f1e2b7c8419963468707f6 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 33a7d565bfaac99e4303f85cad02c5b2ad970661..a9bf7ddf2a4138c3847855ae14aad109e93b3009 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 eb9a05c7af1bccfdb24a7fddf675cce02f0e793c..a1c48112ae9c9d68b5c625d9005b54f60f879500 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 0608c2cbff1ec6926d2f64439cad540c200eea1a..b85d44272a53171aa78cf82ecf2f71bd1597f69b 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 048cdc97015e7ed82bff037ba6e47a057865cf9b..4534723f9a741ea5d3931c22c51d4de98e05dde6 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 790d0a8694e373b808eb51c673ff8bfb04ec8c1e..a8c0710add127ab2dc8b1356da8b59c0237200c9 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 c8a41ec42eee1cf897eec933bae215c7fdf9132b..65f25650d9567ae38205b37030c9afe96fdd005c 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 8c4fd0e4e06b89006ea7b96588380bca4baecd9a..d12000478ec823eb95a12a3ab1736ea1755ad54e 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 c7d720aadc9a2f4fc94467cf0143811b32cb061a..cfda80f6d0607587eba13b20c72c0ba039aa4427 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 354840a88344a0acb36fdd70c1f98a31b8ab0b8b..b53334afcc1db5a83ce896cecdd02dd706592d6d 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 a5bab7174f8dcf8572ef1c1cf1b0aa365aa22ee8..974a18400b5e12532a1365533cb38ce87e3d198b 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 fb7a468e5662544707aeb1c477812a52bc7e45b7..76039f6ff8a063b297a93b7005a1af1f6bdcb503 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 f6bbc82d9918194147df543af36baae722c6bde9..0d32300e771140ca2d521e080d2d43cbce2f8161 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 a14861d1aa25c1440e11c8d2763ae0b3f8ee31fb..fe01a13177d5fd7037a3e6b45ec37eaccb634cdc 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
+ }
+ }
+}