Merge pull request #751 from centrifuge/add_polkadot_icon

Add polkadot to partners list
centrifuge · Jul 12, 2024 · 19cb89e · 19cb89e
2 parents 8cdb10b + 5f87d7d
commit 19cb89e
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 7 deletions.
diff --git a/data/home.json b/data/home.json
@@ -43,8 +43,11 @@
       {
         "image": "./images/partner/arbitrum.svg",
         "alt": "Arbitrum"
+      },
+      {
+        "image": "./images/partner/polkadot.svg",
+        "alt": "Polkadot"
       }
-
     ]
   },
   "testimonials": {

diff --git a/src/components/Image.tsx b/src/components/Image.tsx
@@ -10,22 +10,23 @@ export type ImageProps = {
   }
   alt?: string
   objectFit?: CSSProperties['objectFit']
-  objectPosition?: CSSProperties['objectPosition']
+  objectPosition?: CSSProperties['objectPosition'],
+  styles?: React.CSSProperties
 }
 
-export function Image({ data, alt, objectFit = 'cover', objectPosition = 'center' }: ImageProps) {
+export function Image({ data, alt, objectFit = 'cover', objectPosition = 'center', styles }: ImageProps) {
   if (!data) {
     console.warn('No image data')
     return null
   }
 
   if (data.extension === 'svg') {
-    return <img src={data.publicURL} alt={alt || ''} />
+    return <img src={data.publicURL} alt={alt || ''} style={{ ...styles }} />
   }
 
   const image = getImage(data)
   if (image) {
-    return <GatsbyImage image={image} alt={alt || ''} objectFit={objectFit} objectPosition={objectPosition} />
+    return <GatsbyImage image={image} alt={alt || ''} objectFit={objectFit} objectPosition={objectPosition} style={{ ...styles }} />
   }
 
   return null

diff --git a/src/components/partner-list/index.tsx b/src/components/partner-list/index.tsx
@@ -31,15 +31,15 @@ export function PartnerList({ partners }: PartnerListProps) {
             <Shelf as="ul" m={0} p={0} gap={4} alignItems="center" role="list" style={{ opacity: isOverflow ? 0 : 1 }}>
               {partners.map(({ image, alt }, index) => (
                 <li key={`${alt}-${index}`}>
-                  <Image data={image} />
+                  <Image data={image} objectFit="contain" styles={{ width: 120, height: 20 }} />
                 </li>
               ))}
             </Shelf>
 
             {isOverflow && (
               <Marquee gradient={false} speed={80} className="marquee-container">
                 {partners.map(({ image, alt }, index) => (
-                  <Image key={`${alt}-${index}`} data={image} />
+                  <Image key={`${alt}-${index}`} data={image} styles={{ width: 120, height: 20, objectFit: "contain" }} />
                 ))}
               </Marquee>
             )}