From b297085a9e8a6846fa9a1cb24126ea30eadfbe0a Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Mon, 21 Aug 2023 14:07:42 +0300
Subject: [PATCH] fix: remove and use status icons for connect device

---
 src/components/Icons/ConnectIcon.tsx          | 18 ------
 src/components/Icons/CreateIcon.tsx           | 16 -----
 src/components/Icons/NodeIcon.tsx             | 34 -----------
 src/components/Icons/PairIcon.tsx             | 61 -------------------
 .../ConnectDevicePage/ConnectDevicePage.tsx   | 13 ++--
 5 files changed, 5 insertions(+), 137 deletions(-)
 delete mode 100644 src/components/Icons/ConnectIcon.tsx
 delete mode 100644 src/components/Icons/CreateIcon.tsx
 delete mode 100644 src/components/Icons/NodeIcon.tsx
 delete mode 100644 src/components/Icons/PairIcon.tsx

diff --git a/src/components/Icons/ConnectIcon.tsx b/src/components/Icons/ConnectIcon.tsx
deleted file mode 100644
index 530659a7..00000000
--- a/src/components/Icons/ConnectIcon.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-function ConnectIcon() {
-  return (
-    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <g id="20/connection">
-        <path
-          id="body"
-          fillRule="evenodd"
-          clipRule="evenodd"
-          d="M9.99978 1.8999C8.21669 1.8999 6.48343 2.48826 5.06881 3.57374C3.6542 4.65921 2.63728 6.18114 2.17578 7.90347L3.33489 8.21405C3.72802 6.74688 4.59428 5.45043 5.79933 4.52576C7.00437 3.6011 8.48086 3.0999 9.99978 3.0999C11.5187 3.0999 12.9952 3.6011 14.2002 4.52577C15.4053 5.45043 16.2715 6.74688 16.6647 8.21405L17.8238 7.90347C17.3623 6.18114 16.3454 4.65922 14.9307 3.57374C13.5161 2.48827 11.7829 1.8999 9.99978 1.8999ZM9.99988 4.9C8.87719 4.9 7.78588 5.27045 6.8952 5.9539C6.00451 6.63734 5.36423 7.59559 5.07366 8.68002L6.23277 8.9906C6.45497 8.16133 6.9446 7.42856 7.62571 6.90592C8.30682 6.38329 9.14136 6.1 9.99988 6.1C10.8584 6.1 11.6929 6.38329 12.374 6.90592C13.0552 7.42856 13.5448 8.16134 13.767 8.99061L14.9261 8.68002C14.6355 7.59559 13.9952 6.63735 13.1046 5.9539C12.2139 5.27045 11.1226 4.9 9.99988 4.9ZM9.99988 10.1C8.95054 10.1 8.09988 10.9507 8.09988 12C8.09988 13.0493 8.95054 13.9 9.99988 13.9C11.0492 13.9 11.8999 13.0493 11.8999 12C11.8999 10.9507 11.0492 10.1 9.99988 10.1ZM6.89988 12C6.89988 10.2879 8.2878 8.9 9.99988 8.9C11.712 8.9 13.0999 10.2879 13.0999 12C13.0999 13.5068 12.0248 14.7625 10.5999 15.042V17.5H9.39988V15.042C7.97494 14.7625 6.89988 13.5068 6.89988 12Z"
-          fill="#1B273D"
-          fillOpacity="0.7"
-        />
-      </g>
-    </svg>
-  )
-}
-
-export default ConnectIcon
diff --git a/src/components/Icons/CreateIcon.tsx b/src/components/Icons/CreateIcon.tsx
deleted file mode 100644
index 07a051b9..00000000
--- a/src/components/Icons/CreateIcon.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-function CreateIcon() {
-  return (
-    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
-      <circle cx="10" cy="10" r="7.5" stroke="#1B273D" strokeOpacity="0.7" strokeWidth="1.2" />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M10.6 9.4V6.5H9.4V9.4L6.5 9.4V10.6L9.4 10.6V13.5H10.6V10.6L13.5 10.6L13.5 9.4L10.6 9.4Z"
-        fill="#1B273D"
-        fillOpacity="0.7"
-      />
-    </svg>
-  )
-}
-
-export default CreateIcon
diff --git a/src/components/Icons/NodeIcon.tsx b/src/components/Icons/NodeIcon.tsx
deleted file mode 100644
index 9c25f8fa..00000000
--- a/src/components/Icons/NodeIcon.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-function NodeIcon() {
-  return (
-    <span>
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="20"
-        height="20"
-        viewBox="0 0 20 20"
-        fill="none"
-      >
-        <g clipPath="url(#clip0_760_1602)">
-          <path
-            fillRule="evenodd"
-            clipRule="evenodd"
-            d="M4.9999 2.60002C3.67442 2.60002 2.5999 3.67454 2.5999 5.00002C2.5999 6.32551 3.67442 7.40002 4.9999 7.40002C6.32539 7.40002 7.3999 6.32551 7.3999 5.00002C7.3999 3.67454 6.32539 2.60002 4.9999 2.60002ZM1.3999 5.00002C1.3999 3.0118 3.01168 1.40002 4.9999 1.40002C6.98813 1.40002 8.5999 3.0118 8.5999 5.00002C8.5999 5.77749 8.35345 6.4974 7.9344 7.08587L9.48712 8.63859C10.4478 7.86383 11.6697 7.4 13 7.4C16.0928 7.4 18.6 9.90721 18.6 13C18.6 16.0928 16.0928 18.6 13 18.6C9.9072 18.6 7.4 16.0928 7.4 13C7.4 11.6697 7.86383 10.4478 8.63859 9.48712L7.08589 7.93442C6.49739 8.35353 5.77743 8.60002 4.9999 8.60002C3.01168 8.60002 1.3999 6.98825 1.3999 5.00002ZM8.6 13C8.6 10.5699 10.5699 8.6 13 8.6C15.4301 8.6 17.4 10.5699 17.4 13C17.4 15.4301 15.4301 17.4 13 17.4C10.5699 17.4 8.6 15.4301 8.6 13Z"
-            fill="white"
-            fillOpacity="0.7"
-          />
-          <path
-            d="M7.9344 7.08587L7.52711 6.79585C7.3855 6.99472 7.40821 7.26679 7.58085 7.43943L7.9344 7.08587ZM9.48712 8.63859L9.13357 8.99215C9.31425 9.17283 9.6021 9.18821 9.801 9.0278L9.48712 8.63859ZM8.63859 9.48712L9.0278 9.801C9.18821 9.6021 9.17283 9.31425 8.99215 9.13357L8.63859 9.48712ZM7.08589 7.93442L7.43945 7.58087C7.26681 7.40823 6.99472 7.38552 6.79585 7.52715L7.08589 7.93442ZM3.0999 5.00002C3.0999 3.95068 3.95056 3.10002 4.9999 3.10002V2.10002C3.39828 2.10002 2.0999 3.3984 2.0999 5.00002H3.0999ZM4.9999 6.90002C3.95056 6.90002 3.0999 6.04937 3.0999 5.00002H2.0999C2.0999 6.60165 3.39828 7.90002 4.9999 7.90002V6.90002ZM6.8999 5.00002C6.8999 6.04937 6.04924 6.90002 4.9999 6.90002V7.90002C6.60153 7.90002 7.8999 6.60165 7.8999 5.00002H6.8999ZM4.9999 3.10002C6.04924 3.10002 6.8999 3.95068 6.8999 5.00002H7.8999C7.8999 3.3984 6.60153 2.10002 4.9999 2.10002V3.10002ZM4.9999 0.900024C2.73553 0.900024 0.899902 2.73566 0.899902 5.00002H1.8999C1.8999 3.28794 3.28782 1.90002 4.9999 1.90002V0.900024ZM9.0999 5.00002C9.0999 2.73566 7.26427 0.900024 4.9999 0.900024V1.90002C6.71198 1.90002 8.0999 3.28794 8.0999 5.00002H9.0999ZM8.34169 7.3759C8.81905 6.70553 9.0999 5.88483 9.0999 5.00002H8.0999C8.0999 5.67015 7.88784 6.28926 7.52711 6.79585L8.34169 7.3759ZM9.84068 8.28504L8.28795 6.73232L7.58085 7.43943L9.13357 8.99215L9.84068 8.28504ZM9.801 9.0278C10.676 8.32213 11.788 7.9 13 7.9V6.9C11.5514 6.9 10.2196 7.40554 9.17324 8.24939L9.801 9.0278ZM13 7.9C15.8167 7.9 18.1 10.1833 18.1 13H19.1C19.1 9.63106 16.3689 6.9 13 6.9V7.9ZM18.1 13C18.1 15.8167 15.8167 18.1 13 18.1V19.1C16.3689 19.1 19.1 16.3689 19.1 13H18.1ZM13 18.1C10.1833 18.1 7.9 15.8167 7.9 13H6.9C6.9 16.3689 9.63106 19.1 13 19.1V18.1ZM7.9 13C7.9 11.788 8.32213 10.676 9.0278 9.801L8.24939 9.17324C7.40554 10.2196 6.9 11.5514 6.9 13H7.9ZM6.73234 8.28798L8.28504 9.84068L8.99215 9.13357L7.43945 7.58087L6.73234 8.28798ZM4.9999 9.10002C5.88478 9.10002 6.70554 8.81913 7.37594 8.3417L6.79585 7.52715C6.28924 7.88793 5.67008 8.10002 4.9999 8.10002V9.10002ZM0.899902 5.00002C0.899902 7.26439 2.73553 9.10002 4.9999 9.10002V8.10002C3.28782 8.10002 1.8999 6.71211 1.8999 5.00002H0.899902ZM13 8.1C10.2938 8.1 8.1 10.2938 8.1 13H9.1C9.1 10.8461 10.8461 9.1 13 9.1V8.1ZM17.9 13C17.9 10.2938 15.7062 8.1 13 8.1V9.1C15.1539 9.1 16.9 10.8461 16.9 13H17.9ZM13 17.9C15.7062 17.9 17.9 15.7062 17.9 13H16.9C16.9 15.1539 15.1539 16.9 13 16.9V17.9ZM8.1 13C8.1 15.7062 10.2938 17.9 13 17.9V16.9C10.8461 16.9 9.1 15.1539 9.1 13H8.1Z"
-            fill="white"
-          />
-        </g>
-        <defs>
-          <clipPath id="clip0_760_1602">
-            <rect width="20" height="20" fill="white" />
-          </clipPath>
-        </defs>
-      </svg>
-    </span>
-  )
-}
-
-export default NodeIcon
diff --git a/src/components/Icons/PairIcon.tsx b/src/components/Icons/PairIcon.tsx
deleted file mode 100644
index 51a93aef..00000000
--- a/src/components/Icons/PairIcon.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-function PairIcon() {
-  return (
-    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M13.4517 10.8951L16.952 6.89508L17.2978 6.49996L16.952 6.10484L13.4517 2.10489L12.5486 2.89514L15.7032 6.49997L12.5486 10.1049L13.4517 10.8951ZM6.5487 9.10488L3.0484 13.1049L2.70264 13.5001L3.0484 13.8952L6.5487 17.8951L7.45176 17.1049L4.29722 13.5L7.45176 9.89512L6.5487 9.10488Z"
-        fill="#1B273D"
-        fillOpacity="0.7"
-      />
-      <rect
-        x="4"
-        y="7.5"
-        width="2"
-        height="12"
-        transform="rotate(-90 4 7.5)"
-        fill="url(#paint0_linear_760_2959)"
-      />
-      <g mask="url(#mask0_760_2959)">
-        <path d="M4.5 6.50006L16 6.50006" stroke="#1B273D" strokeOpacity="0.7" strokeWidth="1.2" />
-      </g>
-      <rect
-        x="16"
-        y="12.5"
-        width="2"
-        height="12"
-        transform="rotate(90 16 12.5)"
-        fill="url(#paint1_linear_760_2959)"
-      />
-      <g mask="url(#mask1_760_2959)">
-        <path d="M15.5 13.4999L4 13.4999" stroke="#1B273D" strokeOpacity="0.7" strokeWidth="1.2" />
-      </g>
-      <defs>
-        <linearGradient
-          id="paint0_linear_760_2959"
-          x1="5"
-          y1="8"
-          x2="5"
-          y2="13.5"
-          gradientUnits="userSpaceOnUse"
-        >
-          <stop stopColor="#09101C" stopOpacity="0" />
-          <stop offset="1" stopColor="#09101C" />
-        </linearGradient>
-        <linearGradient
-          id="paint1_linear_760_2959"
-          x1="17"
-          y1="13"
-          x2="17"
-          y2="18.5"
-          gradientUnits="userSpaceOnUse"
-        >
-          <stop stopColor="#09101C" stopOpacity="0" />
-          <stop offset="1" stopColor="#09101C" />
-        </linearGradient>
-      </defs>
-    </svg>
-  )
-}
-
-export default PairIcon
diff --git a/src/pages/ConnectDevicePage/ConnectDevicePage.tsx b/src/pages/ConnectDevicePage/ConnectDevicePage.tsx
index e9b22cc1..0e429721 100644
--- a/src/pages/ConnectDevicePage/ConnectDevicePage.tsx
+++ b/src/pages/ConnectDevicePage/ConnectDevicePage.tsx
@@ -5,11 +5,8 @@ import { Label, Separator, XStack, YStack } from 'tamagui'
 import PageWrapperShadow from '../../components/PageWrappers/PageWrapperShadow'
 import NimbusLogo from '../../components/Logos/NimbusLogo'
 import Titles from '../../components/General/Titles'
-import NodeIcon from '../../components/Icons/NodeIcon'
-import ConnectIcon from '../../components/Icons/ConnectIcon'
-import PairIcon from '../../components/Icons/PairIcon'
-import CreateIcon from '../../components/Icons/CreateIcon'
 import LabelInputField from '../../components/General/LabelInputField'
+import { AddSmallIcon, ConnectionIcon, NodeIcon, SwapIcon } from '@status-im/icons'
 
 const ConnectDevicePage = () => {
   const [autoConnectChecked, setAutoConnectChecked] = useState(false)
@@ -24,9 +21,9 @@ const ConnectDevicePage = () => {
         <XStack justifyContent={'space-between'}>
           <NimbusLogo />
           <XStack space={'$2'} alignItems="center">
-            <Tag icon={ConnectIcon} label="Connect" size={32} selected />
-            <Tag icon={PairIcon} label="Pair" size={32} />
-            <Tag icon={CreateIcon} label="Create" size={32} />
+            <Tag icon={ConnectionIcon} label="Connect" size={32} selected />
+            <Tag icon={SwapIcon} label="Pair" size={32} />
+            <Tag icon={AddSmallIcon} label="Create" size={32} />
           </XStack>
         </XStack>
         <article className="content">
@@ -105,7 +102,7 @@ const ConnectDevicePage = () => {
             </XStack>
             <Separator alignSelf="stretch" borderColor={'#F0F2F5'} />
           </section>
-          <StatusButton icon={<NodeIcon />}>Connect Device</StatusButton>
+          <StatusButton icon={<NodeIcon size={20} />}>Connect Device</StatusButton>
         </article>
       </div>
     </PageWrapperShadow>