Update See all button on Active campaigns (Homepage)

podkrepi-bg · Jul 10, 2024 · 6305409 · 6305409
1 parent a795eba
commit 6305409
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 10 deletions.
diff --git a/...components/client/index/sections/ActiveCampaignsSection/ActiveCampaignsSection.styled.tsx b/...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
@@ -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-all')}
+          </SeeAllButton>
         </SeeAllButtonWrapper>
       </Root>
     )