diff --git a/src/assets/icons/ico/add-elec.svg b/src/assets/icons/ico/add-elec.svg
deleted file mode 100644
index 31c62243a3d2df8e31c0d090c91be54c7a8a55fd..0000000000000000000000000000000000000000
--- a/src/assets/icons/ico/add-elec.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg width="38" height="38" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg">
-<circle cx="19" cy="19" r="18.5" fill="#121212" stroke="#D87B39"/>
-<path d="M19.5837 13V18.845H25.1694V19.791H19.5837V25.6619H18.5728V19.791H13V18.845H18.5728V13H19.5837Z" fill="#D87B39"/>
-</svg>
diff --git a/src/assets/icons/ico/add-fluid.svg b/src/assets/icons/ico/add-fluid.svg
new file mode 100644
index 0000000000000000000000000000000000000000..ff42353ff25f9c965ba92919d87160fa79cf9529
--- /dev/null
+++ b/src/assets/icons/ico/add-fluid.svg
@@ -0,0 +1,6 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <rect width="40" height="40" rx="8" fill="white" fill-opacity="0.1" />
+ <path
+ d="M20 10C14.48 10 10 14.48 10 20C10 25.52 14.48 30 20 30C25.52 30 30 25.52 30 20C30 14.48 25.52 10 20 10ZM24 21H21V24C21 24.55 20.55 25 20 25C19.45 25 19 24.55 19 24V21H16C15.45 21 15 20.55 15 20C15 19.45 15.45 19 16 19H19V16C19 15.45 19.45 15 20 15C20.55 15 21 15.45 21 16V19H24C24.55 19 25 19.45 25 20C25 20.55 24.55 21 24 21Z"
+ fill="#E0E0E0" />
+</svg>
\ No newline at end of file
diff --git a/src/assets/icons/ico/add-gas.svg b/src/assets/icons/ico/add-gas.svg
deleted file mode 100644
index 8e54532df7fd2fe7b33a4c41b1c50fb732c65738..0000000000000000000000000000000000000000
--- a/src/assets/icons/ico/add-gas.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg width="38" height="38" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg">
-<circle cx="19" cy="19" r="18.5" fill="#121212" stroke="#45D1B8"/>
-<path d="M19.5837 13V18.845H25.1694V19.791H19.5837V25.6619H18.5728V19.791H13V18.845H18.5728V13H19.5837Z" fill="#45D1B8"/>
-</svg>
diff --git a/src/assets/icons/ico/add-water.svg b/src/assets/icons/ico/add-water.svg
deleted file mode 100644
index fc6706cd3964b767f27201012f561746473e7592..0000000000000000000000000000000000000000
--- a/src/assets/icons/ico/add-water.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg width="38" height="38" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg">
-<circle cx="19" cy="19" r="18.5" fill="#121212" stroke="#3A98EC"/>
-<path d="M19.5837 13V18.845H25.1694V19.791H19.5837V25.6619H18.5728V19.791H13V18.845H18.5728V13H19.5837Z" fill="#3A98EC"/>
-</svg>
diff --git a/src/assets/icons/ico/elec.svg b/src/assets/icons/ico/elec.svg
deleted file mode 100644
index 85b8739faf8acaf265e8c3ba1afe3531d6c35f46..0000000000000000000000000000000000000000
--- a/src/assets/icons/ico/elec.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
-<circle cx="11" cy="11" r="10.5" fill="#121212" stroke="#D87B39"/>
-<path d="M0.5 11.375L3 13.375L5 9.875L7.5 15.375L10.5 6.875L13 14.875L15.5 8.875L17.8751 14.3132L20 10.7575L21.5 12.5" stroke="#D87B39"/>
-</svg>
diff --git a/src/assets/icons/ico/euro-gold.svg b/src/assets/icons/ico/euro-gold.svg
deleted file mode 100644
index 9cb2eb9abdaa02d3ae218188ef8da0bdc2501eea..0000000000000000000000000000000000000000
--- a/src/assets/icons/ico/euro-gold.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
-<circle cx="11" cy="11" r="10.5" fill="#121212" stroke="#E3B82A"/>
-<path d="M6 9.57631H7.064C7.18667 8.92565 7.38133 8.33898 7.648 7.81631C7.91467 7.28831 8.24 6.84031 8.624 6.47231C9.008 6.10431 9.44267 5.82165 9.928 5.62431C10.4133 5.42165 10.9413 5.32031 11.512 5.32031C12.2533 5.32031 12.888 5.46431 13.416 5.75231C13.944 6.03498 14.3867 6.41898 14.744 6.90431L14.048 7.65631C13.9947 7.71498 13.9387 7.76831 13.88 7.81631C13.8213 7.85898 13.7387 7.88031 13.632 7.88031C13.5573 7.88031 13.488 7.85898 13.424 7.81631C13.3653 7.77365 13.2987 7.72031 13.224 7.65631C13.1493 7.59231 13.0667 7.52298 12.976 7.44831C12.8853 7.37365 12.776 7.30431 12.648 7.24031C12.5253 7.17631 12.3787 7.12298 12.208 7.08031C12.0373 7.03765 11.8347 7.01631 11.6 7.01631C10.9707 7.01631 10.44 7.23231 10.008 7.66431C9.576 8.09631 9.27467 8.73365 9.104 9.57631H13.12V10.1843C13.12 10.307 13.0693 10.4216 12.968 10.5283C12.872 10.6296 12.7387 10.6803 12.568 10.6803H8.968C8.96267 10.771 8.96 10.8616 8.96 10.9523C8.96 11.0376 8.96 11.1256 8.96 11.2163C8.96 11.2803 8.96 11.3443 8.96 11.4083C8.96 11.4723 8.96267 11.5336 8.968 11.5923H12.36V12.1923C12.36 12.315 12.3093 12.4296 12.208 12.5363C12.1067 12.6376 11.9733 12.6883 11.808 12.6883H9.064C9.21333 13.6056 9.49867 14.291 9.92 14.7443C10.3467 15.1923 10.8747 15.4163 11.504 15.4163C11.888 15.4163 12.1947 15.3656 12.424 15.2643C12.6587 15.1576 12.848 15.0403 12.992 14.9123C13.1413 14.7843 13.264 14.6696 13.36 14.5683C13.4613 14.4616 13.5707 14.4083 13.688 14.4083C13.7467 14.4083 13.7973 14.419 13.84 14.4403C13.8827 14.4563 13.928 14.491 13.976 14.5443L14.832 15.3283C14.4587 15.9043 13.984 16.347 13.408 16.6563C12.832 16.9603 12.1627 17.1123 11.4 17.1123C10.7707 17.1123 10.2053 17.0083 9.704 16.8003C9.208 16.587 8.776 16.2883 8.408 15.9043C8.04 15.5203 7.73867 15.0563 7.504 14.5123C7.27467 13.9683 7.112 13.3603 7.016 12.6883H6V11.5923H6.928C6.92267 11.5336 6.92 11.4723 6.92 11.4083C6.92 11.3443 6.92 11.2803 6.92 11.2163C6.92 11.1256 6.92 11.0376 6.92 10.9523C6.92 10.8616 6.92267 10.771 6.928 10.6803H6V9.57631Z" fill="#E3B82A"/>
-</svg>
diff --git a/src/assets/icons/ico/gas.svg b/src/assets/icons/ico/gas.svg
deleted file mode 100644
index 69064d9af6e20e129eb9482cd780ef34758c2ac4..0000000000000000000000000000000000000000
--- a/src/assets/icons/ico/gas.svg
+++ /dev/null
@@ -1,6 +0,0 @@
-<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
-<circle cx="11" cy="11" r="10.5" fill="#121212" stroke="#45D1B8"/>
-<circle cx="7.5" cy="12" r="2.5" fill="#121212" stroke="#45D1B8"/>
-<circle cx="12.5" cy="16" r="1.5" fill="#121212" stroke="#45D1B8"/>
-<circle cx="12" cy="8.5" r="4" fill="#121212" stroke="#45D1B8"/>
-</svg>
diff --git a/src/assets/icons/ico/water.svg b/src/assets/icons/ico/water.svg
deleted file mode 100644
index 9ec601e9a581a9eec2a809cb02df7138386ecbd6..0000000000000000000000000000000000000000
--- a/src/assets/icons/ico/water.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
-<circle cx="11" cy="11" r="10.5" fill="#121212" stroke="#3A98EC"/>
-<path d="M1 14.2368C1.59273 12.6068 3.57836 9.34683 6.77909 9.34683C10.78 9.34683 10.78 14.2368 14.7809 14.2368C17.9816 14.2368 19.2264 10.6805 21.0045 9.79138" stroke="#3A98EC"/>
-</svg>
diff --git a/src/assets/icons/visu/analysis/pill-cold.svg b/src/assets/icons/visu/analysis/pill-cold.svg
new file mode 100644
index 0000000000000000000000000000000000000000..c06568895c2d46c435b0370e0db0a0c1e40e9aa3
--- /dev/null
+++ b/src/assets/icons/visu/analysis/pill-cold.svg
@@ -0,0 +1,6 @@
+<svg width="20" height="16" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <rect width="20" height="16" rx="8" fill="#7FA8E7" />
+ <path
+ d="M5.46967 4.53033C5.17678 4.23744 5.17678 3.76256 5.46967 3.46967C5.76256 3.17678 6.23744 3.17678 6.53033 3.46967L5.46967 4.53033ZM14.75 12C14.75 12.4142 14.4142 12.75 14 12.75L7.25 12.75C6.83579 12.75 6.5 12.4142 6.5 12C6.5 11.5858 6.83579 11.25 7.25 11.25L13.25 11.25L13.25 5.25C13.25 4.83579 13.5858 4.5 14 4.5C14.4142 4.5 14.75 4.83579 14.75 5.25L14.75 12ZM6.53033 3.46967L14.5303 11.4697L13.4697 12.5303L5.46967 4.53033L6.53033 3.46967Z"
+ fill="#23252D" />
+</svg>
\ No newline at end of file
diff --git a/src/assets/icons/visu/analysis/pill-hot.svg b/src/assets/icons/visu/analysis/pill-hot.svg
new file mode 100644
index 0000000000000000000000000000000000000000..80b5919774f0d5f2296ab71b16d92f897c5bc86c
--- /dev/null
+++ b/src/assets/icons/visu/analysis/pill-hot.svg
@@ -0,0 +1,6 @@
+<svg width="20" height="16" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <rect width="20" height="16" rx="8" fill="#F7DD8E" />
+ <path
+ d="M5.46967 11.4697C5.17678 11.7626 5.17678 12.2374 5.46967 12.5303C5.76256 12.8232 6.23744 12.8232 6.53033 12.5303L5.46967 11.4697ZM14.75 4C14.75 3.58579 14.4142 3.25 14 3.25L7.25 3.25C6.83579 3.25 6.5 3.58579 6.5 4C6.5 4.41421 6.83579 4.75 7.25 4.75L13.25 4.75L13.25 10.75C13.25 11.1642 13.5858 11.5 14 11.5C14.4142 11.5 14.75 11.1642 14.75 10.75L14.75 4ZM6.53033 12.5303L14.5303 4.53033L13.4697 3.46967L5.46967 11.4697L6.53033 12.5303Z"
+ fill="#23252D" />
+</svg>
\ No newline at end of file
diff --git a/src/assets/icons/visu/analysis/pill-negative.svg b/src/assets/icons/visu/analysis/pill-negative.svg
new file mode 100644
index 0000000000000000000000000000000000000000..eb796389316a5aeb9ab79e3c690f4a3e8d045f3c
--- /dev/null
+++ b/src/assets/icons/visu/analysis/pill-negative.svg
@@ -0,0 +1,6 @@
+<svg width="20" height="16" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <rect width="20" height="16" rx="8" fill="#7FD771" />
+ <path
+ d="M5.46967 4.53033C5.17678 4.23744 5.17678 3.76256 5.46967 3.46967C5.76256 3.17678 6.23744 3.17678 6.53033 3.46967L5.46967 4.53033ZM14.75 12C14.75 12.4142 14.4142 12.75 14 12.75L7.25 12.75C6.83579 12.75 6.5 12.4142 6.5 12C6.5 11.5858 6.83579 11.25 7.25 11.25L13.25 11.25L13.25 5.25C13.25 4.83579 13.5858 4.5 14 4.5C14.4142 4.5 14.75 4.83579 14.75 5.25L14.75 12ZM6.53033 3.46967L14.5303 11.4697L13.4697 12.5303L5.46967 4.53033L6.53033 3.46967Z"
+ fill="#23252D" />
+</svg>
\ No newline at end of file
diff --git a/src/assets/icons/visu/analysis/pill-positive.svg b/src/assets/icons/visu/analysis/pill-positive.svg
new file mode 100644
index 0000000000000000000000000000000000000000..176a2c5d561f26c87a4e83e930d63f5fc8d2a42d
--- /dev/null
+++ b/src/assets/icons/visu/analysis/pill-positive.svg
@@ -0,0 +1,6 @@
+<svg width="20" height="16" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <rect width="20" height="16" rx="8" fill="#D25959" />
+ <path
+ d="M5.46967 11.4697C5.17678 11.7626 5.17678 12.2374 5.46967 12.5303C5.76256 12.8232 6.23744 12.8232 6.53033 12.5303L5.46967 11.4697ZM14.75 4C14.75 3.58579 14.4142 3.25 14 3.25L7.25 3.25C6.83579 3.25 6.5 3.58579 6.5 4C6.5 4.41421 6.83579 4.75 7.25 4.75L13.25 4.75L13.25 10.75C13.25 11.1642 13.5858 11.5 14 11.5C14.4142 11.5 14.75 11.1642 14.75 10.75L14.75 4ZM6.53033 12.5303L14.5303 4.53033L13.4697 3.46967L5.46967 11.4697L6.53033 12.5303Z"
+ fill="#23252D" />
+</svg>
\ No newline at end of file
diff --git a/src/assets/icons/visu/analysis/temperature-cold.svg b/src/assets/icons/visu/analysis/temperature-cold.svg
new file mode 100644
index 0000000000000000000000000000000000000000..b344da5e9b9482dd811abf012136124e0a5510b5
--- /dev/null
+++ b/src/assets/icons/visu/analysis/temperature-cold.svg
@@ -0,0 +1,13 @@
+<svg width="40" height="41" viewBox="0 0 40 41" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <rect y="0.5" width="40" height="40" rx="4" fill="white" fill-opacity="0.1" />
+ <g clip-path="url(#clip0_7384_9152)">
+ <path
+ d="M29.8266 17.8866C28.9066 13.2866 24.8666 9.83325 20.0133 9.83325C16.16 9.83325 12.8133 12.0199 11.1466 15.2199C7.13331 15.6466 4.01331 19.0466 4.01331 23.1666C4.01331 27.5799 7.59997 31.1666 12.0133 31.1666H29.3466C33.0266 31.1666 36.0133 28.1799 36.0133 24.4999C36.0133 20.9799 33.28 18.1266 29.8266 17.8866Z"
+ fill="white" />
+ </g>
+ <defs>
+ <clipPath id="clip0_7384_9152">
+ <rect width="32" height="32" fill="white" transform="translate(4 4.5)" />
+ </clipPath>
+ </defs>
+</svg>
\ No newline at end of file
diff --git a/src/assets/icons/visu/analysis/temperature-hot.svg b/src/assets/icons/visu/analysis/temperature-hot.svg
new file mode 100644
index 0000000000000000000000000000000000000000..7c7c835adc3a7719831ad6890fd46c88080db2bd
--- /dev/null
+++ b/src/assets/icons/visu/analysis/temperature-hot.svg
@@ -0,0 +1,6 @@
+<svg width="40" height="41" viewBox="0 0 40 41" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <rect y="0.5" width="40" height="40" rx="8" fill="white" fill-opacity="0.1" />
+ <path
+ d="M12.0667 10.0199L11.5467 9.49994C11.0267 8.97994 10.1867 8.99328 9.68004 9.49994L9.66671 9.51328C9.14671 10.0333 9.14671 10.8733 9.66671 11.3799L10.1867 11.8999C10.7067 12.4199 11.5334 12.4199 12.0534 11.8999L12.0667 11.8866C12.5867 11.3799 12.5867 10.5266 12.0667 10.0199ZM8.01337 18.4999H6.65337C5.92004 18.4999 5.33337 19.0866 5.33337 19.8199V19.8333C5.33337 20.5666 5.92004 21.1533 6.65337 21.1533H8.00004C8.74671 21.1666 9.33337 20.5799 9.33337 19.8466V19.8333C9.33337 19.0866 8.74671 18.4999 8.01337 18.4999ZM20.0134 5.23328H20C19.2534 5.23328 18.6667 5.81994 18.6667 6.55328V7.83328C18.6667 8.56661 19.2534 9.15328 19.9867 9.15328H20C20.7467 9.16661 21.3334 8.57994 21.3334 7.84661V6.55328C21.3334 5.81994 20.7467 5.23328 20.0134 5.23328ZM30.3334 9.51328C29.8134 8.99328 28.9734 8.99328 28.4534 9.49994L27.9334 10.0199C27.4134 10.5399 27.4134 11.3799 27.9334 11.8866L27.9467 11.8999C28.4667 12.4199 29.3067 12.4199 29.8134 11.8999L30.3334 11.3799C30.8534 10.8599 30.8534 10.0333 30.3334 9.51328ZM27.92 29.6466L28.44 30.1666C28.96 30.6866 29.8 30.6866 30.32 30.1666C30.84 29.6466 30.84 28.8066 30.32 28.2866L29.8 27.7666C29.28 27.2466 28.44 27.2599 27.9334 27.7666C27.4 28.2999 27.4 29.1266 27.92 29.6466ZM30.6667 19.8199V19.8333C30.6667 20.5666 31.2534 21.1533 31.9867 21.1533H33.3334C34.0667 21.1533 34.6534 20.5666 34.6534 19.8333V19.8199C34.6534 19.0866 34.0667 18.4999 33.3334 18.4999H31.9867C31.2534 18.4999 30.6667 19.0866 30.6667 19.8199ZM20 11.8333C15.5867 11.8333 12 15.4199 12 19.8333C12 24.2466 15.5867 27.8333 20 27.8333C24.4134 27.8333 28 24.2466 28 19.8333C28 15.4199 24.4134 11.8333 20 11.8333ZM19.9867 34.4333H20C20.7334 34.4333 21.32 33.8466 21.32 33.1133V31.8333C21.32 31.0999 20.7334 30.5133 20 30.5133H19.9867C19.2534 30.5133 18.6667 31.0999 18.6667 31.8333V33.1133C18.6667 33.8466 19.2534 34.4333 19.9867 34.4333ZM9.66671 30.1533C10.1867 30.6733 11.0267 30.6733 11.5467 30.1533L12.0667 29.6333C12.5867 29.1133 12.5734 28.2733 12.0667 27.7666L12.0534 27.7533C11.5334 27.2333 10.6934 27.2333 10.1734 27.7533L9.65337 28.2733C9.14671 28.8066 9.14671 29.6333 9.66671 30.1533Z"
+ fill="white" />
+</svg>
\ No newline at end of file
diff --git a/src/assets/icons/visu/disconnected-grey.svg b/src/assets/icons/visu/disconnected-grey.svg
deleted file mode 100644
index 12836c7178cbf344db830f046ab77ac4e54d42a1..0000000000000000000000000000000000000000
--- a/src/assets/icons/visu/disconnected-grey.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M12.5751 7.67132C10.1977 8.94632 8.31917 10.9853 7.24286 13.459C6.16654 15.9328 5.95521 18.6971 6.64295 21.3057C7.3307 23.9144 8.8774 26.2152 11.0334 27.8368C13.1895 29.4584 15.829 30.3062 18.5261 30.2433C21.2231 30.1805 23.8203 29.2106 25.8984 27.4904C27.9766 25.7701 29.4144 23.3997 29.9799 20.7619C30.5454 18.124 30.2055 15.3726 29.0151 12.9516C27.8247 10.5307 25.8533 8.58147 23.419 7.41861" stroke="#7B7B7B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-<rect x="17.2466" y="4.24658" width="2" height="13" rx="1" fill="#7B7B7B"/>
-</svg>
diff --git a/src/assets/icons/visu/disconnected-off.svg b/src/assets/icons/visu/disconnected-off.svg
new file mode 100644
index 0000000000000000000000000000000000000000..a30f9a8247cc10a88d5876542c16419222b035ba
--- /dev/null
+++ b/src/assets/icons/visu/disconnected-off.svg
@@ -0,0 +1,7 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <rect width="32" height="32" rx="8" fill="#292A34" />
+ <path
+ d="M12.0715 8.6749C10.4247 9.55805 9.12353 10.9703 8.37801 12.6838C7.63248 14.3973 7.4861 16.3121 7.96247 18.119C8.43885 19.9259 9.5102 21.5196 11.0036 22.6428C12.497 23.766 14.3253 24.3532 16.1935 24.3097C18.0616 24.2662 19.8606 23.5944 21.3 22.4028C22.7395 21.2113 23.7354 19.5694 24.1271 17.7423C24.5188 15.9151 24.2834 14.0093 23.4588 12.3324C22.6343 10.6555 21.2688 9.30533 19.5826 8.49985"
+ stroke="#75778F" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+ <rect x="15.3071" y="6.30273" width="1.38533" height="9.00463" rx="0.692664" fill="#75778F" />
+</svg>
\ No newline at end of file
diff --git a/src/assets/icons/visu/disconnected-on.svg b/src/assets/icons/visu/disconnected-on.svg
new file mode 100644
index 0000000000000000000000000000000000000000..b5c6ab2b18d5dbb42c7a03d6f086de33c38025ca
--- /dev/null
+++ b/src/assets/icons/visu/disconnected-on.svg
@@ -0,0 +1,7 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <rect width="32" height="32" rx="8" fill="#504839" />
+ <path
+ d="M12.0715 8.6749C10.4247 9.55805 9.12353 10.9703 8.37801 12.6838C7.63248 14.3973 7.4861 16.3121 7.96247 18.119C8.43885 19.9259 9.5102 21.5196 11.0036 22.6428C12.497 23.766 14.3253 24.3532 16.1935 24.3097C18.0616 24.2662 19.8606 23.5944 21.3 22.4028C22.7395 21.2113 23.7354 19.5694 24.1271 17.7423C24.5188 15.9151 24.2834 14.0093 23.4588 12.3324C22.6343 10.6555 21.2688 9.30533 19.5826 8.49985"
+ stroke="#E3B82A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+ <rect x="15.3071" y="6.30273" width="1.38533" height="9.00463" rx="0.692664" fill="#E3B82A" />
+</svg>
\ No newline at end of file
diff --git a/src/assets/icons/visu/disconnected.svg b/src/assets/icons/visu/disconnected.svg
deleted file mode 100644
index 3dcc636176900f677b538f375d5d16dace01e3d7..0000000000000000000000000000000000000000
--- a/src/assets/icons/visu/disconnected.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M12.5751 7.67132C10.1977 8.94632 8.31917 10.9853 7.24286 13.459C6.16654 15.9328 5.95521 18.6971 6.64295 21.3057C7.3307 23.9144 8.8774 26.2152 11.0334 27.8368C13.1895 29.4584 15.829 30.3062 18.5261 30.2433C21.2231 30.1805 23.8203 29.2106 25.8984 27.4904C27.9766 25.7701 29.4144 23.3997 29.9799 20.7619C30.5454 18.124 30.2055 15.3726 29.0151 12.9516C27.8247 10.5307 25.8533 8.58147 23.419 7.41861" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-<rect x="17.2466" y="4.24658" width="2" height="13" rx="1" fill="white"/>
-</svg>
diff --git a/src/assets/icons/visu/elec-grey.svg b/src/assets/icons/visu/elec-grey.svg
deleted file mode 100644
index a18d88a66e9f449e786d863a02df8a71dea85de4..0000000000000000000000000000000000000000
--- a/src/assets/icons/visu/elec-grey.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
-<circle cx="15.0001" cy="14.9999" r="14.1364" fill="#121212" stroke="#7B7B7B"/>
-<path d="M0.681885 15.5114L4.09098 18.2386L6.81825 13.4659L10.2273 20.9659L14.3182 9.375L17.7273 20.2841L21.1364 12.1023L24.3752 19.5181L27.2728 14.6693L29.3182 17.0455" stroke="#7B7B7B"/>
-</svg>
diff --git a/src/assets/icons/visu/elec-off.svg b/src/assets/icons/visu/elec-off.svg
new file mode 100644
index 0000000000000000000000000000000000000000..0b22a38b486641bf5852253ed632d8886f593ccc
--- /dev/null
+++ b/src/assets/icons/visu/elec-off.svg
@@ -0,0 +1,9 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <rect width="32" height="32" rx="8" fill="#292A34" />
+ <path
+ d="M16.3412 5.44859C16.6097 5.02657 17.263 5.21681 17.263 5.71703V17.3947C17.263 17.6709 17.0391 17.8947 16.763 17.8947H9.33174C8.93719 17.8947 8.69808 17.4592 8.9099 17.1263L16.3412 5.44859Z"
+ fill="#75778F" />
+ <path
+ d="M15.6689 26.4025C15.4117 26.8433 14.737 26.6609 14.737 26.1505V13.3421C14.737 13.066 14.9609 12.8421 15.237 12.8421H22.7086C23.0945 12.8421 23.3349 13.2607 23.1405 13.594L15.6689 26.4025Z"
+ fill="#75778F" />
+</svg>
\ No newline at end of file
diff --git a/src/assets/icons/visu/elec-on.svg b/src/assets/icons/visu/elec-on.svg
new file mode 100644
index 0000000000000000000000000000000000000000..ac70eea36b0f4d40e56c565d3b8af2ccab6d0cfe
--- /dev/null
+++ b/src/assets/icons/visu/elec-on.svg
@@ -0,0 +1,9 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <rect width="32" height="32" rx="8" fill="#544232" />
+ <path
+ d="M16.3412 5.44859C16.6097 5.02657 17.263 5.21681 17.263 5.71703V17.3947C17.263 17.6709 17.0391 17.8947 16.763 17.8947H9.33174C8.93719 17.8947 8.69808 17.4592 8.9099 17.1263L16.3412 5.44859Z"
+ fill="#D87B39" />
+ <path
+ d="M15.6689 26.4025C15.4117 26.8433 14.737 26.6609 14.737 26.1505V13.3421C14.737 13.066 14.9609 12.8421 15.237 12.8421H22.7086C23.0945 12.8421 23.3349 13.2607 23.1405 13.594L15.6689 26.4025Z"
+ fill="#D87B39" />
+</svg>
\ No newline at end of file
diff --git a/src/assets/icons/visu/elec-param.svg b/src/assets/icons/visu/elec-param.svg
deleted file mode 100644
index d823004bbd472a775c0548552d84296a1e5d365d..0000000000000000000000000000000000000000
--- a/src/assets/icons/visu/elec-param.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-<svg width="51" height="51" viewBox="0 0 51 51" fill="none" xmlns="http://www.w3.org/2000/svg">
-<circle cx="25.5" cy="25.5" r="25" fill="#121212" stroke="#D87B39"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M34.0044 48.4837C31.3552 49.4643 28.4902 50 25.5 50C15.1546 50 6.3069 43.5879 2.71426 34.5211H4.09929L4.4043 33.2816C5.01421 31.7323 5.62412 30.1831 6.23404 28.9437L6.84396 28.0141L3.18439 24.2958C2.57446 23.9859 2.57446 23.6761 2.57446 23.6761C2.57446 23.6761 2.57446 23.3662 2.87943 23.0563L5.62411 20.2676C5.92907 19.9577 6.23404 19.9577 6.23404 19.9577L10.1986 23.9859L11.1135 23.3662C12.6383 22.4366 14.1631 21.507 15.9929 21.1972L17.2128 20.8873V15H22.3972V20.5775L23.617 20.8873C25.4468 21.507 26.9716 22.1268 28.4964 23.0563L29.4113 23.6761L32.7659 20.2676C33.0709 19.6479 33.3759 19.6479 33.3759 19.6479C33.3759 19.6479 33.6808 19.6479 33.9858 19.9577L36.7305 22.7465C37.0355 23.0563 37.0355 23.3662 37.0355 23.3662L32.7659 27.7042L33.3759 28.6338C34.2908 30.1831 34.9007 31.4225 35.2057 32.9718L35.5106 34.2113H41V39.7887H35.5106L35.2057 41.0282C34.5957 42.8873 33.9858 44.4366 33.0709 45.9859L32.461 46.9155L34.0044 48.4837ZM14 36.3143C14 32.9714 16.9714 30 20.6857 30C24.4 30 27 32.9714 27 36.3143C27 40.0286 24.4 43 20.6857 43C16.9714 43 14 40.0286 14 36.3143Z" fill="#D87B39"/>
-<path d="M40.5886 19H45.4113V13.5141L46.5461 13.2254C46.5945 13.2155 46.6425 13.2053 46.6903 13.1948C42.4463 5.90218 34.5457 1 25.5 1C24.656 1 23.822 1.04268 23 1.12599V1.38732H28.1064L28.3901 2.54225C28.6738 4.27464 29.5248 5.7183 30.3759 7.16195L30.9433 8.02816L26.9716 12.0704C26.9716 12.0704 26.9716 12.3591 27.2553 12.6479L29.8085 15.2465C30.0922 15.5352 30.3759 15.5352 30.3759 15.5352C30.3759 15.5352 30.6596 15.5352 30.9433 14.9577L34.3475 11.493L35.1986 12.0704C35.9936 12.6773 36.9279 13.0007 37.9038 13.3385C38.3209 13.4829 38.7455 13.6299 39.1702 13.8028L40.305 14.0915V18.7113C40.5887 18.7113 40.5886 18.7113 40.5886 19Z" fill="#D87B39" fill-opacity="0.5"/>
-</svg>
diff --git a/src/assets/icons/visu/elec-small.svg b/src/assets/icons/visu/elec-small.svg
deleted file mode 100644
index c56a64cb33b1cc4b116f2ec5e96385feb45b4262..0000000000000000000000000000000000000000
--- a/src/assets/icons/visu/elec-small.svg
+++ /dev/null
@@ -1,11 +0,0 @@
-<svg width="22" height="23" viewBox="0 0 22 23" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0)">
-<circle cx="11" cy="11.125" r="10.5" fill="#121212" stroke="#D87B39"/>
-<path d="M0.5 11.5L3 13.5L5 10L7.5 15.5L10.5 7L13 15L15.5 9L17.8751 14.4382L20 10.8825L21.5 12.625" stroke="#D87B39"/>
-</g>
-<defs>
-<clipPath id="clip0">
-<path d="M0 0.125H22V22.125H0V0.125Z" fill="white"/>
-</clipPath>
-</defs>
-</svg>
diff --git a/src/assets/icons/visu/elec.svg b/src/assets/icons/visu/elec.svg
deleted file mode 100644
index f25c5de936ad99771152609bc8ec81adcccdfa9b..0000000000000000000000000000000000000000
--- a/src/assets/icons/visu/elec.svg
+++ /dev/null
@@ -1,6 +0,0 @@
-<svg width="52" height="52" viewBox="0 0 52 52" fill="none" xmlns="http://www.w3.org/2000/svg">
-<circle cx="26" cy="26" r="25.5" fill="#121212" stroke="#D87B39"/>
-<path d="M1.5 33.5L4.97726 25.4318L8.38635 33.9545L12.3636 21.4545L14.0682 27.7045L18.0454 20.3182L23 39L26.5682 25.4318L29.9773 35.0909L33.3864 20.3182L37.9318 35.0909L41.9091 21.4545L45.3182 31.1136L47.0227 25.4318L50 34.5" stroke="#D87B39"/>
-<path d="M0.5 27L3.27271 29.0749L7.72232 25.0642L13.0619 31.0802L19.2913 22.2567L21.9611 26.6684L28.1906 21.4545L36.1999 35.0909L41.5394 25.0642L46.8789 31.8824L51.4271 23" stroke="#D87B39" stroke-opacity="0.6"/>
-<path d="M51.5001 24.0918L50.4524 25.6658L45.1128 18.8476L38.8834 28.4733L31.764 18.0455L26.4245 28.4733L21.0849 21.6551L15.7454 31.6818L7.73607 18.0455L3 25L0.744507 22" stroke="#D87B39" stroke-opacity="0.4"/>
-</svg>
diff --git a/src/assets/icons/visu/gas-grey.svg b/src/assets/icons/visu/gas-grey.svg
deleted file mode 100644
index 01f147596e1360b3c8737042c9a933b8b1b560f4..0000000000000000000000000000000000000000
--- a/src/assets/icons/visu/gas-grey.svg
+++ /dev/null
@@ -1,6 +0,0 @@
-<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
-<circle cx="14.9999" cy="14.9999" r="14.1364" fill="#121212" stroke="#7B7B7B"/>
-<path d="M10.2273 19.5908C12.0096 19.5908 13.4545 18.1459 13.4545 16.3635C13.4545 14.5811 12.0096 13.1362 10.2273 13.1362C8.4449 13.1362 7 14.5811 7 16.3635C7 18.1459 8.4449 19.5908 10.2273 19.5908Z" fill="#121212" stroke="#7B7B7B"/>
-<path d="M17.0453 23.6816C18.0745 23.6816 18.9089 22.8472 18.9089 21.818C18.9089 20.7887 18.0745 19.9543 17.0453 19.9543C16.016 19.9543 15.1816 20.7887 15.1816 21.818C15.1816 22.8472 16.016 23.6816 17.0453 23.6816Z" fill="#121212" stroke="#7B7B7B"/>
-<path d="M16.3635 16.8636C19.2756 16.8636 21.6363 14.5029 21.6363 11.5908C21.6363 8.6788 19.2756 6.31812 16.3635 6.31812C13.4515 6.31812 11.0908 8.6788 11.0908 11.5908C11.0908 14.5029 13.4515 16.8636 16.3635 16.8636Z" fill="#121212" stroke="#7B7B7B"/>
-</svg>
diff --git a/src/assets/icons/visu/gas-off.svg b/src/assets/icons/visu/gas-off.svg
new file mode 100644
index 0000000000000000000000000000000000000000..e4f3fe09442732f60971d9e5f939a0978a54809e
--- /dev/null
+++ b/src/assets/icons/visu/gas-off.svg
@@ -0,0 +1,6 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <rect width="32" height="32" rx="8" fill="#292A34" />
+ <path fill-rule="evenodd" clip-rule="evenodd"
+ d="M12.1751 25.9798C10.2006 25.3142 8.14805 23.9885 7.74938 21.5964C7.23746 18.5249 8.27557 15.9701 9.00956 14.1637C9.36641 13.2855 9.65138 12.5842 9.65138 12.0864C10.0318 12.7204 10.7165 14.2167 10.4122 15.1296C12.1874 13.2276 15.4335 8.73889 14.2162 6C15.8646 6.8876 19.3136 9.57577 19.9222 13.2276C20.3026 12.8472 20.9113 11.6299 20.3026 9.80401C22.3314 11.5792 25.8565 16.3469 23.7262 21.216C22.5587 23.8846 20.6524 25.3039 18.8338 26C20.8561 19.6968 17.6237 15.3715 15.7378 13.9885C16.3464 17.6404 14.977 19.3141 14.2162 19.6945C14.5205 18.4772 14.0894 17.1585 13.8358 16.6513C13.8358 17.7925 13.4557 18.5533 11.9341 21.2161C10.8034 23.1949 11.5545 25.108 12.1751 25.9798Z"
+ fill="#75778F" />
+</svg>
\ No newline at end of file
diff --git a/src/assets/icons/visu/gas-on.svg b/src/assets/icons/visu/gas-on.svg
new file mode 100644
index 0000000000000000000000000000000000000000..e1ca822f12a1d89a67fb2310704ec8599b562790
--- /dev/null
+++ b/src/assets/icons/visu/gas-on.svg
@@ -0,0 +1,6 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <rect width="32" height="32" rx="8" fill="#2F4F43" />
+ <path fill-rule="evenodd" clip-rule="evenodd"
+ d="M12.1751 25.9798C10.2006 25.3142 8.14805 23.9885 7.74938 21.5964C7.23746 18.5249 8.27557 15.9701 9.00956 14.1637C9.36641 13.2855 9.65138 12.5842 9.65138 12.0864C10.0318 12.7204 10.7165 14.2167 10.4122 15.1296C12.1874 13.2276 15.4335 8.73889 14.2162 6C15.8646 6.8876 19.3136 9.57577 19.9222 13.2276C20.3026 12.8472 20.9113 11.6299 20.3026 9.80401C22.3314 11.5792 25.8565 16.3469 23.7262 21.216C22.5587 23.8846 20.6524 25.3039 18.8338 26C20.8561 19.6968 17.6237 15.3715 15.7378 13.9885C16.3464 17.6404 14.977 19.3141 14.2162 19.6945C14.5205 18.4772 14.0894 17.1585 13.8358 16.6513C13.8358 17.7925 13.4557 18.5533 11.9341 21.2161C10.8034 23.1949 11.5545 25.108 12.1751 25.9798Z"
+ fill="#45D1B8" />
+</svg>
\ No newline at end of file
diff --git a/src/assets/icons/visu/gas-param.svg b/src/assets/icons/visu/gas-param.svg
deleted file mode 100644
index 8c860a260dd2e410e14413b9c2b7f7eea0f4adbc..0000000000000000000000000000000000000000
--- a/src/assets/icons/visu/gas-param.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-<svg width="51" height="51" viewBox="0 0 51 51" fill="none" xmlns="http://www.w3.org/2000/svg">
-<circle cx="25.5" cy="25.5" r="25" fill="#121212" stroke="#45D1B8"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M34.0044 48.4837C31.3552 49.4643 28.4902 50 25.5 50C15.1546 50 6.3069 43.5879 2.71426 34.5211H4.09929L4.4043 33.2816C5.01421 31.7323 5.62412 30.1831 6.23404 28.9437L6.84396 28.0141L3.18439 24.2958C2.57446 23.9859 2.57446 23.6761 2.57446 23.6761C2.57446 23.6761 2.57446 23.3662 2.87943 23.0563L5.62411 20.2676C5.92907 19.9577 6.23404 19.9577 6.23404 19.9577L10.1986 23.9859L11.1135 23.3662C12.6383 22.4366 14.1631 21.507 15.9929 21.1972L17.2128 20.8873V15H22.3972V20.5775L23.617 20.8873C25.4468 21.507 26.9716 22.1268 28.4964 23.0563L29.4113 23.6761L32.7659 20.2676C33.0709 19.6479 33.3759 19.6479 33.3759 19.6479C33.3759 19.6479 33.6808 19.6479 33.9858 19.9577L36.7305 22.7465C37.0355 23.0563 37.0355 23.3662 37.0355 23.3662L32.7659 27.7042L33.3759 28.6338C34.2908 30.1831 34.9007 31.4225 35.2057 32.9718L35.5106 34.2113H41V39.7887H35.5106L35.2057 41.0282C34.5957 42.8873 33.9858 44.4366 33.0709 45.9859L32.461 46.9155L34.0044 48.4837ZM14 36.3143C14 32.9714 16.9714 30 20.6857 30C24.4 30 27 32.9714 27 36.3143C27 40.0286 24.4 43 20.6857 43C16.9714 43 14 40.0286 14 36.3143Z" fill="#45D1B8"/>
-<path d="M40.5886 19H45.4113V13.5141L46.5461 13.2254C46.5945 13.2155 46.6425 13.2053 46.6903 13.1948C42.4463 5.90218 34.5457 1 25.5 1C24.656 1 23.822 1.04268 23 1.12599V1.38732H28.1064L28.3901 2.54225C28.6738 4.27464 29.5248 5.7183 30.3759 7.16195L30.9433 8.02816L26.9716 12.0704C26.9716 12.0704 26.9716 12.3591 27.2553 12.6479L29.8085 15.2465C30.0922 15.5352 30.3759 15.5352 30.3759 15.5352C30.3759 15.5352 30.6596 15.5352 30.9433 14.9577L34.3475 11.493L35.1986 12.0704C35.9936 12.6773 36.9279 13.0007 37.9038 13.3385C38.3209 13.4829 38.7455 13.6299 39.1702 13.8028L40.305 14.0915V18.7113C40.5887 18.7113 40.5886 18.7113 40.5886 19Z" fill="#45D1B8" fill-opacity="0.5"/>
-</svg>
diff --git a/src/assets/icons/visu/gas-small.svg b/src/assets/icons/visu/gas-small.svg
deleted file mode 100644
index fa657d256649f289fd521241db77d76ab578c2ba..0000000000000000000000000000000000000000
--- a/src/assets/icons/visu/gas-small.svg
+++ /dev/null
@@ -1,13 +0,0 @@
-<svg width="22" height="23" viewBox="0 0 22 23" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0)">
-<circle cx="11" cy="11.125" r="10.5" fill="#121212" stroke="#45D1B8"/>
-<circle cx="7.5" cy="12.125" r="2.5" fill="#121212" stroke="#45D1B8"/>
-<circle cx="12.5" cy="16.125" r="1.5" fill="#121212" stroke="#45D1B8"/>
-<circle cx="12" cy="8.625" r="4" fill="#121212" stroke="#45D1B8"/>
-</g>
-<defs>
-<clipPath id="clip0">
-<path d="M0 0.125H22V22.125H0V0.125Z" fill="white"/>
-</clipPath>
-</defs>
-</svg>
diff --git a/src/assets/icons/visu/gas.svg b/src/assets/icons/visu/gas.svg
deleted file mode 100644
index 39afd28906076941093db77935148e1b7e7d4750..0000000000000000000000000000000000000000
--- a/src/assets/icons/visu/gas.svg
+++ /dev/null
@@ -1,6 +0,0 @@
-<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
-<circle cx="25" cy="25" r="24.5" fill="#121212" stroke="#45D1B8"/>
-<path d="M46.8229 37.2058C42.5437 44.8403 34.3744 50 24.9999 50C14.1585 50 4.92885 43.099 1.46411 33.4502C3.31494 32.2981 5.50008 31.6326 7.84065 31.6326C14.0266 31.6326 19.1268 36.2809 19.8392 42.2751C22.1386 40.6459 24.9475 39.6883 27.9801 39.6883C30.2966 39.6883 32.4825 40.247 34.4106 41.2371C35.4562 38.0011 38.4936 35.6605 42.0776 35.6605C43.8518 35.6605 45.492 36.234 46.8229 37.2058Z" fill="#45D1B8"/>
-<path d="M24.4269 49.9936C10.8845 49.689 0 38.6156 0 25C0 24.4515 0.0176649 23.9071 0.0524568 23.3674C0.535561 23.272 1.03497 23.222 1.54605 23.222C4.95782 23.222 7.8492 25.4501 8.84454 28.5305C10.6799 27.5881 12.7608 27.0562 14.966 27.0562C17.8527 27.0562 20.5265 27.9677 22.7154 29.5185C23.3936 23.8125 28.2486 19.3877 34.1371 19.3877C40.0174 19.3877 44.8671 23.8001 45.556 29.4945C46.4791 29.1573 47.476 28.9733 48.5158 28.9733C48.9084 28.9733 49.2949 28.9996 49.6736 29.0504C47.7763 40.6968 37.8319 49.6408 25.7336 49.9894C25.5388 49.7273 25.3549 49.4566 25.1825 49.1779C24.9419 49.4601 24.6898 49.7323 24.4269 49.9936Z" fill="#45D1B8" fill-opacity="0.4"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M25 50C38.8071 50 50 38.8071 50 25C50 24.3331 49.9739 23.6722 49.9226 23.0185C48.7952 22.6489 47.591 22.449 46.34 22.449C40.4576 22.449 35.6075 26.8692 34.9302 32.5693C32.7435 31.02 30.0724 30.1094 27.1886 30.1094C24.9858 30.1094 22.9072 30.6407 21.0738 31.5821C20.0794 28.5049 17.1911 26.2792 13.783 26.2792C9.55221 26.2792 6.1225 29.7089 6.1225 33.9397C6.1225 34.8007 6.26456 35.6286 6.52651 36.4011C5.50609 36.8664 4.60566 37.5491 3.8844 38.39C8.31923 45.369 16.1188 50 25 50Z" fill="#45D1B8" fill-opacity="0.6"/>
-</svg>
diff --git a/src/assets/icons/visu/multi-grey.svg b/src/assets/icons/visu/multi-grey.svg
deleted file mode 100644
index 15ffda8d5aeaa443da3199ae2bdebe31b44d3a33..0000000000000000000000000000000000000000
--- a/src/assets/icons/visu/multi-grey.svg
+++ /dev/null
@@ -1,13 +0,0 @@
-<svg width="42" height="40" viewBox="0 0 42 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-<circle cx="28.9091" cy="26.9091" r="11.9091" fill="#121212" stroke="#121212" stroke-width="2"/>
-<circle cx="28.9999" cy="26.9999" r="11.4091" fill="#121212" stroke="#7B7B7B"/>
-<circle cx="25.1818" cy="28.0908" r="2.68182" fill="#121212" stroke="#7B7B7B"/>
-<path d="M30.6363 34.0453C31.515 34.0453 32.2272 33.3331 32.2272 32.4544C32.2272 31.5758 31.515 30.8635 30.6363 30.8635C29.7577 30.8635 29.0454 31.5758 29.0454 32.4544C29.0454 33.3331 29.7577 34.0453 30.6363 34.0453Z" fill="#121212" stroke="#7B7B7B"/>
-<path d="M30.0909 28.5907C32.4758 28.5907 34.4091 26.6574 34.4091 24.2725C34.4091 21.8877 32.4758 19.9543 30.0909 19.9543C27.706 19.9543 25.7727 21.8877 25.7727 24.2725C25.7727 26.6574 27.706 28.5907 30.0909 28.5907Z" fill="#121212" stroke="#7B7B7B"/>
-<circle cx="12.9091" cy="26.9091" r="11.9091" fill="#121212" stroke="#121212" stroke-width="2"/>
-<circle cx="12.9999" cy="26.9999" r="11.4091" fill="#121212" stroke="#7B7B7B"/>
-<path d="M2.09082 30.5311C2.73743 28.7529 4.90358 25.1965 8.39528 25.1965C12.7599 25.1965 12.7599 30.5311 17.1245 30.5311C20.6162 30.5311 21.9741 26.6514 23.914 25.6815" stroke="#7B7B7B"/>
-<circle cx="20.9999" cy="12.9999" r="11.9091" fill="#121212" stroke="#121212" stroke-width="2"/>
-<circle cx="20.9999" cy="12.9999" r="11.4091" fill="#121212" stroke="#7B7B7B"/>
-<path d="M9.54541 13.4091L12.2727 15.5909L14.4545 11.7727L17.1818 17.7727L20.4545 8.5L23.1818 17.2273L25.909 10.6818L28.5 16.6145L30.8181 12.7354L32.4545 14.6364" stroke="#7B7B7B"/>
-</svg>
diff --git a/src/assets/icons/visu/multi-off.svg b/src/assets/icons/visu/multi-off.svg
new file mode 100644
index 0000000000000000000000000000000000000000..57fe4fada279545fb92026cc34ded6c9792d367f
--- /dev/null
+++ b/src/assets/icons/visu/multi-off.svg
@@ -0,0 +1,6 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <rect width="32" height="32" rx="8" fill="#292A34" />
+ <path d="M6.5 18C6.5 16.6193 7.61929 15.5 9 15.5C10.3807 15.5 11.5 16.6193 11.5 18V26.5H6.5V18Z" fill="#75778F" />
+ <path d="M20.5 14C20.5 12.6193 21.6193 11.5 23 11.5C24.3807 11.5 25.5 12.6193 25.5 14V26.5H20.5V14Z" fill="#75778F" />
+ <path d="M13.5 8C13.5 6.61929 14.6193 5.5 16 5.5C17.3807 5.5 18.5 6.61929 18.5 8V26.5H13.5V8Z" fill="#75778F" />
+</svg>
\ No newline at end of file
diff --git a/src/assets/icons/visu/multi-on.svg b/src/assets/icons/visu/multi-on.svg
new file mode 100644
index 0000000000000000000000000000000000000000..a647e6b881dbb5251f9ab007b830d657a4f9ac7e
--- /dev/null
+++ b/src/assets/icons/visu/multi-on.svg
@@ -0,0 +1,6 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <rect width="32" height="32" rx="8" fill="#504839" />
+ <path d="M6.5 18C6.5 16.6193 7.61929 15.5 9 15.5C10.3807 15.5 11.5 16.6193 11.5 18V26.5H6.5V18Z" fill="#E3B82A" />
+ <path d="M20.5 14C20.5 12.6193 21.6193 11.5 23 11.5C24.3807 11.5 25.5 12.6193 25.5 14V26.5H20.5V14Z" fill="#E3B82A" />
+ <path d="M13.5 8C13.5 6.61929 14.6193 5.5 16 5.5C17.3807 5.5 18.5 6.61929 18.5 8V26.5H13.5V8Z" fill="#E3B82A" />
+</svg>
\ No newline at end of file
diff --git a/src/assets/icons/visu/multi.svg b/src/assets/icons/visu/multi.svg
deleted file mode 100644
index 203fdbba1869252fd69eb4ee79f1d6c2af5b77b8..0000000000000000000000000000000000000000
--- a/src/assets/icons/visu/multi.svg
+++ /dev/null
@@ -1,30 +0,0 @@
-<svg width="42" height="41" viewBox="0 0 42 41" fill="none" xmlns="http://www.w3.org/2000/svg">
-<circle cx="28.9091" cy="27.4091" r="11.9091" fill="#121212" stroke="#121212" stroke-width="2"/>
-<g clip-path="url(#clip0)">
-<circle cx="28.9999" cy="27.4999" r="11.4091" fill="#121212" stroke="#45D1B8"/>
-<circle cx="25.1818" cy="28.591" r="2.68182" fill="#121212" stroke="#45D1B8"/>
-<path d="M30.6363 34.5456C31.515 34.5456 32.2272 33.8333 32.2272 32.9547C32.2272 32.076 31.515 31.3638 30.6363 31.3638C29.7577 31.3638 29.0454 32.076 29.0454 32.9547C29.0454 33.8333 29.7577 34.5456 30.6363 34.5456Z" fill="#121212" stroke="#45D1B8"/>
-<path d="M30.0909 29.091C32.4758 29.091 34.4091 27.1576 34.4091 24.7728C34.4091 22.3879 32.4758 20.4546 30.0909 20.4546C27.706 20.4546 25.7727 22.3879 25.7727 24.7728C25.7727 27.1576 27.706 29.091 30.0909 29.091Z" fill="#121212" stroke="#45D1B8"/>
-</g>
-<circle cx="12.9091" cy="27.4091" r="11.9091" fill="#121212" stroke="#121212" stroke-width="2"/>
-<g clip-path="url(#clip1)">
-<circle cx="12.9999" cy="27.4999" r="11.4091" fill="#121212" stroke="#3A98EC"/>
-<path d="M2.09082 31.0308C2.73743 29.2527 4.90358 25.6963 8.39528 25.6963C12.7599 25.6963 12.7599 31.0308 17.1245 31.0308C20.6162 31.0308 21.9741 27.1512 23.914 26.1812" stroke="#3A98EC"/>
-</g>
-<circle cx="20.9999" cy="13.4999" r="11.9091" fill="#121212" stroke="#121212" stroke-width="2"/>
-<g clip-path="url(#clip2)">
-<circle cx="20.9999" cy="13.4999" r="11.4091" fill="#121212" stroke="#D87B39"/>
-<path d="M9.54541 13.9091L12.2727 16.0909L14.4545 12.2727L17.1818 18.2727L20.4545 9L23.1818 17.7273L25.909 11.1818L28.5 17.1145L30.8181 13.2354L32.4545 15.1364" stroke="#D87B39"/>
-</g>
-<defs>
-<clipPath id="clip0">
-<rect width="24" height="24" fill="white" transform="translate(17 15.5)"/>
-</clipPath>
-<clipPath id="clip1">
-<rect width="24" height="24" fill="white" transform="translate(1 15.5)"/>
-</clipPath>
-<clipPath id="clip2">
-<rect width="24" height="24" fill="white" transform="translate(9 1.5)"/>
-</clipPath>
-</defs>
-</svg>
diff --git a/src/assets/icons/visu/water-grey.svg b/src/assets/icons/visu/water-grey.svg
deleted file mode 100644
index 353df1419e8dc637fe9b47bc9e7fafda282d0361..0000000000000000000000000000000000000000
--- a/src/assets/icons/visu/water-grey.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
-<circle cx="14.9999" cy="14.9999" r="14.1364" fill="#121212" stroke="#7B7B7B"/>
-<path d="M1.36353 19.4138C2.17179 17.1911 4.87948 12.7456 9.2441 12.7456C14.6999 12.7456 14.6999 19.4138 20.1557 19.4138C24.5203 19.4138 26.2177 14.5642 28.6425 13.3518" stroke="#7B7B7B"/>
-</svg>
diff --git a/src/assets/icons/visu/water-off.svg b/src/assets/icons/visu/water-off.svg
new file mode 100644
index 0000000000000000000000000000000000000000..eb2c91c4dfe63e6dffe03f9c4c072a82e5875c35
--- /dev/null
+++ b/src/assets/icons/visu/water-off.svg
@@ -0,0 +1,6 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <rect width="32" height="32" rx="8" fill="#23252D" />
+ <path
+ d="M22 19.2553C22 22.428 19.3137 25 16 25C12.6863 25 10 22.428 10 19.2553C10 16.8161 13.5465 10.8837 15.1862 8.27105C15.5675 7.66359 16.4325 7.66359 16.8138 8.27105C18.4535 10.8837 22 16.8161 22 19.2553Z"
+ fill="#75778F" />
+</svg>
\ No newline at end of file
diff --git a/src/assets/icons/visu/water-on.svg b/src/assets/icons/visu/water-on.svg
new file mode 100644
index 0000000000000000000000000000000000000000..6048661ae4f37eded22f552b1f4b095d15b699d0
--- /dev/null
+++ b/src/assets/icons/visu/water-on.svg
@@ -0,0 +1,6 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <rect width="32" height="32" rx="8" fill="#3D516D" />
+ <path
+ d="M22 19.2553C22 22.428 19.3137 25 16 25C12.6863 25 10 22.428 10 19.2553C10 16.8161 13.5465 10.8837 15.1862 8.27105C15.5675 7.66359 16.4325 7.66359 16.8138 8.27105C18.4535 10.8837 22 16.8161 22 19.2553Z"
+ fill="#61B4FF" />
+</svg>
\ No newline at end of file
diff --git a/src/assets/icons/visu/water-param.svg b/src/assets/icons/visu/water-param.svg
deleted file mode 100644
index 70460edab9c1fa89fe84728b0b8265ef45ac1c11..0000000000000000000000000000000000000000
--- a/src/assets/icons/visu/water-param.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-<svg width="51" height="51" viewBox="0 0 51 51" fill="none" xmlns="http://www.w3.org/2000/svg">
-<circle cx="25.5" cy="25.5" r="25" fill="#121212" stroke="#3A98EC"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M34.0044 48.4837C31.3552 49.4643 28.4902 50 25.5 50C15.1546 50 6.3069 43.5879 2.71426 34.5211H4.09929L4.4043 33.2816C5.01421 31.7323 5.62412 30.1831 6.23404 28.9437L6.84396 28.0141L3.18439 24.2958C2.57446 23.9859 2.57446 23.6761 2.57446 23.6761C2.57446 23.6761 2.57446 23.3662 2.87943 23.0563L5.62411 20.2676C5.92907 19.9577 6.23404 19.9577 6.23404 19.9577L10.1986 23.9859L11.1135 23.3662C12.6383 22.4366 14.1631 21.507 15.9929 21.1972L17.2128 20.8873V15H22.3972V20.5775L23.617 20.8873C25.4468 21.507 26.9716 22.1268 28.4964 23.0563L29.4113 23.6761L32.7659 20.2676C33.0709 19.6479 33.3759 19.6479 33.3759 19.6479C33.3759 19.6479 33.6808 19.6479 33.9858 19.9577L36.7305 22.7465C37.0355 23.0563 37.0355 23.3662 37.0355 23.3662L32.7659 27.7042L33.3759 28.6338C34.2908 30.1831 34.9007 31.4225 35.2057 32.9718L35.5106 34.2113H41V39.7887H35.5106L35.2057 41.0282C34.5957 42.8873 33.9858 44.4366 33.0709 45.9859L32.461 46.9155L34.0044 48.4837ZM14 36.3143C14 32.9714 16.9714 30 20.6857 30C24.4 30 27 32.9714 27 36.3143C27 40.0286 24.4 43 20.6857 43C16.9714 43 14 40.0286 14 36.3143Z" fill="#3A98EC"/>
-<path d="M40.5886 19H45.4113V13.5141L46.5461 13.2254C46.5945 13.2155 46.6425 13.2053 46.6903 13.1948C42.4463 5.90218 34.5457 1 25.5 1C24.656 1 23.822 1.04268 23 1.12599V1.38732H28.1064L28.3901 2.54225C28.6738 4.27464 29.5248 5.7183 30.3759 7.16195L30.9433 8.02816L26.9716 12.0704C26.9716 12.0704 26.9716 12.3591 27.2553 12.6479L29.8085 15.2465C30.0922 15.5352 30.3759 15.5352 30.3759 15.5352C30.3759 15.5352 30.6596 15.5352 30.9433 14.9577L34.3475 11.493L35.1986 12.0704C35.9936 12.6773 36.9279 13.0007 37.9038 13.3385C38.3209 13.4829 38.7455 13.6299 39.1702 13.8028L40.305 14.0915V18.7113C40.5887 18.7113 40.5886 18.7113 40.5886 19Z" fill="#3A98EC" fill-opacity="0.5"/>
-</svg>
diff --git a/src/assets/icons/visu/water-small.svg b/src/assets/icons/visu/water-small.svg
deleted file mode 100644
index f4bca84036108aab349221a7f160143853717590..0000000000000000000000000000000000000000
--- a/src/assets/icons/visu/water-small.svg
+++ /dev/null
@@ -1,11 +0,0 @@
-<svg width="22" height="23" viewBox="0 0 22 23" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0)">
-<circle cx="11" cy="11.125" r="10.5" fill="#121212" stroke="#3A98EC"/>
-<path d="M1 14.3618C1.59273 12.7318 3.57836 9.47183 6.77909 9.47183C10.78 9.47183 10.78 14.3618 14.7809 14.3618C17.9816 14.3618 19.2264 10.8055 21.0045 9.91638" stroke="#3A98EC"/>
-</g>
-<defs>
-<clipPath id="clip0">
-<path d="M0 0.125H22V22.125H0V0.125Z" fill="white"/>
-</clipPath>
-</defs>
-</svg>
diff --git a/src/assets/icons/visu/water.svg b/src/assets/icons/visu/water.svg
deleted file mode 100644
index 4509a94ecb7c1b12ee6c9b3a6b8d083c7c095210..0000000000000000000000000000000000000000
--- a/src/assets/icons/visu/water.svg
+++ /dev/null
@@ -1,6 +0,0 @@
-<svg width="51" height="50" viewBox="0 0 51 50" fill="none" xmlns="http://www.w3.org/2000/svg">
-<circle cx="25" cy="25" r="24.5" fill="black" stroke="#3A98EC"/>
-<path d="M47.4091 36.0955C43.3213 44.3357 34.8221 50 25 50C16.3888 50 8.7944 45.6462 4.2981 39.0198C6.93681 39.9946 10.014 40.7156 13.6617 40.7156C19.3408 40.7156 22.9456 38.968 26.5187 37.2357C30.0298 35.5335 33.5103 33.8462 38.8981 33.8462C43.0598 33.8462 45.2869 34.8529 47.4091 36.0955Z" fill="#3A98EC"/>
-<path d="M25.2243 49.2308C39.0314 49.2308 50.2243 38.0379 50.2243 24.2308C50.2243 23.3019 50.1736 22.3849 50.0749 21.4823C47.7069 20.6125 44.7668 20 40.8895 20C35.007 20 31.8981 21.8631 28.4165 23.9495C23.9864 26.6044 18.9529 29.6208 6.83442 29.6208C4.65094 29.6208 2.71448 29.9103 1 30.4345C3.75914 41.2406 13.5586 49.2308 25.2243 49.2308Z" fill="#0084F8" fill-opacity="0.4"/>
-<path d="M48.6896 33.0087C45.351 42.8878 36.006 50 24.9999 50C12.3271 50 1.85663 40.5706 0.221802 28.3452C3.22662 26.8785 7.1448 25.3846 13.9501 25.3846C19.8326 25.3846 22.9415 26.8596 26.4231 28.5113C30.8532 30.6131 35.8867 33.0011 48.0052 33.0011C48.2361 33.0011 48.4642 33.0036 48.6896 33.0087Z" fill="#3A98EC" fill-opacity="0.6"/>
-</svg>
diff --git a/src/components/Analysis/Comparison/FluidPerformanceIndicator.tsx b/src/components/Analysis/Comparison/FluidPerformanceIndicator.tsx
index 22817c415083cea430f3a1b3ed1241df5915a5d2..313e22a885b9124a40ac4bb104f57f77a9ac6139 100644
--- a/src/components/Analysis/Comparison/FluidPerformanceIndicator.tsx
+++ b/src/components/Analysis/Comparison/FluidPerformanceIndicator.tsx
@@ -8,9 +8,10 @@ import React from 'react'
import { useNavigate } from 'react-router-dom'
import { setCurrentTimeStep, setShowCompare } from 'store/chart/chart.slice'
import { useAppDispatch, useAppSelector } from 'store/hooks'
-import { getPicto } from 'utils/picto'
+import { getFluidIcon } from 'utils/picto'
import { formatNumberValues, getFluidName, getMonthName } from 'utils/utils'
import './fluidPerformanceIndicator.scss'
+import { PillVariation } from './PillVariation'
interface FluidPerformanceIndicatorProps {
performanceIndicator: PerformanceIndicator
@@ -28,7 +29,6 @@ const FluidPerformanceIndicator = ({
const dispatch = useAppDispatch()
const { period } = useAppSelector(state => state.ecolyo.analysis)
- const iconType = getPicto(fluidType)
const displayedValue = performanceIndicator?.value
? formatNumberValues(performanceIndicator.value).toString()
: ''
@@ -61,7 +61,7 @@ const FluidPerformanceIndicator = ({
className="fpi"
onClick={() => handleFluidClick(fluidType)}
>
- <StyledIcon icon={iconType} size={50} />
+ <StyledIcon icon={getFluidIcon(fluidType)} size={40} />
<div
data-testid={`fluid-type-${FluidType[fluidType]}`}
className="fpi-content"
@@ -73,20 +73,25 @@ const FluidPerformanceIndicator = ({
)}
{displayedValue && (
<>
- <div
- data-testid={`fluid-value-${FluidType[fluidType]}`}
- className="fpi-value"
- >
- <span className="fpi-load">{displayedValue}</span>
- <span className="fpi-unit">
- {t(`FLUID.${FluidType[fluidType]}.UNIT`)}
- </span>
+ <div>
+ <div
+ data-testid={`fluid-value-${FluidType[fluidType]}`}
+ className="fpi-value"
+ >
+ <span className="fpi-load">{displayedValue}</span>
+ <span className="fpi-unit">
+ {t(`FLUID.${FluidType[fluidType]}.UNIT`)}
+ </span>
+ {performanceIndicator?.percentageVariation !== null && (
+ <PillVariation color={positive ? 'positive' : 'negative'} />
+ )}
+ </div>
+ {performanceIndicator?.percentageVariation === null && (
+ <span className="fpi-no-comparison">
+ {t('performance_indicator.fpi.no_comparison')}
+ </span>
+ )}
</div>
- {performanceIndicator?.percentageVariation === null && (
- <span className="fpi-no-comparison">
- {t('performance_indicator.fpi.no_comparison')}
- </span>
- )}
{performanceIndicator?.percentageVariation !== null && (
<div
data-testid={`fluid-comparison-${FluidType[fluidType]}`}
diff --git a/src/components/Analysis/Comparison/PillVariation.tsx b/src/components/Analysis/Comparison/PillVariation.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..4cddd2deb2ae85eaf9e7e19e163bc6f8512a00a0
--- /dev/null
+++ b/src/components/Analysis/Comparison/PillVariation.tsx
@@ -0,0 +1,23 @@
+import PillCold from 'assets/icons/visu/analysis/pill-cold.svg'
+import PillHot from 'assets/icons/visu/analysis/pill-hot.svg'
+import PillNegative from 'assets/icons/visu/analysis/pill-negative.svg'
+import PillPositive from 'assets/icons/visu/analysis/pill-positive.svg'
+import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+import React from 'react'
+
+export const PillVariation = ({
+ color,
+}: {
+ color: 'positive' | 'negative' | 'hot' | 'cold'
+}) => {
+ switch (color) {
+ case 'positive':
+ return <StyledIcon size={20} icon={PillPositive} />
+ case 'negative':
+ return <StyledIcon size={20} icon={PillNegative} />
+ case 'hot':
+ return <StyledIcon size={20} icon={PillHot} />
+ case 'cold':
+ return <StyledIcon size={20} icon={PillCold} />
+ }
+}
diff --git a/src/components/Analysis/Comparison/TemperatureComparison.tsx b/src/components/Analysis/Comparison/TemperatureComparison.tsx
index 8d1a82caacfd2f31ace94604b804186bd96ef76a..44fca9aebd0fa900be454436c5e2f4365fadba18 100644
--- a/src/components/Analysis/Comparison/TemperatureComparison.tsx
+++ b/src/components/Analysis/Comparison/TemperatureComparison.tsx
@@ -1,4 +1,7 @@
import ExclamationMarkIcon from 'assets/icons/ico/exclamationMark.svg'
+import ColdIcon from 'assets/icons/visu/analysis/temperature-cold.svg'
+import HotIcon from 'assets/icons/visu/analysis/temperature-hot.svg'
+import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import StyledIconButton from 'components/CommonKit/IconButton/StyledIconButton'
import Loader from 'components/Loader/Loader'
import { useClient } from 'cozy-client'
@@ -6,6 +9,7 @@ import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
import React, { useEffect, useMemo, useState } from 'react'
import ConsumptionService from 'services/consumption.service'
import { useAppSelector } from 'store/hooks'
+import { PillVariation } from './PillVariation'
import TemperatureComparisonModal from './TemperatureComparisonModal/TemperatureComparisonModal'
import './temperatureComparison.scss'
@@ -76,15 +80,19 @@ const TemperatureComparison = () => {
return (
<div className={`temperatureComparison ${positive ? 'hot' : 'cold'}`}>
+ <StyledIcon icon={positive ? HotIcon : ColdIcon} size={40} />
<div className="tc-content">
- <div>
- <span className="text-28-bold">
- {positive ? '+' : ''}
- {temperatureDifference}
- </span>
- <span className="text-18">
- {t('analysis.temperature_comparison.unit')}
- </span>
+ <div className="valueRow">
+ <div>
+ <span className="text-28-bold">
+ {positive ? '+' : ''}
+ {temperatureDifference}
+ </span>
+ <span className="text-18">
+ {t('analysis.temperature_comparison.unit')}
+ </span>
+ </div>
+ <PillVariation color={positive ? 'hot' : 'cold'} />
</div>
<div>
<span className="text-12">
diff --git a/src/components/Analysis/Comparison/__snapshots__/FluidPerformanceIndicator.spec.tsx.snap b/src/components/Analysis/Comparison/__snapshots__/FluidPerformanceIndicator.spec.tsx.snap
index cd33f838a0aa60ee4ba4f9e03d8b45f8fd023f28..2cad8935b39f7aae84d1b5c4cf405b5775e2f630 100644
--- a/src/components/Analysis/Comparison/__snapshots__/FluidPerformanceIndicator.spec.tsx.snap
+++ b/src/components/Analysis/Comparison/__snapshots__/FluidPerformanceIndicator.spec.tsx.snap
@@ -14,8 +14,8 @@ exports[`FluidPerformanceIndicator component should render "no data" message whe
<svg
aria-hidden="true"
class="styles__icon___23x3R"
- height="50"
- width="50"
+ height="40"
+ width="40"
>
<use
xlink:href="#test-file-stub"
@@ -58,8 +58,8 @@ exports[`FluidPerformanceIndicator component should render elec indicators corre
<svg
aria-hidden="true"
class="styles__icon___23x3R"
- height="50"
- width="50"
+ height="40"
+ width="40"
>
<use
xlink:href="#test-file-stub"
@@ -69,20 +69,32 @@ exports[`FluidPerformanceIndicator component should render elec indicators corre
class="fpi-content"
data-testid="fluid-type-ELECTRICITY"
>
- <div
- class="fpi-value"
- data-testid="fluid-value-ELECTRICITY"
- >
- <span
- class="fpi-load"
+ <div>
+ <div
+ class="fpi-value"
+ data-testid="fluid-value-ELECTRICITY"
>
- 100,00
- </span>
- <span
- class="fpi-unit"
- >
- FLUID.ELECTRICITY.UNIT
- </span>
+ <span
+ class="fpi-load"
+ >
+ 100,00
+ </span>
+ <span
+ class="fpi-unit"
+ >
+ FLUID.ELECTRICITY.UNIT
+ </span>
+ <svg
+ aria-hidden="true"
+ class="styles__icon___23x3R"
+ height="20"
+ width="20"
+ >
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ </div>
</div>
<div
class="fpi-comparison"
diff --git a/src/components/Analysis/Comparison/__snapshots__/TemperatureComparison.spec.tsx.snap b/src/components/Analysis/Comparison/__snapshots__/TemperatureComparison.spec.tsx.snap
index c2588b10f69b1481b6cbdf17f431ba9ca71ec57c..d7ab330e05edb66bcc1597aa159a9719ca3377a1 100644
--- a/src/components/Analysis/Comparison/__snapshots__/TemperatureComparison.spec.tsx.snap
+++ b/src/components/Analysis/Comparison/__snapshots__/TemperatureComparison.spec.tsx.snap
@@ -5,21 +5,45 @@ exports[`TemperatureComparison component should be rendered correctly with cold
<div
class="temperatureComparison cold"
>
+ <svg
+ aria-hidden="true"
+ class="styles__icon___23x3R"
+ height="40"
+ width="40"
+ >
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
<div
class="tc-content"
>
- <div>
- <span
- class="text-28-bold"
- >
- -1.0
-
- </span>
- <span
- class="text-18"
+ <div
+ class="valueRow"
+ >
+ <div>
+ <span
+ class="text-28-bold"
+ >
+ -1.0
+
+ </span>
+ <span
+ class="text-18"
+ >
+ analysis.temperature_comparison.unit
+ </span>
+ </div>
+ <svg
+ aria-hidden="true"
+ class="styles__icon___23x3R"
+ height="20"
+ width="20"
>
- analysis.temperature_comparison.unit
- </span>
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
</div>
<div>
<span
@@ -69,22 +93,46 @@ exports[`TemperatureComparison component should be rendered correctly with hot r
<div
class="temperatureComparison hot"
>
+ <svg
+ aria-hidden="true"
+ class="styles__icon___23x3R"
+ height="40"
+ width="40"
+ >
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
<div
class="tc-content"
>
- <div>
- <span
- class="text-28-bold"
- >
- +
- 1.0
-
- </span>
- <span
- class="text-18"
+ <div
+ class="valueRow"
+ >
+ <div>
+ <span
+ class="text-28-bold"
+ >
+ +
+ 1.0
+
+ </span>
+ <span
+ class="text-18"
+ >
+ analysis.temperature_comparison.unit
+ </span>
+ </div>
+ <svg
+ aria-hidden="true"
+ class="styles__icon___23x3R"
+ height="20"
+ width="20"
>
- analysis.temperature_comparison.unit
- </span>
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
</div>
<div>
<span
diff --git a/src/components/Analysis/Comparison/fluidPerformanceIndicator.scss b/src/components/Analysis/Comparison/fluidPerformanceIndicator.scss
index 0d9595f8a858bcc3fe50b71367db6563a8c4d307..6b1e6d52696e2a07313a3352bd3ee3753b3ff893 100644
--- a/src/components/Analysis/Comparison/fluidPerformanceIndicator.scss
+++ b/src/components/Analysis/Comparison/fluidPerformanceIndicator.scss
@@ -31,6 +31,10 @@ button.fpi {
transition: background-color 0.3s;
border-radius: 8px;
+ .MuiCardContent-root {
+ padding: 12px;
+ }
+
.fpi-content {
display: flex;
flex-direction: column;
@@ -38,7 +42,8 @@ button.fpi {
.fpi-value {
display: flex;
flex-direction: row;
- align-items: flex-end;
+ align-items: center;
+ gap: 8px;
.fpi-load {
font-size: 1.75rem;
font-weight: 900;
@@ -47,6 +52,8 @@ button.fpi {
.fpi-unit {
font-size: 1.125rem;
color: $grey-bright;
+ top: 4px;
+ position: relative;
}
}
.fpi-comparison {
diff --git a/src/components/Analysis/Comparison/temperatureComparison.scss b/src/components/Analysis/Comparison/temperatureComparison.scss
index 129f1400dc5e82099f0d0706e86da3086f492839..6d985a8d8d8b694d1c8da9568c8a20290b189f74 100644
--- a/src/components/Analysis/Comparison/temperatureComparison.scss
+++ b/src/components/Analysis/Comparison/temperatureComparison.scss
@@ -4,8 +4,9 @@
.temperatureComparison {
display: flex;
align-items: center;
+ gap: 16px;
border-radius: 8px;
- padding: 8px 4px 8px 20px;
+ padding: 8px 4px 8px 12px;
box-shadow: 0px 4px 16px 0px $black-shadow;
background-position: bottom right;
background-repeat: no-repeat;
@@ -17,27 +18,24 @@
}
&.hot {
- background-image: url('../../../assets/png/temperatures/hot.svg'),
- linear-gradient(259deg, rgba(6, 29, 62, 0) 25.28%, #77aee0 121.36%),
- radial-gradient(
- 185.82% 146.65% at 50% 79.83%,
- rgba(6, 29, 62, 0) 0%,
- #e0bc77 100%
- );
+ background-image: url('../../../assets/png/temperatures/hot.svg');
+ background-color: #3d3724;
}
&.cold {
- background-image: url('../../../assets/png/temperatures/cold.svg'),
- radial-gradient(
- 185.82% 146.65% at 50% 79.83%,
- rgba(6, 29, 62, 0) 0%,
- #77a3e0 100%
- );
+ background-image: url('../../../assets/png/temperatures/cold.svg');
+ background-color: #2e3c51;
}
.tc-content {
text-align: left;
flex-grow: 1;
color: $white;
+
+ .valueRow {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ }
}
.buttonContainer {
diff --git a/src/components/Analysis/ElecHalfHourMonthlyAnalysis/ElecHalfHourMonthlyAnalysis.tsx b/src/components/Analysis/ElecHalfHourMonthlyAnalysis/ElecHalfHourMonthlyAnalysis.tsx
index 47213f9d65e93bba53fca4971eecd1c1d6fc363d..73fc991caea6b736e814ccadab64c220e898d39f 100644
--- a/src/components/Analysis/ElecHalfHourMonthlyAnalysis/ElecHalfHourMonthlyAnalysis.tsx
+++ b/src/components/Analysis/ElecHalfHourMonthlyAnalysis/ElecHalfHourMonthlyAnalysis.tsx
@@ -21,7 +21,7 @@ import ConsumptionService from 'services/consumption.service'
import EnedisMonthlyAnalysisDataService from 'services/enedisMonthlyAnalysisData.service'
import FluidPricesService from 'services/fluidsPrices.service'
import { useAppSelector } from 'store/hooks'
-import { getNavPicto } from 'utils/picto'
+import { getFluidIcon } from 'utils/picto'
import { OffPeakHours } from 'utils/utils'
import ElecHalfHourChart from './ElecHalfHourChart'
import ElecInfoModal from './ElecInfoModal'
@@ -151,7 +151,7 @@ const ElecHalfHourMonthlyAnalysis = ({
<div className="special-elec-container">
<StyledIcon
className="elec-icon"
- icon={getNavPicto(FluidType.ELECTRICITY, true, true)}
+ icon={getFluidIcon(FluidType.ELECTRICITY)}
size={42}
/>
<div className="text-18-normal title">{t('special_elec.title')}</div>
diff --git a/src/components/Analysis/ProfileComparator/ProfileComparatorRow.tsx b/src/components/Analysis/ProfileComparator/ProfileComparatorRow.tsx
index 7b47c580bbbab986ec5605c6ad3a40e1f60af76b..fb217aad497c9f3a014053667fbf57889ecb887b 100644
--- a/src/components/Analysis/ProfileComparator/ProfileComparatorRow.tsx
+++ b/src/components/Analysis/ProfileComparator/ProfileComparatorRow.tsx
@@ -1,4 +1,3 @@
-import EuroIcon from 'assets/icons/ico/euro-gold.svg'
import classNames from 'classnames'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
@@ -6,7 +5,7 @@ import { FluidType } from 'enums'
import { MonthlyForecast } from 'models'
import React from 'react'
import ConverterService from 'services/converter.service'
-import { getPicto } from 'utils/picto'
+import { getFluidIcon } from 'utils/picto'
import { formatNumberValues, getFluidName } from 'utils/utils'
import './profileComparatorRow.scss'
@@ -128,8 +127,8 @@ const ProfileComparatorRow = ({
</div>
<div className="icon-container">
<StyledIcon
- icon={isMulti ? EuroIcon : getPicto(fluidType, true)}
- size={22}
+ icon={getFluidIcon(fluidType)}
+ size={32}
className={noData ? 'noData' : ''}
/>
</div>
diff --git a/src/components/Analysis/ProfileComparator/profileComparatorRow.scss b/src/components/Analysis/ProfileComparator/profileComparatorRow.scss
index d04be053554f81d6b07993d16aaea26d22346408..d559f2f1e3708bdd187c5577908a76020f3e40e7 100644
--- a/src/components/Analysis/ProfileComparator/profileComparatorRow.scss
+++ b/src/components/Analysis/ProfileComparator/profileComparatorRow.scss
@@ -3,11 +3,12 @@
.analysisRow {
display: flex;
+ gap: 4px;
.user-graph {
.container-graph {
justify-content: flex-end;
.graph {
- border-radius: 0.35rem 0 0 0.35rem;
+ border-radius: 4px 2px 2px 4px;
}
}
.price {
@@ -21,7 +22,6 @@
}
}
.icon-container {
- flex-basis: 10%;
display: flex;
justify-content: center;
svg {
@@ -50,7 +50,7 @@
.average-graph {
display: flex;
justify-content: space-between;
- flex-basis: 45%;
+ flex: 1;
align-items: center;
}
.consumption-multifluid {
@@ -94,7 +94,7 @@
min-width: 5.25rem;
}
.graph {
- border-radius: 0 0.35rem 0.35rem 0;
+ border-radius: 2px 4px 4px 2px;
padding-left: 0.25rem;
height: 2rem;
}
diff --git a/src/components/Analysis/TotalAnalysisChart/TotalAnalysisChart.tsx b/src/components/Analysis/TotalAnalysisChart/TotalAnalysisChart.tsx
index fc276de1dbf7c487c08bb227427a990987784814..57367c21b3ccbb5bd9c70e4193d1205b9a4d0a1f 100644
--- a/src/components/Analysis/TotalAnalysisChart/TotalAnalysisChart.tsx
+++ b/src/components/Analysis/TotalAnalysisChart/TotalAnalysisChart.tsx
@@ -9,7 +9,7 @@ import { DataloadValueDetail, TimePeriod } from 'models'
import React, { useEffect, useState } from 'react'
import ConsumptionDataManager from 'services/consumption.service'
import { useAppSelector } from 'store/hooks'
-import { getNavPicto } from 'utils/picto'
+import { getFluidIcon } from 'utils/picto'
import { formatNumberValues, getMonthNameWithPrep } from 'utils/utils'
import PieChart from './PieChart'
import './totalAnalysisChart.scss'
@@ -132,7 +132,7 @@ const TotalAnalysisChart = ({
</div>
<StyledIcon
className="euro-fluid-icon"
- icon={getNavPicto(index, true, true)}
+ icon={getFluidIcon(index)}
size={38}
/>
<div className="text-16-normal">
diff --git a/src/components/CommonKit/Card/StyledCard.tsx b/src/components/CommonKit/Card/StyledCard.tsx
index d41d4d8796004d8e29964a19786c5092c7511fb0..7b4516a27ea90892e35695a5ce3401ff2badad9b 100644
--- a/src/components/CommonKit/Card/StyledCard.tsx
+++ b/src/components/CommonKit/Card/StyledCard.tsx
@@ -9,7 +9,7 @@ import { getFluidName } from 'utils/utils'
const CardBase = withStyles({
root: {
- background: 'var(--grey-2)',
+ background: 'var(--grey-1)',
boxSizing: 'border-box',
borderRadius: '4px',
},
diff --git a/src/components/Consumption/FluidButtons/FluidButton.tsx b/src/components/Consumption/FluidButtons/FluidButton.tsx
index f6aa3af5b01b22aba90ac4d28f55f3ca37c471ec..60ceac21aa6d5db1b968f021bbdff5520dc4a336 100644
--- a/src/components/Consumption/FluidButtons/FluidButton.tsx
+++ b/src/components/Consumption/FluidButtons/FluidButton.tsx
@@ -8,7 +8,7 @@ import { FluidState, FluidType } from 'enums'
import React, { useCallback, useEffect, useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { useAppSelector } from 'store/hooks'
-import { getNavPicto } from 'utils/picto'
+import { getActiveFluidIcon } from 'utils/picto'
import { getFluidName, isKonnectorActive } from 'utils/utils'
interface FluidButtonProps {
@@ -40,7 +40,7 @@ const FluidButton = ({ fluidType, isActive }: FluidButtonProps) => {
return false
}, [fluidStatus, fluidType, isMulti])
- const iconType = getNavPicto(fluidType, isActive, isConnected())
+ const iconType = getActiveFluidIcon(fluidType, isActive, isConnected())
const goToFluid = useCallback(() => {
navigate(isMulti ? '/consumption' : `/consumption/${fluidName}`)
diff --git a/src/components/ConsumptionVisualizer/DataloadSectionDetail.tsx b/src/components/ConsumptionVisualizer/DataloadSectionDetail.tsx
index 2b87396502c960a8a47c8dab90410bd0a2b07911..2ad80eeb605c06830487a00a960487e585a04d39 100644
--- a/src/components/ConsumptionVisualizer/DataloadSectionDetail.tsx
+++ b/src/components/ConsumptionVisualizer/DataloadSectionDetail.tsx
@@ -6,7 +6,7 @@ import { Dataload } from 'models'
import React from 'react'
import { NavLink } from 'react-router-dom'
import ConverterService from 'services/converter.service'
-import { getNavPicto } from 'utils/picto'
+import { getFluidIcon } from 'utils/picto'
import { formatNumberValues, getFluidName } from 'utils/utils'
interface DataloadSectionDetailProps {
@@ -84,7 +84,7 @@ const DataloadSectionDetail = ({
>
<StyledIcon
className="dataloadvisualizer-euro-fluid-icon"
- icon={getNavPicto(index, true, true)}
+ icon={getFluidIcon(index)}
size={22}
/>
<div>
@@ -114,7 +114,7 @@ const DataloadSectionDetail = ({
>
<StyledIcon
className="dataloadvisualizer-euro-fluid-icon"
- icon={getNavPicto(fluidType, true, true)}
+ icon={getFluidIcon(fluidType)}
size={22}
/>
<div>{`${formatNumberValues(
diff --git a/src/components/Ecogesture/EcogestureModal/EcogestureModal.tsx b/src/components/Ecogesture/EcogestureModal/EcogestureModal.tsx
index 1fbc1ff79d9b5a2caded8256875cd022f4492294..e1a1d5316c143fe7a7190df38f5862b403a5e5b3 100644
--- a/src/components/Ecogesture/EcogestureModal/EcogestureModal.tsx
+++ b/src/components/Ecogesture/EcogestureModal/EcogestureModal.tsx
@@ -10,7 +10,7 @@ import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
import { Ecogesture } from 'models'
import React, { useEffect, useState } from 'react'
import { useAppSelector } from 'store/hooks'
-import { getPicto } from 'utils/picto'
+import { getFluidIcon } from 'utils/picto'
import { importIconById } from 'utils/utils'
import EfficiencyRating from '../EfficiencyRating/EfficiencyRating'
import './ecogestureModal.scss'
@@ -97,7 +97,7 @@ const EcogestureModal = ({
<StyledIcon
key={fluid}
className="em-pic-content"
- icon={getPicto(fluid)}
+ icon={getFluidIcon(fluid)}
size={25}
/>
))}
diff --git a/src/components/Konnector/KonnectorViewerCard.tsx b/src/components/Konnector/KonnectorViewerCard.tsx
index 24b0578d9cf4bb622e2b6949c51147243ae83c76..30124c75a1eade7e704af93d3df193a556fefcfe 100644
--- a/src/components/Konnector/KonnectorViewerCard.tsx
+++ b/src/components/Konnector/KonnectorViewerCard.tsx
@@ -8,7 +8,7 @@ import chevronDown from 'assets/icons/ico/chevron-down.svg'
import ErrorNotif from 'assets/icons/ico/notif_error.svg'
import PartnersIssueNotif from 'assets/icons/ico/notif_maintenance.svg'
import WarningNotif from 'assets/icons/ico/notif_warning.svg'
-import OfflinePicto from 'assets/icons/visu/offline-param.svg'
+import DisconnectedOff from 'assets/icons/visu/disconnected-off.svg'
import classNames from 'classnames'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import Connection from 'components/Connection/Connection'
@@ -54,7 +54,7 @@ import {
} from 'store/global/global.slice'
import { useAppDispatch, useAppSelector } from 'store/hooks'
import logApp from 'utils/logger'
-import { getParamPicto } from 'utils/picto'
+import { getFluidIcon } from 'utils/picto'
import { getKonnectorSlug } from 'utils/utils'
import ConnectionNotFound from './ConnectionNotFound/ConnectionNotFound'
import ConnectionResult from './ConnectionResult/ConnectionResult'
@@ -100,7 +100,7 @@ const KonnectorViewerCard = ({
[client]
)
- const iconType = getParamPicto(currentFluidStatus.fluidType)
+ const iconType = getFluidIcon(currentFluidStatus.fluidType)
const toggleAccordion = () => {
dispatch(setShowConnectionDetails(!showConnectionDetails))
@@ -348,8 +348,10 @@ const KonnectorViewerCard = ({
return (
<div className="konnector-icon">
<StyledIcon
- icon={currentFluidStatus.connection.account ? iconType : OfflinePicto}
- size={49}
+ icon={
+ currentFluidStatus.connection.account ? iconType : DisconnectedOff
+ }
+ size={32}
/>
{statusIcon && (
<StyledIcon
diff --git a/src/components/Konnector/KonnectorViewerList.tsx b/src/components/Konnector/KonnectorViewerList.tsx
index 5b5f1ec0cfe855b4e7fcca86cc00a0b8eff1ab09..6889cf106dca9c672e4d41bfd1113e38fbe63857 100644
--- a/src/components/Konnector/KonnectorViewerList.tsx
+++ b/src/components/Konnector/KonnectorViewerList.tsx
@@ -1,3 +1,4 @@
+import AddFluidIcon from 'assets/icons/ico/add-fluid.svg'
import StyledCard from 'components/CommonKit/Card/StyledCard'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
@@ -5,7 +6,6 @@ import { FluidType } from 'enums'
import React from 'react'
import { useNavigate } from 'react-router-dom'
import { useAppSelector } from 'store/hooks'
-import { getAddPicto } from 'utils/picto'
import { getFluidName } from 'utils/utils'
import './konnectorViewerCard.scss'
@@ -21,31 +21,22 @@ const KonnectorViewerList = () => {
return (
<div className="konnector-section-root">
<div role="list" className="konnectorsList">
- {fluidStatus.map(fluidStatusItem => (
- <StyledCard
- role="listitem"
- key={fluidStatusItem.fluidType}
- className="connection-card"
- onClick={() => goToFluid(fluidStatusItem.fluidType)}
- fluidType={fluidStatusItem.fluidType}
- >
- <StyledIcon
- icon={getAddPicto(fluidStatusItem.fluidType)}
- size={36}
- />
- <div
- className={`konnector-title text-18-bold ${getFluidName(
- fluidStatusItem.fluidType
- )}`}
+ {fluidStatus.map(({ fluidType }) => {
+ const fluidName = getFluidName(fluidType)
+ return (
+ <StyledCard
+ role="listitem"
+ key={fluidType}
+ className="connection-card"
+ onClick={() => goToFluid(fluidType)}
>
- {t(
- `konnector_options.label_connect_to_${getFluidName(
- fluidStatusItem.fluidType
- )}`
- )}
- </div>
- </StyledCard>
- ))}
+ <StyledIcon icon={AddFluidIcon} size={40} />
+ <div className={`konnector-title text-18-bold ${fluidName}`}>
+ {t(`konnector_options.label_connect_to_${fluidName}`)}
+ </div>
+ </StyledCard>
+ )
+ })}
</div>
</div>
)
diff --git a/src/components/Konnector/__snapshots__/KonnectorViewerList.spec.tsx.snap b/src/components/Konnector/__snapshots__/KonnectorViewerList.spec.tsx.snap
index f8732ace78b8109259f46a185eaaed3394d62730..b55565dae433cea24d06c7a29b206ab523c9c6ac 100644
--- a/src/components/Konnector/__snapshots__/KonnectorViewerList.spec.tsx.snap
+++ b/src/components/Konnector/__snapshots__/KonnectorViewerList.spec.tsx.snap
@@ -10,7 +10,7 @@ exports[`KonnectorViewerList component should be rendered correctly 1`] = `
role="list"
>
<button
- class="MuiButtonBase-root MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 connection-card electricity"
+ class="MuiButtonBase-root MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 connection-card"
role="listitem"
tabindex="0"
type="button"
@@ -21,8 +21,8 @@ exports[`KonnectorViewerList component should be rendered correctly 1`] = `
<svg
aria-hidden="true"
class="styles__icon___23x3R"
- height="36"
- width="36"
+ height="40"
+ width="40"
>
<use
xlink:href="#test-file-stub"
@@ -42,7 +42,7 @@ exports[`KonnectorViewerList component should be rendered correctly 1`] = `
/>
</button>
<button
- class="MuiButtonBase-root MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 connection-card water"
+ class="MuiButtonBase-root MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 connection-card"
role="listitem"
tabindex="0"
type="button"
@@ -53,8 +53,8 @@ exports[`KonnectorViewerList component should be rendered correctly 1`] = `
<svg
aria-hidden="true"
class="styles__icon___23x3R"
- height="36"
- width="36"
+ height="40"
+ width="40"
>
<use
xlink:href="#test-file-stub"
@@ -74,7 +74,7 @@ exports[`KonnectorViewerList component should be rendered correctly 1`] = `
/>
</button>
<button
- class="MuiButtonBase-root MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 connection-card gas"
+ class="MuiButtonBase-root MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 connection-card"
role="listitem"
tabindex="0"
type="button"
@@ -85,8 +85,8 @@ exports[`KonnectorViewerList component should be rendered correctly 1`] = `
<svg
aria-hidden="true"
class="styles__icon___23x3R"
- height="36"
- width="36"
+ height="40"
+ width="40"
>
<use
xlink:href="#test-file-stub"
diff --git a/src/components/Konnector/konnectorViewerCard.scss b/src/components/Konnector/konnectorViewerCard.scss
index 7d2977f8d68d7c29d8e5e11cc9832557a2299502..252b573cfb8498da2592c592a7f5f20a079050e3 100644
--- a/src/components/Konnector/konnectorViewerCard.scss
+++ b/src/components/Konnector/konnectorViewerCard.scss
@@ -52,14 +52,6 @@
padding-top: 1rem;
button.connection-card {
height: 80px;
- &.electricity {
- border: 1px solid var(--elecColor40);
- }
- &.gas {
- border: 1px solid var(--gasColor40);
- }
- &.water {
- border: 1px solid var(--waterColor40);
- }
+ border: 1px solid $grey-2;
}
}
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 920f8a1225e1e1b6074ca3207560735c8ae04209..7b337eebadce7292c6d81a1c8b8862473b5bd952 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -25,12 +25,15 @@
--blueRadialGradient: #{$blue-radial-gradient};
--blueRadialGradientTrans: #{$blue-radial-gradient-transparent};
--elecColor: #{$elec-color};
+ // V4REMOVE
--elecColor40: #{$elec-color-40};
--elecCompareColor: #{$elec-compare-color};
--gasColor: #{$gas-color};
+ // V4REMOVE
--gasColor40: #{$gas-color-40};
--gasCompareColor: #{$gas-compare-color};
--waterColor: #{$water-color};
+ // V4REMOVE
--waterColor40: #{$water-color-40};
--waterCompareColor: #{$water-compare-color};
--multiColor: #{$multi-color};
diff --git a/src/utils/picto.spec.ts b/src/utils/picto.spec.ts
index 72b3a75b4a4468aaddc59a1a51e2e1e27167dae5..e8333b468980ea30459a8216e1a1b20d024bf8d9 100644
--- a/src/utils/picto.spec.ts
+++ b/src/utils/picto.spec.ts
@@ -1,111 +1,96 @@
-import AddElecIcon from 'assets/icons/ico/add-elec.svg'
-import AddGasIcon from 'assets/icons/ico/add-gas.svg'
-import AddWaterIcon from 'assets/icons/ico/add-water.svg'
-import ElecParamIcon from 'assets/icons/visu/elec-param.svg'
-import GasParamIcon from 'assets/icons/visu/gas-param.svg'
-import MultiIcon from 'assets/icons/visu/multi-icon.svg'
-import WaterParamIcon from 'assets/icons/visu/water-param.svg'
+import DisconnectedOff from 'assets/icons/visu/disconnected-off.svg'
+import DisconnectedOn from 'assets/icons/visu/disconnected-on.svg'
+import ElecOff from 'assets/icons/visu/elec-off.svg'
+import ElecOn from 'assets/icons/visu/elec-on.svg'
+import GasOff from 'assets/icons/visu/gas-off.svg'
+import GasOn from 'assets/icons/visu/gas-on.svg'
+import MultiOff from 'assets/icons/visu/multi-off.svg'
+import MultiOn from 'assets/icons/visu/multi-on.svg'
+import WaterOff from 'assets/icons/visu/water-off.svg'
+import WaterOn from 'assets/icons/visu/water-on.svg'
import { FluidType } from 'enums'
-import ElecSmallIcon from '../assets/icons/visu/elec-small.svg'
-import ElecIcon from '../assets/icons/visu/elec.svg'
-import GasSmallIcon from '../assets/icons/visu/gas-small.svg'
-import GasIcon from '../assets/icons/visu/gas.svg'
-import WaterSmallIcon from '../assets/icons/visu/water-small.svg'
-import WaterIcon from '../assets/icons/visu/water.svg'
-import { getAddPicto, getParamPicto, getPicto } from './picto'
+import { getActiveFluidIcon, getFluidIcon } from './picto'
const unknownFluidType = 99 as FluidType
describe('picto utils test', () => {
- describe('getPicto test', () => {
- describe('case ELECTRICITY', () => {
- it('should return Electricity Icon', () => {
- const result = getPicto(FluidType.ELECTRICITY)
- expect(result).toBe(ElecIcon)
- })
-
- it('should return Small electricity icon', () => {
- const result = getPicto(FluidType.ELECTRICITY, true)
- expect(result).toBe(ElecSmallIcon)
- })
+ describe('getFluidIcon test', () => {
+ it('should return electricity icon', () => {
+ const result = getFluidIcon(FluidType.ELECTRICITY)
+ expect(result).toBe(ElecOn)
})
- describe('case WATER', () => {
- it('should return water Icon', () => {
- const result = getPicto(FluidType.WATER)
- expect(result).toBe(WaterIcon)
- })
-
- it('should return Small water icon', () => {
- const result = getPicto(FluidType.WATER, true)
- expect(result).toBe(WaterSmallIcon)
- })
+ it('should return water icon', () => {
+ const result = getFluidIcon(FluidType.WATER)
+ expect(result).toBe(WaterOn)
})
- describe('case GAS', () => {
- it('should return gas Icon', () => {
- const result = getPicto(FluidType.GAS)
- expect(result).toBe(GasIcon)
- })
-
- it('should return Small gas icon', () => {
- const result = getPicto(FluidType.GAS, true)
- expect(result).toBe(GasSmallIcon)
- })
+ it('should return Small gas icon', () => {
+ const result = getFluidIcon(FluidType.GAS)
+ expect(result).toBe(GasOn)
})
describe('case MULTI', () => {
it('should return multifluid Icon', () => {
- const result = getPicto(FluidType.MULTIFLUID)
- expect(result).toBe(MultiIcon)
- })
- })
- describe('case default', () => {
- it('should return default Icon', () => {
- const result = getPicto(unknownFluidType)
- expect(result).toBe(ElecIcon)
+ const result = getFluidIcon(FluidType.MULTIFLUID)
+ expect(result).toBe(MultiOn)
})
})
- })
-
- describe('getAddPicto test', () => {
- it('should return add electricity icon', () => {
- const result = getAddPicto(FluidType.ELECTRICITY)
- expect(result).toBe(AddElecIcon)
- })
-
- it('should return add water icon', () => {
- const result = getAddPicto(FluidType.WATER)
- expect(result).toBe(AddWaterIcon)
- })
-
- it('should return add gas icon', () => {
- const result = getAddPicto(FluidType.GAS)
- expect(result).toBe(AddGasIcon)
- })
it('should return default Icon', () => {
- const result = getPicto(unknownFluidType)
- expect(result).toBe(ElecIcon)
+ const result = getFluidIcon(unknownFluidType)
+ expect(result).toBe(DisconnectedOn)
})
})
- describe('getParamPicto test', () => {
- it('should return param electricity icon', () => {
- const result = getParamPicto(FluidType.ELECTRICITY)
- expect(result).toBe(ElecParamIcon)
+ describe('getActiveFluidIcon test', () => {
+ describe('case disconnected / disconnected', () => {
+ it('should return disconnected icon', () => {
+ const result = getActiveFluidIcon(FluidType.ELECTRICITY, false, false)
+ expect(result).toBe(DisconnectedOff)
+ })
+ it('should return connected icon', () => {
+ const result = getActiveFluidIcon(FluidType.ELECTRICITY, true, false)
+ expect(result).toBe(DisconnectedOn)
+ })
})
- it('should return param water icon', () => {
- const result = getParamPicto(FluidType.WATER)
- expect(result).toBe(WaterParamIcon)
- })
+ describe('fluid cases', () => {
+ it('should return On icon for elec', () => {
+ const result = getActiveFluidIcon(FluidType.ELECTRICITY, true, true)
+ expect(result).toBe(ElecOn)
+ })
+ it('should return Off icon for elec', () => {
+ const result = getActiveFluidIcon(FluidType.ELECTRICITY, false, true)
+ expect(result).toBe(ElecOff)
+ })
+ it('should return On icon for gas', () => {
+ const result = getActiveFluidIcon(FluidType.GAS, true, true)
+ expect(result).toBe(GasOn)
+ })
+ it('should return Off icon for gas', () => {
+ const result = getActiveFluidIcon(FluidType.GAS, false, true)
+ expect(result).toBe(GasOff)
+ })
+ it('should return On icon for water', () => {
+ const result = getActiveFluidIcon(FluidType.WATER, true, true)
+ expect(result).toBe(WaterOn)
+ })
+ it('should return Off icon for water', () => {
+ const result = getActiveFluidIcon(FluidType.WATER, false, true)
+ expect(result).toBe(WaterOff)
+ })
+ it('should return On icon for multi', () => {
+ const result = getActiveFluidIcon(FluidType.MULTIFLUID, true, true)
+ expect(result).toBe(MultiOn)
+ })
+ it('should return Off icon for multi', () => {
+ const result = getActiveFluidIcon(FluidType.MULTIFLUID, false, true)
+ expect(result).toBe(MultiOff)
+ })
- it('should return param gas icon', () => {
- const result = getParamPicto(FluidType.GAS)
- expect(result).toBe(GasParamIcon)
- })
- it('should return default Icon', () => {
- const result = getPicto(unknownFluidType)
- expect(result).toBe(ElecParamIcon)
+ it('should test default case', () => {
+ const result = getActiveFluidIcon(unknownFluidType, true, true)
+ expect(result).toBe(ElecOn)
+ })
})
})
})
diff --git a/src/utils/picto.ts b/src/utils/picto.ts
index f6f9d7be1f2fabed5ea377f9d0510aa1f7c28e88..ced9ae22f62a210d582e68b22f095f7557c1b022 100644
--- a/src/utils/picto.ts
+++ b/src/utils/picto.ts
@@ -1,103 +1,51 @@
-import AddElecIcon from 'assets/icons/ico/add-elec.svg'
-import AddGasIcon from 'assets/icons/ico/add-gas.svg'
-import AddWaterIcon from 'assets/icons/ico/add-water.svg'
-import Disconnected from 'assets/icons/visu/disconnected-grey.svg'
-import DisconnectedActive from 'assets/icons/visu/disconnected.svg'
-import ElecUnactive from 'assets/icons/visu/elec-grey.svg'
-import ElecParamIcon from 'assets/icons/visu/elec-param.svg'
-import ElecSmallIcon from 'assets/icons/visu/elec-small.svg'
-import ElecIcon from 'assets/icons/visu/elec.svg'
-import GasUnactive from 'assets/icons/visu/gas-grey.svg'
-import GasParamIcon from 'assets/icons/visu/gas-param.svg'
-import GasSmallIcon from 'assets/icons/visu/gas-small.svg'
-import GasIcon from 'assets/icons/visu/gas.svg'
-import MultiUnactive from 'assets/icons/visu/multi-grey.svg'
-import Multi from 'assets/icons/visu/multi.svg'
-import WaterUnactive from 'assets/icons/visu/water-grey.svg'
-import WaterParamIcon from 'assets/icons/visu/water-param.svg'
-import WaterSmallIcon from 'assets/icons/visu/water-small.svg'
-import WaterIcon from 'assets/icons/visu/water.svg'
+import DisconnectedOff from 'assets/icons/visu/disconnected-off.svg'
+import DisconnectedOn from 'assets/icons/visu/disconnected-on.svg'
+import ElecOff from 'assets/icons/visu/elec-off.svg'
+import ElecOn from 'assets/icons/visu/elec-on.svg'
+import GasOff from 'assets/icons/visu/gas-off.svg'
+import GasOn from 'assets/icons/visu/gas-on.svg'
+import MultiOff from 'assets/icons/visu/multi-off.svg'
+import MultiOn from 'assets/icons/visu/multi-on.svg'
+import WaterOff from 'assets/icons/visu/water-off.svg'
+import WaterOn from 'assets/icons/visu/water-on.svg'
import { FluidType } from 'enums'
-/**
- * Return an icon corresponding to FluidType enum
- * @param type FluidType
- */
-export function getPicto(type: FluidType, small = false) {
+/** Return an icon corresponding to FluidType enum */
+export function getFluidIcon(type: FluidType) {
switch (type) {
case FluidType.ELECTRICITY:
- return small ? ElecSmallIcon : ElecIcon
+ return ElecOn
case FluidType.WATER:
- return small ? WaterSmallIcon : WaterIcon
+ return WaterOn
case FluidType.GAS:
- return small ? GasSmallIcon : GasIcon
+ return GasOn
case FluidType.MULTIFLUID:
- return Multi
+ return MultiOn
default:
- return ElecIcon
- }
-}
-/**
- * Return an icon corresponding to add FluidType enum
- * @param type FluidType
- */
-export function getAddPicto(type: FluidType) {
- switch (type) {
- case FluidType.ELECTRICITY:
- return AddElecIcon
- case FluidType.WATER:
- return AddWaterIcon
- case FluidType.GAS:
- return AddGasIcon
- default:
- return ElecIcon
+ return ElecOn
}
}
-export function getParamPicto(type: FluidType) {
- switch (type) {
- case FluidType.ELECTRICITY:
- return ElecParamIcon
- case FluidType.WATER:
- return WaterParamIcon
- case FluidType.GAS:
- return GasParamIcon
- default:
- return ElecParamIcon
- }
-}
-
-const getIcon = (
- active: boolean,
- connected: boolean,
- activeIcon: string,
- inactiveIcon: string
-) => {
- if (connected) {
- return active ? activeIcon : inactiveIcon
- } else {
- return active ? DisconnectedActive : Disconnected
- }
-}
-
-/**
- * Returns the appropriate icon for a given fluid type and connection status
- */
-export function getNavPicto(
+/** Returns the appropriate icon for a given fluid type and connection status */
+export function getActiveFluidIcon(
fluidType: FluidType,
active: boolean,
connected: boolean
) {
+ if (!connected) {
+ return active ? DisconnectedOn : DisconnectedOff
+ }
+
switch (fluidType) {
case FluidType.ELECTRICITY:
- return getIcon(active, connected, ElecSmallIcon, ElecUnactive)
+ return active ? ElecOn : ElecOff
case FluidType.WATER:
- return getIcon(active, connected, WaterSmallIcon, WaterUnactive)
+ return active ? WaterOn : WaterOff
case FluidType.GAS:
- return getIcon(active, connected, GasSmallIcon, GasUnactive)
+ return active ? GasOn : GasOff
case FluidType.MULTIFLUID:
- return getIcon(active, connected, Multi, MultiUnactive)
+ return active ? MultiOn : MultiOff
default:
- return ElecIcon
+ return ElecOn
}
}