fix: darkmode and smaller screen issues

package.json

@@ -2,7 +2,7 @@
   "name": "zesty-website",
   "author": "Zesty.io Platform Inc.",
   "email": "marketing@zesty.io",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "private": true,
   "scripts": {
     "dev": "NODE_OPTIONS='--inspect' next dev",

src/components/console/DocsAppbar.js

@@ -73,7 +73,9 @@ export const DocsAppbar = React.memo(() => {
   const instanceZUID = getCookie('ZESTY_WORKING_INSTANCE') || workingInstance;
   const theme = useTheme();
   const isDarkMode = theme.palette.mode === 'dark';
-  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
+  const isMobile = useMediaQuery(theme.breakpoints.down('md'));
+  const isLG = useMediaQuery(theme.breakpoints.up('lg'));
+  const isXL = useMediaQuery(theme.breakpoints.up('xl'));
 
   const onChangeDropdown = (data) => {
     let category = data.label;
@@ -121,13 +123,17 @@ export const DocsAppbar = React.memo(() => {
 
   const isTourTabVisible = currentURL.includes('/docs/parsley');
 
-  React.useEffect(async () => {
-    const res = await ZestyAPI.getModels(instanceZUID);
-    if (res.status === 200) {
-      setcontentModels(res.data);
-    } else {
-      setcontentModels([]);
-    }
+  React.useEffect(() => {
+    const getModels = async () => {
+      const res = await ZestyAPI.getModels(instanceZUID);
+      if (res.status === 200) {
+        setcontentModels(res.data);
+      } else {
+        setcontentModels([]);
+      }
+    };
+
+    getModels();
   }, [workingInstance]);
 
   const isApiReference = router.asPath.includes('api-reference');
@@ -138,6 +144,15 @@ export const DocsAppbar = React.memo(() => {
   const isTour = router.asPath.includes('/tour');
   const isGuides = !isApiReference && !isTour;
 
+  const showSearchModal = () => {
+    if (isLoggedIn) {
+      if (isXL) return true;
+    } else {
+      if (isXL) return true;
+    }
+    return false;
+  };
+
   useEffect(() => {
     const routeCategory = router.asPath.split('/').filter((e) => e)[1];
     setSelectedDocsCategory(docsCategory || routeCategory);
@@ -149,26 +164,31 @@ export const DocsAppbar = React.memo(() => {
       alignItems="center"
       justifyContent={'space-between'}
       sx={{
-        px: 2,
+        px: 3,
         py: 1,
         alignItems: isMobile ? 'left' : 'center',
         borderTop: isDarkMode ? ' ' : `1px solid ${grey[200]}`,
         bgcolor: '#fff',
         background: isDarkMode ? theme.palette.zesty.zestyDarkBlue : 'white',
       }}
     >
-      <Stack pt={1} direction={isMobile ? 'column' : 'row'} spacing={2}>
+      <Stack
+        pt={1}
+        direction={isMobile ? 'column' : 'row'}
+        width="100%"
+        spacing={2}
+      >
         <DocsComboBox
           value={selectedDocsCategory}
-          width={isMobile ? 330 : 400}
+          width={!isLG ? '100%' : '400px'}
           onChange={onChangeDropdown}
           options={DOCS_DATA_DROPDOWN()}
         />
         <Stack
           display={'flex'}
           justifyContent={'center'}
           justifyItems={'center'}
-          width={1}
+          width={'100%'}
         >
           <Breadcrumbs
             sx={{
@@ -186,7 +206,8 @@ export const DocsAppbar = React.memo(() => {
         </Stack>
         <Stack
           direction={'row'}
-          bgcolor={'#fff'}
+          // bgcolor={theme.palette.mode === 'dark' ? 'transparent' : '#fff'}
+          width="100%"
           display={isMobile ? 'none' : 'flex'}
         >
           <Button
@@ -203,7 +224,6 @@ export const DocsAppbar = React.memo(() => {
           </Button>
           <Button
             data-testid="api-reference-link"
-            fullWidth
             variant="text"
             color="secondary"
             href={`/docs/${selectedDocsCategory}/api-reference`}
@@ -236,8 +256,15 @@ export const DocsAppbar = React.memo(() => {
       </Stack>
       <Stack direction={'row'} alignItems={'center'} spacing={2}>
         {isApiReference && !isMobile && (
-          <Stack direction={'row'} spacing={1} alignItems="center">
-            <Typography color={'black'}>Language:</Typography>{' '}
+          <Stack
+            direction={'row'}
+            spacing={1}
+            alignItems="center"
+            display={contentModels?.length > 0 && !isXL ? 'none' : 'flex'}
+          >
+            <Typography variant="p" color="text.primary">
+              Language:
+            </Typography>{' '}
             <DocsPopover
               value={language}
               setvalue={setlanguage}
@@ -275,11 +302,14 @@ export const DocsAppbar = React.memo(() => {
             }
           />
         )}
-        {!isMobile && (
-          <Box sx={{ pr: 6, mt: 6 }}>
-            <DocSearchModal />
-          </Box>
-        )}
+        <Box
+          sx={{
+            mt: 6,
+            display: showSearchModal() ? 'block' : 'none',
+          }}
+        >
+          <DocSearchModal />
+        </Box>
       </Stack>
     </Stack>
   );

src/components/globals/TableOfContent.js

@@ -25,7 +25,12 @@ const Main = ({ data, title = '' }) => {
 
   return (
     <Stack height={1} width={1} data-testid="table-of-contents">
-      <Typography variant="button" color={'black'} fontWeight={700} pl={'20px'}>
+      <Typography
+        variant="button"
+        color="text.primary"
+        fontWeight={700}
+        pl={'20px'}
+      >
         On this Page
       </Typography>
       <Stack px={0}>

src/components/markdown-styling/ZestyMarkdownParser.js

@@ -2,6 +2,7 @@ import React from 'react';
 import remarkGfm from 'remark-gfm';
 
 import dynamic from 'next/dynamic';
+import { Table, Typography, useTheme } from '@mui/material';
 
 const ReactMarkdown = dynamic(() => import('react-markdown'));
 const MDBlockquote = dynamic(() =>
@@ -26,13 +27,90 @@ export const ZestyMarkdownParser = ({
   productGlossary,
   isDocs = false,
 }) => {
+  const theme = useTheme();
+  const styles = {
+    p(props) {
+      const { ...rest } = props;
+      return (
+        <Typography
+          {...rest}
+          sx={(theme) => ({
+            '& > code': {
+              backgroundColor:
+                theme.palette.mode === 'dark' ? 'darkblue' : '#F5F7F9',
+            },
+          })}
+        />
+      );
+    },
+
+    table(props) {
+      const { ...rest } = props;
+      return (
+        <Table
+          {...rest}
+          sx={(theme) => ({
+            overflowX: 'auto',
+            display: 'block',
+            height: 'auto !important',
+            width: '100% !important',
+            mt: '20px',
+            '& img, span': {
+              mt: '0px !important',
+              objectFit: 'contain',
+              height: '240px',
+            },
+            '& span': {
+              mt: '0px !important',
+              maxWidth: 'auto !important',
+            },
+            '& p': {
+              width: 'auto',
+            },
+            '& tr': {
+              bgcolor: 'transparent !important',
+            },
+            '& td': {
+              color: theme.palette.mode === 'dark' ? 'white' : 'text.primary',
+            },
+          })}
+        />
+      );
+    },
+    code(props) {
+      const { ...rest } = props;
+      return (
+        <code
+          {...rest}
+          style={{
+            backgroundColor:
+              theme.palette.mode === 'dark' ? 'darkblue' : '#F5F7F9',
+          }}
+        />
+      );
+    },
+    blockquote(props) {
+      const { ...rest } = props;
+      return (
+        <blockquote
+          {...rest}
+          style={{
+            backgroundColor:
+              theme.palette.mode === 'dark' ? 'darkblue' : '#F5F7F9',
+          }}
+        />
+      );
+    },
+  };
+
   const docsComponents = {
     img: (props) => <MDImage {...props} floatRight={false} isDocs={true} />,
     h1: MDH1,
     h2: MDH2,
     h3: MDH3,
     h4: MDH4,
     pre: MDCodeBlock,
+    ...styles,
   };
 
   const components = {
@@ -49,7 +127,9 @@ export const ZestyMarkdownParser = ({
     h2: MDH2,
     h3: MDH3,
     pre: MDCodeBlock,
+    ...styles,
   };
+
   return (
     <ReactMarkdown
       className="markdown-body"

src/revamp/ui/GetDemoSection/index.js

@@ -16,6 +16,7 @@ import { MultiFieldForm } from './MultiFieldForm';
 import getLastVisitedPathAndUrl from 'revamp/utils/getLastVisitedPathAndUrl';
 import { generateAlt } from 'utils';
 import useGetDynamicData from './useGetDynamicData';
+import { useRouter } from 'next/router';
 
 const acorns =
     'https://storage.googleapis.com/assets.zesty.io/website/images/assets/demo/Acorns%20Logo.svg',
@@ -39,6 +40,7 @@ const GetDemoSection = ({
   isContact = false,
   formTitle = 'Enter your details to connect with a Content Expert',
 }) => {
+  const router = useRouter();
   const { lastVisitedPath, lastVisitedURL } = getLastVisitedPathAndUrl();
   const { data } = useGetDynamicData();
   let inquiryReasons = [
@@ -50,6 +52,13 @@ const GetDemoSection = ({
     'Press Relations',
   ];
 
+  const getLeadSourceDetail = () => {
+    if (router.asPath.includes('contact')) return 'Contact Us';
+    if (router.asPath.includes('demo')) return 'Demo Sign Up';
+
+    return 'Get a Talk to Us';
+  };
+
   const onSubmit = async (values) => {
     if (values.firstName === '') {
       values.firstName = 'Unknown';
@@ -60,9 +69,9 @@ const GetDemoSection = ({
     let payload = getLeadObjectZOHO(
       values,
       values?.inquiryReason,
-      'Demo Sign Up',
+      getLeadSourceDetail(),
       '',
-      '', // leadsource
+      'Website', // leadsource
       lastVisitedPath,
       lastVisitedURL,
     );