[Integrations] Support dark mode whiteIcon, circular badges, and card layout sizing

src/sections/Meshery/Meshery-integrations/Individual-Integrations/Component.style.js

@@ -12,15 +12,6 @@ export const ComponentsWrapper = styled.div`
       font-weight: normal;
     }
   }
-  .componentimg {
-    width: 80px;
-    height: 80px;
-  }
-  .componentimg img {
-    width: 100%;
-    height: 100%;
-    object-fit: contain;
-  }
 
   .componentsSection {
     display: flex;
@@ -29,24 +20,44 @@ export const ComponentsWrapper = styled.div`
     padding: 3rem 2rem 5rem 2rem;
     justify-content: center;
   }
+
+  .componentimg {
+    width: 48px;
+    height: 48px;
+    min-width: 48px;
+    display: grid;
+    place-items: center;
+    border-radius: 50%;
+    background-color: ${(props) => props.theme.blackToWhite};
+    padding: 8px;
+  }
+
+  .componentimg img {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+    display: block;
+  }
+
   .maincontainer {
     display: flex;
     align-items: center;
     gap: 1rem;
     background-color: ${(props) => props.theme.grey212121ToGreyEEEEEE};
-    padding: 0.5rem 1rem;
+    padding: 0.85rem 1.25rem;
     border-radius: 0.85rem;
     width: 100%;
-    flex: 30%;
-    max-width: 350px;
+    flex: 1 1 360px;
+    max-width: 400px;
+    min-height: 72px;
   }
 
   .items {
-    border-radius: 0.625rem;
-    text-transform: uppercase;
+    margin: 0;
     color: ${(props) => props.theme.text};
     font-size: 0.875rem;
-    transition: all .1s ease-in-out;
-    line-height: 1.1875rem;
-    width: 100%;
+    line-height: 1.25;
+    text-transform: uppercase;
+    word-break: break-word;
+  }
 `;

src/sections/Meshery/Meshery-integrations/Individual-Integrations/ComponentsGrid.js

@@ -1,56 +1,135 @@
 import React, { useEffect, useState } from "react";
 import { ComponentsWrapper } from "./Component.style";
 import { checkImageUrlValidity } from "../../../../utils/imageValidate";
+import { useStyledDarkMode } from "../../../../theme/app/useStyledDarkMode";
+
+const getFallbackIcon = (frontmatter, isDarkActive) => {
+  if (isDarkActive) {
+    return (
+      frontmatter?.darkModeIntegrationIcon?.publicURL ||
+      frontmatter?.integrationIcon?.publicURL ||
+      frontmatter?.integrationIcon_svg?.publicURL ||
+      ""
+    );
+  }
+
+  return (
+    frontmatter?.integrationIcon?.publicURL ||
+    frontmatter?.integrationIcon_svg?.publicURL ||
+    frontmatter?.darkModeIntegrationIcon?.publicURL ||
+    ""
+  );
+};
+
+const getPreferredIcon = (component, isDarkActive, fallbackIcon) => {
+  const primary = isDarkActive
+    ? component?.whiteIcon?.publicURL
+    : component?.colorIcon?.publicURL;
+  const alternate = isDarkActive
+    ? component?.colorIcon?.publicURL
+    : component?.whiteIcon?.publicURL;
+
+  return primary || alternate || fallbackIcon || "";
+};
 
 const ComponentsGrid = ({ frontmatter }) => {
-  const components = frontmatter.components.map((component) => {
-    const { name, colorIcon } = component; // currently we don't have description for components
-    return { name, colorIcon };
-  });
-  const [validComponents, setValidComponents] = useState([]);
+  const { isDark } = useStyledDarkMode();
+  const darkModeActive = Boolean(isDark);
+  const fallbackIcon = getFallbackIcon(frontmatter, darkModeActive);
+
+  const candidateComponents = (frontmatter?.components || []).map(
+    (component) => ({
+      ...component,
+      preferredIcon: getPreferredIcon(component, darkModeActive, fallbackIcon),
+    }),
+  );
+
+  const [validComponents, setValidComponents] = useState(candidateComponents);
+
   useEffect(() => {
-    const fetchData = async () => {
-      const promises = components.map(async (item) => {
-        const isSvgPathValid = await checkImageUrlValidity(
-          item.colorIcon.publicURL
-        );
-        if (isSvgPathValid) {
-          return item;
-        } else {
-          item.colorIcon.publicURL = frontmatter.integrationIcon.publicURL;
-          return item; // Return fallback image
+    let mounted = true;
+
+    const loadIcons = async () => {
+      let isFallbackValid = null;
+      const checkFallback = async () => {
+        if (!fallbackIcon) return false;
+        if (isFallbackValid === null) {
+          isFallbackValid = await checkImageUrlValidity(fallbackIcon);
         }
-      });
+        return isFallbackValid;
+      };
+
+      const validItems = await Promise.all(
+        candidateComponents.map(async (item) => {
+          const primaryIcon = darkModeActive
+            ? item.whiteIcon?.publicURL
+            : item.colorIcon?.publicURL;
+          const alternateIcon = darkModeActive
+            ? item.colorIcon?.publicURL
+            : item.whiteIcon?.publicURL;
 
-      const validItems = await Promise.all(promises);
-      // Filter out null values (items that are not valid)
-      const filteredValidComponents = validItems.filter(
-        (item) => item !== null
+          if (primaryIcon && (await checkImageUrlValidity(primaryIcon))) {
+            return {
+              ...item,
+              preferredIcon: primaryIcon,
+            };
+          }
+
+          if (
+            alternateIcon &&
+            alternateIcon !== primaryIcon &&
+            (await checkImageUrlValidity(alternateIcon))
+          ) {
+            return {
+              ...item,
+              preferredIcon: alternateIcon,
+            };
+          }
+
+          if (
+            fallbackIcon &&
+            fallbackIcon !== primaryIcon &&
+            fallbackIcon !== alternateIcon &&
+            (await checkFallback())
+          ) {
+            return {
+              ...item,
+              preferredIcon: fallbackIcon,
+            };
+          }
+
+          return null;
+        }),
       );
 
-      setValidComponents(filteredValidComponents);
+      if (mounted) {
+        setValidComponents(validItems.filter(Boolean));
+      }
     };
 
-    fetchData();
-  }, []);
+    loadIcons();
+    return () => {
+      mounted = false;
+    };
+  }, [frontmatter, darkModeActive, fallbackIcon]);
 
   return (
     <ComponentsWrapper>
       <section className="heading">
         <h1>
-          {frontmatter.title} Components ({components.length})
+          {frontmatter?.title} Components ({candidateComponents.length})
         </h1>
       </section>
 
       <section className="componentsSection">
-        {validComponents.map((item) => (
-          <div key={item.id} className="maincontainer">
+        {validComponents.map((item, index) => (
+          <div key={`${item.name}-${index}`} className="maincontainer">
             <div className="componentimg">
-              <img src={item.colorIcon.publicURL} alt={item.name} />
+              {item.preferredIcon && (
+                <img src={item.preferredIcon} alt={item.name || ""} />
+              )}
             </div>
-            <p className="items">{item.name.replaceAll("-", " ")}</p>
-            {/* <div className="textcontent">
-            </div> */}
+            <p className="items">{item.name?.replaceAll("-", " ") || ""}</p>
           </div>
         ))}
       </section>

src/templates/integrations.js

@@ -1,9 +1,6 @@
 import React from "react";
 import { graphql } from "gatsby";
-
-
 import SEO from "../components/seo";
-
 import IndividualIntegrations from "../sections/Meshery/Meshery-integrations/Individual-Integrations";
 
 const LiteModeNotice = ({ entity }) => (
@@ -20,16 +17,15 @@ const LiteModeNotice = ({ entity }) => (
       {`This ${entity} page is skipped when BUILD_FULL_SITE=false to keep local builds fast.`}
     </p>
     <p style={{ marginTop: "0.75rem" }}>
-      Run <code>make site-full</code> (or set <code>BUILD_FULL_SITE=true</code>) to render the full content.
+      Run <code>make site-full</code> (or set <code>BUILD_FULL_SITE=true</code>)
+      to render the full content.
     </p>
   </section>
 );
 
-
 export const query = graphql`
   query IntegrationsBySlug($slug: String!, $name: String!) {
-    mdx(fields:{slug:{eq: $slug}}) {
-
+    mdx(fields: { slug: { eq: $slug } }) {
       frontmatter {
         title
         subtitle
@@ -39,6 +35,10 @@ export const query = graphql`
           extension
           publicURL
         }
+        darkModeIntegrationIcon {
+          extension
+          publicURL
+        }
         docURL
         category
         components {
@@ -64,7 +64,11 @@ export const query = graphql`
       }
     }
     screenshots_raster: allFile(
-      filter: {relativeDirectory: {eq: $name}, sourceInstanceName: {eq: "integrations"}, extension: {ne: "svg"}}
+      filter: {
+        relativeDirectory: { eq: $name }
+        sourceInstanceName: { eq: "integrations" }
+        extension: { ne: "svg" }
+      }
     ) {
       nodes {
         extension
@@ -75,7 +79,11 @@ export const query = graphql`
       }
     }
     screenshots_svg: allFile(
-      filter: {relativeDirectory: {eq: $name}, sourceInstanceName: {eq: "integrations"}, extension: {eq: "svg"}}
+      filter: {
+        relativeDirectory: { eq: $name }
+        sourceInstanceName: { eq: "integrations" }
+        extension: { eq: "svg" }
+      }
     ) {
       nodes {
         extension
@@ -90,18 +98,10 @@ const Integrations = ({ data, children }) => {
     return <LiteModeNotice entity="integration" />;
   }
 
-
   return (
-
     <>
-
-
-      <IndividualIntegrations data={data}>
-        {children}
-      </IndividualIntegrations>
-
+      <IndividualIntegrations data={data}>{children}</IndividualIntegrations>
     </>
-
   );
 };
 export default Integrations;
@@ -117,5 +117,11 @@ export const Head = ({ data }) => {
     );
   }
 
-  return <SEO title={frontmatter.title} image={frontmatter.integrationIcon?.publicURL} description={frontmatter.subtitle}/>;
-};
+  return (
+    <SEO
+      title={frontmatter.title}
+      image={frontmatter.integrationIcon?.publicURL}
+      description={frontmatter.subtitle}
+    />
+  );
+};