diff --git a/package.json b/package.json index 462c00d0b..081628ca1 100644 --- a/package.json +++ b/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", diff --git a/public/locales/bg/campaigns.json b/public/locales/bg/campaigns.json index 57291c489..6dba84567 100644 --- a/public/locales/bg/campaigns.json +++ b/public/locales/bg/campaigns.json @@ -87,8 +87,6 @@ "amount": "Необходима сума", "type": "Тип кампания", "state": "Статус", - "reached": "Събрани:", - "target": "Цел:", "from": "от", "noCommissionInfo": "Подкрепи.бг работи с 0% комисиона. Заплащат се единствено банкови такси, които изрично се упоменават преди да направите дарението си.", "donors": "дарители", diff --git a/public/locales/en/campaigns.json b/public/locales/en/campaigns.json index f5958c741..effe64cde 100644 --- a/public/locales/en/campaigns.json +++ b/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", diff --git a/src/components/client/campaigns/CampaignCard.tsx b/src/components/client/campaigns/CampaignCard.tsx index fc50d6e95..fba1d18d5 100644 --- a/src/components/client/campaigns/CampaignCard.tsx +++ b/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')}{' '} {moneyPublic(reached, currency)} {' / '} - {t('campaigns:campaign.target')} {moneyPublic(target, currency)} + {moneyPublic(target, currency)} diff --git a/src/components/client/campaigns/CampaignProgress.tsx b/src/components/client/campaigns/CampaignProgress.tsx index 9ef1150ea..00a0ecc65 100644 --- a/src/components/client/campaigns/CampaignProgress.tsx +++ b/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 ( - - - 100 ? 100 : percentage} - aria-labelledby={`campaign-${campaignId}--donations-progressbar`} - classes={{ - root: classes.root, - bar: classes.bar, - }} - /> - - + 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 }} + /> ) } diff --git a/src/components/client/campaigns/CampaignsPage.tsx b/src/components/client/campaigns/CampaignsPage.tsx index 716c3e34c..c451e392e 100644 --- a/src/components/client/campaigns/CampaignsPage.tsx +++ b/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), diff --git a/src/components/client/campaigns/InlineDonation.tsx b/src/components/client/campaigns/InlineDonation.tsx index 51f5ce794..898f341f7 100644 --- a/src/components/client/campaigns/InlineDonation.tsx +++ b/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 ( - {/* //TODO */} - {/* - - {t('campaign.documents')}: - {t('campaign.guarantor')}: - {t('campaign.others')}: + + + + {i18n.language === 'bg' ? reachedAmount.split(',')[0] : reachedAmount.split('.')[0]} + + + {i18n.language === 'bg' + ? reachedAmount.split(',')[1].substring(0, 2) + : reachedAmount.split('.')[1]} + - - documents - - - guarant - - - others - + + {i18n.language === 'bg' ? targetAmount.split(',')[0] : targetAmount.split('.')[0]} + + + {i18n.language === 'bg' + ? targetAmount.split(',')[1].substring(0, 2) + : targetAmount.split('.')[1]} + - */} - - - {moneyPublic(reached, currency)} - - - {moneyPublic(target, currency)} - - + diff --git a/src/components/client/index/sections/ActiveCampaignsSection/ActiveCampaignCard/ActiveCampaignCard.styled.tsx b/src/components/client/index/sections/ActiveCampaignsSection/ActiveCampaignCard/ActiveCampaignCard.styled.tsx index cc55046c0..7faf5d188 100644 --- a/src/components/client/index/sections/ActiveCampaignsSection/ActiveCampaignCard/ActiveCampaignCard.styled.tsx +++ b/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)(() => ({ diff --git a/src/components/client/index/sections/ActiveCampaignsSection/ActiveCampaignCard/ActiveCampaignCard.tsx b/src/components/client/index/sections/ActiveCampaignsSection/ActiveCampaignCard/ActiveCampaignCard.tsx index 8b1f81a7c..0ae48ca8c 100644 --- a/src/components/client/index/sections/ActiveCampaignsSection/ActiveCampaignCard/ActiveCampaignCard.tsx +++ b/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), }, }} /> - - - {t('cta.support')} - - - - - - - {t('campaign.reached')}{' '} - - {i18n.language === 'bg' - ? reachedAmount.split(',')[0] + ' лв.' - : reachedAmount.split('.')[0]} - - - - {t('campaign.target')}{' '} - - {i18n.language === 'bg' - ? targetAmount.split(',')[0] + ' лв.' - : targetAmount.split('.')[0]} - - - - + + + + + {i18n.language === 'bg' + ? reachedAmount.split(',')[0] + ' лв.' + : reachedAmount.split('.')[0]} + + + + + {i18n.language === 'bg' + ? targetAmount.split(',')[0] + ' лв.' + : targetAmount.split('.')[0]} + + + - - {title} - + {title} + + + + + {t('cta.support')} + + ) } diff --git a/src/components/client/index/sections/ActiveCampaignsSection/ActiveCampaignsSection.styled.tsx b/src/components/client/index/sections/ActiveCampaignsSection/ActiveCampaignsSection.styled.tsx index 1462afe6a..59d772da3 100644 --- a/src/components/client/index/sections/ActiveCampaignsSection/ActiveCampaignsSection.styled.tsx +++ b/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')]: { diff --git a/yarn.lock b/yarn.lock index 4a0ba3428..0a11d61da 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1564,6 +1564,16 @@ __metadata: languageName: node linkType: hard +"@ramonak/react-progress-bar@npm:^5.0.3": + version: 5.0.3 + resolution: "@ramonak/react-progress-bar@npm:5.0.3" + peerDependencies: + react: ^16.0.0 || ^17 || ^18 + react-dom: ^16.0.0 || ^17 || ^18 + checksum: e041fa20749448eb46ef4a4abb6e6b7a1fd0dee4e75005e838a6cf7f0f42f1c8096c6a237986a5bfd531dd75995d3268ca713f1a5a5146496b8baaf99b2ddf3d + languageName: node + linkType: hard + "@react-pdf/fns@npm:2.0.1": version: 2.0.1 resolution: "@react-pdf/fns@npm:2.0.1" @@ -8610,6 +8620,7 @@ __metadata: "@next/bundle-analyzer": ^12.1.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