fix: add children instead of content for page wrapper

src/components/ConnectionPage.tsx

@@ -2,7 +2,7 @@ import { useState } from 'react'
 import BreadcrumbBar from './BreadcrumbBar'
 import { Button as StatusButton, Tag, Text, Avatar, Checkbox } from '@status-im/components'
 import { Label, Separator, XStack, YStack } from 'tamagui'
-import LayoutComponent from './PageWrapperShadow'
+import PageWrapperShadow from './PageWrapperShadow'
 import NimbusLogo from './NimbusLogo'
 import Titles from './Titles'
 import NodeIcon from './NodeIcon'
@@ -13,10 +13,11 @@ import LabelInputField from './LabelInputField'
 
 function ContentPage() {
   return (
-    <LayoutComponent
+    <PageWrapperShadow
       breadcrumbBar={<BreadcrumbBar breadcrumbList={['Nodes', 'Nimbus', 'Connect Device']} />}
-      content={<Content />}
+    >
-    />
+      <Content />
+    </PageWrapperShadow>
   )
 }
 

src/components/LandingPage.tsx

@@ -1,14 +1,13 @@
-import LayoutComponent from './PageWrapperShadow'
+import PageWrapperShadow from './PageWrapperShadow'
 import './LandingPage.css'
 import QuickStartBar from './QuickStartBar'
 
 function LandingPage() {
   return (
     <>
-      <LayoutComponent
+      <PageWrapperShadow rightImageSrc="src/assets/bg-img/landing-page-bg.png">
-        content={<Content />}
+        <Content />
-        rightImageSrc="src/assets/bg-img/landing-page-bg.png"
+      </PageWrapperShadow>
-      />
       <QuickStartBar />
     </>
   )

src/components/PageWrapperShadow.tsx

@@ -3,16 +3,16 @@ import './layout.css'
 
 type PageWrapperShadowProps = {
   breadcrumbBar?: ReactNode
-  content: ReactNode
   rightImageSrc?: string
+  children: ReactNode
 }
 
-const PageWrapperShadow = ({ breadcrumbBar, content, rightImageSrc }: PageWrapperShadowProps) => {
+const PageWrapperShadow = ({ breadcrumbBar, rightImageSrc, children }: PageWrapperShadowProps) => {
   return (
     <div className="layout">
       <section className="layout-left">
         {breadcrumbBar}
-        <div className="container">{content}</div>
+        <div className="container">{children}</div>
       </section>
       <section className="layout-right">
         <div className="image-container">

src/pages/DeviceHealthCheck/DeviceHealthCheck.tsx

@@ -1,5 +1,5 @@
 import { Stack, XStack, YStack } from 'tamagui'
-import LayoutComponent from '../../components/PageWrapperShadow'
+import PageWrapperShadow from '../../components/PageWrapperShadow'
 import NimbusLogo from '../../components/NimbusLogo'
 import Titles from '../../components/Titles'
 import DeviceStorageHealth from '../../components/DeviceStorageHealth'
@@ -12,10 +12,9 @@ import DeviceNetworkHealth from '../../components/DeviceNetworkHealth'
 
 const DeviceHealthCheck = () => {
   return (
-    <LayoutComponent
+    <PageWrapperShadow rightImageSrc="/background-images/eye-background.png">
-      content={<DeviceHealthCheckContent />}
+      <DeviceHealthCheckContent />
-      rightImageSrc="/background-images/eye-background.png"
+    </PageWrapperShadow>
-    />
   )
 }