Merge branch 'features/US162-feedback-MVP' into 'dev'

Features/us162 feedback mvp

Closes #3, #12, and #7

See merge request web-et-numerique/llle_project/ecolyo!37

src/assets/icons/ico/legal.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"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19.6007 8.4054C18.9665 7.86487 18.0335 7.86486 17.3993 8.4054L16.459 9.20672C16.1872 9.43835 15.8492 9.57834 15.4932 9.60674L14.2617 9.70502C13.431 9.77131 12.7713 10.431 12.705 11.2617L12.6067 12.4932C12.5783 12.8492 12.4384 13.1872 12.2067 13.459L11.4054 14.3993C10.8649 15.0335 10.8649 15.9665 11.4054 16.6007L12.2067 17.541C12.4384 17.8128 12.5783 18.1508 12.6067 18.5068L12.705 19.7383C12.7713 20.569 13.431 21.2287 14.2617 21.295L15.4932 21.3933C15.8492 21.4217 16.1872 21.5616 16.459 21.7933L17.3993 22.5946C18.0335 23.1351 18.9665 23.1351 19.6007 22.5946L20.541 21.7933C20.8128 21.5617 21.1508 21.4217 21.5068 21.3933L22.7383 21.295C23.569 21.2287 24.2287 20.569 24.295 19.7383L24.3933 18.5068C24.4217 18.1508 24.5616 17.8129 24.7933 17.541L25.5946 16.6007C26.1351 15.9665 26.1351 15.0335 25.5946 14.3993L24.7933 13.459C24.5617 13.1872 24.4217 12.8492 24.3933 12.4932L24.295 11.2617C24.2287 10.431 23.569 9.77131 22.7383 9.70502L21.5068 9.60674C21.1508 9.57834 20.8129 9.43835 20.541 9.20672L19.6007 8.4054ZM18.5 19.5163C20.7182 19.5163 22.5163 17.7182 22.5163 15.5C22.5163 13.2818 20.7182 11.4837 18.5 11.4837C16.2818 11.4837 14.4837 13.2818 14.4837 15.5C14.4837 17.7182 16.2818 19.5163 18.5 19.5163Z" fill="white"/>
+<path d="M15 23L15.1384 23.0113C15.5055 23.0412 15.854 23.1887 16.1343 23.4328L17.4371 24.5673C18.0912 25.1369 19.0532 25.1369 19.7072 24.5673L21.01 23.4328C21.2888 23.19 21.6351 23.0428 22 23.0118V30.5L18.5 28.2647L15 30.5V23Z" fill="white"/>
+</svg>

src/assets/icons/visu/challenge/star.svg

+<svg width="320" height="320" viewBox="0 0 320 320" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g opacity="0.6" filter="url(#filter0_f)">
+<path d="M160 2L160.708 150.547L183.549 3.76472L162.109 150.758L206.571 9.0195L163.463 151.175L228.554 17.6469L164.74 151.79L249.005 29.4543L165.911 152.588L267.467 44.1778L166.949 153.552L283.529 61.4886L167.833 154.66L296.832 81L168.541 155.887L307.078 102.276L169.059 157.206L314.039 124.842L169.374 158.587L317.558 148.193L169.48 160L317.558 171.807L169.374 161.413L314.039 195.158L169.059 162.794L307.078 217.724L168.541 164.113L296.832 239L167.833 165.34L283.529 258.511L166.949 166.448L267.467 275.822L165.911 167.412L249.005 290.546L164.74 168.21L228.554 302.353L163.463 168.825L206.571 310.98L162.109 169.242L183.549 316.235L160.708 169.453L160 318L159.292 169.453L136.451 316.235L157.891 169.242L113.429 310.98L156.537 168.825L91.4464 302.353L155.26 168.21L70.9954 290.546L154.089 167.412L52.5327 275.822L153.051 166.448L36.4706 258.511L152.167 165.34L23.168 239L151.459 164.113L12.922 217.724L150.941 162.794L5.9614 195.158L150.626 161.413L2.4418 171.807L150.52 160L2.4418 148.193L150.626 158.587L5.9614 124.842L150.941 157.206L12.922 102.276L151.459 155.887L23.168 81L152.167 154.66L36.4706 61.4886L153.051 153.552L52.5327 44.1778L154.089 152.588L70.9954 29.4543L155.26 151.79L91.4464 17.6469L156.537 151.175L113.429 9.0195L157.891 150.758L136.451 3.76472L159.292 150.547L160 2Z" fill="#FFD951"/>
+</g>
+<defs>
+<filter id="filter0_f" x="0.441895" y="0" width="319.116" height="320" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="1" result="effect1_foregroundBlur"/>
+</filter>
+</defs>
+</svg>

src/assets/icons/visu/ecogesture/0078.svg

+<svg width="52" height="50" viewBox="0 0 52 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path opacity="0.7" d="M29.8424 44.2922L50.2494 45.4882C48.1563 44.8902 43.8358 43.6942 43.2976 43.6942C42.6248 43.6942 44.2693 42.2739 42.7743 42.2739C41.2793 42.2739 38.065 43.6942 37.5417 43.6942C37.0185 43.6942 38.2145 42.7972 36.7942 42.6477C35.374 42.4982 35.075 43.6942 34.2527 43.6942C33.4305 43.6942 34.0285 42.4982 33.1315 42.2739C32.2344 42.0497 31.3374 43.6194 30.8889 43.6942C30.5301 43.754 30.0417 44.1178 29.8424 44.2922Z" fill="white"/>
+<path d="M29.1395 44.5047L49.5465 45.7007C47.4535 45.1027 43.1329 43.9067 42.5947 43.9067C41.9219 43.9067 43.5664 42.4864 42.0714 42.4864C40.5764 42.4864 37.3621 43.9067 36.8389 43.9067C36.3156 43.9067 37.5116 43.0097 36.0914 42.8602C34.6711 42.7107 34.3721 43.9067 33.5498 43.9067C32.7276 43.9067 33.3256 42.7107 32.4286 42.4864C31.5316 42.2622 30.6346 43.832 30.1861 43.9067C29.8272 43.9665 29.3389 44.3303 29.1395 44.5047Z" fill="#4D89AA"/>
+<path d="M5.68302 18.2685C6.0946 16.304 7.58668 14.5463 11.2111 10.9873L13.7433 8.50081C15.4615 7.13871 19.139 4.95796 20.1033 7.13179C21.3087 9.84908 19.807 18.0527 18.267 19.6625C16.7269 21.2723 6.0479 21.4211 5.51162 20.8749C4.97533 20.3288 5.27144 20.233 5.68302 18.2685Z" fill="#797979"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.99425 21.0721C6.06144 20.9515 6.21369 20.9082 6.33431 20.9754L29.0521 33.1889C29.1727 33.2561 29.216 33.4084 29.1489 33.529C29.0817 33.6496 28.9294 33.6929 28.8088 33.6258L6.09101 21.4122C5.97039 21.345 5.92707 21.1928 5.99425 21.0721Z" fill="#CBFCFF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M20.0634 6.82347L37.4935 31.2651C37.574 31.3773 37.5483 31.5335 37.4362 31.614C37.324 31.6945 37.1678 31.6688 37.0873 31.5566L19.6572 7.11497L20.0634 6.82347Z" fill="#CBFCFF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.9464 17.4715C16.0372 17.3675 16.1951 17.3569 16.2991 17.4477L32.9181 31.9666C33.0221 32.0574 33.0327 32.2153 32.9419 32.3193C32.851 32.4233 32.6931 32.4339 32.5891 32.3431L15.9702 17.8243C15.8662 17.7334 15.8555 17.5755 15.9464 17.4715Z" fill="#CBFCFF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M37.1943 31.1813C37.2339 31.3135 37.1588 31.4529 37.0265 31.4925L28.8643 33.9377C28.732 33.9773 28.5927 33.9022 28.5531 33.7699C28.5134 33.6377 28.5885 33.4983 28.7208 33.4587L36.883 31.0135C37.0153 30.9739 37.1546 31.049 37.1943 31.1813Z" fill="#6ACADF"/>
+<path d="M21.986 41.8434C22.2995 41.9163 23.1711 42.3224 27.3229 42.862C31.4747 43.4016 36.9871 43.8573 37.9335 43.8867C38.88 43.9161 38.9235 44.5491 38.83 45.5251C38.7365 46.5012 38.6547 47.0987 38.0563 47.0485C37.4578 46.9983 22.235 46.0197 21.8574 45.9764C21.4799 45.9331 20.544 45.5566 20.5339 43.8509C20.5238 42.1453 21.6724 41.7705 21.986 41.8434Z" fill="#E65B3D"/>
+<path d="M34.8134 43.4718C34.8639 43.0173 35.0659 42.104 35.1607 41.7042L33.6455 41.136C33.7297 41.5779 33.8981 42.588 33.8981 43.093C33.8981 43.7243 33.9612 43.7559 33.8981 44.2609C33.8349 44.7659 33.8664 45.0185 34.4977 45.0185C35.0028 45.0185 34.9186 44.7028 34.8134 44.545C34.7924 44.3766 34.7629 43.9263 34.8134 43.4718Z" fill="#EEAF74"/>
+<path d="M30.1102 40.144C30.691 39.841 32.5618 39.0497 33.4246 38.692C33.6981 38.9866 35.5457 39.4243 37.0861 40.7121C35.4447 42.2588 34.6871 42.0694 32.4776 41.7854C31.5008 41.6598 30.1944 41.7854 29.6683 41.7854C29.4263 42.1115 28.8476 42.8333 28.4689 43.1111C28.0901 43.3888 27.2799 43.9633 26.9222 44.2158C26.7433 44.5525 26.3414 45.2385 26.1646 45.289C25.9436 45.3522 25.7858 44.5315 25.628 44.058C25.4702 43.5845 25.8806 43.332 26.3856 43.1111C26.7896 42.9343 26.9117 43.1847 26.9222 43.332C27.0379 43.1637 27.3451 42.7134 27.6482 42.2588C28.0269 41.6907 29.3842 40.5228 30.1102 40.144Z" fill="#FFDDBD"/>
+<path d="M31.0678 39.7117C31.05 40.0095 31.0785 40.3168 31.1791 40.606C31.3156 40.9984 31.6147 41.4193 31.8964 41.752C32.0969 41.7604 32.2931 41.7751 32.4776 41.7988C32.5855 41.8127 32.6899 41.8264 32.7911 41.8396C34.7632 42.0973 35.5248 42.1968 37.0861 40.7256C36.079 39.8837 34.9407 39.4051 34.1967 39.0923C33.8027 38.9267 33.5193 38.8075 33.4246 38.7055C32.8571 38.9408 31.8536 39.3636 31.0678 39.7117Z" fill="#206777"/>
+<path d="M35.7604 32.4556C36.2907 32.6071 39.1589 33.613 40.5266 34.097L39.0747 34.9808C38.9063 34.9598 38.3865 34.8483 37.6542 34.5705C36.7389 34.2233 35.4763 33.3079 35.1922 32.9922C34.9081 32.6766 34.3399 32.4556 34.0243 32.4556H33.2667C33.172 32.3925 33.0395 32.2157 33.2667 32.0137C33.5508 31.7612 33.8034 32.0137 34.1821 32.0137C34.5609 32.0137 35.0975 32.2662 35.7604 32.4556Z" fill="#EEAF74"/>
+<rect x="31.7015" y="32.5667" width="1.70447" height="1.16232" rx="0.58116" transform="rotate(-32.9021 31.7015 32.5667)" fill="#FFDDBD"/>
+<path d="M35.0344 33.8445C33.898 33.7182 33.3614 32.9922 33.2352 32.645H32.6986C32.6986 32.645 33.5193 34.1601 34.0243 34.823C34.5294 35.4859 35.4448 36.1803 36.4548 36.6853C37.4649 37.1904 38.3803 37.7901 39.1694 37.3798C39.9585 36.9694 40.4951 36.0856 40.8423 35.328C41.1896 34.5705 40.7476 34.1601 40.4951 33.8445C40.2426 33.5288 39.6429 34.0654 39.1694 34.1601C38.6959 34.2548 36.4548 34.0023 35.0344 33.8445Z" fill="#FFDDBD"/>
+<path d="M39.8249 31.116C39.8249 32.9409 38.0143 33.6562 36.8893 33.5153C35.3184 33.5154 35.4614 32.3108 35.6111 31.116C35.7607 29.9213 36.3061 29.0478 37.4311 29.1887C38.5561 29.3296 39.8249 29.6644 39.8249 31.116Z" fill="#FFDDBD"/>
+<path d="M37.0544 34.2548L37.5596 32.9923L38.759 32.3294L39.343 32.4872L38.759 34.9177L37.0544 34.2548Z" fill="#FFDDBD"/>
+<path d="M36.1392 30.3092C36.3412 30.2461 36.9915 30.4618 37.2913 30.5775L37.7647 30.9721L36.6442 31.0826C36.6126 31.2983 36.5337 31.7517 36.4706 31.8401C36.3916 31.9506 35.9813 31.9664 35.6972 31.8401C35.4131 31.7139 35.5868 31.0826 35.6026 30.7669C35.6183 30.4513 35.8866 30.3881 36.1392 30.3092Z" fill="black"/>
+<path d="M39.8476 34.7129C39.8386 34.5005 39.7721 34.3309 39.715 34.1854C39.6831 34.104 39.6541 34.0301 39.6399 33.9605L40.0341 33.8377C40.0512 33.9213 40.0995 34.0137 40.1532 34.1165C40.2386 34.28 40.3377 34.4698 40.3472 34.6917C40.3621 35.0431 40.3445 35.4463 40.2205 35.7407C40.1087 36.0062 39.8744 36.38 39.6399 36.7255C39.6062 36.7752 39.5722 36.8247 39.5382 36.8737L39.6047 36.8662C39.6996 36.8555 39.7767 36.8469 39.8323 36.8432C39.7668 36.9297 39.6609 37.0655 39.5334 37.2287C39.0878 37.7997 38.3796 38.7069 38.2225 39.0211C38.0929 39.2805 38.2046 39.3946 38.4038 39.5981C38.5925 39.7909 38.8598 40.064 39.0748 40.6168C38.3172 40.7115 36.7705 40.6941 35.9499 40.41C35.2933 40.1827 33.9718 39.179 33.3931 38.7055C33.5825 38.3372 34.037 37.4871 34.3401 37.0325C34.6431 36.578 35.0134 36.1067 35.1607 35.9278C35.3166 36.0241 35.5884 36.1719 35.9291 36.3248C36.213 35.8728 36.5373 35.3322 36.6684 35.0371C36.7472 34.8598 36.768 34.6465 36.7547 34.4397C36.7415 34.2339 36.696 34.0553 36.6619 33.9615L37.1253 33.9615C37.1387 33.9983 37.153 34.0292 37.167 34.0596C37.2053 34.1427 37.2418 34.2217 37.2537 34.4077C37.2699 34.6608 37.2485 34.963 37.1253 35.2402C36.9884 35.5482 36.6768 36.0718 36.3974 36.519C36.7372 36.6484 37.1138 36.7666 37.4965 36.8432C37.9859 36.941 38.4753 36.949 38.8857 36.9288C38.9943 36.7793 39.112 36.613 39.2262 36.4447C39.4619 36.0974 39.6695 35.761 39.7597 35.5467C39.8377 35.3613 39.8621 35.0543 39.8476 34.7129Z" fill="#3BB15C"/>
+<path d="M42.4206 31.7928C41.562 31.5655 40.9686 31.6981 40.7792 31.7928L38.2224 31.4771L38.759 33.0554C38.9379 33.2763 39.4409 33.8255 40.0216 34.2548C40.7476 34.7914 41.3158 34.6652 42.2312 34.8546C41.6504 34.6273 41.1475 33.834 40.9686 33.4657C41.1895 33.6025 41.8966 33.9897 42.9572 34.4442C44.0178 34.8987 46.2399 34.5073 47.2184 34.2548C46.4819 34.2443 44.8384 34.1854 44.1566 34.0339C43.4748 33.8824 42.7152 33.0659 42.4206 32.6766C42.7047 32.5924 43.62 32.5503 45.0089 33.0554C44.7564 32.5503 43.4938 32.0768 42.4206 31.7928Z" fill="#B36B16"/>
+<path d="M20.5045 46.6491L48.3018 48.2783C45.4508 47.4637 39.5655 45.8346 38.8324 45.8346C37.916 45.8346 40.1561 43.9 38.1196 43.9C36.0832 43.9 31.7049 45.8346 30.9921 45.8346C30.2794 45.8346 31.9085 44.6127 29.9739 44.4091C28.0393 44.2054 27.632 45.8346 26.512 45.8346C25.392 45.8346 26.2065 44.2054 24.9847 43.9C23.7628 43.5945 22.541 45.7328 21.93 45.8346C21.4413 45.916 20.776 46.4116 20.5045 46.6491Z" fill="white"/>
+<path d="M19.7468 46.8617L47.5441 48.4908C44.6931 47.6762 38.8078 46.0471 38.0747 46.0471C37.1583 46.0471 39.3984 44.1125 37.3619 44.1125C35.3255 44.1125 30.9472 46.0471 30.2344 46.0471C29.5217 46.0471 31.1508 44.8252 29.2162 44.6216C27.2816 44.4179 26.8743 46.0471 25.7543 46.0471C24.6343 46.0471 25.4488 44.4179 24.227 44.1125C23.0051 43.807 21.7833 45.9453 21.1723 46.0471C20.6836 46.1286 20.0184 46.6241 19.7468 46.8617Z" fill="#4ABEFF"/>
+<path d="M37.2438 29.457C36.9661 29.4064 36.3916 29.6253 36.1391 29.7411C35.9918 29.4885 35.7477 28.8951 35.9497 28.5416C36.2022 28.0997 36.7388 28.0997 38.0014 27.8787C39.264 27.6577 39.5796 28.3522 40.5266 28.9835C41.4735 29.6148 42.3889 29.7411 44.8825 30.0251C43.7645 30.5965 41.8012 30.4 40.9165 30.2232C41.8772 30.422 44.1934 31.1161 46.2129 32.398C46.2441 32.4162 46.2741 32.4354 46.3029 32.4556C46.273 32.4363 46.243 32.4171 46.2129 32.398C45.5624 32.0165 44.4246 32.0438 43.4305 32.0137C42.3889 31.9821 41.1579 32.4556 39.5796 32.4556H38.7274H38.4749C38.1592 32.0768 37.4711 31.212 37.2438 30.7827C36.9598 30.2461 36.7388 29.7411 37.2438 29.457Z" fill="#E19030"/>
+<path d="M7.78678 8.79104C2.32528 14.1539 1.85376 18.2562 1.85376 18.2562L6.09584 21.5691L6.44379 21.2274C7.02275 20.7241 8.56373 19.6922 10.0995 19.5881C11.2682 19.5089 12.7968 19.9434 14.003 20.2862C14.2085 20.3446 14.4046 20.4004 14.5879 20.4504C15.9681 21.068 17.5219 20.833 18.7346 19.6422C19.9736 18.4256 20.2638 16.7932 19.6416 15.3586C19.6019 15.2046 19.559 15.0425 19.5145 14.8742C19.1937 13.662 18.7871 12.1258 18.8876 10.9587C19.0197 9.42505 20.0795 7.90312 20.5932 7.33342L17.1561 2.38715C17.1561 2.38715 13.2483 3.42813 7.78678 8.79104Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.4458 11.0609C7.19017 14.2578 5.07212 18.4662 4.20878 20.1071L3.34268 19.5192C4.24853 17.7975 6.39378 13.6244 9.73166 10.3467C13.0758 7.06296 16.8936 5.51801 18.6826 4.5858L19.3015 5.49042C17.5638 6.3959 13.6952 7.87018 10.4458 11.0609Z" fill="#E26060"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.20793 9.72779C5.87152 13.004 3.78048 17.398 2.8994 19.0834L2.06423 18.4103C2.98868 16.642 5.1207 12.3725 8.54137 9.01362C11.9685 5.6484 15.7979 3.966 17.6351 3.01456L18.2065 3.87157C16.4219 4.79572 12.5379 6.45792 9.20793 9.72779Z" fill="#5A64C2"/>
+<path d="M13.1874 9.30775C14.3345 10.4611 16.2661 11.712 18.8769 11.7541L18.893 10.7543C16.664 10.7183 14.9969 9.671 13.9911 8.69745L13.1874 9.30775Z" fill="#BCBCBC"/>
+<path d="M7.86706 14.459L7.27295 15.2866C8.13913 16.2331 9.07651 17.6954 9.25919 19.4881L10.254 19.3867C10.0348 17.2357 8.88966 15.5264 7.86706 14.459Z" fill="#BCBCBC"/>
+</svg>

src/components/ContainerComponents/FluidChartContainer/FluidChartContainer.tsx

@@ -112,7 +112,7 @@ const FluidChartContainer: React.FC<FluidChartContainerProps> = ({
 
   return (
     <>
-      {isLoaded ? (
+      {isLoaded && (
         <>
           {isMinuteBlocked && timeStep === TimeStep.HALF_AN_HOUR && (
             <ActivateHalfHourLoad />
@@ -134,7 +134,7 @@ const FluidChartContainer: React.FC<FluidChartContainerProps> = ({
             </div>
           </div>
         </>
-      ) : null}
+      )}
     </>
   )
 }

src/components/ContainerComponents/Header/Header.tsx

@@ -54,12 +54,10 @@ const Header: React.FC<HeaderProps> = ({
       <div className="header-top">
         <div className="header-content">
           {textKey && (
-            <div className="header-text text-14-normal-uppercase">
-              {t(textKey)}
-            </div>
+            <div className="header-text text-22-bold">{t(textKey)}</div>
           )}
           {desktopTitleKey && (
-            <div className="header-text-desktop text-22-normal">
+            <div className="header-text-desktop text-22-bold">
               {displayBackArrow && (
                 <StyledIconButton
                   className="cv-button"

src/components/ContainerComponents/LegalContainer/LegalContainer.tsx

+import React from 'react'
+import { NavLink } from 'react-router-dom'
+import { translate } from 'cozy-ui/react/I18n'
+
+import StyledCard from 'components/CommonKit/Card/StyledCard'
+import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+import LegalIcon from 'assets/icons/ico/legal.svg'
+
+interface LegalContainerProps {
+  t: Function
+}
+
+const LegalContainer: React.FC<LegalContainerProps> = ({
+  t,
+}: LegalContainerProps) => {
+  return (
+    <div className="legal-root">
+      <div className="legal-content">
+        <div className="legal-header text-14-normal-uppercase">
+          {t('LEGAL.TITLE_LEGAL')}
+        </div>
+        <NavLink className="legal-card-link" to="parameters/Legal">
+          <StyledCard>
+            <div className="legal-card">
+              <div className="legal-card-content">
+                <StyledIcon
+                  className="legal-card-content-icon"
+                  icon={LegalIcon}
+                  size={50}
+                />
+                <div className="legal-card-content-title">
+                  {t('LEGAL.READ_LEGAL')}
+                </div>
+              </div>
+            </div>
+          </StyledCard>
+        </NavLink>
+      </div>
+    </div>
+  )
+}
+
+export default translate()(LegalContainer)

src/components/ContainerComponents/ViewContainer/AvailableChallengeDetailsViewContainer.tsx

@@ -12,7 +12,7 @@ import ChallengeManager from 'services/challengeDataManagerService'
 import { Client, withClient } from 'cozy-client'
 import StyledButtonValid from 'components/CommonKit/Button/StyledButtonValid'
 import { ScreenType } from 'enum/screen.enum'
-import AvailableChallengeIcon from 'assets/png/badges/available.png'
+import AvailableChallengeIcon from 'assets/png/badges/available-big.png'
 
 interface AvailableChallengeDetailsViewProps {
   location: any

src/components/ContainerComponents/ViewContainer/LegalViewContainer.tsx

+import React, { useState } from 'react'
+import CozyBar from 'components/ContainerComponents/CozyBar/CozyBar'
+import Header from 'components/ContainerComponents/Header/Header'
+import Content from 'components/ContainerComponents/Content/Content'
+
+const LegalViewContainer: React.FC = () => {
+  const [headerHeight, setHeaderHeight] = useState<number>(0)
+  const defineHeaderHeight = (height: number) => {
+    setHeaderHeight(height)
+  }
+  return (
+    <React.Fragment>
+      <CozyBar titleKey={'COMMON.APP_LEGAL_TITLE'} displayBackArrow={true} />
+      <Header
+        setHeaderHeight={defineHeaderHeight}
+        desktopTitleKey={'COMMON.APP_LEGAL_TITLE'}
+        displayBackArrow={true}
+      ></Header>
+      <Content height={headerHeight}>
+        <p>Mentions légales à venir</p>
+      </Content>
+    </React.Fragment>
+  )
+}
+
+export default LegalViewContainer

src/components/ContainerComponents/ViewContainer/OngoingChallengeDetailsViewContainer.tsx

@@ -124,14 +124,18 @@ const OngoingChallengeDetailsViewContainer: React.FC<OngoingChallengeDetailsView
                       ? null
                       : formatCompareChallengeDate(challenge)}
                   </div>
-                  <div className="cp-valid --ongoing">
-                    <StyledStopButton
-                      color="secondary"
-                      onClick={() => stopChallenge(challenge)}
-                    >
-                      {t('CHALLENGE.STOP')}
-                    </StyledStopButton>
-                  </div>
+                  {challenge.challengeType &&
+                    challenge.challengeType.type !==
+                      TypeChallenge.ACHIEVEMENT && (
+                      <div className="cp-valid --ongoing">
+                        <StyledStopButton
+                          color="secondary"
+                          onClick={() => stopChallenge(challenge)}
+                        >
+                          {t('CHALLENGE.STOP')}
+                        </StyledStopButton>
+                      </div>
+                    )}
                 </div>
                 <div className="cp-bottom">
                   <div className="cp-eg-content">
@@ -152,11 +156,14 @@ const OngoingChallengeDetailsViewContainer: React.FC<OngoingChallengeDetailsView
                 </div>
               </div>
             </div>
-            <EcogestureModal
-              opened={openEcogestureModal}
-              ecogesture={challenge.selectedEcogestures[challengeEcogesture]}
-              handleCloseClick={handleCloseClick}
-            />
+            {openEcogestureModal && (
+              <EcogestureModal
+                opened={openEcogestureModal}
+                ecogesture={challenge.selectedEcogestures[challengeEcogesture]}
+                handleCloseClick={handleCloseClick}
+                unlockedEcogesture={true}
+              />
+            )}
           </>
         )}
       </Content>

src/components/ContainerComponents/ViewContainer/ParametersViewContainer.tsx

@@ -4,6 +4,7 @@ import Header from 'components/ContainerComponents/Header/Header'
 import Content from 'components/ContainerComponents/Content/Content'
 import KonnectorViewerContainer from 'components/ContainerComponents/KonnectorViewerContainer/KonnectorViewerContainer'
 import FAQContainer from 'components/ContainerComponents/FAQContainer/FAQContainer'
+import LegalContainer from 'components/ContainerComponents/LegalContainer/LegalContainer'
 
 const ParametersViewContainer: React.FC = () => {
   const [headerHeight, setHeaderHeight] = useState<number>(0)
@@ -20,6 +21,7 @@ const ParametersViewContainer: React.FC = () => {
       <Content height={headerHeight}>
         <FAQContainer />
         <KonnectorViewerContainer isParam={true} />
+        <LegalContainer />
       </Content>
     </React.Fragment>
   )

src/components/ContainerComponents/ViewContainer/SingleFluidViewContainer.tsx

-import React, { useState } from 'react'
+import React, { useState, useEffect } from 'react'
 import StyledSpinner from 'components/CommonKit/Spinner/StyledSpinner'
 import CozyBar from 'components/ContainerComponents/CozyBar/CozyBar'
 import Header from 'components/ContainerComponents/Header/Header'
 import Content from 'components/ContainerComponents/Content/Content'
-import FluidContainer from 'components/ContainerComponents/FluidChartContainer/FluidChartContainer'
+import FluidChartContainer from 'components/ContainerComponents/FluidChartContainer/FluidChartContainer'
 import { FluidType } from 'enum/fluid.enum'
 import { TimeStep } from 'services/dataConsumptionContracts'
 import ConsumptionNavigator from 'components/ContentComponents/ConsumptionNavigator/ConsumptionNavigator'
@@ -43,6 +43,9 @@ const SingleFluidViewContainer: React.FC<SingleFluidViewContainerProps> = ({
   const defineHeaderHeight = (height: number) => {
     setHeaderHeight(height)
   }
+  useEffect(() => {
+    console.log('chart', isChartLoading, 'in', isIndicatorsLoading)
+  }, [isChartLoading, isIndicatorsLoading])
 
   return (
     <>
@@ -68,19 +71,25 @@ const SingleFluidViewContainer: React.FC<SingleFluidViewContainerProps> = ({
             <StyledSpinner size="5em" fluidTypes={fluidTypes} />
           </div>
         )}
-        <FluidContainer
-          timeStep={timeStep}
-          fluidTypes={fluidTypes}
-          resetReferenceDate={resetRefenceDate}
-          multiFluid={false}
-          handleClickTimeStep={handleClickTimeStepForFluidContainer}
-          setChartLoaded={setChartLoaded}
-        />
-        <SingleFluidIndicatorsContainer
-          timeStep={timeStep}
-          setIndicatorsLoaded={setIndicatorsLoaded}
-          fluidTypes={fluidTypes}
-        />
+        <div
+          className={`${
+            isChartLoading ? 'chart-indicator-none' : 'chart-indicator-display'
+          }`}
+        >
+          <FluidChartContainer
+            timeStep={timeStep}
+            fluidTypes={fluidTypes}
+            resetReferenceDate={resetRefenceDate}
+            multiFluid={false}
+            handleClickTimeStep={handleClickTimeStepForFluidContainer}
+            setChartLoaded={setChartLoaded}
+          />
+          <SingleFluidIndicatorsContainer
+            timeStep={timeStep}
+            setIndicatorsLoaded={setIndicatorsLoaded}
+            fluidTypes={fluidTypes}
+          />
+        </div>
       </Content>
     </>
   )

src/components/ContainerComponents/ViewContainer/ViewContainer.tsx

@@ -18,6 +18,7 @@ import OngoingChallengeDetailsViewContainer from './OngoingChallengeDetailsViewC
 import LockedChallengeDetailsViewContainer from './LockedChallengeDetailsViewContainer'
 import AvailableChallengeDetailsViewContainer from './AvailableChallengeDetailsViewContainer'
 import SplashContainer from 'components/ContainerComponents/SplashContainer/SplashContainer'
+import LegalViewContainer from './LegalViewContainer'
 
 export const history = createBrowserHistory()
 
@@ -103,6 +104,10 @@ export const ViewContainer = () => {
                           path={`${url}/FAQ`}
                           component={FAQViewContainer}
                         />
+                        <Route
+                          path={`${url}/legal`}
+                          component={LegalViewContainer}
+                        />
                         <Route
                           path={`${url}/`}
                           component={ParametersViewContainer}

src/components/ContentComponents/Challenge/OngoingChallengePile.tsx

@@ -39,7 +39,7 @@ const OngoingChallengePile: React.FC<OngoingChallengePileProps> = ({
 
   return (
     <React.Fragment>
-      <div className="pile-energy-follow">
+      <div className={`pile-energy-follow ${small ? '--home' : null}`}>
         <div className="pile-section">
           <div
             className="filter-pile"

src/components/ContentComponents/ChallengeList/ChallengeListItem.tsx

@@ -80,7 +80,6 @@ const ChallengeListItem: React.FC<ChallengeListItemProps> = ({
             <img
               className="cli-content-icon"
               src={defineBadge() ? defineBadge() : DefaultChallengeIcon}
-              width={62}
             ></img>
             <div className={`cli-content-title`}>
               {challengeState === 'available' && (

src/components/ContentComponents/ChallengeModal/ChallengeModal.tsx

@@ -3,7 +3,7 @@ import { translate } from 'cozy-ui/react/I18n'
 import { UserChallenge } from 'services/dataChallengeContracts'
 import Modal from 'components/CommonKit/Modal/Modal'
 import StyledSpinner from 'components/CommonKit/Spinner/StyledSpinner'
-import StarIcon from 'assets/png/challenge/star.png'
+import StarIcon from 'assets/icons/visu/challenge/star.svg'
 import StyledButtonValid from 'components/CommonKit/Button/StyledButtonValid'
 import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
 import { formatNumberValues } from 'utils/utils'
@@ -80,11 +80,11 @@ const ChallengeModal: React.FC<ChallengeModalProps> = ({
                 src={badgeIcon}
                 width={screenType === ScreenType.MOBILE ? 160 : 180}
               ></img>
-              <img
+              <StyledIcon
                 className="cm-win-star"
-                src={StarIcon}
-                width={screenType === ScreenType.MOBILE ? 300 : 400}
-              ></img>
+                icon={StarIcon}
+                size={ScreenType.MOBILE ? 260 : 320}
+              />
             </div>
             <div className="cm-txt">
               {' '}

src/components/ContentComponents/Charts/Bar.tsx

@@ -150,6 +150,7 @@ const Bar = (props: BarProps) => {
           )}, -40)`}
         >
           <rect
+            onClick={handleClick}
             x="0"
             y="0"
             width={showCompare ? getBandWidth() * 2 : getBandWidth()}

src/components/ContentComponents/EcogestureModal/EcogestureModal.tsx

@@ -10,6 +10,7 @@ import def from 'assets/icons/visu/ecogesture/default.svg'
 interface EcogestureModalProps {
   opened: boolean
   ecogesture: EcogestureType
+  unlockedEcogesture: boolean
   t: Function
   handleCloseClick: () => void
   handleStartClick: () => void
@@ -18,6 +19,7 @@ interface EcogestureModalProps {
 const EcogestureModal: React.FC<EcogestureModalProps> = ({
   opened,
   ecogesture,
+  unlockedEcogesture,
   t,
   handleCloseClick,
 }: EcogestureModalProps) => {
@@ -47,7 +49,7 @@ const EcogestureModal: React.FC<EcogestureModalProps> = ({
       {ecogesture && (
         <Modal
           open={opened}
-          border={ecogesture.unlocked}
+          border={ecogesture.unlocked || unlockedEcogesture}
           handleCloseClick={handleCloseClick}
         >
           <div className="em-header text-14-normal-uppercase">
@@ -56,7 +58,7 @@ const EcogestureModal: React.FC<EcogestureModalProps> = ({
           <div className="em-content-box">
             <div className="em-content-box-text">
               <div className="em-content-box-text-header">
-                {ecogesture.unlocked && ecogestureIcon && (
+                {(ecogesture.unlocked || unlockedEcogesture) && ecogestureIcon && (
                   <div>
                     <Icon className="icon" icon={ecogestureIcon} size={100} />
                   </div>

src/components/ContentComponents/FluidChart/FluidChartContent.tsx

-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect, useContext } from 'react'
 import { translate } from 'cozy-ui/react/I18n'
 import { DateTime } from 'luxon'
 import {
@@ -23,6 +23,8 @@ import ConsumptionVisualizer from 'components/ContentComponents/ConsumptionVisua
 
 import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
 import captionIcon from 'assets/icons/visu/challenge-caption-chart.svg'
+import { NavLink } from 'react-router-dom'
+import { AppContext } from 'components/Contexts/AppContextProvider'
 
 interface FluidChartContentProps {
   fluidTypes: FluidType[]
@@ -59,6 +61,12 @@ const FluidChartContent: React.FC<FluidChartContentProps> = ({
   >()
   const [showCompare, setShowCompare] = useState<boolean>(false)
   const [isLoaded, setIsLoaded] = useState<boolean>(true)
+  const { challengeNotification } = useContext(AppContext)
+  const challengesPath = 'challenges'
+  const challengeDetailPath = {
+    pathname: `challenges/ongoing`,
+    state: { challenge: currentChallenge },
+  }
   const challengePeriod: ITimePeriod | null =
     currentChallenge &&
     currentChallenge.startingDate &&
@@ -172,9 +180,21 @@ const FluidChartContent: React.FC<FluidChartContentProps> = ({
       ) : challengePeriod ? (
         <div className="fv-footer">
           <div className="fv-footer-challenge text-15-normal">
-            <StyledIcon icon={captionIcon} size={34} />
+            <NavLink
+              className="fv-link"
+              to={challengeNotification ? challengesPath : challengeDetailPath}
+            >
+              <StyledIcon icon={captionIcon} size={34} />
+            </NavLink>
             <span className="fv-footer-label-padding">
-              {t('CHALLENGE.PERIOD')}
+              <NavLink
+                className="fv-link"
+                to={
+                  challengeNotification ? challengesPath : challengeDetailPath
+                }
+              >
+                {t('CHALLENGE.PERIOD')}
+              </NavLink>
             </span>
           </div>
         </div>