Add UI updates on Campaign cards and Inline Donation component

package.json

@@ -38,6 +38,7 @@
     "@mui/x-date-pickers": "^6.5.0",
     "@next/font": "^13.0.5",
     "@paypal/react-paypal-js": "^7.8.1",
+    "@ramonak/react-progress-bar": "^5.0.3",
     "@react-pdf/renderer": "^3.1.3",
     "@sentry/nextjs": "7.21.1",
     "@stripe/react-stripe-js": "^1.16.1",

public/locales/bg/campaigns.json

@@ -87,8 +87,6 @@
     "amount": "Необходима сума",
     "type": "Тип кампания",
     "state": "Статус",
-    "reached": "Събрани:",
-    "target": "Цел:",
     "from": "от",
     "noCommissionInfo": "Подкрепи.бг работи с 0% комисиона. Заплащат се единствено банкови такси, които изрично се упоменават преди да направите дарението си.",
     "donors": "дарители",

public/locales/en/campaigns.json

@@ -82,8 +82,6 @@
     "amount": "Target amount",
     "type": "Campaign type",
     "state": "Campaign state",
-    "reached": "Reached:",
-    "target": "Target:",
     "from": "from",
     "noCommissionInfo": "Podkrepi.bg works with 0% commission. Only bank charges are paid, which are explicitly mentioned before you make your donation.",
     "donors": "donors",

src/components/client/campaigns/CampaignCard.tsx

@@ -153,12 +153,11 @@ export default function CampaignCard({ campaign, index }: Props) {
             variant="body1"
             component="p"
             className={classes.progressBar}>
-            {t('campaigns:campaign.reached')}{' '}
             <b>
               {moneyPublic(reached, currency)}
               {' / '}
             </b>
-            {t('campaigns:campaign.target')} <b>{moneyPublic(target, currency)}</b>
+            <b>{moneyPublic(target, currency)}</b>
           </Typography>
           <Grid item xs={12}>
             <Box mx={2} mb={2}>

src/components/client/campaigns/CampaignProgress.tsx

@@ -1,57 +1,31 @@
 import React, { useMemo } from 'react'
-
-import { styled } from '@mui/material/styles'
-import LinearProgress from '@mui/material/LinearProgress'
-import { Grid } from '@mui/material'
-
 import { UUID } from 'gql/types'
 
-const PREFIX = 'CampaignProgress'
-
-const classes = {
-  root: `${PREFIX}-root`,
-  bar: `${PREFIX}-bar`,
-  donationProgress: `${PREFIX}-donationProgress`,
-  cardActions: `${PREFIX}-cardActions`,
-}
+import ProgressBar from '@ramonak/react-progress-bar'
 
-const StyledGrid = styled(Grid)(({ theme }) => ({
-  [`&.${classes.donationProgress}`]: {
-    width: '100%',
-    '> div p': {
-      color: theme.palette.text.secondary,
-      padding: theme.spacing(1),
-    },
-  },
-
-  [`& .${classes.cardActions}`]: {
-    padding: '0',
-  },
-}))
-
-const BorderLinearProgress = LinearProgress
+import theme from 'common/theme'
 
 type Props = {
   campaignId: UUID
   raised: number
   target: number
 }
+
 export default function CampaignProgress({ campaignId, raised, target }: Props) {
   const percentage = useMemo(() => (raised / target) * 100, [raised, target])
 
   return (
-    <StyledGrid className={classes.donationProgress} container>
-      <Grid item xs={12}>
-        <BorderLinearProgress
-          variant="determinate"
-          value={percentage > 100 ? 100 : percentage}
-          aria-labelledby={`campaign-${campaignId}--donations-progressbar`}
-          classes={{
-            root: classes.root,
-            bar: classes.bar,
-          }}
-        />
-      </Grid>
-    </StyledGrid>
+    <ProgressBar
+      completed={percentage > 100 ? 100 : percentage}
+      aria-labelledby={`campaign-${campaignId}--donations-progressbar`}
+      height={theme.spacing(1.62)}
+      baseBgColor={'#b1defe'}
+      bgColor={theme.palette.primary.main}
+      labelColor={theme.palette.common.black}
+      borderRadius={theme.borders.round}
+      labelSize={theme.spacing(1.5)}
+      labelAlignment="right"
+      customLabelStyles={{ fontWeight: 400 }}
+    />
   )
 }

src/components/client/campaigns/CampaignsPage.tsx

@@ -20,10 +20,6 @@ const classes = {
 }
 
 const Root = styled(Layout)(({ theme }) => ({
-  [theme.breakpoints.up('sm')]: {
-    paddingTop: theme.spacing(12),
-  },
-
   [theme.breakpoints.up(2000)]: {
     maxWidth: theme.spacing(165),
     paddingTop: theme.spacing(4),

src/components/client/campaigns/InlineDonation.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react'
 
-import { useTranslation } from 'next-i18next'
+import { i18n, useTranslation } from 'next-i18next'
 import { useRouter } from 'next/router'
 
 import { CampaignResponse } from 'gql/campaigns'
@@ -35,7 +35,8 @@ const PREFIX = 'InlineDonation'
 const classes = {
   inlineDonationWrapper: `${PREFIX}-inlineDonationWrapper`,
   reachedAndTargetMoneyWrapper: `${PREFIX}-reachedAndTargetMoneyWrapper`,
-  reachedAndTargetMoney: `${PREFIX}-reachedAndTargetMoney`,
+  moneyUnit: `${PREFIX}-moneyUnit`,
+  moneyFraction: `${PREFIX}-moneyFraction`,
   donorsSharesCount: `${PREFIX}-donorsSharesCount`,
   donationPriceList: `${PREFIX}-donationPriceList`,
   dropdownLinkButton: `${PREFIX}-dropdownLinkButton`,
@@ -72,12 +73,20 @@ const StyledGrid = styled(Grid)(({ theme }) => ({
   [`& .${classes.reachedAndTargetMoneyWrapper}`]: {
     display: 'flex',
     justifyContent: 'space-between',
-    padding: theme.spacing(0, 1.75),
   },
 
-  [`& .${classes.reachedAndTargetMoney}`]: {
+  [`& .${classes.moneyUnit}`]: {
     fontSize: theme.typography.pxToRem(16),
     color: theme.palette.common.black,
+    fontWeight: 500,
+  },
+
+  [`& .${classes.moneyFraction}`]: {
+    display: 'inline-flex',
+    fontSize: theme.typography.pxToRem(11),
+    color: theme.palette.common.black,
+    verticalAlign: 'top',
+    margin: theme.spacing(0.25, 0, 0, 0.25),
   },
 
   [`& .${classes.donorsSharesCount}`]: {
@@ -217,12 +226,12 @@ export default function InlineDonation({ campaign }: Props) {
     id: campaignId,
     targetAmount: target,
     summary,
-    currency,
     allowDonationOnComplete,
     state: campaignState,
     slug: campaignSlug,
   } = campaign
-
+  const reachedAmount = moneyPublic(campaign.summary.reachedAmount)
+  const targetAmount = moneyPublic(campaign.targetAmount)
   const reached = summary?.reachedAmount ?? 0
   const donors = summary?.donors ?? 0
   const {
@@ -241,34 +250,29 @@ export default function InlineDonation({ campaign }: Props) {
 
   return (
     <StyledGrid item xs={12} p={3} className={classes.inlineDonationWrapper}>
-      {/* //TODO */}
-      {/* <Grid className={classes.campaignInfoWrapper}>
-         <Grid>
-          <Typography className={classes.campaignInfoKey}>{t('campaign.documents')}:</Typography>
-          <Typography className={classes.campaignInfoKey}>{t('campaign.guarantor')}:</Typography>
-          <Typography className={classes.campaignInfoKey}>{t('campaign.others')}:</Typography>
+      <Grid className={classes.reachedAndTargetMoneyWrapper}>
+        <Grid>
+          <Typography component="span" className={classes.moneyUnit}>
+            {i18n.language === 'bg' ? reachedAmount.split(',')[0] : reachedAmount.split('.')[0]}
+          </Typography>
+          <Typography component="span" className={classes.moneyFraction}>
+            {i18n.language === 'bg'
+              ? reachedAmount.split(',')[1].substring(0, 2)
+              : reachedAmount.split('.')[1]}
+          </Typography>
         </Grid>
         <Grid>
-          <ExternalLink href={''}>
-            <Typography className={classes.campaignInfoValue}>documents</Typography>
-          </ExternalLink>
-          <ExternalLink href={''}>
-            <Typography className={classes.campaignInfoValue}>guarant</Typography>
-          </ExternalLink>
-          <ExternalLink href={''}>
-            <Typography className={classes.campaignInfoValue}>others</Typography>
-          </ExternalLink>
+          <Typography component="span" className={classes.moneyUnit}>
+            {i18n.language === 'bg' ? targetAmount.split(',')[0] : targetAmount.split('.')[0]}
+          </Typography>
+          <Typography component="span" className={classes.moneyFraction}>
+            {i18n.language === 'bg'
+              ? targetAmount.split(',')[1].substring(0, 2)
+              : targetAmount.split('.')[1]}
+          </Typography>
         </Grid>
-      </Grid> */}
-      <Grid className={classes.reachedAndTargetMoneyWrapper}>
-        <Typography component="span" className={classes.reachedAndTargetMoney}>
-          {moneyPublic(reached, currency)}
-        </Typography>
-        <Typography component="span" className={classes.reachedAndTargetMoney}>
-          {moneyPublic(target, currency)}
-        </Typography>
       </Grid>
-      <Grid>
+      <Grid pt={1}>
         <CampaignProgress campaignId={campaignId} raised={reached} target={target} />
       </Grid>
       <Grid container gap={2} className={classes.buttonContainer}>

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

@@ -9,11 +9,16 @@ export const Root = styled(Card)(() => ({
   flexDirection: 'column',
   alignItems: 'initial',
   boxShadow: 'none',
+  position: 'relative',
+
+  '&:hover': {
+    filter: 'grayscale(15%)',
+    backgroundColor: '#F8F8F8	',
+  },
 
   [theme.breakpoints.up('lg')]: {
     '&:nth-of-type(1)': {
       gridArea: '1 / 1 / 3 / 3',
-      marginRight: theme.spacing(1.75),
 
       img: {
         height: theme.spacing(60.625),
@@ -76,17 +81,11 @@ export const SumNumber = styled('span')(() => ({
   },
 }))
 
-export const CampaignProgressWrapper = styled(Grid)(() => ({
-  span: {
-    borderRadius: theme.borders.round,
-    height: '11px',
-  },
-}))
-
 export const StyledCardActions = styled(CardActions)(() => ({
   position: 'absolute',
-  bottom: 10,
-  right: 10,
+  bottom: theme.spacing(14.37),
+  right: theme.spacing(0.75),
+  padding: 0,
 }))
 
 export const DonateButton = styled(LinkButton)(() => ({

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

@@ -4,14 +4,13 @@ import { CampaignResponse } from 'gql/campaigns'
 import { CardMedia } from '@mui/material'
 
 import Link from 'components/common/Link'
+import CampaignProgress from 'components/client/campaigns/CampaignProgress'
 import theme from 'common/theme'
 import { routes } from 'common/routes'
 import { campaignListPictureUrl } from 'common/util/campaignImageUrls'
 import { moneyPublic } from 'common/util/money'
-import CampaignProgress from '../../../../campaigns/CampaignProgress'
 
 import {
-  CampaignProgressWrapper,
   CampaignTitle,
   DonateButton,
   Root,
@@ -28,6 +27,7 @@ export default function ActiveCampaignCard({ campaign, index }: Props) {
   const { t } = useTranslation('campaigns')
   const { id, slug, title, summary, targetAmount: target } = campaign
   const campaignImagesUrl = campaignListPictureUrl(campaign)
+
   const reachedAmount = moneyPublic(campaign.summary.reachedAmount)
   const targetAmount = moneyPublic(campaign.targetAmount)
   const reached = summary ? summary.reachedAmount : 0
@@ -45,48 +45,44 @@ export default function ActiveCampaignCard({ campaign, index }: Props) {
 
             [theme.breakpoints.up('lg')]: {
               aspectRatio: '2',
-              height: theme.spacing(22.5),
+              height: theme.spacing(22.3),
               maxHeight: 'inherit',
             },
 
             [theme.breakpoints.up(1430)]: {
-              height: theme.spacing(28),
+              height: theme.spacing(27.9),
             },
           }}
         />
-        <StyledCardActions disableSpacing>
-          <DonateButton
-            href={routes.campaigns.oneTimeDonation(slug)}
-            variant="contained"
-            color="secondary">
-            {t('cta.support')}
-          </DonateButton>
-        </StyledCardActions>
-      </Link>
-      <StyledContent>
-        <SumWrapper>
-          <Sum>
-            {t('campaign.reached')}{' '}
-            <SumNumber>
-              {i18n.language === 'bg'
-                ? reachedAmount.split(',')[0] + ' лв.'
-                : reachedAmount.split('.')[0]}
-            </SumNumber>
-          </Sum>
-          <Sum style={{ fontWeight: 400 }}>
-            {t('campaign.target')}{' '}
-            <SumNumber>
-              {i18n.language === 'bg'
-                ? targetAmount.split(',')[0] + ' лв.'
-                : targetAmount.split('.')[0]}
-            </SumNumber>
-          </Sum>
-        </SumWrapper>
-        <CampaignProgressWrapper width={1}>
+        <StyledContent>
+          <SumWrapper>
+            <Sum>
+              <SumNumber>
+                {i18n.language === 'bg'
+                  ? reachedAmount.split(',')[0] + ' лв.'
+                  : reachedAmount.split('.')[0]}
+              </SumNumber>
+            </Sum>
+            <Sum>
+              <SumNumber>
+                {i18n.language === 'bg'
+                  ? targetAmount.split(',')[0] + ' лв.'
+                  : targetAmount.split('.')[0]}
+              </SumNumber>
+            </Sum>
+          </SumWrapper>
           <CampaignProgress campaignId={id} raised={reached} target={target} />
-        </CampaignProgressWrapper>
-        <CampaignTitle>{title}</CampaignTitle>
-      </StyledContent>
+          <CampaignTitle>{title}</CampaignTitle>
+        </StyledContent>
+      </Link>
+      <StyledCardActions disableSpacing>
+        <DonateButton
+          href={routes.campaigns.oneTimeDonation(slug)}
+          variant="contained"
+          color="secondary">
+          {t('cta.support')}
+        </DonateButton>
+      </StyledCardActions>
     </Root>
   )
 }

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

@@ -14,13 +14,13 @@ export const Root = styled('section')(() => ({
 
 export const ActiveCampaignsWrapper = styled(Grid)(() => ({
   display: 'grid',
-  marginTop: theme.spacing(3.875),
   gap: theme.spacing(4.62),
+  marginTop: theme.spacing(8),
 
   [theme.breakpoints.up('sm')]: {
     gridTemplateColumns: 'repeat(2, 1fr)',
-    marginTop: theme.spacing(7),
     gap: theme.spacing(3),
+    marginTop: theme.spacing(10),
   },
 
   [theme.breakpoints.up('md')]: {