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

src/pages/Dashboard/ConsensusUptime/ConsensusUptimeCard.tsx

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

src/pages/Dashboard/Dashboard.tsx

@@ -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'} justifyContent={'space-between'} width={'100%'}>
-            <XStack space={'$4'}>
+            <XStack space={'$4'} width={'50%'}>
               <SyncStatusCard />
               <AddCardsContainer />
             </XStack>
@@ -32,15 +32,15 @@ const Dashboard = () => {
           </XStack>
           <BasicInfoCards />
 
-          <XStack space="$3">
+          <XStack space="$3" width={'100%'}>
-            <YStack space={'$4'}>
+            <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]} />

src/pages/Dashboard/DeviceUptime/DeviceUptime.tsx

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

src/pages/Dashboard/ExecutionUptime/ExecutionUptime.tsx

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

src/pages/Dashboard/RightSideBar/RightSidebar.tsx

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

src/pages/Dashboard/RightSideBar/ValidatorListItem.tsx

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

src/pages/Dashboard/RightSidebar.tsx

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