From 4b2cabc6fff3060229dfa1a8022b8654bd20124b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jing=20Hui=20PANG=20=28=E5=BD=AD=E7=AB=9E=E8=BE=89=29?=
 <enkr99@gmail.com>
Date: Sun, 22 Mar 2026 02:56:25 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat(ui):=20add=20z-index=20Tailwin?=
 =?UTF-8?q?d=20tiers=20and=20migrate=20shared=20components=20(#5397)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../course/duplication/components/UnpublishedIcon.jsx     | 2 +-
 .../learning-map/components/ZoomActionElements/index.jsx  | 3 +--
 .../course/learning-map/containers/Dashboard/index.jsx    | 6 ++++--
 client/app/lib/components/core/LoadingOverlay.tsx         | 3 +--
 client/app/lib/components/core/NotificationBar.jsx        | 2 +-
 .../lib/components/core/dialogs/ConfirmationDialog.jsx    | 2 +-
 client/tailwind.config.ts                                 | 8 ++++++++
 7 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/client/app/bundles/course/duplication/components/UnpublishedIcon.jsx b/client/app/bundles/course/duplication/components/UnpublishedIcon.jsx
index d648d7aaf58..126a7c1e102 100644
--- a/client/app/bundles/course/duplication/components/UnpublishedIcon.jsx
+++ b/client/app/bundles/course/duplication/components/UnpublishedIcon.jsx
@@ -9,7 +9,6 @@ const styles = {
     marginRight: 3,
   },
   withTooltip: {
-    zIndex: 3,
     position: 'relative',
   },
 };
@@ -20,6 +19,7 @@ const UnpublishedIcon = ({ tooltipId }) => {
   }
   return (
     <Block
+      className="z-badge"
       data-tooltip-id={tooltipId}
       style={{ ...styles.unpublishedIcon, ...styles.withTooltip }}
     />
diff --git a/client/app/bundles/course/learning-map/components/ZoomActionElements/index.jsx b/client/app/bundles/course/learning-map/components/ZoomActionElements/index.jsx
index 70a157a60e0..e75e1ba53e3 100644
--- a/client/app/bundles/course/learning-map/components/ZoomActionElements/index.jsx
+++ b/client/app/bundles/course/learning-map/components/ZoomActionElements/index.jsx
@@ -16,7 +16,6 @@ const styles = {
     position: 'absolute',
     right: 20,
     width: '100%',
-    zIndex: 999,
   },
 };
 
@@ -24,7 +23,7 @@ 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"
diff --git a/client/app/bundles/course/learning-map/containers/Dashboard/index.jsx b/client/app/bundles/course/learning-map/containers/Dashboard/index.jsx
index 7c05e4cd8ce..5971cd48422 100644
--- a/client/app/bundles/course/learning-map/containers/Dashboard/index.jsx
+++ b/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,10 @@ 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()}
diff --git a/client/app/lib/components/core/LoadingOverlay.tsx b/client/app/lib/components/core/LoadingOverlay.tsx
index 6a4977b17d3..9e455e46fd3 100644
--- a/client/app/lib/components/core/LoadingOverlay.tsx
+++ b/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>
diff --git a/client/app/lib/components/core/NotificationBar.jsx b/client/app/lib/components/core/NotificationBar.jsx
index 6c09e096800..7d03f681553 100644
--- a/client/app/lib/components/core/NotificationBar.jsx
+++ b/client/app/lib/components/core/NotificationBar.jsx
@@ -46,6 +46,7 @@ const NotificationBar = (props) => {
     <Snackbar
       anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
       autoHideDuration={autoHideDuration}
+      className="z-modal"
       message={notificationNode}
       onClose={handleClose}
       open={open}
@@ -53,7 +54,6 @@ const NotificationBar = (props) => {
         height: 'auto',
         maxWidth: '100%',
         whiteSpace: 'pre-line',
-        zIndex: 9999,
       }}
       {...options}
     />
diff --git a/client/app/lib/components/core/dialogs/ConfirmationDialog.jsx b/client/app/lib/components/core/dialogs/ConfirmationDialog.jsx
index c3139ed2dec..77eaa7a4002 100644
--- a/client/app/lib/components/core/dialogs/ConfirmationDialog.jsx
+++ b/client/app/lib/components/core/dialogs/ConfirmationDialog.jsx
@@ -119,6 +119,7 @@ class ConfirmationDialog extends Component {
 
     return (
       <Dialog
+        className="z-modal"
         data-testid="ConfirmationDialog"
         disableEscapeKeyDown={disableCancelButton || disableConfirmButton}
         fullWidth
@@ -129,7 +130,6 @@ class ConfirmationDialog extends Component {
             : onCancel
         }
         open={open}
-        style={{ zIndex: 9999 }}
       >
         <DialogContent>
           <Typography variant="body2">{confirmationMessage}</Typography>
diff --git a/client/tailwind.config.ts b/client/tailwind.config.ts
index 154f67c44e9..1a0e5779dc2 100644
--- a/client/tailwind.config.ts
+++ b/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: {