Update 'Report an irregularity' button on Campaign page (#1898)

* Update irregularity button on campaign page * Arrange file imports --------- Co-authored-by: ani-kalpachka <[email protected]>
podkrepi-bg · Aug 20, 2024 · 2e8ffb2 · 2e8ffb2
1 parent 2df7862
commit 2e8ffb2
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 34 deletions.
diff --git a/public/locales/bg/campaigns.json b/public/locales/bg/campaigns.json
@@ -123,7 +123,7 @@
     },
     "gallery": "Галерия",
     "financial-report": "Финансови отчети",
-    "report-campaign": "Докладвайте кампанията",
+    "report-campaign": "Подайте сигнал за нередност",
     "feedback": "Обратна връзка",
     "beneficiary": {
       "name": "Бенефициент",

diff --git a/public/locales/en/campaigns.json b/public/locales/en/campaigns.json
@@ -123,7 +123,7 @@
     },
     "gallery": "Gallery",
     "financial-report": "Financial report",
-    "report-campaign": "Report the campaign",
+    "report-campaign": "Report an irregularity",
     "feedback": "Feedback",
     "beneficiary": {
       "name": "Beneficiary",

diff --git a/src/components/client/campaigns/CampaignDetails.tsx b/src/components/client/campaigns/CampaignDetails.tsx
@@ -2,31 +2,30 @@ import React, { useState } from 'react'
 
 import { useTranslation } from 'next-i18next'
 import dynamic from 'next/dynamic'
-
 import { CampaignResponse } from 'gql/campaigns'
-
 import 'react-quill/dist/quill.bubble.css'
 
 import { Divider, Grid, IconButton, Tooltip, Typography } from '@mui/material'
-import SecurityIcon from '@mui/icons-material/Security'
+import NotificationsActiveOutlinedIcon from '@mui/icons-material/NotificationsActiveOutlined'
+import EditIcon from '@mui/icons-material/Edit'
+import { Assessment, InfoOutlined } from '@mui/icons-material'
+import EmailIcon from '@mui/icons-material/Email'
 import { styled } from '@mui/material/styles'
 
-import DonationWishes from './DonationWishes'
 import { ImageSlider } from 'components/common/ImageSlider'
-import CampaignInfo from './CampaignInfo/CampaignInfo'
-import CampaignInfoGraphics from './CampaignInfoGraphics'
-import CampaignInfoOperator from './CampaignInfoOperator'
 import LinkButton from 'components/common/LinkButton'
 import { campaignSliderUrls } from 'common/util/campaignImageUrls'
-import CampaignPublicExpensesGrid from './CampaignPublicExpensesGrid'
-import EditIcon from '@mui/icons-material/Edit'
 import { useCampaignApprovedExpensesList } from 'common/hooks/expenses'
-import { Assessment, InfoOutlined } from '@mui/icons-material'
-import { routes } from 'common/routes'
 import { useCanEditCampaign } from 'common/hooks/campaigns'
 import { moneyPublic } from 'common/util/money'
+import { routes } from 'common/routes'
+
+import DonationWishes from './DonationWishes'
+import CampaignInfo from './CampaignInfo/CampaignInfo'
+import CampaignInfoGraphics from './CampaignInfoGraphics'
+import CampaignInfoOperator from './CampaignInfoOperator'
+import CampaignPublicExpensesGrid from './CampaignPublicExpensesGrid'
 import CampaignPublicExpensesChart from './CampaignPublicExpensesChart'
-import EmailIcon from '@mui/icons-material/Email'
 import RenderCampaignSubscribeModal from '../notifications/CampaignSubscribeModal'
 
 const ReactQuill = dynamic(() => import('react-quill'), { ssr: false })
@@ -38,7 +37,7 @@ const classes = {
   banner: `${PREFIX}-banner`,
   campaignTitle: `${PREFIX}-campaignTitle`,
   linkButton: `${PREFIX}-linkButton`,
-  securityIcon: `${PREFIX}-securityIcon`,
+  irregularityIcon: `${PREFIX}-irregularityIcon`,
   subscribeLink: `${PREFIX}-subscribe`,
   financeSummary: `${PREFIX}-financeSummary`,
 }
@@ -79,11 +78,11 @@ const StyledGrid = styled(Grid)(({ theme }) => ({
   },
 
   [`& .${classes.linkButton}`]: {
-    fontSize: theme.typography.pxToRem(10),
+    fontSize: theme.typography.pxToRem(16),
     letterSpacing: theme.spacing(0.01),
     lineHeight: '150%',
     textDecoration: 'underline',
-    color: 'initial',
+    color: '#11356A',
 
     '&:hover': {
       textDecoration: 'underline',
@@ -92,7 +91,7 @@ const StyledGrid = styled(Grid)(({ theme }) => ({
     },
   },
 
-  [`& .${classes.securityIcon}`]: {
+  [`& .${classes.irregularityIcon}`]: {
     width: theme.spacing(2.25),
     height: theme.spacing(2.75),
   },
@@ -221,22 +220,12 @@ export default function CampaignDetails({ campaign }: Props) {
           <DonationWishes campaignId={campaign?.id} />
         </Grid>
         <Grid container item xs={12}>
-          <Grid item xs={12} mb={1}>
-            <LinkButton
-              startIcon={<SecurityIcon color="action" className={classes.securityIcon} />}
-              href={'/contact'}
-              className={classes.linkButton}>
-              {t('campaigns:campaign.feedback')}
-            </LinkButton>
-          </Grid>
-          <Grid item xs={12}>
-            <LinkButton
-              startIcon={<SecurityIcon color="action" className={classes.securityIcon} />}
-              href={`/campaigns/${campaign.slug}/irregularity`}
-              className={classes.linkButton}>
-              {t('campaigns:campaign.report-campaign')}
-            </LinkButton>
-          </Grid>
+          <LinkButton
+            startIcon={<NotificationsActiveOutlinedIcon className={classes.irregularityIcon} />}
+            href={`/campaigns/${campaign.slug}/irregularity`}
+            className={classes.linkButton}>
+            {t('campaigns:campaign.report-campaign')}
+          </LinkButton>
         </Grid>
       </Grid>
     </StyledGrid>