From ef42bce643463212338d176c7962b03c2db9b7c9 Mon Sep 17 00:00:00 2001
From: Michal Zielenkiewicz <michal@oasisprotocol.org>
Date: Thu, 8 Feb 2024 14:13:56 +0100
Subject: [PATCH] Move margin out of SnapshotCard to render card in ParaTimes
 cards

---
 src/app/components/Snapshots/Snapshot.tsx             | 11 +++++++++++
 src/app/components/Snapshots/SnapshotCard.tsx         |  1 +
 .../ConsensusDashboardPage/ConsensusSnapshot.tsx      |  8 +-------
 .../pages/ParatimeDashboardPage/ParaTimeSnapshot.tsx  |  8 +-------
 4 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/app/components/Snapshots/Snapshot.tsx b/src/app/components/Snapshots/Snapshot.tsx
index 7752e601b..34d31b387 100644
--- a/src/app/components/Snapshots/Snapshot.tsx
+++ b/src/app/components/Snapshots/Snapshot.tsx
@@ -1,4 +1,5 @@
 import { FC, ReactNode } from 'react'
+import { styled } from '@mui/material/styles'
 import Box from '@mui/material/Box'
 import Grid from '@mui/material/Grid'
 import Typography from '@mui/material/Typography'
@@ -42,3 +43,13 @@ export const Snapshot: FC<SnapshotProps> = ({ children, header, scope, title })
     </>
   )
 }
+
+export const StyledGrid = styled(Grid)(({ theme }) => ({
+  display: 'flex',
+  [theme.breakpoints.down('sm')]: {
+    paddingBottom: theme.spacing(4),
+  },
+  [theme.breakpoints.up('sm')]: {
+    paddingBottom: theme.spacing(5),
+  },
+}))
diff --git a/src/app/components/Snapshots/SnapshotCard.tsx b/src/app/components/Snapshots/SnapshotCard.tsx
index 8fa3d9a43..6c0f04a2e 100644
--- a/src/app/components/Snapshots/SnapshotCard.tsx
+++ b/src/app/components/Snapshots/SnapshotCard.tsx
@@ -15,6 +15,7 @@ export const StyledCard = styled(Card)(({ theme }) => ({
   justifyContent: 'space-between',
   '&': {
     padding: 0,
+    margin: 0,
   },
   height: 186,
 }))
diff --git a/src/app/pages/ConsensusDashboardPage/ConsensusSnapshot.tsx b/src/app/pages/ConsensusDashboardPage/ConsensusSnapshot.tsx
index 197015deb..d8faf2e19 100644
--- a/src/app/pages/ConsensusDashboardPage/ConsensusSnapshot.tsx
+++ b/src/app/pages/ConsensusDashboardPage/ConsensusSnapshot.tsx
@@ -1,18 +1,12 @@
 import { FC } from 'react'
 import { useTranslation } from 'react-i18next'
-import Grid from '@mui/material/Grid'
-import { styled } from '@mui/material/styles'
 import { SearchScope } from '../../../types/searchScope'
-import { Snapshot } from '../../components/Snapshots/Snapshot'
+import { Snapshot, StyledGrid } from '../../components/Snapshots/Snapshot'
 import { SnapshotEpoch } from './SnapshotEpoch'
 import { SnapshotDelegators } from './SnapshotDelegators'
 import { SnapshotValidators } from './SnapshotValidators'
 import { SnapshotStaked } from './SnapshotStaked'
 
-const StyledGrid = styled(Grid)(() => ({
-  display: 'flex',
-}))
-
 export const ConsensusSnapshot: FC<{ scope: SearchScope }> = ({ scope }) => {
   const { t } = useTranslation()
 
diff --git a/src/app/pages/ParatimeDashboardPage/ParaTimeSnapshot.tsx b/src/app/pages/ParatimeDashboardPage/ParaTimeSnapshot.tsx
index 442c9f429..683b7fec5 100644
--- a/src/app/pages/ParatimeDashboardPage/ParaTimeSnapshot.tsx
+++ b/src/app/pages/ParatimeDashboardPage/ParaTimeSnapshot.tsx
@@ -1,6 +1,4 @@
 import { FC, useState } from 'react'
-import Grid from '@mui/material/Grid'
-import { styled } from '@mui/material/styles'
 import { DurationSelect } from '../../components/Snapshots/DurationSelect'
 import { TransactionsChartCard } from './TransactionsChartCard'
 import { RosePriceCard } from './RosePriceCard'
@@ -13,11 +11,7 @@ import { Network } from '../../../types/network'
 import { getLayerLabels } from '../../utils/content'
 import { TestnetFaucet } from './TestnetFaucet'
 import { SearchScope } from '../../../types/searchScope'
-import { Snapshot } from 'app/components/Snapshots/Snapshot'
-
-const StyledGrid = styled(Grid)(() => ({
-  display: 'flex',
-}))
+import { Snapshot, StyledGrid } from 'app/components/Snapshots/Snapshot'
 
 export const ParaTimeSnapshot: FC<{ scope: SearchScope }> = ({ scope }) => {
   const { t } = useTranslation()