fix(client, ui-components): modal and close button discrepancies (#54139)

Co-authored-by: sembauke <semboot699@gmail.com>

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;

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' />
 

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;
 }

tools/ui-components/tailwind.config.js

@@ -99,7 +99,7 @@ module.exports = {
       },
       zIndex: {
         2: '2',
-        50: '50'
+        1050: '1050'
       }
     }
   },