fix: format dashboard code

This commit is contained in:
RadoslavDimchev 2023-10-19 11:16:37 +03:00
parent ff9c4a03ae
commit d7b941bf12
7 changed files with 12 additions and 16 deletions

View File

@ -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 = {

View File

@ -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,

View File

@ -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"

View File

@ -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' }}>

View File

@ -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} />

View File

@ -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)

View File

@ -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">