@oneuptime/common 11.4.0 → 11.5.0

package/UI/Components/Label/Label.tsx

@@ -1,7 +1,7 @@
 import React, { CSSProperties, FunctionComponent, ReactElement } from "react";
 import LabelModel from "../../../Models/DatabaseModels/Label";
 import Pill, { ComponentProps as PillProps, PillSize } from "../Pill/Pill";
-import { Black } from "../../../Types/BrandColors";
+import { Gray500 } from "../../../Types/BrandColors";
 import Color from "../../../Types/Color";
 import IconProp from "../../../Types/Icon/IconProp";
 
@@ -19,7 +19,7 @@ const LabelElement: FunctionComponent<ComponentProps> = (
 
   const resolveColor: Color = (() => {
     if (!label.color) {
-      return Black;
+      return Gray500;
     }
 
     if (typeof label.color === "string") {

package/UI/Components/LogsViewer/components/LogsAnalyticsView.tsx

@@ -654,21 +654,27 @@ const LogsAnalyticsView: FunctionComponent<LogsAnalyticsViewProps> = (
                 </defs>
                 <CartesianGrid
                   strokeDasharray="none"
-                  stroke="#f1f5f9"
+                  stroke="var(--ou-chart-grid, #f1f5f9)"
                   vertical={false}
                 />
                 <XAxis
                   dataKey="time"
                   tickFormatter={formatTickTime}
-                  tick={{ fontSize: 11, fill: "#94a3b8" }}
-                  axisLine={{ stroke: "#e2e8f0" }}
+                  tick={{
+                    fontSize: 11,
+                    fill: "var(--ou-chart-tick, #94a3b8)",
+                  }}
+                  axisLine={{ stroke: "var(--ou-chart-grid, #e2e8f0)" }}
                   tickLine={false}
                   minTickGap={50}
                   interval="preserveStartEnd"
                   dy={8}
                 />
                 <YAxis
-                  tick={{ fontSize: 11, fill: "#94a3b8" }}
+                  tick={{
+                    fontSize: 11,
+                    fill: "var(--ou-chart-tick, #94a3b8)",
+                  }}
                   axisLine={false}
                   tickLine={false}
                   width={52}
@@ -678,7 +684,7 @@ const LogsAnalyticsView: FunctionComponent<LogsAnalyticsViewProps> = (
                 <Tooltip
                   content={<AnalyticsTooltip />}
                   cursor={{
-                    stroke: "#c7d2fe",
+                    stroke: "var(--ou-accent-muted, #c7d2fe)",
                     strokeWidth: 1,
                     strokeDasharray: "4 4",
                   }}
@@ -692,7 +698,7 @@ const LogsAnalyticsView: FunctionComponent<LogsAnalyticsViewProps> = (
                   activeDot={{
                     r: 4,
                     fill: CHART_COLORS[0]!,
-                    stroke: "#fff",
+                    stroke: "var(--ou-chart-marker-ring, #ffffff)",
                     strokeWidth: 2,
                   }}
                   isAnimationActive={false}
@@ -707,21 +713,27 @@ const LogsAnalyticsView: FunctionComponent<LogsAnalyticsViewProps> = (
               >
                 <CartesianGrid
                   strokeDasharray="none"
-                  stroke="#f1f5f9"
+                  stroke="var(--ou-chart-grid, #f1f5f9)"
                   vertical={false}
                 />
                 <XAxis
                   dataKey="time"
                   tickFormatter={formatTickTime}
-                  tick={{ fontSize: 11, fill: "#94a3b8" }}
-                  axisLine={{ stroke: "#e2e8f0" }}
+                  tick={{
+                    fontSize: 11,
+                    fill: "var(--ou-chart-tick, #94a3b8)",
+                  }}
+                  axisLine={{ stroke: "var(--ou-chart-grid, #e2e8f0)" }}
                   tickLine={false}
                   minTickGap={50}
                   interval="preserveStartEnd"
                   dy={8}
                 />
                 <YAxis
-                  tick={{ fontSize: 11, fill: "#94a3b8" }}
+                  tick={{
+                    fontSize: 11,
+                    fill: "var(--ou-chart-tick, #94a3b8)",
+                  }}
                   axisLine={false}
                   tickLine={false}
                   width={52}

package/UI/Components/LogsViewer/components/LogsHistogram.tsx

@@ -216,15 +216,21 @@ const LogsHistogram: FunctionComponent<LogsHistogramProps> = (
             <XAxis
               dataKey="time"
               tickFormatter={formatTickTime}
-              tick={{ fontSize: 10, fill: "#9ca3af" }}
-              axisLine={{ stroke: "#e5e7eb" }}
+              tick={{
+                fontSize: 10,
+                fill: "var(--ou-chart-tick, #9ca3af)",
+              }}
+              axisLine={{ stroke: "var(--ou-chart-grid, #e5e7eb)" }}
               tickLine={false}
               minTickGap={40}
               dy={4}
               interval="preserveStartEnd"
             />
             <YAxis
-              tick={{ fontSize: 10, fill: "#9ca3af" }}
+              tick={{
+                fontSize: 10,
+                fill: "var(--ou-chart-tick, #9ca3af)",
+              }}
               axisLine={false}
               tickLine={false}
               width={48}

package/UI/Components/Markdown.tsx/MarkdownEditor.tsx

@@ -901,17 +901,17 @@ const MarkdownEditor: FunctionComponent<ComponentProps> = (
         .oneuptime-wysiwyg ol { list-style-type: decimal; }
         .oneuptime-wysiwyg ul.task-list, .oneuptime-wysiwyg ul.task-list li { list-style: none; margin-left: 0; }
         .oneuptime-wysiwyg ul.task-list li { padding-left: 0; }
-        .oneuptime-wysiwyg blockquote { border-left: 3px solid #d1d5db; padding-left: 0.75rem; color: #4b5563; margin: 0.5rem 0; }
-        .oneuptime-wysiwyg pre { background: #f3f4f6; border-radius: 0.375rem; padding: 0.75rem; overflow-x: auto; margin: 0.5rem 0; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 0.85rem; }
-        .oneuptime-wysiwyg code { background: #f3f4f6; padding: 0 0.25rem; border-radius: 0.25rem; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 0.85em; }
+        .oneuptime-wysiwyg blockquote { border-left: 3px solid var(--ou-border-strong, #d1d5db); padding-left: 0.75rem; color: var(--ou-text-secondary, #4b5563); margin: 0.5rem 0; }
+        .oneuptime-wysiwyg pre { background: var(--ou-surface-tertiary, #f3f4f6); border-radius: 0.375rem; padding: 0.75rem; overflow-x: auto; margin: 0.5rem 0; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 0.85rem; }
+        .oneuptime-wysiwyg code { background: var(--ou-surface-tertiary, #f3f4f6); padding: 0 0.25rem; border-radius: 0.25rem; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 0.85em; }
         .oneuptime-wysiwyg pre code { background: transparent; padding: 0; }
-        .oneuptime-wysiwyg a { color: #4f46e5; text-decoration: underline; }
-        .oneuptime-wysiwyg hr { margin: 1rem 0; border: 0; border-top: 1px solid #e5e7eb; }
+        .oneuptime-wysiwyg a { color: var(--ou-link, #4f46e5); text-decoration: underline; }
+        .oneuptime-wysiwyg hr { margin: 1rem 0; border: 0; border-top: 1px solid var(--ou-border-default, #e5e7eb); }
         .oneuptime-wysiwyg table { border-collapse: collapse; margin: 0.5rem 0; }
-        .oneuptime-wysiwyg th, .oneuptime-wysiwyg td { border: 1px solid #e5e7eb; padding: 0.25rem 0.5rem; }
-        .oneuptime-wysiwyg th { background: #f9fafb; font-weight: 600; }
+        .oneuptime-wysiwyg th, .oneuptime-wysiwyg td { border: 1px solid var(--ou-border-default, #e5e7eb); padding: 0.25rem 0.5rem; }
+        .oneuptime-wysiwyg th { background: var(--ou-surface-secondary, #f9fafb); font-weight: 600; }
         .oneuptime-wysiwyg img { max-width: 100%; height: auto; }
-        .oneuptime-wysiwyg:empty::before { content: attr(data-placeholder); color: #9ca3af; pointer-events: none; }
+        .oneuptime-wysiwyg:empty::before { content: attr(data-placeholder); color: var(--ou-text-subtle, #9ca3af); pointer-events: none; }
       `}</style>
 
       {/* Toolbar */}

package/UI/Components/Markdown.tsx/MarkdownViewer.tsx

@@ -70,6 +70,7 @@ SyntaxHighlighter.registerLanguage("http", http);
 import mermaid from "mermaid";
 import DOMPurify from "dompurify";
 import OneUptimeDate from "../../../Types/Date";
+import { Theme, useTheme } from "../../Utils/Theme";
 
 /*
  * ISO 8601 timestamps produced by OneUptimeDate.toString() — the
@@ -80,22 +81,37 @@ import OneUptimeDate from "../../../Types/Date";
 const ISO_8601_REGEX: RegExp =
   /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}(?:\.\d{1,6})?Z$/;
 
-// Initialize mermaid
-mermaid.initialize({
-  startOnLoad: false,
-  theme: "default",
-  securityLevel: "strict",
-  fontFamily: "inherit",
-  themeVariables: {
-    background: "#ffffff",
-    primaryColor: "#e0f2fe",
-    primaryTextColor: "#1e293b",
-    primaryBorderColor: "#0ea5e9",
-    lineColor: "#64748b",
-    secondaryColor: "#f1f5f9",
-    tertiaryColor: "#ffffff",
-  },
-});
+const initializeMermaid: (theme: Theme) => void = (theme: Theme): void => {
+  const isDark: boolean = theme === Theme.Dark;
+
+  mermaid.initialize({
+    startOnLoad: false,
+    theme: isDark ? "dark" : "default",
+    securityLevel: "strict",
+    fontFamily: "inherit",
+    themeVariables: isDark
+      ? {
+          background: "#111827",
+          primaryColor: "#1e3a5f",
+          primaryTextColor: "#f8fafc",
+          primaryBorderColor: "#38bdf8",
+          lineColor: "#94a3b8",
+          secondaryColor: "#1e293b",
+          tertiaryColor: "#0f172a",
+        }
+      : {
+          background: "#ffffff",
+          primaryColor: "#e0f2fe",
+          primaryTextColor: "#1e293b",
+          primaryBorderColor: "#0ea5e9",
+          lineColor: "#64748b",
+          secondaryColor: "#f1f5f9",
+          tertiaryColor: "#ffffff",
+        },
+  });
+};
+
+initializeMermaid(Theme.Light);
 
 // Mermaid diagram component
 const MermaidDiagram: FunctionComponent<{ chart: string }> = ({
@@ -105,22 +121,26 @@ const MermaidDiagram: FunctionComponent<{ chart: string }> = ({
 }) => {
   const containerRef: React.RefObject<HTMLDivElement> =
     useRef<HTMLDivElement>(null);
+  const theme: Theme = useTheme();
 
   useEffect(() => {
+    let isCancelled: boolean = false;
+
     const renderDiagram: () => Promise<void> = async (): Promise<void> => {
       if (containerRef.current) {
         containerRef.current.innerHTML = "";
         try {
+          initializeMermaid(theme);
           const id: string = `mermaid-${Math.random().toString(36).substr(2, 9)}`;
           const { svg } = await mermaid.render(id, chart);
-          if (containerRef.current) {
+          if (containerRef.current && !isCancelled) {
             containerRef.current.innerHTML = DOMPurify.sanitize(svg, {
               USE_PROFILES: { svg: true, svgFilters: true },
               ADD_TAGS: ["foreignObject"],
             });
           }
         } catch (error) {
-          if (containerRef.current) {
+          if (containerRef.current && !isCancelled) {
             const errorMessage: string = String(error);
             const errorEl: HTMLPreElement = document.createElement("pre");
             errorEl.className = "text-red-500";
@@ -131,8 +151,12 @@ const MermaidDiagram: FunctionComponent<{ chart: string }> = ({
         }
       }
     };
-    renderDiagram();
-  }, [chart]);
+    void renderDiagram();
+
+    return (): void => {
+      isCancelled = true;
+    };
+  }, [chart, theme]);
 
   return (
     <div

package/UI/Components/Modal/ConfirmModal.tsx

@@ -48,7 +48,7 @@ const ConfirmModal: FunctionComponent<ComponentProps> = (
     >
       <div
         data-testid="confirm-modal-description"
-        className="text-gray-500 mt-5 text-sm whitespace-pre-wrap break-words max-h-96 overflow-y-auto pr-1"
+        className="max-h-96 overflow-y-auto whitespace-pre-wrap break-words pr-1 text-sm leading-6 text-gray-600"
       >
         {translatedDescription}
       </div>

package/UI/Components/Modal/Modal.tsx

@@ -1,4 +1,4 @@
-import Button, { ButtonStyleType } from "../Button/Button";
+import { ButtonStyleType } from "../Button/Button";
 import ButtonType from "../Button/ButtonTypes";
 import Icon, { IconType, SizeProp, ThickProp } from "../Icon/Icon";
 import Loader, { LoaderType } from "../Loader/Loader";
@@ -11,6 +11,7 @@ import React, {
   FunctionComponent,
   ReactElement,
   useEffect,
+  useId,
   useRef,
 } from "react";
 
@@ -56,162 +57,253 @@ const Modal: FunctionComponent<ComponentProps> = (
   const translatedCloseButtonText: string | undefined = translateString(
     props.closeButtonText,
   );
+  const translatedCloseLabel: string = translateString("Close") || "Close";
   const modalRef: React.RefObject<HTMLDivElement> =
     useRef<HTMLDivElement>(null);
+  const previouslyFocusedElementRef: React.MutableRefObject<HTMLElement | null> =
+    useRef<HTMLElement | null>(
+      typeof document !== "undefined" &&
+        document.activeElement instanceof HTMLElement
+        ? document.activeElement
+        : null,
+    );
+  const onCloseRef: React.MutableRefObject<(() => void) | undefined> = useRef<
+    (() => void) | undefined
+  >(props.onClose);
+  const titleId: string = useId();
+  const descriptionId: string = useId();
 
-  // Handle Escape key to close modal
   useEffect(() => {
-    const handleEscapeKey: (event: KeyboardEvent) => void = (
+    onCloseRef.current = props.onClose;
+  }, [props.onClose]);
+
+  useEffect(() => {
+    const modal: HTMLDivElement | null = modalRef.current;
+    if (!modal) {
+      return;
+    }
+
+    const getFocusableElements: () => Array<HTMLElement> =
+      (): Array<HTMLElement> => {
+        return Array.from(
+          modal.querySelectorAll<HTMLElement>(
+            'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])',
+          ),
+        ).filter((element: HTMLElement) => {
+          return (
+            !element.hasAttribute("disabled") &&
+            element.getAttribute("aria-hidden") !== "true"
+          );
+        });
+      };
+
+    const isTopmostDialog: () => boolean = (): boolean => {
+      const openDialogs: Array<Element> = Array.from(
+        document.querySelectorAll('[role="dialog"][aria-modal="true"]'),
+      );
+
+      return openDialogs[openDialogs.length - 1] === modal;
+    };
+
+    const initialFocusElement: HTMLElement | undefined =
+      getFocusableElements().find((element: HTMLElement) => {
+        return element.getAttribute("data-testid") !== "close-button";
+      });
+
+    if (isTopmostDialog()) {
+      (initialFocusElement || modal).focus();
+    }
+
+    const handleKeyDown: (event: KeyboardEvent) => void = (
       event: KeyboardEvent,
     ): void => {
-      if (event.key === "Escape" && props.onClose) {
-        props.onClose();
+      if (event.defaultPrevented || !isTopmostDialog()) {
+        return;
+      }
+
+      if (event.key === "Escape" && onCloseRef.current) {
+        event.preventDefault();
+        onCloseRef.current();
+        return;
+      }
+
+      if (event.key !== "Tab") {
+        return;
+      }
+
+      const focusableElements: Array<HTMLElement> = getFocusableElements();
+
+      if (focusableElements.length === 0) {
+        event.preventDefault();
+        modal.focus();
+        return;
+      }
+
+      const firstFocusableElement: HTMLElement = focusableElements[0]!;
+      const lastFocusableElement: HTMLElement =
+        focusableElements[focusableElements.length - 1]!;
+      const activeElement: Element | null = document.activeElement;
+
+      if (
+        event.shiftKey &&
+        (activeElement === firstFocusableElement ||
+          !modal.contains(activeElement))
+      ) {
+        event.preventDefault();
+        lastFocusableElement.focus();
+      } else if (
+        !event.shiftKey &&
+        (activeElement === lastFocusableElement ||
+          !modal.contains(activeElement))
+      ) {
+        event.preventDefault();
+        firstFocusableElement.focus();
       }
     };
 
-    document.addEventListener("keydown", handleEscapeKey);
+    document.addEventListener("keydown", handleKeyDown);
+
     return () => {
-      document.removeEventListener("keydown", handleEscapeKey);
-    };
-  }, [props.onClose]);
+      document.removeEventListener("keydown", handleKeyDown);
 
-  // Focus trap and initial focus
-  useEffect(() => {
-    const modal: HTMLDivElement | null = modalRef.current;
-    if (modal) {
-      // Focus the first focusable element in the modal, excluding the close button
-      const focusableElements: NodeListOf<Element> = modal.querySelectorAll(
-        'button:not([data-testid="close-button"]), [href], input, select, textarea, [tabindex]:not([tabindex="-1"])',
-      );
-      const firstFocusable: HTMLElement | undefined = focusableElements[0] as
-        | HTMLElement
-        | undefined;
-      if (firstFocusable) {
-        firstFocusable.focus();
+      if (previouslyFocusedElementRef.current?.isConnected) {
+        previouslyFocusedElementRef.current.focus();
       }
-    }
+    };
   }, []);
 
-  let iconBgColor: string = "bg-indigo-100";
+  let iconBgColor: string = "bg-indigo-50";
   let iconColor: string = "text-indigo-600";
+  let iconRingColor: string = "ring-indigo-100";
 
   if (props.iconType === IconType.Info) {
-    iconBgColor = "bg-indigo-100";
+    iconBgColor = "bg-indigo-50";
     iconColor = "text-indigo-600";
+    iconRingColor = "ring-indigo-100";
   } else if (props.iconType === IconType.Warning) {
-    iconBgColor = "bg-yellow-100";
-    iconColor = "text-yellow-600";
+    iconBgColor = "bg-yellow-50";
+    iconColor = "text-yellow-700";
+    iconRingColor = "ring-yellow-100";
   } else if (props.iconType === IconType.Success) {
-    iconBgColor = "bg-green-100";
+    iconBgColor = "bg-green-50";
     iconColor = "text-green-600";
+    iconRingColor = "ring-green-100";
   } else if (props.iconType === IconType.Danger) {
-    iconBgColor = "bg-red-100";
+    iconBgColor = "bg-red-50";
     iconColor = "text-red-600";
+    iconRingColor = "ring-red-100";
+  }
+
+  let modalWidthClassName: string = "sm:max-w-lg md:max-w-lg";
+
+  if (props.modalWidth === ModalWidth.Medium) {
+    modalWidthClassName = "sm:max-w-3xl md:max-w-3xl";
+  } else if (props.modalWidth === ModalWidth.Large) {
+    modalWidthClassName = "sm:max-w-7xl md:max-w-7xl";
   }
 
   return (
-    <div
-      ref={modalRef}
-      className="relative z-20"
-      aria-labelledby="modal-title"
-      aria-describedby={props.description ? "modal-description" : undefined}
-      role="dialog"
-      aria-modal="true"
-    >
-      <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"></div>
+    <div className="relative z-50">
+      <div
+        className="fixed inset-0 bg-gray-950/45 backdrop-blur-[2px]"
+        data-testid="modal-backdrop"
+        aria-hidden="true"
+      />
 
-      <div className="fixed inset-0 z-20 overflow-y-auto">
-        <div className="flex min-h-screen items-end justify-center p-0 text-center md:items-center md:p-4">
+      <div className="fixed inset-0 z-50 overflow-y-auto">
+        <div className="flex min-h-full items-end justify-center p-0 text-center sm:items-center sm:p-6">
           <div
-            className={`relative transform bg-white text-left shadow-xl transition-all w-full h-full md:rounded-lg md:my-8 ${
-              props.modalWidth && props.modalWidth === ModalWidth.Large
-                ? "md:max-w-7xl"
-                : ""
-            } ${
-              props.modalWidth && props.modalWidth === ModalWidth.Medium
-                ? "md:max-w-3xl"
-                : ""
-            } ${!props.modalWidth ? "md:max-w-lg" : ""} `}
+            ref={modalRef}
+            className={`relative flex max-h-[calc(100vh-1rem)] w-full flex-col rounded-t-2xl border border-gray-200/80 bg-white text-left shadow-2xl ring-1 ring-black/5 sm:my-8 sm:max-h-[calc(100vh-3rem)] sm:rounded-xl ${modalWidthClassName}`}
             data-testid="modal"
+            aria-labelledby={titleId}
+            aria-describedby={translatedDescription ? descriptionId : undefined}
+            role="dialog"
+            aria-modal="true"
+            tabIndex={-1}
           >
-            {props.onClose && (
-              <div className="absolute top-0 right-0 z-10 pt-4 pr-4 md:hidden lg:block">
-                <Button
-                  buttonStyle={ButtonStyleType.ICON}
-                  icon={IconProp.Close}
-                  iconSize={SizeProp.Large}
-                  title="Close"
-                  dataTestId="close-button"
-                  onClick={props.onClose}
-                />
+            <div className="relative flex shrink-0 flex-col gap-4 rounded-t-2xl border-b border-gray-100 bg-white px-5 py-4 sm:flex-row sm:items-start sm:justify-between sm:gap-6 sm:rounded-t-xl sm:px-6">
+              <div
+                className={`flex min-w-0 flex-1 items-start gap-3 ${
+                  props.onClose ? "pr-9 sm:pr-0" : ""
+                }`}
+              >
+                {props.icon && (
+                  <div
+                    className={`flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-lg ${iconBgColor} ring-1 ring-inset ${iconRingColor}`}
+                    data-testid="icon"
+                  >
+                    <Icon
+                      thick={ThickProp.Thick}
+                      type={
+                        props.iconType === undefined
+                          ? IconType.Info
+                          : props.iconType
+                      }
+                      className={`${iconColor} h-5 w-5`}
+                      icon={props.icon}
+                      size={SizeProp.Five}
+                    />
+                  </div>
+                )}
+                <div className="min-w-0 flex-1">
+                  <h3
+                    data-testid="modal-title"
+                    className="text-base font-semibold leading-6 tracking-tight text-gray-900"
+                    id={titleId}
+                  >
+                    {translatedTitle}
+                  </h3>
+                  {translatedDescription && (
+                    <p
+                      id={descriptionId}
+                      data-testid="modal-description"
+                      className="mt-0.5 text-sm leading-5 text-gray-500"
+                    >
+                      {translatedDescription}
+                    </p>
+                  )}
+                </div>
               </div>
-            )}
-            <div className="p-4 md:p-6">
-              {props.icon && (
+              {props.rightElement && (
                 <div
-                  className={`mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full ${iconBgColor} md:mx-0 md:h-10 md:w-10`}
-                  data-testid="icon"
+                  data-testid="right-element"
+                  className={`flex-shrink-0 ${props.onClose ? "pr-9" : ""}`}
                 >
-                  <Icon
-                    thick={ThickProp.Thick}
-                    type={
-                      props.iconType === undefined
-                        ? IconType.Info
-                        : props.iconType
-                    }
-                    className={`${iconColor} h-6 w-6 stroke-2`}
-                    icon={props.icon}
-                    size={SizeProp.Large}
-                  />
+                  {props.rightElement}
                 </div>
               )}
-              <div className="text-left md:mt-0 md:ml-4 md:mr-4">
-                <div className="flex flex-col md:flex-row md:justify-between">
-                  <div className="flex-1">
-                    <h3
-                      data-testid="modal-title"
-                      className={`text-lg font-medium leading-6 text-gray-900 ${
-                        props.icon ? "mt-4 md:ml-10 md:-mt-8 md:mb-5" : ""
-                      }`}
-                      id="modal-title"
-                    >
-                      {translatedTitle}
-                    </h3>
-                    {translatedDescription && (
-                      <p
-                        id="modal-description"
-                        data-testid="modal-description"
-                        className="text-sm leading-6 text-gray-500 mt-2"
-                      >
-                        {translatedDescription}
-                      </p>
-                    )}
+              {props.onClose && (
+                <button
+                  type="button"
+                  title={translatedCloseLabel}
+                  aria-label={translatedCloseLabel}
+                  data-testid="close-button"
+                  onClick={props.onClose}
+                  className="absolute right-4 top-4 inline-flex h-8 w-8 items-center justify-center rounded-md text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2"
+                >
+                  <Icon icon={IconProp.Close} className="h-4 w-4" />
+                </button>
+              )}
+            </div>
+
+            <div
+              className="min-h-0 flex-1 overflow-y-auto overscroll-contain px-5 py-5 sm:px-6"
+              data-testid="modal-content"
+            >
+              <ModalBody error={props.error}>
+                {!props.isBodyLoading ? (
+                  props.children
+                ) : (
+                  <div className="modal-body flex justify-center py-16">
+                    <Loader
+                      loaderType={LoaderType.Bar}
+                      color={VeryLightGray}
+                      size={200}
+                    />
                   </div>
-                  {props.rightElement && (
-                    <div
-                      data-testid="right-element"
-                      className="mt-4 md:mt-0 lg:mr-4"
-                    >
-                      {props.rightElement}
-                    </div>
-                  )}
-                </div>
-                <div className="mt-2">
-                  <ModalBody error={props.error}>
-                    {!props.isBodyLoading ? (
-                      props.children
-                    ) : (
-                      <div className="modal-body mt-20 mb-20 flex justify-center">
-                        <Loader
-                          loaderType={LoaderType.Bar}
-                          color={VeryLightGray}
-                          size={200}
-                        />
-                      </div>
-                    )}
-                  </ModalBody>
-                </div>
-              </div>
+                )}
+              </ModalBody>
             </div>
             <ModalFooter
               submitButtonType={