Merge pull request #767 from zesty-io/marketplace-updates

Marketplace updates

Author: ardeay

src/components/marketplace/landing/MainCard.js

@@ -146,7 +146,7 @@ const MainCard = ({
                   component="p"
                 >
                   {meta_description ||
-                    meta.web.seo_meta_description ||
+                    meta?.web.seo_meta_description ||
                     FillerContent.description}
                 </Typography>
 

src/views/marketplace/Extension.js

@@ -111,6 +111,7 @@ const InstallButton = ({ data, theme }) => {
 const Extension = (props) => {
   const theme = useTheme();
   const isSM = useMediaQuery(theme.breakpoints.down('md'));
+  const isDarkMode = theme.palette.mode === 'dark';
 
   const links = [
     {
@@ -247,7 +248,7 @@ const Extension = (props) => {
               </Box>
             </Box>
           </Grid>
-          <Grid item sm={12} md={4}>
+          <Grid sx={{ width: '100%' }} item sm={12} md={4}>
             <Box>
               <InstallButton data={props} theme={theme} />
               <Box
@@ -256,7 +257,11 @@ const Extension = (props) => {
                   display: 'flex',
                   flexDirection: 'column',
                   gap: 4,
-                  border: `1px solid ${theme.palette.common.grey}`,
+                  border: `1px solid ${
+                    isDarkMode
+                      ? theme.palette.common.white
+                      : theme.palette.common.grey
+                  }`,
                   borderRadius: 2,
                   background: theme.palette.background.paper,
                   mt: 2,
@@ -315,7 +320,11 @@ const Extension = (props) => {
                   p: 5,
                   display: 'flex',
                   flexDirection: 'column',
-                  border: `1px solid ${theme.palette.common.grey}`,
+                  border: `1px solid ${
+                    isDarkMode
+                      ? theme.palette.common.white
+                      : theme.palette.common.grey
+                  }`,
                   borderRadius: 2,
                   background: theme.palette.background.paper,
                   mt: 2,
@@ -364,7 +373,11 @@ const Extension = (props) => {
                   p: 5,
                   display: 'flex',
                   flexDirection: 'column',
-                  border: `1px solid ${theme.palette.common.grey}`,
+                  border: `1px solid ${
+                    isDarkMode
+                      ? theme.palette.common.white
+                      : theme.palette.common.grey
+                  }`,
                   borderRadius: 2,
                   background: theme.palette.background.paper,
                   mt: 2,