From a5372f226b1969e10c91dea22d882fd73533ae1a Mon Sep 17 00:00:00 2001
From: Ivana Andersson <ivana.p.kostova@gmail.com>
Date: Mon, 21 Aug 2023 16:47:54 +0300
Subject: [PATCH] feat: create `Header` component and add it to pages

---
 src/components/General/Header.tsx                  | 14 ++++++++++++++
 .../CreateLocalNodePage/CreateLocalNodePage.tsx    |  8 ++------
 src/pages/PairDevice/PairDevice.tsx                | 14 +++-----------
 3 files changed, 19 insertions(+), 17 deletions(-)
 create mode 100644 src/components/General/Header.tsx

diff --git a/src/components/General/Header.tsx b/src/components/General/Header.tsx
new file mode 100644
index 00000000..ede00809
--- /dev/null
+++ b/src/components/General/Header.tsx
@@ -0,0 +1,14 @@
+import { XStack } from 'tamagui'
+import NimbusLogo from '../Logos/NimbusLogo'
+import TagContainer from './TagContainer'
+
+const Header = () => {
+  return (
+    <XStack style={{ justifyContent: 'space-between' }} py={'25px'}>
+      <NimbusLogo />
+      <TagContainer />
+    </XStack>
+  )
+}
+
+export default Header
diff --git a/src/pages/CreateLocalNodePage/CreateLocalNodePage.tsx b/src/pages/CreateLocalNodePage/CreateLocalNodePage.tsx
index d0a8596d..cd9252f2 100644
--- a/src/pages/CreateLocalNodePage/CreateLocalNodePage.tsx
+++ b/src/pages/CreateLocalNodePage/CreateLocalNodePage.tsx
@@ -2,13 +2,12 @@ import { useState } from 'react'
 import { Button as StatusButton, Text, Avatar, Checkbox } from '@status-im/components'
 import { Label, Separator, XStack, YStack } from 'tamagui'
 import PageWrapperShadow from '../../components/PageWrappers/PageWrapperShadow'
-import NimbusLogo from '../../components/Logos/NimbusLogo'
-import TagContainer from '../../components/General/TagContainer'
 import Titles from '../../components/General/Titles'
 import NodeIcon from '../../components/Icons/NodeIcon'
 import LabelInputField from '../../components/General/LabelInputField'
 import ReactionIcon from '../../components/Icons/ReactionIcon'
 import ColorPicker from '../../components/General/ColorPicker'
+import Header from '../../components/General/Header'
 
 const CreateLocalNodePage = () => {
   const [autoConnectChecked, setAutoConnectChecked] = useState(false)
@@ -16,10 +15,7 @@ const CreateLocalNodePage = () => {
   return (
     <PageWrapperShadow rightImageSrc="/background-images/day-night-bg.png" rightImageLogo={true}>
       <div className="connection-page">
-        <XStack justifyContent={'space-between'}>
-          <NimbusLogo />
-          <TagContainer />
-        </XStack>
+        <Header />
         <article className="content">
           <Titles
             title="Create Local Node"
diff --git a/src/pages/PairDevice/PairDevice.tsx b/src/pages/PairDevice/PairDevice.tsx
index 2075fd48..4ba3e866 100644
--- a/src/pages/PairDevice/PairDevice.tsx
+++ b/src/pages/PairDevice/PairDevice.tsx
@@ -1,17 +1,15 @@
 import { Separator, XStack, YStack } from 'tamagui'
 import { useState } from 'react'
-import { Button, Checkbox, Tag, Text } from '@status-im/components'
+import { Button, Checkbox, Text } from '@status-im/components'
 
 import PageWrapperShadow from '../../components/PageWrappers/PageWrapperShadow'
 import SyncStatus from './SyncStatus'
-import NimbusLogo from '../../components/Logos/NimbusLogo'
-import PairIcon from '../../components/Icons/PairIcon'
-import CreateIcon from '../../components/Icons/CreateIcon'
 import NodeIcon from '../../components/Icons/NodeIcon'
 import Titles from '../../components/General/Titles'
 import PairedSuccessfully from './PairedSuccessfully'
 import { CreateAvatar } from './CreateAvatar'
 import GenerateId from './GenerateId'
+import Header from '../../components/General/Header'
 
 const PairDevice = () => {
   const [autoChecked, setAutoChecked] = useState(false)
@@ -31,13 +29,7 @@ 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>
+        <Header />
         <Titles title="Pair Device" subtitle="Pair your device to the Nimbus Node Manager" />
         {isPaired ? <PairedSuccessfully /> : <GenerateId isAwaitingPairing={isAwaitingPairing} />}
         {!isPaired && (