From 2596b37ad72d7ce6aa7c071720f8d480bc409c9b Mon Sep 17 00:00:00 2001
From: ani-kalpachka <ani.kalpachka888@abv.bg>
Date: Mon, 21 Aug 2023 10:31:55 +0300
Subject: [PATCH] Update donated money in Statistics on Homepage

---
 .../Statistics/Statistics.styled.tsx          | 17 +++++++++++++++-
 .../Statistics/Statistics.tsx                 | 20 +++++++++++++++----
 2 files changed, 32 insertions(+), 5 deletions(-)

diff --git a/src/components/client/index/sections/PlatformStatisticsSection/Statistics/Statistics.styled.tsx b/src/components/client/index/sections/PlatformStatisticsSection/Statistics/Statistics.styled.tsx
index 352f103c4..fb05aecbf 100644
--- a/src/components/client/index/sections/PlatformStatisticsSection/Statistics/Statistics.styled.tsx
+++ b/src/components/client/index/sections/PlatformStatisticsSection/Statistics/Statistics.styled.tsx
@@ -5,7 +5,7 @@ import theme from 'common/theme'
 
 export const StatisticsSectionWrapper = styled(Grid)(() => ({
   margin: '0 auto',
-  padding: '56px 0',
+  padding: theme.spacing(7, 0),
 }))
 
 export const SubtitleSectionNumber = styled(Typography)(() => ({
@@ -21,14 +21,29 @@ export const SubtitleSectionNumber = styled(Typography)(() => ({
   },
 }))
 
+export const Fraction = styled(Typography)(() => ({
+  display: 'inline-block',
+  color: theme.palette.primary.light,
+  fontWeight: 'bold',
+  lineHeight: 1,
+  fontSize: theme.typography.pxToRem(20),
+  marginTop: theme.spacing(0.7),
+
+  [theme.breakpoints.up('md')]: {
+    marginTop: theme.spacing(1.6),
+  },
+}))
+
 export const StatisticsWrapper = styled(Stack)(() => ({
   flexDirection: 'row',
   alignItems: 'center',
   padding: theme.spacing(1.87, 0),
+
   '&:last-of-type': { flexDirection: 'column' },
 
   [theme.breakpoints.up('md')]: {
     padding: theme.spacing(1.87),
+
     '&:last-of-type': { flexDirection: 'row' },
   },
 }))
diff --git a/src/components/client/index/sections/PlatformStatisticsSection/Statistics/Statistics.tsx b/src/components/client/index/sections/PlatformStatisticsSection/Statistics/Statistics.tsx
index 3d6a165dc..a8bf42c6b 100644
--- a/src/components/client/index/sections/PlatformStatisticsSection/Statistics/Statistics.tsx
+++ b/src/components/client/index/sections/PlatformStatisticsSection/Statistics/Statistics.tsx
@@ -7,12 +7,14 @@ import { getTotalDonatedMoney, useDonatedUsersCount } from 'common/hooks/donatio
 import { toNumberWithSpacesBetween } from 'common/util/number'
 
 import {
+  Fraction,
   SectionDivider,
   StatisticsSectionWrapper,
   StatisticsWrapper,
   SubtitleSectionNumber,
   SubtitleSectionText,
 } from './Statistics.styled'
+import { Stack } from '@mui/material'
 
 export default function Statistics() {
   const { t } = useTranslation('index')
@@ -21,6 +23,10 @@ export default function Statistics() {
   const { data: donorsCount } = useDonatedUsersCount()
   const { data: totalDonatedMoney } = getTotalDonatedMoney()
 
+  const donatedMoney = fromMoney(totalDonatedMoney?.total || 0)
+  const unit = donatedMoney.toString().split('.')[0]
+  const fraction = donatedMoney.toString().split('.')[1]
+
   const sections: { value?: number; message: string }[] = [
     {
       value: campaigns?.length,
@@ -34,10 +40,6 @@ export default function Statistics() {
       value: donorsCount?.count,
       message: t('platform-statistics.donated-users'),
     },
-    {
-      value: fromMoney(totalDonatedMoney?.total ?? 0),
-      message: t('platform-statistics.donated-leva'),
-    },
   ]
 
   return (
@@ -53,6 +55,16 @@ export default function Statistics() {
           <SectionDivider />
         </React.Fragment>
       ))}
+      <StatisticsWrapper>
+        <Stack flexDirection="row">
+          <SubtitleSectionNumber variant="subtitle1">
+            {toNumberWithSpacesBetween(unit)}
+          </SubtitleSectionNumber>
+          <Fraction>{fraction}</Fraction>
+        </Stack>
+        <SubtitleSectionText>{t('platform-statistics.donated-leva')}</SubtitleSectionText>
+      </StatisticsWrapper>
+      <SectionDivider />
     </StatisticsSectionWrapper>
   )
 }