From eb84fe7da35507e943752e9503b98dbadee29572 Mon Sep 17 00:00:00 2001
From: fmtabbara <fmtabbara@hotmail.co.uk>
Date: Thu, 8 Sep 2022 12:06:19 +0100
Subject: [PATCH] use svg for node path

---
 .../components/TestMyNode/Overview/index.tsx  |   8 +-
 .../components/TestMyNode/Results/index.tsx   |  17 +--
 nym-wallet/src/svg-icons/node-path.tsx        | 128 ++++++++++++++++++
 3 files changed, 138 insertions(+), 15 deletions(-)
 create mode 100644 nym-wallet/src/svg-icons/node-path.tsx

diff --git a/nym-wallet/src/components/TestMyNode/Overview/index.tsx b/nym-wallet/src/components/TestMyNode/Overview/index.tsx
index 735c8dcdb8..25bbdbadc0 100644
--- a/nym-wallet/src/components/TestMyNode/Overview/index.tsx
+++ b/nym-wallet/src/components/TestMyNode/Overview/index.tsx
@@ -22,11 +22,11 @@ const content = [
 ];
 
 export const Overview = ({ onStartTest }: { onStartTest: () => void }) => (
-  <Grid container spacing={3}>
-    <Grid item md={12} lg={6}>
-      <img src={testNode} />
+  <Grid container spacing={2}>
+    <Grid item lg={12} xl={6}>
+      <img src={testNode} style={{ borderRadius: 8 }} />
     </Grid>
-    <Grid item container direction="column" md={12} lg={6}>
+    <Grid item container direction="column" lg={12} xl={6}>
       <Grid item>
         <Stack>{content.map(DescriptionItem)}</Stack>
       </Grid>
diff --git a/nym-wallet/src/components/TestMyNode/Results/index.tsx b/nym-wallet/src/components/TestMyNode/Results/index.tsx
index 0784ec83b1..a35d6401c3 100644
--- a/nym-wallet/src/components/TestMyNode/Results/index.tsx
+++ b/nym-wallet/src/components/TestMyNode/Results/index.tsx
@@ -5,6 +5,7 @@ import format from 'date-fns/format';
 import { ResultsCard } from '../components/ResultsCard';
 import { ResultsCardDetail } from '../components/ResultsCardDetail';
 import { PathChip } from '../components/PathChip';
+import { NodePath } from 'src/svg-icons/node-path';
 
 const NodeSpeed = ({ Mbps, performance }: { Mbps: number; performance: 'poor' | 'fair' | 'good' }) => (
   <ResultsCard
@@ -50,17 +51,11 @@ const Packets = ({ sent, received }: { sent: string; received: string }) => (
   </ResultsCard>
 );
 
-const Path = ({ layer }: { layer: number }) => (
+const Path = ({ layer }: { layer: '1' | '2' | '3' | 'gateway' }) => (
   <ResultsCard label="Path" detail="Your node was in layer 2" isOk>
-    <Stack direction="row" alignItems="center" gap={1} sx={{ mt: 2 }}>
-      <PathChip label="Gateway" highlight={false} />
-      <ArrowForward sx={{ color: 'grey.500' }} />
-      <PathChip label="Node - Layer 1" highlight={layer === 1} />
-      <ArrowForward sx={{ color: 'grey.500' }} />
-      <PathChip label="Node - Layer 2" highlight={layer === 2} />
-      <ArrowForward sx={{ color: 'grey.500' }} />
-      <PathChip label="Node - Layer 3" highlight={layer === 3} />
-    </Stack>
+    <Box sx={{ mt: 2 }}>
+      <NodePath layer={layer} />
+    </Box>
   </ResultsCard>
 );
 
@@ -82,7 +77,7 @@ export const Results = () => (
       <Grid item container direction="column" md={7}>
         <Stack spacing={2}>
           <Packets sent="5000" received="1000" />
-          <Path layer={2} />
+          <Path layer="gateway" />
         </Stack>
       </Grid>
     </Grid>
diff --git a/nym-wallet/src/svg-icons/node-path.tsx b/nym-wallet/src/svg-icons/node-path.tsx
new file mode 100644
index 0000000000..6d87aefcfe
--- /dev/null
+++ b/nym-wallet/src/svg-icons/node-path.tsx
@@ -0,0 +1,128 @@
+import React from 'react';
+
+// fill="#FB6E4E" fill-opacity="0.05"
+// text #1D2125
+// white bg #FBFBFB
+// orange bg #FB6E4E
+
+const withHighlight = (shouldHighlight: boolean) => ({
+  background: shouldHighlight ? '#FB6E4E' : '#FBFBFB',
+  text: shouldHighlight ? '#FB6E4E' : '#1D2125',
+  bgOpacity: shouldHighlight ? '0.05' : '1',
+});
+
+export const NodePath = ({ layer }: { layer: '1' | '2' | '3' | 'gateway' }) => (
+  <svg width="597" height="69" viewBox="0 0 597 69" fill="none">
+    <rect
+      x="0.5"
+      y="0.5"
+      width="92"
+      height="39"
+      rx="3.5"
+      fill={withHighlight(layer === 'gateway').background}
+      stroke={withHighlight(layer === 'gateway').background}
+      fill-opacity={withHighlight(layer === 'gateway').bgOpacity}
+      stroke-width="2"
+    />
+    <path
+      d="M8 24C8 19.5817 11.5817 16 16 16C20.4183 16 24 19.5817 24 24"
+      stroke={withHighlight(layer === 'gateway').text}
+    />
+    <path
+      d="M33.7695 19.7637H37.167V24.624C36.6383 24.7926 36.1006 24.9202 35.5537 25.0068C35.0068 25.0934 34.3734 25.1367 33.6533 25.1367C32.1403 25.1367 30.9622 24.6878 30.1191 23.79C29.276 22.8877 28.8545 21.6253 28.8545 20.0029C28.8545 18.9639 29.0618 18.0547 29.4766 17.2754C29.8958 16.4915 30.4974 15.8945 31.2812 15.4844C32.0651 15.0697 32.9834 14.8623 34.0361 14.8623C35.1025 14.8623 36.096 15.0583 37.0166 15.4502L36.5654 16.4756C35.6631 16.0928 34.7949 15.9014 33.9609 15.9014C32.7441 15.9014 31.7939 16.2637 31.1104 16.9883C30.4268 17.7129 30.085 18.7178 30.085 20.0029C30.085 21.3519 30.4131 22.375 31.0693 23.0723C31.7301 23.7695 32.6986 24.1182 33.9746 24.1182C34.6673 24.1182 35.3441 24.0384 36.0049 23.8789V20.8027H33.7695V19.7637ZM44.0098 25L43.7842 23.9336H43.7295C43.3558 24.403 42.9821 24.722 42.6084 24.8906C42.2393 25.0547 41.7767 25.1367 41.2207 25.1367C40.4779 25.1367 39.8945 24.9453 39.4707 24.5625C39.0514 24.1797 38.8418 23.6351 38.8418 22.9287C38.8418 21.4157 40.0518 20.6227 42.4717 20.5498L43.7432 20.5088V20.0439C43.7432 19.4561 43.6156 19.0231 43.3604 18.7451C43.1097 18.4626 42.7064 18.3213 42.1504 18.3213C41.526 18.3213 40.8197 18.5127 40.0312 18.8955L39.6826 18.0273C40.0518 17.8268 40.4551 17.6696 40.8926 17.5557C41.3346 17.4417 41.7767 17.3848 42.2188 17.3848C43.112 17.3848 43.7728 17.583 44.2012 17.9795C44.6341 18.376 44.8506 19.0117 44.8506 19.8867V25H44.0098ZM41.4463 24.2002C42.1527 24.2002 42.7064 24.0065 43.1074 23.6191C43.513 23.2318 43.7158 22.6895 43.7158 21.9922V21.3154L42.5811 21.3633C41.6787 21.3952 41.027 21.5365 40.626 21.7871C40.2295 22.0332 40.0312 22.4183 40.0312 22.9424C40.0312 23.3525 40.1543 23.6647 40.4004 23.8789C40.651 24.0931 40.9997 24.2002 41.4463 24.2002ZM49.6152 24.2002C49.8158 24.2002 50.0094 24.1865 50.1963 24.1592C50.3831 24.1273 50.5312 24.0954 50.6406 24.0635V24.9316C50.5176 24.9909 50.3353 25.0387 50.0938 25.0752C49.8568 25.1162 49.6426 25.1367 49.4512 25.1367C48.002 25.1367 47.2773 24.3734 47.2773 22.8467V18.3896H46.2041V17.8428L47.2773 17.3711L47.7559 15.7715H48.4121V17.5078H50.5859V18.3896H48.4121V22.7988C48.4121 23.25 48.5192 23.5964 48.7334 23.8379C48.9476 24.0794 49.2415 24.2002 49.6152 24.2002ZM55.3096 25.1367C54.2021 25.1367 53.3271 24.7995 52.6846 24.125C52.0465 23.4505 51.7275 22.514 51.7275 21.3154C51.7275 20.1077 52.0238 19.1484 52.6162 18.4375C53.2132 17.7266 54.013 17.3711 55.0156 17.3711C55.9544 17.3711 56.6973 17.681 57.2441 18.3008C57.791 18.916 58.0645 19.7295 58.0645 20.7412V21.459H52.9033C52.9261 22.3385 53.1471 23.0062 53.5664 23.4619C53.9902 23.9176 54.585 24.1455 55.3506 24.1455C56.1572 24.1455 56.9548 23.9769 57.7432 23.6396V24.6514C57.3421 24.8245 56.9616 24.9476 56.6016 25.0205C56.2461 25.098 55.8154 25.1367 55.3096 25.1367ZM55.002 18.3213C54.4004 18.3213 53.9196 18.5173 53.5596 18.9092C53.2041 19.3011 52.9945 19.8434 52.9307 20.5361H56.8477C56.8477 19.8206 56.6882 19.2738 56.3691 18.8955C56.0501 18.5127 55.5944 18.3213 55.002 18.3213ZM66.124 25L64.75 20.6045C64.6634 20.3356 64.5016 19.7249 64.2646 18.7725H64.21C64.0277 19.57 63.8682 20.1852 63.7314 20.6182L62.3164 25H61.0039L58.96 17.5078H60.1494C60.6325 19.39 60.9993 20.8232 61.25 21.8076C61.5052 22.792 61.651 23.4551 61.6875 23.7969H61.7422C61.7923 23.5371 61.8721 23.2021 61.9814 22.792C62.0954 22.3773 62.1934 22.0492 62.2754 21.8076L63.6494 17.5078H64.8799L66.2197 21.8076C66.4749 22.5915 66.6481 23.25 66.7393 23.7832H66.7939C66.8122 23.6191 66.86 23.3662 66.9375 23.0244C67.0195 22.6826 67.4958 20.8438 68.3662 17.5078H69.542L67.4707 25H66.124ZM75.5098 25L75.2842 23.9336H75.2295C74.8558 24.403 74.4821 24.722 74.1084 24.8906C73.7393 25.0547 73.2767 25.1367 72.7207 25.1367C71.9779 25.1367 71.3945 24.9453 70.9707 24.5625C70.5514 24.1797 70.3418 23.6351 70.3418 22.9287C70.3418 21.4157 71.5518 20.6227 73.9717 20.5498L75.2432 20.5088V20.0439C75.2432 19.4561 75.1156 19.0231 74.8604 18.7451C74.6097 18.4626 74.2064 18.3213 73.6504 18.3213C73.026 18.3213 72.3197 18.5127 71.5312 18.8955L71.1826 18.0273C71.5518 17.8268 71.9551 17.6696 72.3926 17.5557C72.8346 17.4417 73.2767 17.3848 73.7188 17.3848C74.612 17.3848 75.2728 17.583 75.7012 17.9795C76.1341 18.376 76.3506 19.0117 76.3506 19.8867V25H75.5098ZM72.9463 24.2002C73.6527 24.2002 74.2064 24.0065 74.6074 23.6191C75.013 23.2318 75.2158 22.6895 75.2158 21.9922V21.3154L74.0811 21.3633C73.1787 21.3952 72.527 21.5365 72.126 21.7871C71.7295 22.0332 71.5312 22.4183 71.5312 22.9424C71.5312 23.3525 71.6543 23.6647 71.9004 23.8789C72.151 24.0931 72.4997 24.2002 72.9463 24.2002ZM77.5059 17.5078H78.7227L80.3633 21.7803C80.7233 22.7555 80.9466 23.4596 81.0332 23.8926H81.0879C81.1471 23.6602 81.2702 23.2637 81.457 22.7031C81.6484 22.138 82.2682 20.4062 83.3164 17.5078H84.5332L81.3135 26.0391C80.9945 26.8822 80.6208 27.4792 80.1924 27.8301C79.7686 28.1855 79.2467 28.3633 78.627 28.3633C78.2806 28.3633 77.9388 28.3245 77.6016 28.2471V27.3379C77.8522 27.3926 78.1325 27.4199 78.4424 27.4199C79.2217 27.4199 79.7777 26.9824 80.1104 26.1074L80.5273 25.041L77.5059 17.5078Z"
+      fill={withHighlight(layer === 'gateway').text}
+    />
+
+    <rect
+      x="131.5"
+      y="0.5"
+      width="128.971"
+      height="39"
+      rx="3.5"
+      stroke-width="1"
+      fill={withHighlight(layer === '1').background}
+      stroke={withHighlight(layer === '1').background}
+      fill-opacity={withHighlight(layer === '1').bgOpacity}
+    />
+    <rect
+      x="147.485"
+      y="12.2227"
+      width="11"
+      height="11"
+      rx="1.5"
+      transform="rotate(45 147.485 12.2227)"
+      stroke={withHighlight(layer === '1').text}
+    />
+    <path
+      d="M169.151 25H167.825L162.363 16.6123H162.309C162.382 17.5967 162.418 18.499 162.418 19.3193V25H161.345V15.0059H162.657L168.105 23.3594H168.16C168.151 23.2363 168.131 22.8421 168.099 22.1768C168.067 21.5068 168.055 21.0283 168.064 20.7412V15.0059H169.151V25ZM178.195 21.2471C178.195 22.4684 177.888 23.4232 177.272 24.1113C176.657 24.7949 175.807 25.1367 174.723 25.1367C174.053 25.1367 173.458 24.9795 172.938 24.665C172.419 24.3506 172.018 23.8994 171.735 23.3115C171.453 22.7236 171.312 22.0355 171.312 21.2471C171.312 20.0257 171.617 19.0755 172.228 18.3965C172.838 17.7129 173.686 17.3711 174.771 17.3711C175.819 17.3711 176.65 17.7197 177.266 18.417C177.885 19.1143 178.195 20.0576 178.195 21.2471ZM172.487 21.2471C172.487 22.2041 172.679 22.9333 173.062 23.4346C173.444 23.9359 174.007 24.1865 174.75 24.1865C175.493 24.1865 176.056 23.9382 176.438 23.4414C176.826 22.9401 177.02 22.2087 177.02 21.2471C177.02 20.2946 176.826 19.5723 176.438 19.0801C176.056 18.5833 175.488 18.335 174.736 18.335C173.993 18.335 173.433 18.5788 173.055 19.0664C172.676 19.554 172.487 20.2809 172.487 21.2471ZM185.291 23.9951H185.229C184.705 24.7562 183.922 25.1367 182.878 25.1367C181.898 25.1367 181.135 24.8018 180.588 24.1318C180.046 23.4619 179.774 22.5094 179.774 21.2744C179.774 20.0394 180.048 19.0801 180.595 18.3965C181.142 17.7129 181.903 17.3711 182.878 17.3711C183.894 17.3711 184.674 17.7402 185.216 18.4785H185.305L185.257 17.9385L185.229 17.4121V14.3633H186.364V25H185.441L185.291 23.9951ZM183.021 24.1865C183.796 24.1865 184.357 23.9769 184.703 23.5576C185.054 23.1338 185.229 22.4525 185.229 21.5137V21.2744C185.229 20.2126 185.052 19.4561 184.696 19.0049C184.345 18.5492 183.783 18.3213 183.008 18.3213C182.342 18.3213 181.832 18.5811 181.477 19.1006C181.126 19.6156 180.95 20.3447 180.95 21.2881C180.95 22.2451 181.126 22.9674 181.477 23.4551C181.827 23.9427 182.342 24.1865 183.021 24.1865ZM191.942 25.1367C190.835 25.1367 189.96 24.7995 189.317 24.125C188.679 23.4505 188.36 22.514 188.36 21.3154C188.36 20.1077 188.657 19.1484 189.249 18.4375C189.846 17.7266 190.646 17.3711 191.648 17.3711C192.587 17.3711 193.33 17.681 193.877 18.3008C194.424 18.916 194.697 19.7295 194.697 20.7412V21.459H189.536C189.559 22.3385 189.78 23.0062 190.199 23.4619C190.623 23.9176 191.218 24.1455 191.983 24.1455C192.79 24.1455 193.588 23.9769 194.376 23.6396V24.6514C193.975 24.8245 193.594 24.9476 193.234 25.0205C192.879 25.098 192.448 25.1367 191.942 25.1367ZM191.635 18.3213C191.033 18.3213 190.552 18.5173 190.192 18.9092C189.837 19.3011 189.627 19.8434 189.563 20.5361H193.48C193.48 19.8206 193.321 19.2738 193.002 18.8955C192.683 18.5127 192.227 18.3213 191.635 18.3213ZM199.646 21.7666V20.7275H203.003V21.7666H199.646ZM209.976 25H208.369V14.3633H209.976V25ZM217.01 25L216.688 23.9473H216.634C216.269 24.4076 215.902 24.722 215.533 24.8906C215.164 25.0547 214.69 25.1367 214.111 25.1367C213.368 25.1367 212.787 24.9362 212.368 24.5352C211.953 24.1341 211.746 23.5667 211.746 22.833C211.746 22.0537 212.035 21.4658 212.614 21.0693C213.193 20.6729 214.075 20.4564 215.26 20.4199L216.565 20.3789V19.9756C216.565 19.4925 216.451 19.1325 216.224 18.8955C216 18.654 215.652 18.5332 215.178 18.5332C214.79 18.5332 214.419 18.5902 214.063 18.7041C213.708 18.818 213.366 18.9525 213.038 19.1074L212.519 17.959C212.929 17.7448 213.378 17.583 213.865 17.4736C214.353 17.3597 214.813 17.3027 215.246 17.3027C216.208 17.3027 216.932 17.5124 217.42 17.9316C217.912 18.3509 218.158 19.0094 218.158 19.9072V25H217.01ZM214.617 23.9062C215.201 23.9062 215.668 23.7445 216.019 23.4209C216.374 23.0928 216.552 22.6348 216.552 22.0469V21.3906L215.581 21.4316C214.825 21.459 214.273 21.5866 213.927 21.8145C213.585 22.0378 213.414 22.3818 213.414 22.8467C213.414 23.1839 213.514 23.446 213.715 23.6328C213.915 23.8151 214.216 23.9062 214.617 23.9062ZM219.252 17.4395H221.002L222.54 21.7256C222.772 22.3363 222.927 22.9105 223.005 23.4482H223.06C223.101 23.1976 223.176 22.8945 223.285 22.5391C223.395 22.179 223.973 20.4792 225.021 17.4395H226.758L223.524 26.0049C222.937 27.5771 221.957 28.3633 220.585 28.3633C220.229 28.3633 219.883 28.3245 219.546 28.2471V26.9756C219.787 27.0303 220.063 27.0576 220.373 27.0576C221.148 27.0576 221.692 26.6087 222.007 25.7109L222.287 25L219.252 17.4395ZM231.208 25.1367C230.032 25.1367 229.112 24.7949 228.446 24.1113C227.785 23.4232 227.455 22.4775 227.455 21.2744C227.455 20.0394 227.763 19.0687 228.378 18.3623C228.993 17.6559 229.839 17.3027 230.914 17.3027C231.912 17.3027 232.701 17.6058 233.279 18.2119C233.858 18.818 234.147 19.652 234.147 20.7139V21.582H229.109C229.132 22.3158 229.33 22.8809 229.704 23.2773C230.078 23.6693 230.604 23.8652 231.283 23.8652C231.73 23.8652 232.145 23.8242 232.527 23.7422C232.915 23.6556 233.329 23.5143 233.771 23.3184V24.624C233.38 24.8109 232.983 24.943 232.582 25.0205C232.181 25.098 231.723 25.1367 231.208 25.1367ZM230.914 18.5195C230.404 18.5195 229.993 18.6813 229.684 19.0049C229.378 19.3285 229.196 19.8001 229.137 20.4199H232.568C232.559 19.7956 232.409 19.3239 232.117 19.0049C231.826 18.6813 231.424 18.5195 230.914 18.5195ZM239.808 17.3027C240.131 17.3027 240.398 17.3255 240.607 17.3711L240.45 18.8682C240.222 18.8135 239.985 18.7861 239.739 18.7861C239.097 18.7861 238.575 18.9958 238.174 19.415C237.777 19.8343 237.579 20.3789 237.579 21.0488V25H235.973V17.4395H237.23L237.442 18.7725H237.524C237.775 18.3213 238.101 17.9635 238.502 17.6992C238.908 17.4349 239.343 17.3027 239.808 17.3027ZM249.836 25H248.229V18.5469C248.229 17.7767 248.248 17.166 248.284 16.7148C248.179 16.8242 248.049 16.945 247.895 17.0771C247.744 17.2093 247.234 17.6286 246.363 18.335L245.557 17.3164L248.496 15.0059H249.836V25Z"
+      fill={withHighlight(layer === '1').text}
+    />
+
+    <rect
+      x="300"
+      y="1"
+      width="127.971"
+      height="38"
+      rx="3"
+      stroke-width="1"
+      fill={withHighlight(layer === '2').background}
+      stroke={withHighlight(layer === '2').background}
+      fill-opacity={withHighlight(layer === '2').bgOpacity}
+    />
+    <rect
+      x="315.485"
+      y="12.2227"
+      width="11"
+      height="11"
+      rx="1.5"
+      transform="rotate(45 315.485 12.2227)"
+      stroke={withHighlight(layer === '2').text}
+    />
+    <path
+      d="M337.151 25H335.825L330.363 16.6123H330.309C330.382 17.5967 330.418 18.499 330.418 19.3193V25H329.345V15.0059H330.657L336.105 23.3594H336.16C336.151 23.2363 336.131 22.8421 336.099 22.1768C336.067 21.5068 336.055 21.0283 336.064 20.7412V15.0059H337.151V25ZM346.195 21.2471C346.195 22.4684 345.888 23.4232 345.272 24.1113C344.657 24.7949 343.807 25.1367 342.723 25.1367C342.053 25.1367 341.458 24.9795 340.938 24.665C340.419 24.3506 340.018 23.8994 339.735 23.3115C339.453 22.7236 339.312 22.0355 339.312 21.2471C339.312 20.0257 339.617 19.0755 340.228 18.3965C340.838 17.7129 341.686 17.3711 342.771 17.3711C343.819 17.3711 344.65 17.7197 345.266 18.417C345.885 19.1143 346.195 20.0576 346.195 21.2471ZM340.487 21.2471C340.487 22.2041 340.679 22.9333 341.062 23.4346C341.444 23.9359 342.007 24.1865 342.75 24.1865C343.493 24.1865 344.056 23.9382 344.438 23.4414C344.826 22.9401 345.02 22.2087 345.02 21.2471C345.02 20.2946 344.826 19.5723 344.438 19.0801C344.056 18.5833 343.488 18.335 342.736 18.335C341.993 18.335 341.433 18.5788 341.055 19.0664C340.676 19.554 340.487 20.2809 340.487 21.2471ZM353.291 23.9951H353.229C352.705 24.7562 351.922 25.1367 350.878 25.1367C349.898 25.1367 349.135 24.8018 348.588 24.1318C348.046 23.4619 347.774 22.5094 347.774 21.2744C347.774 20.0394 348.048 19.0801 348.595 18.3965C349.142 17.7129 349.903 17.3711 350.878 17.3711C351.894 17.3711 352.674 17.7402 353.216 18.4785H353.305L353.257 17.9385L353.229 17.4121V14.3633H354.364V25H353.441L353.291 23.9951ZM351.021 24.1865C351.796 24.1865 352.357 23.9769 352.703 23.5576C353.054 23.1338 353.229 22.4525 353.229 21.5137V21.2744C353.229 20.2126 353.052 19.4561 352.696 19.0049C352.345 18.5492 351.783 18.3213 351.008 18.3213C350.342 18.3213 349.832 18.5811 349.477 19.1006C349.126 19.6156 348.95 20.3447 348.95 21.2881C348.95 22.2451 349.126 22.9674 349.477 23.4551C349.827 23.9427 350.342 24.1865 351.021 24.1865ZM359.942 25.1367C358.835 25.1367 357.96 24.7995 357.317 24.125C356.679 23.4505 356.36 22.514 356.36 21.3154C356.36 20.1077 356.657 19.1484 357.249 18.4375C357.846 17.7266 358.646 17.3711 359.648 17.3711C360.587 17.3711 361.33 17.681 361.877 18.3008C362.424 18.916 362.697 19.7295 362.697 20.7412V21.459H357.536C357.559 22.3385 357.78 23.0062 358.199 23.4619C358.623 23.9176 359.218 24.1455 359.983 24.1455C360.79 24.1455 361.588 23.9769 362.376 23.6396V24.6514C361.975 24.8245 361.594 24.9476 361.234 25.0205C360.879 25.098 360.448 25.1367 359.942 25.1367ZM359.635 18.3213C359.033 18.3213 358.552 18.5173 358.192 18.9092C357.837 19.3011 357.627 19.8434 357.563 20.5361H361.48C361.48 19.8206 361.321 19.2738 361.002 18.8955C360.683 18.5127 360.227 18.3213 359.635 18.3213ZM367.646 21.7666V20.7275H371.003V21.7666H367.646ZM377.976 25H376.369V14.3633H377.976V25ZM385.01 25L384.688 23.9473H384.634C384.269 24.4076 383.902 24.722 383.533 24.8906C383.164 25.0547 382.69 25.1367 382.111 25.1367C381.368 25.1367 380.787 24.9362 380.368 24.5352C379.953 24.1341 379.746 23.5667 379.746 22.833C379.746 22.0537 380.035 21.4658 380.614 21.0693C381.193 20.6729 382.075 20.4564 383.26 20.4199L384.565 20.3789V19.9756C384.565 19.4925 384.451 19.1325 384.224 18.8955C384 18.654 383.652 18.5332 383.178 18.5332C382.79 18.5332 382.419 18.5902 382.063 18.7041C381.708 18.818 381.366 18.9525 381.038 19.1074L380.519 17.959C380.929 17.7448 381.378 17.583 381.865 17.4736C382.353 17.3597 382.813 17.3027 383.246 17.3027C384.208 17.3027 384.932 17.5124 385.42 17.9316C385.912 18.3509 386.158 19.0094 386.158 19.9072V25H385.01ZM382.617 23.9062C383.201 23.9062 383.668 23.7445 384.019 23.4209C384.374 23.0928 384.552 22.6348 384.552 22.0469V21.3906L383.581 21.4316C382.825 21.459 382.273 21.5866 381.927 21.8145C381.585 22.0378 381.414 22.3818 381.414 22.8467C381.414 23.1839 381.514 23.446 381.715 23.6328C381.915 23.8151 382.216 23.9062 382.617 23.9062ZM387.252 17.4395H389.002L390.54 21.7256C390.772 22.3363 390.927 22.9105 391.005 23.4482H391.06C391.101 23.1976 391.176 22.8945 391.285 22.5391C391.395 22.179 391.973 20.4792 393.021 17.4395H394.758L391.524 26.0049C390.937 27.5771 389.957 28.3633 388.585 28.3633C388.229 28.3633 387.883 28.3245 387.546 28.2471V26.9756C387.787 27.0303 388.063 27.0576 388.373 27.0576C389.148 27.0576 389.692 26.6087 390.007 25.7109L390.287 25L387.252 17.4395ZM399.208 25.1367C398.032 25.1367 397.112 24.7949 396.446 24.1113C395.785 23.4232 395.455 22.4775 395.455 21.2744C395.455 20.0394 395.763 19.0687 396.378 18.3623C396.993 17.6559 397.839 17.3027 398.914 17.3027C399.912 17.3027 400.701 17.6058 401.279 18.2119C401.858 18.818 402.147 19.652 402.147 20.7139V21.582H397.109C397.132 22.3158 397.33 22.8809 397.704 23.2773C398.078 23.6693 398.604 23.8652 399.283 23.8652C399.73 23.8652 400.145 23.8242 400.527 23.7422C400.915 23.6556 401.329 23.5143 401.771 23.3184V24.624C401.38 24.8109 400.983 24.943 400.582 25.0205C400.181 25.098 399.723 25.1367 399.208 25.1367ZM398.914 18.5195C398.404 18.5195 397.993 18.6813 397.684 19.0049C397.378 19.3285 397.196 19.8001 397.137 20.4199H400.568C400.559 19.7956 400.409 19.3239 400.117 19.0049C399.826 18.6813 399.424 18.5195 398.914 18.5195ZM407.808 17.3027C408.131 17.3027 408.398 17.3255 408.607 17.3711L408.45 18.8682C408.222 18.8135 407.985 18.7861 407.739 18.7861C407.097 18.7861 406.575 18.9958 406.174 19.415C405.777 19.8343 405.579 20.3789 405.579 21.0488V25H403.973V17.4395H405.23L405.442 18.7725H405.524C405.775 18.3213 406.101 17.9635 406.502 17.6992C406.908 17.4349 407.343 17.3027 407.808 17.3027ZM419.894 25H413.119V23.7832L415.696 21.1924C416.457 20.4131 416.961 19.8617 417.207 19.5381C417.458 19.21 417.64 18.9023 417.754 18.6152C417.868 18.3281 417.925 18.0205 417.925 17.6924C417.925 17.2412 417.788 16.8857 417.515 16.626C417.246 16.3662 416.872 16.2363 416.394 16.2363C416.011 16.2363 415.639 16.307 415.279 16.4482C414.924 16.5895 414.511 16.8447 414.042 17.2139L413.174 16.1543C413.73 15.6849 414.27 15.3522 414.794 15.1562C415.318 14.9603 415.876 14.8623 416.469 14.8623C417.398 14.8623 418.144 15.1061 418.704 15.5938C419.265 16.0768 419.545 16.7285 419.545 17.5488C419.545 18 419.463 18.4284 419.299 18.834C419.139 19.2396 418.891 19.6589 418.554 20.0918C418.221 20.5202 417.665 21.1012 416.886 21.835L415.149 23.5166V23.585H419.894V25Z"
+      fill={withHighlight(layer === '2').text}
+    />
+
+    <rect
+      x="467.5"
+      y="0.5"
+      width="128.971"
+      height="39"
+      rx="3.5"
+      stroke-width="1"
+      fill={withHighlight(layer === '3').background}
+      stroke={withHighlight(layer === '3').background}
+      fill-opacity={withHighlight(layer === '3').bgOpacity}
+    />
+    <rect
+      x="483.485"
+      y="12.2227"
+      width="11"
+      height="11"
+      rx="1.5"
+      transform="rotate(45 483.485 12.2227)"
+      stroke={withHighlight(layer === '3').text}
+    />
+    <path
+      d="M505.151 25H503.825L498.363 16.6123H498.309C498.382 17.5967 498.418 18.499 498.418 19.3193V25H497.345V15.0059H498.657L504.105 23.3594H504.16C504.151 23.2363 504.131 22.8421 504.099 22.1768C504.067 21.5068 504.055 21.0283 504.064 20.7412V15.0059H505.151V25ZM514.195 21.2471C514.195 22.4684 513.888 23.4232 513.272 24.1113C512.657 24.7949 511.807 25.1367 510.723 25.1367C510.053 25.1367 509.458 24.9795 508.938 24.665C508.419 24.3506 508.018 23.8994 507.735 23.3115C507.453 22.7236 507.312 22.0355 507.312 21.2471C507.312 20.0257 507.617 19.0755 508.228 18.3965C508.838 17.7129 509.686 17.3711 510.771 17.3711C511.819 17.3711 512.65 17.7197 513.266 18.417C513.885 19.1143 514.195 20.0576 514.195 21.2471ZM508.487 21.2471C508.487 22.2041 508.679 22.9333 509.062 23.4346C509.444 23.9359 510.007 24.1865 510.75 24.1865C511.493 24.1865 512.056 23.9382 512.438 23.4414C512.826 22.9401 513.02 22.2087 513.02 21.2471C513.02 20.2946 512.826 19.5723 512.438 19.0801C512.056 18.5833 511.488 18.335 510.736 18.335C509.993 18.335 509.433 18.5788 509.055 19.0664C508.676 19.554 508.487 20.2809 508.487 21.2471ZM521.291 23.9951H521.229C520.705 24.7562 519.922 25.1367 518.878 25.1367C517.898 25.1367 517.135 24.8018 516.588 24.1318C516.046 23.4619 515.774 22.5094 515.774 21.2744C515.774 20.0394 516.048 19.0801 516.595 18.3965C517.142 17.7129 517.903 17.3711 518.878 17.3711C519.894 17.3711 520.674 17.7402 521.216 18.4785H521.305L521.257 17.9385L521.229 17.4121V14.3633H522.364V25H521.441L521.291 23.9951ZM519.021 24.1865C519.796 24.1865 520.357 23.9769 520.703 23.5576C521.054 23.1338 521.229 22.4525 521.229 21.5137V21.2744C521.229 20.2126 521.052 19.4561 520.696 19.0049C520.345 18.5492 519.783 18.3213 519.008 18.3213C518.342 18.3213 517.832 18.5811 517.477 19.1006C517.126 19.6156 516.95 20.3447 516.95 21.2881C516.95 22.2451 517.126 22.9674 517.477 23.4551C517.827 23.9427 518.342 24.1865 519.021 24.1865ZM527.942 25.1367C526.835 25.1367 525.96 24.7995 525.317 24.125C524.679 23.4505 524.36 22.514 524.36 21.3154C524.36 20.1077 524.657 19.1484 525.249 18.4375C525.846 17.7266 526.646 17.3711 527.648 17.3711C528.587 17.3711 529.33 17.681 529.877 18.3008C530.424 18.916 530.697 19.7295 530.697 20.7412V21.459H525.536C525.559 22.3385 525.78 23.0062 526.199 23.4619C526.623 23.9176 527.218 24.1455 527.983 24.1455C528.79 24.1455 529.588 23.9769 530.376 23.6396V24.6514C529.975 24.8245 529.594 24.9476 529.234 25.0205C528.879 25.098 528.448 25.1367 527.942 25.1367ZM527.635 18.3213C527.033 18.3213 526.552 18.5173 526.192 18.9092C525.837 19.3011 525.627 19.8434 525.563 20.5361H529.48C529.48 19.8206 529.321 19.2738 529.002 18.8955C528.683 18.5127 528.227 18.3213 527.635 18.3213ZM535.646 21.7666V20.7275H539.003V21.7666H535.646ZM545.976 25H544.369V14.3633H545.976V25ZM553.01 25L552.688 23.9473H552.634C552.269 24.4076 551.902 24.722 551.533 24.8906C551.164 25.0547 550.69 25.1367 550.111 25.1367C549.368 25.1367 548.787 24.9362 548.368 24.5352C547.953 24.1341 547.746 23.5667 547.746 22.833C547.746 22.0537 548.035 21.4658 548.614 21.0693C549.193 20.6729 550.075 20.4564 551.26 20.4199L552.565 20.3789V19.9756C552.565 19.4925 552.451 19.1325 552.224 18.8955C552 18.654 551.652 18.5332 551.178 18.5332C550.79 18.5332 550.419 18.5902 550.063 18.7041C549.708 18.818 549.366 18.9525 549.038 19.1074L548.519 17.959C548.929 17.7448 549.378 17.583 549.865 17.4736C550.353 17.3597 550.813 17.3027 551.246 17.3027C552.208 17.3027 552.932 17.5124 553.42 17.9316C553.912 18.3509 554.158 19.0094 554.158 19.9072V25H553.01ZM550.617 23.9062C551.201 23.9062 551.668 23.7445 552.019 23.4209C552.374 23.0928 552.552 22.6348 552.552 22.0469V21.3906L551.581 21.4316C550.825 21.459 550.273 21.5866 549.927 21.8145C549.585 22.0378 549.414 22.3818 549.414 22.8467C549.414 23.1839 549.514 23.446 549.715 23.6328C549.915 23.8151 550.216 23.9062 550.617 23.9062ZM555.252 17.4395H557.002L558.54 21.7256C558.772 22.3363 558.927 22.9105 559.005 23.4482H559.06C559.101 23.1976 559.176 22.8945 559.285 22.5391C559.395 22.179 559.973 20.4792 561.021 17.4395H562.758L559.524 26.0049C558.937 27.5771 557.957 28.3633 556.585 28.3633C556.229 28.3633 555.883 28.3245 555.546 28.2471V26.9756C555.787 27.0303 556.063 27.0576 556.373 27.0576C557.148 27.0576 557.692 26.6087 558.007 25.7109L558.287 25L555.252 17.4395ZM567.208 25.1367C566.032 25.1367 565.112 24.7949 564.446 24.1113C563.785 23.4232 563.455 22.4775 563.455 21.2744C563.455 20.0394 563.763 19.0687 564.378 18.3623C564.993 17.6559 565.839 17.3027 566.914 17.3027C567.912 17.3027 568.701 17.6058 569.279 18.2119C569.858 18.818 570.147 19.652 570.147 20.7139V21.582H565.109C565.132 22.3158 565.33 22.8809 565.704 23.2773C566.078 23.6693 566.604 23.8652 567.283 23.8652C567.73 23.8652 568.145 23.8242 568.527 23.7422C568.915 23.6556 569.329 23.5143 569.771 23.3184V24.624C569.38 24.8109 568.983 24.943 568.582 25.0205C568.181 25.098 567.723 25.1367 567.208 25.1367ZM566.914 18.5195C566.404 18.5195 565.993 18.6813 565.684 19.0049C565.378 19.3285 565.196 19.8001 565.137 20.4199H568.568C568.559 19.7956 568.409 19.3239 568.117 19.0049C567.826 18.6813 567.424 18.5195 566.914 18.5195ZM575.808 17.3027C576.131 17.3027 576.398 17.3255 576.607 17.3711L576.45 18.8682C576.222 18.8135 575.985 18.7861 575.739 18.7861C575.097 18.7861 574.575 18.9958 574.174 19.415C573.777 19.8343 573.579 20.3789 573.579 21.0488V25H571.973V17.4395H573.23L573.442 18.7725H573.524C573.775 18.3213 574.101 17.9635 574.502 17.6992C574.908 17.4349 575.343 17.3027 575.808 17.3027ZM587.518 17.3027C587.518 17.9362 587.333 18.4648 586.964 18.8887C586.595 19.3079 586.075 19.5905 585.405 19.7363V19.791C586.207 19.8913 586.809 20.1419 587.21 20.543C587.611 20.9395 587.812 21.4681 587.812 22.1289C587.812 23.0905 587.472 23.8333 586.793 24.3574C586.114 24.877 585.148 25.1367 583.895 25.1367C582.787 25.1367 581.853 24.9567 581.092 24.5967V23.168C581.516 23.3776 581.965 23.5394 582.438 23.6533C582.912 23.7673 583.368 23.8242 583.806 23.8242C584.58 23.8242 585.159 23.6807 585.542 23.3936C585.925 23.1064 586.116 22.6621 586.116 22.0605C586.116 21.5273 585.904 21.1354 585.48 20.8848C585.057 20.6341 584.391 20.5088 583.484 20.5088H582.616V19.2031H583.498C585.093 19.2031 585.891 18.6517 585.891 17.5488C585.891 17.1204 585.752 16.79 585.474 16.5576C585.196 16.3252 584.785 16.209 584.243 16.209C583.865 16.209 583.5 16.2637 583.149 16.373C582.799 16.4779 582.384 16.6852 581.905 16.9951L581.119 15.874C582.035 15.1995 583.099 14.8623 584.312 14.8623C585.319 14.8623 586.105 15.0788 586.67 15.5117C587.235 15.9447 587.518 16.5417 587.518 17.3027Z"
+      fill={withHighlight(layer === '3').text}
+    />
+
+    <path
+      d="M120.354 20.3536C120.549 20.1583 120.549 19.8417 120.354 19.6464L117.172 16.4645C116.976 16.2692 116.66 16.2692 116.464 16.4645C116.269 16.6597 116.269 16.9763 116.464 17.1716L119.293 20L116.464 22.8284C116.269 23.0237 116.269 23.3403 116.464 23.5355C116.66 23.7308 116.976 23.7308 117.172 23.5355L120.354 20.3536ZM104 20.5L120 20.5L120 19.5L104 19.5L104 20.5Z"
+      fill="#B9B9B9"
+    />
+    <path
+      d="M288.354 20.3536C288.549 20.1583 288.549 19.8417 288.354 19.6464L285.172 16.4645C284.976 16.2692 284.66 16.2692 284.464 16.4645C284.269 16.6597 284.269 16.9763 284.464 17.1716L287.293 20L284.464 22.8284C284.269 23.0237 284.269 23.3403 284.464 23.5355C284.66 23.7308 284.976 23.7308 285.172 23.5355L288.354 20.3536ZM272 20.5L288 20.5L288 19.5L272 19.5L272 20.5Z"
+      fill="#B9B9B9"
+    />
+    <path
+      d="M456.354 20.3536C456.549 20.1583 456.549 19.8417 456.354 19.6464L453.172 16.4645C452.976 16.2692 452.66 16.2692 452.464 16.4645C452.269 16.6597 452.269 16.9763 452.464 17.1716L455.293 20L452.464 22.8284C452.269 23.0237 452.269 23.3403 452.464 23.5355C452.66 23.7308 452.976 23.7308 453.172 23.5355L456.354 20.3536ZM440 20.5L456 20.5L456 19.5L440 19.5L440 20.5Z"
+      fill="#B9B9B9"
+    />
+    <path
+      d="M47.3536 55.6464C47.1583 55.4512 46.8417 55.4512 46.6464 55.6464L43.4645 58.8284C43.2692 59.0237 43.2692 59.3403 43.4645 59.5355C43.6597 59.7308 43.9763 59.7308 44.1716 59.5355L47 56.7071L49.8284 59.5355C50.0237 59.7308 50.3403 59.7308 50.5355 59.5355C50.7308 59.3403 50.7308 59.0237 50.5355 58.8284L47.3536 55.6464ZM536.5 56V64H537.5V56H536.5ZM533 67.5H51V68.5H533V67.5ZM47.5 64V56H46.5V64H47.5ZM51 67.5C49.067 67.5 47.5 65.933 47.5 64H46.5C46.5 66.4853 48.5147 68.5 51 68.5V67.5ZM536.5 64C536.5 65.933 534.933 67.5 533 67.5V68.5C535.485 68.5 537.5 66.4853 537.5 64H536.5Z"
+      fill="#B9B9B9"
+    />
+  </svg>
+);