Update money representation for Active and Completed campaigns on Hom…

…epage (#1428) Co-authored-by: ani-kalpachka <[email protected]>
podkrepi-bg · May 10, 2023 · 5cd5e7d · 5cd5e7d
1 parent aeb4ebd
commit 5cd5e7d
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 65 deletions.
diff --git a/...ts/client/index/sections/ActiveCampaignsSection/ActiveCampaignCard/ActiveCampaignCard.tsx b/...ts/client/index/sections/ActiveCampaignsSection/ActiveCampaignCard/ActiveCampaignCard.tsx
@@ -14,11 +14,9 @@ import { CampaignState } from 'components/client/campaigns/helpers/campaign.enum
 import { CampaignTitle, Content, SupportNowButton } from './ActiveCampaignCard.styled'
 import { moneyPublic } from 'common/util/money'
 import {
-  MoneyWrapper,
-  MoneyWrapperFlex,
-  MoneyUnit,
-  MoneyFraction,
-  MoneyText,
+  SumWrapper,
+  Sum,
+  SumText,
 } from '../../CompletedCampaignsSection/CompletedCampaignsSection.styled'
 
 type Props = { campaign: CampaignResponse; index: number }
@@ -51,28 +49,20 @@ export default function ActiveCampaignCard({ campaign, index }: Props) {
           },
         },
       }}>
-      <MoneyWrapper>
-        <MoneyWrapperFlex>
-          <MoneyText>{t('campaign.reached')}</MoneyText>
-          <MoneyUnit>
-            {i18n.language === 'bg' ? reachedAmount.split(',')[0] : reachedAmount.split('.')[0]}
-          </MoneyUnit>
-          <MoneyFraction>
-            {i18n.language === 'bg'
-              ? reachedAmount.split(',')[1].substring(0, 2)
-              : reachedAmount.split('.')[1]}
-          </MoneyFraction>
-          <MoneyText>{t('campaign.from')}</MoneyText>
-          <MoneyUnit>
-            {i18n.language === 'bg' ? targetAmount.split(',')[0] : targetAmount.split('.')[0]}
-          </MoneyUnit>
-          <MoneyFraction>
-            {i18n.language === 'bg'
-              ? targetAmount.split(',')[1].substring(0, 2)
-              : targetAmount.split('.')[1]}
-          </MoneyFraction>
-        </MoneyWrapperFlex>
-      </MoneyWrapper>
+      <SumWrapper>
+        <SumText>{t('campaign.reached')}</SumText>
+        <Sum>
+          {i18n.language === 'bg'
+            ? reachedAmount.split(',')[0] + ' лв.'
+            : reachedAmount.split('.')[0]}
+        </Sum>
+        <SumText>{t('campaign.from')}</SumText>
+        <Sum>
+          {i18n.language === 'bg'
+            ? targetAmount.split(',')[0] + ' лв.'
+            : targetAmount.split('.')[0]}
+        </Sum>
+      </SumWrapper>
       <Content>
         <CampaignTitle>{title}</CampaignTitle>
         <Grid textAlign="center">

diff --git a/...ents/client/index/sections/CompletedCampaignsSection/CompletedCampaignsSection.styled.tsx b/...ents/client/index/sections/CompletedCampaignsSection/CompletedCampaignsSection.styled.tsx
@@ -57,9 +57,11 @@ export const CampaignTitle = styled('h6')(() => ({
   color: theme.palette.secondary.light,
 }))
 
-export const MoneyWrapper = styled(Grid)(() => ({
+export const SumWrapper = styled(Grid)(() => ({
   display: 'flex',
-  flexDirection: 'column',
+  flexDirection: 'row',
+  justifyContent: 'center',
+  flexFlow: 'wrap',
   padding: theme.spacing(0.6, 0),
   minWidth: theme.spacing(17.5),
   background: '#323232',
@@ -68,29 +70,19 @@ export const MoneyWrapper = styled(Grid)(() => ({
   marginLeft: 'auto',
   fontFamily: 'Montserrat, sans-serif',
   fontSize: theme.typography.pxToRem(17),
-  alignItems: 'center',
 }))
 
-export const MoneyUnit = styled('span')(() => ({
-  fontWeight: 700,
-  fontSize: theme.typography.pxToRem(17),
+export const SumWrapperColumn = styled(Stack)(() => ({
+  flexDirection: 'column',
+  alignItems: 'center',
 }))
 
-export const MoneyFraction = styled('span')(() => ({
+export const Sum = styled('span')(() => ({
   fontWeight: 700,
-  fontSize: theme.typography.pxToRem(10),
-  marginTop: theme.spacing(0.5),
-
-  [theme.breakpoints.up(1270)]: {
-    marginTop: theme.spacing(0.3),
-  },
-}))
-
-export const MoneyWrapperFlex = styled(Stack)(() => ({
-  flexDirection: 'row',
+  fontSize: theme.typography.pxToRem(17),
 }))
 
-export const MoneyText = styled(Typography)(() => ({
+export const SumText = styled(Typography)(() => ({
   color: theme.palette.common.white,
   fontFamily: 'Lato, sans-serif',
   fontWeight: 700,

diff --git a/src/components/client/index/sections/CompletedCampaignsSection/CompletedCampaignsSection.tsx b/src/components/client/index/sections/CompletedCampaignsSection/CompletedCampaignsSection.tsx
@@ -3,11 +3,9 @@ import { CampaignResponse } from 'gql/campaigns'
 
 import 'slick-carousel/slick/slick-theme.css'
 import 'slick-carousel/slick/slick.css'
-import { Grid } from '@mui/material'
 
 import { useCampaignList } from 'common/hooks/campaigns'
 import { campaignListPictureUrl } from 'common/util/campaignImageUrls'
-import theme from 'common/theme'
 import { CampaignState } from 'components/client/campaigns/helpers/campaign.enums'
 import { routes } from 'common/routes'
 import { settings } from './helpers/CompletedCampaignsCarouselSettings'
@@ -17,14 +15,13 @@ import { Heading } from '../../IndexPage.styled'
 import {
   Root,
   CarouselWrapper,
-  MoneyUnit,
-  MoneyFraction,
-  MoneyWrapper,
-  MoneyText,
+  Sum,
+  SumWrapper,
+  SumText,
   CampaignTitle,
   CompletedCampaignLink,
-  MoneyWrapperFlex,
   CardWrapper,
+  SumWrapperColumn,
 } from './CompletedCampaignsSection.styled'
 
 export default function CompletedCampaignsSection() {
@@ -55,21 +52,16 @@ export default function CompletedCampaignsSection() {
                   campaign,
                 )})`,
               }}>
-              <MoneyWrapper>
-                <MoneyWrapperFlex>
-                  <MoneyUnit>
+              <SumWrapper>
+                <SumWrapperColumn>
+                  <Sum>
                     {i18n.language === 'bg'
-                      ? moneyPublic(campaign.summary.reachedAmount).split(',')[0]
+                      ? moneyPublic(campaign.summary.reachedAmount).split(',')[0] + ' лв.'
                       : moneyPublic(campaign.summary.reachedAmount).split('.')[0]}
-                  </MoneyUnit>
-                  <MoneyFraction>
-                    {i18n.language === 'bg'
-                      ? moneyPublic(campaign.summary.reachedAmount).split(',')[1].substring(0, 2)
-                      : moneyPublic(campaign.summary.reachedAmount).split('.')[1]}
-                  </MoneyFraction>
-                </MoneyWrapperFlex>
-                <MoneyText>{t('campaign.reached')}</MoneyText>
-              </MoneyWrapper>
+                  </Sum>
+                  <SumText sx={{ padding: 0 }}>{t('campaign.reached')}</SumText>
+                </SumWrapperColumn>
+              </SumWrapper>
               <CampaignTitle>{campaign.title}</CampaignTitle>
             </CompletedCampaignLink>
           </CardWrapper>