Change Multi icon + opacity

src/assets/icons/visu/multi-icon.svg

-<svg width="52" height="52" viewBox="0 0 52 52" fill="none" xmlns="http://www.w3.org/2000/svg">
-<circle cx="26.0004" cy="26.0004" r="24.5385" fill="#121212" stroke="#E3B82A"/>
-<path d="M16.3848 23.1379H18.5857C18.8394 21.8115 19.2421 20.6156 19.7937 19.5501C20.3453 18.4738 21.0183 17.5605 21.8126 16.8103C22.6069 16.0601 23.506 15.4839 24.5099 15.0816C25.5139 14.6685 26.606 14.4619 27.7865 14.4619C29.32 14.4619 30.6328 14.7555 31.725 15.3426C32.8171 15.9188 33.7328 16.7016 34.472 17.691L33.0323 19.2239C32.9219 19.3435 32.8061 19.4523 32.6848 19.5501C32.5634 19.6371 32.3924 19.6806 32.1718 19.6806C32.0173 19.6806 31.8739 19.6371 31.7415 19.5501C31.6202 19.4631 31.4823 19.3544 31.3278 19.2239C31.1734 19.0935 31.0024 18.9521 30.8148 18.7999C30.6273 18.6477 30.4011 18.5064 30.1363 18.3759C29.8826 18.2454 29.5792 18.1367 29.2262 18.0497C28.8732 17.9628 28.4539 17.9193 27.9685 17.9193C26.6667 17.9193 25.569 18.3596 24.6754 19.2403C23.7818 20.1209 23.1585 21.4201 22.8055 23.1379H31.1127V24.3774C31.1127 24.6274 31.0079 24.8612 30.7983 25.0786C30.5997 25.2852 30.3239 25.3885 29.9709 25.3885H22.5242C22.5131 25.5733 22.5076 25.7581 22.5076 25.943C22.5076 26.1169 22.5076 26.2963 22.5076 26.4811C22.5076 26.6116 22.5076 26.7421 22.5076 26.8725C22.5076 27.003 22.5131 27.128 22.5242 27.2476H29.5406V28.4708C29.5406 28.7208 29.4358 28.9546 29.2262 29.172C29.0166 29.3786 28.7408 29.4819 28.3988 29.4819H22.7227C23.0316 31.3519 23.6219 32.749 24.4934 33.6731C25.376 34.5864 26.4681 35.043 27.7699 35.043C28.5643 35.043 29.1986 34.9397 29.673 34.7332C30.1584 34.5157 30.55 34.2765 30.8479 34.0156C31.1568 33.7547 31.4105 33.5209 31.6091 33.3143C31.8187 33.0969 32.0449 32.9882 32.2876 32.9882C32.409 32.9882 32.5138 33.0099 32.602 33.0534C32.6903 33.086 32.784 33.1567 32.8833 33.2654L34.654 34.8636C33.8817 36.0378 32.8999 36.9402 31.7084 37.5708C30.5169 38.1905 29.1324 38.5004 27.5548 38.5004C26.253 38.5004 25.0836 38.2884 24.0466 37.8644C23.0206 37.4295 22.127 36.8206 21.3658 36.0378C20.6046 35.255 19.9812 34.3091 19.4958 33.2002C19.0214 32.0912 18.685 30.8518 18.4864 29.4819H16.3848V27.2476H18.3044C18.2933 27.128 18.2878 27.003 18.2878 26.8725C18.2878 26.7421 18.2878 26.6116 18.2878 26.4811C18.2878 26.2963 18.2878 26.1169 18.2878 25.943C18.2878 25.7581 18.2933 25.5733 18.3044 25.3885H16.3848V23.1379Z" fill="#E3B82A"/>
+<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0)">
+<circle cx="24.0383" cy="13.4612" r="10.9895" fill="#121212" stroke="#D87B39"/>
+<path d="M13.0244 13.8541L15.6468 15.952L17.7447 12.2806L20.3671 18.0499L23.5139 9.13379L26.1363 17.5254L28.7587 11.2317L31.25 16.9361L33.479 13.2063L35.0524 15.0341" stroke="#D87B39"/>
+</g>
+<g clip-path="url(#clip1)">
+<path d="M12.5003 46.5659C18.5696 46.5659 23.4898 41.6458 23.4898 35.5764C23.4898 29.5071 18.5696 24.5869 12.5003 24.5869C6.43091 24.5869 1.51074 29.5071 1.51074 35.5764C1.51074 41.6458 6.43091 46.5659 12.5003 46.5659Z" fill="#121212" stroke="#3A98EC"/>
+<path d="M2.01074 38.9721C2.63248 37.2624 4.71532 33.8428 8.07273 33.8428C12.2695 33.8428 12.2695 38.9721 16.4662 38.9721C19.8237 38.9721 21.1293 35.2417 22.9945 34.3091" stroke="#3A98EC"/>
+</g>
+<g clip-path="url(#clip2)">
+<path d="M37.5003 46.5659C43.5696 46.5659 48.4898 41.6458 48.4898 35.5764C48.4898 29.5071 43.5696 24.5869 37.5003 24.5869C31.4309 24.5869 26.5107 29.5071 26.5107 35.5764C26.5107 41.6458 31.4309 46.5659 37.5003 46.5659Z" fill="#121212" stroke="#45D1B8"/>
+<path d="M33.8293 39.2231C35.2641 39.2231 36.4272 38.06 36.4272 36.6252C36.4272 35.1905 35.2641 34.0273 33.8293 34.0273C32.3946 34.0273 31.2314 35.1905 31.2314 36.6252C31.2314 38.06 32.3946 39.2231 33.8293 39.2231Z" fill="#121212" stroke="#45D1B8"/>
+<path d="M39.0734 42.3704C39.9288 42.3704 40.6223 41.6769 40.6223 40.8214C40.6223 39.9659 39.9288 39.2725 39.0734 39.2725C38.2179 39.2725 37.5244 39.9659 37.5244 40.8214C37.5244 41.6769 38.2179 42.3704 39.0734 42.3704Z" fill="#121212" stroke="#45D1B8"/>
+<path d="M38.5493 37.1259C40.853 37.1259 42.7206 35.2583 42.7206 32.9545C42.7206 30.6508 40.853 28.7832 38.5493 28.7832C36.2455 28.7832 34.3779 30.6508 34.3779 32.9545C34.3779 35.2583 36.2455 37.1259 38.5493 37.1259Z" fill="#121212" stroke="#45D1B8"/>
+</g>
+<defs>
+<clipPath id="clip0">
+<rect width="23.0769" height="23.0769" fill="white" transform="translate(12.5 1.92285)"/>
+</clipPath>
+<clipPath id="clip1">
+<rect width="23.0769" height="23.0769" fill="white" transform="translate(0.961914 24.0381)"/>
+</clipPath>
+<clipPath id="clip2">
+<rect width="23.0769" height="23.0769" fill="white" transform="translate(25.9619 24.0381)"/>
+</clipPath>
+</defs>
 </svg>

src/components/CommonKit/Card/StyledCard.tsx

@@ -18,24 +18,24 @@ const CardBase = withStyles({
 
 const CardElec = withStyles({
   root: {
-    border: '1px solid var(--elecColor)',
+    border: '1px solid var(--elecColor40)',
   },
 })(CardBase)
 
 const CardWater = withStyles({
   root: {
-    border: '1px solid var(--waterColor)',
+    border: '1px solid var(--waterColor40)',
   },
 })(CardBase)
 
 const CardGas = withStyles({
   root: {
-    border: '1px solid var(--gasColor)',
+    border: '1px solid var(--gasColor40)',
   },
 })(CardBase)
 const CardMulti = withStyles({
   root: {
-    border: '1px solid var(--multiColor)',
+    border: '1px solid var( --greyDark)',
   },
 })(CardBase)