Use PNG logos in supporters list

docusaurus.config.js

@@ -249,17 +249,23 @@ const config = {
   customFields: {
     logos: {
       Gruntwork: {
-        dark: "/logos/gruntwork.png",
-        light: "/logos/gruntwork-light.svg",
+        dark: "/logos/gruntwork-dark.png",
+        light: "/logos/gruntwork-light.png",
       },
       Spacelift: {
-        dark: "/logos/spacelift.svg",
-        light: "/logos/spacelift-light.svg",
+        dark: "/logos/spacelift-dark.png",
+        light: "/logos/spacelift-light.png",
+      },
+      env0: {
+        dark: "/logos/env0-dark.png",
+        light: "/logos/env0-light.png",
+      },
+      Scalr: {
+        dark: "/logos/scalr-dark.png",
+        light: "/logos/scalr-light.png",
       },
-      env0: { dark: "/logos/env0.svg", light: "/logos/env0-light.svg" },
-      Scalr: { dark: "/logos/scalr.svg", light: "/logos/scalr-light.png" },
       Harness: {
-        dark: "/logos/harness.svg",
+        dark: "/logos/harness-dark.png",
         light: "/logos/harness-light.png",
       },
     },

src/components/SupportersList/index.tsx

@@ -1,8 +1,8 @@
 import React from "react";
 import Link from "@docusaurus/Link";
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
-import ThemedImage from "@theme/ThemedImage";
 import useBaseUrl from "@docusaurus/useBaseUrl";
+import clsx from "clsx";
 
 type SupportersListProps = {
   list: {
@@ -24,7 +24,10 @@ export default function SupportersList({ list }: SupportersListProps) {
     >
       {list.map((supporter, index) => (
         <li
-          className="py-3 md:py-6 border-b dark:border-gray-800 border-gray-200 flex gap-4 justify-between items-center"
+          className={clsx(
+            "border-b dark:border-gray-800 border-gray-200 flex gap-4 justify-between items-center",
+            logos[supporter.name] ? "py-2 md:py-4" : "py-3 md:py-6"
+          )}
           key={index}
         >
           <Link
@@ -35,13 +38,17 @@ export default function SupportersList({ list }: SupportersListProps) {
             aria-label={`Go to ${supporter.name} website`}
           >
             {logos[supporter.name] ? (
-              <ThemedImage
-                alt={supporter.name}
-                sources={{
-                  light: useBaseUrl(logos[supporter.name].light),
-                  dark: useBaseUrl(logos[supporter.name].dark),
+              <div
+                aria-hidden
+                style={{
+                  "--light-img": `url('${useBaseUrl(
+                    logos[supporter.name].light
+                  )}')`,
+                  "--dark-img": `url('${useBaseUrl(
+                    logos[supporter.name].dark
+                  )}')`,
                 }}
-                className="w-28"
+                className="w-28 h-10 [background-image:--light-img] dark:[background-image:--dark-img] bg-no-repeat bg-contain bg-left"
               />
             ) : (
               supporter.name