Merge branch 'Create-Dashboard' of https://github.com/nimbus-gui/nimbus-gui into Create-Dashboard

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
+    <DashboardCardWrapper padding="0">
-      style={{
+      <YStack>
-        borderRadius: '16px',
+        <AddCard />
-        boxShadow: '0 0 8px rgba(0, 0, 0, 0.1)',
+        <AddCard />
-        backgroundColor: '$background',
+      </YStack>
-      }}
+    </DashboardCardWrapper>
-    >
-      <AddCard />
-      <AddCard />
-    </YStack>
   )
 }
 

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

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
+    <Shadow variant="$1" style={{ borderRadius: '16px', padding, backgroundColor: '$background' }}>
-      style={{
-        borderRadius: '16px',
-        boxShadow: '0 0 8px rgba(0, 0, 0, 0.1)',
-        padding: '12px 16px',
-        backgroundColor: '$background',
-      }}
-    >
       {children}
-    </Stack>
+    </Shadow>
   )
 }
 

src/pages/Dashboard/SyncStatusCard/SyncStatusCard.tsx

@@ -1,4 +1,5 @@
 import { YStack } from 'tamagui'
+
 import SyncCardContent from './SyncCardContent'
 
 const SyncStatusCard = () => {