@oneuptime/common 11.4.0 → 11.4.1

package/UI/Components/Header/HeaderIconDropdownButton.tsx

@@ -19,6 +19,7 @@ export interface ComponentProps {
   onClick?: (() => void) | undefined;
   name: string;
   showDropdown: boolean;
+  isPressed?: boolean | undefined;
 }
 
 const HeaderIconDropdownButton: FunctionComponent<ComponentProps> = (
@@ -53,6 +54,7 @@ const HeaderIconDropdownButton: FunctionComponent<ComponentProps> = (
           id={hasDropdown ? "user-menu-button" : undefined}
           aria-expanded={hasDropdown ? isDropdownVisible : undefined}
           aria-haspopup={hasDropdown ? "true" : undefined}
+          aria-pressed={props.isPressed}
           onClick={() => {
             props.onClick?.();
             setIsComponentVisible(!isDropdownVisible);

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>