From 311e0cad472ce6980365ad67f0da588795b9f86e Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Thu, 14 Sep 2023 11:47:56 +0300
Subject: [PATCH 1/3] feat: add status shadow to card wrapper

---
 src/pages/Dashboard/DashboardCardWrapper.tsx | 16 +++++-----------
 1 file changed, 5 insertions(+), 11 deletions(-)

diff --git a/src/pages/Dashboard/DashboardCardWrapper.tsx b/src/pages/Dashboard/DashboardCardWrapper.tsx
index 45560142..6e3fe0c9 100644
--- a/src/pages/Dashboard/DashboardCardWrapper.tsx
+++ b/src/pages/Dashboard/DashboardCardWrapper.tsx
@@ -1,21 +1,15 @@
-import { Stack } from 'tamagui'
+import { Shadow } from '@status-im/components'
 
 type DashboardCardWrapperProps = {
   children: React.ReactNode
+  padding?: string
 }
 
-const DashboardCardWrapper = ({ children }: DashboardCardWrapperProps) => {
+const DashboardCardWrapper = ({ children, padding = '12px 16px' }: DashboardCardWrapperProps) => {
   return (
-    <Stack
-      style={{
-        borderRadius: '16px',
-        boxShadow: '0 0 8px rgba(0, 0, 0, 0.1)',
-        padding: '12px 16px',
-        backgroundColor: '$background',
-      }}
-    >
+    <Shadow variant="$1" style={{ borderRadius: '16px', padding, backgroundColor: '$background' }}>
       {children}
-    </Stack>
+    </Shadow>
   )
 }
 

From bc238a62a1bc6ba43cb1798b9794f61b53a07bc3 Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Thu, 14 Sep 2023 11:56:54 +0300
Subject: [PATCH 2/3] feat: add new example to card wrapper story

---
 src/pages/Dashboard/DashboardCardWrapper.stories.ts   | 7 +++++++
 src/pages/Dashboard/SyncStatusCard/SyncStatusCard.tsx | 1 +
 2 files changed, 8 insertions(+)

diff --git a/src/pages/Dashboard/DashboardCardWrapper.stories.ts b/src/pages/Dashboard/DashboardCardWrapper.stories.ts
index c5462817..2293a4ca 100644
--- a/src/pages/Dashboard/DashboardCardWrapper.stories.ts
+++ b/src/pages/Dashboard/DashboardCardWrapper.stories.ts
@@ -19,3 +19,10 @@ export const Default: Story = {
     children: 'Default',
   },
 }
+
+export const WithoutPadding: Story = {
+  args: {
+    children: 'Default',
+    padding: '0',
+  },
+}
diff --git a/src/pages/Dashboard/SyncStatusCard/SyncStatusCard.tsx b/src/pages/Dashboard/SyncStatusCard/SyncStatusCard.tsx
index 4928bf0f..01b86c5d 100644
--- a/src/pages/Dashboard/SyncStatusCard/SyncStatusCard.tsx
+++ b/src/pages/Dashboard/SyncStatusCard/SyncStatusCard.tsx
@@ -1,4 +1,5 @@
 import { YStack } from 'tamagui'
+
 import SyncCardContent from './SyncCardContent'
 
 const SyncStatusCard = () => {

From f504e7243aafc3a3b4b39e059c61f86cdbf7c575 Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Thu, 14 Sep 2023 12:04:02 +0300
Subject: [PATCH 3/3] feat: use updated wrapper for add cards container

---
 .../General/AddCards/AddCardsContainer.tsx      | 17 +++++++----------
 1 file changed, 7 insertions(+), 10 deletions(-)

diff --git a/src/components/General/AddCards/AddCardsContainer.tsx b/src/components/General/AddCards/AddCardsContainer.tsx
index e6bcd45e..f7503a86 100644
--- a/src/components/General/AddCards/AddCardsContainer.tsx
+++ b/src/components/General/AddCards/AddCardsContainer.tsx
@@ -1,19 +1,16 @@
 import { YStack } from 'tamagui'
 
 import AddCard from './AddCard'
+import DashboardCardWrapper from '../../../pages/Dashboard/DashboardCardWrapper'
 
 const AddCardsContainer = () => {
   return (
-    <YStack
-      style={{
-        borderRadius: '16px',
-        boxShadow: '0 0 8px rgba(0, 0, 0, 0.1)',
-        backgroundColor: '$background',
-      }}
-    >
-      <AddCard />
-      <AddCard />
-    </YStack>
+    <DashboardCardWrapper padding="0">
+      <YStack>
+        <AddCard />
+        <AddCard />
+      </YStack>
+    </DashboardCardWrapper>
   )
 }