first

src/components/third-party/Notistack.js

@@ -0,0 +1,65 @@
+import PropTypes from 'prop-types';
+
+//material-ui
+import { styled } from '@mui/material/styles';
+
+// third-party
+import { SnackbarProvider } from 'notistack';
+
+// project import
+import { useSelector } from 'store';
+
+// assets
+import { CheckCircleOutlined, CloseCircleOutlined, InfoCircleOutlined, WarningOutlined } from '@ant-design/icons';
+
+// custom styles
+const StyledSnackbarProvider = styled(SnackbarProvider)(({ theme }) => ({
+  '&.notistack-MuiContent-default': {
+    backgroundColor: theme.palette.primary.main
+  },
+  '&.notistack-MuiContent-error': {
+    backgroundColor: theme.palette.error.main
+  },
+  '&.notistack-MuiContent-success': {
+    backgroundColor: theme.palette.success.main
+  },
+  '&.notistack-MuiContent-info': {
+    backgroundColor: theme.palette.info.main
+  },
+  '&.notistack-MuiContent-warning': {
+    backgroundColor: theme.palette.warning.main
+  }
+}));
+
+// ===========================|| SNACKBAR - NOTISTACK ||=========================== //
+
+const Notistack = ({ children }) => {
+  const snackbar = useSelector((state) => state.snackbar);
+  const iconSX = { marginRight: 8, fontSize: '1.15rem' };
+
+  return (
+    <StyledSnackbarProvider
+      maxSnack={snackbar.maxStack}
+      dense={snackbar.dense}
+      iconVariant={
+        snackbar.iconVariant === 'useemojis'
+          ? {
+              success: <CheckCircleOutlined style={iconSX} />,
+              error: <CloseCircleOutlined style={iconSX} />,
+              warning: <WarningOutlined style={iconSX} />,
+              info: <InfoCircleOutlined style={iconSX} />
+            }
+          : undefined
+      }
+      hideIconVariant={snackbar.iconVariant === 'hide' ? true : false}
+    >
+      {children}
+    </StyledSnackbarProvider>
+  );
+};
+
+Notistack.propTypes = {
+  children: PropTypes.node
+};
+
+export default Notistack;

src/components/third-party/SimpleBar.js

@@ -0,0 +1,62 @@
+import PropTypes from 'prop-types';
+
+// material-ui
+import { alpha, styled } from '@mui/material/styles';
+import { Box } from '@mui/material';
+
+// third-party
+import SimpleBar from 'simplebar-react';
+import { BrowserView, MobileView } from 'react-device-detect';
+
+// root style
+const RootStyle = styled(BrowserView)({
+  flexGrow: 1,
+  height: '100%',
+  overflow: 'hidden'
+});
+
+// scroll bar wrapper
+const SimpleBarStyle = styled(SimpleBar)(({ theme }) => ({
+  maxHeight: '100%',
+  '& .simplebar-scrollbar': {
+    '&:before': {
+      backgroundColor: alpha(theme.palette.grey[500], 0.48)
+    },
+    '&.simplebar-visible:before': {
+      opacity: 1
+    }
+  },
+  '& .simplebar-track.simplebar-vertical': {
+    width: 10
+  },
+  '& .simplebar-track.simplebar-horizontal .simplebar-scrollbar': {
+    height: 6
+  },
+  '& .simplebar-mask': {
+    zIndex: 'inherit'
+  }
+}));
+
+// ==============================|| SIMPLE SCROLL BAR  ||============================== //
+
+export default function SimpleBarScroll({ children, sx, ...other }) {
+  return (
+    <>
+      <RootStyle>
+        <SimpleBarStyle clickOnTrack={false} sx={sx} {...other}>
+          {children}
+        </SimpleBarStyle>
+      </RootStyle>
+      <MobileView>
+        <Box sx={{ overflowX: 'auto', ...sx }} {...other}>
+          {children}
+        </Box>
+      </MobileView>
+    </>
+  );
+}
+
+SimpleBarScroll.propTypes = {
+  children: PropTypes.node,
+  sx: PropTypes.object
+};