From d4b3fff1704b59b53be8bf22caf15f738fa6eac2 Mon Sep 17 00:00:00 2001
From: Ivana Andersson <ivana.p.kostova@gmail.com>
Date: Fri, 18 Aug 2023 12:24:20 +0300
Subject: [PATCH] feat: create TagContainer component for header

---
 src/components/General/TagContainer.css           |  4 ++++
 src/components/General/TagContainer.tsx           | 15 +++++++++++++++
 .../CreateLocalNodePage/CreateLocalNodePage.tsx   |  8 ++------
 3 files changed, 21 insertions(+), 6 deletions(-)
 create mode 100644 src/components/General/TagContainer.css
 create mode 100644 src/components/General/TagContainer.tsx

diff --git a/src/components/General/TagContainer.css b/src/components/General/TagContainer.css
new file mode 100644
index 00000000..d02ec351
--- /dev/null
+++ b/src/components/General/TagContainer.css
@@ -0,0 +1,4 @@
+
+.tag-container div:nth-child(1) {
+    background:transparent;
+  }
\ No newline at end of file
diff --git a/src/components/General/TagContainer.tsx b/src/components/General/TagContainer.tsx
new file mode 100644
index 00000000..4f6d117c
--- /dev/null
+++ b/src/components/General/TagContainer.tsx
@@ -0,0 +1,15 @@
+import { Tag } from '@status-im/components'
+import { XStack } from 'tamagui'
+import PairIcon from '../Icons/PairIcon'
+import CreateIcon from '../Icons/CreateIcon'
+
+const TagContainer = () => {
+  return (
+    <XStack space={'$2'} alignItems="center" className="tag-container">
+      <Tag icon={PairIcon} label="Pair" size={32} />
+      <Tag selected icon={CreateIcon} label="Create" size={32} />
+    </XStack>
+  )
+}
+
+export default TagContainer
diff --git a/src/pages/CreateLocalNodePage/CreateLocalNodePage.tsx b/src/pages/CreateLocalNodePage/CreateLocalNodePage.tsx
index 38d4054d..d0809acc 100644
--- a/src/pages/CreateLocalNodePage/CreateLocalNodePage.tsx
+++ b/src/pages/CreateLocalNodePage/CreateLocalNodePage.tsx
@@ -3,10 +3,9 @@ import { Button as StatusButton, Tag, Text, Avatar, Checkbox } from '@status-im/
 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 PairIcon from '../../components/Icons/PairIcon'
-import CreateIcon from '../../components/Icons/CreateIcon'
 import LabelInputField from '../../components/General/LabelInputField'
 import ReactionIcon from '../../components/Icons/ReactionIcon'
 import ColorPicker from '../../components/General/ColorPicker'
@@ -19,10 +18,7 @@ const CreateLocalNodePage = () => {
       <div className="connection-page">
         <XStack justifyContent={'space-between'}>
           <NimbusLogo />
-          <XStack space={'$2'} alignItems="center">
-            <Tag icon={PairIcon} label="Pair" size={32} />
-            <Tag selected icon={CreateIcon} label="Create" size={32} />
-          </XStack>
+          <TagContainer />
         </XStack>
         <article className="content">
           <Titles