Resolve "Fix: FLOSS logos in dark mode"

Closes #106 (closed)

src/components/Carousel.js

@@ -5,46 +5,49 @@ import "slick-carousel/slick/slick.css";
 import "slick-carousel/slick/slick-theme.css";
 import useBaseUrl from "@docusaurus/useBaseUrl";
 
-function CarouselElement({name, img, link, alt}) {
-  if (typeof link === "undefined" && typeof name === "undefined") {
+function Logo({img, svg, alt}) {
+  if (img) {
     return (
-      <div className="carousel_box">     
-        <div>
-          <img src={useBaseUrl(img)} alt={alt} className="carousel_img" />
-        </div>
-      </div>
-    );
-  }
-
-  else if (typeof link === "undefined") {
-    return (
-      <div className="carousel_box">
+      <> 
         <img src={useBaseUrl(img)} alt={alt} className="carousel_img" />
-        <h6 className="carousel_title">{name}</h6>
-      </div>
+      </>
     );
   }
-
-  else if (typeof name === "undefined") {
+  else if (svg) {
     return (
-      <div className="carousel_box">
-        <a href={link} target="_blank" rel="noopener noreferrer">
-          <img src={useBaseUrl(img)} alt={alt} className="carousel_img" />
-        </a>
-      </div>
+      <svg alt={alt}>
+        {svg}
+      </svg>
     );
   }
+}
 
-  else {
-    return (
-      <div className="carousel_box">
-        <a href={link} target="_blank" rel="noopener noreferrer">
-          <img src={useBaseUrl(img) } alt={alt} className="carousel_img" />
-          <h6 className="carousel_title">{name}</h6>
-        </a>
-      </div>
-    );
-  }
+function CarouselElement({name, img, svg, link, alt}) {
+  return (
+    <div className="carousel_box">
+      {(() => {
+        if (link) {
+          return (
+            <a href={link} target="_blank" rel="noopener noreferrer">
+              <Logo img={img} svg={svg} alt={alt}/>
+            </a>
+          );
+        }
+        else {
+          return (
+            <Logo img={img} svg={svg} alt={alt}/>
+          );         
+        }
+      })()}   
+      {(() => {
+        if (name) {
+          return (
+            <h6 className="carousel_title">{name}</h6>
+          ); 
+        }
+      })()}
+    </div>
+  );
 }
 
 export default function Carousel(props) {