From 843b5520e85ef6f9feb3c2881da9f8f119b6c036 Mon Sep 17 00:00:00 2001
From: vidhya-metacell <vidhya@metacell.us>
Date: Fri, 22 Jul 2022 19:15:45 +0200
Subject: [PATCH] #16 Sidebar selected state for optionns availble in list

---
 src/components/Sidebar.tsx                    | 77 ++++++++++---------
 src/components/assets/svg/cursor-active.svg   |  3 +
 src/components/assets/svg/cursor.svg          |  2 +-
 .../assets/svg/fullscreen-active.svg          |  3 +
 src/components/assets/svg/fullscreen.svg      |  2 +-
 src/components/assets/svg/icon-active.svg     |  3 +
 src/components/assets/svg/icon.svg            |  2 +-
 src/components/assets/svg/move-active.svg     |  3 +
 src/components/assets/svg/node.svg            | 13 ++--
 9 files changed, 63 insertions(+), 45 deletions(-)
 create mode 100644 src/components/assets/svg/cursor-active.svg
 create mode 100644 src/components/assets/svg/fullscreen-active.svg
 create mode 100644 src/components/assets/svg/icon-active.svg
 create mode 100644 src/components/assets/svg/move-active.svg

diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index 94d567a..b0f83f6 100644
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -4,36 +4,18 @@ import { makeStyles } from '@mui/styles';
 import vars from './assets/styles/variables';
 import { Divider, List, ListItemButton, ListItemIcon } from '@mui/material';
 import Move from './assets/svg/move.svg';
+import MoveActive from './assets/svg/move-active.svg';
 import Icon from './assets/svg/icon.svg';
+import IconActive from './assets/svg/icon-active.svg';
 import Node from './assets/svg/node.svg';
 import Cursor from './assets/svg/cursor.svg';
+import CursorActive from './assets/svg/cursor-active.svg';
 import Fullscreen from './assets/svg/fullscreen.svg';
+import FullscreenActive from './assets/svg/fullscreen-active.svg';
 
-const { textWhite, dividerColor } = vars;
+const { dividerColor } = vars;
 
 const useStyles = makeStyles(() => ({
-  root: {
-    zIndex: '5',
-    width: '4rem',
-    background: textWhite,
-    boxShadow:
-      '0 0 3.75rem rgba(0, 0, 0, 0.1), 0 0.5rem 2.5rem -0.625rem rgba(0, 0, 0, 0.1)',
-    borderRadius: '2rem',
-    position: 'fixed',
-    left: '1rem',
-    top: '50%',
-    transform: 'translateY(-50%)',
-
-    '&.right': {
-      left: 'auto',
-      right: '1rem',
-    },
-
-    '& .MuiList-root': {
-      padding: '0.75rem',
-    },
-  },
-
   node: {
     margin: '0.25rem 0',
     '& .MuiDivider-root': {
@@ -53,28 +35,41 @@ const useStyles = makeStyles(() => ({
 
 const Sidebar = () => {
   const classes = useStyles();
+  const [selected, setSelected] = React.useState("1");
+
   return (
-    <Box className={`${classes.root} left`}>
+    <Box className="sidebar">
       <List disablePadding component="nav">
-        <ListItemButton selected>
+        <ListItemButton selected={selected === "1"} onClick={() => setSelected("1")}>
           <ListItemIcon>
-            <img
+            {selected === "1" ? <img
+              src={`data:image/svg+xml;base64,${new Buffer(CursorActive).toString(
+                'base64'
+              )}`}
+              alt="icon"
+            /> : <img
               src={`data:image/svg+xml;base64,${new Buffer(Cursor).toString(
                 'base64'
               )}`}
               alt="icon"
-            />
+            />}
           </ListItemIcon>
         </ListItemButton>
 
-        <ListItemButton>
+        <ListItemButton selected={selected === "2"} onClick={() => setSelected("2")}>
           <ListItemIcon>
-            <img
+            {selected === "2" ? <img
+              src={`data:image/svg+xml;base64,${new Buffer(MoveActive).toString(
+                'base64'
+              )}`}
+              alt="move"
+            /> : <img
               src={`data:image/svg+xml;base64,${new Buffer(Move).toString(
                 'base64'
               )}`}
               alt="move"
-            />
+            />}
+
           </ListItemIcon>
         </ListItemButton>
       </List>
@@ -91,25 +86,35 @@ const Sidebar = () => {
       </Box>
 
       <List disablePadding component="nav">
-        <ListItemButton disabled>
+        <ListItemButton selected={selected === "3"} onClick={() => setSelected("3")}>
           <ListItemIcon>
-            <img
+            {selected === "3" ? <img
+              src={`data:image/svg+xml;base64,${new Buffer(IconActive).toString(
+                'base64'
+              )}`}
+              alt="icon"
+            /> : <img
               src={`data:image/svg+xml;base64,${new Buffer(Icon).toString(
                 'base64'
               )}`}
               alt="icon"
-            />
+            />}
           </ListItemIcon>
         </ListItemButton>
 
-        <ListItemButton>
+        <ListItemButton selected={selected === "4"} onClick={() => setSelected("4")}>
           <ListItemIcon>
-            <img
+            {selected === "4" ? <img
+              src={`data:image/svg+xml;base64,${new Buffer(FullscreenActive).toString(
+                'base64'
+              )}`}
+              alt="fullscreen"
+            /> : <img
               src={`data:image/svg+xml;base64,${new Buffer(Fullscreen).toString(
                 'base64'
               )}`}
               alt="fullscreen"
-            />
+            />}
           </ListItemIcon>
         </ListItemButton>
       </List>
diff --git a/src/components/assets/svg/cursor-active.svg b/src/components/assets/svg/cursor-active.svg
new file mode 100644
index 0000000..c3104dd
--- /dev/null
+++ b/src/components/assets/svg/cursor-active.svg
@@ -0,0 +1,3 @@
+<svg width="10" height="17" viewBox="0 0 10 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.3125 15.1328L5.40625 8.36719L4.89062 9.33594L8.95312 9.57031C9.15104 9.58594 9.3099 9.53646 9.42969 9.42188C9.55469 9.30208 9.61979 9.15625 9.625 8.98438C9.63021 8.8125 9.5625 8.65365 9.42188 8.50781L1.57812 0.523438C1.44792 0.388021 1.30208 0.320312 1.14062 0.320312C0.979167 0.315104 0.841146 0.367188 0.726562 0.476562C0.611979 0.585938 0.552083 0.734375 0.546875 0.921875L0.40625 12.0469C0.401042 12.2604 0.460938 12.4271 0.585938 12.5469C0.716146 12.6615 0.869792 12.7188 1.04688 12.7188C1.22396 12.7135 1.3776 12.6302 1.50781 12.4688L4.11719 9.5625L3.05469 9.21875L5.85938 16.1562C5.92708 16.3281 6.03385 16.4427 6.17969 16.5C6.33073 16.5625 6.48177 16.5625 6.63281 16.5L8.02344 15.9375C8.1849 15.875 8.29167 15.7656 8.34375 15.6094C8.39583 15.4583 8.38542 15.2995 8.3125 15.1328Z" fill="white"/>
+</svg>
diff --git a/src/components/assets/svg/cursor.svg b/src/components/assets/svg/cursor.svg
index c3104dd..6a35fe4 100644
--- a/src/components/assets/svg/cursor.svg
+++ b/src/components/assets/svg/cursor.svg
@@ -1,3 +1,3 @@
 <svg width="10" height="17" viewBox="0 0 10 17" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M8.3125 15.1328L5.40625 8.36719L4.89062 9.33594L8.95312 9.57031C9.15104 9.58594 9.3099 9.53646 9.42969 9.42188C9.55469 9.30208 9.61979 9.15625 9.625 8.98438C9.63021 8.8125 9.5625 8.65365 9.42188 8.50781L1.57812 0.523438C1.44792 0.388021 1.30208 0.320312 1.14062 0.320312C0.979167 0.315104 0.841146 0.367188 0.726562 0.476562C0.611979 0.585938 0.552083 0.734375 0.546875 0.921875L0.40625 12.0469C0.401042 12.2604 0.460938 12.4271 0.585938 12.5469C0.716146 12.6615 0.869792 12.7188 1.04688 12.7188C1.22396 12.7135 1.3776 12.6302 1.50781 12.4688L4.11719 9.5625L3.05469 9.21875L5.85938 16.1562C5.92708 16.3281 6.03385 16.4427 6.17969 16.5C6.33073 16.5625 6.48177 16.5625 6.63281 16.5L8.02344 15.9375C8.1849 15.875 8.29167 15.7656 8.34375 15.6094C8.39583 15.4583 8.38542 15.2995 8.3125 15.1328Z" fill="white"/>
+<path d="M8.3125 15.1328L5.40625 8.36719L4.89062 9.33594L8.95312 9.57031C9.15104 9.58594 9.3099 9.53646 9.42969 9.42188C9.55469 9.30208 9.61979 9.15625 9.625 8.98438C9.63021 8.8125 9.5625 8.65365 9.42188 8.50781L1.57812 0.523438C1.44792 0.388021 1.30208 0.320312 1.14062 0.320312C0.979167 0.315104 0.841146 0.367188 0.726562 0.476562C0.611979 0.585938 0.552083 0.734375 0.546875 0.921875L0.40625 12.0469C0.401042 12.2604 0.460938 12.4271 0.585938 12.5469C0.716146 12.6615 0.869792 12.7188 1.04688 12.7188C1.22396 12.7135 1.3776 12.6302 1.50781 12.4688L4.11719 9.5625L3.05469 9.21875L5.85938 16.1562C5.92708 16.3281 6.03385 16.4427 6.17969 16.5C6.33073 16.5625 6.48177 16.5625 6.63281 16.5L8.02344 15.9375C8.1849 15.875 8.29167 15.7656 8.34375 15.6094C8.39583 15.4583 8.38542 15.2995 8.3125 15.1328Z" fill="#3C3C43" fill-opacity="0.6"/>
 </svg>
diff --git a/src/components/assets/svg/fullscreen-active.svg b/src/components/assets/svg/fullscreen-active.svg
new file mode 100644
index 0000000..34ab854
--- /dev/null
+++ b/src/components/assets/svg/fullscreen-active.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="15" viewBox="0 0 16 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.703125 4.22656H2.24219V2.74219C2.24219 2.36719 2.33594 2.08594 2.52344 1.89844C2.71615 1.71094 2.99479 1.61719 3.35938 1.61719H4.82812V0.078125H3.26562C2.42188 0.078125 1.78385 0.291667 1.35156 0.71875C0.919271 1.14583 0.703125 1.77865 0.703125 2.61719V4.22656ZM5.96875 1.61719H10.0234V0.078125H5.96875V1.61719ZM13.75 4.22656H15.2891V2.61719C15.2891 1.77865 15.0729 1.14583 14.6406 0.71875C14.2083 0.291667 13.5703 0.078125 12.7266 0.078125H11.1641V1.61719H12.6328C12.9922 1.61719 13.2682 1.71094 13.4609 1.89844C13.6536 2.08594 13.75 2.36719 13.75 2.74219V4.22656ZM13.75 9.36719H15.2891V5.36719H13.75V9.36719ZM11.1641 14.6641H12.7266C13.5703 14.6641 14.2083 14.4479 14.6406 14.0156C15.0729 13.5885 15.2891 12.9583 15.2891 12.125V10.5156H13.75V11.9922C13.75 12.3724 13.6536 12.6562 13.4609 12.8438C13.2682 13.0312 12.9922 13.125 12.6328 13.125H11.1641V14.6641ZM5.96875 14.6641H10.0234V13.125H5.96875V14.6641ZM3.26562 14.6641H4.82812V13.125H3.35938C2.99479 13.125 2.71615 13.0312 2.52344 12.8438C2.33594 12.6562 2.24219 12.3724 2.24219 11.9922V10.5156H0.703125V12.125C0.703125 12.9583 0.919271 13.5885 1.35156 14.0156C1.78385 14.4479 2.42188 14.6641 3.26562 14.6641ZM0.703125 9.36719H2.24219V5.36719H0.703125V9.36719Z" fill="white"/>
+</svg>
diff --git a/src/components/assets/svg/fullscreen.svg b/src/components/assets/svg/fullscreen.svg
index 9b790ad..223507d 100644
--- a/src/components/assets/svg/fullscreen.svg
+++ b/src/components/assets/svg/fullscreen.svg
@@ -1,3 +1,3 @@
 <svg width="16" height="15" viewBox="0 0 16 15" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M0.703125 4.22656H2.24219V2.74219C2.24219 2.36719 2.33594 2.08594 2.52344 1.89844C2.71615 1.71094 2.99479 1.61719 3.35938 1.61719H4.82812V0.078125H3.26562C2.42188 0.078125 1.78385 0.291667 1.35156 0.71875C0.919271 1.14583 0.703125 1.77865 0.703125 2.61719V4.22656ZM5.96875 1.61719H10.0234V0.078125H5.96875V1.61719ZM13.75 4.22656H15.2891V2.61719C15.2891 1.77865 15.0729 1.14583 14.6406 0.71875C14.2083 0.291667 13.5703 0.078125 12.7266 0.078125H11.1641V1.61719H12.6328C12.9922 1.61719 13.2682 1.71094 13.4609 1.89844C13.6536 2.08594 13.75 2.36719 13.75 2.74219V4.22656ZM13.75 9.36719H15.2891V5.36719H13.75V9.36719ZM11.1641 14.6641H12.7266C13.5703 14.6641 14.2083 14.4479 14.6406 14.0156C15.0729 13.5885 15.2891 12.9583 15.2891 12.125V10.5156H13.75V11.9922C13.75 12.3724 13.6536 12.6562 13.4609 12.8438C13.2682 13.0312 12.9922 13.125 12.6328 13.125H11.1641V14.6641ZM5.96875 14.6641H10.0234V13.125H5.96875V14.6641ZM3.26562 14.6641H4.82812V13.125H3.35938C2.99479 13.125 2.71615 13.0312 2.52344 12.8438C2.33594 12.6562 2.24219 12.3724 2.24219 11.9922V10.5156H0.703125V12.125C0.703125 12.9583 0.919271 13.5885 1.35156 14.0156C1.78385 14.4479 2.42188 14.6641 3.26562 14.6641ZM0.703125 9.36719H2.24219V5.36719H0.703125V9.36719Z" fill="#3C3C43" fill-opacity="0.2"/>
+<path d="M0.703125 4.22656H2.24219V2.74219C2.24219 2.36719 2.33594 2.08594 2.52344 1.89844C2.71615 1.71094 2.99479 1.61719 3.35938 1.61719H4.82812V0.078125H3.26562C2.42188 0.078125 1.78385 0.291667 1.35156 0.71875C0.919271 1.14583 0.703125 1.77865 0.703125 2.61719V4.22656ZM5.96875 1.61719H10.0234V0.078125H5.96875V1.61719ZM13.75 4.22656H15.2891V2.61719C15.2891 1.77865 15.0729 1.14583 14.6406 0.71875C14.2083 0.291667 13.5703 0.078125 12.7266 0.078125H11.1641V1.61719H12.6328C12.9922 1.61719 13.2682 1.71094 13.4609 1.89844C13.6536 2.08594 13.75 2.36719 13.75 2.74219V4.22656ZM13.75 9.36719H15.2891V5.36719H13.75V9.36719ZM11.1641 14.6641H12.7266C13.5703 14.6641 14.2083 14.4479 14.6406 14.0156C15.0729 13.5885 15.2891 12.9583 15.2891 12.125V10.5156H13.75V11.9922C13.75 12.3724 13.6536 12.6562 13.4609 12.8438C13.2682 13.0312 12.9922 13.125 12.6328 13.125H11.1641V14.6641ZM5.96875 14.6641H10.0234V13.125H5.96875V14.6641ZM3.26562 14.6641H4.82812V13.125H3.35938C2.99479 13.125 2.71615 13.0312 2.52344 12.8438C2.33594 12.6562 2.24219 12.3724 2.24219 11.9922V10.5156H0.703125V12.125C0.703125 12.9583 0.919271 13.5885 1.35156 14.0156C1.78385 14.4479 2.42188 14.6641 3.26562 14.6641ZM0.703125 9.36719H2.24219V5.36719H0.703125V9.36719Z" fill="#3C3C43" fill-opacity="0.6"/>
 </svg>
diff --git a/src/components/assets/svg/icon-active.svg b/src/components/assets/svg/icon-active.svg
new file mode 100644
index 0000000..4fa3bcb
--- /dev/null
+++ b/src/components/assets/svg/icon-active.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="19" viewBox="0 0 16 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.3906 12.7188C11.901 12.7188 11.4531 12.8385 11.0469 13.0781C10.6458 13.3177 10.3255 13.6406 10.0859 14.0469C9.84635 14.4479 9.72656 14.8932 9.72656 15.3828C9.72656 15.8672 9.84635 16.3099 10.0859 16.7109C10.3255 17.1172 10.6458 17.4375 11.0469 17.6719C11.4531 17.9062 11.901 18.0234 12.3906 18.0234C12.8802 18.0234 13.3255 17.9062 13.7266 17.6719C14.1276 17.4375 14.4479 17.1172 14.6875 16.7109C14.9271 16.3099 15.0469 15.8672 15.0469 15.3828C15.0469 14.8932 14.9271 14.4479 14.6875 14.0469C14.4479 13.6406 14.1276 13.3177 13.7266 13.0781C13.3255 12.8385 12.8802 12.7188 12.3906 12.7188ZM12.3906 14.1562C12.7292 14.1562 13.0156 14.276 13.25 14.5156C13.4896 14.75 13.6094 15.0391 13.6094 15.3828C13.6094 15.7214 13.4896 16.0078 13.25 16.2422C13.0156 16.4766 12.7292 16.5938 12.3906 16.5938C12.0469 16.5938 11.7552 16.4766 11.5156 16.2422C11.2812 16.0078 11.1641 15.7214 11.1641 15.3828C11.1641 15.0339 11.2812 14.7422 11.5156 14.5078C11.7552 14.2734 12.0469 14.1562 12.3906 14.1562ZM3.60938 6.03906C4.09896 6.03906 4.54427 5.91927 4.94531 5.67969C5.34635 5.4401 5.66667 5.11979 5.90625 4.71875C6.14583 4.3125 6.26562 3.86458 6.26562 3.375C6.26562 2.88542 6.14583 2.4401 5.90625 2.03906C5.66667 1.63802 5.34635 1.31771 4.94531 1.07812C4.54427 0.838542 4.09896 0.71875 3.60938 0.71875C3.11979 0.71875 2.67448 0.838542 2.27344 1.07812C1.8724 1.31771 1.55208 1.63802 1.3125 2.03906C1.07292 2.4401 0.953125 2.88542 0.953125 3.375C0.953125 3.86458 1.07292 4.3125 1.3125 4.71875C1.55208 5.11979 1.8724 5.4401 2.27344 5.67969C2.67448 5.91927 3.11979 6.03906 3.60938 6.03906ZM3.60938 4.60156C3.26562 4.60156 2.97656 4.48438 2.74219 4.25C2.50781 4.01042 2.39062 3.71875 2.39062 3.375C2.39062 3.03125 2.50781 2.74219 2.74219 2.50781C2.97656 2.27344 3.26562 2.15625 3.60938 2.15625C3.95312 2.15625 4.24219 2.27344 4.47656 2.50781C4.71094 2.74219 4.82812 3.03125 4.82812 3.375C4.82812 3.71875 4.71094 4.01042 4.47656 4.25C4.24219 4.48438 3.95312 4.60156 3.60938 4.60156ZM2.85156 6.22656C2.85156 7.0599 3.10156 7.76042 3.60156 8.32812C4.10156 8.89583 4.83594 9.30729 5.80469 9.5625L9.75 10.6328C11.0052 10.9766 11.6328 11.6068 11.6328 12.5234V13.1641H13.1406V12.5234C13.1406 11.6901 12.8906 10.9922 12.3906 10.4297C11.8958 9.86198 11.1641 9.45052 10.1953 9.19531L6.25 8.125C4.98958 7.78125 4.35938 7.14844 4.35938 6.22656V5.58594H2.85156V6.22656Z" fill="white"/>
+</svg>
diff --git a/src/components/assets/svg/icon.svg b/src/components/assets/svg/icon.svg
index 50503cd..29ded5d 100644
--- a/src/components/assets/svg/icon.svg
+++ b/src/components/assets/svg/icon.svg
@@ -1,3 +1,3 @@
 <svg width="16" height="19" viewBox="0 0 16 19" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M12.3906 12.7188C11.901 12.7188 11.4531 12.8385 11.0469 13.0781C10.6458 13.3177 10.3255 13.6406 10.0859 14.0469C9.84635 14.4479 9.72656 14.8932 9.72656 15.3828C9.72656 15.8672 9.84635 16.3099 10.0859 16.7109C10.3255 17.1172 10.6458 17.4375 11.0469 17.6719C11.4531 17.9062 11.901 18.0234 12.3906 18.0234C12.8802 18.0234 13.3255 17.9062 13.7266 17.6719C14.1276 17.4375 14.4479 17.1172 14.6875 16.7109C14.9271 16.3099 15.0469 15.8672 15.0469 15.3828C15.0469 14.8932 14.9271 14.4479 14.6875 14.0469C14.4479 13.6406 14.1276 13.3177 13.7266 13.0781C13.3255 12.8385 12.8802 12.7188 12.3906 12.7188ZM12.3906 14.1562C12.7292 14.1562 13.0156 14.276 13.25 14.5156C13.4896 14.75 13.6094 15.0391 13.6094 15.3828C13.6094 15.7214 13.4896 16.0078 13.25 16.2422C13.0156 16.4766 12.7292 16.5938 12.3906 16.5938C12.0469 16.5938 11.7552 16.4766 11.5156 16.2422C11.2812 16.0078 11.1641 15.7214 11.1641 15.3828C11.1641 15.0339 11.2812 14.7422 11.5156 14.5078C11.7552 14.2734 12.0469 14.1562 12.3906 14.1562ZM3.60938 6.03906C4.09896 6.03906 4.54427 5.91927 4.94531 5.67969C5.34635 5.4401 5.66667 5.11979 5.90625 4.71875C6.14583 4.3125 6.26562 3.86458 6.26562 3.375C6.26562 2.88542 6.14583 2.4401 5.90625 2.03906C5.66667 1.63802 5.34635 1.31771 4.94531 1.07812C4.54427 0.838542 4.09896 0.71875 3.60938 0.71875C3.11979 0.71875 2.67448 0.838542 2.27344 1.07812C1.8724 1.31771 1.55208 1.63802 1.3125 2.03906C1.07292 2.4401 0.953125 2.88542 0.953125 3.375C0.953125 3.86458 1.07292 4.3125 1.3125 4.71875C1.55208 5.11979 1.8724 5.4401 2.27344 5.67969C2.67448 5.91927 3.11979 6.03906 3.60938 6.03906ZM3.60938 4.60156C3.26562 4.60156 2.97656 4.48438 2.74219 4.25C2.50781 4.01042 2.39062 3.71875 2.39062 3.375C2.39062 3.03125 2.50781 2.74219 2.74219 2.50781C2.97656 2.27344 3.26562 2.15625 3.60938 2.15625C3.95312 2.15625 4.24219 2.27344 4.47656 2.50781C4.71094 2.74219 4.82812 3.03125 4.82812 3.375C4.82812 3.71875 4.71094 4.01042 4.47656 4.25C4.24219 4.48438 3.95312 4.60156 3.60938 4.60156ZM2.85156 6.22656C2.85156 7.0599 3.10156 7.76042 3.60156 8.32812C4.10156 8.89583 4.83594 9.30729 5.80469 9.5625L9.75 10.6328C11.0052 10.9766 11.6328 11.6068 11.6328 12.5234V13.1641H13.1406V12.5234C13.1406 11.6901 12.8906 10.9922 12.3906 10.4297C11.8958 9.86198 11.1641 9.45052 10.1953 9.19531L6.25 8.125C4.98958 7.78125 4.35938 7.14844 4.35938 6.22656V5.58594H2.85156V6.22656Z" fill="#3C3C43" fill-opacity="0.2"/>
+<path d="M12.3906 12.7188C11.901 12.7188 11.4531 12.8385 11.0469 13.0781C10.6458 13.3177 10.3255 13.6406 10.0859 14.0469C9.84635 14.4479 9.72656 14.8932 9.72656 15.3828C9.72656 15.8672 9.84635 16.3099 10.0859 16.7109C10.3255 17.1172 10.6458 17.4375 11.0469 17.6719C11.4531 17.9062 11.901 18.0234 12.3906 18.0234C12.8802 18.0234 13.3255 17.9062 13.7266 17.6719C14.1276 17.4375 14.4479 17.1172 14.6875 16.7109C14.9271 16.3099 15.0469 15.8672 15.0469 15.3828C15.0469 14.8932 14.9271 14.4479 14.6875 14.0469C14.4479 13.6406 14.1276 13.3177 13.7266 13.0781C13.3255 12.8385 12.8802 12.7188 12.3906 12.7188ZM12.3906 14.1562C12.7292 14.1562 13.0156 14.276 13.25 14.5156C13.4896 14.75 13.6094 15.0391 13.6094 15.3828C13.6094 15.7214 13.4896 16.0078 13.25 16.2422C13.0156 16.4766 12.7292 16.5938 12.3906 16.5938C12.0469 16.5938 11.7552 16.4766 11.5156 16.2422C11.2812 16.0078 11.1641 15.7214 11.1641 15.3828C11.1641 15.0339 11.2812 14.7422 11.5156 14.5078C11.7552 14.2734 12.0469 14.1562 12.3906 14.1562ZM3.60938 6.03906C4.09896 6.03906 4.54427 5.91927 4.94531 5.67969C5.34635 5.4401 5.66667 5.11979 5.90625 4.71875C6.14583 4.3125 6.26562 3.86458 6.26562 3.375C6.26562 2.88542 6.14583 2.4401 5.90625 2.03906C5.66667 1.63802 5.34635 1.31771 4.94531 1.07812C4.54427 0.838542 4.09896 0.71875 3.60938 0.71875C3.11979 0.71875 2.67448 0.838542 2.27344 1.07812C1.8724 1.31771 1.55208 1.63802 1.3125 2.03906C1.07292 2.4401 0.953125 2.88542 0.953125 3.375C0.953125 3.86458 1.07292 4.3125 1.3125 4.71875C1.55208 5.11979 1.8724 5.4401 2.27344 5.67969C2.67448 5.91927 3.11979 6.03906 3.60938 6.03906ZM3.60938 4.60156C3.26562 4.60156 2.97656 4.48438 2.74219 4.25C2.50781 4.01042 2.39062 3.71875 2.39062 3.375C2.39062 3.03125 2.50781 2.74219 2.74219 2.50781C2.97656 2.27344 3.26562 2.15625 3.60938 2.15625C3.95312 2.15625 4.24219 2.27344 4.47656 2.50781C4.71094 2.74219 4.82812 3.03125 4.82812 3.375C4.82812 3.71875 4.71094 4.01042 4.47656 4.25C4.24219 4.48438 3.95312 4.60156 3.60938 4.60156ZM2.85156 6.22656C2.85156 7.0599 3.10156 7.76042 3.60156 8.32812C4.10156 8.89583 4.83594 9.30729 5.80469 9.5625L9.75 10.6328C11.0052 10.9766 11.6328 11.6068 11.6328 12.5234V13.1641H13.1406V12.5234C13.1406 11.6901 12.8906 10.9922 12.3906 10.4297C11.8958 9.86198 11.1641 9.45052 10.1953 9.19531L6.25 8.125C4.98958 7.78125 4.35938 7.14844 4.35938 6.22656V5.58594H2.85156V6.22656Z" fill="#3C3C43" fill-opacity="0.6"/>
 </svg>
diff --git a/src/components/assets/svg/move-active.svg b/src/components/assets/svg/move-active.svg
new file mode 100644
index 0000000..5eaf279
--- /dev/null
+++ b/src/components/assets/svg/move-active.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="19" viewBox="0 0 20 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.25 9.91406L3.75 12.2812C3.92708 12.4479 4.10938 12.5234 4.29688 12.5078C4.48438 12.4922 4.64323 12.4115 4.77344 12.2656C4.90365 12.1198 4.96875 11.9349 4.96875 11.7109V10.0547H9.30469V14.4062H7.64062C7.41667 14.4062 7.23177 14.4714 7.08594 14.6016C6.9401 14.7266 6.85938 14.8828 6.84375 15.0703C6.82812 15.263 6.90365 15.4453 7.07031 15.6172L9.4375 18.1172C9.60417 18.2943 9.79427 18.3802 10.0078 18.375C10.2214 18.3698 10.4089 18.2812 10.5703 18.1094L12.9297 15.6172C13.0964 15.4453 13.1719 15.263 13.1562 15.0703C13.1458 14.8828 13.0651 14.7266 12.9141 14.6016C12.7682 14.4714 12.5833 14.4062 12.3594 14.4062H10.7031V10.0547H15.0312V11.7109C15.0312 11.9349 15.0964 12.1198 15.2266 12.2656C15.3568 12.4115 15.5156 12.4922 15.7031 12.5078C15.8906 12.5234 16.0729 12.4479 16.25 12.2812L18.7422 9.92188C18.9089 9.76042 18.9948 9.57292 19 9.35938C19.0052 9.14583 18.9219 8.95573 18.75 8.78906L16.25 6.42188C16.0729 6.25521 15.8906 6.17969 15.7031 6.19531C15.5156 6.21094 15.3568 6.29167 15.2266 6.4375C15.0964 6.58333 15.0312 6.76823 15.0312 6.99219V8.65625H10.7031V4.29688H12.3594C12.5833 4.29688 12.7682 4.23177 12.9141 4.10156C13.0651 3.97135 13.1458 3.8125 13.1562 3.625C13.1719 3.4375 13.0964 3.25781 12.9297 3.08594L10.5625 0.585938C10.3958 0.408854 10.2057 0.322917 9.99219 0.328125C9.78385 0.333333 9.59635 0.421875 9.42969 0.59375L7.07031 3.08594C6.90365 3.25781 6.82812 3.4375 6.84375 3.625C6.85938 3.8125 6.9401 3.97135 7.08594 4.10156C7.23177 4.23177 7.41667 4.29688 7.64062 4.29688H9.30469V8.65625H4.96875V6.99219C4.96875 6.76823 4.90365 6.58333 4.77344 6.4375C4.64323 6.29167 4.48438 6.21094 4.29688 6.19531C4.10938 6.17969 3.92708 6.25521 3.75 6.42188L1.25781 8.78125C1.09115 8.94271 1.00521 9.13021 1 9.34375C0.994792 9.55729 1.07812 9.7474 1.25 9.91406Z" fill="white"/>
+</svg>
diff --git a/src/components/assets/svg/node.svg b/src/components/assets/svg/node.svg
index 208e7e4..e978ea0 100644
--- a/src/components/assets/svg/node.svg
+++ b/src/components/assets/svg/node.svg
@@ -1,19 +1,20 @@
 <svg width="58" height="102" viewBox="0 0 58 102" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g opacity="0.5" filter="url(#filter0_d_307_751)">
+<g filter="url(#filter0_d_401_6411)">
 <rect x="-38" y="2" width="90" height="90" rx="45" fill="#F2F2F7"/>
+<rect x="-37.5" y="2.5" width="89" height="89" rx="44.5" stroke="#3C3C43" stroke-opacity="0.1"/>
 </g>
-<path d="M52 91V86.4142C52 85.5233 50.9229 85.0771 50.2929 85.7071L45.7071 90.2929C45.0771 90.9229 45.5233 92 46.4142 92H51C51.5523 92 52 91.5523 52 91Z" fill="#3C3C43" fill-opacity="0.2"/>
+<path d="M52 91V86.4142C52 85.5233 50.9229 85.0771 50.2929 85.7071L45.7071 90.2929C45.0771 90.9229 45.5233 92 46.4142 92H51C51.5523 92 52 91.5523 52 91Z" fill="#3C3C43" fill-opacity="0.6"/>
 <defs>
-<filter id="filter0_d_307_751" x="-44" y="0" width="102" height="102" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<filter id="filter0_d_401_6411" x="-44" y="0" width="102" height="102" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
 <feFlood flood-opacity="0" result="BackgroundImageFix"/>
 <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feMorphology radius="4" operator="erode" in="SourceAlpha" result="effect1_dropShadow_307_751"/>
+<feMorphology radius="4" operator="erode" in="SourceAlpha" result="effect1_dropShadow_401_6411"/>
 <feOffset dy="4"/>
 <feGaussianBlur stdDeviation="5"/>
 <feComposite in2="hardAlpha" operator="out"/>
 <feColorMatrix type="matrix" values="0 0 0 0 0.235294 0 0 0 0 0.235294 0 0 0 0 0.262745 0 0 0 0.3 0"/>
-<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_307_751"/>
-<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_307_751" result="shape"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_401_6411"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_401_6411" result="shape"/>
 </filter>
 </defs>
 </svg>