From bac19a911cbb1379b7357741b3be7985aa8dafc3 Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Thu, 28 Mar 2024 21:35:26 +0200
Subject: [PATCH] feat(pages-with-sidebars): add wrapper and remove sidebars

---
 src/pages/DeviceHealthCheck/DeviceHealthCheck.tsx | 11 ++++-------
 src/pages/LogsPage/LogsPage.tsx                   | 15 +++++----------
 src/pages/ManageValidator/ManageValidator.tsx     |  7 +++----
 .../ValidatorManagement/ValidatorManagement.tsx   | 13 ++++---------
 4 files changed, 16 insertions(+), 30 deletions(-)

diff --git a/src/pages/DeviceHealthCheck/DeviceHealthCheck.tsx b/src/pages/DeviceHealthCheck/DeviceHealthCheck.tsx
index 21659e61..2ff024b9 100644
--- a/src/pages/DeviceHealthCheck/DeviceHealthCheck.tsx
+++ b/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>
   )
 }
 
diff --git a/src/pages/LogsPage/LogsPage.tsx b/src/pages/LogsPage/LogsPage.tsx
index 1a7c32ab..ebf26ba0 100644
--- a/src/pages/LogsPage/LogsPage.tsx
+++ b/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>
   )
 }
 
diff --git a/src/pages/ManageValidator/ManageValidator.tsx b/src/pages/ManageValidator/ManageValidator.tsx
index 0e758c59..4348808e 100644
--- a/src/pages/ManageValidator/ManageValidator.tsx
+++ b/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>
   )
 }
 
diff --git a/src/pages/ValidatorManagement/ValidatorManagement.tsx b/src/pages/ValidatorManagement/ValidatorManagement.tsx
index e41cc51c..a59a19b7 100644
--- a/src/pages/ValidatorManagement/ValidatorManagement.tsx
+++ b/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>
   )
 }