From e08d7f6dce18a9834d6e80522e43ee2910f172a4 Mon Sep 17 00:00:00 2001
From: wck-iipi <21dcs006@nith.ac.in>
Date: Thu, 29 Aug 2024 00:47:22 +0530
Subject: [PATCH 1/3] Normalized logos of sponsors

Signed-off-by: wck-iipi <21dcs006@nith.ac.in>
---
 components/sponsors/GoldSponsors.tsx    |  7 ++++---
 components/sponsors/ResponsiveImage.tsx | 22 ++++++++++++++++++++++
 components/sponsors/SilverSponsors.tsx  |  7 ++++---
 components/sponsors/Sponsors.tsx        |  7 ++++---
 4 files changed, 34 insertions(+), 9 deletions(-)
 create mode 100644 components/sponsors/ResponsiveImage.tsx

diff --git a/components/sponsors/GoldSponsors.tsx b/components/sponsors/GoldSponsors.tsx
index 277f4332ad33..bd3e4e8e6d2e 100644
--- a/components/sponsors/GoldSponsors.tsx
+++ b/components/sponsors/GoldSponsors.tsx
@@ -1,4 +1,5 @@
 import { goldSponsors } from './GoldSponsorsList';
+import ResponsiveImage from './ResponsiveImage';
 
 interface GoldSponsorsProps {
   className?: string;
@@ -24,11 +25,11 @@ export default function GoldSponsors({ className = '' }: GoldSponsorsProps): Rea
             rel='noopener noreferrer'
             data-testid='GoldSponsors-link'
           >
-            <img
-              className={sponsor.imageClass}
+            <ResponsiveImage
               src={sponsor.imageSrc}
               alt={sponsor.altText}
-              data-testid='GoldSponsors-img'
+              className={sponsor.imageClass}
+              dataTestId='GoldSponsors-img'
             />
           </a>
         ))}
diff --git a/components/sponsors/ResponsiveImage.tsx b/components/sponsors/ResponsiveImage.tsx
new file mode 100644
index 000000000000..3a9f0aa3a797
--- /dev/null
+++ b/components/sponsors/ResponsiveImage.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+
+interface ResponsiveImageProps {
+  src: string;
+  alt?: string;
+  className?: string;
+  dataTestId: string;
+}
+
+/*
+ * This component displays the responsive image of the sponsors.
+ * @param {ResponsiveImageProps} props - The props for ResponsiveImage component.
+ * @param {string} props.src - Source of the image displayed.
+ * @param {string} props.alt - Alternative text for the image, important for accessibility.
+ * @param {string} props.className - Additional CSS class names for styling the image.
+ * @param {string} props.dataTestId - A string for identifying the element during testing.
+ */
+const ResponsiveImage: React.FC<ResponsiveImageProps> = ({ src, alt, className, dataTestId }) => {
+  return <img src={src} alt={alt} className={`${className} w-full h-12 object-contain`} data-testid={dataTestId} />;
+};
+
+export default ResponsiveImage;
diff --git a/components/sponsors/SilverSponsors.tsx b/components/sponsors/SilverSponsors.tsx
index 62c8868980a6..e5fc4bf416af 100644
--- a/components/sponsors/SilverSponsors.tsx
+++ b/components/sponsors/SilverSponsors.tsx
@@ -1,3 +1,4 @@
+import ResponsiveImage from './ResponsiveImage';
 import { Silversponsors } from './SilverSponsorsList';
 
 interface SilverSponsorsProps {
@@ -24,11 +25,11 @@ export default function SilverSponsors({ className = '' }: SilverSponsorsProps):
             rel='noopener noreferrer'
             data-testid='SilverSponsors-link'
           >
-            <img
-              className={sponsor.imageClass}
+            <ResponsiveImage
               src={sponsor.imageSrc}
               alt={sponsor.altText}
-              data-testid='SilverSponsors-img'
+              className={sponsor.imageClass}
+              dataTestId='SilverSponsors-img'
             />
           </a>
         ))}
diff --git a/components/sponsors/Sponsors.tsx b/components/sponsors/Sponsors.tsx
index af0fed3882e3..e652cafb35fa 100644
--- a/components/sponsors/Sponsors.tsx
+++ b/components/sponsors/Sponsors.tsx
@@ -1,3 +1,4 @@
+import ResponsiveImage from './ResponsiveImage';
 import { sponsors } from './SponsorsList';
 
 interface SponsorsProps {
@@ -24,11 +25,11 @@ export default function Sponsors({ className = '', showSupportBanner = true }: S
               rel='noopener noreferrer'
               data-testid='Sponsors-link'
             >
-              <img
-                className={sponsor?.imageClass}
+              <ResponsiveImage
                 src={sponsor.imageSrc}
                 alt={sponsor.altText}
-                data-testid='Sponsors-img'
+                className={sponsor?.imageClass}
+                dataTestId='Sponsors-img'
               />
             </a>
           </li>

From f537df65fbf179e867b6e997bd90097acaaea996 Mon Sep 17 00:00:00 2001
From: wck-iipi <21dcs006@nith.ac.in>
Date: Tue, 10 Sep 2024 01:12:49 +0530
Subject: [PATCH 2/3] Added twmerge for ResponsiveImage

Signed-off-by: wck-iipi <21dcs006@nith.ac.in>
---
 components/sponsors/ResponsiveImage.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/components/sponsors/ResponsiveImage.tsx b/components/sponsors/ResponsiveImage.tsx
index 3a9f0aa3a797..f73acde9acf8 100644
--- a/components/sponsors/ResponsiveImage.tsx
+++ b/components/sponsors/ResponsiveImage.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { twMerge } from 'tailwind-merge';
 
 interface ResponsiveImageProps {
   src: string;
@@ -16,7 +17,9 @@ interface ResponsiveImageProps {
  * @param {string} props.dataTestId - A string for identifying the element during testing.
  */
 const ResponsiveImage: React.FC<ResponsiveImageProps> = ({ src, alt, className, dataTestId }) => {
-  return <img src={src} alt={alt} className={`${className} w-full h-12 object-contain`} data-testid={dataTestId} />;
+  const classNameMerged = twMerge('w-full h-12 object-contain', className);
+
+  return <img src={src} alt={alt} className={`${classNameMerged}`} data-testid={dataTestId} />;
 };
 
 export default ResponsiveImage;

From fa4eae339cd08f907caeaf45b6681e9f90ac046e Mon Sep 17 00:00:00 2001
From: Wck-iipi <110763795+Wck-iipi@users.noreply.github.com>
Date: Wed, 16 Oct 2024 17:00:52 +0530
Subject: [PATCH 3/3] alt made compulsory to add in ResponsiveImage

---
 components/sponsors/ResponsiveImage.tsx | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/components/sponsors/ResponsiveImage.tsx b/components/sponsors/ResponsiveImage.tsx
index f73acde9acf8..e5d20657cb47 100644
--- a/components/sponsors/ResponsiveImage.tsx
+++ b/components/sponsors/ResponsiveImage.tsx
@@ -3,7 +3,7 @@ import { twMerge } from 'tailwind-merge';
 
 interface ResponsiveImageProps {
   src: string;
-  alt?: string;
+  alt: string;
   className?: string;
   dataTestId: string;
 }
@@ -16,10 +16,22 @@ interface ResponsiveImageProps {
  * @param {string} props.className - Additional CSS class names for styling the image.
  * @param {string} props.dataTestId - A string for identifying the element during testing.
  */
-const ResponsiveImage: React.FC<ResponsiveImageProps> = ({ src, alt, className, dataTestId }) => {
+const ResponsiveImage: React.FC<ResponsiveImageProps> = ({
+  src,
+  alt,
+  className,
+  dataTestId,
+}) => {
   const classNameMerged = twMerge('w-full h-12 object-contain', className);
 
-  return <img src={src} alt={alt} className={`${classNameMerged}`} data-testid={dataTestId} />;
+  return (
+    <img
+      src={src}
+      alt={alt}
+      className={`${classNameMerged}`}
+      data-testid={dataTestId}
+    />
+  );
 };
 
 export default ResponsiveImage;