fix: leave only one component for every page

src/components/ConnectionPage.tsx

@@ -12,19 +12,13 @@ import CreateIcon from './CreateIcon'
 import LabelInputField from './LabelInputField'
 
 function ContentPage() {
+  const [autoConnectChecked, setAutoConnectChecked] = useState(false)
+  const [portChecked, setPortChecked] = useState(false)
+
   return (
     <PageWrapperShadow
       breadcrumbBar={<BreadcrumbBar breadcrumbList={['Nodes', 'Nimbus', 'Connect Device']} />}
     >
-      <Content />
-    </PageWrapperShadow>
-  )
-}
-
-function Content() {
-  const [autoConnectChecked, setAutoConnectChecked] = useState(false)
-  const [portChecked, setPortChecked] = useState(false)
-  return (
       <div className="container-inner connection-page">
         <header>
           <NimbusLogo />
@@ -113,6 +107,8 @@ function Content() {
           <StatusButton icon={<NodeIcon />}>Connect Device</StatusButton>
         </article>
       </div>
+    </PageWrapperShadow>
   )
 }
+
 export default ContentPage

src/components/LandingPage.tsx

@@ -6,15 +6,6 @@ function LandingPage() {
   return (
     <>
       <PageWrapperShadow rightImageSrc="src/assets/bg-img/landing-page-bg.png">
-        <Content />
-      </PageWrapperShadow>
-      <QuickStartBar />
-    </>
-  )
-}
-
-function Content() {
-  return (
         <div className="container-inner landing-page">
           <header>
             <div>
@@ -43,7 +34,12 @@ function Content() {
                   fill="url(#pattern0)"
                 />
                 <defs>
-              <pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
+                  <pattern
+                    id="pattern0"
+                    patternContentUnits="objectBoundingBox"
+                    width="1"
+                    height="1"
+                  >
                     <use
                       xlinkHref="#image0_182_199649"
                       transform="translate(-0.157534) scale(0.00273973)"
@@ -62,8 +58,8 @@ function Content() {
               Welcome, John. This is your complete access to a truly decentralized Web 3.0
             </h2>
             <p className="subtitle">
-          <span>Status Nodes</span> allows you to finally take control and ownership of the services
-          you wish to run in a completely trustless and decentralized manner.
+              <span>Status Nodes</span> allows you to finally take control and ownership of the
+              services you wish to run in a completely trustless and decentralized manner.
             </p>
             <button>
               <span>
@@ -98,6 +94,9 @@ function Content() {
             </button>
           </article>
         </div>
+      </PageWrapperShadow>
+      <QuickStartBar />
+    </>
   )
 }
 

src/pages/DeviceHealthCheck/DeviceHealthCheck.tsx

@@ -13,15 +13,6 @@ import DeviceNetworkHealth from '../../components/DeviceNetworkHealth'
 const DeviceHealthCheck = () => {
   return (
     <PageWrapperShadow rightImageSrc="/background-images/eye-background.png">
-      <DeviceHealthCheckContent />
-    </PageWrapperShadow>
-  )
-}
-
-export default DeviceHealthCheck
-
-const DeviceHealthCheckContent = () => {
-  return (
       <div className="container-inner landing-page">
         <YStack
           space={'$4'}
@@ -63,5 +54,8 @@ const DeviceHealthCheckContent = () => {
           </Stack>
         </YStack>
       </div>
+    </PageWrapperShadow>
   )
 }
+
+export default DeviceHealthCheck