diff --git a/src/assets/icons/ico/doing-disabled.svg b/src/assets/icons/ico/doing-disabled.svg
deleted file mode 100644
index 77db903d23e7a3521412f0f02e3f30218344f742..0000000000000000000000000000000000000000
--- a/src/assets/icons/ico/doing-disabled.svg
+++ /dev/null
@@ -1,18 +0,0 @@
-<svg width="40" height="41" viewBox="0 0 40 41" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_11435_1783)">
-<g clip-path="url(#clip1_11435_1783)">
-<path d="M22.6828 5.17873C22.6213 5.17821 22.5599 5.17769 22.5049 5.17578L20.1355 5.06101L20.1208 5.34363C20.036 5.36172 19.9527 5.38632 19.86 5.39928L18.5192 32.5978C18.6058 32.6202 18.6887 32.6571 18.7687 32.6809L18.7554 32.97L21.1249 33.0848L21.1235 33.0783C21.185 33.0788 21.2413 33.0872 21.3041 33.0943C28.2765 33.4403 34.2422 27.4707 34.6219 19.7618C35.0082 12.0515 29.6617 5.5234 22.6828 5.17873Z" fill="#666666"/>
-<path d="M32.1416 19.6335C32.5219 11.9257 27.175 5.39835 20.1991 5.05418C13.2231 4.71002 7.25973 10.6794 6.87946 18.3871C6.49919 26.0949 11.8461 32.6223 18.822 32.9664C25.798 33.3106 31.7614 27.3412 32.1416 19.6335Z" fill="#989898"/>
-<path d="M29.5447 19.505C29.847 13.3785 25.5995 8.1904 20.0577 7.91699C14.5159 7.64358 9.77837 12.3884 9.47612 18.5149C9.17386 24.6414 13.4213 29.8296 18.9631 30.103C24.5049 30.3764 29.2424 25.6315 29.5447 19.505Z" fill="#E5E5E5"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M25.3898 12.9541C26.0218 13.4046 26.1688 14.2822 25.7183 14.9142L18.6774 24.7898C18.4244 25.1447 18.0211 25.3621 17.5856 25.3784C17.1501 25.3946 16.7317 25.2079 16.4529 24.873L13.0806 20.8207C12.5842 20.2242 12.6653 19.3381 13.2619 18.8416C13.8585 18.3451 14.7445 18.4263 15.241 19.0228L17.4472 21.6738L23.4297 13.2825C23.8803 12.6506 24.7578 12.5035 25.3898 12.9541Z" fill="#C0C0C0"/>
-</g>
-</g>
-<defs>
-<clipPath id="clip0_11435_1783">
-<rect width="40" height="40" fill="white" transform="translate(0 0.5)"/>
-</clipPath>
-<clipPath id="clip1_11435_1783">
-<rect width="40" height="40" fill="white" transform="translate(0 0.5)"/>
-</clipPath>
-</defs>
-</svg>
diff --git a/src/assets/icons/ico/doing-enabled.svg b/src/assets/icons/ico/doing-enabled.svg
deleted file mode 100644
index 87ca053f52ebf01622b7ce52f26f83b7f2ff1c05..0000000000000000000000000000000000000000
--- a/src/assets/icons/ico/doing-enabled.svg
+++ /dev/null
@@ -1,19 +0,0 @@
-<svg width="40" height="41" viewBox="0 0 40 41" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_11435_1751)">
-<g clip-path="url(#clip1_11435_1751)">
-<path d="M22.6828 5.17873C22.6213 5.17821 22.5599 5.17769 22.5049 5.17578L20.1355 5.06101L20.1208 5.34363C20.036 5.36172 19.9527 5.38632 19.86 5.39928L18.5192 32.5978C18.6058 32.6202 18.6887 32.6571 18.7687 32.6809L18.7554 32.97L21.1249 33.0848L21.1235 33.0783C21.185 33.0788 21.2413 33.0872 21.3041 33.0943C28.2765 33.4403 34.2422 27.4707 34.6219 19.7618C35.0082 12.0515 29.6617 5.5234 22.6828 5.17873Z" fill="#2B6F1F"/>
-<path d="M34.4793 16.7926L31.863 16.192L18.5297 32.3908L18.5192 32.5975C18.6058 32.6199 18.6887 32.6568 18.7687 32.6806L18.7554 32.9697L21.1249 33.0845L21.1235 33.078C21.185 33.0785 21.2413 33.0869 21.3041 33.094C28.2765 33.44 34.2422 27.4705 34.6219 19.7615C34.6768 18.7409 34.6223 17.7505 34.4793 16.7926Z" fill="#295721"/>
-<path d="M32.1416 19.6335C32.5219 11.9257 27.175 5.39835 20.1991 5.05418C13.2231 4.71002 7.25973 10.6794 6.87946 18.3871C6.49919 26.0949 11.8461 32.6223 18.822 32.9664C25.798 33.3106 31.7614 27.3412 32.1416 19.6335Z" fill="#1ABA00"/>
-<path d="M29.5447 19.505C29.847 13.3785 25.5995 8.1904 20.0577 7.91699C14.5159 7.64358 9.77837 12.3884 9.47612 18.5149C9.17386 24.6414 13.4213 29.8296 18.9631 30.103C24.5049 30.3764 29.2424 25.6315 29.5447 19.505Z" fill="white"/>
-<path d="M26.1254 15.2044C26.7363 14.3476 26.5369 13.1578 25.6801 12.5469C24.8233 11.9361 23.6335 12.1355 23.0226 12.9923L17.4166 20.8554L15.6253 18.703C14.9522 17.8942 13.7509 17.7842 12.942 18.4573C12.1332 19.1304 12.0232 20.3317 12.6963 21.1406L16.0686 25.1928C16.4466 25.647 17.0139 25.9001 17.6043 25.878C18.1947 25.8559 18.7415 25.5612 19.0846 25.0801L26.1254 15.2044Z" fill="#1ABA00" stroke="white" stroke-linejoin="round"/>
-</g>
-</g>
-<defs>
-<clipPath id="clip0_11435_1751">
-<rect width="40" height="40" fill="white" transform="translate(0 0.5)"/>
-</clipPath>
-<clipPath id="clip1_11435_1751">
-<rect width="40" height="40" fill="white" transform="translate(0 0.5)"/>
-</clipPath>
-</defs>
-</svg>
diff --git a/src/assets/icons/ico/objective-disabled.svg b/src/assets/icons/ico/objective-disabled.svg
deleted file mode 100644
index b0304a2e21698302639bb0f63385ce1ab0838643..0000000000000000000000000000000000000000
--- a/src/assets/icons/ico/objective-disabled.svg
+++ /dev/null
@@ -1,15 +0,0 @@
-<svg width="40" height="41" viewBox="0 0 40 41" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_11435_2942)">
-<path d="M22.0284 4.8345C21.9671 4.83784 21.9057 4.84118 21.8507 4.84273L19.4788 4.87705L19.4819 5.16003C19.3984 5.1834 19.3168 5.2132 19.2251 5.23195L19.5957 32.461C19.6836 32.4779 19.7686 32.5095 19.85 32.5282L19.8549 32.8176L22.2268 32.7833L22.225 32.7769C22.2864 32.7735 22.3431 32.7784 22.4063 32.7815C29.3866 32.6888 34.9655 26.3562 34.8602 18.6387C34.7613 10.9193 29.0152 4.74003 22.0284 4.8345Z" fill="#666666"/>
-<path d="M32.3767 18.6669C32.272 10.9505 26.5256 4.77191 19.5418 4.8667C12.558 4.96148 6.98141 11.2937 7.08613 19.0101C7.19086 26.7265 12.9372 32.9051 19.921 32.8103C26.9048 32.7155 32.4814 26.3833 32.3767 18.6669Z" fill="#989898"/>
-<path d="M29.777 18.7024C29.6937 12.5691 25.1287 7.65802 19.5807 7.73332C14.0327 7.80862 9.60258 12.8417 9.68583 18.9751C9.76907 25.1085 14.3341 30.0195 19.8821 29.9442C25.4301 29.8689 29.8602 24.8358 29.777 18.7024Z" fill="#E5E5E5"/>
-<path d="M27.1838 18.7373C27.1221 14.187 23.7354 10.5435 19.6195 10.5994C15.5036 10.6552 12.217 14.3893 12.2788 18.9396C12.3406 23.4899 15.7272 27.1334 19.8431 27.0776C23.9591 27.0217 27.2456 23.2876 27.1838 18.7373Z" fill="#989898"/>
-<path d="M24.5908 18.7725C24.5506 15.8089 22.3423 13.436 19.6585 13.4724C16.9747 13.5088 14.8317 15.9408 14.8719 18.9044C14.9121 21.868 17.1204 24.241 19.8042 24.2046C22.488 24.1681 24.631 21.7361 24.5908 18.7725Z" fill="#E5E5E5"/>
-<path d="M21.9912 18.8076C21.9725 17.427 20.9455 16.3216 19.6975 16.3385C18.4495 16.3555 17.453 17.4884 17.4717 18.8689C17.4904 20.2495 18.5173 21.3549 19.7654 21.338C21.0134 21.321 22.0099 20.1881 21.9912 18.8076Z" fill="#989898"/>
-</g>
-<defs>
-<clipPath id="clip0_11435_2942">
-<rect width="40" height="40" fill="white" transform="translate(0 0.5)"/>
-</clipPath>
-</defs>
-</svg>
diff --git a/src/assets/icons/ico/objective-enabled.svg b/src/assets/icons/ico/objective-enabled.svg
deleted file mode 100644
index eb15ce13b268c126676d99edd9fdfbe7c7b0e0c3..0000000000000000000000000000000000000000
--- a/src/assets/icons/ico/objective-enabled.svg
+++ /dev/null
@@ -1,29 +0,0 @@
-<svg width="40" height="41" viewBox="0 0 40 41" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_11435_17184)">
-<path d="M22.0284 4.8345C21.9671 4.83784 21.9057 4.84118 21.8507 4.84273L19.4788 4.87705L19.4819 5.16003C19.3984 5.1834 19.3168 5.2132 19.2251 5.23195L19.5957 32.461C19.6836 32.4779 19.7686 32.5095 19.85 32.5282L19.8549 32.8176L22.2268 32.7833L22.225 32.7769C22.2864 32.7735 22.3431 32.7784 22.4063 32.7815C29.3866 32.6888 34.9655 26.3562 34.8602 18.6387C34.7613 10.9193 29.0152 4.74003 22.0284 4.8345Z" fill="#1B4D97"/>
-<path d="M34.5313 15.6846L31.8824 15.2496L19.5931 32.2541L19.5957 32.461C19.6835 32.478 19.7685 32.5096 19.8499 32.5283L19.8548 32.8177L22.2268 32.7834L22.225 32.777C22.2864 32.7736 22.3431 32.7785 22.4063 32.7816C29.3866 32.6889 34.9655 26.3563 34.8602 18.6387C34.8509 17.6167 34.7342 16.6317 34.5313 15.6846Z" fill="#0C2C5B"/>
-<path d="M32.3767 18.6669C32.272 10.9505 26.5256 4.77191 19.5418 4.8667C12.558 4.96148 6.98141 11.2937 7.08613 19.0101C7.19086 26.7265 12.9372 32.9051 19.921 32.8103C26.9048 32.7155 32.4814 26.3833 32.3767 18.6669Z" fill="#538DE3"/>
-<path d="M29.777 18.7024C29.6937 12.5691 25.1287 7.65802 19.5807 7.73332C14.0327 7.80862 9.60258 12.8417 9.68583 18.9751C9.76907 25.1085 14.3341 30.0195 19.8821 29.9442C25.4301 29.8689 29.8602 24.8358 29.777 18.7024Z" fill="white"/>
-<path d="M27.1838 18.7373C27.1221 14.187 23.7354 10.5435 19.6195 10.5994C15.5036 10.6552 12.217 14.3893 12.2788 18.9396C12.3406 23.4899 15.7272 27.1334 19.8431 27.0776C23.9591 27.0217 27.2456 23.2876 27.1838 18.7373Z" fill="#538DE3"/>
-<path d="M24.5908 18.7725C24.5506 15.8089 22.3423 13.436 19.6585 13.4724C16.9747 13.5088 14.8317 15.9408 14.8719 18.9044C14.9121 21.868 17.1204 24.241 19.8042 24.2046C22.488 24.1681 24.631 21.7361 24.5908 18.7725Z" fill="white"/>
-<path d="M21.9912 18.8076C21.9725 17.427 20.9455 16.3216 19.6975 16.3385C18.4495 16.3555 17.453 17.4884 17.4717 18.8689C17.4904 20.2495 18.5173 21.3549 19.7654 21.338C21.0134 21.321 22.0099 20.1881 21.9912 18.8076Z" fill="#538DE3"/>
-<path opacity="0.35" d="M9.97602 27.6783C10.3998 28.252 10.8677 28.7855 11.3733 29.2808L19.6986 19.7767L19.0851 19.2424L17.3469 19.2653L9.97602 27.6783Z" fill="#0C2C5B"/>
-<path d="M19.5667 17.9404C19.5534 17.9404 19.5401 17.9404 19.5334 17.9404L3.16672 13.5938V13.6004C3.42672 13.7271 3.54005 14.1738 3.41339 14.6604C3.28672 15.1404 2.96672 15.4738 2.68005 15.4604L19.0067 19.7938C19.0267 19.8071 19.0467 19.8138 19.0734 19.8204C19.3801 19.9004 19.7401 19.5471 19.8801 19.0271C20.0067 18.5071 19.8734 18.0204 19.5667 17.9404Z" fill="#BCB1C9"/>
-<path d="M19.9068 18.4404L19.1668 18.2471L19.0201 18.2071L3.44676 14.0737C3.46676 14.2204 3.46676 14.3871 3.42676 14.5671L18.7868 18.6471L19.0401 18.7137L19.8868 18.9404C19.9268 18.7537 19.9268 18.5871 19.9068 18.4404Z" fill="#EAEAEA"/>
-<path d="M19.18 19.2667L18.7067 19.14L3.25334 15.04C3.10001 15.3067 2.88001 15.4667 2.68001 15.4534L2.67334 15.4667L19.04 19.8134V19.8C19.0467 19.8067 19.06 19.8134 19.0667 19.8134C19.2867 19.8734 19.54 19.7 19.7133 19.4067L19.18 19.2667Z" fill="#8B8496"/>
-<path d="M3.44529 14.6675C3.58323 14.1479 3.44696 13.6609 3.14092 13.5796C2.83489 13.4984 2.47497 13.8537 2.33704 14.3732C2.1991 14.8928 2.33537 15.3798 2.64141 15.4611C2.94744 15.5423 3.30735 15.187 3.44529 14.6675Z" fill="#EAEAEA"/>
-<path d="M4.58001 13.9735L5.24001 14.1468L4.71334 11.5335L4.05334 11.3535L4.58001 13.9735Z" fill="#F3D4FE"/>
-<path d="M6.87996 14.5801L7.53996 14.7534L7.03329 12.0801L6.37329 11.9067L6.87996 14.5801Z" fill="#F3D4FE"/>
-<path d="M5.05338 14.1002L4.59338 11.4868C4.59338 11.4868 5.41338 11.7068 5.63338 11.7601C6.18672 11.9068 7.12672 13.6735 7.12672 13.6735L6.73338 12.0002C6.73338 12.0002 7.98005 12.3335 8.40005 12.4402C8.81338 12.5535 9.33338 15.2268 9.33338 15.2268L5.05338 14.1002Z" fill="#D96FFF"/>
-<path opacity="0.45" d="M8.33994 14.4204L7.41327 13.0337L7.70661 14.2537L4.43994 13.387L4.57994 13.9737L5.05994 14.1004L5.24661 14.147L9.34661 15.2337C9.34661 15.2337 9.29327 15.087 9.18661 14.6404L8.33994 14.4204Z" fill="#9F25CA"/>
-<path d="M4.08012 15.8472L4.74012 16.0205L2.98678 18.0338L2.32678 17.8538L4.08012 15.8472Z" fill="#B67DCA"/>
-<path d="M6.38019 16.4536L7.04019 16.6336L5.27353 18.7069L4.61353 18.5269L6.38019 16.4536Z" fill="#B67DCA"/>
-<path d="M4.56015 15.9736L2.86682 18.0136C2.86682 18.0136 3.68682 18.2336 3.90682 18.287C4.46015 18.4336 6.15349 17.367 6.15349 17.367L4.98015 18.627C4.98015 18.627 6.22682 18.9603 6.64682 19.067C7.06015 19.1803 8.84015 17.107 8.84015 17.107L4.56015 15.9736Z" fill="#8C18B6"/>
-<path opacity="0.45" d="M7.56674 17.3203L6.07341 18.0603L6.93341 17.147L3.70007 16.287L4.08007 15.8403L4.56007 15.967L4.74674 16.0137L8.84674 17.1003C8.84674 17.1003 8.75341 17.207 8.44674 17.547L7.56674 17.3203Z" fill="#590478"/>
-</g>
-<defs>
-<clipPath id="clip0_11435_17184">
-<rect width="40" height="40" fill="white" transform="translate(0 0.5)"/>
-</clipPath>
-</defs>
-</svg>
diff --git a/src/assets/icons/ico/selection-doing.svg b/src/assets/icons/ico/selection-doing.svg
new file mode 100644
index 0000000000000000000000000000000000000000..cab9486f119c6828936ba3b3a4deffbcfeaafa5b
--- /dev/null
+++ b/src/assets/icons/ico/selection-doing.svg
@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <path
+ d="M19 3H14.82C14.4 1.84 13.3 1 12 1C10.7 1 9.6 1.84 9.18 3H5C3.9 3 3 3.9 3 5V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19V5C21 3.9 20.1 3 19 3ZM12 3C12.55 3 13 3.45 13 4C13 4.55 12.55 5 12 5C11.45 5 11 4.55 11 4C11 3.45 11.45 3 12 3ZM9.29 16.29L6.7 13.7C6.31 13.31 6.31 12.68 6.7 12.29C7.09 11.9 7.72 11.9 8.11 12.29L10 14.17L15.88 8.29C16.27 7.9 16.9 7.9 17.29 8.29C17.68 8.68 17.68 9.31 17.29 9.7L10.7 16.29C10.32 16.68 9.68 16.68 9.29 16.29Z"
+ fill="currentColor" />
+</svg>
\ No newline at end of file
diff --git a/src/assets/icons/ico/selection-objective.svg b/src/assets/icons/ico/selection-objective.svg
new file mode 100644
index 0000000000000000000000000000000000000000..f4ea1d4c0143f3e54c4b908411d5f881715768e8
--- /dev/null
+++ b/src/assets/icons/ico/selection-objective.svg
@@ -0,0 +1,5 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <path
+ d="M19.5 3H15.32C14.9 1.84 13.8 1 12.5 1C11.2 1 10.1 1.84 9.68 3H5.5C4.4 3 3.5 3.9 3.5 5V19C3.5 20.1 4.4 21 5.5 21H19.5C20.6 21 21.5 20.1 21.5 19V5C21.5 3.9 20.6 3 19.5 3ZM12.5 3C13.05 3 13.5 3.45 13.5 4C13.5 4.55 13.05 5 12.5 5C11.95 5 11.5 4.55 11.5 4C11.5 3.45 11.95 3 12.5 3ZM12.15 17.65L7.5 13H10.5V9H14.5V13H17.5L12.85 17.65C12.66 17.84 12.34 17.84 12.15 17.65Z"
+ fill="currentColor" />
+</svg>
\ No newline at end of file
diff --git a/src/assets/icons/ico/selection-skip.svg b/src/assets/icons/ico/selection-skip.svg
new file mode 100644
index 0000000000000000000000000000000000000000..c90fd882314d4af9b4dc4eb74453e36b6c5fcb4f
--- /dev/null
+++ b/src/assets/icons/ico/selection-skip.svg
@@ -0,0 +1,5 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <path
+ d="M31.6667 5.00008H24.7C24 3.06675 22.1667 1.66675 20 1.66675C17.8333 1.66675 16 3.06675 15.3 5.00008H8.33333C6.5 5.00008 5 6.50008 5 8.33341V31.6667C5 33.5001 6.5 35.0001 8.33333 35.0001H31.6667C33.5 35.0001 35 33.5001 35 31.6667V8.33341C35 6.50008 33.5 5.00008 31.6667 5.00008ZM21.6667 30.0001H18.3333V26.6667H21.6667V30.0001ZM21.6667 21.6667C21.6667 22.5834 20.9167 23.3334 20 23.3334C19.0833 23.3334 18.3333 22.5834 18.3333 21.6667V15.0001C18.3333 14.0834 19.0833 13.3334 20 13.3334C20.9167 13.3334 21.6667 14.0834 21.6667 15.0001V21.6667ZM20 8.33341C19.0833 8.33341 18.3333 7.58341 18.3333 6.66675C18.3333 5.75008 19.0833 5.00008 20 5.00008C20.9167 5.00008 21.6667 5.75008 21.6667 6.66675C21.6667 7.58341 20.9167 8.33341 20 8.33341Z"
+ fill="#C74545" />
+</svg>
\ No newline at end of file
diff --git a/src/assets/icons/ico/skip-enabled.svg b/src/assets/icons/ico/skip-enabled.svg
deleted file mode 100644
index 791506267456762edfebe96bd22b15138f6cbd75..0000000000000000000000000000000000000000
--- a/src/assets/icons/ico/skip-enabled.svg
+++ /dev/null
@@ -1,14 +0,0 @@
-<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_11109_67546)">
-<path d="M34.0241 7.0181C33.9319 7.01732 33.8397 7.01654 33.7573 7.01368L30.2032 6.84152L30.1811 7.26545C30.054 7.29258 29.9289 7.32948 29.7899 7.34892L27.7788 48.1467C27.9087 48.1803 28.0329 48.2356 28.153 48.2713L28.1331 48.705L31.6873 48.8772L31.6852 48.8674C31.7774 48.8682 31.8619 48.8808 31.9561 48.8914C42.4147 49.4105 51.3632 40.4561 51.9328 28.8927C52.5123 17.3272 44.4924 7.53509 34.0241 7.0181Z" fill="#8C2929"/>
-<path d="M51.7189 24.4391L47.7945 23.5382L27.7944 47.8364L27.7788 48.1465C27.9087 48.1801 28.0329 48.2354 28.153 48.2711L28.1331 48.7049L31.6873 48.877L31.6852 48.8672C31.7774 48.868 31.8619 48.8807 31.9561 48.8912C42.4147 49.4103 51.3632 40.4559 51.9328 28.8925C52.0152 27.3616 51.9334 25.876 51.7189 24.4391Z" fill="#681818"/>
-<path d="M48.2123 28.7005C48.7827 17.1388 40.7624 7.34778 30.2985 6.83153C19.8346 6.31528 10.8895 15.2693 10.3191 26.831C9.74866 38.3926 17.769 48.1836 28.2329 48.6999C38.6968 49.2161 47.6419 40.2621 48.2123 28.7005Z" fill="#E24444"/>
-<path d="M44.3172 28.5078C44.7706 19.3181 38.3994 11.5358 30.0867 11.1257C21.774 10.7156 14.6677 17.8329 14.2144 27.0226C13.761 36.2124 20.1322 43.9946 28.4449 44.4047C36.7575 44.8148 43.8638 37.6975 44.3172 28.5078Z" fill="white"/>
-<rect x="39.1628" y="12" width="6.17925" height="37" transform="rotate(45 39.1628 12)" fill="#E24444"/>
-</g>
-<defs>
-<clipPath id="clip0_11109_67546">
-<rect width="60" height="60" fill="white"/>
-</clipPath>
-</defs>
-</svg>
diff --git a/src/assets/icons/visu/bulbEmpty.svg b/src/assets/icons/visu/bulbEmpty.svg
new file mode 100644
index 0000000000000000000000000000000000000000..4c5236c744c157d8670f81596cfcd53577085103
--- /dev/null
+++ b/src/assets/icons/visu/bulbEmpty.svg
@@ -0,0 +1,5 @@
+<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <path
+ d="M8.50001 2.00024C8.19334 2.00024 7.88001 2.02691 7.56667 2.09358C5.72667 2.44691 4.26001 3.93358 3.91334 5.77358C3.59334 7.51358 4.23334 9.11358 5.39334 10.1469C5.68001 10.4002 5.83334 10.7536 5.83334 11.1269V12.6669C5.83334 13.4002 6.43334 14.0002 7.16667 14.0002H7.35334C7.58667 14.4002 8.00667 14.6669 8.50001 14.6669C8.99334 14.6669 9.42001 14.4002 9.64667 14.0002H9.83334C10.5667 14.0002 11.1667 13.4002 11.1667 12.6669V11.1269C11.1667 10.7602 11.3133 10.4002 11.5933 10.1536C12.56 9.30024 13.1667 8.05358 13.1667 6.66691C13.1667 4.08691 11.08 2.00024 8.50001 2.00024ZM8.83334 9.33358H8.16667V7.60691L6.94667 6.39358L7.42001 5.92024L8.50001 7.00024L9.58001 5.92024L10.0533 6.39358L8.83334 7.61358V9.33358ZM9.50001 12.6669C9.49334 12.6669 9.48667 12.6602 9.48001 12.6602V12.6669H7.52001V12.6602C7.51334 12.6602 7.50667 12.6669 7.50001 12.6669C7.31334 12.6669 7.16667 12.5202 7.16667 12.3336C7.16667 12.1469 7.31334 12.0002 7.50001 12.0002C7.50667 12.0002 7.51334 12.0069 7.52001 12.0069V12.0002H9.48001V12.0069C9.48667 12.0069 9.49334 12.0002 9.50001 12.0002C9.68667 12.0002 9.83334 12.1469 9.83334 12.3336C9.83334 12.5202 9.68667 12.6669 9.50001 12.6669ZM9.50001 11.3336H7.50001C7.31334 11.3336 7.16667 11.1869 7.16667 11.0002C7.16667 10.8136 7.31334 10.6669 7.50001 10.6669H9.50001C9.68667 10.6669 9.83334 10.8136 9.83334 11.0002C9.83334 11.1869 9.68667 11.3336 9.50001 11.3336Z"
+ fill="#3E414E" />
+</svg>
\ No newline at end of file
diff --git a/src/assets/icons/visu/bulbFilled.svg b/src/assets/icons/visu/bulbFilled.svg
new file mode 100644
index 0000000000000000000000000000000000000000..0f47b034fd1448fe7a1befe4d2269df112e622de
--- /dev/null
+++ b/src/assets/icons/visu/bulbFilled.svg
@@ -0,0 +1,20 @@
+<svg width="19" height="21" viewBox="0 0 19 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <g filter="url(#filter0_d_7458_86831)">
+ <path
+ d="M9.50001 4.00024C9.19334 4.00024 8.88001 4.02691 8.56667 4.09358C6.72667 4.44691 5.26001 5.93358 4.91334 7.77358C4.59334 9.51358 5.23334 11.1136 6.39334 12.1469C6.68001 12.4002 6.83334 12.7536 6.83334 13.1269V14.6669C6.83334 15.4002 7.43334 16.0002 8.16667 16.0002H8.35334C8.58667 16.4002 9.00667 16.6669 9.50001 16.6669C9.99334 16.6669 10.42 16.4002 10.6467 16.0002H10.8333C11.5667 16.0002 12.1667 15.4002 12.1667 14.6669V13.1269C12.1667 12.7602 12.3133 12.4002 12.5933 12.1536C13.56 11.3002 14.1667 10.0536 14.1667 8.66691C14.1667 6.08691 12.08 4.00024 9.50001 4.00024ZM9.83334 11.3336H9.16667V9.60691L7.94667 8.39358L8.42001 7.92024L9.50001 9.00024L10.58 7.92024L11.0533 8.39358L9.83334 9.61358V11.3336ZM10.5 14.6669C10.4933 14.6669 10.4867 14.6602 10.48 14.6602V14.6669H8.52001V14.6602C8.51334 14.6602 8.50667 14.6669 8.50001 14.6669C8.31334 14.6669 8.16667 14.5202 8.16667 14.3336C8.16667 14.1469 8.31334 14.0002 8.50001 14.0002C8.50667 14.0002 8.51334 14.0069 8.52001 14.0069V14.0002H10.48V14.0069C10.4867 14.0069 10.4933 14.0002 10.5 14.0002C10.6867 14.0002 10.8333 14.1469 10.8333 14.3336C10.8333 14.5202 10.6867 14.6669 10.5 14.6669ZM10.5 13.3336H8.50001C8.31334 13.3336 8.16667 13.1869 8.16667 13.0002C8.16667 12.8136 8.31334 12.6669 8.50001 12.6669H10.5C10.6867 12.6669 10.8333 12.8136 10.8333 13.0002C10.8333 13.1869 10.6867 13.3336 10.5 13.3336Z"
+ fill="#F1C017" />
+ </g>
+ <defs>
+ <filter id="filter0_d_7458_86831" x="-2.5" y="-1.99976" width="24" height="24" filterUnits="userSpaceOnUse"
+ color-interpolation-filters="sRGB">
+ <feFlood flood-opacity="0" result="BackgroundImageFix" />
+ <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+ result="hardAlpha" />
+ <feOffset />
+ <feGaussianBlur stdDeviation="2" />
+ <feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 0.776471 0 0 0 0 0 0 0 0 0.5 0" />
+ <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_7458_86831" />
+ <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_7458_86831" result="shape" />
+ </filter>
+ </defs>
+</svg>
\ No newline at end of file
diff --git a/src/assets/icons/visu/profileType/finish.svg b/src/assets/icons/visu/profileType/finish.svg
index 183f71af5baefcf5659a460b7bbab4d741b62903..0777b9d028930e85ade86f42d18fc1013dba4ec0 100644
--- a/src/assets/icons/visu/profileType/finish.svg
+++ b/src/assets/icons/visu/profileType/finish.svg
@@ -1,51 +1,77 @@
-<svg width="122" height="120" viewBox="0 0 122 120" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.949 96.3467L47.2925 34.2589L81.1894 73.6924L14.949 96.3467Z" fill="#F1C017"/>
-<path d="M14.949 96.3467L47.2925 34.2589L81.1894 73.6924L14.949 96.3467Z" fill="url(#paint0_linear)" fill-opacity="0.75"/>
-<ellipse cx="64.6199" cy="53.6501" rx="26" ry="4.5" transform="rotate(49.3178 64.6199 53.6501)" fill="url(#paint1_radial)"/>
-<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="14" y="34" width="68" height="63">
-<path d="M14.9481 96.3477L47.2915 34.2599L81.1884 73.6934L14.9481 96.3477Z" fill="url(#paint2_linear)"/>
-</mask>
-<g mask="url(#mask0)">
-<path d="M50.4959 51.6839L47.4674 53.9425L48.6796 57.5207L45.5957 55.3383L42.5672 57.5969L43.6898 53.9896L40.6059 51.8072L44.3836 51.7601L45.5061 48.1528L46.7183 51.731L50.4959 51.6839Z" fill="#E75503"/>
-<path d="M53.9503 66.0391L53.4346 71.9651L58.9113 74.2867L53.1159 75.6276L52.6003 81.5536L49.5342 76.4562L43.7389 77.7971L47.6393 73.3059L44.5732 68.2086L50.0499 70.5302L53.9503 66.0391Z" fill="#E75503"/>
-<path d="M73.9141 72.9168L72.5893 76.0504L75.1602 78.2787L71.7706 77.9871L70.4458 81.1207L69.6757 77.8069L66.2861 77.5153L69.1997 75.7588L68.4296 72.445L71.0005 74.6733L73.9141 72.9168Z" fill="#E75503"/>
-<path d="M38.7962 69.3335L33.3093 70.209L32.4464 75.6978L29.9183 70.75L24.4314 71.6255L28.3558 67.6921L25.8276 62.7443L30.7812 65.2612L34.7056 61.3278L33.8427 66.8166L38.7962 69.3335Z" fill="#E75503"/>
-<path d="M35.5569 90.1813L32.3892 90.6867L31.891 93.8555L30.4314 90.9991L27.2638 91.5045L29.5294 89.2337L28.0698 86.3772L30.9296 87.8302L33.1952 85.5594L32.6971 88.7283L35.5569 90.1813Z" fill="#E75503"/>
-</g>
-<g clip-path="url(#clip0)">
-<path d="M63.2257 24.0809C63.2644 22.5569 63.1814 21.033 63.1371 19.5091C63.0984 17.9741 63.1593 16.4502 63.2312 14.9207C63.2976 13.452 63.4746 11.9392 64.4207 10.7576C64.7029 10.4042 65.1123 10.1999 65.5051 9.99559C65.7707 9.85756 66.2189 9.74161 66.4236 9.52075C66.5398 9.39928 66.4236 8.95204 66.407 8.84713C66.3184 8.32811 66.1967 7.80909 66.0584 7.30112C65.9201 6.79314 65.7707 6.28516 65.5826 5.78823C65.6047 5.84345 65.3281 5.12566 65.2562 5.19743C65.0736 5.39069 64.6863 5.49559 64.4539 5.61154C64.0832 5.79928 63.6793 5.99253 63.3806 6.28516C62.3791 7.28455 62.1302 8.86921 62.0251 10.2109C61.7816 13.3195 62.0085 16.4115 61.9919 19.5257C61.9697 22.5514 61.2615 25.3453 59.6349 27.9183C58.0692 30.3864 55.8782 32.4073 53.6485 34.268C53.5323 34.3674 53.654 34.8643 53.6651 34.9416C53.7481 35.4606 53.8754 35.9796 54.0137 36.4876C54.0413 36.5981 54.7274 38.6631 54.8159 38.5913C57.0124 36.7637 59.1148 34.787 60.7027 32.3962C62.3681 29.895 63.1482 27.0735 63.2257 24.0809Z" fill="#F28D61"/>
-<path d="M78.0039 62.9962C79.0164 65.4422 81.2461 65.6299 83.6639 65.9281C86.3749 66.2594 88.3003 65.4643 90.624 64.1281C91.8246 63.4379 92.9754 62.7643 94.3199 62.3999C93.999 62.3336 93.6781 62.2729 93.3572 62.2066C93.7943 62.3447 94.2314 62.4882 94.6685 62.6263C95.3988 62.8637 96.1457 63.079 96.8926 63.2281C99.1942 63.6809 102.221 64.5477 104.334 63.1563C104.251 63.2115 101.889 62.5103 101.64 62.4717C101.009 62.3778 99.4598 61.9416 98.8623 62.3336C97.5067 62.814 97.6949 63.0514 99.4377 63.0569C99.0006 62.9189 98.5635 62.7753 98.1264 62.6373C97.1582 62.3281 96.1678 62.0851 95.1719 61.8974C93.4513 61.5716 91.5093 61.1631 89.7443 61.3784C88.0292 61.5882 86.6239 62.4551 85.1577 63.3054C84.0954 63.9183 83.0442 64.487 81.8823 64.8901C80.2391 65.2269 81.1908 65.4643 84.7372 65.5968C84.0456 65.2987 83.7413 64.4373 83.4813 63.8134C82.9944 62.6539 78.2086 63.4986 78.0039 62.9962Z" fill="#F2EC61"/>
-<path d="M72.952 50.0429C76.0061 51.2742 76.1278 46.3656 77.1956 44.6705C78.8942 41.976 82.3964 46.0122 84.5818 43.6877C85.3675 42.8539 85.1793 41.1975 85.2181 40.1594C85.2845 38.2656 85.799 36.1398 87.3814 34.9361C88.3939 34.1686 89.8711 34.1631 91.0772 34.0748C92.9749 33.9367 94.9501 33.749 96.5159 32.5785C99.2214 30.5521 96.3001 26.1625 98.2698 23.8766C98.906 23.1367 100.599 23.6558 101.396 23.722C103.293 23.8711 104.666 23.076 105.578 21.4472C106.336 20.0889 106.696 18.5926 107.891 17.5104C108.815 16.6766 110.198 16.8643 111.338 16.9748C112.351 17.0742 113.468 17.2785 114.425 16.8312C115.449 16.3508 115.239 14.7662 115.139 13.8883C115.106 13.6177 115.067 13.3416 115.023 13.0711C114.929 12.4306 114.868 11.5748 114.536 11.0005C114.464 10.8735 114.514 12.0827 114.536 12.2263C114.885 14.5508 110.077 13.4686 109.02 13.4962C105.883 13.5791 105.711 17.814 103.852 19.5257C102.679 20.6079 100.942 20.365 99.5036 20.1938C98.4468 20.0668 97.6833 20.1662 97.2462 21.2153C96.0069 24.2024 98.5243 28.0067 94.8782 29.8232C92.2391 31.1373 88.5764 29.8785 86.3136 31.9435C85.1793 32.9815 84.7478 34.8036 84.5929 36.2558C84.449 37.6306 84.8197 39.414 83.7906 40.5073C81.6771 42.749 78.5345 38.6907 76.5981 41.2858C75.3477 42.9643 75.4971 47.9281 72.3545 46.6582C72.6865 46.7852 72.2106 49.7447 72.952 50.0429Z" fill="#EF61F2"/>
-<path d="M74.1645 31.8446C75.9405 31.7066 74.8173 29.3048 74.9225 28.2281C75.094 26.5164 77.7552 27.6318 78.2587 25.9864C78.4357 25.3956 77.9489 24.6391 77.7165 24.1256C77.296 23.1925 77.0304 22.044 77.5062 21.0833C77.8105 20.4704 78.5243 20.1115 79.0831 19.7802C79.9683 19.2612 80.8757 18.698 81.3515 17.7538C82.1703 16.125 79.7027 14.7005 80.1066 13.1269C80.2394 12.6189 81.18 12.4643 81.5839 12.3042C82.5355 11.9232 83.0113 11.2109 83.0611 10.206C83.0998 9.36673 82.9117 8.55507 83.2326 7.74894C83.4816 7.12501 84.1953 6.88206 84.7707 6.6612C85.2797 6.46795 85.8773 6.29679 86.2258 5.85507C86.6076 5.36918 86.1207 4.65691 85.8607 4.25384C85.7777 4.13237 85.6947 4.00538 85.6062 3.8839C85.407 3.59679 85.1691 3.19924 84.8703 3.00047C84.8039 2.9563 85.1193 3.53053 85.1635 3.59127C85.8939 4.6293 83.3045 5.25875 82.8011 5.52378C81.3017 6.31335 82.2423 8.40599 81.7554 9.67593C81.4455 10.4821 80.5492 10.7802 79.8134 11.0397C79.2712 11.233 78.9282 11.4649 78.9669 12.0778C79.0831 13.817 81.2187 15.0538 79.8909 16.8042C78.9282 18.0686 76.8589 18.3391 76.2614 19.8796C75.9626 20.6526 76.195 21.6354 76.4661 22.3753C76.7261 23.071 77.3347 23.8496 77.0968 24.6226C76.6155 26.2127 74.1202 25.0035 73.8104 26.7207C73.6112 27.8305 74.8727 30.1937 73.0469 30.3373C73.2516 30.3318 73.7329 31.8778 74.1645 31.8446Z" fill="#61F26F"/>
-<path d="M84.3942 54.7639C85.6335 56.0393 86.7677 53.6375 87.664 53.0356C89.0915 52.0749 89.938 54.8301 91.5259 54.1565C92.0957 53.9135 92.3668 53.0577 92.6103 52.5497C93.0584 51.6277 93.7777 50.689 94.8178 50.4405C95.4873 50.2804 96.2176 50.6007 96.8317 50.816C97.8 51.1583 98.8125 51.5007 99.8471 51.2577C101.629 50.8436 101.142 48.0387 102.613 47.3375C103.089 47.1111 103.809 47.735 104.19 47.9393C105.092 48.4252 105.944 48.3313 106.752 47.7295C107.427 47.2215 107.93 46.5645 108.755 46.2884C109.397 46.0786 110.038 46.4706 110.575 46.7743C111.051 47.0393 111.565 47.3872 112.13 47.3706C112.738 47.3596 112.982 46.5313 113.126 46.0731C113.17 45.9295 113.209 45.7859 113.247 45.6424C113.341 45.3056 113.496 44.8694 113.458 44.516C113.447 44.4332 113.209 45.0461 113.192 45.1178C112.854 46.3436 110.719 44.7589 110.193 44.5436C108.628 43.9031 107.615 45.9571 106.326 46.3988C105.513 46.6804 104.705 46.178 104.035 45.7804C103.537 45.4878 103.145 45.3718 102.696 45.7915C101.435 46.9951 101.844 49.4246 99.6479 49.5295C98.06 49.6068 96.5219 48.1878 94.9561 48.7123C94.1705 48.9773 93.5564 49.7835 93.1635 50.4681C92.7929 51.1142 92.5826 52.0804 91.8357 52.3951C90.3031 53.0467 89.6337 50.3577 88.1122 51.2191C87.1273 51.7767 86.1204 54.2614 84.8423 52.9473C84.9751 53.0964 84.0899 54.4547 84.3942 54.7639Z" fill="#F26161"/>
-<path d="M65.107 43.136C65.5939 43.2685 66.0753 43.1028 66.529 42.9482C67.1818 42.7219 67.807 42.4127 68.4599 42.1808C68.6148 42.1256 67.5414 40.4912 67.4806 40.4084C67.3699 40.2427 66.446 38.7519 66.1638 38.8568C65.5663 39.0722 64.9909 39.3317 64.4044 39.5636C63.912 39.7568 63.3476 39.9611 62.811 39.8176C62.7446 39.7955 63.0599 40.4415 63.0267 40.3808C63.2591 40.7949 63.5192 41.1979 63.7903 41.59C64.0614 41.982 64.3435 42.3685 64.6534 42.7329C64.764 42.8599 64.9245 43.0863 65.107 43.136Z" fill="#61F28A"/>
-<path d="M65.5164 53.9793C65.8207 54.0511 66.1471 53.8523 66.4625 53.6591C66.9106 53.383 67.3477 53.0407 67.7959 52.7646C67.901 52.6984 67.3699 51.318 67.3367 51.2462C67.2813 51.1082 66.8332 49.8438 66.6395 49.9652C66.2301 50.2192 65.8262 50.5174 65.4223 50.7879C65.0848 51.0143 64.6976 51.2573 64.3601 51.18C64.3158 51.1689 64.4596 51.7266 64.4431 51.6714C64.5482 52.0303 64.681 52.3671 64.8193 52.6928C64.9521 53.0241 65.1014 53.3499 65.2619 53.6481C65.3228 53.764 65.4002 53.9517 65.5164 53.9793Z" fill="#F2B861"/>
-<path d="M74.5896 7.03599C74.8884 7.10777 75.2204 6.909 75.5357 6.71575C75.9839 6.43967 76.421 6.09734 76.8691 5.82127C76.9742 5.75501 76.4431 4.37464 76.4099 4.30286C76.3546 4.16483 75.9064 2.90041 75.7128 3.02188C75.3034 3.27587 74.8995 3.57403 74.4956 3.84458C74.1526 4.07096 73.7708 4.31391 73.4333 4.23661C73.389 4.22556 73.5329 4.77771 73.5163 4.72802C73.6269 5.08691 73.7542 5.42372 73.8925 5.75501C74.0308 6.0863 74.1692 6.41207 74.3351 6.71023C74.396 6.81513 74.4735 7.00838 74.5896 7.03599Z" fill="#61F0F2"/>
-<path d="M119.71 39.4413C120.014 39.5131 120.34 39.3143 120.656 39.121C121.104 38.845 121.541 38.5026 121.989 38.2265C122.094 38.1603 121.563 36.7799 121.53 36.7081C121.475 36.5701 121.027 35.3057 120.833 35.4272C120.423 35.6811 120.02 35.9793 119.616 36.2499C119.273 36.4762 118.885 36.7192 118.553 36.6419C118.509 36.6308 118.653 37.1885 118.636 37.1333C118.747 37.4922 118.874 37.829 119.013 38.1548C119.151 38.4861 119.289 38.8118 119.455 39.11C119.511 39.2259 119.594 39.4137 119.71 39.4413Z" fill="#61F0F2"/>
-<path d="M53.1619 26.0022C53.4662 26.0739 53.7926 25.8752 54.108 25.6874C54.5562 25.4114 54.9932 25.069 55.4414 24.7929C55.5465 24.7267 55.0154 23.3463 54.9822 23.2745C54.9268 23.1365 54.4787 21.8721 54.2851 21.9936C53.8756 22.2475 53.4717 22.5457 53.0679 22.8163C52.7304 23.0426 52.3431 23.2856 52.0056 23.2083C51.9613 23.1972 52.1052 23.7549 52.0886 23.6997C52.1937 24.0586 52.3265 24.3954 52.4593 24.7267C52.5976 25.058 52.7414 25.3837 52.9019 25.6819C52.9683 25.7813 53.0457 25.9745 53.1619 26.0022Z" fill="#61F0F2"/>
-<path d="M107.111 39.536C107.415 39.6078 107.747 39.409 108.057 39.2157C108.505 38.9397 108.942 38.5973 109.391 38.3213C109.496 38.255 108.965 36.8802 108.931 36.8029C108.876 36.6648 108.428 35.4004 108.234 35.5219C107.825 35.7759 107.426 36.074 107.017 36.3446C106.68 36.571 106.292 36.8139 105.955 36.7366C105.911 36.7256 106.054 37.2832 106.038 37.228C106.143 37.5869 106.276 37.9237 106.408 38.255C106.547 38.5863 106.691 38.9121 106.851 39.2102C106.917 39.3207 106.995 39.5084 107.111 39.536Z" fill="#F2D261"/>
-<path d="M78.4188 35.7532L76.9748 35.0133L75.5418 35.7808L75.8018 34.1851L74.6289 33.0642L76.2334 32.8157L76.9361 31.3525L77.6719 32.7992L79.2764 33.02L78.1256 34.163L78.4188 35.7532Z" fill="#61F0F2"/>
-<path d="M95.1603 9.68597L95.0663 8.9461L94.4023 8.60377L95.0773 8.28904L95.1991 7.55469L95.7081 8.09579L96.4439 7.97984L96.0843 8.63137L96.4218 9.29947L95.6915 9.16144L95.1603 9.68597Z" fill="#61F0F2"/>
-<path d="M95.3433 42.5886L94.613 42.677L94.2755 43.334L93.9657 42.6659L93.2354 42.55L93.772 42.0475L93.6614 41.3242L94.3087 41.6776L94.9616 41.3463L94.8232 42.0641L95.3433 42.5886Z" fill="#61F0F2"/>
-<path d="M110.254 60.4238L108.833 59.59L107.35 60.2857L107.698 58.6845L106.575 57.4863L108.213 57.3262L109.01 55.8906L109.668 57.3925L111.278 57.7017L110.05 58.7949L110.254 60.4238Z" fill="#61F0F2"/>
-<path d="M69.0132 19.1453L68.9081 18.3116L68.1611 17.9306L68.9191 17.5717L69.0574 16.749L69.6273 17.3564L70.4572 17.2294L70.0533 17.9637L70.4296 18.7091L69.6052 18.5545L69.0132 19.1453Z" fill="#61F0F2"/>
-<path d="M116.578 27.6697L115.566 26.9851L114.432 27.4268L114.769 26.2618L114 25.3176L115.217 25.2789L115.876 24.252L116.291 25.4004L117.469 25.7096L116.506 26.455L116.578 27.6697Z" fill="#61F0F2"/>
-</g>
-<defs>
-<linearGradient id="paint0_linear" x1="59.5" y1="75" x2="46.5" y2="49.5" gradientUnits="userSpaceOnUse">
-<stop stop-color="#E28904"/>
-<stop offset="1" stop-color="white" stop-opacity="0"/>
-</linearGradient>
-<radialGradient id="paint1_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(72.1199 57.6502) rotate(82.4053) scale(7.56637 43.7168)">
-<stop offset="0.1875" stop-color="#E65503"/>
-<stop offset="1" stop-color="#E69709"/>
-</radialGradient>
-<linearGradient id="paint2_linear" x1="39.2148" y1="75.4881" x2="44.8154" y2="85.8386" gradientUnits="userSpaceOnUse">
-<stop stop-color="#61F0F2"/>
-<stop offset="1" stop-color="#48C2C4"/>
-</linearGradient>
-<clipPath id="clip0">
-<rect width="70" height="63" fill="white" transform="translate(52 3)"/>
-</clipPath>
-</defs>
-</svg>
+<svg width="100" height="101" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <g clip-path="url(#clip0_7474_97331)">
+ <path
+ d="M88.717 88.1148C90.8649 85.9669 91.1918 83.5186 90.8383 82.4579L79.8781 40.385L41.3408 78.9224L83.0601 90.2361C84.1208 90.5896 86.5691 90.2626 88.717 88.1148Z"
+ fill="url(#paint0_linear_7474_97331)" />
+ <path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd"
+ d="M90.6104 85.1976L66.8794 58.5002L72.7013 47.5621L79.8781 40.3853L90.8383 82.4581C91.0334 83.0433 91.0213 84.051 90.6104 85.1976Z"
+ fill="#BD7E06" />
+ <path opacity="0.7" fill-rule="evenodd" clip-rule="evenodd"
+ d="M90.6378 85.1199L70.8794 54.0004L72.6379 47.6257L76.4228 43.8408L90.8414 84.3936C90.7912 84.6267 90.724 84.8698 90.6378 85.1199Z"
+ fill="#A86F03" />
+ <path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd"
+ d="M84.5024 90.263L48.5028 77L42.5122 77.3744L41.9556 77.931L83.8155 90.351C84.0305 90.3385 84.2607 90.31 84.5024 90.263Z"
+ fill="#BD7E06" />
+ <path fill-rule="evenodd" clip-rule="evenodd"
+ d="M68.8392 68.0989C73.8721 59.7697 75.9769 51.1468 74.8794 45.3841L77.5984 42.665C80.7605 47.9372 78.9965 58.6115 72.8143 68.8427C68.6249 75.776 63.3118 81.0077 58.4118 83.5521L54.8521 82.5868C59.6354 79.9676 64.7679 74.8367 68.8392 68.0989ZM67.8735 86.118C72.2825 83.3327 76.8787 78.524 80.5922 72.3784C82.7554 68.7983 84.3777 65.164 85.4373 61.7258L82.9408 52.1425C82.9411 57.6499 80.7815 64.7427 76.6171 71.6346C73.0061 77.6106 68.5603 82.3225 64.2637 85.1391L67.8735 86.118ZM81.0654 44.9433L80.549 42.9612C79.9778 42.8813 79.382 42.8656 78.7662 42.9114C78.8781 42.9701 78.9884 43.0323 79.0972 43.098C79.8717 43.5661 80.5272 44.1883 81.0654 44.9433ZM75.9706 88.3142C79.4411 86.3831 83.1342 82.9833 86.246 78.5553C87.1934 77.2072 88.0328 75.8406 88.7604 74.4813L87.539 69.7928C86.5411 72.394 85.0944 75.1188 83.2297 77.7723C80.1305 82.1823 76.4547 85.5726 72.9965 87.5076L75.9706 88.3142Z"
+ fill="white" />
+ <path fill-rule="evenodd" clip-rule="evenodd"
+ d="M87.539 69.7929L88.7604 74.4814C88.0328 75.8407 87.1934 77.2072 86.246 78.5553C86.0185 78.879 85.7879 79.1972 85.5546 79.5097L83.5713 77.2786C85.2719 74.7819 86.6029 72.233 87.539 69.7929ZM80.0276 73.2919C80.2179 72.9908 80.4062 72.6863 80.5922 72.3784C82.7555 68.7983 84.3777 65.164 85.4373 61.7258L82.9408 52.1425C82.9411 57.3002 81.047 63.8486 77.386 70.3201L80.0276 73.2919ZM74.0896 66.6117L71.3174 63.4929C74.538 56.6945 75.7751 50.0869 74.8794 45.3841L77.5984 42.665C80.5312 47.5548 79.2265 57.0914 74.0896 66.6117ZM80.5491 42.9612L81.0654 44.9433C80.5272 44.1883 79.8718 43.5661 79.0972 43.098C78.9884 43.0323 78.8781 42.9701 78.7662 42.9114C79.3821 42.8656 79.9778 42.8813 80.5491 42.9612Z"
+ fill="#E0E0E0" />
+ <path fill-rule="evenodd" clip-rule="evenodd"
+ d="M82.1412 69.6335L79.8216 65.4216C80.274 64.3696 80.6781 63.3255 81.0332 62.2958L83.3025 67.2756C82.9418 68.0594 82.5546 68.8462 82.1412 69.6335ZM86.6954 77.9029L85.0567 74.9275C85.3924 74.3525 85.7082 73.7774 86.004 73.2041L87.5458 76.5874C87.2737 77.0268 86.9902 77.4656 86.6954 77.9029ZM78.2298 56.1438C77.8987 57.4759 77.4778 58.8469 76.9687 60.2412L74.2695 55.3402C74.7889 53.2357 75.0839 51.2293 75.1491 49.3833L78.2298 56.1438Z"
+ fill="#BBBBBB" />
+ <path d="M15.2935 47.2679L17.7767 45.6596L19.3849 48.1427L21.868 46.5345L23.4763 49.0176" stroke="#45D1B8"
+ stroke-linecap="round" />
+ <path d="M69.1626 21.2032L66.4892 22.4702L67.7562 25.1436L65.0828 26.4106L66.3498 29.0841" stroke="#45D1B8"
+ stroke-linecap="round" />
+ <path
+ d="M16.9286 75.518L19.8092 76.1923L20.4835 73.3117L23.3641 73.986L24.0384 71.1054L26.919 71.7798L27.5933 68.8992L30.4739 69.5735"
+ stroke="#F1C017" stroke-linecap="round" />
+ <path
+ d="M38.7144 27.4998L38.99 30.4454L41.9356 30.1698L42.2111 33.1154L45.1567 32.8399L45.4323 35.7855L48.3779 35.5099L48.6534 38.4555"
+ stroke="#F1C017" stroke-linecap="round" />
+ <ellipse cx="58.0882" cy="57.2089" rx="28.1689" ry="13.8457" transform="rotate(-45 58.0882 57.2089)" fill="white" />
+ <ellipse cx="57.672" cy="57.2454" rx="24.4869" ry="11.6179" transform="rotate(-45 57.672 57.2454)" fill="#F1C017" />
+ <path fill-rule="evenodd" clip-rule="evenodd"
+ d="M46.792 51.9046C47.625 50.934 48.5144 49.9731 49.4571 49.0304C59.0198 39.4677 70.4499 35.3936 74.987 39.9307C79.524 44.4677 75.4499 55.8978 65.8872 65.4606C65.6119 65.7359 65.335 66.0067 65.0568 66.2728L46.792 51.9046Z"
+ fill="url(#paint1_linear_7474_97331)" />
+ <ellipse cx="58.7174" cy="58.2904" rx="21.3715" ry="10.1398" transform="rotate(-45 58.7174 58.2904)"
+ fill="#BE7F06" />
+ <ellipse cx="58.7174" cy="58.2904" rx="21.3715" ry="10.1398" transform="rotate(-45 58.7174 58.2904)"
+ fill="url(#paint2_radial_7474_97331)" fill-opacity="0.46" />
+ <path d="M49.8794 68.9764C44.8794 62.9764 30.9794 52.7764 15.3794 59.9764" stroke="#3A98EC" stroke-width="3"
+ stroke-linecap="round" />
+ <path d="M63.8519 49.2812C57.9813 44.13 48.1388 29.9746 55.7339 14.5631" stroke="#3A98EC" stroke-width="3"
+ stroke-linecap="round" />
+ <path
+ d="M41.8794 47L23.5398 30.6186C21.074 28.416 17.2946 28.609 15.066 31.0512L14.7074 31.4442C12.6599 33.6879 12.8189 37.1667 15.0627 39.2142L16.3553 40.3939C17.8852 41.7899 20.257 41.6815 21.6531 40.1516L21.9901 39.7823C23.2 38.4564 23.106 36.4008 21.7802 35.1909L20.8569 34.3483C20.041 33.6037 18.7759 33.6616 18.0314 34.4775V34.4775"
+ stroke="#D87B39" stroke-width="2" stroke-linecap="round" />
+ <path
+ d="M36.0029 34.7016L22.1683 21.9887C19.6045 19.6328 19.4693 15.6329 21.8681 13.1092L22.3143 12.6399C24.3962 10.4496 27.8453 10.3203 30.0853 12.3486L31.4318 13.5679C32.967 14.958 33.0846 17.3295 31.6945 18.8647L31.3589 19.2353C30.1541 20.5659 28.0989 20.6678 26.7684 19.463L25.8418 18.624C25.023 17.8826 24.9603 16.6178 25.7017 15.799V15.799"
+ stroke="#3A98EC" stroke-width="2" stroke-linecap="round" />
+ </g>
+ <defs>
+ <linearGradient id="paint0_linear_7474_97331" x1="68.8794" y1="86" x2="85.3794" y2="61.5"
+ gradientUnits="userSpaceOnUse">
+ <stop stop-color="#F1C017" />
+ <stop offset="0.182776" stop-color="#FFE280" />
+ <stop offset="0.330306" stop-color="#F1C017" />
+ <stop offset="0.774307" stop-color="#DB930B" />
+ <stop offset="1" stop-color="#F1C017" />
+ </linearGradient>
+ <linearGradient id="paint1_linear_7474_97331" x1="74.3794" y1="39.5" x2="40.3794" y2="75"
+ gradientUnits="userSpaceOnUse">
+ <stop offset="0.17209" stop-color="#975C00" />
+ <stop offset="1" stop-color="#975C00" stop-opacity="0" />
+ </linearGradient>
+ <radialGradient id="paint2_radial_7474_97331" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
+ gradientTransform="translate(60.805 68.4526) rotate(-98.9726) scale(20.4022 43.0016)">
+ <stop offset="0.150884" stop-color="#804500" />
+ <stop offset="1" stop-color="#804500" stop-opacity="0" />
+ </radialGradient>
+ <clipPath id="clip0_7474_97331">
+ <rect width="100" height="100" fill="white" transform="translate(0 0.5)" />
+ </clipPath>
+ </defs>
+</svg>
\ No newline at end of file
diff --git a/src/assets/icons/visu/thunderEmpty.svg b/src/assets/icons/visu/thunderEmpty.svg
deleted file mode 100644
index b6b398e1ec6670eeca70c2ccd7a50751bcd9d9a2..0000000000000000000000000000000000000000
--- a/src/assets/icons/visu/thunderEmpty.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg width="12" height="19" viewBox="0 0 12 19" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M6.07817 1.44859C6.34673 1.02657 7 1.21681 7 1.71703V10.5C7 10.7761 6.77614 11 6.5 11H0.910837C0.516291 11 0.277184 10.5644 0.489006 10.2316L6.07817 1.44859Z" fill="#121212"/>
-<path d="M5.93189 17.4025C5.67473 17.8433 5 17.6609 5 17.1505V7.5C5 7.22386 5.22386 7 5.5 7H11.1295C11.5154 7 11.7558 7.41861 11.5614 7.75194L5.93189 17.4025Z" fill="#121212"/>
-</svg>
diff --git a/src/assets/icons/visu/thunderFilled.svg b/src/assets/icons/visu/thunderFilled.svg
deleted file mode 100644
index a1685f68460bfc0c87f9ba9f212759a58c402f2f..0000000000000000000000000000000000000000
--- a/src/assets/icons/visu/thunderFilled.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg width="12" height="19" viewBox="0 0 12 19" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M6.07817 1.44859C6.34673 1.02657 7 1.21681 7 1.71703V10.5C7 10.7761 6.77614 11 6.5 11H0.910837C0.516291 11 0.277184 10.5644 0.489006 10.2316L6.07817 1.44859Z" fill="#E3B82A"/>
-<path d="M5.93189 17.4025C5.67473 17.8433 5 17.6609 5 17.1505V7.5C5 7.22386 5.22386 7 5.5 7H11.1295C11.5154 7 11.7558 7.41861 11.5614 7.75194L5.93189 17.4025Z" fill="#E3B82A"/>
-</svg>
diff --git a/src/components/Ecogesture/EcogestureCard/EcogestureCard.tsx b/src/components/Ecogesture/EcogestureCard/EcogestureCard.tsx
index b2dfc8f5bfc99d28c72406aa2acce2c92447c18f..62cc752d597c4469bf7f891a145ecfd035312882 100644
--- a/src/components/Ecogesture/EcogestureCard/EcogestureCard.tsx
+++ b/src/components/Ecogesture/EcogestureCard/EcogestureCard.tsx
@@ -30,9 +30,7 @@ const EcogestureCard = ({ ecogesture }: { ecogesture: Ecogesture }) => {
>
<div className="ec-content">
<StyledIcon className="Icon" icon={ecogestureIcon} size={50} />
- <div className="ec-content-short-name text-15-bold">
- {ecogesture.shortName}
- </div>
+ <div className="text-15-bold">{ecogesture.shortName}</div>
<EfficiencyRating result={Math.round(ecogesture.efficiency)} />
</div>
</StyledEcogestureCard>
diff --git a/src/components/Ecogesture/EcogestureCard/__snapshots__/EcogestureCard.spec.tsx.snap b/src/components/Ecogesture/EcogestureCard/__snapshots__/EcogestureCard.spec.tsx.snap
index 3ab49975997b8803b086ad42e0cb921f4536d9a9..0bd7b018ef12cc8db3c4cc976b61d296dc28f6bc 100644
--- a/src/components/Ecogesture/EcogestureCard/__snapshots__/EcogestureCard.spec.tsx.snap
+++ b/src/components/Ecogesture/EcogestureCard/__snapshots__/EcogestureCard.spec.tsx.snap
@@ -25,18 +25,16 @@ exports[`EcogestureCard component should be rendered correctly 1`] = `
/>
</svg>
<div
- class="ec-content-short-name text-15-bold"
+ class="text-15-bold"
>
Bonhomme de neige
</div>
- <div
- class="thunder"
- >
+ <div>
<svg
aria-hidden="true"
class="star styles__icon___23x3R"
- height="15"
- width="15"
+ height="16"
+ width="16"
>
<use
xlink:href="#test-file-stub"
@@ -45,8 +43,8 @@ exports[`EcogestureCard component should be rendered correctly 1`] = `
<svg
aria-hidden="true"
class="star styles__icon___23x3R"
- height="15"
- width="15"
+ height="16"
+ width="16"
>
<use
xlink:href="#test-file-stub"
@@ -55,8 +53,8 @@ exports[`EcogestureCard component should be rendered correctly 1`] = `
<svg
aria-hidden="true"
class="star styles__icon___23x3R"
- height="15"
- width="15"
+ height="16"
+ width="16"
>
<use
xlink:href="#test-file-stub"
@@ -65,8 +63,8 @@ exports[`EcogestureCard component should be rendered correctly 1`] = `
<svg
aria-hidden="true"
class="star styles__icon___23x3R"
- height="15"
- width="15"
+ height="16"
+ width="16"
>
<use
xlink:href="#test-file-stub"
@@ -75,8 +73,8 @@ exports[`EcogestureCard component should be rendered correctly 1`] = `
<svg
aria-hidden="true"
class="star styles__icon___23x3R"
- height="15"
- width="15"
+ height="16"
+ width="16"
>
<use
xlink:href="#test-file-stub"
diff --git a/src/components/Ecogesture/EcogestureCard/ecogestureCard.scss b/src/components/Ecogesture/EcogestureCard/ecogestureCard.scss
index 9ba0270176634771b20b8b07232411715ec84a3a..e03262eb65886f09fb03490736b8204ee9979f3a 100644
--- a/src/components/Ecogesture/EcogestureCard/ecogestureCard.scss
+++ b/src/components/Ecogesture/EcogestureCard/ecogestureCard.scss
@@ -7,30 +7,4 @@
flex-direction: column;
align-items: center;
justify-content: space-around;
- &.ec-content-unlocked {
- padding: 0.4rem 0;
- }
- &.ec-content-challenge {
- padding: 0.5rem 0;
- }
-
- .ec-content-short-name {
- display: flex;
- flex: 1;
- align-items: center;
- text-align: center;
- }
-}
-
-.cp-eg-1 {
- height: 8rem;
- width: 100%;
- margin-right: 0.25rem;
- text-align: center;
-}
-.cp-eg-2 {
- height: 8rem;
- width: 100%;
- margin-left: 0.25rem;
- text-align: center;
}
diff --git a/src/components/Ecogesture/EcogestureEmptyList/EcogestureEmptyList.tsx b/src/components/Ecogesture/EcogestureEmptyList/EcogestureEmptyList.tsx
index 2898c3515c4909046845d6fcf14e8b86766a970d..06d623df2a8b9be3921a3c2c67399b1c93e91056 100644
--- a/src/components/Ecogesture/EcogestureEmptyList/EcogestureEmptyList.tsx
+++ b/src/components/Ecogesture/EcogestureEmptyList/EcogestureEmptyList.tsx
@@ -1,6 +1,6 @@
import Button from '@material-ui/core/Button'
-import doingIcon from 'assets/icons/ico/doing-enabled.svg'
-import objectiveIcon from 'assets/icons/ico/objective-enabled.svg'
+import doingIcon from 'assets/icons/ico/selection-doing.svg'
+import objectiveIcon from 'assets/icons/ico/selection-objective.svg'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
import React from 'react'
diff --git a/src/components/Ecogesture/EfficiencyRating/EfficiencyRating.tsx b/src/components/Ecogesture/EfficiencyRating/EfficiencyRating.tsx
index 1bb2adc7a60b93a024834d58d1a788b9bea322f4..b634b05d2aca5fa8315a0ea499e8e07c014a7882 100644
--- a/src/components/Ecogesture/EfficiencyRating/EfficiencyRating.tsx
+++ b/src/components/Ecogesture/EfficiencyRating/EfficiencyRating.tsx
@@ -1,19 +1,25 @@
-import thunderEmpty from 'assets/icons/visu/thunderEmpty.svg'
-import thunderFilled from 'assets/icons/visu/thunderFilled.svg'
+import bulbEmpty from 'assets/icons/visu/bulbEmpty.svg'
+import bulbFilled from 'assets/icons/visu/bulbFilled.svg'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import React from 'react'
-const EfficiencyRating = ({ result }: { result: number }) => {
+const EfficiencyRating = ({
+ result,
+ iconSize = 16,
+}: {
+ result: number
+ iconSize?: number
+}) => {
const maxStars = [1, 2, 3, 4, 5]
return (
- <div className="thunder">
+ <div>
{maxStars.map(star => (
<StyledIcon
key={star}
className="star"
- icon={result >= star ? thunderFilled : thunderEmpty}
- size={15}
+ icon={result >= star ? bulbFilled : bulbEmpty}
+ size={iconSize}
/>
))}
</div>
diff --git a/src/components/Ecogesture/EfficiencyRating/__snapshots__/EfficiencyRating.spec.tsx.snap b/src/components/Ecogesture/EfficiencyRating/__snapshots__/EfficiencyRating.spec.tsx.snap
index 8ffd02507109a5c68be5b8335ec138d4feb61564..8c118b4b09c708317bdd392d05556febd0b9ff00 100644
--- a/src/components/Ecogesture/EfficiencyRating/__snapshots__/EfficiencyRating.spec.tsx.snap
+++ b/src/components/Ecogesture/EfficiencyRating/__snapshots__/EfficiencyRating.spec.tsx.snap
@@ -2,14 +2,12 @@
exports[`EfficiencyRating component should be rendered correctly 1`] = `
<div>
- <div
- class="thunder"
- >
+ <div>
<svg
aria-hidden="true"
class="star styles__icon___23x3R"
- height="15"
- width="15"
+ height="16"
+ width="16"
>
<use
xlink:href="#test-file-stub"
@@ -18,8 +16,8 @@ exports[`EfficiencyRating component should be rendered correctly 1`] = `
<svg
aria-hidden="true"
class="star styles__icon___23x3R"
- height="15"
- width="15"
+ height="16"
+ width="16"
>
<use
xlink:href="#test-file-stub"
@@ -28,8 +26,8 @@ exports[`EfficiencyRating component should be rendered correctly 1`] = `
<svg
aria-hidden="true"
class="star styles__icon___23x3R"
- height="15"
- width="15"
+ height="16"
+ width="16"
>
<use
xlink:href="#test-file-stub"
@@ -38,8 +36,8 @@ exports[`EfficiencyRating component should be rendered correctly 1`] = `
<svg
aria-hidden="true"
class="star styles__icon___23x3R"
- height="15"
- width="15"
+ height="16"
+ width="16"
>
<use
xlink:href="#test-file-stub"
@@ -48,8 +46,8 @@ exports[`EfficiencyRating component should be rendered correctly 1`] = `
<svg
aria-hidden="true"
class="star styles__icon___23x3R"
- height="15"
- width="15"
+ height="16"
+ width="16"
>
<use
xlink:href="#test-file-stub"
diff --git a/src/components/Ecogesture/SingleEcogestureView.tsx b/src/components/Ecogesture/SingleEcogestureView.tsx
index 9112bc8774e01b5f470f713a5b1e179064aea65c..8f4ed85c1df3862c02ad48966f063454ad4595a9 100644
--- a/src/components/Ecogesture/SingleEcogestureView.tsx
+++ b/src/components/Ecogesture/SingleEcogestureView.tsx
@@ -1,10 +1,8 @@
import { Button, Collapse } from '@material-ui/core'
import IconButton from '@material-ui/core/IconButton'
import * as Sentry from '@sentry/react'
-import doingDisabledIcon from 'assets/icons/ico/doing-disabled.svg'
-import doingEnabledIcon from 'assets/icons/ico/doing-enabled.svg'
-import objectiveDisabledIcon from 'assets/icons/ico/objective-disabled.svg'
-import objectiveEnabledIcon from 'assets/icons/ico/objective-enabled.svg'
+import doingIcon from 'assets/icons/ico/selection-doing.svg'
+import objectiveIcon from 'assets/icons/ico/selection-objective.svg'
import defaultIcon from 'assets/icons/visu/ecogesture/default.svg'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import Content from 'components/Content/Content'
@@ -142,6 +140,7 @@ const SingleEcogestureView = () => {
</span>
<EfficiencyRating
result={Math.round(ecogesture.efficiency)}
+ iconSize={24}
/>
</div>
</div>
@@ -178,10 +177,8 @@ const SingleEcogestureView = () => {
>
<StyledIcon
className="status-icon"
- icon={
- isObjective ? objectiveEnabledIcon : objectiveDisabledIcon
- }
- size={40}
+ icon={objectiveIcon}
+ size={24}
/>
<span>{t('ecogesture.objective')}</span>
</IconButton>
@@ -195,8 +192,8 @@ const SingleEcogestureView = () => {
>
<StyledIcon
className="status-icon"
- icon={isDoing ? doingEnabledIcon : doingDisabledIcon}
- size={40}
+ icon={doingIcon}
+ size={24}
/>
<span>{t('ecogesture.doing')}</span>
</IconButton>
diff --git a/src/components/Ecogesture/__snapshots__/SingleEcogestureView.spec.tsx.snap b/src/components/Ecogesture/__snapshots__/SingleEcogestureView.spec.tsx.snap
index 059d02251fb883ddcbd96e53b40abcf77001a063..d1fd7c0783e05b1232f1627806042999f056cf3b 100644
--- a/src/components/Ecogesture/__snapshots__/SingleEcogestureView.spec.tsx.snap
+++ b/src/components/Ecogesture/__snapshots__/SingleEcogestureView.spec.tsx.snap
@@ -48,6 +48,7 @@ exports[`SingleEcogesture component should be rendered correctly 1`] = `
ecogesture_modal.efficiency
</span>
<mock-efficiencyrating
+ iconsize="24"
result="4"
/>
</div>
@@ -105,8 +106,8 @@ exports[`SingleEcogesture component should be rendered correctly 1`] = `
<svg
aria-hidden="true"
class="status-icon styles__icon___23x3R"
- height="40"
- width="40"
+ height="24"
+ width="24"
>
<use
xlink:href="#test-file-stub"
@@ -129,8 +130,8 @@ exports[`SingleEcogesture component should be rendered correctly 1`] = `
<svg
aria-hidden="true"
class="status-icon styles__icon___23x3R"
- height="40"
- width="40"
+ height="24"
+ width="24"
>
<use
xlink:href="#test-file-stub"
diff --git a/src/components/Ecogesture/singleEcogestureView.scss b/src/components/Ecogesture/singleEcogestureView.scss
index 3f8904c15209e0b1c490c757e85e28ed4c637dae..b12cbb74dbd5fbd3bc1091b9ae98475c6139bf12 100644
--- a/src/components/Ecogesture/singleEcogestureView.scss
+++ b/src/components/Ecogesture/singleEcogestureView.scss
@@ -13,6 +13,7 @@
align-items: center;
justify-content: center;
padding: 1rem 1.2rem;
+ gap: 16px;
.icon-container {
margin: auto;
max-width: 180px;
@@ -28,20 +29,21 @@
align-items: center;
gap: 0.5rem;
.title {
- color: $soft-grey;
+ color: $white;
}
.efficiency {
display: flex;
- gap: 0.5rem;
+ flex-direction: column;
+ align-items: center;
+ gap: 4px;
}
}
.styled-container {
line-height: 150%;
- padding: 1rem;
- margin: 1.5rem 0 1rem;
max-width: 500px;
display: flex;
flex-direction: column;
+ gap: 16px;
.long-name {
text-align: center;
color: white;
@@ -51,7 +53,6 @@
margin: auto;
text-align: center;
text-decoration: underline;
- margin-top: 1.5rem;
span {
text-transform: none;
}
@@ -66,12 +67,13 @@
display: flex;
gap: 0.5rem;
justify-content: center;
- button {
- &.btnSecondary {
- height: 45px;
- max-width: 160px;
- width: 100%;
- border-radius: 4px;
+ button.btnSecondary {
+ height: 45px;
+ max-width: 160px;
+ width: 100%;
+ border-radius: 4px;
+ .MuiIconButton-label {
+ gap: 8px;
}
}
.objective-btn {
@@ -79,16 +81,14 @@
color: $grey-bright;
}
&.active {
- background: radial-gradient(
- 105.25% 64.58% at 49.68% 70.83%,
- rgba(12, 44, 91, 0.5) 0%,
- rgba(255, 255, 255, 0) 100%
- ),
- #4470b3;
- border-color: transparent;
+ border-color: $objectiveForeground;
+ background: $objectiveBackground;
span {
color: white;
}
+ svg {
+ color: $objectiveForeground;
+ }
}
}
.doing-btn {
@@ -96,22 +96,16 @@
color: $grey-bright;
}
&.active {
- background: radial-gradient(
- 105.25% 64.58% at 49.68% 70.83%,
- rgba(41, 87, 33, 0.5) 0%,
- rgba(255, 255, 255, 0) 100%
- ),
- #21a90b;
- border-color: transparent;
+ border-color: $doingForeground;
+ background: $doingBackground;
span {
color: white;
}
+ svg {
+ color: $doingForeground;
+ }
}
}
- .MuiIconButton-label {
- justify-content: flex-start;
- color: white;
- }
}
}
}
diff --git a/src/components/EcogestureSelection/EcogestureSelectionDetail/EcogestureSelectionDetail.tsx b/src/components/EcogestureSelection/EcogestureSelectionDetail/EcogestureSelectionDetail.tsx
index 345d29eb709137a771d1e5b8d5054cd8d37f7d15..28e01a0c2dc5aa3474cd90842d578ad97b160234 100644
--- a/src/components/EcogestureSelection/EcogestureSelectionDetail/EcogestureSelectionDetail.tsx
+++ b/src/components/EcogestureSelection/EcogestureSelectionDetail/EcogestureSelectionDetail.tsx
@@ -1,10 +1,11 @@
import { Button, Collapse } from '@material-ui/core'
-import doingIcon from 'assets/icons/ico/doing-enabled.svg'
-import objectiveIcon from 'assets/icons/ico/objective-enabled.svg'
-import skipIcon from 'assets/icons/ico/skip-enabled.svg'
+import doingIcon from 'assets/icons/ico/selection-doing.svg'
+import objectiveIcon from 'assets/icons/ico/selection-objective.svg'
+import skipIcon from 'assets/icons/ico/selection-skip.svg'
import defaultIcon from 'assets/icons/visu/ecogesture/default.svg'
import classNames from 'classnames'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+import EfficiencyRating from 'components/Ecogesture/EfficiencyRating/EfficiencyRating'
import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
import { Ecogesture } from 'models'
import React, { useEffect, useState } from 'react'
@@ -14,13 +15,11 @@ import './ecogestureSelectionDetail.scss'
interface EcogestureSelectionDetailProps {
ecogesture: Ecogesture
validate: (objective: boolean, doing: boolean) => void
- title: string
}
const EcogestureSelectionDetail = ({
ecogesture,
validate,
- title,
}: EcogestureSelectionDetailProps) => {
const { t } = useI18n()
const [ecogestureIcon, setEcogestureIcon] = useState<string>('')
@@ -45,7 +44,16 @@ const EcogestureSelectionDetail = ({
<div className="iconContainer">
<StyledIcon className="icon" icon={ecogestureIcon} size={240} />
</div>
- <div className="text-22 title">{title}</div>
+ <div className="text-22 title">{ecogesture.shortName}</div>
+ <div className="efficiency">
+ <span className="text-14">
+ {t('ecogesture_selection.efficiency')}
+ </span>
+ <EfficiencyRating
+ result={Math.round(ecogesture.efficiency)}
+ iconSize={24}
+ />
+ </div>
<div className="text-18-bold">{ecogesture.longName}</div>
<Button
@@ -71,7 +79,7 @@ const EcogestureSelectionDetail = ({
<div className="buttons">
<Button
classes={{
- root: 'btnSecondary',
+ root: 'btnSecondary objective',
label: 'text-14-bold',
}}
onClick={() => validate(true, false)}
@@ -81,7 +89,7 @@ const EcogestureSelectionDetail = ({
</Button>
<Button
classes={{
- root: 'btnSecondary',
+ root: 'btnSecondary doing',
label: 'text-14-bold',
}}
onClick={() => validate(false, true)}
@@ -91,7 +99,7 @@ const EcogestureSelectionDetail = ({
</Button>
<Button
classes={{
- root: 'btnSecondary',
+ root: 'btnSecondary skip',
label: 'text-14-bold',
}}
onClick={() => validate(false, false)}
diff --git a/src/components/EcogestureSelection/EcogestureSelectionDetail/__snapshots__/EcogestureSelectionDetail.spec.tsx.snap b/src/components/EcogestureSelection/EcogestureSelectionDetail/__snapshots__/EcogestureSelectionDetail.spec.tsx.snap
index 8cf01231bcc3e1356f09dfd7252a97ad5d3fe0ab..67ebfc6d7dabe39a7cc67e76ac2694e02c6cb923 100644
--- a/src/components/EcogestureSelection/EcogestureSelectionDetail/__snapshots__/EcogestureSelectionDetail.spec.tsx.snap
+++ b/src/components/EcogestureSelection/EcogestureSelectionDetail/__snapshots__/EcogestureSelectionDetail.spec.tsx.snap
@@ -27,6 +27,67 @@ exports[`EcogestureSelectionDetail component should be rendered correctly 1`] =
>
Bonhomme de neige
</div>
+ <div
+ class="efficiency"
+ >
+ <span
+ class="text-14"
+ >
+ ecogesture_selection.efficiency
+ </span>
+ <div>
+ <svg
+ aria-hidden="true"
+ class="star styles__icon___23x3R"
+ height="24"
+ width="24"
+ >
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ <svg
+ aria-hidden="true"
+ class="star styles__icon___23x3R"
+ height="24"
+ width="24"
+ >
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ <svg
+ aria-hidden="true"
+ class="star styles__icon___23x3R"
+ height="24"
+ width="24"
+ >
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ <svg
+ aria-hidden="true"
+ class="star styles__icon___23x3R"
+ height="24"
+ width="24"
+ >
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ <svg
+ aria-hidden="true"
+ class="star styles__icon___23x3R"
+ height="24"
+ width="24"
+ >
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ </div>
+ </div>
<div
class="text-18-bold"
>
@@ -69,7 +130,7 @@ exports[`EcogestureSelectionDetail component should be rendered correctly 1`] =
class="buttons"
>
<button
- class="MuiButtonBase-root MuiButton-root btnSecondary MuiButton-text"
+ class="MuiButtonBase-root MuiButton-root btnSecondary objective MuiButton-text"
tabindex="0"
type="button"
>
@@ -93,7 +154,7 @@ exports[`EcogestureSelectionDetail component should be rendered correctly 1`] =
/>
</button>
<button
- class="MuiButtonBase-root MuiButton-root btnSecondary MuiButton-text"
+ class="MuiButtonBase-root MuiButton-root btnSecondary doing MuiButton-text"
tabindex="0"
type="button"
>
@@ -117,7 +178,7 @@ exports[`EcogestureSelectionDetail component should be rendered correctly 1`] =
/>
</button>
<button
- class="MuiButtonBase-root MuiButton-root btnSecondary MuiButton-text"
+ class="MuiButtonBase-root MuiButton-root btnSecondary skip MuiButton-text"
tabindex="0"
type="button"
>
diff --git a/src/components/EcogestureSelection/EcogestureSelectionDetail/ecogestureSelectionDetail.scss b/src/components/EcogestureSelection/EcogestureSelectionDetail/ecogestureSelectionDetail.scss
index 5a5a7af545c4ad4bf636cb85d9fca048278556f5..2edc272da52097574d85bc1e4a5f69cdceaea9c4 100644
--- a/src/components/EcogestureSelection/EcogestureSelectionDetail/ecogestureSelectionDetail.scss
+++ b/src/components/EcogestureSelection/EcogestureSelectionDetail/ecogestureSelectionDetail.scss
@@ -22,23 +22,26 @@
.content {
display: flex;
flex-direction: column;
- gap: 0.5rem;
+ gap: 16px;
.title {
- color: $soft-grey;
+ color: $white;
font-weight: 700;
}
+ .efficiency {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 4px;
+ }
+
.iconContainer {
height: 240px;
}
.showMore {
- text-align: center;
- text-decoration: underline;
- margin-top: 1rem;
- cursor: pointer;
- flex-shrink: 0;
+ margin: auto;
}
.longDescription {
@@ -55,7 +58,7 @@
.buttons {
padding: 1rem 0;
display: flex;
- gap: 0.5rem;
+ gap: 12px;
justify-content: center;
width: 100%;
// needed for text overflow
@@ -69,6 +72,25 @@
span {
flex-direction: column;
}
+
+ &.objective {
+ border-color: $objectiveForeground;
+ background: $objectiveBackground;
+ svg {
+ color: $objectiveForeground;
+ }
+ }
+ &.doing {
+ border-color: $doingForeground;
+ background: $doingBackground;
+ svg {
+ color: $doingForeground;
+ }
+ }
+ &.skip {
+ border-color: $skipForeground;
+ background: $skipBackground;
+ }
}
@media (min-height: $height-small-phone) {
diff --git a/src/components/EcogestureSelection/EcogestureSelectionView.tsx b/src/components/EcogestureSelection/EcogestureSelectionView.tsx
index ed0ac295609916e361235b770bff6a781f8cd334..73f1f30b646c798460a0533aa3959827fd9f378e 100644
--- a/src/components/EcogestureSelection/EcogestureSelectionView.tsx
+++ b/src/components/EcogestureSelection/EcogestureSelectionView.tsx
@@ -3,7 +3,6 @@ import CozyBar from 'components/Header/CozyBar'
import Header from 'components/Header/Header'
import Loader from 'components/Loader/Loader'
import { useClient } from 'cozy-client'
-import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
import { Ecogesture } from 'models'
import React, { useCallback, useEffect, useMemo, useState } from 'react'
import { useNavigate } from 'react-router-dom'
@@ -19,7 +18,6 @@ import './ecogestureSelectionView.scss'
* http://ecolyo.cozy.tools:8080/#/ecogesture-selection
*/
const EcogestureSelectionView = () => {
- const { t } = useI18n()
const client = useClient()
const navigate = useNavigate()
const {
@@ -39,16 +37,6 @@ const EcogestureSelectionView = () => {
[client]
)
- const getTitle = useCallback((): string => {
- if (
- indexEcogesture <= ecogestureList.length - 1 &&
- ecogestureList[indexEcogesture]
- ) {
- return ecogestureList[indexEcogesture].shortName
- }
- return t('ecogesture_selection.header')
- }, [ecogestureList, indexEcogesture, t])
-
const validateChoice = useCallback(
async (objective: boolean, doing: boolean) => {
const updatedEcogesture = await ecogestureService.updateEcogesture({
@@ -128,7 +116,6 @@ const EcogestureSelectionView = () => {
<EcogestureSelectionDetail
ecogesture={ecogestureList[indexEcogesture]}
validate={validateChoice}
- title={getTitle()}
/>
)
} else if (totalAvailable > totalViewed + ecogestureList.length) {
diff --git a/src/components/EcogestureSelection/__snapshots__/EcogestureSelectionView.spec.tsx.snap b/src/components/EcogestureSelection/__snapshots__/EcogestureSelectionView.spec.tsx.snap
index b93b5cb8ea5343e60e55b3450120df58ffaf7ab9..757647cdd7e53460a3c6d20af2e9980ef0207e8f 100644
--- a/src/components/EcogestureSelection/__snapshots__/EcogestureSelectionView.spec.tsx.snap
+++ b/src/components/EcogestureSelection/__snapshots__/EcogestureSelectionView.spec.tsx.snap
@@ -19,7 +19,6 @@ exports[`EcogestureSelection component should be rendered correctly 1`] = `
<mock-content>
<mock-ecogestureselectiondetail
ecogesture="[object Object]"
- title="Bonhomme de neige"
/>
<mock-ecogestureselectionmodal
open="true"
diff --git a/src/locales/fr.json b/src/locales/fr.json
index cabd4bc40e90c8b9689e575601b54f1a37195b44..9fd782695942a8366479f1e5147ad42dc10f3541 100644
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@@ -633,6 +633,7 @@
},
"ecogesture_selection": {
"header": "Sélection des astuces",
+ "efficiency": "Efficacité",
"title": "Vous avez parcouru un groupe de %{smartCount} astuces",
"text": "Voulez-vous continuer sur votre lancée ou remettre cette sélection à plus tard\u00a0?",
"title_final": "Félicitations !",
diff --git a/src/styles/base/_color.scss b/src/styles/base/_color.scss
index ad61855c9821a65358c24b16804e7826c2ebb559..fb118af10ab6721b96d9767a4999af66a1582779 100644
--- a/src/styles/base/_color.scss
+++ b/src/styles/base/_color.scss
@@ -145,3 +145,13 @@ $water-color-radial-gradient: radial-gradient(
/** SCROLLBAR **/
$scrollbar-track: #3e4045;
$scrollbar-thumb: #6f7074;
+
+/** Ecogesture selection */
+$objectiveForeground: #61b4ff;
+$objectiveBackground: #293445;
+
+$doingForeground: #7fd771;
+$doingBackground: #273823;
+
+$skipForeground: #c74545;
+$skipBackground: #392121;