From 2b7f29607eb478d6ecc423c9888baacdc9d20e65 Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Wed, 16 Aug 2023 13:13:43 +0300
Subject: [PATCH 1/2] feat: add header with logo and tags

---
 src/pages/PairDevice/PairDevice.tsx | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/pages/PairDevice/PairDevice.tsx b/src/pages/PairDevice/PairDevice.tsx
index 2908858f..255c8ea5 100644
--- a/src/pages/PairDevice/PairDevice.tsx
+++ b/src/pages/PairDevice/PairDevice.tsx
@@ -1,6 +1,10 @@
-import { Separator, YStack } from 'tamagui'
+import { Separator, XStack, YStack } from 'tamagui'
 import PageWrapperShadow from '../../components/PageWrappers/PageWrapperShadow'
 import SyncStatus from './SyncStatus'
+import NimbusLogo from '../../components/Logos/NimbusLogo'
+import { Tag } from '@status-im/components'
+import PairIcon from '../../components/Icons/PairIcon'
+import CreateIcon from '../../components/Icons/CreateIcon'
 
 const PairDevice = () => {
   return (
@@ -11,6 +15,13 @@ const PairDevice = () => {
           maxWidth: '100%',
         }}
       >
+        <XStack style={{ justifyContent: 'space-between' }}>
+          <NimbusLogo />
+          <XStack space={'$2'} style={{ alignItems: 'center' }}>
+            <Tag icon={PairIcon} label="Pair" size={32} selected />
+            <Tag icon={CreateIcon} label="Create" size={32} />
+          </XStack>
+        </XStack>
         <Separator borderColor={'#e3e3e3'} />
         <SyncStatus isPairing={true} timer={'00:12'} isAwaitingPairing={true} />
       </YStack>

From d25c13396cba6eb4b0049cd94bc77c5c426205b1 Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Wed, 16 Aug 2023 13:21:36 +0300
Subject: [PATCH 2/2] feat: add continue section

---
 src/pages/PairDevice/PairDevice.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/pages/PairDevice/PairDevice.tsx b/src/pages/PairDevice/PairDevice.tsx
index 255c8ea5..fa7b8098 100644
--- a/src/pages/PairDevice/PairDevice.tsx
+++ b/src/pages/PairDevice/PairDevice.tsx
@@ -2,9 +2,10 @@ import { Separator, XStack, YStack } from 'tamagui'
 import PageWrapperShadow from '../../components/PageWrappers/PageWrapperShadow'
 import SyncStatus from './SyncStatus'
 import NimbusLogo from '../../components/Logos/NimbusLogo'
-import { Tag } from '@status-im/components'
+import { Button, Tag } from '@status-im/components'
 import PairIcon from '../../components/Icons/PairIcon'
 import CreateIcon from '../../components/Icons/CreateIcon'
+import NodeIcon from '../../components/Icons/NodeIcon'
 
 const PairDevice = () => {
   return (
@@ -24,6 +25,10 @@ const PairDevice = () => {
         </XStack>
         <Separator borderColor={'#e3e3e3'} />
         <SyncStatus isPairing={true} timer={'00:12'} isAwaitingPairing={true} />
+        <Separator borderColor={'#e3e3e3'} />
+        <XStack>
+          <Button icon={<NodeIcon />}>Continue</Button>
+        </XStack>
       </YStack>
     </PageWrapperShadow>
   )