fix(dashboard-card-wrapper): pass style instead of style props

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

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=""

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>

src/pages/Dashboard/CPULoad/CPUCard.tsx

@@ -43,9 +43,7 @@ const CPUCard = ({ load }: CPUCardProps) => {
 
   return (
     <DashboardCardWrapper
-      padding="0"
+      style={{ padding: 0, height: '156px', minWidth: '250px' }}
-      height="156px"
-      minWidth="200px"
       isErrorBorder={message === 'Poor'}
     >
       <YStack

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

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

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}

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>

src/pages/Dashboard/MemoryCard/MemoryCard.tsx

@@ -45,9 +45,7 @@ const MemoryCard = ({ currentMemory, maxMemory }: MemoryCardProps) => {
 
   return (
     <DashboardCardWrapper
-      padding="0"
+      style={{ padding: 0, height: '156px', minWidth: '250px' }}
-      height="156px"
-      minWidth="200px"
       isErrorBorder={message === 'Poor'}
     >
       <YStack

src/pages/Dashboard/NetworkCard/NetworkCard.tsx

@@ -51,9 +51,11 @@ const NetworkCard = ({ uploadRate, downloadRate }: NetworkCardProps) => {
 
   return (
     <DashboardCardWrapper
-      padding="0"
+      style={{
-      height="156px"
+        padding: 0,
-      minWidth="200px"
+        height: '156px',
+        minWidth: '200px',
+      }}
       isErrorBorder={message === 'Poor'}
     >
       <YStack

src/pages/Dashboard/StorageCard/StorageCard.tsx

@@ -36,9 +36,7 @@ const StorageCard = ({ storage, maxStorage }: StorageCardProps) => {
 
   return (
     <DashboardCardWrapper
-      padding="0"
+      style={{ padding: 0, height: '156px', minWidth: '200px' }}
-      height="156px"
-      minWidth="200px"
       isErrorBorder={message === 'Poor'}
     >
       <YStack

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'}>