From 7c4d094e5d3e380c06a6eb6ce2e1c5c176d06a60 Mon Sep 17 00:00:00 2001
From: Hristo Nedelkov <hristo.nedelkow@gmail.com>
Date: Wed, 16 Aug 2023 11:29:21 +0300
Subject: [PATCH] Implement first state of sync status

---
 public/icons/refresh.svg            |  5 +++++
 src/pages/PairDevice/PairDevice.tsx |  5 ++++-
 src/pages/PairDevice/SyncStatus.tsx | 20 ++++++++++++++++++++
 3 files changed, 29 insertions(+), 1 deletion(-)
 create mode 100644 public/icons/refresh.svg
 create mode 100644 src/pages/PairDevice/SyncStatus.tsx

diff --git a/public/icons/refresh.svg b/public/icons/refresh.svg
new file mode 100644
index 00000000..ead09ed3
--- /dev/null
+++ b/public/icons/refresh.svg
@@ -0,0 +1,5 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="20/refresh">
+<path id="body" fill-rule="evenodd" clip-rule="evenodd" d="M12.6404 3.62514C11.2371 3.04387 9.68124 2.94189 8.21407 3.33502C6.7469 3.72814 5.45045 4.59441 4.52578 5.79945C3.60112 7.0045 3.09992 8.48098 3.09992 9.99991C3.09992 11.5188 3.60112 12.9953 4.52578 14.2004C5.45045 15.4054 6.7469 16.2717 8.21407 16.6648C9.68124 17.0579 11.2371 16.9559 12.6404 16.3747C14.0437 15.7934 15.216 14.7653 15.9755 13.4499L17.0147 14.0499C16.1232 15.5941 14.747 16.801 13.0997 17.4833C11.4523 18.1657 9.62582 18.2854 7.90349 17.8239C6.18116 17.3624 4.65923 16.3455 3.57376 14.9309C2.48828 13.5163 1.89992 11.783 1.89992 9.99991C1.89992 8.21682 2.48828 6.48356 3.57376 5.06894C4.65923 3.65432 6.18116 2.6374 7.90349 2.17591C9.62582 1.71441 11.4523 1.83412 13.0997 2.51648C14.166 2.95819 15.1188 3.61967 15.9 4.45017L15.9 2.99978L17.1 2.99979L17.1 6.49979L17.0999 7.09979H16.5L13 7.09979V5.89979L15.5496 5.89979C14.8075 4.89526 13.8033 4.1068 12.6404 3.62514Z" fill="#A1ABBD"/>
+</g>
+</svg>
diff --git a/src/pages/PairDevice/PairDevice.tsx b/src/pages/PairDevice/PairDevice.tsx
index ec0080ab..1b3b06df 100644
--- a/src/pages/PairDevice/PairDevice.tsx
+++ b/src/pages/PairDevice/PairDevice.tsx
@@ -1,5 +1,6 @@
 import { YStack } from 'tamagui'
 import PageWrapperShadow from '../../components/PageWrappers/PageWrapperShadow'
+import SyncStatus from './SyncStatus'
 
 const PairDevice = () => {
   return (
@@ -9,7 +10,9 @@ const PairDevice = () => {
         style={{
           maxWidth: '100%',
         }}
-      ></YStack>
+      >
+        <SyncStatus />
+      </YStack>
     </PageWrapperShadow>
   )
 }
diff --git a/src/pages/PairDevice/SyncStatus.tsx b/src/pages/PairDevice/SyncStatus.tsx
new file mode 100644
index 00000000..f1de75dd
--- /dev/null
+++ b/src/pages/PairDevice/SyncStatus.tsx
@@ -0,0 +1,20 @@
+import { XStack, YStack } from 'tamagui'
+import { Text } from '@status-im/components'
+import Icon from '../../components/General/Icon'
+const SyncStatus = () => {
+  return (
+    <YStack style={{ width: '584px' }}>
+      <XStack space={'$4'} style={{ justifyContent: 'space-between' }}>
+        <Text size={11} color="#647084" weight="medium">
+          Device Sync Status
+        </Text>
+        <Icon src="/icons/refresh.svg" />
+      </XStack>
+      <Text size={13} color="#A1ABBD" >
+        No pairing input provided.
+      </Text>
+    </YStack>
+  )
+}
+
+export default SyncStatus