feat(ui): z-index mini framework via Tailwind custom tiers

client/app/bundles/course/duplication/components/UnpublishedIcon.jsx

@@ -9,7 +9,6 @@ const styles = {
     marginRight: 3,
   },
   withTooltip: {
-    zIndex: 3,
     position: 'relative',
   },
 };
@@ -21,6 +20,7 @@ const UnpublishedIcon = ({ tooltipId }) => {
   return (
     <Block
       data-tooltip-id={tooltipId}
+      className="z-badge"
       style={{ ...styles.unpublishedIcon, ...styles.withTooltip }}
     />
   );

client/app/bundles/course/learning-map/components/ZoomActionElements/index.jsx

@@ -16,15 +16,14 @@ const styles = {
     position: 'absolute',
     right: 20,
     width: '100%',
-    zIndex: 999,
   },
 };
 
 const ZoomActionElements = (props) => {
   const { zoomIn, zoomOut } = props;
 
   return (
-    <div style={styles.wrapper}>
+    <div className="z-dropdown" style={styles.wrapper}>
       <Button
         className="btn-submit"
         color="primary"

client/app/bundles/course/learning-map/containers/Dashboard/index.jsx

@@ -43,7 +43,6 @@ const styles = {
     bottom: 0,
     position: 'sticky',
     textAlign: 'center',
-    zIndex: 999,
   },
 };
 
@@ -204,7 +203,7 @@ const Dashboard = (props) => {
 
   return (
     <>
-      <Card style={{ ...styles.wrapper, backgroundColor: color }}>
+      <Card className="z-dropdown" style={{ ...styles.wrapper, backgroundColor: color }}>
         <CardContent style={styles.content}>
           {text}
           {getActionElements()}

client/app/lib/components/core/LoadingOverlay.tsx

@@ -9,7 +9,6 @@ const styles = {
     position: 'absolute',
     top: 0,
     left: 0,
-    zIndex: 110,
     display: 'flex',
     width: '100%',
     height: '100%',
@@ -22,7 +21,7 @@ const styles = {
 
 const LoaderOverlay = (): JSX.Element => {
   return (
-    <Box sx={styles.overlay}>
+    <Box className="z-overlay" sx={styles.overlay}>
       <Box style={styles.progressContainer}>
         <LoadingIndicator />
       </Box>

client/app/lib/components/core/NotificationBar.jsx

@@ -49,11 +49,11 @@ const NotificationBar = (props) => {
       message={notificationNode}
       onClose={handleClose}
       open={open}
+      className="z-modal"
       style={{
         height: 'auto',
         maxWidth: '100%',
         whiteSpace: 'pre-line',
-        zIndex: 9999,
       }}
       {...options}
     />

client/app/lib/components/core/dialogs/ConfirmationDialog.jsx

@@ -128,8 +128,8 @@ class ConfirmationDialog extends Component {
             ? handleDialogClose
             : onCancel
         }
+        className="z-modal"
         open={open}
-        style={{ zIndex: 9999 }}
       >
         <DialogContent>
           <Typography variant="body2">{confirmationMessage}</Typography>

client/tailwind.config.ts

@@ -47,6 +47,14 @@ export default {
         warning: palette.warning.main,
         info: palette.info.main,
       },
+      zIndex: {
+        base: '1',
+        badge: '3',
+        sticky: '100',
+        overlay: '110',
+        dropdown: '1000',
+        modal: '9999',
+      },
     },
   },
   corePlugins: {