Merge branch 'rd-hn.create-pair-device-page' of https://github.com/nimbus-gui/nimbus-gui into rd-hn.create-pair-device-page

src/pages/PairDevice/PairDevice.tsx

@@ -6,8 +6,11 @@ import { Button, Checkbox, Tag, Text } from '@status-im/components'
 import PairIcon from '../../components/Icons/PairIcon'
 import CreateIcon from '../../components/Icons/CreateIcon'
 import NodeIcon from '../../components/Icons/NodeIcon'
+import Titles from '../../components/General/Titles'
 
 const PairDevice = () => {
+  const isPaired = false
+
   return (
     <PageWrapperShadow rightImageSrc="/background-images/day-night-bg.png">
       <YStack
@@ -23,6 +26,7 @@ const PairDevice = () => {
             <Tag icon={CreateIcon} label="Create" size={32} />
           </XStack>
         </XStack>
+        <Titles title="Pair Device" subtitle="Pair your device to the Nimbus Node Manager" />
         <Separator borderColor={'#e3e3e3'} />
         <SyncStatus isPairing={true} timer={'00:12'} isAwaitingPairing={true} />
         <Separator borderColor={'#e3e3e3'} />
@@ -43,7 +47,9 @@ const PairDevice = () => {
         </XStack>
         <Separator borderColor={'#e3e3e3'} />
         <XStack>
-          <Button icon={<NodeIcon />}>Continue</Button>
+          <Button icon={<NodeIcon />} disabled={!isPaired}>
+            Continue
+          </Button>
         </XStack>
       </YStack>
     </PageWrapperShadow>

src/pages/PairDevice/SyncStatus.tsx

@@ -1,15 +1,17 @@
-import { Stack, XStack, YStack } from 'tamagui'
+import { XStack, YStack } from 'tamagui'
 import { Button, InformationBox, Text } from '@status-im/components'
 import Icon from '../../components/General/Icon'
 import RefreshBlackIcon from '/icons/refresh-black.svg'
 import RefreshIcon from '/icons/refresh.svg'
 import BlockIcon from '/icons/block.svg'
 import ConnectionIcon from '/icons/connection.svg'
+
 type SyncStatusProps = {
   isPairing: boolean
   timer: string
   isAwaitingPairing?: boolean
 }
+
 const SyncStatus = ({ isPairing, timer, isAwaitingPairing }: SyncStatusProps) => {
   return (
     <YStack space={'$2'}>