From 4c2206c663db99e7200b05d1e448da030753bd31 Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Sat, 16 Sep 2023 00:49:50 +0300
Subject: [PATCH] feat: create title with logo for dashboard

---
 src/pages/Dashboard/Dashboard.tsx |  8 +++++---
 src/pages/Dashboard/TitleLogo.tsx | 20 ++++++++++++++++++++
 2 files changed, 25 insertions(+), 3 deletions(-)
 create mode 100644 src/pages/Dashboard/TitleLogo.tsx

diff --git a/src/pages/Dashboard/Dashboard.tsx b/src/pages/Dashboard/Dashboard.tsx
index d088c560..ef902dc1 100644
--- a/src/pages/Dashboard/Dashboard.tsx
+++ b/src/pages/Dashboard/Dashboard.tsx
@@ -3,21 +3,23 @@ import { XStack, YStack } from 'tamagui'
 import BasicInfoCards from './BasicInfoCards/BasicInfoCards'
 import AddCardsContainer from '../../components/General/AddCards/AddCardsContainer'
 import SyncStatusCard from './SyncStatusCard/SyncStatusCard'
-import BalanceChardCard from './BalanceLineChart/BalanceChardCard'
+import BalanceChartCard from './BalanceChartCard/BalanceChartCard'
 import CPUCard from './CPULoad/CPUCard'
 import ConsensusUptimeCard from './ConsensusUptime/ConsensusUptimeCard'
 import ExecutionUptime from './ExecutionUptime/ExecutionUptime'
+import TitleLogo from './TitleLogo'
 
 const Dashboard = () => {
   return (
     <YStack space={'$4'} alignItems="start">
+      <TitleLogo />
       <XStack space={'$4'} style={{ width: '100%' }}>
         <XStack space={'$4'}>
           <AddCardsContainer />
           <SyncStatusCard />
         </XStack>
-        <BalanceChardCard />
-        <CPUCard load={[12, 31, 3, 2, 24,]} />
+        <BalanceChartCard />
+        <CPUCard load={[12, 31, 3, 2, 24]} />
       </XStack>
       <BasicInfoCards />
       <ConsensusUptimeCard />
diff --git a/src/pages/Dashboard/TitleLogo.tsx b/src/pages/Dashboard/TitleLogo.tsx
new file mode 100644
index 00000000..98592d3e
--- /dev/null
+++ b/src/pages/Dashboard/TitleLogo.tsx
@@ -0,0 +1,20 @@
+import { Text } from '@status-im/components'
+import { XStack, YStack } from 'tamagui'
+
+const TitleLogo = () => {
+  return (
+    <XStack>
+      {/* <Avatar type="icon" size={80} icon={<img src={'/icons/dashboard-logo.png'} />} /> */}
+      <YStack>
+        <Text size={27} color="#09101C" weight={'semibold'}>
+          Nimbus
+        </Text>
+        <Text size={19} color="#647084">
+          Node Management Dashboard
+        </Text>
+      </YStack>
+    </XStack>
+  )
+}
+
+export default TitleLogo