diff --git a/config.json b/config.json
index dc13d0c45ae0c91d46104a4010ef22c20ffb3663..256bae08239f87fa2fbfa29dc817795bd9d376fc 100644
--- a/config.json
+++ b/config.json
@@ -10,7 +10,7 @@
"type": "ELECTRICITY",
"oauth": true,
"slug": "enedisgrandlyon",
- "cron": "0 30 8 * * *"
+ "cron": "0 30 10 * * *"
},
"siteLink": "https://mon-compte-client.enedis.fr/"
},
diff --git a/manifest.webapp b/manifest.webapp
index 55d877fe577a25a3709b923ae387c556633b8262..ace2ba771aa87143334f15f0afe2bacb0dce0333 100644
--- a/manifest.webapp
+++ b/manifest.webapp
@@ -3,7 +3,7 @@
"slug": "ecolyo",
"icon": "icon.svg",
"categories": ["energy"],
- "version": "0.1.6",
+ "version": "0.1.7",
"licence": "AGPL-3.0",
"editor": "Métropole de Lyon",
"default_locale": "fr",
diff --git a/package.json b/package.json
index a7875687fa3301a91b601da8c92b3fabf0bba464..ba136bbba7c3b9f6320652eb22e7f1e516a7868b 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "ecolyo",
- "version": "0.1.6",
+ "version": "0.1.7",
"scripts": {
"tx": "tx pull --all || true",
"lint": "yarn lint:js && yarn lint:styles",
diff --git a/src/assets/icons/ico/feedbacks.svg b/src/assets/icons/ico/feedbacks.svg
new file mode 100644
index 0000000000000000000000000000000000000000..0fb3cc501600908046de752323123bd30a6ee5b9
--- /dev/null
+++ b/src/assets/icons/ico/feedbacks.svg
@@ -0,0 +1,13 @@
+<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/warning-yellow.svg b/src/assets/icons/ico/warning-yellow.svg
new file mode 100644
index 0000000000000000000000000000000000000000..953e1848ed0aed97f671e4e0db36ae4591204e45
--- /dev/null
+++ b/src/assets/icons/ico/warning-yellow.svg
@@ -0,0 +1,3 @@
+<svg width="63" height="55" viewBox="0 0 63 55" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M33.3426 1.11412C32.4849 -0.37137 30.3408 -0.371375 29.4832 1.11412L0.301852 51.6576C-0.555796 53.1431 0.516259 55 2.23156 55H60.5942C62.3095 55 63.3816 53.1431 62.5239 51.6576L33.3426 1.11412ZM29.1746 32.5018V20.8405H33.5604V32.5018C33.5604 33.4617 33.505 34.4163 33.3941 35.3657C33.2832 36.3047 33.137 37.2646 32.9555 38.2453H29.7795C29.598 37.2646 29.4518 36.3047 29.3409 35.3657C29.23 34.4163 29.1746 33.4617 29.1746 32.5018ZM33.878 42.8463C34.0091 43.1698 34.0747 43.5193 34.0747 43.8949C34.0747 44.2705 34.0091 44.6252 33.878 44.9591C33.7369 45.2825 33.5504 45.5642 33.3185 45.8042C33.0765 46.0441 32.7942 46.2319 32.4715 46.3675C32.1489 46.5032 31.796 46.571 31.4129 46.571C31.0398 46.571 30.692 46.5032 30.3693 46.3675C30.0467 46.2319 29.7644 46.0441 29.5224 45.8042C29.2804 45.5642 29.0939 45.2825 28.9628 44.9591C28.8217 44.6252 28.7511 44.2705 28.7511 43.8949C28.7511 43.5193 28.8217 43.1698 28.9628 42.8463C29.0939 42.5229 29.2804 42.2412 29.5224 42.0013C29.7644 41.7613 30.0467 41.5735 30.3693 41.4379C30.692 41.2918 31.0398 41.2188 31.4129 41.2188C31.796 41.2188 32.1489 41.2918 32.4715 41.4379C32.7942 41.5735 33.0765 41.7613 33.3185 42.0013C33.5504 42.2412 33.7369 42.5229 33.878 42.8463Z" fill="#E3B82A"/>
+</svg>
diff --git a/src/assets/icons/visu/feedback/bug-off.svg b/src/assets/icons/visu/feedback/bug-off.svg
new file mode 100644
index 0000000000000000000000000000000000000000..d21ddba3b02e3b28031295a6e258405283ecc8e5
--- /dev/null
+++ b/src/assets/icons/visu/feedback/bug-off.svg
@@ -0,0 +1,9 @@
+<svg width="36" height="37" viewBox="0 0 36 37" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.97661 26.7152C5.13891 26.3949 5.11375 25.219 5.93697 24.8632L16.771 20.1806C16.9957 20.0835 17.2482 20.0722 17.4808 20.1488L30.0566 24.2942C30.8752 24.564 30.9918 25.6737 30.2473 26.1078L21.6606 31.1144C20.6145 31.7243 19.3484 31.8275 18.2174 31.3951L5.97661 26.7152Z" fill="#B4B4B4"/>
+<path d="M19.2733 4.65094C18.95 3.78302 17.7224 3.78302 17.3991 4.65094L9.68188 25.0531C12.2099 25.6385 15.4927 26.5 18.1759 26.5C20.8886 26.5 24.214 25.625 26.7528 25.0339L19.2733 4.65094Z" fill="#B4B4B4"/>
+<path d="M22.9592 26.4976L18.1741 4.01274C18.611 3.94353 19.089 4.15626 19.2733 4.65094L26.7528 25.0339C25.5715 25.7071 24.2796 26.231 22.9592 26.4976Z" fill="#808080"/>
+<path d="M21.25 10.0216C20.2036 10.157 19.1369 10.25 18.1819 10.25C17.3022 10.25 16.3277 10.1711 15.3618 10.0528L13.9906 13.6778C15.2469 13.862 16.6868 14 18.1819 14C19.7598 14 21.2762 13.8463 22.5802 13.6467L21.25 10.0216Z" fill="white"/>
+<path d="M21.2443 10.0223L22.5746 13.6476C21.8543 13.7577 21.0693 13.8538 20.2451 13.9177L19.4682 10.2022C20.0506 10.1621 20.6507 10.099 21.2443 10.0223Z" fill="#DCDBDB"/>
+<path d="M23.681 16.7701C22.0243 16.9842 19.688 17.3861 18.1231 17.3861C16.6094 17.3861 14.4316 16.9744 12.8193 16.7701L11.41 20.2418C12.8193 20.7917 15.3285 21.273 18.1231 21.273C21.1031 21.273 23.2342 20.9292 25.0903 20.5511L23.681 16.7701Z" fill="white"/>
+<path d="M21.7439 21.0858L20.9213 17.1515C21.4212 17.0866 21.9232 17.0151 22.4038 16.9467C22.8549 16.8825 23.2872 16.821 23.681 16.7701L25.0903 20.5511C24.0857 20.7558 23.0006 20.9503 21.7439 21.0858Z" fill="#DCDBDB"/>
+</svg>
diff --git a/src/assets/icons/visu/feedback/bug-on.svg b/src/assets/icons/visu/feedback/bug-on.svg
new file mode 100644
index 0000000000000000000000000000000000000000..814e57f55554f3dd4dd4b71f9a679ac2c366d053
--- /dev/null
+++ b/src/assets/icons/visu/feedback/bug-on.svg
@@ -0,0 +1,11 @@
+<svg width="36" height="37" viewBox="0 0 36 37" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.97661 26.7152C5.13891 26.3949 5.11375 25.219 5.93697 24.8632L16.771 20.1806C16.9957 20.0835 17.2482 20.0722 17.4808 20.1488L30.0566 24.2942C30.8752 24.564 30.9918 25.6737 30.2473 26.1078L21.6606 31.1144C20.6145 31.7243 19.3484 31.8275 18.2174 31.3951L5.97661 26.7152Z" fill="#F1933B"/>
+<path d="M5.54136 25.2229C5.64668 25.3588 5.7919 25.471 5.97664 25.5416L18.2174 30.2215C19.3485 30.6539 20.6145 30.5507 21.6606 29.9408L30.2473 24.9342C30.3643 24.8661 30.46 24.7812 30.535 24.6855C30.8799 25.1317 30.8065 25.8388 30.2473 26.1649L21.6606 31.1714C20.6145 31.7813 19.3485 31.8846 18.2174 31.4521L5.97664 26.7723C5.30835 26.5168 5.15719 25.7167 5.54136 25.2229Z" fill="#D06400"/>
+<path d="M19.2733 4.65094C18.95 3.78302 17.7224 3.78302 17.3991 4.65094L9.68188 25.0531C12.2099 25.6385 15.4927 26.5 18.1759 26.5C20.8886 26.5 24.214 25.625 26.7528 25.0339L19.2733 4.65094Z" fill="#F1933B"/>
+<path d="M22.9592 26.4976L18.1741 4.01274C18.611 3.94353 19.089 4.15626 19.2733 4.65094L26.7528 25.0339C25.5715 25.7071 24.2796 26.231 22.9592 26.4976Z" fill="#D06400"/>
+<path d="M26.5683 27.7007L22.9935 26.532L24.9004 22.5316C26.4357 23.1274 29.1854 24.0045 29.5037 24.0915C30.3836 24.3321 30.968 24.7446 30.7273 25.5352L26.5683 27.7007Z" fill="#D06400"/>
+<path d="M21.25 10.0216C20.2036 10.157 19.1369 10.25 18.1819 10.25C17.3022 10.25 16.3277 10.1711 15.3618 10.0528L13.9906 13.6778C15.2469 13.862 16.6868 14 18.1819 14C19.7598 14 21.2762 13.8463 22.5802 13.6467L21.25 10.0216Z" fill="white"/>
+<path d="M21.2443 10.0223L22.5746 13.6476C21.8543 13.7577 21.0693 13.8538 20.2451 13.9177L19.4682 10.2022C20.0506 10.1621 20.6507 10.099 21.2443 10.0223Z" fill="#DCDBDB"/>
+<path d="M23.681 16.7701C22.0243 16.9842 19.688 17.3861 18.1231 17.3861C16.6094 17.3861 14.4316 16.9744 12.8193 16.7701L11.41 20.2418C12.8193 20.7917 15.3285 21.273 18.1231 21.273C21.1031 21.273 23.2342 20.9292 25.0903 20.5511L23.681 16.7701Z" fill="white"/>
+<path d="M21.7439 21.0858L20.9213 17.1515C21.4212 17.0866 21.9232 17.0151 22.4038 16.9467C22.8549 16.8825 23.2872 16.821 23.681 16.7701L25.0903 20.5511C24.0857 20.7558 23.0006 20.9503 21.7439 21.0858Z" fill="#DCDBDB"/>
+</svg>
diff --git a/src/assets/icons/visu/feedback/idea-off.svg b/src/assets/icons/visu/feedback/idea-off.svg
new file mode 100644
index 0000000000000000000000000000000000000000..32b8fdb2b92443fbc10d0d24b08f3ab00e4a2163
--- /dev/null
+++ b/src/assets/icons/visu/feedback/idea-off.svg
@@ -0,0 +1,10 @@
+<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.0437 11.9096L15.2927 10.8732L15.8694 10.6476C15.837 10.6916 15.8145 10.7324 15.7989 10.7669L15.7902 10.7913C15.9369 10.8764 16.1359 10.9737 16.3749 11.0745C16.8532 11.2763 17.4272 11.465 17.9323 11.5838C18.4925 11.7156 19.2387 11.8957 19.9671 12.1926C20.693 12.4885 21.4761 12.9294 22.0668 13.6295C22.2027 13.7905 22.3212 14.0163 22.3412 14.2962C22.3423 14.3126 22.3431 14.3288 22.3436 14.3449L19.5338 14.1875C19.4312 14.1378 19.3239 14.0902 19.2121 14.0446C18.6444 13.8132 18.0369 13.6631 17.4743 13.5307C16.8566 13.3854 16.1759 13.1613 15.5975 12.9173C15.3081 12.7952 15.0282 12.6614 14.787 12.5215C14.5695 12.3954 14.2943 12.2146 14.0952 11.9756C14.0771 11.9539 14.06 11.9319 14.0437 11.9096Z" fill="#B4B4B4"/>
+<path d="M13.8501 15.3497L15.0991 14.3133L15.6758 14.0876C15.6434 14.1317 15.6209 14.1725 15.6053 14.207L15.5966 14.2313C15.7433 14.3164 15.9423 14.4138 16.1813 14.5146C16.6596 14.7164 17.2336 14.9051 17.7387 15.0239C18.2989 15.1557 19.0451 15.3357 19.7735 15.6326C20.4994 15.9286 21.2825 16.3694 21.8732 17.0695C22.0091 17.2305 22.1276 17.4563 22.1476 17.7363C22.1487 17.7527 22.1495 17.7689 22.15 17.7849L19.3402 17.6276C19.2376 17.5778 19.1303 17.5302 19.0185 17.4847C18.4508 17.2533 17.8432 17.1031 17.2806 16.9707C16.663 16.8254 15.9822 16.6013 15.4039 16.3573C15.1145 16.2352 14.8346 16.1014 14.5934 15.9616C14.3759 15.8354 14.1007 15.6547 13.9016 15.4156C13.8835 15.394 13.8664 15.372 13.8501 15.3497Z" fill="#B4B4B4"/>
+<path d="M14.2738 12.2267C14.4205 11.7493 14.7741 11.4131 15.0318 11.21C15.3711 10.9425 15.7883 10.7171 16.1933 10.5322C16.9913 10.1681 17.9124 9.88521 18.5612 9.729L20.8972 8.95028C20.9619 8.92872 21.0272 8.91413 21.0924 8.90611C21.5465 8.69431 21.7795 8.17087 21.6172 7.68402C21.4426 7.16008 20.8762 6.87694 20.3523 7.0516L18.0163 7.83032C17.3675 7.98653 16.4463 8.26937 15.6484 8.63357C15.2434 8.81841 14.8262 9.04384 14.4868 9.31135C14.1845 9.54969 13.75 9.97133 13.6728 10.5892C13.582 11.3165 13.9089 11.8617 14.2738 12.2267Z" fill="white"/>
+<path d="M16.5174 13.6124C17.2324 13.3155 18.0011 13.0844 18.5644 12.9487L20.8264 12.1947C21.2621 11.9748 21.4822 11.4629 21.3233 10.9861C21.1486 10.4622 20.5823 10.1791 20.0584 10.3537L17.7223 11.1324C17.0736 11.2887 16.1524 11.5715 15.3544 11.9357C14.9494 12.1205 14.5323 12.346 14.1929 12.6135C13.8906 12.8518 13.456 13.2735 13.3789 13.8913C13.2685 14.7752 13.7751 15.3902 14.2172 15.7395C14.2183 15.7289 14.2196 15.7183 14.2209 15.7076C14.2981 15.0897 14.7326 14.6681 15.0349 14.4298C15.2838 14.2336 15.5745 14.06 15.8716 13.9085C15.9664 13.8584 16.071 13.8071 16.1849 13.7551C16.2924 13.706 16.4038 13.6584 16.5174 13.6124Z" fill="white"/>
+<path d="M22.2514 14.1671C22.4201 14.693 22.1305 15.2561 21.6046 15.4248L18.0671 16.5595L18.0289 16.5685C17.4605 16.7028 16.6063 16.9539 15.9007 17.2604C15.6017 17.3903 15.3607 17.5169 15.1879 17.6312L13.7332 18.034C13.5132 18.0949 13.3275 18.2266 13.1981 18.4003C13.065 18.1146 12.9935 17.7768 13.0422 17.3866C13.1221 16.7469 13.5917 16.3231 13.8982 16.094C14.2504 15.8307 14.6839 15.6085 15.1038 15.426C15.9344 15.0652 16.8877 14.7853 17.53 14.6314L20.9938 13.5203C21.5197 13.3517 22.0827 13.6412 22.2514 14.1671Z" fill="white"/>
+<path d="M13 18.9977C13 18.5482 13.2999 18.1539 13.7332 18.034L21.7332 15.8189C22.3702 15.6426 23 16.1217 23 16.7827C23 16.7827 23 20.4379 23 21.4616C23 22.4852 21.4951 24.2354 21.0328 24.2354C20.5705 24.2354 15.5512 24.2354 15.1549 24.2354C14.7587 24.2354 13 22.4852 13 21.4616C13 20.4379 13 18.9977 13 18.9977Z" fill="#B4B4B4"/>
+<rect x="15.0559" y="24.7307" width="6.10894" height="2" rx="1" fill="#808080"/>
+<rect x="15.0559" y="26.9102" width="6.10894" height="2" rx="1" fill="#808080"/>
+</svg>
diff --git a/src/assets/icons/visu/feedback/idea-on.svg b/src/assets/icons/visu/feedback/idea-on.svg
new file mode 100644
index 0000000000000000000000000000000000000000..6823c1c6b20727a78f5b65c9430a80b23d73c862
--- /dev/null
+++ b/src/assets/icons/visu/feedback/idea-on.svg
@@ -0,0 +1,21 @@
+<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.0437 11.9096L15.2927 10.8732L15.8694 10.6476C15.837 10.6916 15.8145 10.7324 15.7989 10.7669L15.7902 10.7913C15.9369 10.8764 16.1359 10.9737 16.3749 11.0745C16.8532 11.2763 17.4272 11.465 17.9323 11.5838C18.4925 11.7156 19.2387 11.8957 19.9671 12.1926C20.693 12.4885 21.4761 12.9294 22.0668 13.6295C22.2027 13.7905 22.3212 14.0163 22.3412 14.2962C22.3423 14.3126 22.3431 14.3288 22.3436 14.3449L19.5338 14.1875C19.4312 14.1378 19.3239 14.0902 19.2121 14.0446C18.6444 13.8132 18.0369 13.6631 17.4743 13.5307C16.8566 13.3854 16.1759 13.1613 15.5975 12.9173C15.3081 12.7952 15.0282 12.6614 14.787 12.5215C14.5695 12.3954 14.2943 12.2146 14.0952 11.9756C14.0771 11.9539 14.06 11.9319 14.0437 11.9096Z" fill="#E4A400"/>
+<path d="M13.8501 15.3497L15.0991 14.3133L15.6758 14.0876C15.6434 14.1317 15.6209 14.1725 15.6053 14.207L15.5966 14.2313C15.7433 14.3164 15.9423 14.4138 16.1813 14.5146C16.6596 14.7164 17.2336 14.9051 17.7387 15.0239C18.2989 15.1557 19.0451 15.3357 19.7735 15.6326C20.4994 15.9286 21.2825 16.3694 21.8732 17.0695C22.0091 17.2305 22.1276 17.4563 22.1476 17.7363C22.1487 17.7527 22.1495 17.7689 22.15 17.7849L19.3402 17.6276C19.2376 17.5778 19.1303 17.5302 19.0185 17.4847C18.4508 17.2533 17.8432 17.1031 17.2806 16.9707C16.663 16.8254 15.9822 16.6013 15.4039 16.3573C15.1145 16.2352 14.8346 16.1014 14.5934 15.9616C14.3759 15.8354 14.1007 15.6547 13.9016 15.4156C13.8835 15.394 13.8664 15.372 13.8501 15.3497Z" fill="#E4A400"/>
+<path d="M14.2738 12.2267C14.4205 11.7493 14.7741 11.4131 15.0318 11.21C15.3711 10.9425 15.7883 10.7171 16.1933 10.5322C16.9913 10.1681 17.9124 9.88521 18.5612 9.729L20.8972 8.95028C20.9619 8.92872 21.0272 8.91413 21.0924 8.90611C21.5465 8.69431 21.7795 8.17087 21.6172 7.68402C21.4426 7.16008 20.8762 6.87694 20.3523 7.0516L18.0163 7.83032C17.3675 7.98653 16.4463 8.26937 15.6484 8.63357C15.2434 8.81841 14.8262 9.04384 14.4868 9.31135C14.1845 9.54969 13.75 9.97133 13.6728 10.5892C13.582 11.3165 13.9089 11.8617 14.2738 12.2267Z" fill="#FFDC5F"/>
+<path d="M16.5174 13.6124C17.2324 13.3155 18.0011 13.0844 18.5644 12.9487L20.8264 12.1947C21.2621 11.9748 21.4822 11.4629 21.3233 10.9861C21.1486 10.4622 20.5823 10.1791 20.0584 10.3537L17.7223 11.1324C17.0736 11.2887 16.1524 11.5715 15.3544 11.9357C14.9494 12.1205 14.5323 12.346 14.1929 12.6135C13.8906 12.8518 13.456 13.2735 13.3789 13.8913C13.2685 14.7752 13.7751 15.3902 14.2172 15.7395C14.2183 15.7289 14.2196 15.7183 14.2209 15.7076C14.2981 15.0897 14.7326 14.6681 15.0349 14.4298C15.2838 14.2336 15.5745 14.06 15.8716 13.9085C15.9664 13.8584 16.071 13.8071 16.1849 13.7551C16.2924 13.706 16.4038 13.6584 16.5174 13.6124Z" fill="#FFDC5F"/>
+<path d="M22.2514 14.1671C22.4201 14.693 22.1305 15.2561 21.6046 15.4248L18.0671 16.5595L18.0289 16.5685C17.4605 16.7028 16.6063 16.9539 15.9007 17.2604C15.6017 17.3903 15.3607 17.5169 15.1879 17.6312L13.7332 18.034C13.5132 18.0949 13.3275 18.2266 13.1981 18.4003C13.065 18.1146 12.9935 17.7768 13.0422 17.3866C13.1221 16.7469 13.5917 16.3231 13.8982 16.094C14.2504 15.8307 14.6839 15.6085 15.1038 15.426C15.9344 15.0652 16.8877 14.7853 17.53 14.6314L20.9938 13.5203C21.5197 13.3517 22.0827 13.6412 22.2514 14.1671Z" fill="#FFDC5F"/>
+<path d="M13 18.9977C13 18.5482 13.2999 18.1539 13.7332 18.034L21.7332 15.8189C22.3702 15.6426 23 16.1217 23 16.7827C23 16.7827 23 20.4379 23 21.4616C23 22.4852 21.4951 24.2354 21.0328 24.2354C20.5705 24.2354 15.5512 24.2354 15.1549 24.2354C14.7587 24.2354 13 22.4852 13 21.4616C13 20.4379 13 18.9977 13 18.9977Z" fill="#F4F4F4"/>
+<path d="M13.8179 23.1007C14.3338 23.7285 14.9417 24.2354 15.155 24.2354H21.0328C21.4951 24.2354 23 22.4852 23 21.4616V16.7827C23 16.1217 22.3702 15.6426 21.7332 15.8189L21.669 15.8367V20.327C21.669 21.3507 20.164 23.1008 19.7017 23.1008H13.8239L13.8179 23.1007Z" fill="#DDDDDD"/>
+<rect x="15.0559" y="24.7307" width="6.10894" height="2" rx="1" fill="#C4C4C4"/>
+<path d="M15.1177 25.384C15.0777 25.4921 15.0559 25.6088 15.0559 25.7308C15.0559 26.283 15.5036 26.7308 16.0559 26.7308H20.1648C20.7171 26.7308 21.1648 26.283 21.1648 25.7308C21.1648 25.6088 21.143 25.4921 21.1031 25.384C20.9621 25.7654 20.5952 26.0373 20.1648 26.0373H16.0559C15.6255 26.0373 15.2587 25.7654 15.1177 25.384Z" fill="#9C9C9C"/>
+<ellipse cx="16.9216" cy="25.4241" rx="0.941111" ry="0.429269" fill="white"/>
+<rect x="15.0559" y="26.9102" width="6.10894" height="2" rx="1" fill="#C4C4C4"/>
+<path d="M15.1177 27.5635C15.0777 27.6715 15.0559 27.7883 15.0559 27.9102C15.0559 28.4625 15.5036 28.9102 16.0559 28.9102H20.1648C20.7171 28.9102 21.1648 28.4625 21.1648 27.9102C21.1648 27.7883 21.143 27.6715 21.1031 27.5635C20.9621 27.9448 20.5952 28.2167 20.1648 28.2167H16.0559C15.6255 28.2167 15.2587 27.9448 15.1177 27.5635Z" fill="#9C9C9C"/>
+<ellipse cx="16.9216" cy="27.6036" rx="0.941111" ry="0.429269" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8 13.75C8 14.1642 7.66421 14.5 7.25 14.5L3.75 14.5C3.33579 14.5 3 14.1642 3 13.75C3 13.3358 3.33579 13 3.75 13L7.25 13C7.66421 13 8 13.3358 8 13.75Z" fill="#FFDC5F"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M27.6983 13.75C27.6983 14.1642 28.0341 14.5 28.4483 14.5L31.9483 14.5C32.3625 14.5 32.6983 14.1642 32.6983 13.75C32.6983 13.3358 32.3625 13 31.9483 13L28.4483 13C28.0341 13 27.6983 13.3358 27.6983 13.75Z" fill="#FFDC5F"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.40407 9.65124C8.24158 10.0323 7.80099 10.2094 7.41998 10.0469L4.20051 8.67396C3.81949 8.51148 3.64234 8.07088 3.80483 7.68987C3.96731 7.30886 4.4079 7.1317 4.78892 7.29419L8.00839 8.66715C8.3894 8.82963 8.56655 9.27023 8.40407 9.65124Z" fill="#FFDC5F"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M27.2942 9.65124C27.4567 10.0323 27.8973 10.2094 28.2783 10.0469L31.4978 8.67396C31.8788 8.51148 32.056 8.07088 31.8935 7.68987C31.731 7.30886 31.2904 7.1317 30.9094 7.29419L27.6899 8.66715C27.3089 8.82963 27.1317 9.27023 27.2942 9.65124Z" fill="#FFDC5F"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.40407 17.6899C8.24158 17.3089 7.80099 17.1317 7.41998 17.2942L4.20051 18.6672C3.81949 18.8296 3.64234 19.2702 3.80483 19.6513C3.96731 20.0323 4.4079 20.2094 4.78892 20.0469L8.00839 18.674C8.3894 18.5115 8.56655 18.0709 8.40407 17.6899Z" fill="#FFDC5F"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M27.2942 17.6899C27.4567 17.3089 27.8973 17.1317 28.2783 17.2942L31.4978 18.6672C31.8788 18.8296 32.056 19.2702 31.8935 19.6513C31.731 20.0323 31.2904 20.2094 30.9094 20.0469L27.6899 18.674C27.3089 18.5115 27.1317 18.0709 27.2942 17.6899Z" fill="#FFDC5F"/>
+</svg>
diff --git a/src/assets/icons/visu/feedback/other-off.svg b/src/assets/icons/visu/feedback/other-off.svg
new file mode 100644
index 0000000000000000000000000000000000000000..b3e4074aceb4157b4f18f8055ae98bc080b869eb
--- /dev/null
+++ b/src/assets/icons/visu/feedback/other-off.svg
@@ -0,0 +1,5 @@
+<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="9.5" cy="18.5" r="2.5" fill="#808080"/>
+<circle cx="18.5" cy="18.5" r="2.5" fill="#808080"/>
+<circle cx="27.5" cy="18.5" r="2.5" fill="#808080"/>
+</svg>
diff --git a/src/assets/icons/visu/feedback/other-on.svg b/src/assets/icons/visu/feedback/other-on.svg
new file mode 100644
index 0000000000000000000000000000000000000000..b80537bfe25a16c15ed29f7081d725430da3c673
--- /dev/null
+++ b/src/assets/icons/visu/feedback/other-on.svg
@@ -0,0 +1,8 @@
+<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="9.5" cy="18.5" r="2.5" fill="#F1CB03"/>
+<circle cx="9.93695" cy="17.8125" r="1" fill="white" fill-opacity="0.8"/>
+<circle cx="18.5" cy="18.5" r="2.5" fill="#F1CB03"/>
+<circle cx="18.937" cy="17.8125" r="1" fill="white" fill-opacity="0.8"/>
+<circle cx="27.5" cy="18.5" r="2.5" fill="#F1CB03"/>
+<circle cx="27.937" cy="17.8125" r="1" fill="white" fill-opacity="0.8"/>
+</svg>
diff --git a/src/components/CommonKit/IconButton/StyledIconBorderedButton.tsx b/src/components/CommonKit/IconButton/StyledIconBorderedButton.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..b912d5cbf00c948494f5879725deb6c4a96f0343
--- /dev/null
+++ b/src/components/CommonKit/IconButton/StyledIconBorderedButton.tsx
@@ -0,0 +1,64 @@
+import React from 'react'
+import { withStyles } from '@material-ui/core/styles'
+import IconButton, { IconButtonProps } from '@material-ui/core/IconButton'
+import StyledIconProps from 'components/CommonKit/Icon/StyledIcon'
+
+const IconButtonBase = withStyles({
+ root: {
+ outline: 'none !important',
+ borderRadius: '4px',
+ width: '100%',
+ padding: 'unset',
+ },
+ label: {
+ display: 'flex',
+ flexDirection: 'column',
+ },
+})(IconButton)
+
+const SelectedIconButtonBase = withStyles({
+ root: {
+ border: '1px solid var(--multiColor)',
+ background: 'linear-gradient(180deg, #323339 0%, #25262B 100%)',
+ boxShadow: '0px 4px 16px rgba(0, 0, 0, 0.55)',
+ },
+})(IconButtonBase)
+
+const UnselectedIconButtonBase = withStyles({
+ root: {
+ border: '1px solid var(--greyDark)',
+ },
+})(IconButtonBase)
+
+interface StyledIconBorderedButtonProps extends IconButtonProps {
+ icon: string
+ size?: number
+ selected?: boolean
+ children?: React.ReactNode
+}
+
+const StyledIconBorderedButton: React.ComponentType<StyledIconBorderedButtonProps> = ({
+ icon,
+ size = 16,
+ selected = false,
+ children = null,
+ ...props
+}: StyledIconBorderedButtonProps) => {
+ return (
+ <>
+ {selected ? (
+ <SelectedIconButtonBase {...props}>
+ <StyledIconProps icon={icon} size={size} />
+ {children}
+ </SelectedIconButtonBase>
+ ) : (
+ <UnselectedIconButtonBase {...props}>
+ <StyledIconProps icon={icon} size={size} />
+ {children}
+ </UnselectedIconButtonBase>
+ )}
+ </>
+ )
+}
+
+export default StyledIconBorderedButton
diff --git a/src/components/CommonKit/Modal/Modal.tsx b/src/components/CommonKit/Modal/Modal.tsx
index 444ea3a70d9e2df1abce76bc117aaef1139e9f1a..89e631ef88795db63bd9bda7a5b238f02c87b9fb 100644
--- a/src/components/CommonKit/Modal/Modal.tsx
+++ b/src/components/CommonKit/Modal/Modal.tsx
@@ -1,4 +1,5 @@
-import React, { ReactNode } from 'react'
+import React, { useEffect, useContext, ReactNode } from 'react'
+import { AppContext } from 'components/Contexts/AppContextProvider'
import StyledIconButton from 'components/CommonKit/IconButton/StyledIconButton'
import CloseIcon from 'assets/icons/ico/close.svg'
@@ -7,7 +8,7 @@ interface ModalProps {
border?: boolean
handleCloseClick: () => void
children: ReactNode
- yellowBorder?: string
+ yellowBorder?: boolean
}
const Modal: React.FC<ModalProps> = ({
@@ -17,7 +18,21 @@ const Modal: React.FC<ModalProps> = ({
children,
yellowBorder,
}: ModalProps) => {
- const yellow = yellowBorder ? yellowBorder : ''
+ const yellow = yellowBorder ? 'yellow-border' : ''
+ const { disableBackgroundScroll } = useContext(AppContext)
+
+ useEffect(() => {
+ open ? disableBackgroundScroll(true) : disableBackgroundScroll(false)
+ return () => {
+ disableBackgroundScroll(false)
+ }
+ }, [open])
+
+ const closeClick = () => {
+ disableBackgroundScroll(false)
+ handleCloseClick()
+ }
+
return (
<div className={`modal-overlay ${open ? 'modal-opened' : ''}`}>
<div
@@ -26,7 +41,7 @@ const Modal: React.FC<ModalProps> = ({
<StyledIconButton
className="modal-close-button"
icon={CloseIcon}
- onClick={handleCloseClick}
+ onClick={closeClick}
/>
<div className="modal-content">{children}</div>
</div>
diff --git a/src/components/ContainerComponents/CozyBar/CozyBar.tsx b/src/components/ContainerComponents/CozyBar/CozyBar.tsx
index cb48b5f2e3d21855568165ea12dbd4d9b3431c26..4a4769f71698f05d007ef75371c52b618c502513 100644
--- a/src/components/ContainerComponents/CozyBar/CozyBar.tsx
+++ b/src/components/ContainerComponents/CozyBar/CozyBar.tsx
@@ -1,10 +1,11 @@
-import React, { useState, useEffect, useRef, useContext } from 'react'
+import React, { useContext } from 'react'
import { ScreenType } from 'enum/screen.enum'
import { history } from 'components/ContainerComponents/ViewContainer/ViewContainer'
import { translate } from 'cozy-ui/react/I18n'
-import StyledIconButton from 'components/CommonKit/IconButton/StyledIconButton'
import BackArrowIcon from 'assets/icons/ico/back-arrow.svg'
+import FeedbacksIcon from 'assets/icons/ico/feedbacks.svg'
import { AppContext } from 'components/Contexts/AppContextProvider'
+import StyledIconButton from 'components/CommonKit/IconButton/StyledIconButton'
interface CozyBarProps {
titleKey?: string
@@ -17,13 +18,17 @@ const CozyBar = ({
displayBackArrow = false,
t,
}: CozyBarProps) => {
- const { BarLeft, BarCenter } = cozy.bar
- const { screenType } = useContext(AppContext)
+ const { BarLeft, BarCenter, BarRight } = cozy.bar
+ const { screenType, setFeedbackOpened } = useContext(AppContext)
const handleClickBack = () => {
history.goBack()
}
+ const handleClickFeedbacks = () => {
+ setFeedbackOpened(true)
+ }
+
const cozyBarCustom = (screen?: ScreenType) => {
if (screen === ScreenType.MOBILE) {
return (
@@ -42,6 +47,14 @@ const CozyBar = ({
<span className="app-title">{t(titleKey)}</span>
</div>
</BarCenter>
+ <BarRight>
+ <StyledIconButton
+ className="cv-button"
+ icon={FeedbacksIcon}
+ size={40}
+ onClick={() => handleClickFeedbacks()}
+ />
+ </BarRight>
</React.Fragment>
)
}
diff --git a/src/components/ContainerComponents/FeedbackContainer/FeedbackContainer.tsx b/src/components/ContainerComponents/FeedbackContainer/FeedbackContainer.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..cbe81713b8cd3328cc8585c6ce63abd08dd0e620
--- /dev/null
+++ b/src/components/ContainerComponents/FeedbackContainer/FeedbackContainer.tsx
@@ -0,0 +1,20 @@
+import React, { useContext } from 'react'
+import { AppContext } from 'components/Contexts/AppContextProvider'
+import FeedbackModal from 'components/ContentComponents/Feedback/FeedbackModal'
+
+const FeedbackContainer: React.FC = () => {
+ const { feedbackIsOpened, setFeedbackOpened } = useContext(AppContext)
+
+ const handleCloseClick = () => {
+ setFeedbackOpened(false)
+ }
+
+ return (
+ <FeedbackModal
+ opened={feedbackIsOpened}
+ handleCloseClick={handleCloseClick}
+ />
+ )
+}
+
+export default FeedbackContainer
diff --git a/src/components/ContainerComponents/Header/Header.tsx b/src/components/ContainerComponents/Header/Header.tsx
index 05c3aee6ecb9606a31db154eb8a0f22faffb57dc..02928413be821220db66039a77508dd5de92d4c8 100644
--- a/src/components/ContainerComponents/Header/Header.tsx
+++ b/src/components/ContainerComponents/Header/Header.tsx
@@ -5,6 +5,7 @@ import { withClient, Client } from 'cozy-client'
import { ScreenType } from 'enum/screen.enum'
import { AppContext } from 'components/Contexts/AppContextProvider'
import BackArrowIcon from 'assets/icons/ico/back-arrow.svg'
+import FeedbacksIcon from 'assets/icons/ico/feedbacks.svg'
import StyledIconButton from 'components/CommonKit/IconButton/StyledIconButton'
interface HeaderProps {
@@ -27,7 +28,7 @@ const Header: React.FC<HeaderProps> = ({
t,
}: HeaderProps) => {
const header = useRef(null)
- const { screenType } = useContext(AppContext)
+ const { screenType, setFeedbackOpened } = useContext(AppContext)
const cozyBarHeight = 48
const headerBottomHeight = 8
@@ -35,6 +36,10 @@ const Header: React.FC<HeaderProps> = ({
history.goBack()
}
+ const handleClickFeedbacks = () => {
+ setFeedbackOpened(true)
+ }
+
useEffect(() => {
if (screenType === ScreenType.MOBILE) {
setHeaderHeight(
@@ -53,35 +58,53 @@ const Header: React.FC<HeaderProps> = ({
<div className="header" ref={header}>
<div className="header-top">
<div className="header-content">
- {textKey && (
- <div
- className={`header-text ${
- screenType === ScreenType.MOBILE
- ? 'text-14-normal-uppercase'
- : 'text-22-bold'
- }`}
- >
- {t(textKey)}
- </div>
- )}
- {desktopTitleKey && (
- <div
- className={`header-text-desktop ${
- screenType === ScreenType.MOBILE
- ? 'text-14-normal-uppercase'
- : 'text-22-bold'
- }`}
- >
- {displayBackArrow && (
- <StyledIconButton
- className="header-back-button"
- icon={BackArrowIcon}
- onClick={() => handleClickBack()}
- />
- )}
- {t(desktopTitleKey)}
- </div>
- )}
+ <div
+ className={
+ !textKey && !desktopTitleKey
+ ? 'header-content-top header-content-top-right'
+ : 'header-content-top'
+ }
+ >
+ {textKey && (
+ <div
+ className={`header-text ${
+ screenType === ScreenType.MOBILE
+ ? 'text-14-normal-uppercase'
+ : 'text-22-bold'
+ }`}
+ >
+ {t(textKey)}
+ </div>
+ )}
+ {desktopTitleKey && (
+ <div
+ className={`header-text-desktop ${
+ screenType === ScreenType.MOBILE
+ ? 'text-14-normal-uppercase'
+ : 'text-22-bold'
+ }`}
+ >
+ {displayBackArrow && (
+ <StyledIconButton
+ className="header-back-button"
+ icon={BackArrowIcon}
+ onClick={() => handleClickBack()}
+ />
+ )}
+ {t(desktopTitleKey)}
+ </div>
+ )}
+ <StyledIconButton
+ className={
+ !textKey && !desktopTitleKey
+ ? 'header-feedbacks-button right'
+ : 'header-feedbacks-button'
+ }
+ icon={FeedbacksIcon}
+ size={40}
+ onClick={() => handleClickFeedbacks()}
+ />
+ </div>
{children}
</div>
</div>
diff --git a/src/components/ContainerComponents/ViewContainer/FinishedChallengeDetailsViewContainer.tsx b/src/components/ContainerComponents/ViewContainer/FinishedChallengeDetailsViewContainer.tsx
index 4dfb491d83fb89d088fb65e6c880b78be957c64f..6b34c83cc892d2df4afa0a03b7613321061948b1 100644
--- a/src/components/ContainerComponents/ViewContainer/FinishedChallengeDetailsViewContainer.tsx
+++ b/src/components/ContainerComponents/ViewContainer/FinishedChallengeDetailsViewContainer.tsx
@@ -34,7 +34,7 @@ const FinishedChallengeDetailsViewContainer: React.FC<FinishedChallengeDetailsVi
const [challenge, setChallenge] = useState<UserChallenge | null>(null)
const [headerHeight, setHeaderHeight] = useState<number>(0)
const [badgeIcon, setBadgeIcon] = useState<any | null>(null)
- const { screenType, toggleBackgroundScroll } = useContext(AppContext)
+ const { screenType } = useContext(AppContext)
async function importRightBadge(id: string, badgeStatus: number) {
// Les png doivent être au format idchallenge-badgestate.png
@@ -56,12 +56,10 @@ const FinishedChallengeDetailsViewContainer: React.FC<FinishedChallengeDetailsVi
const handleClick = (index: number) => {
setChallengeEcogesture(index)
setOpenEcogestureModal(true)
- toggleBackgroundScroll()
}
const handleCloseClick = () => {
setOpenEcogestureModal(false)
- toggleBackgroundScroll()
}
useEffect(() => {
diff --git a/src/components/ContainerComponents/ViewContainer/OngoingChallengeDetailsViewContainer.tsx b/src/components/ContainerComponents/ViewContainer/OngoingChallengeDetailsViewContainer.tsx
index 1d95f0e63226c34a36b4ce9ea9dc563c0a6931d5..5dccdf94b7fd70d0f3a5c3f31f6b2e86a4436301 100644
--- a/src/components/ContainerComponents/ViewContainer/OngoingChallengeDetailsViewContainer.tsx
+++ b/src/components/ContainerComponents/ViewContainer/OngoingChallengeDetailsViewContainer.tsx
@@ -38,11 +38,7 @@ const OngoingChallengeDetailsViewContainer: React.FC<OngoingChallengeDetailsView
const client = props.client
const challengeManager = new ChallengeManager(client)
- const {
- refreshCurrentChallenge,
- screenType,
- toggleBackgroundScroll,
- } = useContext(AppContext)
+ const { refreshCurrentChallenge, screenType } = useContext(AppContext)
const [challengeEcogesture, setChallengeEcogesture] = useState<number>(0)
const [openEcogestureModal, setOpenEcogestureModal] = useState(false)
const [challenge, setChallenge] = useState<UserChallenge | null>(null)
@@ -67,12 +63,10 @@ const OngoingChallengeDetailsViewContainer: React.FC<OngoingChallengeDetailsView
const handleClick = (index: number) => {
setChallengeEcogesture(index)
setOpenEcogestureModal(true)
- toggleBackgroundScroll()
}
const handleCloseClick = () => {
setOpenEcogestureModal(false)
- toggleBackgroundScroll()
}
useEffect(() => {
diff --git a/src/components/ContainerComponents/ViewContainer/ParametersViewContainer.tsx b/src/components/ContainerComponents/ViewContainer/ParametersViewContainer.tsx
index ceaac1930755cece69883ccb913e0faead4c7c5a..a4b973251c128e001891585a7cfe2d2c2f63a978 100644
--- a/src/components/ContainerComponents/ViewContainer/ParametersViewContainer.tsx
+++ b/src/components/ContainerComponents/ViewContainer/ParametersViewContainer.tsx
@@ -5,6 +5,7 @@ import Content from 'components/ContainerComponents/Content/Content'
import KonnectorViewerContainer from 'components/ContainerComponents/KonnectorViewerContainer/KonnectorViewerContainer'
import FAQContainer from 'components/ContainerComponents/FAQContainer/FAQContainer'
import LegalNoticeContainer from 'components/ContainerComponents/LegalNoticeContainer/LegalNoticeContainer'
+import Version from 'components/ContentComponents/Version/Version'
const ParametersViewContainer: React.FC = () => {
const [headerHeight, setHeaderHeight] = useState<number>(0)
@@ -22,6 +23,7 @@ const ParametersViewContainer: React.FC = () => {
<FAQContainer />
<KonnectorViewerContainer isParam={true} />
<LegalNoticeContainer />
+ <Version />
</Content>
</React.Fragment>
)
diff --git a/src/components/ContainerComponents/ViewContainer/ViewContainer.tsx b/src/components/ContainerComponents/ViewContainer/ViewContainer.tsx
index 500f05b0f2d9cb9c7d0e884b581581da88bd7002..d2f2184cbb710559f2fed8b43d6a8ec18f9d8234 100644
--- a/src/components/ContainerComponents/ViewContainer/ViewContainer.tsx
+++ b/src/components/ContainerComponents/ViewContainer/ViewContainer.tsx
@@ -19,6 +19,7 @@ import LockedChallengeDetailsViewContainer from './LockedChallengeDetailsViewCon
import AvailableChallengeDetailsViewContainer from './AvailableChallengeDetailsViewContainer'
import SplashContainer from 'components/ContainerComponents/SplashContainer/SplashContainer'
import LegalNoticeViewContainer from './LegalNoticeViewContainer'
+import FeedbackContainer from 'components/ContainerComponents/FeedbackContainer/FeedbackContainer'
export const history = createBrowserHistory()
@@ -29,6 +30,7 @@ export const ViewContainer = () => {
<AppContextProvider>
<Navbar />
<Main>
+ <FeedbackContainer />
<Content className="app-content">
<ScrollToTop>
<Switch>
diff --git a/src/components/ContainerComponents/WelcomeModalContainer/WelcomeModalContainer.tsx b/src/components/ContainerComponents/WelcomeModalContainer/WelcomeModalContainer.tsx
index c96bd78edca5cfaec7529b1652eec5936b6df271..247efaefa0b1e89e5af9279f960ba1cea67104b7 100644
--- a/src/components/ContainerComponents/WelcomeModalContainer/WelcomeModalContainer.tsx
+++ b/src/components/ContainerComponents/WelcomeModalContainer/WelcomeModalContainer.tsx
@@ -20,11 +20,7 @@ const WelcomeModalContainer: React.FC<WelcomeModalContainerProps> = ({
return (
<React.Fragment>
- <Modal
- open={true}
- handleCloseClick={handleClose}
- yellowBorder="yellow-border"
- >
+ <Modal open={true} handleCloseClick={handleClose} yellowBorder={true}>
<div className="wm-header text-24-bold">
{t('COMMON.WELCOME_MODAL_TITLE')}
</div>
diff --git a/src/components/ContentComponents/ChallengeList/ChallengesList.tsx b/src/components/ContentComponents/ChallengeList/ChallengesList.tsx
index 523800f93fe5089e461984bd08ddd168acd4d957..89d8e1ace26eb274b00bddfdfe212e1cbb819bf7 100644
--- a/src/components/ContentComponents/ChallengeList/ChallengesList.tsx
+++ b/src/components/ContentComponents/ChallengeList/ChallengesList.tsx
@@ -23,7 +23,7 @@ const ChallengesList: React.FC<ChallengesListProps> = ({
fluidTypes,
refreshCurrentChallenge,
screenType,
- toggleBackgroundScroll,
+ challengeNotification,
} = useContext(AppContext)
const challengeManager = new ChallengeManager(client)
const [
@@ -49,7 +49,6 @@ const ChallengesList: React.FC<ChallengesListProps> = ({
setOngoingChallenge(null)
setOpenChallengeModal(false)
setOngoingChallengeModal(null)
- toggleBackgroundScroll()
}
const setRightChallengeInTheMiddle = (
@@ -108,14 +107,8 @@ const ChallengesList: React.FC<ChallengesListProps> = ({
setOngoingChallenge(ongoingChallengeTmp)
setOngoingChallengeModal(ongoingChallengeTmp)
setUserLevel(levelOfUser)
- if (
- await challengeManager.isChallengeOver(
- ongoingChallengeTmp,
- fluidTypes
- )
- ) {
+ if (challengeNotification) {
setOpenChallengeModal(true)
- toggleBackgroundScroll()
await challengeManager.endChallenge(ongoingChallengeTmp, fluidTypes)
await refreshCurrentChallenge()
setOngoingChallenge(null)
@@ -210,12 +203,14 @@ const ChallengesList: React.FC<ChallengesListProps> = ({
</div>
</div>
)}
- <ChallengeModal
- opened={openChallengeModal}
- challenge={ongoingChallengeModal}
- handleCloseClick={handleCloseClick}
- badgeStatus={ongoingChallengeModal && ongoingChallengeModal.badge}
- />
+ {openChallengeModal && (
+ <ChallengeModal
+ opened={openChallengeModal}
+ challenge={ongoingChallengeModal}
+ handleCloseClick={handleCloseClick}
+ badgeStatus={ongoingChallengeModal && ongoingChallengeModal.badge}
+ />
+ )}
</>
)
}
diff --git a/src/components/ContentComponents/EcogestureList/EcogestureList.tsx b/src/components/ContentComponents/EcogestureList/EcogestureList.tsx
index 1a436e9da851397ba6633ce3bb16f66d9c621930..83a6da948c41873f4cd55275c625dd32936e7ee4 100644
--- a/src/components/ContentComponents/EcogestureList/EcogestureList.tsx
+++ b/src/components/ContentComponents/EcogestureList/EcogestureList.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useContext } from 'react'
+import React, { useState, useEffect } from 'react'
import { withClient, Client } from 'cozy-client'
import StyledChallengeSpinner from 'components/CommonKit/Spinner/StyledChallengeSpinner'
import EcogestureCard from '../EcogestureCard/EcogestureCard'
@@ -8,7 +8,6 @@ import { EcogestureType } from 'services/dataChallengeContracts'
import ChallengeManager from 'services/challengeDataManagerService'
import StyledClearGreyButton from 'components/CommonKit/Button/StyledClearGreyButton'
import { translate } from 'cozy-ui/react/I18n'
-import { AppContext } from 'components/Contexts/AppContextProvider'
interface EcogesturesListProps {
t: Function
@@ -23,7 +22,6 @@ const EcogesturesList: React.FC<EcogesturesListProps> = ({
selectedEcogesture,
setSelectedEcogesture,
] = useState<EcogestureType | null>(null)
- const { toggleBackgroundScroll } = useContext(AppContext)
const [ecogestures, setEcogestures] = useState<EcogestureType[] | null>(null)
const [openEcogestureModal, setOpenEcogestureModal] = useState(false)
const [openNegaWattModal, setOpenNegaWattModal] = useState(false)
@@ -32,22 +30,18 @@ const EcogesturesList: React.FC<EcogesturesListProps> = ({
const handleClick = (ecogesture: EcogestureType) => {
setSelectedEcogesture(ecogesture)
setOpenEcogestureModal(true)
- toggleBackgroundScroll()
}
const handleCloseClick = () => {
setOpenEcogestureModal(false)
- toggleBackgroundScroll()
}
const handleNegaWattClick = () => {
setOpenNegaWattModal(true)
- toggleBackgroundScroll()
}
const handleNegaWattCloseClick = () => {
setOpenNegaWattModal(false)
- toggleBackgroundScroll()
}
useEffect(() => {
diff --git a/src/components/ContentComponents/Feedback/FeedbackModal.tsx b/src/components/ContentComponents/Feedback/FeedbackModal.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..191bb7e9cb05896a0b747f716e1f7fc4649c2243
--- /dev/null
+++ b/src/components/ContentComponents/Feedback/FeedbackModal.tsx
@@ -0,0 +1,243 @@
+import React, { useState } from 'react'
+import { withClient, Client } from 'cozy-client'
+import { translate } from 'cozy-ui/react/I18n'
+import { detect } from 'detect-browser'
+
+import Modal from 'components/CommonKit/Modal/Modal'
+import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+import StyledButton from 'components/CommonKit/Button/StyledButton'
+import StyledIconBorderedButton from 'components/CommonKit/IconButton/StyledIconBorderedButton'
+
+import BugOnIcon from 'assets/icons/visu/feedback/bug-on.svg'
+import BugOffIcon from 'assets/icons/visu/feedback/bug-off.svg'
+import IdeaOnIcon from 'assets/icons/visu/feedback/idea-on.svg'
+import IdeaOffIcon from 'assets/icons/visu/feedback/idea-off.svg'
+import OtherOnIcon from 'assets/icons/visu/feedback/other-on.svg'
+import OtherOffIcon from 'assets/icons/visu/feedback/other-off.svg'
+import warningIcon from 'assets/icons/ico/warning-yellow.svg'
+import successIcon from 'assets/icons/visu/data-ok.svg'
+
+const FEEDBACK_EMAIL = 'ecolyo@grandlyon.com'
+const browser = detect()
+
+interface FeedbackModalProps {
+ opened: boolean
+ handleCloseClick: () => void
+ t: Function
+ client: Client
+}
+
+const FeedbackModal: React.FC<FeedbackModalProps> = ({
+ opened,
+ handleCloseClick,
+ t,
+ client,
+}: FeedbackModalProps) => {
+ const [type, setType] = useState<string>('bug')
+ const [description, setDescription] = useState<string>('')
+ const [email, setEmail] = useState<string>('')
+ const [sending, setSending] = useState<boolean>(false)
+ const [sent, setSent] = useState<boolean>(false)
+ const [error, setError] = useState<string>('')
+
+ const resetInputs = () => {
+ setType('bug')
+ setDescription('')
+ setEmail('')
+ setSent(false)
+ setError('')
+ }
+
+ const closeModal = () => {
+ resetInputs()
+ handleCloseClick()
+ }
+
+ const sendEmail = async () => {
+ setSending(true)
+ if (description === '') {
+ setError(t('feedback.error_empty_description'))
+ } else {
+ const envInfo =
+ `Ecolyo` +
+ `\nv${client.appMetadata.version}` +
+ `\n\nLocation: ${window.location}` +
+ '\n\nBrowser:' +
+ `\nOn ${browser && browser.os}` +
+ `\nFrom ${browser && browser.name}` +
+ `\n${browser && browser.version}` +
+ '\n\nNavigator:' +
+ `\nOn ${navigator.platform}` +
+ `\nFrom ${navigator.vendor}` +
+ `\n${navigator.userAgent}`
+
+ const mailContent =
+ 'Type: ' +
+ t('feedback.type_' + type) +
+ '\n\nDescription:\n' +
+ description +
+ '\n\nEmail: ' +
+ email +
+ '\n_______________\n' +
+ envInfo
+
+ const mailData = {
+ mode: 'from',
+ to: [{ name: 'Support', email: FEEDBACK_EMAIL }],
+ subject: '[Ecolyo] - Feedbacks - ' + t('feedback.type_' + type),
+ parts: [{ type: 'text/plain', body: mailContent }],
+ }
+ try {
+ const jobCollection = client.collection('io.cozy.jobs')
+ await jobCollection.create('sendmail', mailData)
+ } catch (e) {
+ // eslint-disable-next-line no-console
+ console.error(e)
+ setError(t('feedback.error_sending'))
+ }
+ }
+ setSending(false)
+ setSent(true)
+ }
+
+ const validResult = () => {
+ setSent(false)
+ setError('')
+ if (error === '') {
+ resetInputs()
+ closeModal()
+ }
+ }
+
+ const getOnIcon = (_type: string) => {
+ switch (_type) {
+ case 'bug':
+ return BugOnIcon
+ case 'idea':
+ return IdeaOnIcon
+ case 'other':
+ return OtherOnIcon
+ default:
+ return BugOnIcon
+ }
+ }
+ const getOffIcon = (_type: string) => {
+ switch (_type) {
+ case 'bug':
+ return BugOffIcon
+ case 'idea':
+ return IdeaOffIcon
+ case 'other':
+ return OtherOffIcon
+ default:
+ return BugOffIcon
+ }
+ }
+
+ const selectorItem = (itemType: string) => {
+ const selected = type === itemType
+ return (
+ <div className="fb-selector-item">
+ <StyledIconBorderedButton
+ icon={selected ? getOnIcon(itemType) : getOffIcon(itemType)}
+ selected={selected}
+ size={36}
+ onClick={() => setType(itemType)}
+ >
+ <div
+ className={
+ selected
+ ? 'fb-selector-item-selectedlabel text-10-bold'
+ : 'fb-selector-item-label text-10-normal'
+ }
+ >
+ {t('feedback.type_' + itemType)}
+ </div>
+ </StyledIconBorderedButton>
+ </div>
+ )
+ }
+
+ return (
+ <Modal open={opened} yellowBorder={true} handleCloseClick={closeModal}>
+ {sent ? (
+ <div className="fb-root">
+ <div className="fb-content">
+ {error === '' ? (
+ <div className="fb-content-success">
+ <div className="fb-icon">
+ <StyledIcon icon={successIcon} size={48} />
+ </div>
+ <div>{t('feedback.success_sending')}</div>
+ </div>
+ ) : (
+ <div className="fb-content-error">
+ <div className="fb-icon">
+ <StyledIcon icon={warningIcon} size={48} />
+ </div>
+ <div>{t('feedback.warning')}</div>
+ <div>{error}</div>
+ </div>
+ )}
+ <StyledButton
+ className="fb-button"
+ color="primary"
+ onClick={validResult}
+ >
+ {t('feedback.ok')}
+ </StyledButton>
+ </div>
+ </div>
+ ) : (
+ <div className="fb-root">
+ <div className="fb-header text-18-bold">{t('feedback.title')}</div>
+ <div className="fb-content">
+ <div className="fb-label text-16-bold">{t('feedback.type')}</div>
+ <div className="fb-selector">
+ {selectorItem('bug')}
+ {selectorItem('idea')}
+ {selectorItem('other')}
+ </div>
+ <div className="fb-label text-16-bold">
+ {t('feedback.description')}
+ </div>
+ <textarea
+ id="idFeedbackDescription"
+ className="fb-form fb-textarea"
+ aria-describedby="Feedbacks description"
+ placeholder={t('feedback.description_placeholder')}
+ name="description"
+ onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) =>
+ setDescription(e.target.value)
+ }
+ value={description}
+ ></textarea>
+ <div className="fb-label text-15-normal">{t('feedback.email')}</div>
+ <input
+ id="idFeedbackEmail"
+ type="text"
+ className="fb-form fb-input"
+ aria-describedby="Feedbacks email"
+ placeholder={t('feedback.email_placeholder')}
+ name="email"
+ onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+ setEmail(e.target.value)
+ }
+ value={email}
+ />
+ <StyledButton
+ className="fb-button"
+ color="primary"
+ onClick={sendEmail}
+ disabled={sending}
+ >
+ {t('feedback.send')}
+ </StyledButton>
+ </div>
+ </div>
+ )}
+ </Modal>
+ )
+}
+
+export default translate()(withClient(FeedbackModal))
diff --git a/src/components/ContentComponents/Konnector/KonnectorLaunch.tsx b/src/components/ContentComponents/Konnector/KonnectorLaunch.tsx
index 69470f3abebe21f769a60987bb540f5843c101cf..12e3b766b8e91380588c146dad462a2491774a5a 100644
--- a/src/components/ContentComponents/Konnector/KonnectorLaunch.tsx
+++ b/src/components/ContentComponents/Konnector/KonnectorLaunch.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useContext } from 'react'
+import React, { useEffect, useState } from 'react'
import { withClient, Client } from 'cozy-client'
import { translate } from 'cozy-ui/react/I18n'
@@ -18,7 +18,6 @@ import Modal from 'components/CommonKit/Modal/Modal'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import errorIcon from 'assets/icons/visu/data-nok.svg'
import successIcon from 'assets/icons/visu/data-ok.svg'
-import { AppContext } from 'components/Contexts/AppContextProvider'
const loadingOptions = {
loop: true,
@@ -46,7 +45,6 @@ const KonnectorLaunch: React.FC<KonnectorLaunchProps> = ({
}: KonnectorLaunchProps) => {
const [state, setState] = useState<string | null>(null)
const [openModal, setOpenModal] = useState(false)
- const { toggleBackgroundScroll } = useContext(AppContext)
const callbackResponse = (_state: string) => {
setState(_state)
}
@@ -54,7 +52,6 @@ const KonnectorLaunch: React.FC<KonnectorLaunchProps> = ({
const handleCloseClick = () => {
handleKonnectorLaunch()
setOpenModal(false)
- toggleBackgroundScroll()
}
useEffect(() => {
@@ -73,7 +70,6 @@ const KonnectorLaunch: React.FC<KonnectorLaunchProps> = ({
callbackResponse(SUCCESS_EVENT)
})
setOpenModal(true)
- toggleBackgroundScroll()
}
}
getData()
diff --git a/src/components/ContentComponents/Version/Version.tsx b/src/components/ContentComponents/Version/Version.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..90db1233f885eb09c7622b756569ff0b0432ddd6
--- /dev/null
+++ b/src/components/ContentComponents/Version/Version.tsx
@@ -0,0 +1,12 @@
+import React from 'react'
+import { withClient, Client } from 'cozy-client'
+
+interface VersionProps {
+ client: Client
+}
+
+const Version: React.FC<VersionProps> = ({ client }: VersionProps) => (
+ <div className="version-root text-14-normal">{`v ${client.appMetadata.version}`}</div>
+)
+
+export default withClient(Version)
diff --git a/src/components/Contexts/AppContextProvider.tsx b/src/components/Contexts/AppContextProvider.tsx
index a69164e65347b7aa6fe6dc463b381ad0b1ec9c03..1cf2982fb3bee221305107e38e6fde79cfa62e40 100644
--- a/src/components/Contexts/AppContextProvider.tsx
+++ b/src/components/Contexts/AppContextProvider.tsx
@@ -31,7 +31,9 @@ interface AppContextProps {
setWelcomeModalViewed: Function
chartIsLoaded: boolean
setChartIsLoaded: Function
- toggleBackgroundScroll: Function
+ feedbackIsOpened: boolean
+ setFeedbackOpened: Function
+ disableBackgroundScroll: Function
}
export const AppContext = React.createContext<AppContextProps>({
@@ -57,7 +59,9 @@ export const AppContext = React.createContext<AppContextProps>({
setWelcomeModalViewed: () => null,
chartIsLoaded: false,
setChartIsLoaded: () => null,
- toggleBackgroundScroll: () => null,
+ feedbackIsOpened: false,
+ setFeedbackOpened: () => null,
+ disableBackgroundScroll: () => null,
})
interface AppContextProviderProps {
@@ -70,11 +74,11 @@ const AppContextProvider: React.FC<AppContextProviderProps> = ({
client,
}: AppContextProviderProps) => {
const [chartIsLoaded, setChartIsLoaded] = useState<boolean>(false)
+ const [feedbackIsOpened, setFeedbackOpened] = useState<boolean>(false)
const [isIndexesLoading, setIndexesLoading] = useState<boolean>(false)
const [isIndexesLoadingSuccess, setIndexesLoadingSuccess] = useState<
boolean | null
>(null)
-
const [isDataLoading, setDataLoading] = useState<boolean>(false)
const [isDataLoadingSuccess, setDataLoadingSuccess] = useState<
boolean | null
@@ -102,7 +106,6 @@ const AppContextProvider: React.FC<AppContextProviderProps> = ({
const [challengeNotification, setChallengeNotification] = useState<boolean>(
false
)
-
const [isContextLoaded, setContextLoaded] = useState<boolean>(false)
const [isError, setError] = useState<boolean>(false)
const [screenType, setScreenType] = useState<ScreenType>(ScreenType.MOBILE)
@@ -178,22 +181,19 @@ const AppContextProvider: React.FC<AppContextProviderProps> = ({
}
}
- const toggleBackgroundScroll = () => {
+ const disableBackgroundScroll = (disable: boolean) => {
const backgroundDesktop = document.querySelector(
'.app-content'
) as HTMLElement
const backgroundMobile = document.querySelector('html') as HTMLElement
const bgStyleDesktop = backgroundDesktop && backgroundDesktop.style
const bgStyleMobile = backgroundMobile && backgroundMobile.style
- if (
- bgStyleDesktop.overflowY === 'hidden' ||
- bgStyleMobile.overflowY === 'hidden'
- ) {
- bgStyleDesktop.overflowY = 'unset'
- bgStyleMobile.overflowY = 'unset'
- } else {
+ if (disable) {
bgStyleDesktop.overflowY = 'hidden'
bgStyleMobile.overflowY = 'hidden'
+ } else {
+ bgStyleDesktop.overflowY = 'unset'
+ bgStyleMobile.overflowY = 'unset'
}
}
@@ -346,7 +346,9 @@ const AppContextProvider: React.FC<AppContextProviderProps> = ({
setWelcomeModalViewed,
setChartIsLoaded,
chartIsLoaded,
- toggleBackgroundScroll,
+ feedbackIsOpened,
+ setFeedbackOpened,
+ disableBackgroundScroll,
}}
>
{children}
diff --git a/src/cozy-client.d.ts b/src/cozy-client.d.ts
index 4cdc87a6daa80f2a8a44e33ca89a3733b363b680..c3be97b9c91d3ca9a2a686579ef8517c7b40e513 100644
--- a/src/cozy-client.d.ts
+++ b/src/cozy-client.d.ts
@@ -17,6 +17,11 @@ type QueryDefinition = {
cursor: unknown
}
+type AppMetaData = {
+ slug: string
+ version: string
+}
+
type Offline = {
getDatabase: unknown
}
@@ -30,8 +35,10 @@ export type Client = {
entry: any,
relationships?: any
): typeof QueryDefinition
+ collection(doctype: string): function
offline: typeof Offline
getStackClient: function
+ appMetadata: AppMetaData
}
export type QueryId = string
diff --git a/src/locales/fr.json b/src/locales/fr.json
index de2006ddc82fcd6d9549940413b37aa6439672c5..fd92eec19b308e9c2415e2ffaf56d64dbb231005 100644
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@@ -256,5 +256,22 @@
"activateLink": "https://mon-compte-client.enedis.fr/"
}
}
+ },
+ "feedback": {
+ "title": "Partagez-nous vos retours",
+ "type": "Motif du retour :",
+ "description": "Description :",
+ "description_placeholder": "Vos remarques",
+ "email": "Si vous souhaitez un suivi de vos retours, inscrivez votre email :",
+ "email_placeholder": "Email (optionnel)",
+ "send": "Envoyer",
+ "ok": "Ok",
+ "type_bug": "Bug",
+ "type_idea": "Idée",
+ "type_other": "Autre",
+ "success_sending": "Nous vous remercions pour votre retour.",
+ "warning": "Attention!",
+ "error_empty_description": "Le champ de description est vide.",
+ "error_sending": "Erreur lors de l'envoi, veuillez essayer ultérieurement."
}
}
diff --git a/src/styles/base/_layout.scss b/src/styles/base/_layout.scss
index 3fe3b61098cecdcd293482d69418a144d4ac8726..0f07d9e7feecf90af76fa1f77642fd0467a7d0b1 100644
--- a/src/styles/base/_layout.scss
+++ b/src/styles/base/_layout.scss
@@ -30,7 +30,7 @@ body {
[role='banner'] .coz-bar-container {
background-color: white;
@media #{$large-phone} {
- padding: 0 3.25em 0 0;
+ padding: 0 0 0 0;
background-color: unset;
}
}
@@ -72,28 +72,44 @@ body {
}
.header-content {
margin: 0 0 0 220px;
- .header-text {
- padding: 2rem 1rem;
- }
- .header-text-desktop {
- display: block;
- padding: 2rem 1.25rem;
- color: $text-bright;
- }
- .header-back-button {
- padding: 0 0.75rem;
- }
+ display: flex;
+ flex-direction: column;
@media #{$tablet} {
- margin: 0;
+ margin: 0;
}
@media #{$large-phone} {
- margin: 60px 0 0 0;
+ margin: 60px 0 0 0;
+ }
+ .header-content-top {
+ display: flex;
+ flex-direction: row;
+ &.header-content-top-right{
+ justify-content: flex-end;
+ }
.header-text {
- padding: 0 1rem 1rem 1rem;
- color: $text-bright;
+ padding: 2rem 1rem;
+ flex: 1;
}
.header-text-desktop {
- display: none;
+ display: flex;
+ flex: 1;
+ padding: 2rem 1.25rem;
+ color: $text-bright;
+ }
+ .header-back-button {
+ padding: 0 0.75rem;
+ }
+ @media #{$large-phone} {
+ .header-text {
+ padding: 0 1rem 1rem 1rem;
+ color: $text-bright;
+ }
+ .header-text-desktop {
+ display: none;
+ }
+ .header-feedbacks-button {
+ display: none;
+ }
}
}
}
diff --git a/src/styles/base/_typography.scss b/src/styles/base/_typography.scss
index 4eb61d770ee73594e87456c93b9d360efdab7536..928255227e47947eb563fb147a5a8e4d857a64ee 100644
--- a/src/styles/base/_typography.scss
+++ b/src/styles/base/_typography.scss
@@ -50,6 +50,20 @@ p {
color: $green-2;
}
+.text-10-normal {
+ font-family: $text-font;
+ font-style: normal;
+ font-weight: normal;
+ font-size: 0.625rem;
+ line-height: 120%;
+}
+.text-10-bold {
+ font-family: $text-font;
+ font-style: normal;
+ font-weight: bold;
+ font-size: 0.625rem;
+ line-height: 120%;
+}
.text-14-normal {
font-family: $text-font;
font-style: normal;
diff --git a/src/styles/components/_feedback.scss b/src/styles/components/_feedback.scss
new file mode 100644
index 0000000000000000000000000000000000000000..a4e85c5a93cd72cff2c6510da25b7c14c3a0fa5b
--- /dev/null
+++ b/src/styles/components/_feedback.scss
@@ -0,0 +1,84 @@
+@import '../base/color';
+@import '../base/breakpoint';
+
+
+.fb-root{
+ overflow-y: auto;
+ .fb-header {
+ color: $gold-shadow;
+ padding: 1.5rem 1.5rem 0rem 1.5rem;
+ display: flex;
+ justify-content: center;
+ }
+
+ .fb-content {
+ padding: 1rem 1.5rem 1.5rem 1.5rem;
+ display: flex;
+ flex-direction: column;
+ .fb-content-success{
+ color: $text-bright;
+ color: $text-bright;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ text-align: center;
+ }
+ .fb-content-error{
+ color: $text-bright;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ text-align: center;
+ }
+ .fb-icon {
+ display: flex;
+ justify-content: center;
+ margin: 0 0 1.5rem 0;
+ }
+ .fb-label{
+ margin: 0.5rem 0 0 0;
+ }
+ .fb-selector{
+ margin: 0.5rem 0;
+ display: flex;
+ flex-direction: row;
+ align-content: space-around;
+ justify-content: space-around;
+ .fb-selector-item{
+ height: 3.125rem;
+ width: 3.125rem;
+ .fb-selector-item-label {
+ color: $text-bright;
+ }
+ .fb-selector-item-selectedlabel {
+ color: $white;
+ }
+ }
+ }
+ .fb-form{
+ margin: 0.5rem 0;
+ border: 1px solid $grey-dark;
+ border-radius: 4px;
+ color: $text-bright;
+ background: rgba(0, 0, 0, 0.3);
+ padding: 0 1rem;
+ outline: none;
+ }
+ .fb-form:focus{
+ border: 1px solid $gold-shadow;
+ }
+ .fb-textarea{
+ height: 8.725rem;
+ padding: 0.5rem 1rem;
+ resize: none;
+ }
+ .fb-input{
+ height: 2rem;
+ }
+ .fb-button{
+ max-width: 9.375rem;
+ align-self: center;
+ margin-top: 1rem;
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/styles/components/_legalnotice.scss b/src/styles/components/_legalnotice.scss
index f87acfd3d41dca7549f4012a0c58aac15f47b29f..3e96c2b80ef6045c203dc2ccfaea7a8c552289da 100644
--- a/src/styles/components/_legalnotice.scss
+++ b/src/styles/components/_legalnotice.scss
@@ -8,7 +8,7 @@
align-items: center;
justify-content: center;
color: $text-white;
- padding: 1.5rem;
+ padding: 1.5rem 1.5rem 0;
.legal-notice-content {
p {
color: $text-white;
diff --git a/src/styles/components/_modal.scss b/src/styles/components/_modal.scss
index a4b55f813b4b12f17e839617c87e431114aac9df..51ae463a9a03fb7aaf3b3ffd62e9def5b301a5fc 100644
--- a/src/styles/components/_modal.scss
+++ b/src/styles/components/_modal.scss
@@ -21,7 +21,7 @@
position: fixed;
width: 36rem;
max-width: 100%;
- max-height: 80vh;
+ max-height: 90vh;
padding: 1rem 0 0 0;
box-sizing: border-box;
box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.55);
@@ -47,7 +47,7 @@
z-index: 10;
}
.modal-content {
- max-height: 75vh;
+ max-height: 85vh;
display: flex;
flex-direction: column;
align-items: center;
diff --git a/src/styles/components/_version.scss b/src/styles/components/_version.scss
new file mode 100644
index 0000000000000000000000000000000000000000..96fdef327a142a6889cf828d11cba9e04474a857
--- /dev/null
+++ b/src/styles/components/_version.scss
@@ -0,0 +1,8 @@
+@import '../base/color';
+@import '../base/breakpoint';
+
+.version-root {
+ color: $text-bright;
+ text-align: end;
+ margin: 1rem 1.5rem 2rem;
+}
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 550656551ae776974982a55fea7c4b7d1061bfcf..82021a3cd090809385ee1496276f845b01b5ad17 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -24,6 +24,8 @@
@import 'components/legalnotice';
@import 'components/splash';
@import 'components/auth';
+@import 'components/feedback';
+@import 'components/version';
:root {
--blue: #{$blue};
diff --git a/src/targets/browser/index.tsx b/src/targets/browser/index.tsx
index 2686920170ff6cfe0040793c4eec705c8218fed7..4f4bec2047d1c8ec1a0f1eff46c883f5bfb63907 100644
--- a/src/targets/browser/index.tsx
+++ b/src/targets/browser/index.tsx
@@ -46,7 +46,8 @@ document.addEventListener('DOMContentLoaded', () => {
)
const appName = getDataOrDefault(data.cozyAppName, manifest.name)
const appSlug = getDataOrDefault(data.cozyAppSlug, manifest.slug)
- const appVersion = getDataOrDefault(data.cozyAppVersion, manifest.version)
+ // const appVersion = getDataOrDefault(data.cozyAppVersion, manifest.version)
+ const appVersion = manifest.version
// appLocale = getDataOrDefault(data.cozyLocale, 'fr')
appLocale = 'fr'