Fix misplaced data on statistics section on homepage (#1988)

* fix: removed unnecessary margin * fix: adjusted spacing in statistics section * fix: fraction margin * fix: fraction margin * fix: fraction top margin value
podkrepi-bg · Jan 16, 2025 · bbea44a · bbea44a
1 parent 0ef52c2
commit bbea44a
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 16 deletions.
diff --git a/...ents/client/index/sections/PlatformStatisticsSection/PlatformStatisticsSection.styled.tsx b/...ents/client/index/sections/PlatformStatisticsSection/PlatformStatisticsSection.styled.tsx
@@ -16,7 +16,7 @@ export const Root = styled('section')(() => ({
 export const SectionGridWrapper = styled(Grid)(() => ({
   display: 'flex',
   margin: '0 auto',
-  padding: theme.spacing(0, 1.8),
+  padding: theme.spacing(4, 1.8),
   maxWidth: theme.spacing(162),
   alignItems: 'center',
 

diff --git a/...mponents/client/index/sections/PlatformStatisticsSection/Statistics/Statistics.styled.tsx b/...mponents/client/index/sections/PlatformStatisticsSection/Statistics/Statistics.styled.tsx
@@ -1,4 +1,4 @@
-import { Divider, Grid, Stack, Typography } from '@mui/material'
+import { Grid, Stack, Typography } from '@mui/material'
 import { styled } from '@mui/material/styles'
 
 import theme from 'common/theme'
@@ -17,7 +17,6 @@ export const SubtitleSectionNumber = styled(Typography)(() => ({
 
   [theme.breakpoints.up('md')]: {
     fontSize: theme.typography.pxToRem(50),
-    marginTop: theme.spacing(1),
   },
 }))
 
@@ -27,11 +26,7 @@ export const Fraction = styled(Typography)(() => ({
   fontWeight: 'bold',
   lineHeight: 1,
   fontSize: theme.typography.pxToRem(20),
-  marginTop: theme.spacing(1),
-
-  [theme.breakpoints.up('md')]: {
-    marginTop: theme.spacing(1.87),
-  },
+  marginTop: theme.spacing(0.8),
 }))
 
 export const StatisticsWrapper = styled(Stack)(() => ({
@@ -72,7 +67,3 @@ export const SubtitleSectionText = styled(Typography)(() => ({
   marginLeft: theme.spacing(2),
   fontSize: theme.typography.pxToRem(16),
 }))
-
-export const SectionDivider = styled(Divider)(() => ({
-  marginBottom: theme.spacing(1),
-}))
diff --git a/src/components/client/index/sections/PlatformStatisticsSection/Statistics/Statistics.tsx b/src/components/client/index/sections/PlatformStatisticsSection/Statistics/Statistics.tsx
@@ -8,13 +8,12 @@ import { toNumberWithSpacesBetween } from 'common/util/number'
 
 import {
   Fraction,
-  SectionDivider,
   StatisticsSectionWrapper,
   StatisticsWrapper,
   SubtitleSectionNumber,
   SubtitleSectionText,
 } from './Statistics.styled'
-import { Stack } from '@mui/material'
+import { Stack, Divider } from '@mui/material'
 
 export default function Statistics() {
   const { t } = useTranslation('index')
@@ -52,7 +51,7 @@ export default function Statistics() {
             </SubtitleSectionNumber>
             <SubtitleSectionText variant="subtitle1">{section.message}</SubtitleSectionText>
           </StatisticsWrapper>
-          <SectionDivider />
+          <Divider />
         </React.Fragment>
       ))}
       <StatisticsWrapper>
@@ -64,7 +63,7 @@ export default function Statistics() {
         </Stack>
         <SubtitleSectionText>{t('platform-statistics.donated-leva')}</SubtitleSectionText>
       </StatisticsWrapper>
-      <SectionDivider />
+      <Divider />
     </StatisticsSectionWrapper>
   )
 }