From cef553cfb7fcbdac4314d92de338b01b918c2c75 Mon Sep 17 00:00:00 2001
From: Alexander Petkov <sashko506@gmail.com>
Date: Mon, 4 Sep 2023 16:21:25 +0300
Subject: [PATCH 1/5] ActiveCampaignCard: Use next/image to display card image

---
 .../ActiveCampaignCard/ActiveCampaignCard.tsx | 44 ++++++++++---------
 1 file changed, 24 insertions(+), 20 deletions(-)

diff --git a/src/components/client/index/sections/ActiveCampaignsSection/ActiveCampaignCard/ActiveCampaignCard.tsx b/src/components/client/index/sections/ActiveCampaignsSection/ActiveCampaignCard/ActiveCampaignCard.tsx
index 0ae48ca8c..f17e79f6f 100644
--- a/src/components/client/index/sections/ActiveCampaignsSection/ActiveCampaignCard/ActiveCampaignCard.tsx
+++ b/src/components/client/index/sections/ActiveCampaignsSection/ActiveCampaignCard/ActiveCampaignCard.tsx
@@ -1,7 +1,7 @@
 import { useTranslation, i18n } from 'next-i18next'
 import { CampaignResponse } from 'gql/campaigns'
 
-import { CardMedia } from '@mui/material'
+import { Box, CardMedia } from '@mui/material'
 
 import Link from 'components/common/Link'
 import CampaignProgress from 'components/client/campaigns/CampaignProgress'
@@ -9,6 +9,7 @@ import theme from 'common/theme'
 import { routes } from 'common/routes'
 import { campaignListPictureUrl } from 'common/util/campaignImageUrls'
 import { moneyPublic } from 'common/util/money'
+import Image from 'next/image'
 
 import {
   CampaignTitle,
@@ -34,26 +35,29 @@ export default function ActiveCampaignCard({ campaign, index }: Props) {
 
   return (
     <Root data-testid={`completed-campaign-${index}`}>
-      <Link href={routes.campaigns.viewCampaignBySlug(slug)} sx={{ position: 'relative' }}>
-        <CardMedia
-          component="img"
-          height="100%"
-          image={campaignImagesUrl}
-          alt={title}
+      <Link href={routes.campaigns.viewCampaignBySlug(slug)}>
+        <Box
+          position={'relative'}
           sx={{
-            maxHeight: theme.spacing(42.5),
-
-            [theme.breakpoints.up('lg')]: {
-              aspectRatio: '2',
-              height: theme.spacing(22.3),
-              maxHeight: 'inherit',
-            },
-
-            [theme.breakpoints.up(1430)]: {
-              height: theme.spacing(27.9),
-            },
-          }}
-        />
+            // aspectRatio: 4 / 3,
+            // [theme.breakpoints.up('lg')]: {
+            //   aspectRatio: 0,
+            //   height: index === 0 ? theme.spacing(71.6) : theme.spacing(27.85),
+            // },
+            width: '100%',
+            maxHeight: index === 0 ? theme.spacing(71.6) : theme.spacing(27.85),
+            aspectRatio: index === 0 ? 1.24 : 1.54
+          }}>
+          <Image
+            priority
+            src={campaignImagesUrl}
+            alt={title}
+            fill
+            sizes="(min-width: 2000px) 312px, (min-width: 1200px) calc(30vw - 38px), (min-width: 900px) calc(40.57vw - 29px), (min-width: 600px) calc(50vw - 28px), calc(100vw - 32px)"
+            quality={index === 0 ? 100 : 75}
+            style={{ objectFit: 'cover' }}
+          />
+        </Box>
         <StyledContent>
           <SumWrapper>
             <Sum>

From 0c4d5c07bb930e93f90b1c3ea336e6a6d19912f0 Mon Sep 17 00:00:00 2001
From: Alexander Petkov <sashko506@gmail.com>
Date: Tue, 5 Sep 2023 13:32:24 +0300
Subject: [PATCH 2/5] CampaignCard: Use next/image component for card image

---
 .../campaigns/CampaignCard/CampaignCard.tsx   | 39 +++++++++----------
 1 file changed, 19 insertions(+), 20 deletions(-)

diff --git a/src/components/client/campaigns/CampaignCard/CampaignCard.tsx b/src/components/client/campaigns/CampaignCard/CampaignCard.tsx
index 60baf923a..49325d036 100644
--- a/src/components/client/campaigns/CampaignCard/CampaignCard.tsx
+++ b/src/components/client/campaigns/CampaignCard/CampaignCard.tsx
@@ -2,7 +2,7 @@ import { useMemo } from 'react'
 import { useTranslation, i18n } from 'next-i18next'
 import { CampaignResponse } from 'gql/campaigns'
 
-import { CardMedia } from '@mui/material'
+import { Box, CardMedia } from '@mui/material'
 
 import { routes } from 'common/routes'
 import { campaignListPictureUrl } from 'common/util/campaignImageUrls'
@@ -23,6 +23,7 @@ import {
   SumNumber,
   SumWrapper,
 } from '../../index/sections/ActiveCampaignsSection/ActiveCampaignCard/ActiveCampaignCard.styled'
+import Image from 'next/image'
 
 type Props = { campaign: CampaignResponse; index: number }
 
@@ -47,26 +48,24 @@ export default function ActiveCampaignCard({ campaign, index }: Props) {
 
   return (
     <Root data-testid={`campaign-card-${index}`}>
-      <Link href={routes.campaigns.viewCampaignBySlug(slug)} sx={{ position: 'relative' }}>
-        <CardMedia
-          component="img"
-          height="100%"
-          image={campaignImagesUrl}
-          alt={title}
+      <Link href={routes.campaigns.viewCampaignBySlug(slug)}>
+        <Box
+          position={'relative'}
           sx={{
-            maxHeight: theme.spacing(42.5),
-
-            [theme.breakpoints.up('lg')]: {
-              aspectRatio: '2',
-              height: theme.spacing(22.3),
-              maxHeight: 'inherit',
-            },
-
-            [theme.breakpoints.up(1430)]: {
-              height: theme.spacing(27.9),
-            },
-          }}
-        />
+            width: '100%',
+            aspectRatio:1.5,
+            maxHeight: theme.spacing(27.9)
+          }}>
+          <Image
+            priority
+            src={campaignImagesUrl}
+            alt={title}
+            fill
+            sizes="(min-width: 2000px) 312px, (min-width: 1200px) calc(30vw - 38px), (min-width: 900px) calc(40.57vw - 29px), (min-width: 600px) calc(50vw - 28px), calc(100vw - 32px)"
+            quality={index === 0 ? 100 : 75}
+            style={{objectFit: 'cover'}}
+          />
+        </Box>
         {campaignState === CampaignState.complete && percentage >= 100 ? (
           <SuccessfullCampaignTag />
         ) : (

From f61ed203c1f84d172b3372efbacc6ffef807b173 Mon Sep 17 00:00:00 2001
From: Alexander Petkov <sashko506@gmail.com>
Date: Tue, 5 Sep 2023 13:56:32 +0300
Subject: [PATCH 3/5] ActiveCampaignCard: Fix layout on smaller widths

---
 .../ActiveCampaignCard/ActiveCampaignCard.tsx                | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/client/index/sections/ActiveCampaignsSection/ActiveCampaignCard/ActiveCampaignCard.tsx b/src/components/client/index/sections/ActiveCampaignsSection/ActiveCampaignCard/ActiveCampaignCard.tsx
index f17e79f6f..2a9e84ad2 100644
--- a/src/components/client/index/sections/ActiveCampaignsSection/ActiveCampaignCard/ActiveCampaignCard.tsx
+++ b/src/components/client/index/sections/ActiveCampaignsSection/ActiveCampaignCard/ActiveCampaignCard.tsx
@@ -45,8 +45,11 @@ export default function ActiveCampaignCard({ campaign, index }: Props) {
             //   height: index === 0 ? theme.spacing(71.6) : theme.spacing(27.85),
             // },
             width: '100%',
+            aspectRatio:1.5,
+            [theme.breakpoints.up('lg')]: {
             maxHeight: index === 0 ? theme.spacing(71.6) : theme.spacing(27.85),
-            aspectRatio: index === 0 ? 1.24 : 1.54
+            aspectRatio: index === 0 ? 1.24 : 1.55
+            }
           }}>
           <Image
             priority

From 56672bc44c10e1a3f83a90a2b1a7190e06023e98 Mon Sep 17 00:00:00 2001
From: Alexander Petkov <sashko506@gmail.com>
Date: Tue, 5 Sep 2023 13:58:01 +0300
Subject: [PATCH 4/5] CompletedCampaignsSection: Use next/image component for
 card image

---
 .../CompletedCampaignsSection.tsx                 | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/components/client/index/sections/CompletedCampaignsSection/CompletedCampaignsSection.tsx b/src/components/client/index/sections/CompletedCampaignsSection/CompletedCampaignsSection.tsx
index be3077cef..40acb943b 100644
--- a/src/components/client/index/sections/CompletedCampaignsSection/CompletedCampaignsSection.tsx
+++ b/src/components/client/index/sections/CompletedCampaignsSection/CompletedCampaignsSection.tsx
@@ -26,6 +26,8 @@ import {
   SuccessfullCampiagnText,
 } from './CompletedCampaignsSection.styled'
 
+import Image from 'next/image'
+
 export default function CompletedCampaignsSection() {
   const { t } = useTranslation('campaigns')
   const { data } = useCampaignList()
@@ -51,10 +53,15 @@ export default function CompletedCampaignsSection() {
             <CompletedCampaignLink
               onMouseDown={onLinkMouseDown}
               href={routes.campaigns.viewCampaignBySlug(campaign.slug)}
-              sx={{
-                background: `url(${campaignListPictureUrl(campaign)})`,
-              }}
-            />
+              sx={{position: 'relative', aspectRatio:1, height: (theme) => theme.spacing(37.5)}}
+            >
+              <Image 
+              fill 
+              alt={campaign.title} 
+              src={campaignListPictureUrl(campaign)}
+              sizes="(min-width: 2000px) 312px, (min-width: 1200px) calc(30vw - 38px), (min-width: 900px) calc(40.57vw - 29px), (min-width: 600px) calc(50vw - 28px), calc(100vw - 32px)" 
+              style={{objectFit: 'cover'}}  />
+              </CompletedCampaignLink>
             <CompletedSumWrapper>
               <Sum>
                 {i18n.language === 'bg'

From 0f7e0ef0042167bb4f0231d8ccacfdedd1d9e1cd Mon Sep 17 00:00:00 2001
From: Alexander Petkov <sashko506@gmail.com>
Date: Tue, 5 Sep 2023 13:59:23 +0300
Subject: [PATCH 5/5] Run linting

---
 .../campaigns/CampaignCard/CampaignCard.tsx    |  6 +++---
 .../ActiveCampaignCard/ActiveCampaignCard.tsx  |  8 ++++----
 .../CompletedCampaignsSection.tsx              | 18 +++++++++---------
 3 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/src/components/client/campaigns/CampaignCard/CampaignCard.tsx b/src/components/client/campaigns/CampaignCard/CampaignCard.tsx
index 49325d036..b53f0c42e 100644
--- a/src/components/client/campaigns/CampaignCard/CampaignCard.tsx
+++ b/src/components/client/campaigns/CampaignCard/CampaignCard.tsx
@@ -53,8 +53,8 @@ export default function ActiveCampaignCard({ campaign, index }: Props) {
           position={'relative'}
           sx={{
             width: '100%',
-            aspectRatio:1.5,
-            maxHeight: theme.spacing(27.9)
+            aspectRatio: 1.5,
+            maxHeight: theme.spacing(27.9),
           }}>
           <Image
             priority
@@ -63,7 +63,7 @@ export default function ActiveCampaignCard({ campaign, index }: Props) {
             fill
             sizes="(min-width: 2000px) 312px, (min-width: 1200px) calc(30vw - 38px), (min-width: 900px) calc(40.57vw - 29px), (min-width: 600px) calc(50vw - 28px), calc(100vw - 32px)"
             quality={index === 0 ? 100 : 75}
-            style={{objectFit: 'cover'}}
+            style={{ objectFit: 'cover' }}
           />
         </Box>
         {campaignState === CampaignState.complete && percentage >= 100 ? (
diff --git a/src/components/client/index/sections/ActiveCampaignsSection/ActiveCampaignCard/ActiveCampaignCard.tsx b/src/components/client/index/sections/ActiveCampaignsSection/ActiveCampaignCard/ActiveCampaignCard.tsx
index 2a9e84ad2..03dd2f50c 100644
--- a/src/components/client/index/sections/ActiveCampaignsSection/ActiveCampaignCard/ActiveCampaignCard.tsx
+++ b/src/components/client/index/sections/ActiveCampaignsSection/ActiveCampaignCard/ActiveCampaignCard.tsx
@@ -45,11 +45,11 @@ export default function ActiveCampaignCard({ campaign, index }: Props) {
             //   height: index === 0 ? theme.spacing(71.6) : theme.spacing(27.85),
             // },
             width: '100%',
-            aspectRatio:1.5,
+            aspectRatio: 1.5,
             [theme.breakpoints.up('lg')]: {
-            maxHeight: index === 0 ? theme.spacing(71.6) : theme.spacing(27.85),
-            aspectRatio: index === 0 ? 1.24 : 1.55
-            }
+              maxHeight: index === 0 ? theme.spacing(71.6) : theme.spacing(27.85),
+              aspectRatio: index === 0 ? 1.24 : 1.55,
+            },
           }}>
           <Image
             priority
diff --git a/src/components/client/index/sections/CompletedCampaignsSection/CompletedCampaignsSection.tsx b/src/components/client/index/sections/CompletedCampaignsSection/CompletedCampaignsSection.tsx
index 40acb943b..44fe64d6d 100644
--- a/src/components/client/index/sections/CompletedCampaignsSection/CompletedCampaignsSection.tsx
+++ b/src/components/client/index/sections/CompletedCampaignsSection/CompletedCampaignsSection.tsx
@@ -53,15 +53,15 @@ export default function CompletedCampaignsSection() {
             <CompletedCampaignLink
               onMouseDown={onLinkMouseDown}
               href={routes.campaigns.viewCampaignBySlug(campaign.slug)}
-              sx={{position: 'relative', aspectRatio:1, height: (theme) => theme.spacing(37.5)}}
-            >
-              <Image 
-              fill 
-              alt={campaign.title} 
-              src={campaignListPictureUrl(campaign)}
-              sizes="(min-width: 2000px) 312px, (min-width: 1200px) calc(30vw - 38px), (min-width: 900px) calc(40.57vw - 29px), (min-width: 600px) calc(50vw - 28px), calc(100vw - 32px)" 
-              style={{objectFit: 'cover'}}  />
-              </CompletedCampaignLink>
+              sx={{ position: 'relative', aspectRatio: 1, height: (theme) => theme.spacing(37.5) }}>
+              <Image
+                fill
+                alt={campaign.title}
+                src={campaignListPictureUrl(campaign)}
+                sizes="(min-width: 2000px) 312px, (min-width: 1200px) calc(30vw - 38px), (min-width: 900px) calc(40.57vw - 29px), (min-width: 600px) calc(50vw - 28px), calc(100vw - 32px)"
+                style={{ objectFit: 'cover' }}
+              />
+            </CompletedCampaignLink>
             <CompletedSumWrapper>
               <Sum>
                 {i18n.language === 'bg'