From 9521863ca9f66c72583125f8387c66ca369a49bf Mon Sep 17 00:00:00 2001
From: Nkiri Obasi <obasinkiri@gmail.com>
Date: Mon, 7 Aug 2023 07:10:48 +0100
Subject: [PATCH] removed legacy objectFit property from next/image component
 (#1534)

* removed legacy objectFit property from next/image component

* Revert "reverted changes, moved objectFit prop into style prop in Image component"

This reverts commit f3a3460adc2e267e172f88e65a15577221f88e1a.

* moved objectFit prop into styles prop

* reverted Image component styling fix

* Revert AboutPage.styled.tsx

* Reverted objectFit in FeaturedImage.tsx

* reverted objectFit in AboutPage.styled.tsx

* added objectFit back to Avatar class styles

* fixed formating that breaks the build

---------

Co-authored-by: igoychev <igoychev@gmail.com>
---
 .../client/campaigns/CampaignSlider.tsx          | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/components/client/campaigns/CampaignSlider.tsx b/src/components/client/campaigns/CampaignSlider.tsx
index 5a14b8161..8bea6f50a 100644
--- a/src/components/client/campaigns/CampaignSlider.tsx
+++ b/src/components/client/campaigns/CampaignSlider.tsx
@@ -82,7 +82,13 @@ export default function CampaignSlider({ sliderImages }: Props) {
       <Root className={classes.container}>
         <div style={{ textAlign: 'center' }}>
           {/* A11Y TODO: Add proper alt text*/}
-          <Image src={sliderImages[0]} alt="campaign" height={300} width={400} objectFit="cover" />
+          <Image
+            src={sliderImages[0]}
+            alt="campaign"
+            height={300}
+            width={400}
+            style={{ objectFit: 'cover' }}
+          />
         </div>
       </Root>
     )
@@ -96,7 +102,13 @@ export default function CampaignSlider({ sliderImages }: Props) {
         {sliderImages.map((image, index) => (
           <div key={index}>
             {/* A11Y TODO: Add proper alt text*/}
-            <Image src={image} alt="campaign" height={300} width={400} objectFit="cover" />
+            <Image
+              src={image}
+              alt="campaign"
+              height={300}
+              width={400}
+              style={{ objectFit: 'cover' }}
+            />
           </div>
         ))}
       </Slider>