status-im
/
nimbus-gui
mirror of https://github.com/status-im/nimbus-gui.git
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'Create-Dashboard' of https://github.com/nimbus-gui/nimbus-gui into Create-Dashboard

This commit is contained in:
Hristo Nedelkov 2023-09-26 13:45:55 +03:00
parent eafe7841b5 fb9682755c
commit c912c12384
7 changed files with 109 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/pages/Dashboard/ConsensusUptime/ConsensusUptimeCard.tsx
View File

@ -47,9 +47,10 @@ const ConsensusUptimeCard = () => {
variant="$2"
style={{
borderRadius: '16px',
width: '48%',
}}
>
<YStack space={'$3'} width={'260px'} height={'156px'} padding={'$3'}>
<YStack space={'$3'} width={'100%'} minHeight={'156px'} padding={'$3'}>
<YStack>
<Text size={15} weight={'semibold'}>
Consensus Uptime
@ -70,7 +71,7 @@ const ConsensusUptimeCard = () => {
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
width: '228px',
width: '100%',
height: '100%',
}}
>

12
src/pages/Dashboard/Dashboard.tsx
View File

@ -1,7 +1,7 @@
import { XStack, YStack } from 'tamagui'
import LeftSidebar from './LeftSidebar'
import RightSidebar from './RightSidebar'
import RightSidebar from './RightSideBar/RightSidebar'
import BasicInfoCards from './BasicInfoCards/BasicInfoCards'
import AddCardsContainer from '../../components/General/AddCards/AddCardsContainer'
import BalanceChartCard from './BalanceChartCard/BalanceChartCard'
@ -23,8 +23,8 @@ const Dashboard = () => {
<YStack space={'$4'} alignItems="start" px="24px" style={{ flexGrow: '1' }}>
<TitleLogo />
<XStack space={'$4'} justifyContent={'space-between'}>
<XStack space={'$4'}>
<XStack space={'$4'} justifyContent={'space-between'} width={'100%'}>
<XStack space={'$4'} width={'50%'}>
<SyncStatusCard />
<AddCardsContainer />
</XStack>
@ -32,15 +32,15 @@ const Dashboard = () => {
</XStack>
<BasicInfoCards />
<XStack space="$3">
<YStack space={'$4'}>
<XStack space="$3" width={'100%'}>
<YStack space={'$4'} width={'50%'}>
<XStack justifyContent="space-between">
<ConsensusUptimeCard />
<ExecutionUptime />
</XStack>
<DeviceUptime />
</YStack>
<YStack space={'$4'}>
<YStack space={'$4'} width={'50%'}>
<XStack space="$4">
<StorageCard maxStorage={100} storage={82} />
<CPUCard load={[12, 31, 3, 2, 24, 98]} />

4
src/pages/Dashboard/DeviceUptime/DeviceUptime.tsx
View File

@ -103,7 +103,7 @@ const DeviceUptime = () => {
borderRadius: '16px',
}}
>
<YStack space={'$3'} width={'560px'} height={'156px'} padding={'$3'}>
<YStack space={'$3'} width={'100%'} minHeight={'156px'} padding={'$3'}>
<XStack justifyContent={'space-between'}>
<YStack>
<Text size={15} weight={'semibold'}>
@ -160,7 +160,7 @@ const DeviceUptime = () => {
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
width: '504px',
width: '100%',
height: '100%',
}}
>

5
src/pages/Dashboard/ExecutionUptime/ExecutionUptime.tsx
View File

@ -48,9 +48,10 @@ const ExecutionUptime = () => {
variant="$2"
style={{
borderRadius: '16px',
width: '48%',
}}
>
<YStack space={'$3'} width={'260px'} height={'156px'} padding={'$3'}>
<YStack space={'$3'} width={'100%'} minHeight={'156px'} padding={'$3'}>
<YStack>
<Text size={15} weight={'semibold'}>
Execution Uptime
@ -71,7 +72,7 @@ const ExecutionUptime = () => {
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
width: '228px',
width: '100%',
height: '100%',
}}
>

51
src/pages/Dashboard/RightSideBar/RightSidebar.tsx Normal file
View File

@ -0,0 +1,51 @@
import { Avatar, Tabs, Text } from '@status-im/components'
import { XStack, YStack } from 'tamagui'
import ValidatorListItem from './ValidatorListItem'
// import { NodeIcon } from '@status-im/icons'
const RightSidebar = () => {
return (
<YStack
space={'$4'}
minHeight={'100vh'}
background={'#FFF'}
style={{ padding: '8px', border: '1px solid #F0F2F5' }}
>
<XStack alignItems="center">
<Avatar type="user" size={32} name="Etherium Mainnet" />
<YStack pl="8px">
<Text size={15} weight={'semibold'}>
Etherium Mainnet
</Text>
<Text size={13}>0xb9d...c35</Text>
</YStack>
</XStack>
<Tabs defaultValue="active">
<Tabs.List size={32}>
<Tabs.Trigger type="default" value="active">
Active
</Tabs.Trigger>
<Tabs.Trigger type="default" value="pending">
Pending
</Tabs.Trigger>
<Tabs.Trigger type="default" value="inactive">
Inactive
</Tabs.Trigger>
</Tabs.List>
<Tabs.Content value="active">
<YStack>
<ValidatorListItem />
<ValidatorListItem />
<ValidatorListItem />
<ValidatorListItem />
</YStack>
</Tabs.Content>
<Tabs.Content value="pending"></Tabs.Content>
<Tabs.Content value="inactive"></Tabs.Content>
</Tabs>
</YStack>
)
}
export default RightSidebar

44
src/pages/Dashboard/RightSideBar/ValidatorListItem.tsx Normal file
View File

@ -0,0 +1,44 @@
import { XStack, YStack } from 'tamagui'
import { Avatar, Checkbox, Text } from '@status-im/components'
import { VerifiedIcon, ContactIcon } from '@status-im/icons'
const ValidatorListItem = () => {
return (
<XStack
justifyContent="space-between"
alignItems="center"
style={{
padding: '6px 8px',
borderRadius: '12px',
backgroundColor: 'rgba(42, 74, 245, 0.05);',
}}
>
<XStack alignItems="center">
<Avatar
type="user"
size={32}
name="1"
backgroundColor="$red-50"
colorHash={[
[3, 30],
[2, 10],
[4, 0],
[5, 28],
[4, 13],
[4, 15],
]}
/>
<YStack pl="8px">
<Text size={13} weight={'semibold'}>
Validator 1
<VerifiedIcon size={20} /> <ContactIcon size={20} />
</Text>
<Text size={13}>Validator 1</Text>
</YStack>
</XStack>
<Checkbox id="" variant="outline" size={20} selected />
</XStack>
)
}
export default ValidatorListItem

17
src/pages/Dashboard/RightSidebar.tsx
View File

@ -1,17 +0,0 @@
import { SidebarMembers } from '@status-im/components'
import { YStack } from 'tamagui'
const RightSidebar = () => {
return (
<YStack
space={'$4'}
minHeight={'100vh'}
background={'#FFF'}
style={{ padding: '8px', border: '1px solid #F0F2F5' }}
>
<SidebarMembers />
</YStack>
)
}
export default RightSidebar