From e08fab7a80291ce02697da12154f01f67495dbbf Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Sat, 20 Apr 2024 16:59:33 +0300
Subject: [PATCH] fix(dashboard-card-wrapper): pass style instead of style
 props

---
 .../General/AddCards/AddCardsContainer.tsx    |  2 +-
 .../ActiveValidators/ActiveValidators.tsx     |  6 ++++-
 .../BalanceChartCard/BalanceChartCard.tsx     |  4 +++-
 src/pages/Dashboard/CPULoad/CPUCard.tsx       |  4 +---
 .../ConnectedPeers/ConnectedPeers.tsx         |  4 +++-
 src/pages/Dashboard/Dashboard.tsx             |  2 +-
 src/pages/Dashboard/DashboardCardWrapper.tsx  | 24 +++++--------------
 .../Dashboard/DeviceUptime/DeviceUptime.tsx   |  2 +-
 src/pages/Dashboard/MemoryCard/MemoryCard.tsx |  4 +---
 .../Dashboard/NetworkCard/NetworkCard.tsx     |  8 ++++---
 .../Dashboard/StorageCard/StorageCard.tsx     |  4 +---
 .../SyncStatusCards/SyncStatusCards.tsx       |  4 +++-
 12 files changed, 31 insertions(+), 37 deletions(-)

diff --git a/src/components/General/AddCards/AddCardsContainer.tsx b/src/components/General/AddCards/AddCardsContainer.tsx
index e7d0468a..06c18639 100644
--- a/src/components/General/AddCards/AddCardsContainer.tsx
+++ b/src/components/General/AddCards/AddCardsContainer.tsx
@@ -10,7 +10,7 @@ type AddCardsContainerProps = {
 
 const AddCardsContainer = ({ cardsAmount }: AddCardsContainerProps) => {
   return (
-    <DashboardCardWrapper padding="0" minWidth="50px">
+    <DashboardCardWrapper style={{ padding: 0, minWidth: '50px' }}>
       <YStack height={'100%'}>
         {Array.from({ length: cardsAmount }).map((_, index) => (
           <AddCard
diff --git a/src/pages/Dashboard/ActiveValidators/ActiveValidators.tsx b/src/pages/Dashboard/ActiveValidators/ActiveValidators.tsx
index f5bc0372..55f6a821 100644
--- a/src/pages/Dashboard/ActiveValidators/ActiveValidators.tsx
+++ b/src/pages/Dashboard/ActiveValidators/ActiveValidators.tsx
@@ -3,12 +3,16 @@ import { Separator, Stack, XStack, YStack } from 'tamagui'
 
 import DashboardCardWrapper from '../DashboardCardWrapper'
 import Icon from '../../../components/General/Icon'
+
 type ActiveValidatorsProps = {
   count: number
 }
+
 const ActiveValidators = ({ count }: ActiveValidatorsProps) => {
   return (
-    <DashboardCardWrapper padding="0" height="156px" minWidth="250px">
+    <DashboardCardWrapper
+      style={{ padding: 0, height: '156px', minWidth: '250px' }}
+    >
       <img
         src="/images/validators-count.png"
         alt=""
diff --git a/src/pages/Dashboard/BalanceChartCard/BalanceChartCard.tsx b/src/pages/Dashboard/BalanceChartCard/BalanceChartCard.tsx
index 4b2778ab..b665c1b6 100644
--- a/src/pages/Dashboard/BalanceChartCard/BalanceChartCard.tsx
+++ b/src/pages/Dashboard/BalanceChartCard/BalanceChartCard.tsx
@@ -41,7 +41,9 @@ const BalanceChartCard = () => {
   }
 
   return (
-    <DashboardCardWrapper minWidth={'436px'} width="100%" height="100%">
+    <DashboardCardWrapper
+      style={{ width: '100%', height: '100%', minWidth: '436px' }}
+    >
       <YStack space={'$4'}>
         <XStack justifyContent={'space-between'}>
           <YStack>
diff --git a/src/pages/Dashboard/CPULoad/CPUCard.tsx b/src/pages/Dashboard/CPULoad/CPUCard.tsx
index aabab6b3..88aa420d 100644
--- a/src/pages/Dashboard/CPULoad/CPUCard.tsx
+++ b/src/pages/Dashboard/CPULoad/CPUCard.tsx
@@ -43,9 +43,7 @@ const CPUCard = ({ load }: CPUCardProps) => {
 
   return (
     <DashboardCardWrapper
-      padding="0"
-      height="156px"
-      minWidth="200px"
+      style={{ padding: 0, height: '156px', minWidth: '250px' }}
       isErrorBorder={message === 'Poor'}
     >
       <YStack
diff --git a/src/pages/Dashboard/ConnectedPeers/ConnectedPeers.tsx b/src/pages/Dashboard/ConnectedPeers/ConnectedPeers.tsx
index e71256b7..ffbd1f1d 100644
--- a/src/pages/Dashboard/ConnectedPeers/ConnectedPeers.tsx
+++ b/src/pages/Dashboard/ConnectedPeers/ConnectedPeers.tsx
@@ -6,7 +6,9 @@ import DoughnutChartHalf from '../../../components/Charts/HalfDoughnutWithGradie
 
 const ConnectedPeers = () => {
   return (
-    <DashboardCardWrapper padding="0" height="156ppx" minWidth="250px">
+    <DashboardCardWrapper
+      style={{ padding: 0, height: '156px', minWidth: '250px' }}
+    >
       <YStack height={'100%'}>
         <Stack
           style={{ minHeight: '90px', padding: '12px 16px', flex: 1 }}
diff --git a/src/pages/Dashboard/Dashboard.tsx b/src/pages/Dashboard/Dashboard.tsx
index f0426e59..314442eb 100644
--- a/src/pages/Dashboard/Dashboard.tsx
+++ b/src/pages/Dashboard/Dashboard.tsx
@@ -59,7 +59,7 @@ const Dashboard = () => {
           <div
             style={{
               display: 'grid',
-              gridTemplateColumns: 'repeat(4, 1fr)', // Four columns, each taking up an equal portion of the available space
+              gridTemplateColumns: 'repeat(4, 1fr)',
               gap: '14px',
               width: '100%',
             }}
diff --git a/src/pages/Dashboard/DashboardCardWrapper.tsx b/src/pages/Dashboard/DashboardCardWrapper.tsx
index bff83d78..facbe3c1 100644
--- a/src/pages/Dashboard/DashboardCardWrapper.tsx
+++ b/src/pages/Dashboard/DashboardCardWrapper.tsx
@@ -2,39 +2,27 @@ import { Shadow } from '@status-im/components'
 
 type DashboardCardWrapperProps = {
   children: React.ReactNode
-  padding?: string
-  width?: string
-  height?: string
-  minWidth?: string
-  maxWidth?: string
-  maxHeight?: string
   isErrorBorder?: boolean
+  style?: React.CSSProperties
 }
 
 const DashboardCardWrapper = ({
   children,
-  padding = '12px 16px',
-  width,
-  height = 'auto',
-  minWidth = '0',
-  maxWidth,
-  maxHeight,
   isErrorBorder,
+  style,
 }: DashboardCardWrapperProps) => {
   return (
     <Shadow
       variant="$1"
       style={{
         flexGrow: '1',
-        width: width,
-        height: height,
         borderRadius: '16px',
-        padding,
         backgroundColor: '$background',
-        minWidth: minWidth,
-        maxWidth: maxWidth,
-        maxHeight: maxHeight,
         border: isErrorBorder ? '1px solid  #D92344' : '1px solid #E7EAEE',
+        padding: '12px 16px',
+        height: 'auto',
+        minWidth: '0',
+        ...style,
       }}
     >
       {children}
diff --git a/src/pages/Dashboard/DeviceUptime/DeviceUptime.tsx b/src/pages/Dashboard/DeviceUptime/DeviceUptime.tsx
index 7878d729..d1862f3c 100644
--- a/src/pages/Dashboard/DeviceUptime/DeviceUptime.tsx
+++ b/src/pages/Dashboard/DeviceUptime/DeviceUptime.tsx
@@ -31,7 +31,7 @@ const DeviceUptime = () => {
   }
 
   return (
-    <DashboardCardWrapper minWidth="100px">
+    <DashboardCardWrapper style={{ minWidth: '100px' }}>
       <YStack space={'$3'}>
         <XStack justifyContent={'space-between'}>
           <YStack>
diff --git a/src/pages/Dashboard/MemoryCard/MemoryCard.tsx b/src/pages/Dashboard/MemoryCard/MemoryCard.tsx
index 179a3b9b..b0321a5f 100644
--- a/src/pages/Dashboard/MemoryCard/MemoryCard.tsx
+++ b/src/pages/Dashboard/MemoryCard/MemoryCard.tsx
@@ -45,9 +45,7 @@ const MemoryCard = ({ currentMemory, maxMemory }: MemoryCardProps) => {
 
   return (
     <DashboardCardWrapper
-      padding="0"
-      height="156px"
-      minWidth="200px"
+      style={{ padding: 0, height: '156px', minWidth: '250px' }}
       isErrorBorder={message === 'Poor'}
     >
       <YStack
diff --git a/src/pages/Dashboard/NetworkCard/NetworkCard.tsx b/src/pages/Dashboard/NetworkCard/NetworkCard.tsx
index 5edbd3fc..f6b72b73 100644
--- a/src/pages/Dashboard/NetworkCard/NetworkCard.tsx
+++ b/src/pages/Dashboard/NetworkCard/NetworkCard.tsx
@@ -51,9 +51,11 @@ const NetworkCard = ({ uploadRate, downloadRate }: NetworkCardProps) => {
 
   return (
     <DashboardCardWrapper
-      padding="0"
-      height="156px"
-      minWidth="200px"
+      style={{
+        padding: 0,
+        height: '156px',
+        minWidth: '200px',
+      }}
       isErrorBorder={message === 'Poor'}
     >
       <YStack
diff --git a/src/pages/Dashboard/StorageCard/StorageCard.tsx b/src/pages/Dashboard/StorageCard/StorageCard.tsx
index 50d2cf25..1c2718a6 100644
--- a/src/pages/Dashboard/StorageCard/StorageCard.tsx
+++ b/src/pages/Dashboard/StorageCard/StorageCard.tsx
@@ -36,9 +36,7 @@ const StorageCard = ({ storage, maxStorage }: StorageCardProps) => {
 
   return (
     <DashboardCardWrapper
-      padding="0"
-      height="156px"
-      minWidth="200px"
+      style={{ padding: 0, height: '156px', minWidth: '200px' }}
       isErrorBorder={message === 'Poor'}
     >
       <YStack
diff --git a/src/pages/Dashboard/SyncStatusCards/SyncStatusCards.tsx b/src/pages/Dashboard/SyncStatusCards/SyncStatusCards.tsx
index 84f138f5..6eb118e6 100644
--- a/src/pages/Dashboard/SyncStatusCards/SyncStatusCards.tsx
+++ b/src/pages/Dashboard/SyncStatusCards/SyncStatusCards.tsx
@@ -7,7 +7,9 @@ import ConsensusCard from './ConsensusClientCard'
 
 const SyncStatusCards = () => {
   return (
-    <DashboardCardWrapper padding="0" minWidth="200px" height="100%">
+    <DashboardCardWrapper
+      style={{ padding: 0, height: '100%', minWidth: '200px' }}
+    >
       <YStack space={'$3'}>
         <div style={{ padding: '8px 16px' }}>
           <Text size={19} weight={'semibold'}>