From 4d2974e383fd56eb76ff99106da60fc43dd00d38 Mon Sep 17 00:00:00 2001
From: fmtabbara <fmtabbara@hotmail.co.uk>
Date: Mon, 6 Dec 2021 15:21:34 +0000
Subject: [PATCH] add custom nav icons

---
 nym-wallet/src/components/Nav.tsx       | 27 ++++++++-----------------
 nym-wallet/src/svg-icons/bond.tsx       | 24 ++++++++++++++++++++++
 nym-wallet/src/svg-icons/delegate.tsx   | 14 +++++++++++++
 nym-wallet/src/svg-icons/index.ts       |  4 ++++
 nym-wallet/src/svg-icons/unbond.tsx     | 19 +++++++++++++++++
 nym-wallet/src/svg-icons/undelegate.tsx | 15 ++++++++++++++
 6 files changed, 84 insertions(+), 19 deletions(-)
 create mode 100644 nym-wallet/src/svg-icons/bond.tsx
 create mode 100644 nym-wallet/src/svg-icons/delegate.tsx
 create mode 100644 nym-wallet/src/svg-icons/index.ts
 create mode 100644 nym-wallet/src/svg-icons/unbond.tsx
 create mode 100644 nym-wallet/src/svg-icons/undelegate.tsx

diff --git a/nym-wallet/src/components/Nav.tsx b/nym-wallet/src/components/Nav.tsx
index 25358566a5..d056cc637c 100644
--- a/nym-wallet/src/components/Nav.tsx
+++ b/nym-wallet/src/components/Nav.tsx
@@ -1,18 +1,9 @@
 import React, { useContext, useEffect } from 'react'
 import { Link, useLocation } from 'react-router-dom'
 import { List, ListItem, ListItemIcon, ListItemText } from '@mui/material'
-import {
-  AccountBalanceWalletOutlined,
-  ArrowBack,
-  ArrowForward,
-  AttachMoney,
-  CancelOutlined,
-  HowToVoteOutlined,
-  MoneyOff,
-  Description,
-  Settings,
-} from '@mui/icons-material'
+import { AccountBalanceWalletOutlined, ArrowBack, ArrowForward, Description, Settings } from '@mui/icons-material'
 import { ADMIN_ADDRESS, ClientContext } from '../context/main'
+import { Bond, Delegate, Unbond, Undelegate } from '../svg-icons'
 
 let routesSchema = [
   {
@@ -33,22 +24,22 @@ let routesSchema = [
   {
     label: 'Bond',
     route: '/bond',
-    Icon: AttachMoney,
+    Icon: Bond,
   },
   {
     label: 'Unbond',
     route: '/unbond',
-    Icon: MoneyOff,
+    Icon: Unbond,
   },
   {
     label: 'Delegate',
     route: '/delegate',
-    Icon: HowToVoteOutlined,
+    Icon: Delegate,
   },
   {
     label: 'Undelegate',
     route: '/undelegate',
-    Icon: CancelOutlined,
+    Icon: Undelegate,
   },
 ]
 
@@ -80,16 +71,14 @@ export const Nav = () => {
             <ListItemIcon
               sx={{
                 minWidth: 30,
-                color:
-                  location.pathname === route ? 'primary.main' : 'common.white',
+                color: location.pathname === route ? 'primary.main' : 'common.white',
               }}
             >
               <Icon sx={{ fontSize: 20 }} />
             </ListItemIcon>
             <ListItemText
               sx={{
-                color:
-                  location.pathname === route ? 'primary.main' : 'common.white',
+                color: location.pathname === route ? 'primary.main' : 'common.white',
               }}
               primary={label}
             />
diff --git a/nym-wallet/src/svg-icons/bond.tsx b/nym-wallet/src/svg-icons/bond.tsx
new file mode 100644
index 0000000000..6870c7cfe7
--- /dev/null
+++ b/nym-wallet/src/svg-icons/bond.tsx
@@ -0,0 +1,24 @@
+import React from 'react'
+import { SvgIcon, SvgIconProps } from '@mui/material'
+
+export const Bond = (props: SvgIconProps) => {
+  return (
+    <SvgIcon {...props}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M16 17C14.8954 17 14 16.1046 14 15L14 9C14 7.89543 14.8954 7 16 7L22 7C23.1046 7 24 7.89543 24 9L24 15C24 16.1046 23.1046 17 22 17L16 17ZM16 9L16 15L22 15L22 9L16 9Z"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M2 17C0.89543 17 -1.00647e-07 16.1046 -2.24801e-07 15L-8.99206e-07 9C-1.02336e-06 7.89543 0.895429 7 2 7L8 7C9.10457 7 10 7.89543 10 9L10 15C10 16.1046 9.10457 17 8 17L2 17ZM2 9L2 15L8 15L8 9L2 9Z"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M6 12C6 11.4477 6.44772 11 7 11H17C17.5523 11 18 11.4477 18 12C18 12.5523 17.5523 13 17 13H7C6.44772 13 6 12.5523 6 12Z"
+      />
+    </SvgIcon>
+  )
+}
diff --git a/nym-wallet/src/svg-icons/delegate.tsx b/nym-wallet/src/svg-icons/delegate.tsx
new file mode 100644
index 0000000000..03a80ed9c0
--- /dev/null
+++ b/nym-wallet/src/svg-icons/delegate.tsx
@@ -0,0 +1,14 @@
+import React from 'react'
+import { SvgIcon, SvgIconProps } from '@mui/material'
+
+export const Delegate = (props: SvgIconProps) => {
+  return (
+    <SvgIcon {...props}>
+      <path d="M4 12V15H6V12H4ZM16 7L14.59 5.59L13 7.17V2H11V7.19L9.39 5.61L8 7L12 11L16 7ZM4 17H20V15H4V17Z" />
+      <path d="M20 21C20 21.5523 19.5523 22 19 22H5C4.44772 22 4 21.5523 4 21V20H20V21Z" />
+      <rect x="18" y="12" width="2" height="3" />
+      <rect x="18" y="17" width="2" height="3" />
+      <rect x="4" y="17" width="2" height="3" />
+    </SvgIcon>
+  )
+}
diff --git a/nym-wallet/src/svg-icons/index.ts b/nym-wallet/src/svg-icons/index.ts
new file mode 100644
index 0000000000..b13c4591ba
--- /dev/null
+++ b/nym-wallet/src/svg-icons/index.ts
@@ -0,0 +1,4 @@
+export * from './delegate'
+export * from './undelegate'
+export * from './bond'
+export * from './unbond'
diff --git a/nym-wallet/src/svg-icons/unbond.tsx b/nym-wallet/src/svg-icons/unbond.tsx
new file mode 100644
index 0000000000..ccd58b0b8b
--- /dev/null
+++ b/nym-wallet/src/svg-icons/unbond.tsx
@@ -0,0 +1,19 @@
+import React from 'react'
+import { SvgIcon, SvgIconProps } from '@mui/material'
+
+export const Unbond = (props: SvgIconProps) => {
+  return (
+    <SvgIcon {...props}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M16 17C14.8954 17 14 16.1046 14 15L14 9C14 7.89543 14.8954 7 16 7L22 7C23.1046 7 24 7.89543 24 9L24 15C24 16.1046 23.1046 17 22 17L16 17ZM16 9L16 15L22 15L22 9L16 9Z"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M2 17C0.89543 17 -1.00647e-07 16.1046 -2.24801e-07 15L-8.99206e-07 9C-1.02336e-06 7.89543 0.895429 7 2 7L8 7C9.10457 7 10 7.89543 10 9L10 15C10 16.1046 9.10457 17 8 17L2 17ZM2 9L2 15L8 15L8 9L2 9Z"
+      />
+    </SvgIcon>
+  )
+}
diff --git a/nym-wallet/src/svg-icons/undelegate.tsx b/nym-wallet/src/svg-icons/undelegate.tsx
new file mode 100644
index 0000000000..0599b3f207
--- /dev/null
+++ b/nym-wallet/src/svg-icons/undelegate.tsx
@@ -0,0 +1,15 @@
+import React from 'react'
+import { SvgIcon, SvgIconProps } from '@mui/material'
+
+export const Undelegate = (props: SvgIconProps) => {
+  return (
+    <SvgIcon {...props}>
+      <path d="M4 12V15H6V12H4ZM4 17H20V15H4V17Z" />
+      <path d="M20 21C20 21.5523 19.5523 22 19 22H5C4.44772 22 4 21.5523 4 21V20H20V21Z" />
+      <rect x="18" y="12" width="2" height="3" />
+      <rect x="18" y="17" width="2" height="3" />
+      <rect x="4" y="17" width="2" height="3" />
+      <path d="M9.41 7.41L8 6L12 2L16 6L14.61 7.39L13 5.81L13 11L11 11L11 5.83L9.41 7.41Z" />
+    </SvgIcon>
+  )
+}