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 <[email protected]>

public/locales/bg/index.json

@@ -11,7 +11,8 @@
     "content": "Абонирайте се за нашия бюлетин и ние ще Ви информираме за най-важното от живота на Подкрепи.бг. Всеки месец ще получвате email от нас, в който ще Ви споделяме най-интересното за кампаниите, които поддържаме, както и за техните организатори и бенефициенти. Ще получавате новините за нашите партньори, доброволци и дарители в електронната си пощенска кутия. Ако Ви звучи добре, запишете се, като въведеш email адреса си тук:"
   },
   "campaign": {
-    "see-all": "Вижте всички"
+    "see-all": "Вижте всички",
+    "see-more": "Вижте повече"
   },
   "how-we-work": {
     "heading": "Как работи Подкрепи.бг?",

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?",

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)',
   },
 }))

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>
     )