Update Active and Completed campaigns on Homepage

src/components/client/index/sections/ActiveCampaignsSection/ActiveCampaignCard/ActiveCampaignCard.tsx

@@ -12,13 +12,27 @@ import { campaignListPictureUrl } from 'common/util/campaignImageUrls'
 import { CampaignState } from 'components/client/campaigns/helpers/campaign.enums'
 
 import { CampaignTitle, Content, SupportNowButton } from './ActiveCampaignCard.styled'
+import { moneyPublic } from 'common/util/money'
+import {
+  MoneyWrapper,
+  MoneyWrapperFlex,
+  MoneyUnit,
+  MoneyFraction,
+  MoneyText,
+} from '../../CompletedCampaignsSection/CompletedCampaignsSection.styled'
 
 type Props = { campaign: CampaignResponse; index: number }
 
 export default function ActiveCampaignCard({ campaign, index }: Props) {
   const { t } = useTranslation('campaigns')
   const { state: campaignState, allowDonationOnComplete, slug, title } = campaign
   const campaignImagesUrl = campaignListPictureUrl(campaign)
+  const reachedMoneyUnit = moneyPublic(campaign.summary.reachedAmount).split(',')[0]
+  const reachedMoneyFraction = moneyPublic(campaign.summary.reachedAmount)
+    .split(',')[1]
+    .substring(0, 2)
+  const targetMoneyUnit = moneyPublic(campaign.targetAmount).split(',')[0]
+  const targetMoneyFraction = moneyPublic(campaign.targetAmount).split(',')[1].substring(0, 2)
 
   return (
     <CardActionArea
@@ -41,6 +55,16 @@ export default function ActiveCampaignCard({ campaign, index }: Props) {
           },
         },
       }}>
+      <MoneyWrapper>
+        <MoneyWrapperFlex>
+          <MoneyText>{t('campaign.reached')}</MoneyText>
+          <MoneyUnit>{reachedMoneyUnit}</MoneyUnit>
+          <MoneyFraction>{reachedMoneyFraction}</MoneyFraction>
+          <MoneyText>{t('campaign.from')}</MoneyText>
+          <MoneyUnit>{targetMoneyUnit}</MoneyUnit>
+          <MoneyFraction>{targetMoneyFraction}</MoneyFraction>
+        </MoneyWrapperFlex>
+      </MoneyWrapper>
       <Content>
         <CampaignTitle>{title}</CampaignTitle>
         <Grid textAlign="center">

src/components/client/index/sections/ActiveCampaignsSection/ActiveCampaignsSection.styled.tsx

@@ -4,7 +4,7 @@ import { styled } from '@mui/material/styles'
 import theme from 'common/theme'
 
 export const Root = styled(Grid)(() => ({
-  marginTop: theme.spacing(3.875),
+  marginTop: theme.spacing(7),
   display: 'grid',
   gridTemplateRows: 'repeat(5, 1fr)',
 
@@ -32,7 +32,7 @@ export const Root = styled(Grid)(() => ({
 
   [theme.breakpoints.up(2000)]: {
     maxWidth: theme.spacing(165),
-    margin: `${theme.spacing(4)} auto`,
+    margin: `${theme.spacing(7)} auto ${theme.spacing(4)} auto`,
   },
 }))
 

src/components/client/index/sections/CompletedCampaignsSection/CompletedCampaignsSection.styled.tsx

@@ -3,7 +3,7 @@ import Slider from 'react-slick'
 import styled from '@emotion/styled'
 
 import theme from 'common/theme'
-import { Typography, Link, Grid } from '@mui/material'
+import { Typography, Link, Grid, Stack } from '@mui/material'
 
 export const CarouselWrapper = styled(Slider)(() => ({
   margin: '0 auto',
@@ -30,12 +30,11 @@ export const CampaignTitle = styled('h6')(() => ({
   color: theme.palette.secondary.light,
 }))
 
-export const ReachedMoneyWrapper = styled(Grid)(() => ({
+export const MoneyWrapper = styled(Grid)(() => ({
   display: 'flex',
   flexDirection: 'column',
-  paddingTop: theme.spacing(0.6),
+  padding: theme.spacing(0.6, 0),
   minWidth: theme.spacing(17.5),
-  minHeight: theme.spacing(7.5),
   background: '#323232',
   borderRadius: theme.spacing(0, 0, 0, 2),
   color: '#B0E5FF',
@@ -45,14 +44,29 @@ export const ReachedMoneyWrapper = styled(Grid)(() => ({
   alignItems: 'center',
 }))
 
-export const ReachedMoney = styled(Typography)(() => ({
+export const MoneyUnit = styled('span')(() => ({
   fontWeight: 700,
   fontSize: theme.typography.pxToRem(17),
 }))
 
-export const ReachedText = styled(Typography)(() => ({
+export const MoneyFraction = 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',
+}))
+
+export const MoneyText = styled(Typography)(() => ({
   color: theme.palette.common.white,
   fontFamily: 'Lato, sans-serif',
   fontWeight: 700,
   fontSize: theme.typography.pxToRem(17),
+  padding: theme.spacing(0, 1),
 }))

src/components/client/index/sections/CompletedCampaignsSection/CompletedCampaignsSection.tsx

@@ -10,17 +10,19 @@ 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/CaroucelSettings'
+import { settings } from './helpers/CompletedCampaignsCaroucelSettings'
 import { moneyPublic } from 'common/util/money'
 
 import { Heading } from '../../IndexPage.styled'
 import {
   CarouselWrapper,
-  ReachedMoney,
-  ReachedText,
+  MoneyUnit,
+  MoneyFraction,
+  MoneyWrapper,
+  MoneyText,
   CampaignTitle,
-  ReachedMoneyWrapper,
   CompletedCampaignLink,
+  MoneyWrapperFlex,
 } from './CompletedCampaignsSection.styled'
 
 export default function CompletedCampaignsSection() {
@@ -51,16 +53,19 @@ export default function CompletedCampaignsSection() {
               onMouseDown={onLinkMouseDown}
               href={routes.campaigns.viewCampaignBySlug(campaign.slug)}
               sx={{
-                background: `url(${campaignListPictureUrl(campaign)})`,
+                background: `linear-gradient(180deg, rgba(81, 81, 81, 0) 50%, rgba(0, 0, 0, 0.78) 80%, #000000 100%), url(${campaignListPictureUrl(
+                  campaign,
+                )})`,
               }}>
-              <ReachedMoneyWrapper>
-                <Grid>
-                  <ReachedMoney>
-                    {moneyPublic(campaign.summary.reachedAmount, campaign.currency)}
-                  </ReachedMoney>
-                  <ReachedText>{t('campaign.reached')}</ReachedText>
-                </Grid>
-              </ReachedMoneyWrapper>
+              <MoneyWrapper>
+                <MoneyWrapperFlex>
+                  <MoneyUnit>{moneyPublic(campaign.summary.reachedAmount).split(',')[0]}</MoneyUnit>
+                  <MoneyFraction>
+                    {moneyPublic(campaign.summary.reachedAmount).split(',')[1].substring(0, 2)}
+                  </MoneyFraction>
+                </MoneyWrapperFlex>
+                <MoneyText>{t('campaign.reached')}</MoneyText>
+              </MoneyWrapper>
               <CampaignTitle>{campaign.title}</CampaignTitle>
             </CompletedCampaignLink>
           </Grid>