feat(pages-with-sidebars): add wrapper and remove sidebars

src/pages/DeviceHealthCheck/DeviceHealthCheck.tsx

@@ -1,5 +1,5 @@
 import { useSelector } from 'react-redux'
-import { XStack, YStack } from 'tamagui'
+import { YStack } from 'tamagui'
 import { CloseCircleIcon } from '@status-im/icons'
 import { InformationBox } from '@status-im/components'
 
@@ -10,9 +10,8 @@ import DeviceMemory from '../../components/Charts/DeviceMemoryHealth'
 import DeviceNetworkHealth from '../../components/Charts/DeviceNetworkHealth'
 import { RootState } from '../../redux/store'
 import TitleLogo from '../../components/General/TitleLogo'
-import RightSidebar from '../../components/General/RightSideBar/RightSidebar'
-import LeftSidebar from '../../components/General/LeftSidebar/LeftSidebar'
 import styles from './deviceHealthCheck.module.css'
+import SidebarsWrapper from '../../components/PageWrappers/SidebarsWrapper'
 
 const DeviceHealthCheck = () => {
   const deviceHealthState = useSelector(
@@ -20,8 +19,7 @@ const DeviceHealthCheck = () => {
   )
 
   return (
-    <XStack style={{ height: '100vh' }}>
-      <LeftSidebar />
+    <SidebarsWrapper>
       <YStack
         space={'$4'}
         alignItems="flex-start"
@@ -59,8 +57,7 @@ const DeviceHealthCheck = () => {
           message="The information provided in the Nodes Health Check is meant to utilized as a guide to guage the readiness of your device, however please do your own due diligence prior to commiting any funds. Read our Health Check Disclosure for more information."
         />
       </YStack>
-      <RightSidebar />
-    </XStack>
+    </SidebarsWrapper>
   )
 }
 

src/pages/LogsPage/LogsPage.tsx

@@ -1,19 +1,16 @@
 import { Stack, XStack, YStack } from 'tamagui'
+import { useSelector } from 'react-redux'
+import { useState } from 'react'
 
-import LeftSidebar from '../../components/General/LeftSidebar/LeftSidebar'
-import RightSidebar from '../../components/General/RightSideBar/RightSidebar'
 import LogsTerminal from './LogsTerminal'
 import LogsSumCard from './LogsSumCard'
 import SupportCard from './SupportCard'
-import { useState } from 'react'
 import HeaderBtns from './HeaderBtns'
 import TitleLogo from '../../components/General/TitleLogo'
-import { useWindowSize } from '../../hooks/useWindowSize'
-import { useSelector } from 'react-redux'
+import SidebarsWrapper from '../../components/PageWrappers/SidebarsWrapper'
 import { RootState } from '../../redux/store'
 
 const LogsPage = () => {
-  const windowSize = useWindowSize()
   const [highLightSearched, setHighLightSearched] = useState(false)
   const [searchInput, setSearchInput] = useState('')
   const [timestamps, setTimestamps] = useState(true)
@@ -25,8 +22,7 @@ const LogsPage = () => {
   }
 
   return (
-    <XStack style={{ height: '100vh' }}>
-      <LeftSidebar />
+    <SidebarsWrapper>
       <YStack
         space="$4"
         alignItems="flex-start"
@@ -100,8 +96,7 @@ const LogsPage = () => {
           </Stack>
         </Stack>
       </YStack>
-      {windowSize.width > 900 && <RightSidebar />}
-    </XStack>
+    </SidebarsWrapper>
   )
 }
 

src/pages/ManageValidator/ManageValidator.tsx

@@ -1,13 +1,12 @@
 import { XStack } from 'tamagui'
 import { Outlet } from 'react-router-dom'
 
-import LeftSidebar from '../../components/General/LeftSidebar/LeftSidebar'
 import LeftManage from './LeftManage/LeftManage'
+import SidebarsWrapper from '../../components/PageWrappers/SidebarsWrapper'
 
 const ManageValidator = () => {
   return (
-    <XStack style={{ height: '100vh' }}>
-      <LeftSidebar />
+    <SidebarsWrapper isNotRightSideBar={true}>
       <XStack
         width={'min-content'}
         alignItems="flex-start"
@@ -20,7 +19,7 @@ const ManageValidator = () => {
           <Outlet />
         </div>
       </XStack>
-    </XStack>
+    </SidebarsWrapper>
   )
 }
 

src/pages/ValidatorManagement/ValidatorManagement.tsx

@@ -1,18 +1,16 @@
 import { Text } from '@status-im/components'
-import { XStack, YStack } from 'tamagui'
+import { YStack } from 'tamagui'
 
-import LeftSidebar from '../../components/General/LeftSidebar/LeftSidebar'
-import RightSidebar from '../../components/General/RightSideBar/RightSidebar'
 import ManagementTabs from './ManagementTabs'
 import AddCardsContainer from '../../components/General/AddCards/AddCardsContainer'
 import ManagementHeader from './ManagementHeader'
 import ManagementCard from './ManagementCard'
 import styles from './validatorManagement.module.css'
+import SidebarsWrapper from '../../components/PageWrappers/SidebarsWrapper'
 
 const ValidatorManagement = () => {
   return (
-    <XStack style={{ height: '100vh' }}>
-      <LeftSidebar />
+    <SidebarsWrapper>
       <YStack
         space="$4"
         alignItems="flex-start"
@@ -43,10 +41,7 @@ const ValidatorManagement = () => {
         </Text>
         <ManagementTabs />
       </YStack>
-      <div className={styles['right-sidebar-wrapper']}>
-        <RightSidebar />
-      </div>
-    </XStack>
+    </SidebarsWrapper>
   )
 }