From e99066717a73eba07b0f83679093e64c86d3ea44 Mon Sep 17 00:00:00 2001
From: Ivana Andersson <ivana.p.kostova@gmail.com>
Date: Tue, 26 Sep 2023 09:59:54 +0300
Subject: [PATCH 1/3] fix: change some card sizes to fit better on screen

---
 .../ConsensusUptime/ConsensusUptimeCard.tsx         |  5 +++--
 src/pages/Dashboard/Dashboard.tsx                   | 13 ++++++-------
 src/pages/Dashboard/DeviceUptime/DeviceUptime.tsx   |  4 ++--
 .../Dashboard/ExecutionUptime/ExecutionUptime.tsx   |  5 +++--
 4 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/src/pages/Dashboard/ConsensusUptime/ConsensusUptimeCard.tsx b/src/pages/Dashboard/ConsensusUptime/ConsensusUptimeCard.tsx
index 186f63e6..33423f60 100644
--- a/src/pages/Dashboard/ConsensusUptime/ConsensusUptimeCard.tsx
+++ b/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%',
             }}
           >
diff --git a/src/pages/Dashboard/Dashboard.tsx b/src/pages/Dashboard/Dashboard.tsx
index 31ce5816..7da81e40 100644
--- a/src/pages/Dashboard/Dashboard.tsx
+++ b/src/pages/Dashboard/Dashboard.tsx
@@ -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,17 +32,16 @@ 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'} >
-              <XStack space="$4" >
+            <YStack space={'$4'} width={'50%'}>
+              <XStack space="$4">
                 <StorageCard maxStorage={100} storage={82} />
                 <CPUCard load={[12, 31, 3, 2, 24, 98]} />
               </XStack>
diff --git a/src/pages/Dashboard/DeviceUptime/DeviceUptime.tsx b/src/pages/Dashboard/DeviceUptime/DeviceUptime.tsx
index 62cd62fc..e74ab069 100644
--- a/src/pages/Dashboard/DeviceUptime/DeviceUptime.tsx
+++ b/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%',
             }}
           >
diff --git a/src/pages/Dashboard/ExecutionUptime/ExecutionUptime.tsx b/src/pages/Dashboard/ExecutionUptime/ExecutionUptime.tsx
index 8aade023..988f0b16 100644
--- a/src/pages/Dashboard/ExecutionUptime/ExecutionUptime.tsx
+++ b/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%',
             }}
           >

From c86c064583fbc59076bcd91939b294871218ad9a Mon Sep 17 00:00:00 2001
From: Ivana Andersson <ivana.p.kostova@gmail.com>
Date: Tue, 26 Sep 2023 13:41:54 +0300
Subject: [PATCH 2/3] move right sidebar into its own folder

---
 src/pages/Dashboard/Dashboard.tsx             |  2 +-
 .../Dashboard/RightSideBar/RightSidebar.tsx   | 51 +++++++++++++++++++
 src/pages/Dashboard/RightSidebar.tsx          | 17 -------
 3 files changed, 52 insertions(+), 18 deletions(-)
 create mode 100644 src/pages/Dashboard/RightSideBar/RightSidebar.tsx
 delete mode 100644 src/pages/Dashboard/RightSidebar.tsx

diff --git a/src/pages/Dashboard/Dashboard.tsx b/src/pages/Dashboard/Dashboard.tsx
index 7da81e40..8d728ed9 100644
--- a/src/pages/Dashboard/Dashboard.tsx
+++ b/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'
diff --git a/src/pages/Dashboard/RightSideBar/RightSidebar.tsx b/src/pages/Dashboard/RightSideBar/RightSidebar.tsx
new file mode 100644
index 00000000..3457612c
--- /dev/null
+++ b/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
diff --git a/src/pages/Dashboard/RightSidebar.tsx b/src/pages/Dashboard/RightSidebar.tsx
deleted file mode 100644
index c1b5b0ee..00000000
--- a/src/pages/Dashboard/RightSidebar.tsx
+++ /dev/null
@@ -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

From 92f5b84d65d9676aa484dd6c049dfdfa0ac90a6e Mon Sep 17 00:00:00 2001
From: Ivana Andersson <ivana.p.kostova@gmail.com>
Date: Tue, 26 Sep 2023 13:42:30 +0300
Subject: [PATCH 3/3] add validator list item component

---
 .../RightSideBar/ValidatorListItem.tsx        | 44 +++++++++++++++++++
 1 file changed, 44 insertions(+)
 create mode 100644 src/pages/Dashboard/RightSideBar/ValidatorListItem.tsx

diff --git a/src/pages/Dashboard/RightSideBar/ValidatorListItem.tsx b/src/pages/Dashboard/RightSideBar/ValidatorListItem.tsx
new file mode 100644
index 00000000..2534307d
--- /dev/null
+++ b/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