Update Completed campaigns carousel (#1424)

* Update Completed campaigns carousel * Align help button icon
podkrepi-bg · May 4, 2023 · c0a3401 · c0a3401
1 parent 1cf4594
commit c0a3401
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 8 deletions.
diff --git a/...ents/client/index/sections/CompletedCampaignsSection/CompletedCampaignsSection.styled.tsx b/...ents/client/index/sections/CompletedCampaignsSection/CompletedCampaignsSection.styled.tsx
@@ -30,6 +30,13 @@ export const CarouselWrapper = styled(Slider)(() => ({
   },
 }))
 
+export const CardWrapper = styled(Grid)(() => ({
+  [theme.breakpoints.up('sm')]: {
+    margin: theme.spacing(0, 1.25),
+    paddingRight: theme.spacing(2.5),
+  },
+}))
+
 export const CompletedCampaignLink = styled(Link)(() => ({
   height: theme.spacing(37.5),
   backgroundSize: 'cover',

diff --git a/src/components/client/index/sections/CompletedCampaignsSection/CompletedCampaignsSection.tsx b/src/components/client/index/sections/CompletedCampaignsSection/CompletedCampaignsSection.tsx
@@ -24,6 +24,7 @@ import {
   CampaignTitle,
   CompletedCampaignLink,
   MoneyWrapperFlex,
+  CardWrapper,
 } from './CompletedCampaignsSection.styled'
 
 export default function CompletedCampaignsSection() {
@@ -45,11 +46,7 @@ export default function CompletedCampaignsSection() {
       </Heading>
       <CarouselWrapper {...settings}>
         {completedCampaigns?.map((campaign, index) => (
-          <Grid
-            key={index}
-            data-testid={`campaign-card-${index}`}
-            margin={theme.spacing(0, 2.25)}
-            paddingRight={theme.spacing(2.5)}>
+          <CardWrapper key={index} data-testid={`campaign-card-${index}`}>
             <CompletedCampaignLink
               onMouseDown={onLinkMouseDown}
               href={routes.campaigns.viewCampaignBySlug(campaign.slug)}
@@ -75,7 +72,7 @@ export default function CompletedCampaignsSection() {
               </MoneyWrapper>
               <CampaignTitle>{campaign.title}</CampaignTitle>
             </CompletedCampaignLink>
-          </Grid>
+          </CardWrapper>
         ))}
       </CarouselWrapper>
     </Root>

diff --git a/...t/index/sections/CompletedCampaignsSection/helpers/CompletedCampaignsCarouselSettings.tsx b/...t/index/sections/CompletedCampaignsSection/helpers/CompletedCampaignsCarouselSettings.tsx
@@ -5,6 +5,7 @@ export const settings: Settings = {
   speed: 500,
   slidesToShow: 4,
   slidesToScroll: 1,
+  arrows: false,
   dots: true,
   lazyLoad: 'ondemand',
   autoplay: true,
@@ -24,7 +25,7 @@ export const settings: Settings = {
       },
     },
     {
-      breakpoint: 500,
+      breakpoint: 600,
       settings: {
         slidesToShow: 1,
       },

diff --git a/...ents/client/index/sections/PlatformStatisticsSection/PlatformStatisticsSection.styled.tsx b/...ents/client/index/sections/PlatformStatisticsSection/PlatformStatisticsSection.styled.tsx
@@ -69,7 +69,7 @@ export const HelpThoseInNeedButton = styled(LinkButton)(() => ({
     minWidth: theme.spacing(50),
 
     '& span': {
-      display: 'inline-block',
+      display: 'inline-flex',
     },
   },
 }))