From 6710d9bc551a56aba8737ef02a9e045362ec2055 Mon Sep 17 00:00:00 2001
From: Amit Amrutiya <amitamrutiya2210@gmail.com>
Date: Thu, 17 Oct 2024 14:38:25 +0530
Subject: [PATCH 1/4] feat: add new image and catalog empty card

Signed-off-by: Amit Amrutiya <amitamrutiya2210@gmail.com>
---
 .../CustomCatalog/CatalogCardDesignLogo.tsx   | 95 +++++++++++++++++++
 .../{custom-card.tsx => CustomCard.tsx}       |  1 +
 src/custom/CustomCatalog/EmptyStateCard.tsx   | 16 ++++
 src/custom/CustomCatalog/index.tsx            |  6 +-
 src/custom/CustomCatalog/style.tsx            | 27 ++++++
 src/custom/index.tsx                          |  4 +-
 src/icons/EmptyStyle/EmptyStyleIcon.tsx       | 31 ++++++
 src/icons/EmptyStyle/index.tsx                |  1 +
 8 files changed, 178 insertions(+), 3 deletions(-)
 create mode 100644 src/custom/CustomCatalog/CatalogCardDesignLogo.tsx
 rename src/custom/CustomCatalog/{custom-card.tsx => CustomCard.tsx} (99%)
 create mode 100644 src/custom/CustomCatalog/EmptyStateCard.tsx
 create mode 100644 src/icons/EmptyStyle/EmptyStyleIcon.tsx
 create mode 100644 src/icons/EmptyStyle/index.tsx

diff --git a/src/custom/CustomCatalog/CatalogCardDesignLogo.tsx b/src/custom/CustomCatalog/CatalogCardDesignLogo.tsx
new file mode 100644
index 00000000..3fb39247
--- /dev/null
+++ b/src/custom/CustomCatalog/CatalogCardDesignLogo.tsx
@@ -0,0 +1,95 @@
+import React, { useState } from 'react';
+import { Dialog } from '../../base';
+import { DesignIcon, MesheryFilterIcon } from '../../icons';
+
+interface CatalogCardDesignLogoProps {
+  zoomEffect?: boolean;
+  imgURL?: string[];
+  type: { type: string };
+  width: string;
+  height: string;
+  style?: React.CSSProperties;
+}
+
+const CatalogCardDesignLogo: React.FC<CatalogCardDesignLogoProps> = ({
+  zoomEffect = false,
+  imgURL,
+  type,
+  width,
+  height,
+  style = {}
+}) => {
+  const [imgError, setImgError] = useState(false);
+  const [isZoomed, setIsZoomed] = useState(false);
+
+  const handleZoomClick = () => {
+    if (zoomEffect) {
+      setIsZoomed(true);
+    }
+  };
+
+  const handleZoomClose = () => {
+    setIsZoomed(false);
+  };
+
+  const SvgComponent: React.FC<{ type: { type: string } }> = ({ type }) => {
+    return type.type === 'filter' ? (
+      <MesheryFilterIcon width={width} height={height} style={style} />
+    ) : (
+      <DesignIcon width={width} height={height} style={style} />
+    );
+  };
+
+  return (
+    <>
+      {imgURL && imgURL.length > 0 ? (
+        <div style={{ width: '100%', height: '7.5rem', position: 'relative' }}>
+          {!imgError ? (
+            <>
+              <img
+                src={imgURL[0]}
+                alt="Design SnapShot"
+                loading="lazy"
+                onClick={handleZoomClick}
+                onError={() => setImgError(true)}
+                style={{
+                  cursor: 'pointer',
+                  width: '100%',
+                  height: '100%',
+                  objectFit: 'cover'
+                }}
+              />
+              <Dialog
+                open={isZoomed}
+                onClose={handleZoomClose}
+                style={{
+                  backgroundColor: 'rgba(0, 0, 0, 0.8)'
+                }}
+                PaperProps={{
+                  style: {
+                    background: 'transparent',
+                    boxShadow: 'none',
+                    overflow: 'hidden',
+                    maxWidth: '60vw'
+                  }
+                }}
+              >
+                <img
+                  src={imgURL[0]}
+                  alt="Zoomed Design SnapShot"
+                  style={{ objectFit: 'contain', maxWidth: '100%', maxHeight: '100%' }}
+                />
+              </Dialog>
+            </>
+          ) : (
+            <SvgComponent type={type} />
+          )}
+        </div>
+      ) : (
+        <SvgComponent type={type} />
+      )}
+    </>
+  );
+};
+
+export default CatalogCardDesignLogo;
diff --git a/src/custom/CustomCatalog/custom-card.tsx b/src/custom/CustomCatalog/CustomCard.tsx
similarity index 99%
rename from src/custom/CustomCatalog/custom-card.tsx
rename to src/custom/CustomCatalog/CustomCard.tsx
index 004f5079..bce7b078 100644
--- a/src/custom/CustomCatalog/custom-card.tsx
+++ b/src/custom/CustomCatalog/CustomCard.tsx
@@ -160,6 +160,7 @@ const CustomCatalogCard: React.FC<CatalogCardProps> = ({
 
     setAvailableTechnologies(validSvgPaths);
   };
+
   useEffect(() => {
     handleImage();
     // eslint-disable-next-line react-hooks/exhaustive-deps
diff --git a/src/custom/CustomCatalog/EmptyStateCard.tsx b/src/custom/CustomCatalog/EmptyStateCard.tsx
new file mode 100644
index 00000000..756392f5
--- /dev/null
+++ b/src/custom/CustomCatalog/EmptyStateCard.tsx
@@ -0,0 +1,16 @@
+import { useTheme } from '@mui/material';
+import { FC } from 'react';
+import { EmptyStyleIcon } from '../../icons/EmptyStyle';
+import { CatalogEmptyStateDiv } from './style';
+
+const EmptyStateCard: FC = () => {
+  const theme = useTheme();
+  return (
+    <CatalogEmptyStateDiv>
+      <EmptyStyleIcon fill={theme.palette.secondary.contrastText} width="100px" height="100px" />
+      <h3 style={{ color: theme.palette.secondary.contrastText }}>No match found</h3>
+    </CatalogEmptyStateDiv>
+  );
+};
+
+export default EmptyStateCard;
diff --git a/src/custom/CustomCatalog/index.tsx b/src/custom/CustomCatalog/index.tsx
index 09adbc5c..be7c4712 100644
--- a/src/custom/CustomCatalog/index.tsx
+++ b/src/custom/CustomCatalog/index.tsx
@@ -1,3 +1,5 @@
-import CustomCatalogCard from './custom-card';
+import CatalogCardDesignLogo from './CatalogCardDesignLogo';
+import CustomCatalogCard from './CustomCard';
+import EmptyStateCard from './EmptyStateCard';
 
-export { CustomCatalogCard };
+export { CatalogCardDesignLogo, CustomCatalogCard, EmptyStateCard };
diff --git a/src/custom/CustomCatalog/style.tsx b/src/custom/CustomCatalog/style.tsx
index 7e89b190..3be4029d 100644
--- a/src/custom/CustomCatalog/style.tsx
+++ b/src/custom/CustomCatalog/style.tsx
@@ -398,3 +398,30 @@ export const DesignAuthorName = styled('div')(() => ({
     height: 'max-content'
   }
 }));
+
+export const CatalogEmptyStateDiv = styled('div')(({ theme }) => ({
+  backgroundColor: theme.palette.common.white,
+  textAlign: 'center',
+  borderRadius: '1rem',
+  width: '15rem',
+  height: '18rem',
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  alignItems: 'center',
+  [theme.breakpoints.down('lg')]: {
+    height: '18.75rem'
+  }
+}));
+
+export const EmptyStateDiv = styled('div')(({ theme }) => ({
+  backgroundColor: theme.palette.common.white,
+  textAlign: 'center',
+  borderRadius: '1rem',
+  width: '100%',
+  padding: '1.5rem',
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  alignItems: 'center'
+}));
diff --git a/src/custom/index.tsx b/src/custom/index.tsx
index 9a9ddd65..dca38c0a 100644
--- a/src/custom/index.tsx
+++ b/src/custom/index.tsx
@@ -3,7 +3,7 @@ import { BookmarkNotification } from './BookmarkNotification';
 import CatalogFilter, { CatalogFilterProps } from './CatalogFilter/CatalogFilter';
 import { ChapterCard } from './ChapterCard';
 import { ConnectionChip } from './ConnectionChip';
-import { CustomCatalogCard } from './CustomCatalog';
+import { CatalogCardDesignLogo, CustomCatalogCard, EmptyStateCard } from './CustomCatalog';
 import {
   CustomColumn,
   CustomColumnVisibilityControl,
@@ -58,6 +58,7 @@ export { Terminal } from './Terminal';
 export {
   ActionButton,
   BookmarkNotification,
+  CatalogCardDesignLogo,
   CatalogFilter,
   ChapterCard,
   ConnectionChip,
@@ -68,6 +69,7 @@ export {
   CustomTooltip,
   DataTableEllipsisMenu,
   EmptyState,
+  EmptyStateCard,
   ErrorBoundary,
   Fallback,
   FeedbackButton,
diff --git a/src/icons/EmptyStyle/EmptyStyleIcon.tsx b/src/icons/EmptyStyle/EmptyStyleIcon.tsx
new file mode 100644
index 00000000..dcd90aae
--- /dev/null
+++ b/src/icons/EmptyStyle/EmptyStyleIcon.tsx
@@ -0,0 +1,31 @@
+import { CSSProperties, FC } from 'react';
+
+interface EmptyStyleIconProps {
+  width?: string;
+  height?: string;
+  fill?: string;
+  style?: CSSProperties;
+  onClick?: () => void;
+}
+
+const EmptyStyleIcon: FC<EmptyStyleIconProps> = ({
+  width = '24px',
+  height = '24px',
+  fill,
+  style = {},
+  onClick = () => {}
+}) => (
+  <svg
+    style={style}
+    xmlns="http://www.w3.org/2000/svg"
+    height={height}
+    viewBox="0 -960 960 960"
+    width={width}
+    fill={fill}
+    onClick={onClick}
+  >
+    <path d="m159-168-34-14q-31-13-41.5-45t3.5-63l72-156v278Zm160 88q-33 0-56.5-23.5T239-160v-240l106 294q3 7 6 13.5t8 12.5h-40Zm206-4q-32 12-62-3t-42-47L243-622q-12-32 2-62.5t46-41.5l302-110q32-12 62 3t42 47l178 488q12 32-2 62.5T827-194L525-84Zm-86-476q17 0 28.5-11.5T479-600q0-17-11.5-28.5T439-640q-17 0-28.5 11.5T399-600q0 17 11.5 28.5T439-560Z" />
+  </svg>
+);
+
+export default EmptyStyleIcon;
diff --git a/src/icons/EmptyStyle/index.tsx b/src/icons/EmptyStyle/index.tsx
new file mode 100644
index 00000000..97ba77dd
--- /dev/null
+++ b/src/icons/EmptyStyle/index.tsx
@@ -0,0 +1 @@
+export { default as EmptyStyleIcon } from './EmptyStyleIcon';

From ff936b4b0949eec4fa0c0b3edc419e094ba5020e Mon Sep 17 00:00:00 2001
From: Amit Amrutiya <amitamrutiya2210@gmail.com>
Date: Thu, 17 Oct 2024 18:59:34 +0530
Subject: [PATCH 2/4] feat: make sistent card dark mode compitable

Signed-off-by: Amit Amrutiya <amitamrutiya2210@gmail.com>
---
 src/custom/CustomCatalog/CustomCard.tsx       |  44 +++----
 src/custom/CustomCatalog/EmptyStateCard.tsx   |   4 +-
 src/custom/CustomCatalog/style.tsx            | 120 ++++++++++--------
 .../ContentClassIcons/CommunityClassIcon.tsx  |  16 +--
 4 files changed, 96 insertions(+), 88 deletions(-)

diff --git a/src/custom/CustomCatalog/CustomCard.tsx b/src/custom/CustomCatalog/CustomCard.tsx
index bce7b078..1dd995c0 100644
--- a/src/custom/CustomCatalog/CustomCard.tsx
+++ b/src/custom/CustomCatalog/CustomCard.tsx
@@ -1,11 +1,13 @@
 import CalendarMonthIcon from '@mui/icons-material/CalendarMonth';
-import { Avatar, styled } from '@mui/material';
+import { Avatar, styled, useTheme } from '@mui/material';
 import React, { useEffect, useState } from 'react';
 import { Grid } from '../../base';
 import { CloneIcon, CommunityClassIcon, OfficialClassIcon, OpenIcon, ShareIcon } from '../../icons';
 import VerificationClassIcon from '../../icons/ContentClassIcons/VerificationClassIcon';
 import DeploymentsIcon from '../../icons/Deployments/DeploymentsIcon';
 import { DownloadIcon } from '../../icons/Download';
+import { DARK_TEAL } from '../../theme';
+import { SNOW_WHITE } from '../../theme/colors/colors';
 import { CustomTooltip } from '../CustomTooltip';
 import {
   CardBack,
@@ -123,6 +125,7 @@ const CustomCatalogCard: React.FC<CatalogCardProps> = ({
     width: cardWidth,
     ...cardStyles
   };
+  const theme = useTheme();
 
   const technologies = pattern.catalog_data?.compatibility || []; // an array
   const techlimit = 5;
@@ -197,7 +200,8 @@ const CustomCatalogCard: React.FC<CatalogCardProps> = ({
           <DesignDetailsDiv>
             <div
               style={{
-                background: 'rgba(231, 239, 243, 0.40)',
+                background:
+                  theme.palette.mode === 'light' ? 'rgba(231, 239, 243, 0.4)' : 'transparent',
                 display: 'flex',
                 alignItems: 'center',
                 justifyContent: 'center',
@@ -211,26 +215,22 @@ const CustomCatalogCard: React.FC<CatalogCardProps> = ({
           </DesignDetailsDiv>
           {isDetailed && (
             <MetricsContainerFront isDetailed={isDetailed}>
-              <MetricsDiv>
-                <DownloadIcon width={18} height={18} />
-                <MetricsCount>{pattern.download_count}</MetricsCount>
-              </MetricsDiv>
-              <MetricsDiv>
-                <CloneIcon width={18} height={18} fill={'#51636B'} />
-                <MetricsCount>{pattern.clone_count}</MetricsCount>
-              </MetricsDiv>
-              <MetricsDiv>
-                <OpenIcon width={18} height={18} fill={'#51636B'} />
-                <MetricsCount>{pattern.view_count}</MetricsCount>
-              </MetricsDiv>
-              <MetricsDiv>
-                <DeploymentsIcon width={18} height={18} />
-                <MetricsCount>{pattern.deployment_count}</MetricsCount>
-              </MetricsDiv>
-              <MetricsDiv>
-                <ShareIcon width={18} height={18} fill={'#51636B'} />
-                <MetricsCount>{pattern.share_count}</MetricsCount>
-              </MetricsDiv>
+              {[
+                { Icon: DownloadIcon, count: pattern.download_count },
+                { Icon: CloneIcon, count: pattern.clone_count },
+                { Icon: OpenIcon, count: pattern.view_count },
+                { Icon: DeploymentsIcon, count: pattern.deployment_count },
+                { Icon: ShareIcon, count: pattern.share_count }
+              ].map(({ Icon, count }, index) => (
+                <MetricsDiv key={index}>
+                  <Icon
+                    width={18}
+                    height={18}
+                    fill={theme.palette.mode === 'light' ? DARK_TEAL : SNOW_WHITE}
+                  />
+                  <MetricsCount>{count}</MetricsCount>
+                </MetricsDiv>
+              ))}
             </MetricsContainerFront>
           )}
         </CardFront>
diff --git a/src/custom/CustomCatalog/EmptyStateCard.tsx b/src/custom/CustomCatalog/EmptyStateCard.tsx
index 756392f5..21d746a5 100644
--- a/src/custom/CustomCatalog/EmptyStateCard.tsx
+++ b/src/custom/CustomCatalog/EmptyStateCard.tsx
@@ -7,8 +7,8 @@ const EmptyStateCard: FC = () => {
   const theme = useTheme();
   return (
     <CatalogEmptyStateDiv>
-      <EmptyStyleIcon fill={theme.palette.secondary.contrastText} width="100px" height="100px" />
-      <h3 style={{ color: theme.palette.secondary.contrastText }}>No match found</h3>
+      <EmptyStyleIcon fill={theme.palette.text.default} width="100px" height="100px" />
+      <h3 style={{ color: theme.palette.text.default }}>No match found</h3>
     </CatalogEmptyStateDiv>
   );
 };
diff --git a/src/custom/CustomCatalog/style.tsx b/src/custom/CustomCatalog/style.tsx
index 3be4029d..a49cbebb 100644
--- a/src/custom/CustomCatalog/style.tsx
+++ b/src/custom/CustomCatalog/style.tsx
@@ -1,4 +1,6 @@
 import { styled, Typography } from '@mui/material';
+import { accentGrey, DARK_PRIMARY_COLOR, GRAY97, slateGray, WHITESMOKE } from '../../theme';
+import { charcoal, DARK_TEAL, SNOW_WHITE } from '../../theme/colors/colors';
 
 type DesignCardProps = {
   outerStyles: React.CSSProperties;
@@ -45,12 +47,13 @@ export const NoTechnologyText = styled('div')(() => ({
 }));
 
 export const StyledInnerClassWrapper = styled('div')<StyledInnerClassWrapperProps>(({
-  catalogClassName
+  catalogClassName,
+  theme
 }) => {
   const mapToColor: Record<string, string> = {
-    community: 'rgba(122,132,142,.8)',
-    official: '#EBC017',
-    verified: '#00B39F'
+    community: slateGray.main,
+    official: theme.palette.background.cta?.default || '#EBC017',
+    verified: theme.palette.background.brand?.default || '#00B39F'
   };
   return {
     font: 'bold 10px sans-serif',
@@ -67,7 +70,7 @@ export const StyledInnerClassWrapper = styled('div')<StyledInnerClassWrapperProp
     justifyContent: 'center',
     alignItems: 'center',
     backgroundColor: mapToColor[catalogClassName],
-    color: '#fff'
+    color: catalogClassName === 'official' ? theme.palette.common.black : theme.palette.common.white
   };
 });
 
@@ -122,7 +125,7 @@ export const DesignType = styled('span')(({ theme }) => ({
   fontSize: '0.875rem',
   textTransform: 'capitalize',
   background: theme.palette.background.brand?.default,
-  color: theme.palette.text.inverse,
+  color: theme.palette.background.constant?.white,
   borderRadius: '0 1rem 0 2rem'
 }));
 export const MetricsCount = styled('p')(({ theme }) => ({
@@ -131,13 +134,13 @@ export const MetricsCount = styled('p')(({ theme }) => ({
   margin: '0rem',
   lineHeight: '1.5',
   textAlign: 'center',
-  color: theme.palette.text.secondary,
+  color: theme.palette.mode === 'light' ? DARK_TEAL : SNOW_WHITE,
   fontWeight: '600'
 }));
-export const DesignName = styled(Typography)(() => ({
+export const DesignName = styled(Typography)(({ theme }) => ({
   fontWeight: 'bold',
   textTransform: 'capitalize',
-  color: '#000D12',
+  color: theme.palette.text.default,
   fontSize: '1.125rem',
   marginTop: '2rem',
   padding: '0rem 1rem',
@@ -151,15 +154,13 @@ export const DesignName = styled(Typography)(() => ({
   fontFamily: 'inherit'
 }));
 
-export const MetricsContainerFront = styled('div')<MetricsProps>(({ isDetailed }) => ({
+export const MetricsContainerFront = styled('div')<MetricsProps>(({ isDetailed, theme }) => ({
   display: 'flex',
   justifyContent: 'space-around',
-  // borderTop: "0.851px solid #C9DBE3",
   fontSize: '0.2rem',
-  color: 'rgba(26, 26, 26, .8)',
-  // margin: "-0.8rem 0.7rem 0",
+  color: theme.palette.mode === 'light' ? 'rgba(26, 26, 26, .8)' : theme.palette.text.default,
   padding: '0.9rem 0.1rem',
-  background: '#E7EFF3',
+  background: theme.palette.mode === 'light' ? '#E7EFF3' : DARK_TEAL,
   ...(isDetailed && {
     position: 'absolute',
     bottom: '0px'
@@ -194,7 +195,7 @@ export const DesignDetailsDiv = styled('div')(() => ({
 }));
 
 export const ImageWrapper = styled('div')(({ theme }) => ({
-  background: theme.palette.mode === 'light' ? 'rgba(231, 239, 243, 0.40)' : '#212121',
+  background: theme.palette.background.surfaces,
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
@@ -347,22 +348,34 @@ export const CardBack = styled('div')<CatalogProps>(({ isCatalog }) => ({
   })
 }));
 
-export const CardFront = styled('div')<DesignCardDivProps>(({ shouldFlip, isDetailed, theme }) => ({
-  ...(shouldFlip && {
-    position: 'absolute',
-    boxShadow: `2px 2px 3px 0px ${theme.palette.background.brand?.default}`,
-    background: `linear-gradient(to left bottom, #EBEFF1, #f4f5f7, #f7f7f9, white, white, white, white, white, white, #f7f7f9, #f4f5f7, #EBEFF1);`
-  }),
-  ...(isDetailed && {
-    boxShadow: `2px 2px 3px 0px ${theme.palette.background.brand?.default}`,
-    background: `linear-gradient(to left bottom, #EBEFF1, #f4f5f7, #f7f7f9, white, white, white, white, white, white, #f7f7f9, #f4f5f7, #EBEFF1);`
-  }),
-  width: '100%',
-  height: '100%',
-  WebkitBackfaceVisibility: 'hidden',
-  borderRadius: '0.9375rem',
-  backfaceVisibility: 'hidden'
-}));
+const getBackground = (isLightMode: boolean) => {
+  const lightGradient = `linear-gradient(to left bottom, ${WHITESMOKE}, ${GRAY97},white, white, white, white, white, white, white,white, $, ${WHITESMOKE}, ${GRAY97})`;
+  const darkGradient = `linear-gradient(to right top, ${DARK_PRIMARY_COLOR}, ${accentGrey[30]}, ${accentGrey[20]}, ${accentGrey[10]}, ${accentGrey[10]}, ${accentGrey[10]}, ${accentGrey[10]}, ${accentGrey[10]}, ${accentGrey[10]}, ${charcoal[20]}, ${charcoal[10]}, black)`;
+
+  return isLightMode ? lightGradient : darkGradient;
+};
+export const CardFront = styled('div')<DesignCardDivProps>(({ shouldFlip, isDetailed, theme }) => {
+  const isLightMode = theme.palette.mode === 'light';
+  const background = getBackground(isLightMode);
+  const boxShadow = `2px 2px 3px 0px ${theme.palette.background.brand?.default}`;
+
+  return {
+    ...(shouldFlip && {
+      position: 'absolute',
+      boxShadow,
+      background
+    }),
+    ...(isDetailed && {
+      boxShadow,
+      background
+    }),
+    width: '100%',
+    height: '100%',
+    WebkitBackfaceVisibility: 'hidden',
+    borderRadius: '0.9375rem',
+    backfaceVisibility: 'hidden'
+  };
+});
 
 export const DateText = styled('div')(() => ({
   fontSize: '0.875rem',
@@ -399,29 +412,24 @@ export const DesignAuthorName = styled('div')(() => ({
   }
 }));
 
-export const CatalogEmptyStateDiv = styled('div')(({ theme }) => ({
-  backgroundColor: theme.palette.common.white,
-  textAlign: 'center',
-  borderRadius: '1rem',
-  width: '15rem',
-  height: '18rem',
-  display: 'flex',
-  flexDirection: 'column',
-  justifyContent: 'center',
-  alignItems: 'center',
-  [theme.breakpoints.down('lg')]: {
-    height: '18.75rem'
-  }
-}));
+export const CatalogEmptyStateDiv = styled('div')(({ theme }) => {
+  const isLightMode = theme.palette.mode === 'light';
+  const background = getBackground(isLightMode);
+  const boxShadow = `2px 2px 3px 0px ${theme.palette.background.brand?.default}`;
 
-export const EmptyStateDiv = styled('div')(({ theme }) => ({
-  backgroundColor: theme.palette.common.white,
-  textAlign: 'center',
-  borderRadius: '1rem',
-  width: '100%',
-  padding: '1.5rem',
-  display: 'flex',
-  flexDirection: 'column',
-  justifyContent: 'center',
-  alignItems: 'center'
-}));
+  return {
+    background: background,
+    boxShadow: boxShadow,
+    textAlign: 'center',
+    borderRadius: '1rem',
+    width: '15rem',
+    height: '18rem',
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'center',
+    [theme.breakpoints.down('lg')]: {
+      height: '18.75rem'
+    }
+  };
+});
diff --git a/src/icons/ContentClassIcons/CommunityClassIcon.tsx b/src/icons/ContentClassIcons/CommunityClassIcon.tsx
index ad000fc1..393c609b 100644
--- a/src/icons/ContentClassIcons/CommunityClassIcon.tsx
+++ b/src/icons/ContentClassIcons/CommunityClassIcon.tsx
@@ -3,8 +3,8 @@ import { CustomIconProps } from '../types';
 export const CommunityClassIcon: FC<CustomIconProps> = ({
   width = '16',
   height = '13',
-  secondaryFill = '#293B43',
-  primaryFill = '#647176',
+  fill = '#293B43',
+  secondaryFill = '#647176',
   style = {}
 }) => (
   <svg
@@ -16,27 +16,27 @@ export const CommunityClassIcon: FC<CustomIconProps> = ({
   >
     <path
       d="M12.2766 4.69141C11.656 4.69141 11.0624 4.85321 10.5497 5.12287C10.5446 5.20494 10.5356 5.28627 10.5228 5.36662C10.387 6.2221 10.594 7.73615 11.1773 8.37646C11.4175 8.64006 11.6242 8.93297 11.7909 9.24871H15.7032C15.8651 9.24871 16 9.11388 16 8.95208V8.38579C16 6.36332 14.3271 4.69141 12.2766 4.69141Z"
-      fill={secondaryFill}
+      fill={fill}
     />
     <path
       d="M3.72344 4.69141C1.67285 4.69141 0 6.36331 0 8.41275V8.97905C0 9.14084 0.134907 9.27568 0.296796 9.27568H4.23609C4.40826 8.94965 4.62303 8.64795 4.87325 8.37773C5.45802 7.74624 5.64335 6.28753 5.48869 5.44087C5.46973 5.33709 5.45681 5.23097 5.45025 5.12287C4.91062 4.85321 4.34401 4.69141 3.72344 4.69141Z"
-      fill={secondaryFill}
+      fill={fill}
     />
     <path
       d="M7.98491 2.99219C6.87867 2.99219 5.98828 3.88207 5.98828 4.98769C5.98828 6.09331 6.87867 6.9832 7.98491 6.9832C9.09115 6.9832 9.98154 6.09331 9.98154 4.98769C9.98154 3.88207 9.09115 2.99219 7.98491 2.99219Z"
-      fill={primaryFill}
+      fill={secondaryFill}
     />
     <path
       d="M7.98516 7.54688C5.93457 7.54688 4.26172 9.21878 4.26172 11.2682V11.8345C4.26172 11.9963 4.39663 12.1311 4.55851 12.1311H11.4118C11.5737 12.1311 11.7086 11.9963 11.7086 11.8345V11.2682C11.7086 9.19182 10.0357 7.54688 7.98516 7.54688Z"
-      fill={primaryFill}
+      fill={secondaryFill}
     />
     <path
       d="M12.2779 0.132812C11.1716 0.132812 10.2812 1.0227 10.2812 2.12832C10.2812 3.23393 11.1716 4.12382 12.2779 4.12382C13.3841 4.12382 14.2745 3.23393 14.2745 2.12832C14.2745 1.0227 13.3841 0.132812 12.2779 0.132812Z"
-      fill={secondaryFill}
+      fill={fill}
     />
     <path
       d="M3.72319 0.132812C2.61695 0.132812 1.72656 1.0227 1.72656 2.12832C1.72656 3.23393 2.61695 4.12382 3.72319 4.12382C4.82943 4.12382 5.71982 3.23393 5.71982 2.12832C5.71982 1.0227 4.80245 0.132812 3.72319 0.132812Z"
-      fill={secondaryFill}
+      fill={fill}
     />
   </svg>
 );

From f5be8f842e94e5a42cffa2dc3f75ba465e28a934 Mon Sep 17 00:00:00 2001
From: Amit Amrutiya <amitamrutiya2210@gmail.com>
Date: Fri, 18 Oct 2024 10:14:19 +0530
Subject: [PATCH 3/4] feat: add getversion and js-yaml library

Signed-off-by: Amit Amrutiya <amitamrutiya2210@gmail.com>
---
 package-lock.json                       |  7 +--
 package.json                            |  1 +
 src/custom/CustomCatalog/CustomCard.tsx | 63 ++++++-----------------
 src/custom/CustomCatalog/Helper.ts      | 68 +++++++++++++++++++++++++
 4 files changed, 86 insertions(+), 53 deletions(-)
 create mode 100644 src/custom/CustomCatalog/Helper.ts

diff --git a/package-lock.json b/package-lock.json
index c491f76b..bc6df646 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
       "name": "@layer5/sistent",
       "version": "0.14.11",
       "dependencies": {
+        "js-yaml": "^4.1.0",
         "lodash": "^4.17.21"
       },
       "devDependencies": {
@@ -3707,7 +3708,6 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
       "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
-      "dev": true,
       "license": "Python-2.0"
     },
     "node_modules/aria-query": {
@@ -8782,7 +8782,6 @@
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
       "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "argparse": "^2.0.1"
@@ -16792,8 +16791,7 @@
     "argparse": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
-      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
-      "dev": true
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="
     },
     "aria-query": {
       "version": "5.1.3",
@@ -20310,7 +20308,6 @@
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
       "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
-      "dev": true,
       "requires": {
         "argparse": "^2.0.1"
       }
diff --git a/package.json b/package.json
index 5d21feaa..7361e195 100644
--- a/package.json
+++ b/package.json
@@ -116,6 +116,7 @@
     "access": "public"
   },
   "dependencies": {
+    "js-yaml": "^4.1.0",
     "lodash": "^4.17.21"
   }
 }
diff --git a/src/custom/CustomCatalog/CustomCard.tsx b/src/custom/CustomCatalog/CustomCard.tsx
index 1dd995c0..92517aa7 100644
--- a/src/custom/CustomCatalog/CustomCard.tsx
+++ b/src/custom/CustomCatalog/CustomCard.tsx
@@ -1,14 +1,15 @@
 import CalendarMonthIcon from '@mui/icons-material/CalendarMonth';
-import { Avatar, styled, useTheme } from '@mui/material';
+import { Avatar, styled } from '@mui/material';
 import React, { useEffect, useState } from 'react';
 import { Grid } from '../../base';
 import { CloneIcon, CommunityClassIcon, OfficialClassIcon, OpenIcon, ShareIcon } from '../../icons';
 import VerificationClassIcon from '../../icons/ContentClassIcons/VerificationClassIcon';
 import DeploymentsIcon from '../../icons/Deployments/DeploymentsIcon';
 import { DownloadIcon } from '../../icons/Download';
-import { DARK_TEAL } from '../../theme';
+import { DARK_TEAL, useTheme } from '../../theme';
 import { SNOW_WHITE } from '../../theme/colors/colors';
 import { CustomTooltip } from '../CustomTooltip';
+import { getVersion, handleImage } from './Helper';
 import {
   CardBack,
   CardFront,
@@ -37,7 +38,10 @@ export const DesignCardUrl = styled('a')(() => ({
   textDecoration: 'none'
 }));
 
-interface Pattern {
+export interface Pattern {
+  id: string;
+  user_id: string;
+  pattern_file: string;
   name: string;
   download_count: number;
   clone_count: number;
@@ -53,8 +57,10 @@ interface Pattern {
   };
   catalog_data?: {
     content_class?: string;
-    imageURL?: string;
+    imageURL?: string[];
     compatibility?: string[];
+    published_version?: string;
+    type?: string;
   };
   visibility: string;
   updated_at: Date;
@@ -63,21 +69,15 @@ interface Pattern {
 type CatalogCardProps = {
   pattern: Pattern;
   patternType: string;
-  cardLink: string;
   cardHeight: string;
   cardWidth: string;
   cardStyles: React.CSSProperties;
-  version?: string;
   avatarUrl: string;
   shouldFlip?: boolean;
   cardTechnologies?: boolean;
   isDetailed?: boolean;
-  cardAvatarUrl?: boolean;
-  date?: boolean;
-  cardVersion?: boolean;
   UserName?: string;
   children?: React.ReactNode; // catalogImage
-  TechnologyComponent?: React.ReactNode;
   basePath?: string; // path of meshmodel img stored
   subBasePath?: string; // path of meshmodel img stored
   getHostUrl?: () => string;
@@ -111,7 +111,6 @@ const CustomCatalogCard: React.FC<CatalogCardProps> = ({
   shouldFlip,
   isDetailed,
   cardTechnologies,
-  cardVersion,
   avatarUrl,
   UserName,
   children,
@@ -127,45 +126,13 @@ const CustomCatalogCard: React.FC<CatalogCardProps> = ({
   };
   const theme = useTheme();
 
-  const technologies = pattern.catalog_data?.compatibility || []; // an array
+  const technologies = pattern.catalog_data?.compatibility || [];
   const techlimit = 5;
   const [availableTechnologies, setAvailableTechnologies] = useState<string[]>([]);
-  const checkImageUrlValidity = async (url: string, appendHostUrl = true) => {
-    return new Promise((resolve) => {
-      const img = new Image();
-      // Only append host if the URL does not start with "http" or "https"
-      if (appendHostUrl && !url.startsWith('http')) {
-        img.src = (getHostUrl ? getHostUrl() : '') + url;
-      } else {
-        img.src = url;
-      }
-      img.onload = () => {
-        // Check if the image loaded successfully
-        resolve(true);
-      };
-
-      img.onerror = () => {
-        // Handle the case where the image could not be loaded
-        resolve(false);
-      };
-    });
-  };
-
-  const handleImage = async () => {
-    const validSvgPaths = [];
-    for (const technology of technologies) {
-      const svgIconPath = `${basePath}/${technology.toLowerCase()}/${subBasePath}/${technology.toLowerCase()}-color.svg`;
-      const isSvgPathValid = await checkImageUrlValidity(svgIconPath as string);
-      if (isSvgPathValid) {
-        validSvgPaths.push(technology);
-      }
-    }
-
-    setAvailableTechnologies(validSvgPaths);
-  };
+  const version = getVersion(pattern);
 
   useEffect(() => {
-    handleImage();
+    handleImage(technologies, basePath, subBasePath, setAvailableTechnologies);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
@@ -336,9 +303,9 @@ const CustomCatalogCard: React.FC<CatalogCardProps> = ({
                 </Grid>
               </DesignDetailsDiv>
             )}
-            {cardVersion && (
+            {version && (
               <VersionDiv>
-                <VersionText>v{cardVersion}</VersionText>
+                <VersionText>v{version}</VersionText>
               </VersionDiv>
             )}
           </CardBack>
diff --git a/src/custom/CustomCatalog/Helper.ts b/src/custom/CustomCatalog/Helper.ts
new file mode 100644
index 00000000..10bbc4e3
--- /dev/null
+++ b/src/custom/CustomCatalog/Helper.ts
@@ -0,0 +1,68 @@
+import jsyaml from 'js-yaml';
+import { Pattern } from './CustomCard';
+
+const checkImageUrlValidity = async (
+  url: string,
+  appendHostUrl = true,
+  getHostUrl?: () => string
+): Promise<boolean> => {
+  return new Promise((resolve) => {
+    const img = new Image();
+    // Only append host if the URL does not start with "http" or "https"
+    if (appendHostUrl && !url.startsWith('http')) {
+      img.src = (getHostUrl ? getHostUrl() : '') + url;
+    } else {
+      img.src = url;
+    }
+    img.onload = () => {
+      // Check if the image loaded successfully
+      resolve(true);
+    };
+
+    img.onerror = () => {
+      // Handle the case where the image could not be loaded
+      resolve(false);
+    };
+  });
+};
+
+const getValidSvgPaths = async (
+  technologies: string[],
+  basePath: string,
+  subBasePath: string
+): Promise<string[]> => {
+  const validSvgPaths: string[] = [];
+  for (const technology of technologies) {
+    const svgIconPath = `${basePath}/${technology.toLowerCase()}/${subBasePath}/${technology.toLowerCase()}-color.svg`;
+    const isSvgPathValid = await checkImageUrlValidity(svgIconPath as string);
+    if (isSvgPathValid) {
+      validSvgPaths.push(technology);
+    }
+  }
+  return validSvgPaths;
+};
+
+export const handleImage = async (
+  technologies: string[],
+  basePath: string = '',
+  subBasePath: string = '',
+  setAvailableTechnologies: (technologies: string[]) => void
+) => {
+  const validSvgPaths = await getValidSvgPaths(technologies, basePath, subBasePath);
+  setAvailableTechnologies(validSvgPaths);
+};
+
+export const DEFAULT_DESIGN_VERSION = '0.0.0';
+
+export const getVersion = (design: Pattern) => {
+  if (design.visibility === 'published') {
+    return design?.catalog_data?.published_version || DEFAULT_DESIGN_VERSION;
+  }
+  try {
+    const patternFile = jsyaml.load(design.pattern_file);
+    return patternFile?.version || DEFAULT_DESIGN_VERSION;
+  } catch (e) {
+    console.error(e);
+    return DEFAULT_DESIGN_VERSION;
+  }
+};

From 4bc1b009e0e47d52557341872c1efdad30ddb7fb Mon Sep 17 00:00:00 2001
From: Amit Amrutiya <amitamrutiya2210@gmail.com>
Date: Fri, 18 Oct 2024 10:14:51 +0530
Subject: [PATCH 4/4] chore: fix the useTheme name import from mui to sistent
 path

Signed-off-by: Amit Amrutiya <amitamrutiya2210@gmail.com>
---
 src/custom/CustomCatalog/EmptyStateCard.tsx                    | 2 +-
 .../CustomColumnVisibilityControl.tsx                          | 2 +-
 src/custom/Prompt/promt-component.tsx                          | 2 +-
 src/custom/SearchBar.tsx                                       | 3 ++-
 src/custom/Stepper/index.tsx                                   | 3 ++-
 src/custom/StyledSearchBar/StyledSearchBar.tsx                 | 3 ++-
 src/custom/UniversalFilter.tsx                                 | 2 +-
 7 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/src/custom/CustomCatalog/EmptyStateCard.tsx b/src/custom/CustomCatalog/EmptyStateCard.tsx
index 21d746a5..014b0a55 100644
--- a/src/custom/CustomCatalog/EmptyStateCard.tsx
+++ b/src/custom/CustomCatalog/EmptyStateCard.tsx
@@ -1,6 +1,6 @@
-import { useTheme } from '@mui/material';
 import { FC } from 'react';
 import { EmptyStyleIcon } from '../../icons/EmptyStyle';
+import { useTheme } from '../../theme';
 import { CatalogEmptyStateDiv } from './style';
 
 const EmptyStateCard: FC = () => {
diff --git a/src/custom/CustomColumnVisibilityControl/CustomColumnVisibilityControl.tsx b/src/custom/CustomColumnVisibilityControl/CustomColumnVisibilityControl.tsx
index faf61645..36bfc06b 100644
--- a/src/custom/CustomColumnVisibilityControl/CustomColumnVisibilityControl.tsx
+++ b/src/custom/CustomColumnVisibilityControl/CustomColumnVisibilityControl.tsx
@@ -1,4 +1,3 @@
-import { useTheme } from '@mui/material';
 import React from 'react';
 import { Box } from '../../base/Box';
 import { Card } from '../../base/Card';
@@ -6,6 +5,7 @@ import { Checkbox } from '../../base/Checkbox';
 import { ClickAwayListener } from '../../base/ClickAwayListener';
 import { FormControlLabel } from '../../base/FormControlLabel';
 import { ColumnIcon } from '../../icons';
+import { useTheme } from '../../theme';
 import PopperListener from '../PopperListener';
 import TooltipIcon from '../TooltipIcon';
 
diff --git a/src/custom/Prompt/promt-component.tsx b/src/custom/Prompt/promt-component.tsx
index 87130367..9d1cba78 100644
--- a/src/custom/Prompt/promt-component.tsx
+++ b/src/custom/Prompt/promt-component.tsx
@@ -1,6 +1,6 @@
-import { useTheme } from '@mui/material';
 import { forwardRef, useImperativeHandle, useRef, useState } from 'react';
 import { Typography } from '../../base';
+import { useTheme } from '../../theme';
 import { Modal, ModalBody, ModalButtonPrimary, ModalButtonSecondary, ModalFooter } from '../Modal';
 import { ActionComponent, Subtitle } from './style';
 
diff --git a/src/custom/SearchBar.tsx b/src/custom/SearchBar.tsx
index db72eaf4..8b7f2734 100644
--- a/src/custom/SearchBar.tsx
+++ b/src/custom/SearchBar.tsx
@@ -1,11 +1,12 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import { outlinedInputClasses } from '@mui/material/OutlinedInput';
-import { Theme, ThemeProvider, createTheme, useTheme } from '@mui/material/styles';
+import { Theme, ThemeProvider, createTheme } from '@mui/material/styles';
 import debounce from 'lodash/debounce';
 import React, { useCallback } from 'react';
 import { ClickAwayListener } from '../base/ClickAwayListener';
 import { TextField } from '../base/TextField';
 import { CloseIcon, SearchIcon } from '../icons';
+import { useTheme } from '../theme';
 import TooltipIcon from './TooltipIcon';
 
 const customTheme = (theme: Theme) =>
diff --git a/src/custom/Stepper/index.tsx b/src/custom/Stepper/index.tsx
index e993341d..5fd4107f 100644
--- a/src/custom/Stepper/index.tsx
+++ b/src/custom/Stepper/index.tsx
@@ -1,9 +1,10 @@
-import { Box, Stack, Step, StepConnector, StepLabel, Stepper, useTheme } from '@mui/material';
+import { Box, Stack, Step, StepConnector, StepLabel, Stepper } from '@mui/material';
 import { stepConnectorClasses } from '@mui/material/StepConnector';
 import { StepIconProps } from '@mui/material/StepIcon';
 import { styled } from '@mui/system';
 import React, { useMemo, useState } from 'react';
 import { IconProps } from '../../icons/types';
+import { useTheme } from '../../theme';
 
 interface ColorlibStepIconPropsI extends StepIconProps {
   icons: React.ComponentType<IconProps>[];
diff --git a/src/custom/StyledSearchBar/StyledSearchBar.tsx b/src/custom/StyledSearchBar/StyledSearchBar.tsx
index f3dcce72..165f72c2 100644
--- a/src/custom/StyledSearchBar/StyledSearchBar.tsx
+++ b/src/custom/StyledSearchBar/StyledSearchBar.tsx
@@ -1,8 +1,9 @@
-import { SxProps, Theme, useTheme } from '@mui/material';
+import { SxProps, Theme } from '@mui/material';
 import { debounce } from 'lodash';
 import React, { useCallback, useState } from 'react';
 import { InputAdornment } from '../../base';
 import { SearchIcon } from '../../icons';
+import { useTheme } from '../../theme';
 import { InputAdornmentEnd, StyledSearchInput } from './style';
 
 interface SearchBarProps {
diff --git a/src/custom/UniversalFilter.tsx b/src/custom/UniversalFilter.tsx
index 1df8dbab..02a8213f 100644
--- a/src/custom/UniversalFilter.tsx
+++ b/src/custom/UniversalFilter.tsx
@@ -1,4 +1,3 @@
-import { useTheme } from '@mui/material';
 import { SelectChangeEvent } from '@mui/material/Select';
 import React from 'react';
 import { Button } from '../base/Button';
@@ -8,6 +7,7 @@ import { MenuItem } from '../base/MenuItem';
 import { Paper } from '../base/Paper';
 import { Select } from '../base/Select';
 import { FilterIcon } from '../icons';
+import { useTheme } from '../theme';
 import PopperListener from './PopperListener';
 import TooltipIcon from './TooltipIcon';