fix(paired-device-card): main container, alignment and spacing

src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusClient/PairedDeviceCard.tsx

@@ -1,24 +1,19 @@
 import { XStack, YStack } from 'tamagui'
 import { InfoBadgeIcon } from '@status-im/icons'
 import { Avatar, Text } from '@status-im/components'
-import { useWindowSize } from '../../../../hooks/useWindowSize'
+
+import BorderBox from '../../../../components/General/BorderBox'
 
 const PairedDeviceCard = () => {
-  const windowSize = useWindowSize()
   return (
-    <XStack
+    <BorderBox
-      space={'$7'}
       style={{
-        padding: '6px 12px',
+        borderRadius: '10.1px',
-        border: '1px solid #DCE0E5',
+        borderWidth: '0.5px',
-        borderRadius: '10px',
+        flex: '1',
-        marginBottom: '20px',
-        width: windowSize.width < 580 ? '100%' : 'auto',
       }}
-      justifyContent="space-between"
-      alignItems={'center'}
     >
-      <XStack space={'$3'}>
+      <XStack space={'$2'} alignItems="center" justifyContent={'space-between'}>
         <Avatar
           backgroundColor="pink"
           type="icon"
@@ -33,9 +28,9 @@ const PairedDeviceCard = () => {
             Stake & Chips
           </Text>
         </YStack>
+        <InfoBadgeIcon size={20} color="#A1ABBD" cursor={'pointer'} />
       </XStack>
-      <InfoBadgeIcon size={20} color="#A1ABBD" cursor={'pointer'} />
+    </BorderBox>
-    </XStack>
   )
 }