From 6870cf5269887daf457e416aee55210e952fa6eb Mon Sep 17 00:00:00 2001
From: Huyen Nguyen <25715018+huyenltnguyen@users.noreply.github.com>
Date: Fri, 22 Mar 2024 10:27:51 +0700
Subject: [PATCH] fix(client, ui-components): modal and close button
 discrepancies (#54139)

Co-authored-by: sembauke <semboot699@gmail.com>
---
 client/src/components/layouts/global.css |  9 +++++++++
 tools/ui-components/src/modal/modal.tsx  | 10 +++++++---
 tools/ui-components/src/modal/types.ts   | 10 ++++++++++
 tools/ui-components/tailwind.config.js   |  2 +-
 4 files changed, 27 insertions(+), 4 deletions(-)

diff --git a/client/src/components/layouts/global.css b/client/src/components/layouts/global.css
index 42cc0eceff2..6e5cd2d3bea 100644
--- a/client/src/components/layouts/global.css
+++ b/client/src/components/layouts/global.css
@@ -1,3 +1,12 @@
+*,
+::before,
+::after {
+  /* Override the browser default border width in order to style individual border sides
+   * Ref: https://stackoverflow.com/a/76961084
+   */
+  border-width: 0;
+}
+
 html {
   height: 100%;
   font-size: 18px;
diff --git a/tools/ui-components/src/modal/modal.tsx b/tools/ui-components/src/modal/modal.tsx
index fc9d4ce719f..dca4d5aa0a0 100644
--- a/tools/ui-components/src/modal/modal.tsx
+++ b/tools/ui-components/src/modal/modal.tsx
@@ -26,7 +26,11 @@ const ModalContext = createContext<Pick<ModalProps, 'onClose' | 'variant'>>({
   variant: 'default'
 });
 
-const Header = ({ children, showCloseButton = true }: HeaderProps) => {
+const Header = ({
+  children,
+  showCloseButton = true,
+  closeButtonClassNames
+}: HeaderProps) => {
   const { onClose, variant } = useContext(ModalContext);
 
   let classes = HEADER_DEFAULT_CLASSES;
@@ -45,7 +49,7 @@ const Header = ({ children, showCloseButton = true }: HeaderProps) => {
         >
           {children}
         </Dialog.Title>
-        <CloseButton onClick={onClose} />
+        <CloseButton onClick={onClose} className={closeButtonClassNames} />
       </div>
     );
   }
@@ -95,7 +99,7 @@ const Modal = ({
   return (
     <ModalContext.Provider value={{ onClose, variant }}>
       <Transition.Root show={open} as={Fragment}>
-        <Dialog onClose={onClose} className='relative z-50'>
+        <Dialog onClose={onClose} className='relative z-1050'>
           {/* The backdrop, rendered as a fixed sibling to the panel container */}
           <div aria-hidden className='fixed inset-0 bg-gray-900 opacity-50' />
 
diff --git a/tools/ui-components/src/modal/types.ts b/tools/ui-components/src/modal/types.ts
index 853368649c4..4e24d30d013 100644
--- a/tools/ui-components/src/modal/types.ts
+++ b/tools/ui-components/src/modal/types.ts
@@ -11,4 +11,14 @@ export interface ModalProps {
 export interface HeaderProps {
   children: ReactNode;
   showCloseButton?: boolean;
+  /**
+   * /learn uses the `button` selector to override Bootstrap button styles,
+   * and the selector also affects `ui-components`.
+   * We need to forward the class specific to the close button from /learn
+   * in order for the button to display properly.
+   * Ref: https://github.com/freeCodeCamp/freeCodeCamp/blob/c1137b0900ad098fee2fca430d11f69dfc909d3b/client/src/components/layouts/global.css#L179-L192
+   * NOTE: This prop is temporary and should be removed once we remove all CSS overrides from /learn.
+   * Tracking issue: https://github.com/freeCodeCamp/freeCodeCamp/issues/52715
+   */
+  closeButtonClassNames?: string;
 }
diff --git a/tools/ui-components/tailwind.config.js b/tools/ui-components/tailwind.config.js
index 7adeb9f2373..de6c770f0cd 100644
--- a/tools/ui-components/tailwind.config.js
+++ b/tools/ui-components/tailwind.config.js
@@ -99,7 +99,7 @@ module.exports = {
       },
       zIndex: {
         2: '2',
-        50: '50'
+        1050: '1050'
       }
     }
   },