feat: increase Snackbar z-index so it appears over chatbot icon

packages/web/package.json

@@ -7,6 +7,7 @@
     "@apollo/client": "^3.6.9",
     "@casl/ability": "^6.5.0",
     "@casl/react": "^3.1.0",
+    "@emotion/css": "^11.11.2",
     "@emotion/react": "^11.4.1",
     "@emotion/styled": "^11.3.0",
     "@hookform/resolvers": "^2.8.8",

packages/web/src/components/SnackbarProvider/index.jsx

@@ -1,6 +1,13 @@
 import * as React from 'react';
 import { SnackbarProvider as BaseSnackbarProvider } from 'notistack';
+import { css } from '@emotion/css';
+
 const SnackbarProvider = (props) => {
+  const classes = {
+    zIndexOverwrite: css({
+      zIndex: 2200000000,
+    }),
+  };
   return (
     <BaseSnackbarProvider
       {...props}
@@ -9,6 +16,7 @@ const SnackbarProvider = (props) => {
         horizontal: 'right',
       }}
       dense
+      classes={{ containerRoot: classes.zIndexOverwrite }}
     />
   );
 };

packages/web/src/index.jsx

@@ -24,7 +24,6 @@ root.render(
               <ThemeProvider>
                 <MetadataProvider>
                   {routes}
-
                   <LiveChat />
                 </MetadataProvider>
               </ThemeProvider>

packages/web/src/styles/theme.js

@@ -159,6 +159,10 @@ export const defaultTheme = createTheme({
       },
     },
   },
+  zIndex: {
+    // z-index must be bigger than chatbot's icon
+    snackbar: 2200000000,
+  },
   components: {
     MuiAppBar: {
       styleOverrides: {
@@ -297,6 +301,6 @@ export const mationTheme = createTheme(
         },
       },
     },
-  })
+  }),
 );
 export default defaultTheme;