fix: format dashboard code
This commit is contained in:
parent
ff9c4a03ae
commit
d7b941bf12
|
@ -1,5 +1,6 @@
|
||||||
import { useState } from 'react'
|
import { useState } from 'react'
|
||||||
import type { Meta, StoryObj } from '@storybook/react'
|
import type { Meta, StoryObj } from '@storybook/react'
|
||||||
|
|
||||||
import SearchValidatorsInput from './SearchValidatorsInput'
|
import SearchValidatorsInput from './SearchValidatorsInput'
|
||||||
|
|
||||||
const meta = {
|
const meta = {
|
||||||
|
|
|
@ -8,8 +8,8 @@ import DashboardCardWrapper from '../DashboardCardWrapper'
|
||||||
import LineChart from './LineChart'
|
import LineChart from './LineChart'
|
||||||
import Icon from '../../../components/General/Icon'
|
import Icon from '../../../components/General/Icon'
|
||||||
import { years } from '../../../constants'
|
import { years } from '../../../constants'
|
||||||
import './calendar.css'
|
|
||||||
import { getMonthIndicesFromRange } from '../../../utilities'
|
import { getMonthIndicesFromRange } from '../../../utilities'
|
||||||
|
import './calendar.css'
|
||||||
|
|
||||||
const userGains = [
|
const userGains = [
|
||||||
10000, 15000, 17500, 20000, 19000, 23222, 25000, 20000, 20000, 21000, 22300, 21000,
|
10000, 15000, 17500, 20000, 19000, 23222, 25000, 20000, 20000, 21000, 22300, 21000,
|
||||||
|
|
|
@ -6,6 +6,7 @@ import Icon from '../../../components/General/Icon'
|
||||||
|
|
||||||
const ConsensusUptimeCard = () => {
|
const ConsensusUptimeCard = () => {
|
||||||
const monthlyActivity = [3, 0, 5, 4, 6, 7, 8, 9, 10, 1, 2, 3]
|
const monthlyActivity = [3, 0, 5, 4, 6, 7, 8, 9, 10, 1, 2, 3]
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Shadow
|
<Shadow
|
||||||
variant="$2"
|
variant="$2"
|
||||||
|
|
|
@ -1,8 +1,8 @@
|
||||||
import { XStack } from 'tamagui'
|
import { XStack } from 'tamagui'
|
||||||
|
|
||||||
import LeftSidebar from '../../components/General/LeftSidebar/LeftSidebar'
|
import LeftSidebar from '../../components/General/LeftSidebar/LeftSidebar'
|
||||||
import DashboardContent from './DashboardContent'
|
|
||||||
import RightSidebar from '../../components/General/RightSideBar/RightSidebar'
|
import RightSidebar from '../../components/General/RightSideBar/RightSidebar'
|
||||||
|
import DashboardContent from './DashboardContent'
|
||||||
|
|
||||||
const Dashboard = () => (
|
const Dashboard = () => (
|
||||||
<XStack style={{ height: '100vh' }}>
|
<XStack style={{ height: '100vh' }}>
|
||||||
|
|
|
@ -1,4 +1,5 @@
|
||||||
import { Stack, XStack, YStack } from 'tamagui'
|
import { Stack, XStack, YStack } from 'tamagui'
|
||||||
|
import { useEffect, useState } from 'react'
|
||||||
|
|
||||||
import BasicInfoCards from './BasicInfoCards/BasicInfoCards'
|
import BasicInfoCards from './BasicInfoCards/BasicInfoCards'
|
||||||
import AddCardsContainer from '../../components/General/AddCards/AddCardsContainer'
|
import AddCardsContainer from '../../components/General/AddCards/AddCardsContainer'
|
||||||
|
@ -12,7 +13,7 @@ import StorageCard from './StorageCard/StorageCard'
|
||||||
import NetworkCard from './NetworkCard/NetworkCard'
|
import NetworkCard from './NetworkCard/NetworkCard'
|
||||||
import SyncStatusCard from './SyncStatusCards/SyncStatusCards'
|
import SyncStatusCard from './SyncStatusCards/SyncStatusCards'
|
||||||
import MemoryCard from './MemoryCard/MemoryCard'
|
import MemoryCard from './MemoryCard/MemoryCard'
|
||||||
import { useEffect, useState } from 'react'
|
|
||||||
const DashboardContent = () => {
|
const DashboardContent = () => {
|
||||||
const [windowWidth, setWindowWidth] = useState(window.innerWidth)
|
const [windowWidth, setWindowWidth] = useState(window.innerWidth)
|
||||||
|
|
||||||
|
@ -26,21 +27,21 @@ const DashboardContent = () => {
|
||||||
window.removeEventListener('resize', handleResize)
|
window.removeEventListener('resize', handleResize)
|
||||||
}
|
}
|
||||||
}, [])
|
}, [])
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<YStack
|
<YStack
|
||||||
space="$4"
|
space="$4"
|
||||||
alignItems="start"
|
alignItems="start"
|
||||||
px="24px"
|
px="24px"
|
||||||
|
minWidth="500px"
|
||||||
|
width="50vh"
|
||||||
style={{
|
style={{
|
||||||
flexGrow: '1',
|
flexGrow: '1',
|
||||||
marginTop: '16px',
|
marginTop: '16px',
|
||||||
overflowY: 'auto',
|
overflowY: 'auto',
|
||||||
}}
|
}}
|
||||||
minWidth="500px"
|
|
||||||
width="50vh"
|
|
||||||
>
|
>
|
||||||
<TitleLogo />
|
<TitleLogo />
|
||||||
|
|
||||||
<Stack
|
<Stack
|
||||||
style={{
|
style={{
|
||||||
display: 'grid',
|
display: 'grid',
|
||||||
|
@ -50,12 +51,9 @@ const DashboardContent = () => {
|
||||||
>
|
>
|
||||||
<SyncStatusCard />
|
<SyncStatusCard />
|
||||||
<AddCardsContainer />
|
<AddCardsContainer />
|
||||||
|
|
||||||
<BalanceChartCard />
|
<BalanceChartCard />
|
||||||
</Stack>
|
</Stack>
|
||||||
|
|
||||||
<BasicInfoCards />
|
<BasicInfoCards />
|
||||||
|
|
||||||
<XStack space="$3" flexWrap="wrap">
|
<XStack space="$3" flexWrap="wrap">
|
||||||
<YStack space="$4">
|
<YStack space="$4">
|
||||||
<XStack justifyContent="space-between">
|
<XStack justifyContent="space-between">
|
||||||
|
@ -64,7 +62,6 @@ const DashboardContent = () => {
|
||||||
</XStack>
|
</XStack>
|
||||||
<DeviceUptime />
|
<DeviceUptime />
|
||||||
</YStack>
|
</YStack>
|
||||||
|
|
||||||
<YStack space="$4" flexWrap="wrap">
|
<YStack space="$4" flexWrap="wrap">
|
||||||
<XStack space="$4">
|
<XStack space="$4">
|
||||||
<StorageCard maxStorage={100} storage={82} />
|
<StorageCard maxStorage={100} storage={82} />
|
||||||
|
|
|
@ -3,10 +3,10 @@ import { Stack, XStack, YStack } from 'tamagui'
|
||||||
import { DateRange } from 'react-day-picker'
|
import { DateRange } from 'react-day-picker'
|
||||||
import { useState } from 'react'
|
import { useState } from 'react'
|
||||||
|
|
||||||
import UptimeChart from '../UptimeChart/UptimeChart'
|
|
||||||
import Icon from '../../../components/General/Icon'
|
import Icon from '../../../components/General/Icon'
|
||||||
import { getMonthIndicesFromRange } from '../../../utilities'
|
import UptimeChart from '../UptimeChart/UptimeChart'
|
||||||
import DashboardCardWrapper from '../DashboardCardWrapper'
|
import DashboardCardWrapper from '../DashboardCardWrapper'
|
||||||
|
import { getMonthIndicesFromRange } from '../../../utilities'
|
||||||
|
|
||||||
const DeviceUptime = () => {
|
const DeviceUptime = () => {
|
||||||
const [isCalendarVisible, setIsCalendarVisible] = useState(false)
|
const [isCalendarVisible, setIsCalendarVisible] = useState(false)
|
||||||
|
|
|
@ -1,11 +1,9 @@
|
||||||
import { Separator, Stack, XStack, YStack } from 'tamagui'
|
import { Separator, Stack, XStack, YStack } from 'tamagui'
|
||||||
import { Shadow, Text } from '@status-im/components'
|
import { Shadow, Text } from '@status-im/components'
|
||||||
import { SwapIcon } from '@status-im/icons'
|
import { SwapIcon } from '@status-im/icons'
|
||||||
import { CSSProperties } from 'react'
|
|
||||||
|
|
||||||
import { formatNumbersWithComa } from '../../../utilities'
|
import { formatNumbersWithComa } from '../../../utilities'
|
||||||
import IconText from '../../../components/General/IconText'
|
import IconText from '../../../components/General/IconText'
|
||||||
|
|
||||||
import StandardGauge from '../../../components/Charts/StandardGauge'
|
import StandardGauge from '../../../components/Charts/StandardGauge'
|
||||||
|
|
||||||
type ExecutionClientCardProps = {
|
type ExecutionClientCardProps = {
|
||||||
|
@ -28,10 +26,9 @@ const ExecutionClientCard = ({ value, total }: ExecutionClientCardProps) => {
|
||||||
color: '#E7EAEE',
|
color: '#E7EAEE',
|
||||||
},
|
},
|
||||||
]
|
]
|
||||||
const style: CSSProperties = {}
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Shadow variant="$1" style={style}>
|
<Shadow variant="$1">
|
||||||
<YStack>
|
<YStack>
|
||||||
<Stack style={{ minHeight: '90px', padding: '12px 16px' }}>
|
<Stack style={{ minHeight: '90px', padding: '12px 16px' }}>
|
||||||
<Text size={15} weight={'semibold'} color="#647084">
|
<Text size={15} weight={'semibold'} color="#647084">
|
||||||
|
|
Loading…
Reference in New Issue