From 55eecaed9ac12b7847e3b807d1bd92e411231c40 Mon Sep 17 00:00:00 2001
From: Dzhani Ivanov <68897146+dzhaniivanov@users.noreply.github.com>
Date: Fri, 1 Sep 2023 12:26:27 +0300
Subject: [PATCH] chips added,bug fixes (#1577)

---
 public/locales/bg/campaigns.json              |  4 +-
 public/locales/en/campaigns.json              |  4 +-
 .../client/campaigns/CampaignDetails.tsx      |  4 +-
 .../CampaignInfo/CampaignInfo.styled.tsx      |  6 ---
 .../campaigns/CampaignInfo/CampaignInfo.tsx   |  4 +-
 .../CampaignInfo/CampaignInfoStatus.tsx       | 48 +++++++++++++------
 .../client/campaigns/CampaignNewsSection.tsx  |  2 +-
 7 files changed, 45 insertions(+), 27 deletions(-)

diff --git a/public/locales/bg/campaigns.json b/public/locales/bg/campaigns.json
index 5bc6b2e03..216af68b6 100644
--- a/public/locales/bg/campaigns.json
+++ b/public/locales/bg/campaigns.json
@@ -172,7 +172,9 @@
     "end-date": "Крайна дата:",
     "indefinite": "Безсрочна",
     "tag": "Таг:",
-    "date": "Дата:"
+    "date": "Дата:",
+    "news": "Новини",
+    "wishes": "Пожелания"
   },
   "info-graphics": {
     "donation-title": "100% от дарението отива при нуждаещите се",
diff --git a/public/locales/en/campaigns.json b/public/locales/en/campaigns.json
index 82941ee9e..a95d147bd 100644
--- a/public/locales/en/campaigns.json
+++ b/public/locales/en/campaigns.json
@@ -158,7 +158,9 @@
     "start-date": "Start date:",
     "end-date": "End date:",
     "tag": "Tag:",
-    "date": "Date:"
+    "date": "Date:",
+    "news": "News",
+    "wishes": "Wishes"
   },
   "info-graphics": {
     "donation-title": "100% of the donation goes to those in need",
diff --git a/src/components/client/campaigns/CampaignDetails.tsx b/src/components/client/campaigns/CampaignDetails.tsx
index 4a2fa50b4..4d14b40a2 100644
--- a/src/components/client/campaigns/CampaignDetails.tsx
+++ b/src/components/client/campaigns/CampaignDetails.tsx
@@ -59,7 +59,7 @@ const StyledGrid = styled(Grid)(({ theme }) => ({
     [theme.breakpoints.up('md')]: {
       fontSize: theme.typography.pxToRem(45),
       marginTop: 0,
-      marginBottom: theme.spacing(7),
+      marginBottom: theme.spacing(1),
     },
   },
 
@@ -157,7 +157,7 @@ export default function CampaignDetails({ campaign }: Props) {
           ''
         )}
         <CampaignNewsSection campaign={campaign} canCreateArticle={canEditCampaign} />
-        <Grid item xs={12}>
+        <Grid item xs={12} id="wishes">
           <DonationWishes campaignId={campaign?.id} />
         </Grid>
         <Grid container item xs={12}>
diff --git a/src/components/client/campaigns/CampaignInfo/CampaignInfo.styled.tsx b/src/components/client/campaigns/CampaignInfo/CampaignInfo.styled.tsx
index a11589c31..5fc4905dd 100644
--- a/src/components/client/campaigns/CampaignInfo/CampaignInfo.styled.tsx
+++ b/src/components/client/campaigns/CampaignInfo/CampaignInfo.styled.tsx
@@ -75,9 +75,3 @@ export const StatusLabel = styled(Typography)(() => ({
 export const StatusText = styled('span')(() => ({
   fontSize: theme.typography.pxToRem(14),
 }))
-
-export const ExpensesButton = styled(Button)(() => ({
-  fontSize: theme.typography.pxToRem(14),
-  justifyContent: 'left',
-  marginBottom: theme.spacing(1),
-}))
diff --git a/src/components/client/campaigns/CampaignInfo/CampaignInfo.tsx b/src/components/client/campaigns/CampaignInfo/CampaignInfo.tsx
index 969ce8092..0092887e8 100644
--- a/src/components/client/campaigns/CampaignInfo/CampaignInfo.tsx
+++ b/src/components/client/campaigns/CampaignInfo/CampaignInfo.tsx
@@ -13,10 +13,10 @@ type Props = {
   showExpensesLink: boolean
 }
 
-export default function CampaignInfo({ campaign }: Props) {
+export default function CampaignInfo({ campaign, showExpensesLink }: Props) {
   return (
     <Grid mb={5}>
-      <CampaignInfoStatus showExpensesLink campaign={campaign} />
+      <CampaignInfoStatus showExpensesLink={showExpensesLink} campaign={campaign} />
       <BeneficiaryOrganizerWrapper>
         <CampaignInfoBeneficiary campaign={campaign} />
         <CampaignInfoOrganizer campaign={campaign} />
diff --git a/src/components/client/campaigns/CampaignInfo/CampaignInfoStatus.tsx b/src/components/client/campaigns/CampaignInfo/CampaignInfoStatus.tsx
index 34dc1a69f..ca6766627 100644
--- a/src/components/client/campaigns/CampaignInfo/CampaignInfoStatus.tsx
+++ b/src/components/client/campaigns/CampaignInfo/CampaignInfoStatus.tsx
@@ -3,18 +3,11 @@ import { CampaignResponse } from 'gql/campaigns'
 import { useTranslation } from 'next-i18next'
 
 import { bg, enUS } from 'date-fns/locale'
-import { Grid } from '@mui/material'
-import { Assessment } from '@mui/icons-material'
+import { Box, Chip, Grid } from '@mui/material'
 
 import { getExactDate } from 'common/util/date'
 
-import {
-  StatusText,
-  StatusLabel,
-  RowWrapper,
-  InfoStatusWrapper,
-  ExpensesButton,
-} from './CampaignInfo.styled'
+import { StatusText, StatusLabel, RowWrapper, InfoStatusWrapper } from './CampaignInfo.styled'
 
 type Props = {
   campaign: CampaignResponse
@@ -27,11 +20,38 @@ export default function CampaignInfoStatus({ campaign, showExpensesLink }: Props
 
   return (
     <Grid>
-      {showExpensesLink && (
-        <ExpensesButton startIcon={<Assessment />} href={'#expenses'}>
-          {t('campaigns:campaign.financial-report')}
-        </ExpensesButton>
-      )}
+      <Box component="span" display="flex" alignItems="center" sx={{ gap: '5px' }}>
+        {showExpensesLink && (
+          <Chip
+            component="a"
+            label={t('campaigns:campaign.financial-report')}
+            href="#expenses"
+            clickable
+            variant="outlined"
+            color="primary"
+            size="small"
+          />
+        )}
+        <Chip
+          component="a"
+          label={t('campaigns:campaign.news')}
+          href="#news"
+          clickable
+          color="primary"
+          variant="outlined"
+          size="small"
+        />
+
+        <Chip
+          component="a"
+          label={t('campaigns:campaign.wishes')}
+          href="#wishes"
+          clickable
+          variant="outlined"
+          color="primary"
+          size="small"
+        />
+      </Box>
       <InfoStatusWrapper>
         <Grid item xs={12} md={6}>
           <StatusLabel>{campaign.campaignType.name}</StatusLabel>
diff --git a/src/components/client/campaigns/CampaignNewsSection.tsx b/src/components/client/campaigns/CampaignNewsSection.tsx
index 9895fa25b..9c69a1f15 100644
--- a/src/components/client/campaigns/CampaignNewsSection.tsx
+++ b/src/components/client/campaigns/CampaignNewsSection.tsx
@@ -160,7 +160,7 @@ export default function CampaignNewsSection({ campaign, canCreateArticle }: Prop
   const [isExpanded, expandContent] = useShowMoreContent()
 
   return (
-    <Grid container item xs={12} spacing={1}>
+    <Grid container item xs={12} spacing={1} id="news">
       <Grid container item flexDirection={'column'}>
         <Typography component={'h3'} fontSize={25} color="#000000">
           {t('news')}