mirror of
https://github.com/status-im/nimbus-gui.git
synced 2025-02-11 02:46:25 +00:00
make HealthCheck responsive
This commit is contained in:
parent
2348d4eb68
commit
c4eb0c1900
@ -11,9 +11,30 @@ import DeviceNetworkHealth from '../../components/Charts/DeviceNetworkHealth'
|
||||
import { CloseCircleIcon } from '@status-im/icons'
|
||||
import { useSelector } from 'react-redux'
|
||||
import { RootState } from '../../redux/store'
|
||||
import { useEffect, useState } from 'react'
|
||||
|
||||
const DeviceHealthCheck = () => {
|
||||
const deviceHealthState = useSelector((state: RootState) => state.deviceHealth)
|
||||
const [windowWidth, setWindowWidth] = useState(window.innerWidth)
|
||||
|
||||
useEffect(() => {
|
||||
const handleResize = () => {
|
||||
setWindowWidth(window.innerWidth)
|
||||
}
|
||||
|
||||
window.addEventListener('resize', handleResize)
|
||||
|
||||
// Cleanup listener on component unmount
|
||||
return () => window.removeEventListener('resize', handleResize)
|
||||
}, [])
|
||||
const breakpoint = 768
|
||||
|
||||
const responsiveStyle = {
|
||||
flexWrap: windowWidth <= breakpoint ? 'wrap' : 'nowrap',
|
||||
flexDirection: windowWidth <= breakpoint ? 'column' : 'row',
|
||||
alignItems: 'flex-start',
|
||||
width: windowWidth <= breakpoint ? '200%' : '100%',
|
||||
}
|
||||
|
||||
return (
|
||||
<PageWrapperShadow rightImageSrc="./background-images/eye-background.png" imgHeight="100%">
|
||||
@ -33,14 +54,14 @@ const DeviceHealthCheck = () => {
|
||||
subtitle="Configure your device to start Staking on Nimbus"
|
||||
isAdvancedSettings={true}
|
||||
/>
|
||||
<XStack space={'$4'} width={'100%'}>
|
||||
<XStack space={'$4'} style={responsiveStyle}>
|
||||
<DeviceStorageHealth
|
||||
storage={deviceHealthState.storage}
|
||||
maxStorage={deviceHealthState.maxMemory}
|
||||
/>
|
||||
<DeviceCPULoad load={deviceHealthState.cpuLoad} />
|
||||
</XStack>
|
||||
<XStack space={'$4'} width={'100%'}>
|
||||
<XStack space={'$4'} style={responsiveStyle}>
|
||||
<DeviceMemory
|
||||
currentMemory={deviceHealthState.memory}
|
||||
maxMemory={deviceHealthState.maxMemory}
|
||||
|
Loading…
x
Reference in New Issue
Block a user