From 20de1ce6e1e09c95aa5b757515393ce70cd1c569 Mon Sep 17 00:00:00 2001
From: Ani <ani_kalpachka888@abv.bg>
Date: Sun, 21 Jul 2024 07:40:14 +0300
Subject: [PATCH] Update 'See more' button on Active campaigns (Homepage)
 (#1883)

* Update See all button on Active campaigns (Homepage)

* Update See more button

---------

Co-authored-by: ani-kalpachka <ani_kalpacka888@gmail.com>
---
 public/locales/bg/index.json                  |  3 ++-
 public/locales/en/index.json                  |  3 ++-
 .../ActiveCampaignsSection.styled.tsx         | 20 +++++++++++--------
 .../ActiveCampaignsSection.tsx                | 11 ++++++++--
 4 files changed, 25 insertions(+), 12 deletions(-)

diff --git a/public/locales/bg/index.json b/public/locales/bg/index.json
index af4b9e1fd..b57fa9166 100644
--- a/public/locales/bg/index.json
+++ b/public/locales/bg/index.json
@@ -11,7 +11,8 @@
     "content": "Абонирайте се за нашия бюлетин и ние ще Ви информираме за най-важното от живота на Подкрепи.бг. Всеки месец ще получвате email от нас, в който ще Ви споделяме най-интересното за кампаниите, които поддържаме, както и за техните организатори и бенефициенти. Ще получавате новините за нашите партньори, доброволци и дарители в електронната си пощенска кутия. Ако Ви звучи добре, запишете се, като въведеш email адреса си тук:"
   },
   "campaign": {
-    "see-all": "Вижте всички"
+    "see-all": "Вижте всички",
+    "see-more": "Вижте повече"
   },
   "how-we-work": {
     "heading": "Как работи Подкрепи.бг?",
diff --git a/public/locales/en/index.json b/public/locales/en/index.json
index e5c8c96c1..279115fe7 100644
--- a/public/locales/en/index.json
+++ b/public/locales/en/index.json
@@ -11,7 +11,8 @@
     "content": "Subscribe for our newsletter we will infrom you about the most important from the life of Podkrepi.bg. Every month you will receive email from us in which we will share with you the most important things about the campaigns that we have and their organizers and beneficiaries. You will receive news for our partners, volunteers and donors in your email box. If this sounds good for you, subscribe as you fill in your email here:"
   },
   "campaign": {
-    "see-all": "See all"
+    "see-all": "See all",
+    "see-more": "See more"
   },
   "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 59d772da3..5c82add39 100644
--- a/src/components/client/index/sections/ActiveCampaignsSection/ActiveCampaignsSection.styled.tsx
+++ b/src/components/client/index/sections/ActiveCampaignsSection/ActiveCampaignsSection.styled.tsx
@@ -40,20 +40,24 @@ export const ActiveCampaignsWrapper = styled(Grid)(() => ({
 export const SeeAllButtonWrapper = styled(Grid)(() => ({
   display: 'flex',
   placeContent: 'center',
-  marginTop: theme.spacing(10),
+  marginTop: theme.spacing(6),
 }))
 
 export const SeeAllButton = styled(LinkButton)(() => ({
-  fontFamily: "'Lato', sans-serif",
+  fontFamily: 'sans-serif',
   fontSize: theme.typography.pxToRem(16),
   fontWeight: 600,
-  color: theme.palette.common.black,
-  letterSpacing: '0.4px',
-  textDecoration: 'underline',
-  marginTop: 0,
+  color: '#252222',
+  letterSpacing: '0.46px',
+  backgroundColor: theme.palette.primary.light,
+  lineHeight: theme.spacing(3.25),
+  width: theme.spacing(28.5),
+  height: theme.spacing(6),
+  boxShadow:
+    '0px 3px 1px -2px rgba(0, 0, 0, 0.2),0px 2px 2px 0px rgba(0, 0, 0, 0.14),0px 1px 5px 0px rgba(0, 0, 0, 0.12)',
 
   '&:hover': {
-    backgroundColor: 'transparent',
-    textDecoration: 'underline',
+    boxShadow:
+      '0px 3px 1px -2px rgba(0, 0, 0, 0.2),0px 2px 2px 0px rgba(0, 0, 0, 0.14),0px 1px 5px 0px rgba(0, 0, 0, 0.12)',
   },
 }))
diff --git a/src/components/client/index/sections/ActiveCampaignsSection/ActiveCampaignsSection.tsx b/src/components/client/index/sections/ActiveCampaignsSection/ActiveCampaignsSection.tsx
index 5e43ff626..71b3dfe5d 100644
--- a/src/components/client/index/sections/ActiveCampaignsSection/ActiveCampaignsSection.tsx
+++ b/src/components/client/index/sections/ActiveCampaignsSection/ActiveCampaignsSection.tsx
@@ -1,5 +1,7 @@
 import { useTranslation } from 'next-i18next'
 
+import ArrowForwardIcon from '@mui/icons-material/ArrowForward'
+
 import { useCampaignList } from 'common/hooks/campaigns'
 import { routes } from 'common/routes'
 import { CampaignState } from 'components/client/campaigns/helpers/campaign.enums'
@@ -28,9 +30,14 @@ export default function ActiveCampaignsSection() {
           {activeCampaigns?.map((campaign, index) => (
             <ActiveCampaignCard index={index} key={campaign.id} campaign={campaign} />
           ))}
-        </ActiveCampaignsWrapper>{' '}
+        </ActiveCampaignsWrapper>
         <SeeAllButtonWrapper>
-          <SeeAllButton href={routes.campaigns.index}>{t('campaign.see-all')}</SeeAllButton>
+          <SeeAllButton
+            href={routes.campaigns.index}
+            variant="contained"
+            endIcon={<ArrowForwardIcon />}>
+            {t('campaign.see-more')}
+          </SeeAllButton>
         </SeeAllButtonWrapper>
       </Root>
     )