Fixing the AlertDialogPortal dark mode (#470)

Author: impirios

src/components/ui/AlertDialog/contexts/AlertDialogContext.tsx

@@ -1,5 +1,15 @@
-import { createContext } from 'react';
+import { createContext } from "react";
 
-export const AlertDialogContext = createContext({
+type AlertDialogContextType = {
+  isOpen: boolean;
+  handleOpenChange: (open: boolean) => void;
+  rootClass: string;
+  handleOverlayClick: () => void;
+};
 
+export const AlertDialogContext = createContext<AlertDialogContextType>({
+  isOpen: false,
+  handleOpenChange: () => {},
+  rootClass: "",
+  handleOverlayClick: () => {},
 });

src/components/ui/AlertDialog/shards/AlertDialogPortal.tsx

@@ -1,16 +1,35 @@
-import React from 'react';
-import Floater from '~/core/primitives/Floater';
+import React, { useContext } from "react";
+import Floater from "~/core/primitives/Floater";
+import { AlertDialogContext } from "../contexts/AlertDialogContext";
 
 export type AlertDialogPortalProps = {
-    children: React.ReactNode;
-}
+  children: React.ReactNode;
+};
+
+const AlertDialogPortal = ({ children }: AlertDialogPortalProps) => {
+  const { rootClass } = useContext(AlertDialogContext);
+  const rootElement = document.getElementsByClassName(
+    rootClass
+  )[0] as HTMLElement | null;
 
-const AlertDialogPortal = ({ children } : AlertDialogPortalProps) => {
-    return (
-        <Floater.Portal>
-            {children}
-        </Floater.Portal>
-    );
+  return (
+    <Floater.Portal
+      root={
+        rootElement ||
+        (() => {
+          if (process.env.NODE_ENV === "development") {
+            console.warn(
+              `AlertDialog: No element found with class "${rootClass}". ` +
+                "Falling back to document.body. Dark mode styling may not work correctly."
+            );
+          }
+          return document.body;
+        })()
+      }
+    >
+      {children}
+    </Floater.Portal>
+  );
 };
 
 export default AlertDialogPortal;

src/components/ui/AlertDialog/shards/AlertDialogRoot.tsx

@@ -14,7 +14,7 @@ export type AlertDialogRootProps = {
 
 const COMPONENT_NAME = 'AlertDialog';
 
-const AlertDialogRoot = ({ children, customRootClass = '', open, onOpenChange, onClickOutside } : AlertDialogRootProps) => {
+const AlertDialogRoot = ({ children, customRootClass = '', open, onOpenChange, onClickOutside=()=>{} } : AlertDialogRootProps) => {
     const { context: floaterContext } = Floater.useFloating();
     const rootClass = customClassSwitcher(customRootClass, COMPONENT_NAME);
     const [isOpen, setIsOpen] = useState(open);
@@ -31,7 +31,7 @@ const AlertDialogRoot = ({ children, customRootClass = '', open, onOpenChange, o
     const props = { isOpen, handleOpenChange, floaterContext, rootClass, handleOverlayClick };
     return (
         <AlertDialogContext.Provider value={props}>
-            <div className={rootClass}>
+            <div className={rootClass} >
                 {children}
             </div>
         </AlertDialogContext.Provider>

styles/themes/components/alert-dialog.scss

@@ -1,19 +1,19 @@
-.rad-ui-alert-dialog-overlay {  
-        z-index: 50;
-        background-color: rgba(0, 0, 0, 0.8);
+.rad-ui-alert-dialog-overlay {
+  z-index: 50;
+  background-color: rgba(0, 0, 0, 0.8);
 }
 
 .rad-ui-alert-dialog-content {
-    padding: 16px;
-    border-radius: 8px;
-    background-color: white;
-    color: black;
-   width: 100%;
-   max-width: 800px;
-   margin: 10px auto;
-   position: fixed;
-   left: 50%;
-   top: 50%;
-   transform: translate(-50%, -50%);
-   z-index: 50;
+  padding: 16px;
+  border-radius: 8px;
+  background-color: var(--rad-ui-color-red-1000);
+  color: var(--rad-ui-color-gray-50);
+  width: 100%;
+  max-width: 800px;
+  margin: 10px auto;
+  position: fixed;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 50;
 }