From 1dcce74888d298784716f2a0fc955c5f4b344be3 Mon Sep 17 00:00:00 2001 From: ani-kalpachka Date: Wed, 29 Mar 2023 16:53:26 +0300 Subject: [PATCH 01/24] Update Homepage design - initial changes --- public/locales/bg/index.json | 4 +- public/locales/en/index.json | 4 +- src/components/client/index/IndexPage.tsx | 10 ++- .../CampaignsSection.styled.tsx | 12 ---- .../CampaignsSection/CampaignsSection.tsx | 22 +++--- .../sections/Jumbotron/Jumbotron.styled.tsx | 70 ------------------- .../index/sections/Jumbotron/Jumbotron.tsx | 34 --------- 7 files changed, 17 insertions(+), 139 deletions(-) delete mode 100644 src/components/client/index/sections/Jumbotron/Jumbotron.styled.tsx delete mode 100644 src/components/client/index/sections/Jumbotron/Jumbotron.tsx diff --git a/public/locales/bg/index.json b/public/locales/bg/index.json index 6042c847e..8119dc7ac 100644 --- a/public/locales/bg/index.json +++ b/public/locales/bg/index.json @@ -1,7 +1,5 @@ { - "podkrepi": "Подкрепи.бг", - "title": "прозрачна онлайн дарителска платформа", - "title2": "Подкрепи.бг - прозрачна онлайн дарителска платформа", + "title": "Подкрепи.бг - прозрачна онлайн дарителска платформа", "metaDescription": "Подкрепи.бг е прозрачна и безплатна онлайн дарителска платформа, създадена от доброволния труд на членовете на сдружение Подкрепи БГ.", "activity-section": { "heading": "Какво правим?", diff --git a/public/locales/en/index.json b/public/locales/en/index.json index 8af2f279d..52bfea1e4 100644 --- a/public/locales/en/index.json +++ b/public/locales/en/index.json @@ -1,7 +1,5 @@ { - "podkrepi": "Podkrepi.bg", - "title": "a transparent online donation platform", - "title2": "Podkrepi.bg - a transparent online donation platform", + "title": "Podkrepi.bg - a transparent online donation platform", "metaDescription": "Podkrepi.bg is a transparent online donation platform created by a team of volunteers from the Podkrepi BG organization.", "activity-section": { "heading": "What do we do?", diff --git a/src/components/client/index/IndexPage.tsx b/src/components/client/index/IndexPage.tsx index 9a87b9342..0d84cc732 100644 --- a/src/components/client/index/IndexPage.tsx +++ b/src/components/client/index/IndexPage.tsx @@ -1,6 +1,6 @@ import { useTranslation } from 'next-i18next' + import Layout from 'components/client/layout/Layout' -import Jumbotron from './sections/Jumbotron/Jumbotron' import CampaignsSection from './sections/CampaignsSection/CampaignsSection' import HowWeWorkSection from './sections/HowWeWorkSection/HowWeWorkSection' import TeamMembersSection from './sections/TeamMembersSection/TeamMembersSection' @@ -8,16 +8,14 @@ import JoinPodkrepiBgSection from './sections/JoinPodkrepiBgSection/JoinPodkrepi import FaqSection from './sections/FaqSection/FaqSection' export default function IndexPage() { - const { t } = useTranslation() - + const { t } = useTranslation('index') return ( - + title={t('title')} + metaDescription={t('metaDescription')}> diff --git a/src/components/client/index/sections/CampaignsSection/CampaignsSection.styled.tsx b/src/components/client/index/sections/CampaignsSection/CampaignsSection.styled.tsx index 956a94201..61bed800b 100644 --- a/src/components/client/index/sections/CampaignsSection/CampaignsSection.styled.tsx +++ b/src/components/client/index/sections/CampaignsSection/CampaignsSection.styled.tsx @@ -1,4 +1,3 @@ -import { Typography } from '@mui/material' import { styled } from '@mui/material/styles' import theme from 'common/theme' @@ -15,14 +14,3 @@ export const Root = styled('section')(() => ({ margin: `${theme.spacing(4)} auto`, }, })) - -export const UrgentCampaignsHeading = styled(Typography)(() => ({ - marginBottom: theme.spacing(6), - color: theme.palette.common.black, - textAlign: 'center', - fontWeight: 500, - - [theme.breakpoints.up('lg')]: { - fontSize: theme.typography.pxToRem(48), - }, -})) diff --git a/src/components/client/index/sections/CampaignsSection/CampaignsSection.tsx b/src/components/client/index/sections/CampaignsSection/CampaignsSection.tsx index 6c9adbc45..d4d8d5f42 100644 --- a/src/components/client/index/sections/CampaignsSection/CampaignsSection.tsx +++ b/src/components/client/index/sections/CampaignsSection/CampaignsSection.tsx @@ -1,31 +1,31 @@ import { useTranslation } from 'next-i18next' -import { Grid, Box } from '@mui/material' +import { Grid } from '@mui/material' import ChevronRightIcon from '@mui/icons-material/ChevronRight' import CampaignCard from 'components/client/campaigns/CampaignCard' import { useCampaignList } from 'common/hooks/campaigns' import { routes } from 'common/routes' import { OutlinedButton } from '../../IndexPage.styled' -import { Root, UrgentCampaignsHeading } from './CampaignsSection.styled' +import { Root } from './CampaignsSection.styled' +import { CampaignState } from 'components/client/campaigns/helpers/campaign.enums' export default function CampaignsSection() { - const { data } = useCampaignList() const { t } = useTranslation('index') - if (data === undefined) { + const { data } = useCampaignList() + const activeCampaigns = data + ?.filter((campaign) => campaign.state === CampaignState.active) + .slice(0, 5) + + if (activeCampaigns === undefined) { return null } else { return ( - - {t('campaign.urgent-campaigns')} - - {data?.slice(0, 12).map((campaign, index) => ( + {activeCampaigns?.map((campaign, index) => ( - - - + ))} diff --git a/src/components/client/index/sections/Jumbotron/Jumbotron.styled.tsx b/src/components/client/index/sections/Jumbotron/Jumbotron.styled.tsx deleted file mode 100644 index 203ef49d1..000000000 --- a/src/components/client/index/sections/Jumbotron/Jumbotron.styled.tsx +++ /dev/null @@ -1,70 +0,0 @@ -import { Grid } from '@mui/material' -import { styled } from '@mui/material/styles' - -import LinkButton from 'components/common/LinkButton' -import theme from 'common/theme' - -const bannerSource = '/img/family.jpg' - -export const Root = styled('section')(() => ({ - backgroundImage: `url(${bannerSource})`, - height: theme.spacing(49.375), - padding: theme.spacing(6.25, 1), - margin: theme.spacing(4, 0, 8, 0), - backgroundPosition: '75%', - backgroundSize: 'cover', - backgroundRepeat: 'no-repeat', - - [theme.breakpoints.up('sm')]: { - margin: theme.spacing(4, 0, 12, 0), - }, - - [theme.breakpoints.up('md')]: { - marginTop: theme.spacing(7), - }, -})) - -export const JumbotronWrapper = styled(Grid)(() => ({ - textAlign: 'left', - - [theme.breakpoints.up('md')]: { - paddingLeft: theme.spacing(11), - }, -})) - -export const MainTitle = styled('h1')(() => ({ - color: theme.palette.common.white, - fontWeight: 500, - marginTop: 0, - marginBottom: theme.spacing(4), - fontSize: theme.typography.pxToRem(30), - maxWidth: theme.spacing(56), - - [theme.breakpoints.up('md')]: { - fontSize: theme.typography.pxToRem(32), - }, - - [theme.breakpoints.up('lg')]: { - fontSize: theme.typography.pxToRem(42), - maxWidth: theme.spacing(73), - }, -})) - -export const DonateButton = styled(LinkButton)(() => ({ - fontWeight: 600, - borderRadius: theme.borders.round, - backgroundColor: theme.palette.primary.light, - minWidth: theme.spacing(25), - - '&:hover': { - backgroundColor: theme.palette.primary.main, - }, - - [theme.breakpoints.up('md')]: { - fontSize: theme.typography.pxToRem(22), - }, - - [theme.breakpoints.up('md')]: { - minWidth: theme.spacing(40), - }, -})) diff --git a/src/components/client/index/sections/Jumbotron/Jumbotron.tsx b/src/components/client/index/sections/Jumbotron/Jumbotron.tsx deleted file mode 100644 index 24d002b05..000000000 --- a/src/components/client/index/sections/Jumbotron/Jumbotron.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import React from 'react' - -import { useTranslation } from 'next-i18next' - -import { Container } from '@mui/material' - -import { routes } from 'common/routes' - -import { Root, JumbotronWrapper, MainTitle, DonateButton } from './Jumbotron.styled' - -export default function Jumbotron() { - const { t } = useTranslation() - - return ( - - - - - {t('index:podkrepi')} - -
- {t('index:title')} - - - {t('common:nav.donate')} - - - - - ) -} From a870bfc39f5f9fb856bd341716da8d85bca05fd8 Mon Sep 17 00:00:00 2001 From: ani-kalpachka Date: Wed, 29 Mar 2023 17:07:18 +0300 Subject: [PATCH 02/24] Extract ActiveCampaigns component --- .../ActiveCampaignCard.styled.tsx | 30 +++++++++++ .../ActiveCampaignCard/ActiveCampaignCard.tsx | 53 +++++++++++++++++++ .../CampaignsSection.styled.tsx | 4 +- .../CampaignsSection/CampaignsSection.tsx | 22 ++------ 4 files changed, 89 insertions(+), 20 deletions(-) create mode 100644 src/components/client/index/components/ActiveCampaignCard/ActiveCampaignCard.styled.tsx create mode 100644 src/components/client/index/components/ActiveCampaignCard/ActiveCampaignCard.tsx diff --git a/src/components/client/index/components/ActiveCampaignCard/ActiveCampaignCard.styled.tsx b/src/components/client/index/components/ActiveCampaignCard/ActiveCampaignCard.styled.tsx new file mode 100644 index 000000000..e28dd3a35 --- /dev/null +++ b/src/components/client/index/components/ActiveCampaignCard/ActiveCampaignCard.styled.tsx @@ -0,0 +1,30 @@ +import { CardMedia, Typography } from '@mui/material' +import { styled } from '@mui/material/styles' + +import LinkButton from 'components/common/LinkButton' +import theme from 'common/theme' + +export const CardWrapper = styled(Typography)(() => ({ + border: 'none', + + '&:hover': { + 'a button': { + display: 'flex', + }, + }, +})) + +export const Card = styled(CardMedia)(() => ({ + height: 200, +})) + +export const CampaignTitle = styled(Typography)(() => ({ + fontWeight: 500, + position: 'relative', + color: theme.palette.common.white, +})) + +export const SupportNowButton = styled(LinkButton)(() => ({ + display: 'none', + fontWeight: 'bold', +})) diff --git a/src/components/client/index/components/ActiveCampaignCard/ActiveCampaignCard.tsx b/src/components/client/index/components/ActiveCampaignCard/ActiveCampaignCard.tsx new file mode 100644 index 000000000..a66334a8c --- /dev/null +++ b/src/components/client/index/components/ActiveCampaignCard/ActiveCampaignCard.tsx @@ -0,0 +1,53 @@ +import { useTranslation } from 'next-i18next' +import Image from 'next/image' +import Link from 'next/link' + +import { CampaignResponse } from 'gql/campaigns' + +import { Favorite } from '@mui/icons-material' +import { CardActionArea, CardContent } from '@mui/material' + +import { routes } from 'common/routes' +import { campaignListPictureUrl } from 'common/util/campaignImageUrls' +import { CampaignState } from 'components/client/campaigns/helpers/campaign.enums' + +import { CampaignTitle, Card, CardWrapper, SupportNowButton } from './ActiveCampaignCard.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 pictureUrl = campaignListPictureUrl(campaign) + + return ( + + + +
+ {title} +
+ + + + {title} + + + + }> + {t('cta.support-now')} + + + ) +} diff --git a/src/components/client/index/sections/CampaignsSection/CampaignsSection.styled.tsx b/src/components/client/index/sections/CampaignsSection/CampaignsSection.styled.tsx index 61bed800b..0994f1d98 100644 --- a/src/components/client/index/sections/CampaignsSection/CampaignsSection.styled.tsx +++ b/src/components/client/index/sections/CampaignsSection/CampaignsSection.styled.tsx @@ -3,10 +3,8 @@ import { styled } from '@mui/material/styles' import theme from 'common/theme' export const Root = styled('section')(() => ({ - margin: theme.spacing(7, 3, 0, 3), - [theme.breakpoints.up('sm')]: { - margin: theme.spacing(12, 4, 0, 4), + marginTop: theme.spacing(12), }, [theme.breakpoints.up(2000)]: { diff --git a/src/components/client/index/sections/CampaignsSection/CampaignsSection.tsx b/src/components/client/index/sections/CampaignsSection/CampaignsSection.tsx index d4d8d5f42..29ce612ac 100644 --- a/src/components/client/index/sections/CampaignsSection/CampaignsSection.tsx +++ b/src/components/client/index/sections/CampaignsSection/CampaignsSection.tsx @@ -1,17 +1,12 @@ -import { useTranslation } from 'next-i18next' - import { Grid } from '@mui/material' -import ChevronRightIcon from '@mui/icons-material/ChevronRight' -import CampaignCard from 'components/client/campaigns/CampaignCard' + import { useCampaignList } from 'common/hooks/campaigns' -import { routes } from 'common/routes' +import { CampaignState } from 'components/client/campaigns/helpers/campaign.enums' +import ActiveCampaignCard from '../../components/ActiveCampaignCard/ActiveCampaignCard' -import { OutlinedButton } from '../../IndexPage.styled' import { Root } from './CampaignsSection.styled' -import { CampaignState } from 'components/client/campaigns/helpers/campaign.enums' export default function CampaignsSection() { - const { t } = useTranslation('index') const { data } = useCampaignList() const activeCampaigns = data ?.filter((campaign) => campaign.state === CampaignState.active) @@ -23,20 +18,13 @@ export default function CampaignsSection() { return ( + {' '} {activeCampaigns?.map((campaign, index) => ( - + {' '} ))} - - }> - {t('campaign.see-all')} - - ) } From b7deacc9ded80b876fa1cf89057ddfc8438126f9 Mon Sep 17 00:00:00 2001 From: ani-kalpachka Date: Wed, 29 Mar 2023 17:12:46 +0300 Subject: [PATCH 03/24] Arrange CampaignCard's grid --- .../ActiveCampaignCard.styled.tsx | 13 +++++-------- .../ActiveCampaignCard/ActiveCampaignCard.tsx | 10 ++-------- .../CampaignsSection/CampaignsSection.styled.tsx | 12 +++++++++++- .../sections/CampaignsSection/CampaignsSection.tsx | 13 +++---------- 4 files changed, 21 insertions(+), 27 deletions(-) diff --git a/src/components/client/index/components/ActiveCampaignCard/ActiveCampaignCard.styled.tsx b/src/components/client/index/components/ActiveCampaignCard/ActiveCampaignCard.styled.tsx index e28dd3a35..c581dce15 100644 --- a/src/components/client/index/components/ActiveCampaignCard/ActiveCampaignCard.styled.tsx +++ b/src/components/client/index/components/ActiveCampaignCard/ActiveCampaignCard.styled.tsx @@ -1,10 +1,10 @@ -import { CardMedia, Typography } from '@mui/material' +import { Card, Typography } from '@mui/material' import { styled } from '@mui/material/styles' import LinkButton from 'components/common/LinkButton' import theme from 'common/theme' -export const CardWrapper = styled(Typography)(() => ({ +export const CardWrapper = styled(Card)(() => ({ border: 'none', '&:hover': { @@ -14,17 +14,14 @@ export const CardWrapper = styled(Typography)(() => ({ }, })) -export const Card = styled(CardMedia)(() => ({ - height: 200, -})) - export const CampaignTitle = styled(Typography)(() => ({ - fontWeight: 500, + fontSize: theme.typography.pxToRem(16), + fontWeight: 600, position: 'relative', color: theme.palette.common.white, })) export const SupportNowButton = styled(LinkButton)(() => ({ - display: 'none', + // display: 'none', fontWeight: 'bold', })) diff --git a/src/components/client/index/components/ActiveCampaignCard/ActiveCampaignCard.tsx b/src/components/client/index/components/ActiveCampaignCard/ActiveCampaignCard.tsx index a66334a8c..3dd0be5e3 100644 --- a/src/components/client/index/components/ActiveCampaignCard/ActiveCampaignCard.tsx +++ b/src/components/client/index/components/ActiveCampaignCard/ActiveCampaignCard.tsx @@ -1,5 +1,4 @@ import { useTranslation } from 'next-i18next' -import Image from 'next/image' import Link from 'next/link' import { CampaignResponse } from 'gql/campaigns' @@ -11,7 +10,7 @@ import { routes } from 'common/routes' import { campaignListPictureUrl } from 'common/util/campaignImageUrls' import { CampaignState } from 'components/client/campaigns/helpers/campaign.enums' -import { CampaignTitle, Card, CardWrapper, SupportNowButton } from './ActiveCampaignCard.styled' +import { CampaignTitle, CardWrapper, SupportNowButton } from './ActiveCampaignCard.styled' type Props = { campaign: CampaignResponse; index: number } @@ -23,16 +22,11 @@ export default function ActiveCampaignCard({ campaign, index }: Props) { const pictureUrl = campaignListPictureUrl(campaign) return ( - + - -
- {title} -
- {title} diff --git a/src/components/client/index/sections/CampaignsSection/CampaignsSection.styled.tsx b/src/components/client/index/sections/CampaignsSection/CampaignsSection.styled.tsx index 0994f1d98..c0545b314 100644 --- a/src/components/client/index/sections/CampaignsSection/CampaignsSection.styled.tsx +++ b/src/components/client/index/sections/CampaignsSection/CampaignsSection.styled.tsx @@ -3,8 +3,18 @@ import { styled } from '@mui/material/styles' import theme from 'common/theme' export const Root = styled('section')(() => ({ + display: 'grid', + gridTemplateColumns: '1fr 1fr 1fr 1fr', + + 'div:nth-of-type(1)': { + gridRowStart: 1, + gridColumnStart: 1, + gridRowEnd: 3, + gridColumnEnd: 3, + }, + [theme.breakpoints.up('sm')]: { - marginTop: theme.spacing(12), + marginTop: theme.spacing(7), }, [theme.breakpoints.up(2000)]: { diff --git a/src/components/client/index/sections/CampaignsSection/CampaignsSection.tsx b/src/components/client/index/sections/CampaignsSection/CampaignsSection.tsx index 29ce612ac..01f00bb1f 100644 --- a/src/components/client/index/sections/CampaignsSection/CampaignsSection.tsx +++ b/src/components/client/index/sections/CampaignsSection/CampaignsSection.tsx @@ -1,5 +1,3 @@ -import { Grid } from '@mui/material' - import { useCampaignList } from 'common/hooks/campaigns' import { CampaignState } from 'components/client/campaigns/helpers/campaign.enums' import ActiveCampaignCard from '../../components/ActiveCampaignCard/ActiveCampaignCard' @@ -17,14 +15,9 @@ export default function CampaignsSection() { } else { return ( - - {' '} - {activeCampaigns?.map((campaign, index) => ( - - {' '} - - ))} - + {activeCampaigns?.map((campaign, index) => ( + + ))} ) } From 6aeb579cf7b627b09d3f00ec7339a29d5b7008d3 Mon Sep 17 00:00:00 2001 From: ani-kalpachka Date: Wed, 29 Mar 2023 17:16:39 +0300 Subject: [PATCH 04/24] Update ActiveCampaigns section UI --- .../ActiveCampaignCard.styled.tsx | 22 +++----- .../ActiveCampaignCard/ActiveCampaignCard.tsx | 55 ++++++++++--------- .../CampaignsSection.styled.tsx | 3 +- 3 files changed, 40 insertions(+), 40 deletions(-) diff --git a/src/components/client/index/components/ActiveCampaignCard/ActiveCampaignCard.styled.tsx b/src/components/client/index/components/ActiveCampaignCard/ActiveCampaignCard.styled.tsx index c581dce15..a4b7f972a 100644 --- a/src/components/client/index/components/ActiveCampaignCard/ActiveCampaignCard.styled.tsx +++ b/src/components/client/index/components/ActiveCampaignCard/ActiveCampaignCard.styled.tsx @@ -1,24 +1,18 @@ -import { Card, Typography } from '@mui/material' +import { CardContent } from '@mui/material' import { styled } from '@mui/material/styles' import LinkButton from 'components/common/LinkButton' import theme from 'common/theme' -export const CardWrapper = styled(Card)(() => ({ - border: 'none', - - '&:hover': { - 'a button': { - display: 'flex', - }, - }, +export const Content = styled(CardContent)(() => ({ + padding: theme.spacing(0, 4), })) -export const CampaignTitle = styled(Typography)(() => ({ - fontSize: theme.typography.pxToRem(16), - fontWeight: 600, - position: 'relative', - color: theme.palette.common.white, +export const CampaignTitle = styled('h6')(() => ({ + visibility: 'hidden', + fontWeight: 'bold', + width: '290px', + height: '40px', })) export const SupportNowButton = styled(LinkButton)(() => ({ diff --git a/src/components/client/index/components/ActiveCampaignCard/ActiveCampaignCard.tsx b/src/components/client/index/components/ActiveCampaignCard/ActiveCampaignCard.tsx index 3dd0be5e3..bc190c438 100644 --- a/src/components/client/index/components/ActiveCampaignCard/ActiveCampaignCard.tsx +++ b/src/components/client/index/components/ActiveCampaignCard/ActiveCampaignCard.tsx @@ -4,44 +4,49 @@ import Link from 'next/link' import { CampaignResponse } from 'gql/campaigns' import { Favorite } from '@mui/icons-material' -import { CardActionArea, CardContent } from '@mui/material' +import { CardActionArea } from '@mui/material' import { routes } from 'common/routes' import { campaignListPictureUrl } from 'common/util/campaignImageUrls' import { CampaignState } from 'components/client/campaigns/helpers/campaign.enums' -import { CampaignTitle, CardWrapper, SupportNowButton } from './ActiveCampaignCard.styled' +import { CampaignTitle, Content, SupportNowButton } from './ActiveCampaignCard.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 pictureUrl = campaignListPictureUrl(campaign) return ( - - - - - {title} - - - - }> - {t('cta.support-now')} - - + + + {title} + }> + {t('cta.support-now')} + + + ) } diff --git a/src/components/client/index/sections/CampaignsSection/CampaignsSection.styled.tsx b/src/components/client/index/sections/CampaignsSection/CampaignsSection.styled.tsx index c0545b314..e8e775ad7 100644 --- a/src/components/client/index/sections/CampaignsSection/CampaignsSection.styled.tsx +++ b/src/components/client/index/sections/CampaignsSection/CampaignsSection.styled.tsx @@ -6,7 +6,8 @@ export const Root = styled('section')(() => ({ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr 1fr', - 'div:nth-of-type(1)': { + 'a:nth-of-type(1)': { + minHeight: theme.spacing(60.25), gridRowStart: 1, gridColumnStart: 1, gridRowEnd: 3, From 818be5cc6df7fc9eedc6073a0dffcadf2de3ea67 Mon Sep 17 00:00:00 2001 From: ani-kalpachka Date: Wed, 29 Mar 2023 17:21:47 +0300 Subject: [PATCH 05/24] Finalize ActiveCamapigns section fot desktop --- .../ActiveCampaignCard.styled.tsx | 10 ++++--- .../ActiveCampaignCard/ActiveCampaignCard.tsx | 27 ++++++++++++------- 2 files changed, 24 insertions(+), 13 deletions(-) diff --git a/src/components/client/index/components/ActiveCampaignCard/ActiveCampaignCard.styled.tsx b/src/components/client/index/components/ActiveCampaignCard/ActiveCampaignCard.styled.tsx index a4b7f972a..495d616e8 100644 --- a/src/components/client/index/components/ActiveCampaignCard/ActiveCampaignCard.styled.tsx +++ b/src/components/client/index/components/ActiveCampaignCard/ActiveCampaignCard.styled.tsx @@ -6,13 +6,17 @@ import theme from 'common/theme' export const Content = styled(CardContent)(() => ({ padding: theme.spacing(0, 4), + position: 'absolute', + width: '100%', + bottom: theme.spacing(2), })) export const CampaignTitle = styled('h6')(() => ({ visibility: 'hidden', - fontWeight: 'bold', - width: '290px', - height: '40px', + width: theme.spacing(36.25), + height: theme.spacing(5), + fontWeight: 600, + fontSize: theme.typography.pxToRem(12), })) export const SupportNowButton = styled(LinkButton)(() => ({ diff --git a/src/components/client/index/components/ActiveCampaignCard/ActiveCampaignCard.tsx b/src/components/client/index/components/ActiveCampaignCard/ActiveCampaignCard.tsx index bc190c438..9a7e688ab 100644 --- a/src/components/client/index/components/ActiveCampaignCard/ActiveCampaignCard.tsx +++ b/src/components/client/index/components/ActiveCampaignCard/ActiveCampaignCard.tsx @@ -4,9 +4,10 @@ import Link from 'next/link' import { CampaignResponse } from 'gql/campaigns' import { Favorite } from '@mui/icons-material' -import { CardActionArea } from '@mui/material' +import { CardActionArea, Grid } from '@mui/material' import { routes } from 'common/routes' +import theme from 'common/theme' import { campaignListPictureUrl } from 'common/util/campaignImageUrls' import { CampaignState } from 'components/client/campaigns/helpers/campaign.enums' @@ -28,7 +29,11 @@ export default function ActiveCampaignCard({ campaign, index }: Props) { background: `url(${pictureUrl})`, height: '100%', backgroundSize: 'cover', + border: `1px solid ${theme.palette.common.white}`, + '&:hover': { + opacity: 0.9, + 'a button': { visibility: 'visible', margin: '0 auto', @@ -37,15 +42,17 @@ export default function ActiveCampaignCard({ campaign, index }: Props) { }}> {title} - }> - {t('cta.support-now')} - + + }> + {t('cta.support-now')} + + ) From bc2c8c6b20aa568f3fd840b23513f10dea0568e1 Mon Sep 17 00:00:00 2001 From: ani-kalpachka Date: Wed, 29 Mar 2023 17:27:25 +0300 Subject: [PATCH 06/24] Finalize ActiveCampaigns section for mobile and tablet --- .../ActiveCampaignCard.styled.tsx | 10 +++++++++- .../CampaignsSection.styled.tsx | 20 +++++++++++++------ 2 files changed, 23 insertions(+), 7 deletions(-) diff --git a/src/components/client/index/components/ActiveCampaignCard/ActiveCampaignCard.styled.tsx b/src/components/client/index/components/ActiveCampaignCard/ActiveCampaignCard.styled.tsx index 495d616e8..80dfadba6 100644 --- a/src/components/client/index/components/ActiveCampaignCard/ActiveCampaignCard.styled.tsx +++ b/src/components/client/index/components/ActiveCampaignCard/ActiveCampaignCard.styled.tsx @@ -5,10 +5,14 @@ import LinkButton from 'components/common/LinkButton' import theme from 'common/theme' export const Content = styled(CardContent)(() => ({ - padding: theme.spacing(0, 4), + padding: theme.spacing(0, 1), position: 'absolute', width: '100%', bottom: theme.spacing(2), + + [theme.breakpoints.up('md')]: { + padding: theme.spacing(0, 4), + }, })) export const CampaignTitle = styled('h6')(() => ({ @@ -17,6 +21,10 @@ export const CampaignTitle = styled('h6')(() => ({ height: theme.spacing(5), fontWeight: 600, fontSize: theme.typography.pxToRem(12), + + [theme.breakpoints.down('md')]: { + visibility: 'visible', + }, })) export const SupportNowButton = styled(LinkButton)(() => ({ diff --git a/src/components/client/index/sections/CampaignsSection/CampaignsSection.styled.tsx b/src/components/client/index/sections/CampaignsSection/CampaignsSection.styled.tsx index e8e775ad7..84ba9e370 100644 --- a/src/components/client/index/sections/CampaignsSection/CampaignsSection.styled.tsx +++ b/src/components/client/index/sections/CampaignsSection/CampaignsSection.styled.tsx @@ -3,19 +3,27 @@ import { styled } from '@mui/material/styles' import theme from 'common/theme' export const Root = styled('section')(() => ({ + marginTop: theme.spacing(3.875), display: 'grid', - gridTemplateColumns: '1fr 1fr 1fr 1fr', + gridTemplateRows: 'repeat(5, 1fr)', 'a:nth-of-type(1)': { minHeight: theme.spacing(60.25), - gridRowStart: 1, - gridColumnStart: 1, - gridRowEnd: 3, - gridColumnEnd: 3, }, [theme.breakpoints.up('sm')]: { - marginTop: theme.spacing(7), + gridTemplateColumns: 'repeat(2, 1fr)', + + 'a:nth-of-type(1)': { + gridRowStart: 1, + gridColumnStart: 1, + gridRowEnd: 3, + gridColumnEnd: 3, + }, + }, + + [theme.breakpoints.up('md')]: { + gridTemplateColumns: '1fr 1fr 1fr 1fr', }, [theme.breakpoints.up(2000)]: { From c956e4017b968a7459832ae2bc05f3cf237385d3 Mon Sep 17 00:00:00 2001 From: ani-kalpachka Date: Wed, 29 Mar 2023 17:31:15 +0300 Subject: [PATCH 07/24] Update responsive styles for ActiveCamapigns section --- .../ActiveCampaignCard/ActiveCampaignCard.styled.tsx | 8 +++----- .../sections/CampaignsSection/CampaignsSection.styled.tsx | 5 ++++- 2 files changed, 7 insertions(+), 6 deletions(-) diff --git a/src/components/client/index/components/ActiveCampaignCard/ActiveCampaignCard.styled.tsx b/src/components/client/index/components/ActiveCampaignCard/ActiveCampaignCard.styled.tsx index 80dfadba6..a1b170a6d 100644 --- a/src/components/client/index/components/ActiveCampaignCard/ActiveCampaignCard.styled.tsx +++ b/src/components/client/index/components/ActiveCampaignCard/ActiveCampaignCard.styled.tsx @@ -11,20 +11,18 @@ export const Content = styled(CardContent)(() => ({ bottom: theme.spacing(2), [theme.breakpoints.up('md')]: { - padding: theme.spacing(0, 4), + padding: theme.spacing(0, 3), }, })) export const CampaignTitle = styled('h6')(() => ({ visibility: 'hidden', - width: theme.spacing(36.25), + maxWidth: theme.spacing(32), height: theme.spacing(5), fontWeight: 600, fontSize: theme.typography.pxToRem(12), - [theme.breakpoints.down('md')]: { - visibility: 'visible', - }, + [theme.breakpoints.down('lg')]: { visibility: 'visible' }, })) export const SupportNowButton = styled(LinkButton)(() => ({ diff --git a/src/components/client/index/sections/CampaignsSection/CampaignsSection.styled.tsx b/src/components/client/index/sections/CampaignsSection/CampaignsSection.styled.tsx index 84ba9e370..678787803 100644 --- a/src/components/client/index/sections/CampaignsSection/CampaignsSection.styled.tsx +++ b/src/components/client/index/sections/CampaignsSection/CampaignsSection.styled.tsx @@ -8,13 +8,15 @@ export const Root = styled('section')(() => ({ gridTemplateRows: 'repeat(5, 1fr)', 'a:nth-of-type(1)': { - minHeight: theme.spacing(60.25), + minHeight: theme.spacing(40), }, [theme.breakpoints.up('sm')]: { gridTemplateColumns: 'repeat(2, 1fr)', + gridTemplateRows: 'repeat(4, 1fr)', 'a:nth-of-type(1)': { + minHeight: theme.spacing(61), gridRowStart: 1, gridColumnStart: 1, gridRowEnd: 3, @@ -24,6 +26,7 @@ export const Root = styled('section')(() => ({ [theme.breakpoints.up('md')]: { gridTemplateColumns: '1fr 1fr 1fr 1fr', + gridTemplateRows: 'repeat(2, 1fr)', }, [theme.breakpoints.up(2000)]: { From 379330dc64489dbce52f0efaea8f7f8a1c8feaf8 Mon Sep 17 00:00:00 2001 From: ani-kalpachka Date: Wed, 29 Mar 2023 18:06:58 +0300 Subject: [PATCH 08/24] Rearrange ActiveCampaigns, create CompletedCampaigns --- public/locales/bg/campaigns.json | 1 + public/locales/en/campaigns.json | 1 + src/components/client/index/IndexPage.tsx | 6 ++++-- .../ActiveCampaignCard.styled.tsx | 0 .../ActiveCampaignCard/ActiveCampaignCard.tsx | 0 .../ActiveCampaignsSection.styled.tsx} | 0 .../ActiveCampaignsSection.tsx} | 6 +++--- .../CompletedCampaignsSection.tsx | 13 +++++++++++++ 8 files changed, 22 insertions(+), 5 deletions(-) rename src/components/client/index/{components => sections/ActiveCampaignsSection}/ActiveCampaignCard/ActiveCampaignCard.styled.tsx (100%) rename src/components/client/index/{components => sections/ActiveCampaignsSection}/ActiveCampaignCard/ActiveCampaignCard.tsx (100%) rename src/components/client/index/sections/{CampaignsSection/CampaignsSection.styled.tsx => ActiveCampaignsSection/ActiveCampaignsSection.styled.tsx} (100%) rename src/components/client/index/sections/{CampaignsSection/CampaignsSection.tsx => ActiveCampaignsSection/ActiveCampaignsSection.tsx} (75%) create mode 100644 src/components/client/index/sections/CompletedCampaignsSection/CompletedCampaignsSection.tsx diff --git a/public/locales/bg/campaigns.json b/public/locales/bg/campaigns.json index c7afe5d7e..1ce58d879 100644 --- a/public/locales/bg/campaigns.json +++ b/public/locales/bg/campaigns.json @@ -1,4 +1,5 @@ { + "completed-campaigns": "Завършили кампании", "of": "от", "subtitle": "Помогнете на нуждаещ се", "form-heading": "Предложете нова кампания", diff --git a/public/locales/en/campaigns.json b/public/locales/en/campaigns.json index 591e065b0..d2246deec 100644 --- a/public/locales/en/campaigns.json +++ b/public/locales/en/campaigns.json @@ -1,4 +1,5 @@ { + "completed-campaigns": "Completed campaign", "of": "of", "subtitle": "Help a person in need", "form-heading": "Create new campaign", diff --git a/src/components/client/index/IndexPage.tsx b/src/components/client/index/IndexPage.tsx index 0d84cc732..48f71af99 100644 --- a/src/components/client/index/IndexPage.tsx +++ b/src/components/client/index/IndexPage.tsx @@ -1,7 +1,8 @@ import { useTranslation } from 'next-i18next' import Layout from 'components/client/layout/Layout' -import CampaignsSection from './sections/CampaignsSection/CampaignsSection' +import ActiveCampaignsSection from './sections/ActiveCampaignsSection/ActiveCampaignsSection' +import CompletedCampaignsSectiom from './sections/CompletedCampaignsSection/CompletedCampaignsSection' import HowWeWorkSection from './sections/HowWeWorkSection/HowWeWorkSection' import TeamMembersSection from './sections/TeamMembersSection/TeamMembersSection' import JoinPodkrepiBgSection from './sections/JoinPodkrepiBgSection/JoinPodkrepiBgSection' @@ -16,7 +17,8 @@ export default function IndexPage() { disableGutters title={t('title')} metaDescription={t('metaDescription')}> - + + diff --git a/src/components/client/index/components/ActiveCampaignCard/ActiveCampaignCard.styled.tsx b/src/components/client/index/sections/ActiveCampaignsSection/ActiveCampaignCard/ActiveCampaignCard.styled.tsx similarity index 100% rename from src/components/client/index/components/ActiveCampaignCard/ActiveCampaignCard.styled.tsx rename to src/components/client/index/sections/ActiveCampaignsSection/ActiveCampaignCard/ActiveCampaignCard.styled.tsx diff --git a/src/components/client/index/components/ActiveCampaignCard/ActiveCampaignCard.tsx b/src/components/client/index/sections/ActiveCampaignsSection/ActiveCampaignCard/ActiveCampaignCard.tsx similarity index 100% rename from src/components/client/index/components/ActiveCampaignCard/ActiveCampaignCard.tsx rename to src/components/client/index/sections/ActiveCampaignsSection/ActiveCampaignCard/ActiveCampaignCard.tsx diff --git a/src/components/client/index/sections/CampaignsSection/CampaignsSection.styled.tsx b/src/components/client/index/sections/ActiveCampaignsSection/ActiveCampaignsSection.styled.tsx similarity index 100% rename from src/components/client/index/sections/CampaignsSection/CampaignsSection.styled.tsx rename to src/components/client/index/sections/ActiveCampaignsSection/ActiveCampaignsSection.styled.tsx diff --git a/src/components/client/index/sections/CampaignsSection/CampaignsSection.tsx b/src/components/client/index/sections/ActiveCampaignsSection/ActiveCampaignsSection.tsx similarity index 75% rename from src/components/client/index/sections/CampaignsSection/CampaignsSection.tsx rename to src/components/client/index/sections/ActiveCampaignsSection/ActiveCampaignsSection.tsx index 01f00bb1f..353323f39 100644 --- a/src/components/client/index/sections/CampaignsSection/CampaignsSection.tsx +++ b/src/components/client/index/sections/ActiveCampaignsSection/ActiveCampaignsSection.tsx @@ -1,10 +1,10 @@ import { useCampaignList } from 'common/hooks/campaigns' import { CampaignState } from 'components/client/campaigns/helpers/campaign.enums' -import ActiveCampaignCard from '../../components/ActiveCampaignCard/ActiveCampaignCard' +import ActiveCampaignCard from './ActiveCampaignCard/ActiveCampaignCard' -import { Root } from './CampaignsSection.styled' +import { Root } from './ActiveCampaignsSection.styled' -export default function CampaignsSection() { +export default function ActiveCampaignsSection() { const { data } = useCampaignList() const activeCampaigns = data ?.filter((campaign) => campaign.state === CampaignState.active) diff --git a/src/components/client/index/sections/CompletedCampaignsSection/CompletedCampaignsSection.tsx b/src/components/client/index/sections/CompletedCampaignsSection/CompletedCampaignsSection.tsx new file mode 100644 index 000000000..15fd65cc1 --- /dev/null +++ b/src/components/client/index/sections/CompletedCampaignsSection/CompletedCampaignsSection.tsx @@ -0,0 +1,13 @@ +import { useTranslation } from 'next-i18next' + +import { Grid, Typography } from '@mui/material' + +export default function CompletedCampaignsSectiom() { + const { t } = useTranslation('campaigns') + + return ( + + {t('completed-campaigns')} + + ) +} From 327fd16a7804dd46d7baaa89f3a820db034c83a1 Mon Sep 17 00:00:00 2001 From: ani-kalpachka Date: Mon, 3 Apr 2023 17:55:50 +0300 Subject: [PATCH 09/24] Implement Completed campaigns carousel - initial changes --- package.json | 1 + .../client/index/IndexPage.styled.tsx | 63 ++++++++++--------- .../ActiveCampaignCard/ActiveCampaignCard.tsx | 4 +- .../CompletedCampaignsCarousel.styled.tsx | 9 +++ .../CompletedCampaignsSection.tsx | 38 ++++++++++- 5 files changed, 80 insertions(+), 35 deletions(-) create mode 100644 src/components/client/index/sections/CompletedCampaignsSection/CompletedCampaignsCarousel.styled.tsx diff --git a/package.json b/package.json index b31911151..c21f29062 100644 --- a/package.json +++ b/package.json @@ -63,6 +63,7 @@ "react-dom": "18.2.0", "react-gtm-module": "2.0.11", "react-i18next": "^11.17.1", + "react-material-ui-carousel": "^3.4.2", "react-quill": "^2.0.0-beta.4", "react-slick": "^0.29.0", "sharp": "^0.30.5", diff --git a/src/components/client/index/IndexPage.styled.tsx b/src/components/client/index/IndexPage.styled.tsx index 4f2321994..d600020db 100644 --- a/src/components/client/index/IndexPage.styled.tsx +++ b/src/components/client/index/IndexPage.styled.tsx @@ -1,30 +1,33 @@ -import { Typography } from '@mui/material' -import { styled } from '@mui/material/styles' - -import theme from 'common/theme' -import LinkButton from 'components/common/LinkButton' - -export const Heading = styled(Typography)(() => ({ - color: theme.palette.primary.dark, - textAlign: 'center', - fontWeight: 500, - marginBottom: theme.spacing(6), -})) - -export const InfoText = styled(Typography)(() => ({ - display: 'inline-block', - textAlign: 'center', - fontSize: theme.typography.pxToRem(16), - lineHeight: theme.spacing(3), - paddingBottom: theme.spacing(6), -})) - -export const OutlinedButton = styled(LinkButton)(() => ({ - marginTop: theme.spacing(6), - fontWeight: 'bold', - color: theme.palette.common.black, - - [theme.breakpoints.up('sm')]: { - minWidth: theme.spacing(35), - }, -})) +import { Typography } from '@mui/material' +import { styled } from '@mui/material/styles' + +import theme from 'common/theme' +import LinkButton from 'components/common/LinkButton' + +export const Heading = styled(Typography)(() => ({ + color: theme.palette.primary.dark, + textAlign: 'center', + fontWeight: 500, + marginBottom: theme.spacing(6), + fontFamily: 'Montserrat, sans-serif', + fontSize: theme.typography.pxToRem(35), + letterSpacing: '-1px', +})) + +export const InfoText = styled(Typography)(() => ({ + display: 'inline-block', + textAlign: 'center', + fontSize: theme.typography.pxToRem(16), + lineHeight: theme.spacing(3), + paddingBottom: theme.spacing(6), +})) + +export const OutlinedButton = styled(LinkButton)(() => ({ + marginTop: theme.spacing(6), + fontWeight: 'bold', + color: theme.palette.common.black, + + [theme.breakpoints.up('sm')]: { + minWidth: theme.spacing(35), + }, +})) diff --git a/src/components/client/index/sections/ActiveCampaignsSection/ActiveCampaignCard/ActiveCampaignCard.tsx b/src/components/client/index/sections/ActiveCampaignsSection/ActiveCampaignCard/ActiveCampaignCard.tsx index 9a7e688ab..65a665895 100644 --- a/src/components/client/index/sections/ActiveCampaignsSection/ActiveCampaignCard/ActiveCampaignCard.tsx +++ b/src/components/client/index/sections/ActiveCampaignsSection/ActiveCampaignCard/ActiveCampaignCard.tsx @@ -18,7 +18,7 @@ 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 pictureUrl = campaignListPictureUrl(campaign) + const campaignImagesUrl = campaignListPictureUrl(campaign) return ( ({ + maxWidth: theme.spacing(32), + height: theme.spacing(5), + fontWeight: 600, + fontSize: theme.typography.pxToRem(12), +})) diff --git a/src/components/client/index/sections/CompletedCampaignsSection/CompletedCampaignsSection.tsx b/src/components/client/index/sections/CompletedCampaignsSection/CompletedCampaignsSection.tsx index 15fd65cc1..dc127746b 100644 --- a/src/components/client/index/sections/CompletedCampaignsSection/CompletedCampaignsSection.tsx +++ b/src/components/client/index/sections/CompletedCampaignsSection/CompletedCampaignsSection.tsx @@ -1,13 +1,45 @@ import { useTranslation } from 'next-i18next' -import { Grid, Typography } from '@mui/material' +import Carousel from 'react-material-ui-carousel' -export default function CompletedCampaignsSectiom() { +import { Grid, Paper } from '@mui/material' + +import { useCampaignList } from 'common/hooks/campaigns' +import { campaignListPictureUrl } from 'common/util/campaignImageUrls' +import { CampaignState } from 'components/client/campaigns/helpers/campaign.enums' + +import { Heading } from '../../IndexPage.styled' +import { CampaignResponse } from 'gql/campaigns' + +type Props = { campaign: CampaignResponse; index: number } + +export default function CompletedCampaignsSectiom({ campaign, index }: Props) { const { t } = useTranslation('campaigns') + const { data } = useCampaignList() + const completedCampaigns = data?.filter( + (campaign: CampaignResponse) => campaign.state === CampaignState.complete, + ) + const campaignImagesUrl = campaignListPictureUrl(campaign) return ( - {t('completed-campaigns')} + + {t('completed-campaigns')} + + + {completedCampaigns?.map((campaign) => ( + + + {campaign.title} + + + ))} + ) } From 650e3066d3eb4ede3d4d1ddec8acde664a4db570 Mon Sep 17 00:00:00 2001 From: ani-kalpachka Date: Mon, 3 Apr 2023 23:10:41 +0300 Subject: [PATCH 10/24] Update completed campaigns caroucel --- src/components/client/index/IndexPage.tsx | 4 +- .../ActiveCampaignCard.styled.tsx | 9 +-- .../CompletedCampaignsCarousel.styled.tsx | 8 +++ .../CompletedCampaignsSection.tsx | 65 +++++++++++++++---- 4 files changed, 65 insertions(+), 21 deletions(-) diff --git a/src/components/client/index/IndexPage.tsx b/src/components/client/index/IndexPage.tsx index 48f71af99..bcc7aaa10 100644 --- a/src/components/client/index/IndexPage.tsx +++ b/src/components/client/index/IndexPage.tsx @@ -2,7 +2,7 @@ import { useTranslation } from 'next-i18next' import Layout from 'components/client/layout/Layout' import ActiveCampaignsSection from './sections/ActiveCampaignsSection/ActiveCampaignsSection' -import CompletedCampaignsSectiom from './sections/CompletedCampaignsSection/CompletedCampaignsSection' +import CompletedCampaignsSection from './sections/CompletedCampaignsSection/CompletedCampaignsSection' import HowWeWorkSection from './sections/HowWeWorkSection/HowWeWorkSection' import TeamMembersSection from './sections/TeamMembersSection/TeamMembersSection' import JoinPodkrepiBgSection from './sections/JoinPodkrepiBgSection/JoinPodkrepiBgSection' @@ -18,7 +18,7 @@ export default function IndexPage() { title={t('title')} metaDescription={t('metaDescription')}> - + 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 a1b170a6d..dfae73a14 100644 --- a/src/components/client/index/sections/ActiveCampaignsSection/ActiveCampaignCard/ActiveCampaignCard.styled.tsx +++ b/src/components/client/index/sections/ActiveCampaignsSection/ActiveCampaignCard/ActiveCampaignCard.styled.tsx @@ -16,16 +16,13 @@ export const Content = styled(CardContent)(() => ({ })) export const CampaignTitle = styled('h6')(() => ({ - visibility: 'hidden', - maxWidth: theme.spacing(32), - height: theme.spacing(5), fontWeight: 600, fontSize: theme.typography.pxToRem(12), - - [theme.breakpoints.down('lg')]: { visibility: 'visible' }, })) export const SupportNowButton = styled(LinkButton)(() => ({ - // display: 'none', + visibility: 'hidden', fontWeight: 'bold', + + [theme.breakpoints.down('md')]: { visibility: 'visible' }, })) diff --git a/src/components/client/index/sections/CompletedCampaignsSection/CompletedCampaignsCarousel.styled.tsx b/src/components/client/index/sections/CompletedCampaignsSection/CompletedCampaignsCarousel.styled.tsx index 7dcccc3ed..8d0900272 100644 --- a/src/components/client/index/sections/CompletedCampaignsSection/CompletedCampaignsCarousel.styled.tsx +++ b/src/components/client/index/sections/CompletedCampaignsSection/CompletedCampaignsCarousel.styled.tsx @@ -1,4 +1,7 @@ +import Slider from 'react-slick' + import styled from '@emotion/styled' + import theme from 'common/theme' export const CampaignTitle = styled('h6')(() => ({ @@ -7,3 +10,8 @@ export const CampaignTitle = styled('h6')(() => ({ fontWeight: 600, fontSize: theme.typography.pxToRem(12), })) + +export const CompletedCampaignsCarousel = styled(Slider)(() => ({ + margin: '0 auto', + maxWidth: theme.spacing(162), +})) diff --git a/src/components/client/index/sections/CompletedCampaignsSection/CompletedCampaignsSection.tsx b/src/components/client/index/sections/CompletedCampaignsSection/CompletedCampaignsSection.tsx index dc127746b..6d7f2317b 100644 --- a/src/components/client/index/sections/CompletedCampaignsSection/CompletedCampaignsSection.tsx +++ b/src/components/client/index/sections/CompletedCampaignsSection/CompletedCampaignsSection.tsx @@ -1,45 +1,84 @@ import { useTranslation } from 'next-i18next' +import { CampaignResponse } from 'gql/campaigns' +import { Settings } from 'react-slick' +import 'slick-carousel/slick/slick-theme.css' +import 'slick-carousel/slick/slick.css' -import Carousel from 'react-material-ui-carousel' - -import { Grid, Paper } from '@mui/material' +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 { Heading } from '../../IndexPage.styled' -import { CampaignResponse } from 'gql/campaigns' +import { CompletedCampaignsCarousel } from './CompletedCampaignsCarousel.styled' +import { CampaignTitle } from '../ActiveCampaignsSection/ActiveCampaignCard/ActiveCampaignCard.styled' type Props = { campaign: CampaignResponse; index: number } -export default function CompletedCampaignsSectiom({ campaign, index }: Props) { +export default function CompletedCampaignsSection({ campaign, index }: Props) { const { t } = useTranslation('campaigns') const { data } = useCampaignList() const completedCampaigns = data?.filter( (campaign: CampaignResponse) => campaign.state === CampaignState.complete, ) const campaignImagesUrl = campaignListPictureUrl(campaign) + const testImg = 'img/team-photos/AlbenaGeleva.png' + + const settings: Settings = { + infinite: true, + speed: 500, + slidesToShow: 4, + slidesToScroll: 1, + dots: true, + lazyLoad: 'ondemand', + autoplay: false, + autoplaySpeed: 2000, + + responsive: [ + { + breakpoint: 1230, + settings: { + slidesToShow: 3, + }, + }, + { + breakpoint: 800, + settings: { + slidesToShow: 2, + }, + }, + { + breakpoint: 500, + settings: { + slidesToShow: 1, + }, + }, + ], + } return ( - + {t('completed-campaigns')} - + {completedCampaigns?.map((campaign) => ( - + - {campaign.title} + {campaign.title} - + ))} - + ) } From f245686a93fb7664c494b48440137655c92de05f Mon Sep 17 00:00:00 2001 From: ani-kalpachka Date: Mon, 3 Apr 2023 23:22:05 +0300 Subject: [PATCH 11/24] Fix build error --- .../CompletedCampaignsSection.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/client/index/sections/CompletedCampaignsSection/CompletedCampaignsSection.tsx b/src/components/client/index/sections/CompletedCampaignsSection/CompletedCampaignsSection.tsx index 6d7f2317b..6df9f7698 100644 --- a/src/components/client/index/sections/CompletedCampaignsSection/CompletedCampaignsSection.tsx +++ b/src/components/client/index/sections/CompletedCampaignsSection/CompletedCampaignsSection.tsx @@ -4,7 +4,7 @@ import { Settings } from 'react-slick' import 'slick-carousel/slick/slick-theme.css' import 'slick-carousel/slick/slick.css' -import { Grid } from '@mui/material' +import { Grid, Typography } from '@mui/material' import { useCampaignList } from 'common/hooks/campaigns' import { campaignListPictureUrl } from 'common/util/campaignImageUrls' @@ -17,13 +17,13 @@ import { CampaignTitle } from '../ActiveCampaignsSection/ActiveCampaignCard/Acti type Props = { campaign: CampaignResponse; index: number } -export default function CompletedCampaignsSection({ campaign, index }: Props) { +export default function CompletedCampaignsSection() { const { t } = useTranslation('campaigns') const { data } = useCampaignList() const completedCampaigns = data?.filter( (campaign: CampaignResponse) => campaign.state === CampaignState.complete, ) - const campaignImagesUrl = campaignListPictureUrl(campaign) + // const campaignImagesUrl = campaignListPictureUrl(campaign) const testImg = 'img/team-photos/AlbenaGeleva.png' const settings: Settings = { @@ -65,15 +65,15 @@ export default function CompletedCampaignsSection({ campaign, index }: Props) { {completedCampaigns?.map((campaign) => ( - + + {campaign.summary.reachedAmount} {campaign.title} From e8172c6c560ad0587d726cb25ca11102b7ff952b Mon Sep 17 00:00:00 2001 From: ani-kalpachka Date: Tue, 4 Apr 2023 00:04:29 +0300 Subject: [PATCH 12/24] Fix build error --- .../Carousel.styled.tsx} | 10 +++--- .../Carousel/Carousel.tsx | 35 +++++++++++++++++++ .../CompletedCampaignsSection.tsx | 33 +++++------------ 3 files changed, 48 insertions(+), 30 deletions(-) rename src/components/client/index/sections/CompletedCampaignsSection/{CompletedCampaignsCarousel.styled.tsx => Carousel/Carousel.styled.tsx} (83%) create mode 100644 src/components/client/index/sections/CompletedCampaignsSection/Carousel/Carousel.tsx diff --git a/src/components/client/index/sections/CompletedCampaignsSection/CompletedCampaignsCarousel.styled.tsx b/src/components/client/index/sections/CompletedCampaignsSection/Carousel/Carousel.styled.tsx similarity index 83% rename from src/components/client/index/sections/CompletedCampaignsSection/CompletedCampaignsCarousel.styled.tsx rename to src/components/client/index/sections/CompletedCampaignsSection/Carousel/Carousel.styled.tsx index 8d0900272..e34043606 100644 --- a/src/components/client/index/sections/CompletedCampaignsSection/CompletedCampaignsCarousel.styled.tsx +++ b/src/components/client/index/sections/CompletedCampaignsSection/Carousel/Carousel.styled.tsx @@ -4,14 +4,14 @@ import styled from '@emotion/styled' import theme from 'common/theme' +export const CarouselWrapper = styled(Slider)(() => ({ + margin: '0 auto', + maxWidth: theme.spacing(162), +})) + export const CampaignTitle = styled('h6')(() => ({ maxWidth: theme.spacing(32), height: theme.spacing(5), fontWeight: 600, fontSize: theme.typography.pxToRem(12), })) - -export const CompletedCampaignsCarousel = styled(Slider)(() => ({ - margin: '0 auto', - maxWidth: theme.spacing(162), -})) diff --git a/src/components/client/index/sections/CompletedCampaignsSection/Carousel/Carousel.tsx b/src/components/client/index/sections/CompletedCampaignsSection/Carousel/Carousel.tsx new file mode 100644 index 000000000..a0d171abd --- /dev/null +++ b/src/components/client/index/sections/CompletedCampaignsSection/Carousel/Carousel.tsx @@ -0,0 +1,35 @@ +import { useTranslation } from 'next-i18next' +import { CampaignResponse } from 'gql/campaigns' + +import { Grid, Typography } from '@mui/material' +import 'slick-carousel/slick/slick-theme.css' +import 'slick-carousel/slick/slick.css' + +import theme from 'common/theme' + +import { CampaignTitle } from './Carousel.styled' +// import { campaignListPictureUrl } from 'common/util/campaignImageUrls' + +type Props = { campaign: CampaignResponse; index: number } + +export default function CompletedCampaignsCarousel({ campaign, index }: Props) { + const { t } = useTranslation('campaigns') + + const testImg = 'img/team-photos/AlbenaGeleva.png' + // const campaignImagesUrl = campaignListPictureUrl(campaign) + + return ( + + + {campaign.summary.reachedAmount} + {campaign.title} + + + ) +} diff --git a/src/components/client/index/sections/CompletedCampaignsSection/CompletedCampaignsSection.tsx b/src/components/client/index/sections/CompletedCampaignsSection/CompletedCampaignsSection.tsx index 6df9f7698..9b8ae923b 100644 --- a/src/components/client/index/sections/CompletedCampaignsSection/CompletedCampaignsSection.tsx +++ b/src/components/client/index/sections/CompletedCampaignsSection/CompletedCampaignsSection.tsx @@ -1,19 +1,15 @@ import { useTranslation } from 'next-i18next' import { CampaignResponse } from 'gql/campaigns' -import { Settings } from 'react-slick' -import 'slick-carousel/slick/slick-theme.css' -import 'slick-carousel/slick/slick.css' -import { Grid, Typography } from '@mui/material' +import { Grid } from '@mui/material' +import { Settings } from 'react-slick' 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 CompletedCampaignsCarousel from './Carousel/Carousel' import { Heading } from '../../IndexPage.styled' -import { CompletedCampaignsCarousel } from './CompletedCampaignsCarousel.styled' -import { CampaignTitle } from '../ActiveCampaignsSection/ActiveCampaignCard/ActiveCampaignCard.styled' +import { CarouselWrapper } from './Carousel/Carousel.styled' type Props = { campaign: CampaignResponse; index: number } @@ -23,8 +19,6 @@ export default function CompletedCampaignsSection() { const completedCampaigns = data?.filter( (campaign: CampaignResponse) => campaign.state === CampaignState.complete, ) - // const campaignImagesUrl = campaignListPictureUrl(campaign) - const testImg = 'img/team-photos/AlbenaGeleva.png' const settings: Settings = { infinite: true, @@ -63,22 +57,11 @@ export default function CompletedCampaignsSection() { {t('completed-campaigns')} - - {completedCampaigns?.map((campaign) => ( - - - {campaign.summary.reachedAmount} - {campaign.title} - - + + {completedCampaigns?.map((campaign, index) => ( + ))} - + ) } From d1cd45e7d53df90b21c88b4b373944ad468d5acd Mon Sep 17 00:00:00 2001 From: ani-kalpachka Date: Tue, 4 Apr 2023 00:56:42 +0300 Subject: [PATCH 13/24] Update styles --- .../ActiveCampaignCard.styled.tsx | 8 +++- .../Carousel.styled.tsx | 37 ++++++++++++++++ .../Carousel/Carousel.styled.tsx | 17 -------- .../Carousel/Carousel.tsx | 35 --------------- .../CompletedCampaignsSection.tsx | 43 ++++++++++++++++--- 5 files changed, 79 insertions(+), 61 deletions(-) create mode 100644 src/components/client/index/sections/CompletedCampaignsSection/Carousel.styled.tsx delete mode 100644 src/components/client/index/sections/CompletedCampaignsSection/Carousel/Carousel.styled.tsx delete mode 100644 src/components/client/index/sections/CompletedCampaignsSection/Carousel/Carousel.tsx 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 dfae73a14..f69dd5d06 100644 --- a/src/components/client/index/sections/ActiveCampaignsSection/ActiveCampaignCard/ActiveCampaignCard.styled.tsx +++ b/src/components/client/index/sections/ActiveCampaignsSection/ActiveCampaignCard/ActiveCampaignCard.styled.tsx @@ -16,8 +16,12 @@ export const Content = styled(CardContent)(() => ({ })) export const CampaignTitle = styled('h6')(() => ({ - fontWeight: 600, - fontSize: theme.typography.pxToRem(12), + height: theme.spacing(5), + margin: theme.spacing(1.8, 1.2), + fontWeight: 700, + fontSize: theme.typography.pxToRem(16), + lineHeight: '150%', + color: '#FAFAFA', })) export const SupportNowButton = styled(LinkButton)(() => ({ diff --git a/src/components/client/index/sections/CompletedCampaignsSection/Carousel.styled.tsx b/src/components/client/index/sections/CompletedCampaignsSection/Carousel.styled.tsx new file mode 100644 index 000000000..ee55d4c33 --- /dev/null +++ b/src/components/client/index/sections/CompletedCampaignsSection/Carousel.styled.tsx @@ -0,0 +1,37 @@ +import Slider from 'react-slick' + +import styled from '@emotion/styled' + +import theme from 'common/theme' +import { Typography } from '@mui/material' + +export const CarouselWrapper = styled(Slider)(() => ({ + margin: '0 auto', + maxWidth: theme.spacing(162), +})) + +export const CampaignTitle = styled('h6')(() => ({ + height: theme.spacing(5), + margin: '15px 10px', + fontWeight: 700, + fontSize: theme.typography.pxToRem(16), + lineHeight: '150%', + color: '#FAFAFA', +})) + +export const ReachedMoney = styled(Typography)(() => ({ + display: 'flex', + flexDirection: 'column', + fontSize: '0.75rem', + padding: theme.spacing(0.5, 0, 0, 1), + maxWidth: theme.spacing(12.5), + minHeight: theme.spacing(7.5), + background: '#323232', + borderRadius: theme.spacing(0, 0, 0, 2), + color: '#B0E5FF', + marginLeft: 'auto', +})) + +export const ReachedText = styled(Typography)(() => ({ + color: theme.palette.common.white, +})) diff --git a/src/components/client/index/sections/CompletedCampaignsSection/Carousel/Carousel.styled.tsx b/src/components/client/index/sections/CompletedCampaignsSection/Carousel/Carousel.styled.tsx deleted file mode 100644 index e34043606..000000000 --- a/src/components/client/index/sections/CompletedCampaignsSection/Carousel/Carousel.styled.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import Slider from 'react-slick' - -import styled from '@emotion/styled' - -import theme from 'common/theme' - -export const CarouselWrapper = styled(Slider)(() => ({ - margin: '0 auto', - maxWidth: theme.spacing(162), -})) - -export const CampaignTitle = styled('h6')(() => ({ - maxWidth: theme.spacing(32), - height: theme.spacing(5), - fontWeight: 600, - fontSize: theme.typography.pxToRem(12), -})) diff --git a/src/components/client/index/sections/CompletedCampaignsSection/Carousel/Carousel.tsx b/src/components/client/index/sections/CompletedCampaignsSection/Carousel/Carousel.tsx deleted file mode 100644 index a0d171abd..000000000 --- a/src/components/client/index/sections/CompletedCampaignsSection/Carousel/Carousel.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import { useTranslation } from 'next-i18next' -import { CampaignResponse } from 'gql/campaigns' - -import { Grid, Typography } from '@mui/material' -import 'slick-carousel/slick/slick-theme.css' -import 'slick-carousel/slick/slick.css' - -import theme from 'common/theme' - -import { CampaignTitle } from './Carousel.styled' -// import { campaignListPictureUrl } from 'common/util/campaignImageUrls' - -type Props = { campaign: CampaignResponse; index: number } - -export default function CompletedCampaignsCarousel({ campaign, index }: Props) { - const { t } = useTranslation('campaigns') - - const testImg = 'img/team-photos/AlbenaGeleva.png' - // const campaignImagesUrl = campaignListPictureUrl(campaign) - - return ( - - - {campaign.summary.reachedAmount} - {campaign.title} - - - ) -} diff --git a/src/components/client/index/sections/CompletedCampaignsSection/CompletedCampaignsSection.tsx b/src/components/client/index/sections/CompletedCampaignsSection/CompletedCampaignsSection.tsx index 9b8ae923b..ed7c6d986 100644 --- a/src/components/client/index/sections/CompletedCampaignsSection/CompletedCampaignsSection.tsx +++ b/src/components/client/index/sections/CompletedCampaignsSection/CompletedCampaignsSection.tsx @@ -1,24 +1,31 @@ import { useTranslation } from 'next-i18next' import { CampaignResponse } from 'gql/campaigns' - -import { Grid } from '@mui/material' import { Settings } from 'react-slick' +import 'slick-carousel/slick/slick-theme.css' +import 'slick-carousel/slick/slick.css' + +import { Grid, Typography } 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 CompletedCampaignsCarousel from './Carousel/Carousel' import { Heading } from '../../IndexPage.styled' -import { CarouselWrapper } from './Carousel/Carousel.styled' +import { CarouselWrapper, ReachedMoney, ReachedText } from './Carousel.styled' +import { CampaignTitle } from '../ActiveCampaignsSection/ActiveCampaignCard/ActiveCampaignCard.styled' type Props = { campaign: CampaignResponse; index: number } -export default function CompletedCampaignsSection() { +export default function CompletedCampaignsSection({ campaign, index }: Props) { const { t } = useTranslation('campaigns') const { data } = useCampaignList() + const completedCampaigns = data?.filter( (campaign: CampaignResponse) => campaign.state === CampaignState.complete, ) + const campaignImagesUrl = campaignListPictureUrl(campaign) + const testImg = 'img/team-photos/AlbenaGeleva.png' const settings: Settings = { infinite: true, @@ -58,8 +65,30 @@ export default function CompletedCampaignsSection() { {t('completed-campaigns')} - {completedCampaigns?.map((campaign, index) => ( - + {completedCampaigns?.map((campaign) => ( + + + + {campaign.summary.reachedAmount} + {t('campaign.reached')} + + {campaign.title} + + ))} From 6036ef93d7f834d693d23d1b1ab456a5e4939602 Mon Sep 17 00:00:00 2001 From: ani-kalpachka Date: Tue, 4 Apr 2023 01:06:35 +0300 Subject: [PATCH 14/24] rearrange files --- ...styled.tsx => CompletedCampaignsSection.styled.tsx} | 0 .../CompletedCampaignsSection.tsx | 10 +++++++--- 2 files changed, 7 insertions(+), 3 deletions(-) rename src/components/client/index/sections/CompletedCampaignsSection/{Carousel.styled.tsx => CompletedCampaignsSection.styled.tsx} (100%) diff --git a/src/components/client/index/sections/CompletedCampaignsSection/Carousel.styled.tsx b/src/components/client/index/sections/CompletedCampaignsSection/CompletedCampaignsSection.styled.tsx similarity index 100% rename from src/components/client/index/sections/CompletedCampaignsSection/Carousel.styled.tsx rename to src/components/client/index/sections/CompletedCampaignsSection/CompletedCampaignsSection.styled.tsx diff --git a/src/components/client/index/sections/CompletedCampaignsSection/CompletedCampaignsSection.tsx b/src/components/client/index/sections/CompletedCampaignsSection/CompletedCampaignsSection.tsx index ed7c6d986..ece767ee6 100644 --- a/src/components/client/index/sections/CompletedCampaignsSection/CompletedCampaignsSection.tsx +++ b/src/components/client/index/sections/CompletedCampaignsSection/CompletedCampaignsSection.tsx @@ -4,7 +4,7 @@ import { Settings } from 'react-slick' import 'slick-carousel/slick/slick-theme.css' import 'slick-carousel/slick/slick.css' -import { Grid, Typography } from '@mui/material' +import { Grid } from '@mui/material' import { useCampaignList } from 'common/hooks/campaigns' import { campaignListPictureUrl } from 'common/util/campaignImageUrls' @@ -12,8 +12,12 @@ import theme from 'common/theme' import { CampaignState } from 'components/client/campaigns/helpers/campaign.enums' import { Heading } from '../../IndexPage.styled' -import { CarouselWrapper, ReachedMoney, ReachedText } from './Carousel.styled' -import { CampaignTitle } from '../ActiveCampaignsSection/ActiveCampaignCard/ActiveCampaignCard.styled' +import { + CarouselWrapper, + ReachedMoney, + ReachedText, + CampaignTitle, +} from './CompletedCampaignsSection.styled' type Props = { campaign: CampaignResponse; index: number } From 7199d9ff1b3f130dbd0f0573ca6bd1c4d86c3a7c Mon Sep 17 00:00:00 2001 From: ani-kalpachka Date: Tue, 4 Apr 2023 09:30:29 +0300 Subject: [PATCH 15/24] Update styles --- .../ActiveCampaignCard.styled.tsx | 2 ++ .../CompletedCampaignsSection.styled.tsx | 13 +++++++++++-- .../CompletedCampaignsSection.tsx | 9 ++++++--- 3 files changed, 19 insertions(+), 5 deletions(-) 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 f69dd5d06..8cce24a6c 100644 --- a/src/components/client/index/sections/ActiveCampaignsSection/ActiveCampaignCard/ActiveCampaignCard.styled.tsx +++ b/src/components/client/index/sections/ActiveCampaignsSection/ActiveCampaignCard/ActiveCampaignCard.styled.tsx @@ -22,11 +22,13 @@ export const CampaignTitle = styled('h6')(() => ({ fontSize: theme.typography.pxToRem(16), lineHeight: '150%', color: '#FAFAFA', + fontFamily: 'Montserrat, sans-serif', })) export const SupportNowButton = styled(LinkButton)(() => ({ visibility: 'hidden', fontWeight: 'bold', + fontFamily: 'Montserrat, sans-serif', [theme.breakpoints.down('md')]: { visibility: 'visible' }, })) diff --git a/src/components/client/index/sections/CompletedCampaignsSection/CompletedCampaignsSection.styled.tsx b/src/components/client/index/sections/CompletedCampaignsSection/CompletedCampaignsSection.styled.tsx index ee55d4c33..1a72e087a 100644 --- a/src/components/client/index/sections/CompletedCampaignsSection/CompletedCampaignsSection.styled.tsx +++ b/src/components/client/index/sections/CompletedCampaignsSection/CompletedCampaignsSection.styled.tsx @@ -19,19 +19,28 @@ export const CampaignTitle = styled('h6')(() => ({ color: '#FAFAFA', })) -export const ReachedMoney = styled(Typography)(() => ({ +export const ReachedMoneyWrapper = styled(Typography)(() => ({ display: 'flex', flexDirection: 'column', fontSize: '0.75rem', padding: theme.spacing(0.5, 0, 0, 1), - maxWidth: theme.spacing(12.5), + minWidth: theme.spacing(12.5), minHeight: theme.spacing(7.5), background: '#323232', borderRadius: theme.spacing(0, 0, 0, 2), color: '#B0E5FF', marginLeft: 'auto', + fontFamily: 'Montserrat, sans-serif', +})) + +export const ReachedMoney = styled(Typography)(() => ({ + fontWeight: 700, + fontSize: theme.typography.pxToRem(17), })) export const ReachedText = styled(Typography)(() => ({ color: theme.palette.common.white, + fontFamily: 'Lato, sans-serif', + fontWeight: 700, + fontSize: theme.typography.pxToRem(17), })) diff --git a/src/components/client/index/sections/CompletedCampaignsSection/CompletedCampaignsSection.tsx b/src/components/client/index/sections/CompletedCampaignsSection/CompletedCampaignsSection.tsx index ece767ee6..33b8db024 100644 --- a/src/components/client/index/sections/CompletedCampaignsSection/CompletedCampaignsSection.tsx +++ b/src/components/client/index/sections/CompletedCampaignsSection/CompletedCampaignsSection.tsx @@ -17,6 +17,7 @@ import { ReachedMoney, ReachedText, CampaignTitle, + ReachedMoneyWrapper, } from './CompletedCampaignsSection.styled' type Props = { campaign: CampaignResponse; index: number } @@ -86,10 +87,12 @@ export default function CompletedCampaignsSection({ campaign, index }: Props) { opacity: 0.9, }, }}> - - {campaign.summary.reachedAmount} + + + {campaign.summary.reachedAmount} {t('donations.lv')} + {t('campaign.reached')} - + {campaign.title} From 242efe2a4915f471a985cf6d5b5d44118222b7e3 Mon Sep 17 00:00:00 2001 From: ani-kalpachka Date: Tue, 4 Apr 2023 10:45:48 +0300 Subject: [PATCH 16/24] Add see all button, add linkt to campaign cards --- public/locales/bg/index.json | 3 +- public/locales/en/index.json | 3 +- .../ActiveCampaignsSection.styled.tsx | 9 +++- .../ActiveCampaignsSection.tsx | 30 ++++++++--- .../CaroucelSettings.tsx | 33 ++++++++++++ .../CompletedCampaignsSection.tsx | 53 ++++++------------- 6 files changed, 82 insertions(+), 49 deletions(-) create mode 100644 src/components/client/index/sections/CompletedCampaignsSection/CaroucelSettings.tsx diff --git a/public/locales/bg/index.json b/public/locales/bg/index.json index 8119dc7ac..2fc22b94d 100644 --- a/public/locales/bg/index.json +++ b/public/locales/bg/index.json @@ -28,8 +28,7 @@ "goals-text-open-source": "- Да създадем open-source платформа, което намалява шансовете за злоупотреба." }, "campaign": { - "see-all": "Вижте всички", - "urgent-campaigns": "Спешни кампании" + "see-all": "Вижте всички" }, "how-we-work": { "heading": "Как работи Подкрепи.бг?", diff --git a/public/locales/en/index.json b/public/locales/en/index.json index 52bfea1e4..10233434d 100644 --- a/public/locales/en/index.json +++ b/public/locales/en/index.json @@ -28,8 +28,7 @@ "goals-text-open-source": "- To create an open-source platform which reduces the chances of misuse." }, "campaign": { - "see-all": "See all", - "urgent-campaigns": "Urgent campaigns" + "see-all": "See all" }, "how-we-work": { "heading": "How does Pordkprepi.bg work?", diff --git a/src/components/client/index/sections/ActiveCampaignsSection/ActiveCampaignsSection.styled.tsx b/src/components/client/index/sections/ActiveCampaignsSection/ActiveCampaignsSection.styled.tsx index 678787803..c38944bb9 100644 --- a/src/components/client/index/sections/ActiveCampaignsSection/ActiveCampaignsSection.styled.tsx +++ b/src/components/client/index/sections/ActiveCampaignsSection/ActiveCampaignsSection.styled.tsx @@ -1,8 +1,9 @@ +import { Grid } from '@mui/material' import { styled } from '@mui/material/styles' import theme from 'common/theme' -export const Root = styled('section')(() => ({ +export const Root = styled(Grid)(() => ({ marginTop: theme.spacing(3.875), display: 'grid', gridTemplateRows: 'repeat(5, 1fr)', @@ -34,3 +35,9 @@ export const Root = styled('section')(() => ({ margin: `${theme.spacing(4)} auto`, }, })) + +export const SeeAllButton = styled(Grid)(() => ({ + display: 'flex', + placeContent: 'center', + fontFamily: 'Montserrat, sans-serif', +})) diff --git a/src/components/client/index/sections/ActiveCampaignsSection/ActiveCampaignsSection.tsx b/src/components/client/index/sections/ActiveCampaignsSection/ActiveCampaignsSection.tsx index 353323f39..5b4e6ffbf 100644 --- a/src/components/client/index/sections/ActiveCampaignsSection/ActiveCampaignsSection.tsx +++ b/src/components/client/index/sections/ActiveCampaignsSection/ActiveCampaignsSection.tsx @@ -1,10 +1,18 @@ +import { useTranslation } from 'next-i18next' + +import { Grid } from '@mui/material' +import ChevronRightIcon from '@mui/icons-material/ChevronRight' + import { useCampaignList } from 'common/hooks/campaigns' +import { routes } from 'common/routes' import { CampaignState } from 'components/client/campaigns/helpers/campaign.enums' import ActiveCampaignCard from './ActiveCampaignCard/ActiveCampaignCard' -import { Root } from './ActiveCampaignsSection.styled' +import { OutlinedButton } from '../../IndexPage.styled' +import { Root, SeeAllButton } from './ActiveCampaignsSection.styled' export default function ActiveCampaignsSection() { + const { t } = useTranslation('index') const { data } = useCampaignList() const activeCampaigns = data ?.filter((campaign) => campaign.state === CampaignState.active) @@ -14,11 +22,21 @@ export default function ActiveCampaignsSection() { return null } else { return ( - - {activeCampaigns?.map((campaign, index) => ( - - ))} - + + + {activeCampaigns?.map((campaign, index) => ( + + ))} + + + }> + {t('campaign.see-all')} + + + ) } } diff --git a/src/components/client/index/sections/CompletedCampaignsSection/CaroucelSettings.tsx b/src/components/client/index/sections/CompletedCampaignsSection/CaroucelSettings.tsx new file mode 100644 index 000000000..02a90a895 --- /dev/null +++ b/src/components/client/index/sections/CompletedCampaignsSection/CaroucelSettings.tsx @@ -0,0 +1,33 @@ +import { Settings } from 'react-slick' + +export const settings: Settings = { + infinite: true, + speed: 500, + slidesToShow: 4, + slidesToScroll: 1, + dots: true, + lazyLoad: 'ondemand', + autoplay: true, + autoplaySpeed: 2000, + + responsive: [ + { + breakpoint: 1230, + settings: { + slidesToShow: 3, + }, + }, + { + breakpoint: 800, + settings: { + slidesToShow: 2, + }, + }, + { + breakpoint: 500, + settings: { + slidesToShow: 1, + }, + }, + ], +} diff --git a/src/components/client/index/sections/CompletedCampaignsSection/CompletedCampaignsSection.tsx b/src/components/client/index/sections/CompletedCampaignsSection/CompletedCampaignsSection.tsx index 33b8db024..f4dea26e7 100644 --- a/src/components/client/index/sections/CompletedCampaignsSection/CompletedCampaignsSection.tsx +++ b/src/components/client/index/sections/CompletedCampaignsSection/CompletedCampaignsSection.tsx @@ -1,15 +1,16 @@ import { useTranslation } from 'next-i18next' import { CampaignResponse } from 'gql/campaigns' -import { Settings } from 'react-slick' + import 'slick-carousel/slick/slick-theme.css' import 'slick-carousel/slick/slick.css' - -import { Grid } from '@mui/material' +import { Grid, Link } 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 './CaroucelSettings' import { Heading } from '../../IndexPage.styled' import { @@ -32,36 +33,8 @@ export default function CompletedCampaignsSection({ campaign, index }: Props) { const campaignImagesUrl = campaignListPictureUrl(campaign) const testImg = 'img/team-photos/AlbenaGeleva.png' - const settings: Settings = { - infinite: true, - speed: 500, - slidesToShow: 4, - slidesToScroll: 1, - dots: true, - lazyLoad: 'ondemand', - autoplay: false, - autoplaySpeed: 2000, - - responsive: [ - { - breakpoint: 1230, - settings: { - slidesToShow: 3, - }, - }, - { - breakpoint: 800, - settings: { - slidesToShow: 2, - }, - }, - { - breakpoint: 500, - settings: { - slidesToShow: 1, - }, - }, - ], + const onLinkMouseDown = (e) => { + e.preventDefault() } return ( @@ -71,14 +44,18 @@ export default function CompletedCampaignsSection({ campaign, index }: Props) { {completedCampaigns?.map((campaign) => ( - - + {t('campaign.reached')} {campaign.title} - + ))} From 41857f75284c25a32d2cf28229445362255cfb1e Mon Sep 17 00:00:00 2001 From: ani-kalpachka Date: Tue, 4 Apr 2023 11:01:19 +0300 Subject: [PATCH 17/24] Update inlined values --- .../ActiveCampaignCard.styled.tsx | 2 +- .../ActiveCampaignsSection.styled.tsx | 1 - .../CompletedCampaignsSection.styled.tsx | 20 ++++++++++++++---- .../CompletedCampaignsSection.tsx | 21 ++++++------------- .../{ => helpers}/CaroucelSettings.tsx | 0 5 files changed, 23 insertions(+), 21 deletions(-) rename src/components/client/index/sections/CompletedCampaignsSection/{ => helpers}/CaroucelSettings.tsx (100%) 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 8cce24a6c..391175845 100644 --- a/src/components/client/index/sections/ActiveCampaignsSection/ActiveCampaignCard/ActiveCampaignCard.styled.tsx +++ b/src/components/client/index/sections/ActiveCampaignsSection/ActiveCampaignCard/ActiveCampaignCard.styled.tsx @@ -21,7 +21,7 @@ export const CampaignTitle = styled('h6')(() => ({ fontWeight: 700, fontSize: theme.typography.pxToRem(16), lineHeight: '150%', - color: '#FAFAFA', + color: theme.palette.secondary.light, fontFamily: 'Montserrat, sans-serif', })) diff --git a/src/components/client/index/sections/ActiveCampaignsSection/ActiveCampaignsSection.styled.tsx b/src/components/client/index/sections/ActiveCampaignsSection/ActiveCampaignsSection.styled.tsx index c38944bb9..3dee7d116 100644 --- a/src/components/client/index/sections/ActiveCampaignsSection/ActiveCampaignsSection.styled.tsx +++ b/src/components/client/index/sections/ActiveCampaignsSection/ActiveCampaignsSection.styled.tsx @@ -39,5 +39,4 @@ export const Root = styled(Grid)(() => ({ export const SeeAllButton = styled(Grid)(() => ({ display: 'flex', placeContent: 'center', - fontFamily: 'Montserrat, sans-serif', })) diff --git a/src/components/client/index/sections/CompletedCampaignsSection/CompletedCampaignsSection.styled.tsx b/src/components/client/index/sections/CompletedCampaignsSection/CompletedCampaignsSection.styled.tsx index 1a72e087a..648030611 100644 --- a/src/components/client/index/sections/CompletedCampaignsSection/CompletedCampaignsSection.styled.tsx +++ b/src/components/client/index/sections/CompletedCampaignsSection/CompletedCampaignsSection.styled.tsx @@ -3,26 +3,37 @@ import Slider from 'react-slick' import styled from '@emotion/styled' import theme from 'common/theme' -import { Typography } from '@mui/material' +import { Typography, Link } from '@mui/material' export const CarouselWrapper = styled(Slider)(() => ({ margin: '0 auto', maxWidth: theme.spacing(162), })) +export const CompletedCampaignLink = styled(Link)(() => ({ + height: theme.spacing(37.5), + backgroundSize: 'cover', + display: 'flex', + flexDirection: 'column', + justifyContent: 'space-between', + + '&:hover': { + opacity: 0.9, + }, +})) + export const CampaignTitle = styled('h6')(() => ({ height: theme.spacing(5), - margin: '15px 10px', + margin: theme.spacing(1.8, 1.25), fontWeight: 700, fontSize: theme.typography.pxToRem(16), lineHeight: '150%', - color: '#FAFAFA', + color: theme.palette.secondary.light, })) export const ReachedMoneyWrapper = styled(Typography)(() => ({ display: 'flex', flexDirection: 'column', - fontSize: '0.75rem', padding: theme.spacing(0.5, 0, 0, 1), minWidth: theme.spacing(12.5), minHeight: theme.spacing(7.5), @@ -31,6 +42,7 @@ export const ReachedMoneyWrapper = styled(Typography)(() => ({ color: '#B0E5FF', marginLeft: 'auto', fontFamily: 'Montserrat, sans-serif', + fontSize: theme.typography.pxToRem(17), })) export const ReachedMoney = styled(Typography)(() => ({ diff --git a/src/components/client/index/sections/CompletedCampaignsSection/CompletedCampaignsSection.tsx b/src/components/client/index/sections/CompletedCampaignsSection/CompletedCampaignsSection.tsx index f4dea26e7..daa536224 100644 --- a/src/components/client/index/sections/CompletedCampaignsSection/CompletedCampaignsSection.tsx +++ b/src/components/client/index/sections/CompletedCampaignsSection/CompletedCampaignsSection.tsx @@ -3,14 +3,14 @@ import { CampaignResponse } from 'gql/campaigns' import 'slick-carousel/slick/slick-theme.css' import 'slick-carousel/slick/slick.css' -import { Grid, Link } from '@mui/material' +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 './CaroucelSettings' +import { settings } from './helpers/CaroucelSettings' import { Heading } from '../../IndexPage.styled' import { @@ -19,6 +19,7 @@ import { ReachedText, CampaignTitle, ReachedMoneyWrapper, + CompletedCampaignLink, } from './CompletedCampaignsSection.styled' type Props = { campaign: CampaignResponse; index: number } @@ -31,7 +32,6 @@ export default function CompletedCampaignsSection({ campaign, index }: Props) { (campaign: CampaignResponse) => campaign.state === CampaignState.complete, ) const campaignImagesUrl = campaignListPictureUrl(campaign) - const testImg = 'img/team-photos/AlbenaGeleva.png' const onLinkMouseDown = (e) => { e.preventDefault() @@ -49,20 +49,11 @@ export default function CompletedCampaignsSection({ campaign, index }: Props) { data-testid={`campaign-card-${index}`} margin={theme.spacing(0, 2.25)} paddingRight={theme.spacing(2.5)}> - @@ -71,7 +62,7 @@ export default function CompletedCampaignsSection({ campaign, index }: Props) { {t('campaign.reached')} {campaign.title} - + ))} diff --git a/src/components/client/index/sections/CompletedCampaignsSection/CaroucelSettings.tsx b/src/components/client/index/sections/CompletedCampaignsSection/helpers/CaroucelSettings.tsx similarity index 100% rename from src/components/client/index/sections/CompletedCampaignsSection/CaroucelSettings.tsx rename to src/components/client/index/sections/CompletedCampaignsSection/helpers/CaroucelSettings.tsx From ecbfab66d3cf79d12f80bed4eaa1950605a4baec Mon Sep 17 00:00:00 2001 From: ani-kalpachka Date: Tue, 4 Apr 2023 14:44:37 +0300 Subject: [PATCH 18/24] Remove unnecessary props --- .../CompletedCampaignsSection.tsx | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/src/components/client/index/sections/CompletedCampaignsSection/CompletedCampaignsSection.tsx b/src/components/client/index/sections/CompletedCampaignsSection/CompletedCampaignsSection.tsx index daa536224..21df80b57 100644 --- a/src/components/client/index/sections/CompletedCampaignsSection/CompletedCampaignsSection.tsx +++ b/src/components/client/index/sections/CompletedCampaignsSection/CompletedCampaignsSection.tsx @@ -22,16 +22,13 @@ import { CompletedCampaignLink, } from './CompletedCampaignsSection.styled' -type Props = { campaign: CampaignResponse; index: number } - -export default function CompletedCampaignsSection({ campaign, index }: Props) { +export default function CompletedCampaignsSection() { const { t } = useTranslation('campaigns') const { data } = useCampaignList() const completedCampaigns = data?.filter( (campaign: CampaignResponse) => campaign.state === CampaignState.complete, ) - const campaignImagesUrl = campaignListPictureUrl(campaign) const onLinkMouseDown = (e) => { e.preventDefault() @@ -43,7 +40,7 @@ export default function CompletedCampaignsSection({ campaign, index }: Props) { {t('completed-campaigns')} - {completedCampaigns?.map((campaign) => ( + {completedCampaigns?.map((campaign, index) => ( From a77c55348f22dcb44685ddc357c4ff0611ca94e2 Mon Sep 17 00:00:00 2001 From: ani-kalpachka Date: Tue, 4 Apr 2023 15:00:03 +0300 Subject: [PATCH 19/24] Add type to event handler --- .../CompletedCampaignsSection.tsx | 2 +- yarn.lock | 333 ++++++++++++++++++ 2 files changed, 334 insertions(+), 1 deletion(-) diff --git a/src/components/client/index/sections/CompletedCampaignsSection/CompletedCampaignsSection.tsx b/src/components/client/index/sections/CompletedCampaignsSection/CompletedCampaignsSection.tsx index 21df80b57..82f5cd7ab 100644 --- a/src/components/client/index/sections/CompletedCampaignsSection/CompletedCampaignsSection.tsx +++ b/src/components/client/index/sections/CompletedCampaignsSection/CompletedCampaignsSection.tsx @@ -30,7 +30,7 @@ export default function CompletedCampaignsSection() { (campaign: CampaignResponse) => campaign.state === CampaignState.complete, ) - const onLinkMouseDown = (e) => { + const onLinkMouseDown = (e: React.ChangeEvent) => { e.preventDefault() } diff --git a/yarn.lock b/yarn.lock index 2821bbd65..a04a4612d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -405,6 +405,15 @@ __metadata: languageName: node linkType: hard +"@babel/runtime@npm:^7.21.0": + version: 7.21.0 + resolution: "@babel/runtime@npm:7.21.0" + dependencies: + regenerator-runtime: ^0.13.11 + checksum: 7b33e25bfa9e0e1b9e8828bb61b2d32bdd46b41b07ba7cb43319ad08efc6fda8eb89445193e67d6541814627df0ca59122c0ea795e412b99c5183a0540d338ab + languageName: node + linkType: hard + "@babel/template@npm:^7.18.10, @babel/template@npm:^7.20.7, @babel/template@npm:^7.3.3": version: 7.20.7 resolution: "@babel/template@npm:7.20.7" @@ -554,6 +563,25 @@ __metadata: languageName: node linkType: hard +"@emotion/babel-plugin@npm:^11.10.6": + version: 11.10.6 + resolution: "@emotion/babel-plugin@npm:11.10.6" + dependencies: + "@babel/helper-module-imports": ^7.16.7 + "@babel/runtime": ^7.18.3 + "@emotion/hash": ^0.9.0 + "@emotion/memoize": ^0.8.0 + "@emotion/serialize": ^1.1.1 + babel-plugin-macros: ^3.1.0 + convert-source-map: ^1.5.0 + escape-string-regexp: ^4.0.0 + find-root: ^1.1.0 + source-map: ^0.5.7 + stylis: 4.1.3 + checksum: 3eed138932e8edf2598352e69ad949b9db3051a4d6fcff190dacbac9aa838d7ef708b9f3e6c48660625d9311dae82d73477ae4e7a31139feef5eb001a5528421 + languageName: node + linkType: hard + "@emotion/cache@npm:^11.10.5, @emotion/cache@npm:^11.7.1": version: 11.10.5 resolution: "@emotion/cache@npm:11.10.5" @@ -574,6 +602,15 @@ __metadata: languageName: node linkType: hard +"@emotion/is-prop-valid@npm:^0.8.2": + version: 0.8.8 + resolution: "@emotion/is-prop-valid@npm:0.8.8" + dependencies: + "@emotion/memoize": 0.7.4 + checksum: bb7ec6d48c572c540e24e47cc94fc2f8dec2d6a342ae97bc9c8b6388d9b8d283862672172a1bb62d335c02662afe6291e10c71e9b8642664a8b43416cdceffac + languageName: node + linkType: hard + "@emotion/is-prop-valid@npm:^1.2.0": version: 1.2.0 resolution: "@emotion/is-prop-valid@npm:1.2.0" @@ -583,6 +620,13 @@ __metadata: languageName: node linkType: hard +"@emotion/memoize@npm:0.7.4": + version: 0.7.4 + resolution: "@emotion/memoize@npm:0.7.4" + checksum: 4e3920d4ec95995657a37beb43d3f4b7d89fed6caa2b173a4c04d10482d089d5c3ea50bbc96618d918b020f26ed6e9c4026bbd45433566576c1f7b056c3271dc + languageName: node + linkType: hard + "@emotion/memoize@npm:^0.8.0": version: 0.8.0 resolution: "@emotion/memoize@npm:0.8.0" @@ -590,6 +634,27 @@ __metadata: languageName: node linkType: hard +"@emotion/react@npm:^11.7.1": + version: 11.10.6 + resolution: "@emotion/react@npm:11.10.6" + dependencies: + "@babel/runtime": ^7.18.3 + "@emotion/babel-plugin": ^11.10.6 + "@emotion/cache": ^11.10.5 + "@emotion/serialize": ^1.1.1 + "@emotion/use-insertion-effect-with-fallbacks": ^1.0.0 + "@emotion/utils": ^1.2.0 + "@emotion/weak-memoize": ^0.3.0 + hoist-non-react-statics: ^3.3.1 + peerDependencies: + react: ">=16.8.0" + peerDependenciesMeta: + "@types/react": + optional: true + checksum: 4762042e39126ffaffe76052dc65c9bb0ba6b8893013687ba3cc13ed4dd834c31597f1230684c3c078e90aecc13ab6cd0e3cde0dec8b7761affd2571f4d80019 + languageName: node + linkType: hard + "@emotion/react@npm:^11.8.1": version: 11.10.5 resolution: "@emotion/react@npm:11.10.5" @@ -651,6 +716,26 @@ __metadata: languageName: node linkType: hard +"@emotion/styled@npm:^11.6.0": + version: 11.10.6 + resolution: "@emotion/styled@npm:11.10.6" + dependencies: + "@babel/runtime": ^7.18.3 + "@emotion/babel-plugin": ^11.10.6 + "@emotion/is-prop-valid": ^1.2.0 + "@emotion/serialize": ^1.1.1 + "@emotion/use-insertion-effect-with-fallbacks": ^1.0.0 + "@emotion/utils": ^1.2.0 + peerDependencies: + "@emotion/react": ^11.0.0-rc.0 + react: ">=16.8.0" + peerDependenciesMeta: + "@types/react": + optional: true + checksum: ed0ee4bec3b63ee9c5eb8216b22646313ff1ada06c5183f128d25b73252126e9fde625e81c868be7ccd666b686a73076f923ce188dac25e93d5062ddffdad46f + languageName: node + linkType: hard + "@emotion/styled@npm:^11.8.1": version: 11.10.5 resolution: "@emotion/styled@npm:11.10.5" @@ -1056,6 +1141,36 @@ __metadata: languageName: node linkType: hard +"@mui/base@npm:5.0.0-alpha.123": + version: 5.0.0-alpha.123 + resolution: "@mui/base@npm:5.0.0-alpha.123" + dependencies: + "@babel/runtime": ^7.21.0 + "@emotion/is-prop-valid": ^1.2.0 + "@mui/types": ^7.2.3 + "@mui/utils": ^5.11.13 + "@popperjs/core": ^2.11.7 + clsx: ^1.2.1 + prop-types: ^15.8.1 + react-is: ^18.2.0 + peerDependencies: + "@types/react": ^17.0.0 || ^18.0.0 + react: ^17.0.0 || ^18.0.0 + react-dom: ^17.0.0 || ^18.0.0 + peerDependenciesMeta: + "@types/react": + optional: true + checksum: a17c266d0a922903e43c08cce8f42d1a35716b5d1574393c90ac89290029f6c08ef7261ba7af3609917a32fce1a1c0efdab06320df4d1ab351fd987e429f6dfd + languageName: node + linkType: hard + +"@mui/core-downloads-tracker@npm:^5.11.15": + version: 5.11.15 + resolution: "@mui/core-downloads-tracker@npm:5.11.15" + checksum: 8dc377b415ac1c18ec11a55fe916aeb0317e4c454759e3c3c0d3bdeaef75236486f17cb9ef3ae01eaee5f51e2cc7ada6a7e7ca452a64ddbbb8638c32e2615938 + languageName: node + linkType: hard + "@mui/core-downloads-tracker@npm:^5.11.9": version: 5.11.9 resolution: "@mui/core-downloads-tracker@npm:5.11.9" @@ -1079,6 +1194,22 @@ __metadata: languageName: node linkType: hard +"@mui/icons-material@npm:^5.4.1": + version: 5.11.11 + resolution: "@mui/icons-material@npm:5.11.11" + dependencies: + "@babel/runtime": ^7.21.0 + peerDependencies: + "@mui/material": ^5.0.0 + "@types/react": ^17.0.0 || ^18.0.0 + react: ^17.0.0 || ^18.0.0 + peerDependenciesMeta: + "@types/react": + optional: true + checksum: 6ec89f3c68aaedd521f6a5106964394c410b08cec6875166d3ee97dcbaf2983c67d3b19cd58113d767d9f934cc0e9439fb5856e45471f5094656c0f87bbefecd + languageName: node + linkType: hard + "@mui/lab@npm:^5.0.0-alpha.69": version: 5.0.0-alpha.120 resolution: "@mui/lab@npm:5.0.0-alpha.120" @@ -1142,6 +1273,56 @@ __metadata: languageName: node linkType: hard +"@mui/material@npm:^5.4.1": + version: 5.11.15 + resolution: "@mui/material@npm:5.11.15" + dependencies: + "@babel/runtime": ^7.21.0 + "@mui/base": 5.0.0-alpha.123 + "@mui/core-downloads-tracker": ^5.11.15 + "@mui/system": ^5.11.15 + "@mui/types": ^7.2.3 + "@mui/utils": ^5.11.13 + "@types/react-transition-group": ^4.4.5 + clsx: ^1.2.1 + csstype: ^3.1.1 + prop-types: ^15.8.1 + react-is: ^18.2.0 + react-transition-group: ^4.4.5 + peerDependencies: + "@emotion/react": ^11.5.0 + "@emotion/styled": ^11.3.0 + "@types/react": ^17.0.0 || ^18.0.0 + react: ^17.0.0 || ^18.0.0 + react-dom: ^17.0.0 || ^18.0.0 + peerDependenciesMeta: + "@emotion/react": + optional: true + "@emotion/styled": + optional: true + "@types/react": + optional: true + checksum: 53726a8aa2ab541c967eda43fe0094486e2f2ac743c39f09a5326aeffdba0be414187f216346c45135751b63a28a9871f4e68f4d6ab89b5b1d86e468f869d328 + languageName: node + linkType: hard + +"@mui/private-theming@npm:^5.11.13": + version: 5.11.13 + resolution: "@mui/private-theming@npm:5.11.13" + dependencies: + "@babel/runtime": ^7.21.0 + "@mui/utils": ^5.11.13 + prop-types: ^15.8.1 + peerDependencies: + "@types/react": ^17.0.0 || ^18.0.0 + react: ^17.0.0 || ^18.0.0 + peerDependenciesMeta: + "@types/react": + optional: true + checksum: 9e5e02c6482945d9fa52e920fb206fb032d1b1df4bb06ea9d032babb53ed171e3b5a7969091072a5d04b0ab52c90f01ba51b90ba27730019d3f7eccc49ca4628 + languageName: node + linkType: hard + "@mui/private-theming@npm:^5.11.9": version: 5.11.9 resolution: "@mui/private-theming@npm:5.11.9" @@ -1159,6 +1340,27 @@ __metadata: languageName: node linkType: hard +"@mui/styled-engine@npm:^5.11.11": + version: 5.11.11 + resolution: "@mui/styled-engine@npm:5.11.11" + dependencies: + "@babel/runtime": ^7.21.0 + "@emotion/cache": ^11.10.5 + csstype: ^3.1.1 + prop-types: ^15.8.1 + peerDependencies: + "@emotion/react": ^11.4.1 + "@emotion/styled": ^11.3.0 + react: ^17.0.0 || ^18.0.0 + peerDependenciesMeta: + "@emotion/react": + optional: true + "@emotion/styled": + optional: true + checksum: 63b71aafe79afbe1638a31d9cc1361d11edd5b4a8eacc50da86d83b5db11c9a1713c5744d1533360488aef85afc8d4a5429517447b78b598493c7a7d639390dd + languageName: node + linkType: hard + "@mui/styled-engine@npm:^5.11.9": version: 5.11.9 resolution: "@mui/styled-engine@npm:5.11.9" @@ -1211,6 +1413,34 @@ __metadata: languageName: node linkType: hard +"@mui/system@npm:^5.11.15, @mui/system@npm:^5.4.1": + version: 5.11.15 + resolution: "@mui/system@npm:5.11.15" + dependencies: + "@babel/runtime": ^7.21.0 + "@mui/private-theming": ^5.11.13 + "@mui/styled-engine": ^5.11.11 + "@mui/types": ^7.2.3 + "@mui/utils": ^5.11.13 + clsx: ^1.2.1 + csstype: ^3.1.1 + prop-types: ^15.8.1 + peerDependencies: + "@emotion/react": ^11.5.0 + "@emotion/styled": ^11.3.0 + "@types/react": ^17.0.0 || ^18.0.0 + react: ^17.0.0 || ^18.0.0 + peerDependenciesMeta: + "@emotion/react": + optional: true + "@emotion/styled": + optional: true + "@types/react": + optional: true + checksum: c8b8ffcf48b204f8e0ff6cc2ef5a35b6a3ef3517c9626dbb2fda073b81992c93750167440737459b82ff1ac2bf6d4e9eb9ce3b39887bdc4dbded5bc8266032ac + languageName: node + linkType: hard + "@mui/system@npm:^5.11.9": version: 5.11.9 resolution: "@mui/system@npm:5.11.9" @@ -1266,6 +1496,21 @@ __metadata: languageName: node linkType: hard +"@mui/utils@npm:^5.11.13": + version: 5.11.13 + resolution: "@mui/utils@npm:5.11.13" + dependencies: + "@babel/runtime": ^7.21.0 + "@types/prop-types": ^15.7.5 + "@types/react-is": ^16.7.1 || ^17.0.0 + prop-types: ^15.8.1 + react-is: ^18.2.0 + peerDependencies: + react: ^17.0.0 || ^18.0.0 + checksum: 0f403f2635fd5cd39c013b9d4defa2cf1ecc023e35b8c9866d6123792480dcafe47207e43420c10b0d030e64df31e78adfdb8248e2476da27f07d80ed0b44927 + languageName: node + linkType: hard + "@mui/x-data-grid@npm:^5.17.2": version: 5.17.23 resolution: "@mui/x-data-grid@npm:5.17.23" @@ -1550,6 +1795,13 @@ __metadata: languageName: node linkType: hard +"@popperjs/core@npm:^2.11.7": + version: 2.11.7 + resolution: "@popperjs/core@npm:2.11.7" + checksum: 5b6553747899683452a1d28898c1b39173a4efd780e74360bfcda8eb42f1c5e819602769c81a10920fc68c881d07fb40429604517d499567eac079cfa6470f19 + languageName: node + linkType: hard + "@react-pdf/fns@npm:2.0.0": version: 2.0.0 resolution: "@react-pdf/fns@npm:2.0.0" @@ -5054,6 +5306,35 @@ __metadata: languageName: node linkType: hard +"framer-motion@npm:^4.1.17": + version: 4.1.17 + resolution: "framer-motion@npm:4.1.17" + dependencies: + "@emotion/is-prop-valid": ^0.8.2 + framesync: 5.3.0 + hey-listen: ^1.0.8 + popmotion: 9.3.6 + style-value-types: 4.1.4 + tslib: ^2.1.0 + peerDependencies: + react: ">=16.8 || ^17.0.0" + react-dom: ">=16.8 || ^17.0.0" + dependenciesMeta: + "@emotion/is-prop-valid": + optional: true + checksum: f6b5fc8f189e6760353aa5b67515b6576ebaa164d8df73118780a09d1d4a162e54dfeb126a05c6a28727af88f4a80f8b94900ff9510be44dada6496a99273fde + languageName: node + linkType: hard + +"framesync@npm:5.3.0": + version: 5.3.0 + resolution: "framesync@npm:5.3.0" + dependencies: + tslib: ^2.1.0 + checksum: 9ebbb2863e6a1cfd2e9dd1b73af427d23caa03c92dd49ea767ebdd208c3a573bba4a1026f67068d856a21704f79adcdf2f750cc852ff73bc1f0e80edaaecded8 + languageName: node + linkType: hard + "fs-constants@npm:^1.0.0": version: 1.0.0 resolution: "fs-constants@npm:1.0.0" @@ -5455,6 +5736,13 @@ __metadata: languageName: node linkType: hard +"hey-listen@npm:^1.0.8": + version: 1.0.8 + resolution: "hey-listen@npm:1.0.8" + checksum: 6bad60b367688f5348e25e7ca3276a74b59ac5a09b0455e6ff8ab7d4a9e38cd2116c708a7dcd8a954d27253ce1d8717ec891d175723ea739885b828cf44e4072 + languageName: node + linkType: hard + "hi-base32@npm:^0.5.0": version: 0.5.1 resolution: "hi-base32@npm:0.5.1" @@ -8471,6 +8759,7 @@ __metadata: react-dom: 18.2.0 react-gtm-module: 2.0.11 react-i18next: ^11.17.1 + react-material-ui-carousel: ^3.4.2 react-quill: ^2.0.0-beta.4 react-slick: ^0.29.0 sharp: ^0.30.5 @@ -8486,6 +8775,18 @@ __metadata: languageName: unknown linkType: soft +"popmotion@npm:9.3.6": + version: 9.3.6 + resolution: "popmotion@npm:9.3.6" + dependencies: + framesync: 5.3.0 + hey-listen: ^1.0.8 + style-value-types: 4.1.4 + tslib: ^2.1.0 + checksum: 551446ec3763790efde7a3bb8c43189122f9b559985be2efa79842138257c4e331efcff606732a4bd5ac82d9bde1b236258d69a435f4bb5e9fc5908241b5ba3f + languageName: node + linkType: hard + "postcss-media-query-parser@npm:^0.2.3": version: 0.2.3 resolution: "postcss-media-query-parser@npm:0.2.3" @@ -8937,6 +9238,28 @@ __metadata: languageName: node linkType: hard +"react-material-ui-carousel@npm:^3.4.2": + version: 3.4.2 + resolution: "react-material-ui-carousel@npm:3.4.2" + dependencies: + "@emotion/react": ^11.7.1 + "@emotion/styled": ^11.6.0 + "@mui/icons-material": ^5.4.1 + "@mui/material": ^5.4.1 + "@mui/system": ^5.4.1 + framer-motion: ^4.1.17 + peerDependencies: + "@emotion/react": ^11.4.1 + "@emotion/styled": ^11.3.0 + "@mui/icons-material": ^5.0.0 + "@mui/material": ^5.0.0 + "@mui/system": ^5.0.0 + react: ^17.0.1 || ^18.0.0 + react-dom: ^17.0.2 || ^18.0.0 + checksum: 9a1bbe20cbe07b4dade8ba248918dc824629192042e91535142029756cb6ae12d70b3c5ff18afc46fd013a68a4d4e649a8b814a8b7e5dd60dec073b195c9bbe7 + languageName: node + linkType: hard + "react-quill@npm:^2.0.0-beta.4": version: 2.0.0 resolution: "react-quill@npm:2.0.0" @@ -10003,6 +10326,16 @@ __metadata: languageName: node linkType: hard +"style-value-types@npm:4.1.4": + version: 4.1.4 + resolution: "style-value-types@npm:4.1.4" + dependencies: + hey-listen: ^1.0.8 + tslib: ^2.1.0 + checksum: 96189770076a2717bf579f7d73a49953f0c3d633b90fed9b44b8285cbbe7facd19d6d7a0d2802fb493b45995791f62b87983c3d3c24128818a69e593b6d77aed + languageName: node + linkType: hard + "styled-jsx@npm:5.1.1": version: 5.1.1 resolution: "styled-jsx@npm:5.1.1" From b660299e0fd07499af10ecc50e6880e6079e42e4 Mon Sep 17 00:00:00 2001 From: ani-kalpachka Date: Tue, 4 Apr 2023 15:33:22 +0300 Subject: [PATCH 20/24] Add new color in theme --- src/common/theme.ts | 416 +++++++++--------- .../CompletedCampaignsSection.styled.tsx | 2 +- 2 files changed, 211 insertions(+), 207 deletions(-) diff --git a/src/common/theme.ts b/src/common/theme.ts index a248ac851..e07e5acee 100644 --- a/src/common/theme.ts +++ b/src/common/theme.ts @@ -1,206 +1,210 @@ -import { - createTheme, - darken, - lighten, - responsiveFontSizes, - Theme, - ThemeOptions, -} from '@mui/material/styles' - -import { Montserrat } from '@next/font/google' - -export const montserrat = Montserrat({ - display: 'auto', - subsets: ['latin', 'cyrillic'], -}) - -// Instead of exporting `colors` variable use theme: -// import theme from 'common/theme' -// -const colors = { - blue: { - light: '#4AC3FF', - main: '#32A9FE', - mainDark: darken('#32A9FE', 0.2), - dark: '#294E85', - }, - yellow: { - main: '#FFCB57', - dark: '#F6992B', - }, - gray: { - main: '#F5F5F5', - background: '#FAFAFA', - }, - white: { - main: '#ffffff', - }, -} - -const borders = { - dark: colors.blue.dark, - light: colors.blue.main, - round: '60px', - semiRound: '20px', -} - -export const themeOptions: ThemeOptions = { - palette: { - mode: 'light', - primary: { - light: colors.blue.light, - main: colors.blue.main, - dark: colors.blue.dark, - }, - secondary: { - main: colors.yellow.main, - light: colors.gray.main, - }, - background: { - default: colors.white.main, - }, - info: { - main: colors.blue.dark, - light: colors.blue.mainDark, - dark: darken(colors.blue.dark, 0.2), - }, - }, - shape: { - borderRadius: 3, - }, - components: { - MuiLink: { - defaultProps: { - underline: 'none', - }, - }, - MuiButton: { - defaultProps: { - disableElevation: true, - }, - styleOverrides: { - root: { - lineHeight: 2, - borderRadius: '25px', - borderWidth: 2, - '&:hover': { - borderWidth: 2, - }, - }, - textPrimary: { - color: colors.blue.dark, - '&:hover': { - color: colors.blue.mainDark, - }, - }, - outlined: { - backgroundColor: colors.white.main, - }, - outlinedPrimary: { - color: colors.blue.dark, - '&:hover': { - backgroundColor: lighten(colors.blue.main, 0.85), - }, - }, - outlinedSecondary: { - color: darken(colors.yellow.dark, 0.4), - borderColor: colors.yellow.main, - '&:hover': { - backgroundColor: lighten(colors.yellow.main, 0.85), - borderColor: darken(colors.yellow.main, 0.15), - }, - }, - containedPrimary: { - backgroundColor: colors.blue.main, - '&:hover': { - backgroundColor: darken(colors.blue.main, 0.15), - }, - }, - containedSecondary: { - backgroundColor: colors.yellow.main, - '&:hover': { - backgroundColor: darken(colors.yellow.main, 0.15), - }, - }, - }, - }, - MuiButtonBase: { - defaultProps: { - disableRipple: true, - }, - }, - MuiInputBase: { - styleOverrides: { - root: { - fontSize: '1rem', - borderRadius: borders.round, - }, - multiline: { - borderRadius: borders.semiRound, - }, - }, - }, - MuiFilledInput: { - styleOverrides: { - root: { - borderRadius: borders.round, - }, - multiline: { - borderRadius: borders.semiRound, - }, - }, - }, - MuiOutlinedInput: { - styleOverrides: { - root: { - borderRadius: borders.round, - }, - multiline: { - borderRadius: borders.semiRound, - }, - }, - }, - MuiInputLabel: { - styleOverrides: { - root: { - fontSize: '1rem', - }, - }, - }, - MuiAppBar: { - styleOverrides: { - root: { - paddingLeft: 15, - paddingRight: 15, - }, - }, - }, - - MuiMenuItem: { - defaultProps: { - sx: { py: 1.5 }, - }, - }, - }, - - typography: { - fontFamily: montserrat.style.fontFamily, - h3: { color: colors.blue.dark }, - - body1: { - fontSize: '0.875rem', - lineHeight: '1.43', - letterSpacing: '0.01071em', - }, - button: { textTransform: 'initial' }, - }, -} -// https://material-ui.com/customization/default-theme/#default-theme -const theme: Theme = createTheme(themeOptions) -const materialTheme = responsiveFontSizes(theme) -const podkrepiTheme = { - borders, - ...materialTheme, -} - -export default podkrepiTheme +import { + createTheme, + darken, + lighten, + responsiveFontSizes, + Theme, + ThemeOptions, +} from '@mui/material/styles' + +import { Montserrat } from '@next/font/google' + +export const montserrat = Montserrat({ + display: 'auto', + subsets: ['latin', 'cyrillic'], +}) + +// Instead of exporting `colors` variable use theme: +// import theme from 'common/theme' +// +const colors = { + blue: { + light: '#4AC3FF', + main: '#32A9FE', + mainDark: darken('#32A9FE', 0.2), + dark: '#294E85', + skyBlue: '#B0E5FF', + }, + yellow: { + main: '#FFCB57', + dark: '#F6992B', + }, + gray: { + main: '#F5F5F5', + background: '#FAFAFA', + }, + white: { + main: '#ffffff', + }, +} + +const borders = { + dark: colors.blue.dark, + light: colors.blue.main, + round: '60px', + semiRound: '20px', +} + +export const themeOptions: ThemeOptions = { + palette: { + mode: 'light', + primary: { + light: colors.blue.light, + main: colors.blue.main, + dark: colors.blue.dark, + }, + secondary: { + main: colors.yellow.main, + light: colors.gray.main, + }, + background: { + default: colors.white.main, + }, + info: { + main: colors.blue.dark, + light: colors.blue.mainDark, + dark: darken(colors.blue.dark, 0.2), + }, + text: { + primary: colors.blue.skyBlue, + }, + }, + shape: { + borderRadius: 3, + }, + components: { + MuiLink: { + defaultProps: { + underline: 'none', + }, + }, + MuiButton: { + defaultProps: { + disableElevation: true, + }, + styleOverrides: { + root: { + lineHeight: 2, + borderRadius: '25px', + borderWidth: 2, + '&:hover': { + borderWidth: 2, + }, + }, + textPrimary: { + color: colors.blue.dark, + '&:hover': { + color: colors.blue.mainDark, + }, + }, + outlined: { + backgroundColor: colors.white.main, + }, + outlinedPrimary: { + color: colors.blue.dark, + '&:hover': { + backgroundColor: lighten(colors.blue.main, 0.85), + }, + }, + outlinedSecondary: { + color: darken(colors.yellow.dark, 0.4), + borderColor: colors.yellow.main, + '&:hover': { + backgroundColor: lighten(colors.yellow.main, 0.85), + borderColor: darken(colors.yellow.main, 0.15), + }, + }, + containedPrimary: { + backgroundColor: colors.blue.main, + '&:hover': { + backgroundColor: darken(colors.blue.main, 0.15), + }, + }, + containedSecondary: { + backgroundColor: colors.yellow.main, + '&:hover': { + backgroundColor: darken(colors.yellow.main, 0.15), + }, + }, + }, + }, + MuiButtonBase: { + defaultProps: { + disableRipple: true, + }, + }, + MuiInputBase: { + styleOverrides: { + root: { + fontSize: '1rem', + borderRadius: borders.round, + }, + multiline: { + borderRadius: borders.semiRound, + }, + }, + }, + MuiFilledInput: { + styleOverrides: { + root: { + borderRadius: borders.round, + }, + multiline: { + borderRadius: borders.semiRound, + }, + }, + }, + MuiOutlinedInput: { + styleOverrides: { + root: { + borderRadius: borders.round, + }, + multiline: { + borderRadius: borders.semiRound, + }, + }, + }, + MuiInputLabel: { + styleOverrides: { + root: { + fontSize: '1rem', + }, + }, + }, + MuiAppBar: { + styleOverrides: { + root: { + paddingLeft: 15, + paddingRight: 15, + }, + }, + }, + + MuiMenuItem: { + defaultProps: { + sx: { py: 1.5 }, + }, + }, + }, + + typography: { + fontFamily: montserrat.style.fontFamily, + h3: { color: colors.blue.dark }, + + body1: { + fontSize: '0.875rem', + lineHeight: '1.43', + letterSpacing: '0.01071em', + }, + button: { textTransform: 'initial' }, + }, +} + +const theme: Theme = createTheme(themeOptions) +const materialTheme = responsiveFontSizes(theme) +const podkrepiTheme = { + borders, + ...materialTheme, +} + +export default podkrepiTheme diff --git a/src/components/client/index/sections/CompletedCampaignsSection/CompletedCampaignsSection.styled.tsx b/src/components/client/index/sections/CompletedCampaignsSection/CompletedCampaignsSection.styled.tsx index 648030611..41c2dc0b3 100644 --- a/src/components/client/index/sections/CompletedCampaignsSection/CompletedCampaignsSection.styled.tsx +++ b/src/components/client/index/sections/CompletedCampaignsSection/CompletedCampaignsSection.styled.tsx @@ -39,7 +39,7 @@ export const ReachedMoneyWrapper = styled(Typography)(() => ({ minHeight: theme.spacing(7.5), background: '#323232', borderRadius: theme.spacing(0, 0, 0, 2), - color: '#B0E5FF', + color: theme.palette.text.primary, marginLeft: 'auto', fontFamily: 'Montserrat, sans-serif', fontSize: theme.typography.pxToRem(17), From af5d2451a0732f44a117bde2da7ae11a9a7314d4 Mon Sep 17 00:00:00 2001 From: ani-kalpachka Date: Tue, 4 Apr 2023 15:34:08 +0300 Subject: [PATCH 21/24] Remove unnecessary comment --- src/common/theme.ts | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/common/theme.ts b/src/common/theme.ts index e07e5acee..aabbdb2c6 100644 --- a/src/common/theme.ts +++ b/src/common/theme.ts @@ -14,9 +14,6 @@ export const montserrat = Montserrat({ subsets: ['latin', 'cyrillic'], }) -// Instead of exporting `colors` variable use theme: -// import theme from 'common/theme' -// const colors = { blue: { light: '#4AC3FF', From fe8f59e344875c51cd4ad7657b378af53ff54e53 Mon Sep 17 00:00:00 2001 From: ani-kalpachka Date: Tue, 4 Apr 2023 16:07:59 +0300 Subject: [PATCH 22/24] Remove unused dependency --- package.json | 1 - yarn.lock | 23 ----------------------- 2 files changed, 24 deletions(-) diff --git a/package.json b/package.json index c21f29062..b31911151 100644 --- a/package.json +++ b/package.json @@ -63,7 +63,6 @@ "react-dom": "18.2.0", "react-gtm-module": "2.0.11", "react-i18next": "^11.17.1", - "react-material-ui-carousel": "^3.4.2", "react-quill": "^2.0.0-beta.4", "react-slick": "^0.29.0", "sharp": "^0.30.5", diff --git a/yarn.lock b/yarn.lock index a04a4612d..f298cd873 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8759,7 +8759,6 @@ __metadata: react-dom: 18.2.0 react-gtm-module: 2.0.11 react-i18next: ^11.17.1 - react-material-ui-carousel: ^3.4.2 react-quill: ^2.0.0-beta.4 react-slick: ^0.29.0 sharp: ^0.30.5 @@ -9238,28 +9237,6 @@ __metadata: languageName: node linkType: hard -"react-material-ui-carousel@npm:^3.4.2": - version: 3.4.2 - resolution: "react-material-ui-carousel@npm:3.4.2" - dependencies: - "@emotion/react": ^11.7.1 - "@emotion/styled": ^11.6.0 - "@mui/icons-material": ^5.4.1 - "@mui/material": ^5.4.1 - "@mui/system": ^5.4.1 - framer-motion: ^4.1.17 - peerDependencies: - "@emotion/react": ^11.4.1 - "@emotion/styled": ^11.3.0 - "@mui/icons-material": ^5.0.0 - "@mui/material": ^5.0.0 - "@mui/system": ^5.0.0 - react: ^17.0.1 || ^18.0.0 - react-dom: ^17.0.2 || ^18.0.0 - checksum: 9a1bbe20cbe07b4dade8ba248918dc824629192042e91535142029756cb6ae12d70b3c5ff18afc46fd013a68a4d4e649a8b814a8b7e5dd60dec073b195c9bbe7 - languageName: node - linkType: hard - "react-quill@npm:^2.0.0-beta.4": version: 2.0.0 resolution: "react-quill@npm:2.0.0" From 16606abf3203303f7d2493a508cea50db9264cdf Mon Sep 17 00:00:00 2001 From: ani-kalpachka Date: Tue, 4 Apr 2023 16:23:35 +0300 Subject: [PATCH 23/24] Revert dependency changes --- package.json | 1 + yarn.lock | 333 ++++----------------------------------------------- 2 files changed, 24 insertions(+), 310 deletions(-) diff --git a/package.json b/package.json index b31911151..c21f29062 100644 --- a/package.json +++ b/package.json @@ -63,6 +63,7 @@ "react-dom": "18.2.0", "react-gtm-module": "2.0.11", "react-i18next": "^11.17.1", + "react-material-ui-carousel": "^3.4.2", "react-quill": "^2.0.0-beta.4", "react-slick": "^0.29.0", "sharp": "^0.30.5", diff --git a/yarn.lock b/yarn.lock index f298cd873..d50dcf35d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -405,15 +405,6 @@ __metadata: languageName: node linkType: hard -"@babel/runtime@npm:^7.21.0": - version: 7.21.0 - resolution: "@babel/runtime@npm:7.21.0" - dependencies: - regenerator-runtime: ^0.13.11 - checksum: 7b33e25bfa9e0e1b9e8828bb61b2d32bdd46b41b07ba7cb43319ad08efc6fda8eb89445193e67d6541814627df0ca59122c0ea795e412b99c5183a0540d338ab - languageName: node - linkType: hard - "@babel/template@npm:^7.18.10, @babel/template@npm:^7.20.7, @babel/template@npm:^7.3.3": version: 7.20.7 resolution: "@babel/template@npm:7.20.7" @@ -563,25 +554,6 @@ __metadata: languageName: node linkType: hard -"@emotion/babel-plugin@npm:^11.10.6": - version: 11.10.6 - resolution: "@emotion/babel-plugin@npm:11.10.6" - dependencies: - "@babel/helper-module-imports": ^7.16.7 - "@babel/runtime": ^7.18.3 - "@emotion/hash": ^0.9.0 - "@emotion/memoize": ^0.8.0 - "@emotion/serialize": ^1.1.1 - babel-plugin-macros: ^3.1.0 - convert-source-map: ^1.5.0 - escape-string-regexp: ^4.0.0 - find-root: ^1.1.0 - source-map: ^0.5.7 - stylis: 4.1.3 - checksum: 3eed138932e8edf2598352e69ad949b9db3051a4d6fcff190dacbac9aa838d7ef708b9f3e6c48660625d9311dae82d73477ae4e7a31139feef5eb001a5528421 - languageName: node - linkType: hard - "@emotion/cache@npm:^11.10.5, @emotion/cache@npm:^11.7.1": version: 11.10.5 resolution: "@emotion/cache@npm:11.10.5" @@ -602,15 +574,6 @@ __metadata: languageName: node linkType: hard -"@emotion/is-prop-valid@npm:^0.8.2": - version: 0.8.8 - resolution: "@emotion/is-prop-valid@npm:0.8.8" - dependencies: - "@emotion/memoize": 0.7.4 - checksum: bb7ec6d48c572c540e24e47cc94fc2f8dec2d6a342ae97bc9c8b6388d9b8d283862672172a1bb62d335c02662afe6291e10c71e9b8642664a8b43416cdceffac - languageName: node - linkType: hard - "@emotion/is-prop-valid@npm:^1.2.0": version: 1.2.0 resolution: "@emotion/is-prop-valid@npm:1.2.0" @@ -620,13 +583,6 @@ __metadata: languageName: node linkType: hard -"@emotion/memoize@npm:0.7.4": - version: 0.7.4 - resolution: "@emotion/memoize@npm:0.7.4" - checksum: 4e3920d4ec95995657a37beb43d3f4b7d89fed6caa2b173a4c04d10482d089d5c3ea50bbc96618d918b020f26ed6e9c4026bbd45433566576c1f7b056c3271dc - languageName: node - linkType: hard - "@emotion/memoize@npm:^0.8.0": version: 0.8.0 resolution: "@emotion/memoize@npm:0.8.0" @@ -634,27 +590,6 @@ __metadata: languageName: node linkType: hard -"@emotion/react@npm:^11.7.1": - version: 11.10.6 - resolution: "@emotion/react@npm:11.10.6" - dependencies: - "@babel/runtime": ^7.18.3 - "@emotion/babel-plugin": ^11.10.6 - "@emotion/cache": ^11.10.5 - "@emotion/serialize": ^1.1.1 - "@emotion/use-insertion-effect-with-fallbacks": ^1.0.0 - "@emotion/utils": ^1.2.0 - "@emotion/weak-memoize": ^0.3.0 - hoist-non-react-statics: ^3.3.1 - peerDependencies: - react: ">=16.8.0" - peerDependenciesMeta: - "@types/react": - optional: true - checksum: 4762042e39126ffaffe76052dc65c9bb0ba6b8893013687ba3cc13ed4dd834c31597f1230684c3c078e90aecc13ab6cd0e3cde0dec8b7761affd2571f4d80019 - languageName: node - linkType: hard - "@emotion/react@npm:^11.8.1": version: 11.10.5 resolution: "@emotion/react@npm:11.10.5" @@ -716,26 +651,6 @@ __metadata: languageName: node linkType: hard -"@emotion/styled@npm:^11.6.0": - version: 11.10.6 - resolution: "@emotion/styled@npm:11.10.6" - dependencies: - "@babel/runtime": ^7.18.3 - "@emotion/babel-plugin": ^11.10.6 - "@emotion/is-prop-valid": ^1.2.0 - "@emotion/serialize": ^1.1.1 - "@emotion/use-insertion-effect-with-fallbacks": ^1.0.0 - "@emotion/utils": ^1.2.0 - peerDependencies: - "@emotion/react": ^11.0.0-rc.0 - react: ">=16.8.0" - peerDependenciesMeta: - "@types/react": - optional: true - checksum: ed0ee4bec3b63ee9c5eb8216b22646313ff1ada06c5183f128d25b73252126e9fde625e81c868be7ccd666b686a73076f923ce188dac25e93d5062ddffdad46f - languageName: node - linkType: hard - "@emotion/styled@npm:^11.8.1": version: 11.10.5 resolution: "@emotion/styled@npm:11.10.5" @@ -1141,36 +1056,6 @@ __metadata: languageName: node linkType: hard -"@mui/base@npm:5.0.0-alpha.123": - version: 5.0.0-alpha.123 - resolution: "@mui/base@npm:5.0.0-alpha.123" - dependencies: - "@babel/runtime": ^7.21.0 - "@emotion/is-prop-valid": ^1.2.0 - "@mui/types": ^7.2.3 - "@mui/utils": ^5.11.13 - "@popperjs/core": ^2.11.7 - clsx: ^1.2.1 - prop-types: ^15.8.1 - react-is: ^18.2.0 - peerDependencies: - "@types/react": ^17.0.0 || ^18.0.0 - react: ^17.0.0 || ^18.0.0 - react-dom: ^17.0.0 || ^18.0.0 - peerDependenciesMeta: - "@types/react": - optional: true - checksum: a17c266d0a922903e43c08cce8f42d1a35716b5d1574393c90ac89290029f6c08ef7261ba7af3609917a32fce1a1c0efdab06320df4d1ab351fd987e429f6dfd - languageName: node - linkType: hard - -"@mui/core-downloads-tracker@npm:^5.11.15": - version: 5.11.15 - resolution: "@mui/core-downloads-tracker@npm:5.11.15" - checksum: 8dc377b415ac1c18ec11a55fe916aeb0317e4c454759e3c3c0d3bdeaef75236486f17cb9ef3ae01eaee5f51e2cc7ada6a7e7ca452a64ddbbb8638c32e2615938 - languageName: node - linkType: hard - "@mui/core-downloads-tracker@npm:^5.11.9": version: 5.11.9 resolution: "@mui/core-downloads-tracker@npm:5.11.9" @@ -1194,22 +1079,6 @@ __metadata: languageName: node linkType: hard -"@mui/icons-material@npm:^5.4.1": - version: 5.11.11 - resolution: "@mui/icons-material@npm:5.11.11" - dependencies: - "@babel/runtime": ^7.21.0 - peerDependencies: - "@mui/material": ^5.0.0 - "@types/react": ^17.0.0 || ^18.0.0 - react: ^17.0.0 || ^18.0.0 - peerDependenciesMeta: - "@types/react": - optional: true - checksum: 6ec89f3c68aaedd521f6a5106964394c410b08cec6875166d3ee97dcbaf2983c67d3b19cd58113d767d9f934cc0e9439fb5856e45471f5094656c0f87bbefecd - languageName: node - linkType: hard - "@mui/lab@npm:^5.0.0-alpha.69": version: 5.0.0-alpha.120 resolution: "@mui/lab@npm:5.0.0-alpha.120" @@ -1273,56 +1142,6 @@ __metadata: languageName: node linkType: hard -"@mui/material@npm:^5.4.1": - version: 5.11.15 - resolution: "@mui/material@npm:5.11.15" - dependencies: - "@babel/runtime": ^7.21.0 - "@mui/base": 5.0.0-alpha.123 - "@mui/core-downloads-tracker": ^5.11.15 - "@mui/system": ^5.11.15 - "@mui/types": ^7.2.3 - "@mui/utils": ^5.11.13 - "@types/react-transition-group": ^4.4.5 - clsx: ^1.2.1 - csstype: ^3.1.1 - prop-types: ^15.8.1 - react-is: ^18.2.0 - react-transition-group: ^4.4.5 - peerDependencies: - "@emotion/react": ^11.5.0 - "@emotion/styled": ^11.3.0 - "@types/react": ^17.0.0 || ^18.0.0 - react: ^17.0.0 || ^18.0.0 - react-dom: ^17.0.0 || ^18.0.0 - peerDependenciesMeta: - "@emotion/react": - optional: true - "@emotion/styled": - optional: true - "@types/react": - optional: true - checksum: 53726a8aa2ab541c967eda43fe0094486e2f2ac743c39f09a5326aeffdba0be414187f216346c45135751b63a28a9871f4e68f4d6ab89b5b1d86e468f869d328 - languageName: node - linkType: hard - -"@mui/private-theming@npm:^5.11.13": - version: 5.11.13 - resolution: "@mui/private-theming@npm:5.11.13" - dependencies: - "@babel/runtime": ^7.21.0 - "@mui/utils": ^5.11.13 - prop-types: ^15.8.1 - peerDependencies: - "@types/react": ^17.0.0 || ^18.0.0 - react: ^17.0.0 || ^18.0.0 - peerDependenciesMeta: - "@types/react": - optional: true - checksum: 9e5e02c6482945d9fa52e920fb206fb032d1b1df4bb06ea9d032babb53ed171e3b5a7969091072a5d04b0ab52c90f01ba51b90ba27730019d3f7eccc49ca4628 - languageName: node - linkType: hard - "@mui/private-theming@npm:^5.11.9": version: 5.11.9 resolution: "@mui/private-theming@npm:5.11.9" @@ -1340,27 +1159,6 @@ __metadata: languageName: node linkType: hard -"@mui/styled-engine@npm:^5.11.11": - version: 5.11.11 - resolution: "@mui/styled-engine@npm:5.11.11" - dependencies: - "@babel/runtime": ^7.21.0 - "@emotion/cache": ^11.10.5 - csstype: ^3.1.1 - prop-types: ^15.8.1 - peerDependencies: - "@emotion/react": ^11.4.1 - "@emotion/styled": ^11.3.0 - react: ^17.0.0 || ^18.0.0 - peerDependenciesMeta: - "@emotion/react": - optional: true - "@emotion/styled": - optional: true - checksum: 63b71aafe79afbe1638a31d9cc1361d11edd5b4a8eacc50da86d83b5db11c9a1713c5744d1533360488aef85afc8d4a5429517447b78b598493c7a7d639390dd - languageName: node - linkType: hard - "@mui/styled-engine@npm:^5.11.9": version: 5.11.9 resolution: "@mui/styled-engine@npm:5.11.9" @@ -1413,34 +1211,6 @@ __metadata: languageName: node linkType: hard -"@mui/system@npm:^5.11.15, @mui/system@npm:^5.4.1": - version: 5.11.15 - resolution: "@mui/system@npm:5.11.15" - dependencies: - "@babel/runtime": ^7.21.0 - "@mui/private-theming": ^5.11.13 - "@mui/styled-engine": ^5.11.11 - "@mui/types": ^7.2.3 - "@mui/utils": ^5.11.13 - clsx: ^1.2.1 - csstype: ^3.1.1 - prop-types: ^15.8.1 - peerDependencies: - "@emotion/react": ^11.5.0 - "@emotion/styled": ^11.3.0 - "@types/react": ^17.0.0 || ^18.0.0 - react: ^17.0.0 || ^18.0.0 - peerDependenciesMeta: - "@emotion/react": - optional: true - "@emotion/styled": - optional: true - "@types/react": - optional: true - checksum: c8b8ffcf48b204f8e0ff6cc2ef5a35b6a3ef3517c9626dbb2fda073b81992c93750167440737459b82ff1ac2bf6d4e9eb9ce3b39887bdc4dbded5bc8266032ac - languageName: node - linkType: hard - "@mui/system@npm:^5.11.9": version: 5.11.9 resolution: "@mui/system@npm:5.11.9" @@ -1496,21 +1266,6 @@ __metadata: languageName: node linkType: hard -"@mui/utils@npm:^5.11.13": - version: 5.11.13 - resolution: "@mui/utils@npm:5.11.13" - dependencies: - "@babel/runtime": ^7.21.0 - "@types/prop-types": ^15.7.5 - "@types/react-is": ^16.7.1 || ^17.0.0 - prop-types: ^15.8.1 - react-is: ^18.2.0 - peerDependencies: - react: ^17.0.0 || ^18.0.0 - checksum: 0f403f2635fd5cd39c013b9d4defa2cf1ecc023e35b8c9866d6123792480dcafe47207e43420c10b0d030e64df31e78adfdb8248e2476da27f07d80ed0b44927 - languageName: node - linkType: hard - "@mui/x-data-grid@npm:^5.17.2": version: 5.17.23 resolution: "@mui/x-data-grid@npm:5.17.23" @@ -1795,13 +1550,6 @@ __metadata: languageName: node linkType: hard -"@popperjs/core@npm:^2.11.7": - version: 2.11.7 - resolution: "@popperjs/core@npm:2.11.7" - checksum: 5b6553747899683452a1d28898c1b39173a4efd780e74360bfcda8eb42f1c5e819602769c81a10920fc68c881d07fb40429604517d499567eac079cfa6470f19 - languageName: node - linkType: hard - "@react-pdf/fns@npm:2.0.0": version: 2.0.0 resolution: "@react-pdf/fns@npm:2.0.0" @@ -5306,35 +5054,6 @@ __metadata: languageName: node linkType: hard -"framer-motion@npm:^4.1.17": - version: 4.1.17 - resolution: "framer-motion@npm:4.1.17" - dependencies: - "@emotion/is-prop-valid": ^0.8.2 - framesync: 5.3.0 - hey-listen: ^1.0.8 - popmotion: 9.3.6 - style-value-types: 4.1.4 - tslib: ^2.1.0 - peerDependencies: - react: ">=16.8 || ^17.0.0" - react-dom: ">=16.8 || ^17.0.0" - dependenciesMeta: - "@emotion/is-prop-valid": - optional: true - checksum: f6b5fc8f189e6760353aa5b67515b6576ebaa164d8df73118780a09d1d4a162e54dfeb126a05c6a28727af88f4a80f8b94900ff9510be44dada6496a99273fde - languageName: node - linkType: hard - -"framesync@npm:5.3.0": - version: 5.3.0 - resolution: "framesync@npm:5.3.0" - dependencies: - tslib: ^2.1.0 - checksum: 9ebbb2863e6a1cfd2e9dd1b73af427d23caa03c92dd49ea767ebdd208c3a573bba4a1026f67068d856a21704f79adcdf2f750cc852ff73bc1f0e80edaaecded8 - languageName: node - linkType: hard - "fs-constants@npm:^1.0.0": version: 1.0.0 resolution: "fs-constants@npm:1.0.0" @@ -5736,13 +5455,6 @@ __metadata: languageName: node linkType: hard -"hey-listen@npm:^1.0.8": - version: 1.0.8 - resolution: "hey-listen@npm:1.0.8" - checksum: 6bad60b367688f5348e25e7ca3276a74b59ac5a09b0455e6ff8ab7d4a9e38cd2116c708a7dcd8a954d27253ce1d8717ec891d175723ea739885b828cf44e4072 - languageName: node - linkType: hard - "hi-base32@npm:^0.5.0": version: 0.5.1 resolution: "hi-base32@npm:0.5.1" @@ -8759,6 +8471,7 @@ __metadata: react-dom: 18.2.0 react-gtm-module: 2.0.11 react-i18next: ^11.17.1 + react-material-ui-carousel: ^3.4.2 react-quill: ^2.0.0-beta.4 react-slick: ^0.29.0 sharp: ^0.30.5 @@ -8774,18 +8487,6 @@ __metadata: languageName: unknown linkType: soft -"popmotion@npm:9.3.6": - version: 9.3.6 - resolution: "popmotion@npm:9.3.6" - dependencies: - framesync: 5.3.0 - hey-listen: ^1.0.8 - style-value-types: 4.1.4 - tslib: ^2.1.0 - checksum: 551446ec3763790efde7a3bb8c43189122f9b559985be2efa79842138257c4e331efcff606732a4bd5ac82d9bde1b236258d69a435f4bb5e9fc5908241b5ba3f - languageName: node - linkType: hard - "postcss-media-query-parser@npm:^0.2.3": version: 0.2.3 resolution: "postcss-media-query-parser@npm:0.2.3" @@ -9237,6 +8938,28 @@ __metadata: languageName: node linkType: hard +"react-material-ui-carousel@npm:^3.4.2": + version: 3.4.2 + resolution: "react-material-ui-carousel@npm:3.4.2" + dependencies: + "@emotion/react": ^11.7.1 + "@emotion/styled": ^11.6.0 + "@mui/icons-material": ^5.4.1 + "@mui/material": ^5.4.1 + "@mui/system": ^5.4.1 + framer-motion: ^4.1.17 + peerDependencies: + "@emotion/react": ^11.4.1 + "@emotion/styled": ^11.3.0 + "@mui/icons-material": ^5.0.0 + "@mui/material": ^5.0.0 + "@mui/system": ^5.0.0 + react: ^17.0.1 || ^18.0.0 + react-dom: ^17.0.2 || ^18.0.0 + checksum: 9a1bbe20cbe07b4dade8ba248918dc824629192042e91535142029756cb6ae12d70b3c5ff18afc46fd013a68a4d4e649a8b814a8b7e5dd60dec073b195c9bbe7 + languageName: node + linkType: hard + "react-quill@npm:^2.0.0-beta.4": version: 2.0.0 resolution: "react-quill@npm:2.0.0" @@ -10303,16 +10026,6 @@ __metadata: languageName: node linkType: hard -"style-value-types@npm:4.1.4": - version: 4.1.4 - resolution: "style-value-types@npm:4.1.4" - dependencies: - hey-listen: ^1.0.8 - tslib: ^2.1.0 - checksum: 96189770076a2717bf579f7d73a49953f0c3d633b90fed9b44b8285cbbe7facd19d6d7a0d2802fb493b45995791f62b87983c3d3c24128818a69e593b6d77aed - languageName: node - linkType: hard - "styled-jsx@npm:5.1.1": version: 5.1.1 resolution: "styled-jsx@npm:5.1.1" From 5d37101e1de1e50ded2d84208f82d481569808bc Mon Sep 17 00:00:00 2001 From: ani-kalpachka Date: Tue, 4 Apr 2023 16:38:22 +0300 Subject: [PATCH 24/24] Update dependencies --- yarn.lock | 310 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 310 insertions(+) diff --git a/yarn.lock b/yarn.lock index d50dcf35d..a04a4612d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -405,6 +405,15 @@ __metadata: languageName: node linkType: hard +"@babel/runtime@npm:^7.21.0": + version: 7.21.0 + resolution: "@babel/runtime@npm:7.21.0" + dependencies: + regenerator-runtime: ^0.13.11 + checksum: 7b33e25bfa9e0e1b9e8828bb61b2d32bdd46b41b07ba7cb43319ad08efc6fda8eb89445193e67d6541814627df0ca59122c0ea795e412b99c5183a0540d338ab + languageName: node + linkType: hard + "@babel/template@npm:^7.18.10, @babel/template@npm:^7.20.7, @babel/template@npm:^7.3.3": version: 7.20.7 resolution: "@babel/template@npm:7.20.7" @@ -554,6 +563,25 @@ __metadata: languageName: node linkType: hard +"@emotion/babel-plugin@npm:^11.10.6": + version: 11.10.6 + resolution: "@emotion/babel-plugin@npm:11.10.6" + dependencies: + "@babel/helper-module-imports": ^7.16.7 + "@babel/runtime": ^7.18.3 + "@emotion/hash": ^0.9.0 + "@emotion/memoize": ^0.8.0 + "@emotion/serialize": ^1.1.1 + babel-plugin-macros: ^3.1.0 + convert-source-map: ^1.5.0 + escape-string-regexp: ^4.0.0 + find-root: ^1.1.0 + source-map: ^0.5.7 + stylis: 4.1.3 + checksum: 3eed138932e8edf2598352e69ad949b9db3051a4d6fcff190dacbac9aa838d7ef708b9f3e6c48660625d9311dae82d73477ae4e7a31139feef5eb001a5528421 + languageName: node + linkType: hard + "@emotion/cache@npm:^11.10.5, @emotion/cache@npm:^11.7.1": version: 11.10.5 resolution: "@emotion/cache@npm:11.10.5" @@ -574,6 +602,15 @@ __metadata: languageName: node linkType: hard +"@emotion/is-prop-valid@npm:^0.8.2": + version: 0.8.8 + resolution: "@emotion/is-prop-valid@npm:0.8.8" + dependencies: + "@emotion/memoize": 0.7.4 + checksum: bb7ec6d48c572c540e24e47cc94fc2f8dec2d6a342ae97bc9c8b6388d9b8d283862672172a1bb62d335c02662afe6291e10c71e9b8642664a8b43416cdceffac + languageName: node + linkType: hard + "@emotion/is-prop-valid@npm:^1.2.0": version: 1.2.0 resolution: "@emotion/is-prop-valid@npm:1.2.0" @@ -583,6 +620,13 @@ __metadata: languageName: node linkType: hard +"@emotion/memoize@npm:0.7.4": + version: 0.7.4 + resolution: "@emotion/memoize@npm:0.7.4" + checksum: 4e3920d4ec95995657a37beb43d3f4b7d89fed6caa2b173a4c04d10482d089d5c3ea50bbc96618d918b020f26ed6e9c4026bbd45433566576c1f7b056c3271dc + languageName: node + linkType: hard + "@emotion/memoize@npm:^0.8.0": version: 0.8.0 resolution: "@emotion/memoize@npm:0.8.0" @@ -590,6 +634,27 @@ __metadata: languageName: node linkType: hard +"@emotion/react@npm:^11.7.1": + version: 11.10.6 + resolution: "@emotion/react@npm:11.10.6" + dependencies: + "@babel/runtime": ^7.18.3 + "@emotion/babel-plugin": ^11.10.6 + "@emotion/cache": ^11.10.5 + "@emotion/serialize": ^1.1.1 + "@emotion/use-insertion-effect-with-fallbacks": ^1.0.0 + "@emotion/utils": ^1.2.0 + "@emotion/weak-memoize": ^0.3.0 + hoist-non-react-statics: ^3.3.1 + peerDependencies: + react: ">=16.8.0" + peerDependenciesMeta: + "@types/react": + optional: true + checksum: 4762042e39126ffaffe76052dc65c9bb0ba6b8893013687ba3cc13ed4dd834c31597f1230684c3c078e90aecc13ab6cd0e3cde0dec8b7761affd2571f4d80019 + languageName: node + linkType: hard + "@emotion/react@npm:^11.8.1": version: 11.10.5 resolution: "@emotion/react@npm:11.10.5" @@ -651,6 +716,26 @@ __metadata: languageName: node linkType: hard +"@emotion/styled@npm:^11.6.0": + version: 11.10.6 + resolution: "@emotion/styled@npm:11.10.6" + dependencies: + "@babel/runtime": ^7.18.3 + "@emotion/babel-plugin": ^11.10.6 + "@emotion/is-prop-valid": ^1.2.0 + "@emotion/serialize": ^1.1.1 + "@emotion/use-insertion-effect-with-fallbacks": ^1.0.0 + "@emotion/utils": ^1.2.0 + peerDependencies: + "@emotion/react": ^11.0.0-rc.0 + react: ">=16.8.0" + peerDependenciesMeta: + "@types/react": + optional: true + checksum: ed0ee4bec3b63ee9c5eb8216b22646313ff1ada06c5183f128d25b73252126e9fde625e81c868be7ccd666b686a73076f923ce188dac25e93d5062ddffdad46f + languageName: node + linkType: hard + "@emotion/styled@npm:^11.8.1": version: 11.10.5 resolution: "@emotion/styled@npm:11.10.5" @@ -1056,6 +1141,36 @@ __metadata: languageName: node linkType: hard +"@mui/base@npm:5.0.0-alpha.123": + version: 5.0.0-alpha.123 + resolution: "@mui/base@npm:5.0.0-alpha.123" + dependencies: + "@babel/runtime": ^7.21.0 + "@emotion/is-prop-valid": ^1.2.0 + "@mui/types": ^7.2.3 + "@mui/utils": ^5.11.13 + "@popperjs/core": ^2.11.7 + clsx: ^1.2.1 + prop-types: ^15.8.1 + react-is: ^18.2.0 + peerDependencies: + "@types/react": ^17.0.0 || ^18.0.0 + react: ^17.0.0 || ^18.0.0 + react-dom: ^17.0.0 || ^18.0.0 + peerDependenciesMeta: + "@types/react": + optional: true + checksum: a17c266d0a922903e43c08cce8f42d1a35716b5d1574393c90ac89290029f6c08ef7261ba7af3609917a32fce1a1c0efdab06320df4d1ab351fd987e429f6dfd + languageName: node + linkType: hard + +"@mui/core-downloads-tracker@npm:^5.11.15": + version: 5.11.15 + resolution: "@mui/core-downloads-tracker@npm:5.11.15" + checksum: 8dc377b415ac1c18ec11a55fe916aeb0317e4c454759e3c3c0d3bdeaef75236486f17cb9ef3ae01eaee5f51e2cc7ada6a7e7ca452a64ddbbb8638c32e2615938 + languageName: node + linkType: hard + "@mui/core-downloads-tracker@npm:^5.11.9": version: 5.11.9 resolution: "@mui/core-downloads-tracker@npm:5.11.9" @@ -1079,6 +1194,22 @@ __metadata: languageName: node linkType: hard +"@mui/icons-material@npm:^5.4.1": + version: 5.11.11 + resolution: "@mui/icons-material@npm:5.11.11" + dependencies: + "@babel/runtime": ^7.21.0 + peerDependencies: + "@mui/material": ^5.0.0 + "@types/react": ^17.0.0 || ^18.0.0 + react: ^17.0.0 || ^18.0.0 + peerDependenciesMeta: + "@types/react": + optional: true + checksum: 6ec89f3c68aaedd521f6a5106964394c410b08cec6875166d3ee97dcbaf2983c67d3b19cd58113d767d9f934cc0e9439fb5856e45471f5094656c0f87bbefecd + languageName: node + linkType: hard + "@mui/lab@npm:^5.0.0-alpha.69": version: 5.0.0-alpha.120 resolution: "@mui/lab@npm:5.0.0-alpha.120" @@ -1142,6 +1273,56 @@ __metadata: languageName: node linkType: hard +"@mui/material@npm:^5.4.1": + version: 5.11.15 + resolution: "@mui/material@npm:5.11.15" + dependencies: + "@babel/runtime": ^7.21.0 + "@mui/base": 5.0.0-alpha.123 + "@mui/core-downloads-tracker": ^5.11.15 + "@mui/system": ^5.11.15 + "@mui/types": ^7.2.3 + "@mui/utils": ^5.11.13 + "@types/react-transition-group": ^4.4.5 + clsx: ^1.2.1 + csstype: ^3.1.1 + prop-types: ^15.8.1 + react-is: ^18.2.0 + react-transition-group: ^4.4.5 + peerDependencies: + "@emotion/react": ^11.5.0 + "@emotion/styled": ^11.3.0 + "@types/react": ^17.0.0 || ^18.0.0 + react: ^17.0.0 || ^18.0.0 + react-dom: ^17.0.0 || ^18.0.0 + peerDependenciesMeta: + "@emotion/react": + optional: true + "@emotion/styled": + optional: true + "@types/react": + optional: true + checksum: 53726a8aa2ab541c967eda43fe0094486e2f2ac743c39f09a5326aeffdba0be414187f216346c45135751b63a28a9871f4e68f4d6ab89b5b1d86e468f869d328 + languageName: node + linkType: hard + +"@mui/private-theming@npm:^5.11.13": + version: 5.11.13 + resolution: "@mui/private-theming@npm:5.11.13" + dependencies: + "@babel/runtime": ^7.21.0 + "@mui/utils": ^5.11.13 + prop-types: ^15.8.1 + peerDependencies: + "@types/react": ^17.0.0 || ^18.0.0 + react: ^17.0.0 || ^18.0.0 + peerDependenciesMeta: + "@types/react": + optional: true + checksum: 9e5e02c6482945d9fa52e920fb206fb032d1b1df4bb06ea9d032babb53ed171e3b5a7969091072a5d04b0ab52c90f01ba51b90ba27730019d3f7eccc49ca4628 + languageName: node + linkType: hard + "@mui/private-theming@npm:^5.11.9": version: 5.11.9 resolution: "@mui/private-theming@npm:5.11.9" @@ -1159,6 +1340,27 @@ __metadata: languageName: node linkType: hard +"@mui/styled-engine@npm:^5.11.11": + version: 5.11.11 + resolution: "@mui/styled-engine@npm:5.11.11" + dependencies: + "@babel/runtime": ^7.21.0 + "@emotion/cache": ^11.10.5 + csstype: ^3.1.1 + prop-types: ^15.8.1 + peerDependencies: + "@emotion/react": ^11.4.1 + "@emotion/styled": ^11.3.0 + react: ^17.0.0 || ^18.0.0 + peerDependenciesMeta: + "@emotion/react": + optional: true + "@emotion/styled": + optional: true + checksum: 63b71aafe79afbe1638a31d9cc1361d11edd5b4a8eacc50da86d83b5db11c9a1713c5744d1533360488aef85afc8d4a5429517447b78b598493c7a7d639390dd + languageName: node + linkType: hard + "@mui/styled-engine@npm:^5.11.9": version: 5.11.9 resolution: "@mui/styled-engine@npm:5.11.9" @@ -1211,6 +1413,34 @@ __metadata: languageName: node linkType: hard +"@mui/system@npm:^5.11.15, @mui/system@npm:^5.4.1": + version: 5.11.15 + resolution: "@mui/system@npm:5.11.15" + dependencies: + "@babel/runtime": ^7.21.0 + "@mui/private-theming": ^5.11.13 + "@mui/styled-engine": ^5.11.11 + "@mui/types": ^7.2.3 + "@mui/utils": ^5.11.13 + clsx: ^1.2.1 + csstype: ^3.1.1 + prop-types: ^15.8.1 + peerDependencies: + "@emotion/react": ^11.5.0 + "@emotion/styled": ^11.3.0 + "@types/react": ^17.0.0 || ^18.0.0 + react: ^17.0.0 || ^18.0.0 + peerDependenciesMeta: + "@emotion/react": + optional: true + "@emotion/styled": + optional: true + "@types/react": + optional: true + checksum: c8b8ffcf48b204f8e0ff6cc2ef5a35b6a3ef3517c9626dbb2fda073b81992c93750167440737459b82ff1ac2bf6d4e9eb9ce3b39887bdc4dbded5bc8266032ac + languageName: node + linkType: hard + "@mui/system@npm:^5.11.9": version: 5.11.9 resolution: "@mui/system@npm:5.11.9" @@ -1266,6 +1496,21 @@ __metadata: languageName: node linkType: hard +"@mui/utils@npm:^5.11.13": + version: 5.11.13 + resolution: "@mui/utils@npm:5.11.13" + dependencies: + "@babel/runtime": ^7.21.0 + "@types/prop-types": ^15.7.5 + "@types/react-is": ^16.7.1 || ^17.0.0 + prop-types: ^15.8.1 + react-is: ^18.2.0 + peerDependencies: + react: ^17.0.0 || ^18.0.0 + checksum: 0f403f2635fd5cd39c013b9d4defa2cf1ecc023e35b8c9866d6123792480dcafe47207e43420c10b0d030e64df31e78adfdb8248e2476da27f07d80ed0b44927 + languageName: node + linkType: hard + "@mui/x-data-grid@npm:^5.17.2": version: 5.17.23 resolution: "@mui/x-data-grid@npm:5.17.23" @@ -1550,6 +1795,13 @@ __metadata: languageName: node linkType: hard +"@popperjs/core@npm:^2.11.7": + version: 2.11.7 + resolution: "@popperjs/core@npm:2.11.7" + checksum: 5b6553747899683452a1d28898c1b39173a4efd780e74360bfcda8eb42f1c5e819602769c81a10920fc68c881d07fb40429604517d499567eac079cfa6470f19 + languageName: node + linkType: hard + "@react-pdf/fns@npm:2.0.0": version: 2.0.0 resolution: "@react-pdf/fns@npm:2.0.0" @@ -5054,6 +5306,35 @@ __metadata: languageName: node linkType: hard +"framer-motion@npm:^4.1.17": + version: 4.1.17 + resolution: "framer-motion@npm:4.1.17" + dependencies: + "@emotion/is-prop-valid": ^0.8.2 + framesync: 5.3.0 + hey-listen: ^1.0.8 + popmotion: 9.3.6 + style-value-types: 4.1.4 + tslib: ^2.1.0 + peerDependencies: + react: ">=16.8 || ^17.0.0" + react-dom: ">=16.8 || ^17.0.0" + dependenciesMeta: + "@emotion/is-prop-valid": + optional: true + checksum: f6b5fc8f189e6760353aa5b67515b6576ebaa164d8df73118780a09d1d4a162e54dfeb126a05c6a28727af88f4a80f8b94900ff9510be44dada6496a99273fde + languageName: node + linkType: hard + +"framesync@npm:5.3.0": + version: 5.3.0 + resolution: "framesync@npm:5.3.0" + dependencies: + tslib: ^2.1.0 + checksum: 9ebbb2863e6a1cfd2e9dd1b73af427d23caa03c92dd49ea767ebdd208c3a573bba4a1026f67068d856a21704f79adcdf2f750cc852ff73bc1f0e80edaaecded8 + languageName: node + linkType: hard + "fs-constants@npm:^1.0.0": version: 1.0.0 resolution: "fs-constants@npm:1.0.0" @@ -5455,6 +5736,13 @@ __metadata: languageName: node linkType: hard +"hey-listen@npm:^1.0.8": + version: 1.0.8 + resolution: "hey-listen@npm:1.0.8" + checksum: 6bad60b367688f5348e25e7ca3276a74b59ac5a09b0455e6ff8ab7d4a9e38cd2116c708a7dcd8a954d27253ce1d8717ec891d175723ea739885b828cf44e4072 + languageName: node + linkType: hard + "hi-base32@npm:^0.5.0": version: 0.5.1 resolution: "hi-base32@npm:0.5.1" @@ -8487,6 +8775,18 @@ __metadata: languageName: unknown linkType: soft +"popmotion@npm:9.3.6": + version: 9.3.6 + resolution: "popmotion@npm:9.3.6" + dependencies: + framesync: 5.3.0 + hey-listen: ^1.0.8 + style-value-types: 4.1.4 + tslib: ^2.1.0 + checksum: 551446ec3763790efde7a3bb8c43189122f9b559985be2efa79842138257c4e331efcff606732a4bd5ac82d9bde1b236258d69a435f4bb5e9fc5908241b5ba3f + languageName: node + linkType: hard + "postcss-media-query-parser@npm:^0.2.3": version: 0.2.3 resolution: "postcss-media-query-parser@npm:0.2.3" @@ -10026,6 +10326,16 @@ __metadata: languageName: node linkType: hard +"style-value-types@npm:4.1.4": + version: 4.1.4 + resolution: "style-value-types@npm:4.1.4" + dependencies: + hey-listen: ^1.0.8 + tslib: ^2.1.0 + checksum: 96189770076a2717bf579f7d73a49953f0c3d633b90fed9b44b8285cbbe7facd19d6d7a0d2802fb493b45995791f62b87983c3d3c24128818a69e593b6d77aed + languageName: node + linkType: hard + "styled-jsx@npm:5.1.1": version: 5.1.1 resolution: "styled-jsx@npm:5.1.1"