@oneuptime/common 11.4.0 → 11.4.1

package/Types/Monitor/PingMonitor/PingMonitorResponse.ts

@@ -0,0 +1,20 @@
+/*
+ * Packet-level statistics captured by the Ping/IP monitor. Populated when
+ * the probe sends multiple ICMP echo requests per check. All RTT values
+ * are in milliseconds. Absent on older probes (single-echo pings) and when
+ * ICMP is blocked and the probe falls back to TCP port checks, which keeps
+ * the pipeline backwards-compatible.
+ */
+export default interface PingMonitorResponse {
+  packetsSent: number;
+  packetsReceived: number;
+  packetLossPercent: number;
+  minRoundTripTimeInMs?: number | undefined;
+  maxRoundTripTimeInMs?: number | undefined;
+  avgRoundTripTimeInMs?: number | undefined;
+  /*
+   * Jitter is the standard deviation of round-trip times across the
+   * packets sent in this check.
+   */
+  jitterInMs?: number | undefined;
+}

package/Types/Probe/ProbeMonitorResponse.ts

@@ -8,10 +8,13 @@ import SslMonitorResponse from "../Monitor/SSLMonitor/SslMonitorResponse";
 import SyntheticMonitorResponse from "../Monitor/SyntheticMonitors/SyntheticMonitorResponse";
 import SnmpMonitorResponse from "../Monitor/SnmpMonitor/SnmpMonitorResponse";
 import DnsMonitorResponse from "../Monitor/DnsMonitor/DnsMonitorResponse";
+import PingMonitorResponse from "../Monitor/PingMonitor/PingMonitorResponse";
 import DomainMonitorResponse from "../Monitor/DomainMonitor/DomainMonitorResponse";
 import DnssecMonitorResponse from "../Monitor/DnssecMonitor/DnssecMonitorResponse";
 import ExternalStatusPageMonitorResponse from "../Monitor/ExternalStatusPageMonitor/ExternalStatusPageMonitorResponse";
+import HttpPhaseTimings from "../Monitor/HttpPhaseTimings";
 import MonitorEvaluationSummary from "../Monitor/MonitorEvaluationSummary";
+import NetworkPathTrace from "../Monitor/NetworkMonitor/NetworkPathTrace";
 import ObjectID from "../ObjectID";
 import Port from "../Port";
 import ProbeAttempt from "./ProbeAttempt";
@@ -35,6 +38,17 @@ export default interface ProbeMonitorResponse {
   syntheticMonitorResponse?: Array<SyntheticMonitorResponse> | undefined;
   customCodeMonitorResponse?: CustomCodeMonitorResponse | undefined;
   snmpResponse?: SnmpMonitorResponse | undefined;
+  pingResponse?: PingMonitorResponse | undefined;
+  /*
+   * Traceroute + DNS lookup captured by the probe when a Ping/IP/Port check
+   * fails — path evidence from the moment of failure.
+   */
+  networkPathTrace?: NetworkPathTrace | undefined;
+  /*
+   * DNS / TCP / TLS / TTFB / download phase breakdown for Website and API
+   * checks. Absent when the request went through a proxy.
+   */
+  httpTimings?: HttpPhaseTimings | undefined;
   dnsResponse?: DnsMonitorResponse | undefined;
   domainResponse?: DomainMonitorResponse | undefined;
   dnssecResponse?: DnssecMonitorResponse | undefined;

package/UI/Components/Charts/ChartLibrary/AreaChart/AreaChart.tsx

@@ -815,7 +815,10 @@ const AreaChart: React.ForwardRefExoticComponent<
               wrapperStyle={{ outline: "none" }}
               isAnimationActive={true}
               animationDuration={100}
-              cursor={{ stroke: "#d1d5db", strokeWidth: 1 }}
+              cursor={{
+                stroke: "var(--ou-chart-cursor, #d1d5db)",
+                strokeWidth: 1,
+              }}
               offset={20}
               position={{ y: 0 }}
               // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -903,11 +906,11 @@ const AreaChart: React.ForwardRefExoticComponent<
                   }
                   return [low, high];
                 }}
-                stroke="#94a3b8"
+                stroke="var(--ou-chart-tick, #94a3b8)"
                 strokeOpacity={0.3}
                 strokeWidth={1}
                 strokeDasharray="3 3"
-                fill="#94a3b8"
+                fill="var(--ou-chart-tick, #94a3b8)"
                 fillOpacity={0.12}
                 isAnimationActive={false}
                 connectNulls={false}
@@ -1064,7 +1067,7 @@ const AreaChart: React.ForwardRefExoticComponent<
                     y={exemplar.y}
                     r={5}
                     fill="#7c3aed"
-                    stroke="#ffffff"
+                    stroke="var(--ou-chart-marker-ring, #ffffff)"
                     strokeWidth={2}
                     style={{ cursor: "pointer" }}
                     onClick={() => {
@@ -1074,7 +1077,7 @@ const AreaChart: React.ForwardRefExoticComponent<
                     <Label
                       value="E"
                       position="center"
-                      fill="#ffffff"
+                      fill="var(--ou-chart-marker-ring, #ffffff)"
                       fontSize={8}
                       fontWeight={700}
                     />

package/UI/Components/Charts/ChartLibrary/BarChart/BarChart.tsx

@@ -925,7 +925,10 @@ const BarChart: React.ForwardRefExoticComponent<
               wrapperStyle={{ outline: "none" }}
               isAnimationActive={true}
               animationDuration={100}
-              cursor={{ fill: "#d1d5db", opacity: "0.15" }}
+              cursor={{
+                fill: "var(--ou-chart-cursor, #d1d5db)",
+                opacity: "0.15",
+              }}
               offset={20}
               {...(layout === "horizontal"
                 ? { position: { y: 0 } }

package/UI/Components/Charts/ChartLibrary/LineChart/LineChart.tsx

@@ -813,7 +813,10 @@ const LineChart: React.ForwardRefExoticComponent<
               wrapperStyle={{ outline: "none" }}
               isAnimationActive={true}
               animationDuration={100}
-              cursor={{ stroke: "#d1d5db", strokeWidth: 1 }}
+              cursor={{
+                stroke: "var(--ou-chart-cursor, #d1d5db)",
+                strokeWidth: 1,
+              }}
               offset={20}
               position={{ y: 0 }}
               content={({ active, payload, label }: any) => {
@@ -1052,7 +1055,7 @@ const LineChart: React.ForwardRefExoticComponent<
                     y={exemplar.y}
                     r={5}
                     fill="#7c3aed"
-                    stroke="#ffffff"
+                    stroke="var(--ou-chart-marker-ring, #ffffff)"
                     strokeWidth={2}
                     style={{ cursor: "pointer" }}
                     onClick={() => {
@@ -1062,7 +1065,7 @@ const LineChart: React.ForwardRefExoticComponent<
                     <Label
                       value="E"
                       position="center"
-                      fill="#ffffff"
+                      fill="var(--ou-chart-marker-ring, #ffffff)"
                       fontSize={8}
                       fontWeight={700}
                     />

package/UI/Components/CodeBlock/CodeBlock.tsx

@@ -36,8 +36,9 @@ const CodeBlock: FunctionComponent<ComponentProps> = (
       {showCopyButton && typeof props.code === "string" && (
         <button
           onClick={handleCopy}
-          className="absolute top-2 right-2 p-2 rounded-md bg-gray-700 hover:bg-gray-600 text-gray-300 hover:text-white transition-all opacity-0 group-hover:opacity-100 z-10"
+          className="absolute top-2 right-2 p-2 rounded-md bg-gray-700 hover:bg-gray-600 text-gray-300 hover:text-white transition-all opacity-70 hover:opacity-100 focus-visible:opacity-100 group-hover:opacity-100 z-10"
           title={copied ? "Copied!" : "Copy to clipboard"}
+          aria-label={copied ? "Copied" : "Copy to clipboard"}
           type="button"
         >
           <Icon

package/UI/Components/CodeEditor/CodeEditor.tsx

@@ -1,6 +1,7 @@
 import Editor from "@monaco-editor/react";
 import CodeType from "../../../Types/Code/CodeType";
 import MarkdownUtil from "../../Utils/Markdown";
+import { Theme, useTheme } from "../../Utils/Theme";
 import React, {
   FunctionComponent,
   ReactElement,
@@ -36,6 +37,7 @@ const CodeEditor: FunctionComponent<ComponentProps> = (
   const [placeholder, setPlaceholder] = useState<string>("");
   const [helpText, setHelpText] = useState<string | ReactElement>("");
   const editorRef: React.MutableRefObject<any> = useRef<any>(null);
+  const theme: Theme = useTheme();
 
   useEffect(() => {
     let value: string | undefined = props.value;
@@ -138,6 +140,7 @@ const CodeEditor: FunctionComponent<ComponentProps> = (
       )}
 
       <Editor
+        theme={theme === Theme.Dark ? "vs-dark" : "light"}
         defaultLanguage={props.type}
         height="30vh"
         value={value}

package/UI/Components/Divider/Divider.tsx

@@ -4,7 +4,7 @@ const Divider: () => JSX.Element = (): ReactElement => {
   return (
     <div
       className="w-full border-t border-gray-100"
-      style={{ borderColor: "#f9fafb" }}
+      style={{ borderColor: "var(--ou-border-subtle, #f9fafb)" }}
     ></div>
   );
 };

package/UI/Components/Dropdown/Dropdown.tsx

@@ -41,6 +41,12 @@ export interface DropdownOptionGroup {
   options: Array<DropdownOption>;
 }
 
+/*
+ * Modal surfaces use z-50. The portalled menu must sit above that stacking
+ * context so options are not painted underneath an anchored modal footer.
+ */
+export const DROPDOWN_MENU_Z_INDEX: number = 60;
+
 export interface ComponentProps {
   options: Array<DropdownOption | DropdownOptionGroup>;
   initialValue?: undefined | DropdownOption | Array<DropdownOption>;
@@ -334,8 +340,8 @@ const Dropdown: FunctionComponent<ComponentProps> = (
   } = (color?: string): { backgroundColor: string; color: string } => {
     if (!color) {
       return {
-        backgroundColor: "#e5e7eb", // gray-200
-        color: "#374151", // gray-700
+        backgroundColor: "var(--ou-surface-tertiary, #e5e7eb)",
+        color: "var(--ou-text-secondary, #374151)",
       };
     }
 
@@ -511,6 +517,9 @@ const Dropdown: FunctionComponent<ComponentProps> = (
     setValue(value);
   }, [props.value]);
 
+  const menuPortalTarget: HTMLElement | null =
+    typeof document === "undefined" ? null : document.body;
+
   return (
     <div
       id={props.id}
@@ -710,11 +719,11 @@ const Dropdown: FunctionComponent<ComponentProps> = (
           menuPortal: (base: CSSObjectWithLabel): CSSObjectWithLabel => {
             return {
               ...base,
-              zIndex: 50,
+              zIndex: DROPDOWN_MENU_Z_INDEX,
             };
           },
         }}
-        menuPortalTarget={document.body}
+        menuPortalTarget={menuPortalTarget}
         menuPosition="fixed"
         isClearable={true}
         isSearchable={true}

package/UI/Components/EntityDropdown/EntityDropdown.tsx

@@ -10,6 +10,7 @@ import ObjectID from "../../../Types/ObjectID";
 import ModelAPI, { ListResult } from "../../Utils/ModelAPI/ModelAPI";
 import Icon from "../Icon/Icon";
 import {
+  DROPDOWN_MENU_Z_INDEX,
   DropdownOption,
   DropdownOptionGroup,
   DropdownOptionLabel,
@@ -20,6 +21,7 @@ import React, {
   ReactElement,
   useCallback,
   useEffect,
+  useLayoutEffect,
   useMemo,
   useRef,
   useState,
@@ -107,6 +109,18 @@ export interface EntityDropdownProps {
 const SEARCH_DEBOUNCE_MS: number = 250;
 const SEARCH_PAGE_SIZE: number = 50;
 const LABEL_PREVIEW_LIMIT: number = 50;
+const MENU_GAP_PX: number = 4;
+const MENU_MAX_HEIGHT_PX: number = 384;
+const MENU_MIN_USEFUL_HEIGHT_PX: number = 160;
+const MENU_VIEWPORT_PADDING_PX: number = 8;
+
+interface EntityDropdownMenuPosition {
+  bottom?: number | undefined;
+  left: number;
+  maxHeight: number;
+  top?: number | undefined;
+  width: number;
+}
 
 const flattenOptions: (
   options: Array<DropdownOption | DropdownOptionGroup> | undefined,
@@ -441,12 +455,91 @@ const EntityDropdown: FunctionComponent<EntityDropdownProps> = (
 
   const containerRef: React.MutableRefObject<HTMLDivElement | null> =
     useRef<HTMLDivElement | null>(null);
+  const controlRef: React.MutableRefObject<HTMLDivElement | null> =
+    useRef<HTMLDivElement | null>(null);
   const inputRef: React.MutableRefObject<HTMLInputElement | null> =
     useRef<HTMLInputElement | null>(null);
   const debounceRef: React.MutableRefObject<number | null> = useRef<
     number | null
   >(null);
   const searchSeqRef: React.MutableRefObject<number> = useRef<number>(0);
+  const [menuPosition, setMenuPosition] =
+    useState<EntityDropdownMenuPosition | null>(null);
+
+  const updateMenuPosition: () => void = useCallback((): void => {
+    if (!controlRef.current || typeof window === "undefined") {
+      return;
+    }
+
+    const controlRect: DOMRect = controlRef.current.getBoundingClientRect();
+    const availableWidth: number = Math.max(
+      0,
+      window.innerWidth - MENU_VIEWPORT_PADDING_PX * 2,
+    );
+    const width: number = Math.min(controlRect.width, availableWidth);
+    const maximumLeft: number = Math.max(
+      MENU_VIEWPORT_PADDING_PX,
+      window.innerWidth - MENU_VIEWPORT_PADDING_PX - width,
+    );
+    const left: number = Math.min(
+      Math.max(controlRect.left, MENU_VIEWPORT_PADDING_PX),
+      maximumLeft,
+    );
+    const spaceBelow: number = Math.max(
+      0,
+      window.innerHeight -
+        controlRect.bottom -
+        MENU_GAP_PX -
+        MENU_VIEWPORT_PADDING_PX,
+    );
+    const spaceAbove: number = Math.max(
+      0,
+      controlRect.top - MENU_GAP_PX - MENU_VIEWPORT_PADDING_PX,
+    );
+    const shouldOpenAbove: boolean =
+      spaceBelow < MENU_MIN_USEFUL_HEIGHT_PX && spaceAbove > spaceBelow;
+    const availableHeight: number = shouldOpenAbove ? spaceAbove : spaceBelow;
+
+    setMenuPosition({
+      bottom: shouldOpenAbove
+        ? window.innerHeight - controlRect.top + MENU_GAP_PX
+        : undefined,
+      left,
+      maxHeight: Math.min(MENU_MAX_HEIGHT_PX, availableHeight),
+      top: shouldOpenAbove ? undefined : controlRect.bottom + MENU_GAP_PX,
+      width,
+    });
+  }, []);
+
+  useLayoutEffect(() => {
+    if (!isOpen) {
+      setMenuPosition(null);
+      return;
+    }
+
+    let animationFrame: number | null = null;
+    const schedulePositionUpdate: () => void = (): void => {
+      if (animationFrame !== null) {
+        return;
+      }
+      animationFrame = window.requestAnimationFrame((): void => {
+        animationFrame = null;
+        updateMenuPosition();
+      });
+    };
+
+    updateMenuPosition();
+    window.addEventListener("resize", schedulePositionUpdate);
+    document.addEventListener("scroll", schedulePositionUpdate, true);
+
+    return () => {
+      window.removeEventListener("resize", schedulePositionUpdate);
+      document.removeEventListener("scroll", schedulePositionUpdate, true);
+      if (animationFrame !== null) {
+        window.cancelAnimationFrame(animationFrame);
+      }
+    };
+  }, [isOpen, selectedKeys, updateMenuPosition]);
 
   // Click-outside closes the popover.
   useEffect(() => {
@@ -1106,7 +1199,7 @@ const EntityDropdown: FunctionComponent<EntityDropdownProps> = (
         </div>
       )}
 
-      <div className="relative">
+      <div ref={controlRef} className="relative">
         {/*
          * Single-select shows the resolved label in-place when closed so the
          * chrome looks like a static value field. Click anywhere on the
@@ -1281,6 +1374,11 @@ const EntityDropdown: FunctionComponent<EntityDropdownProps> = (
                   return;
                 }
                 if (event.key === "Escape") {
+                  /*
+                   * The modal also listens for Escape. Consume it here so the
+                   * first press closes the menu without dismissing the form.
+                   */
+                  event.preventDefault();
                   setIsOpen(false);
                   setHighlightedIndex(-1);
                   return;
@@ -1329,8 +1427,18 @@ const EntityDropdown: FunctionComponent<EntityDropdownProps> = (
 
       {isOpen && !props.disabled && (
         <div
-          className="absolute z-20 mt-1 flex max-h-96 w-full flex-col overflow-hidden rounded-md border border-gray-200 bg-white text-sm shadow-lg"
+          className="fixed flex flex-col overflow-hidden rounded-md border border-gray-200 bg-white text-sm shadow-lg"
+          data-testid="entity-dropdown-menu"
           role="listbox"
+          style={{
+            bottom: menuPosition?.bottom,
+            left: menuPosition?.left ?? 0,
+            maxHeight: menuPosition?.maxHeight,
+            top: menuPosition?.top,
+            visibility: menuPosition ? "visible" : "hidden",
+            width: menuPosition?.width ?? 0,
+            zIndex: DROPDOWN_MENU_Z_INDEX,
+          }}
         >
           {labelsTabEnabled && (
             <div className="flex flex-shrink-0 items-center gap-1 border-b border-gray-100 bg-gray-50 px-1.5 py-1">

package/UI/Components/ErrorBoundary.tsx

@@ -15,7 +15,8 @@ const Fallback: FunctionComponent = () => {
         bottom: "0",
         left: "0",
         right: "0",
-        backgroundColor: "#fdfdfd",
+        backgroundColor: "var(--ou-background-primary, #fdfdfd)",
+        color: "var(--ou-text-primary, #111827)",
         zIndex: "999",
         display: "flex",
         justifyContent: "center",

package/UI/Components/EventItem/EventItem.tsx

@@ -168,8 +168,8 @@ const EventItem: FunctionComponent<ComponentProps> = (
                     text={item}
                     color={VeryLightGray}
                     style={{
-                      backgroundColor: "#f3f4f6",
-                      color: "#9ca3af",
+                      backgroundColor: "var(--ou-surface-tertiary, #f3f4f6)",
+                      color: "var(--ou-text-subtle, #9ca3af)",
                     }}
                   />
                 );

package/UI/Components/GanttChart/Bar/Index.tsx

@@ -137,7 +137,7 @@ const Bar: FunctionComponent<ComponentProps> = (
           marginLeft: `${barWidth + 15}px`,
           opacity: barOpacity,
           fontWeight: props.isHighlighted ? 600 : undefined,
-          color: props.isHighlighted ? "#4338ca" : undefined,
+          color: props.isHighlighted ? "var(--ou-link, #4338ca)" : undefined,
         }}
       >
         <BarLabel label={props.bar.label} />

package/UI/Components/Graphs/UptimeBarTooltip.tsx

@@ -72,7 +72,7 @@ const UptimeBarTooltip: FunctionComponent<ComponentProps> = (
           gap: "8px",
           paddingBottom: "10px",
           marginBottom: "10px",
-          borderBottom: "1px solid #f0f0f0",
+          borderBottom: "1px solid var(--ou-border-subtle, #f0f0f0)",
         }}
       >
         <svg
@@ -80,7 +80,7 @@ const UptimeBarTooltip: FunctionComponent<ComponentProps> = (
           height="14"
           viewBox="0 0 24 24"
           fill="none"
-          stroke="#9ca3af"
+          stroke="var(--ou-text-subtle, #9ca3af)"
           strokeWidth="2"
           strokeLinecap="round"
           strokeLinejoin="round"
@@ -95,7 +95,7 @@ const UptimeBarTooltip: FunctionComponent<ComponentProps> = (
           style={{
             fontWeight: 600,
             fontSize: "13px",
-            color: "#111827",
+            color: "var(--ou-text-primary, #111827)",
             letterSpacing: "-0.01em",
           }}
         >
@@ -121,7 +121,7 @@ const UptimeBarTooltip: FunctionComponent<ComponentProps> = (
             <span
               style={{
                 fontSize: "11px",
-                color: "#6b7280",
+                color: "var(--ou-text-muted, #6b7280)",
                 fontWeight: 500,
               }}
             >
@@ -165,7 +165,7 @@ const UptimeBarTooltip: FunctionComponent<ComponentProps> = (
                 overflow: "hidden",
                 display: "flex",
                 gap: "1px",
-                backgroundColor: "#e5e7eb",
+                backgroundColor: "var(--ou-border-default, #e5e7eb)",
               }}
             >
               {sortedDurations.map((status: StatusDuration, index: number) => {
@@ -191,7 +191,7 @@ const UptimeBarTooltip: FunctionComponent<ComponentProps> = (
               style={{
                 width: "100%",
                 height: "4px",
-                backgroundColor: "#e5e7eb",
+                backgroundColor: "var(--ou-border-default, #e5e7eb)",
                 borderRadius: "100px",
                 overflow: "hidden",
               }}
@@ -213,7 +213,7 @@ const UptimeBarTooltip: FunctionComponent<ComponentProps> = (
       {!props.hasEvents && (
         <div
           style={{
-            backgroundColor: "#f9fafb",
+            backgroundColor: "var(--ou-surface-secondary, #f9fafb)",
             borderRadius: "8px",
             padding: "16px",
             textAlign: "center",
@@ -224,7 +224,7 @@ const UptimeBarTooltip: FunctionComponent<ComponentProps> = (
             height="18"
             viewBox="0 0 24 24"
             fill="none"
-            stroke="#d1d5db"
+            stroke="var(--ou-border-strong, #d1d5db)"
             strokeWidth="1.5"
             strokeLinecap="round"
             strokeLinejoin="round"
@@ -237,7 +237,7 @@ const UptimeBarTooltip: FunctionComponent<ComponentProps> = (
           <div
             style={{
               fontSize: "12px",
-              color: "#9ca3af",
+              color: "var(--ou-text-subtle, #9ca3af)",
               fontWeight: 500,
             }}
           >
@@ -252,7 +252,9 @@ const UptimeBarTooltip: FunctionComponent<ComponentProps> = (
           style={{
             paddingBottom: hasIncidents ? "10px" : "0",
             marginBottom: hasIncidents ? "10px" : "0",
-            borderBottom: hasIncidents ? "1px solid #f0f0f0" : "none",
+            borderBottom: hasIncidents
+              ? "1px solid var(--ou-border-subtle, #f0f0f0)"
+              : "none",
           }}
         >
           {sortedDurations.map((status: StatusDuration, index: number) => {
@@ -291,7 +293,7 @@ const UptimeBarTooltip: FunctionComponent<ComponentProps> = (
                   <span
                     style={{
                       fontSize: "12px",
-                      color: "#374151",
+                      color: "var(--ou-text-secondary, #374151)",
                       fontWeight: 500,
                       whiteSpace: "nowrap",
                       overflow: "hidden",
@@ -306,7 +308,7 @@ const UptimeBarTooltip: FunctionComponent<ComponentProps> = (
                   style={{
                     flex: 1,
                     height: "4px",
-                    backgroundColor: "#f3f4f6",
+                    backgroundColor: "var(--ou-surface-tertiary, #f3f4f6)",
                     borderRadius: "100px",
                     overflow: "hidden",
                   }}
@@ -325,7 +327,9 @@ const UptimeBarTooltip: FunctionComponent<ComponentProps> = (
                 <span
                   style={{
                     fontSize: "11px",
-                    color: status.isDowntime ? "#dc2626" : "#6b7280",
+                    color: status.isDowntime
+                      ? "var(--ou-danger-text, #b91c1c)"
+                      : "var(--ou-text-muted, #6b7280)",
                     fontWeight: status.isDowntime ? 600 : 400,
                     fontVariantNumeric: "tabular-nums",
                     whiteSpace: "nowrap",
@@ -356,7 +360,7 @@ const UptimeBarTooltip: FunctionComponent<ComponentProps> = (
             <span
               style={{
                 fontSize: "11px",
-                color: "#6b7280",
+                color: "var(--ou-text-muted, #6b7280)",
                 fontWeight: 500,
                 flex: 1,
               }}
@@ -367,8 +371,9 @@ const UptimeBarTooltip: FunctionComponent<ComponentProps> = (
               style={{
                 fontSize: "10px",
                 fontWeight: 600,
-                color: "#dc2626",
-                backgroundColor: "#fef2f2",
+                color: "var(--ou-danger-text, #b91c1c)",
+                backgroundColor:
+                  "color-mix(in srgb, #ef4444 14%, var(--ou-surface-primary, #ffffff))",
                 padding: "1px 7px",
                 borderRadius: "9999px",
                 lineHeight: "1.6",
@@ -400,21 +405,23 @@ const UptimeBarTooltip: FunctionComponent<ComponentProps> = (
                     marginBottom: "6px",
                     cursor: isClickable ? "pointer" : "default",
                     transition: "background-color 0.12s ease",
-                    backgroundColor: "#fafafa",
+                    backgroundColor: "var(--ou-surface-secondary, #fafafa)",
                     borderRadius: "0 6px 6px 0",
                   }}
                   onMouseEnter={(e: React.MouseEvent<HTMLDivElement>) => {
                     if (isClickable) {
                       (
                         e.currentTarget as HTMLDivElement
-                      ).style.backgroundColor = "#f3f4f6";
+                      ).style.backgroundColor =
+                        "var(--ou-surface-tertiary, #f3f4f6)";
                     }
                   }}
                   onMouseLeave={(e: React.MouseEvent<HTMLDivElement>) => {
                     if (isClickable) {
                       (
                         e.currentTarget as HTMLDivElement
-                      ).style.backgroundColor = "#fafafa";
+                      ).style.backgroundColor =
+                        "var(--ou-surface-secondary, #fafafa)";
                     }
                   }}
                 >
@@ -431,7 +438,7 @@ const UptimeBarTooltip: FunctionComponent<ComponentProps> = (
                         flex: 1,
                         minWidth: 0,
                         fontSize: "12px",
-                        color: "#111827",
+                        color: "var(--ou-text-primary, #111827)",
                         fontWeight: 600,
                         lineHeight: "1.3",
                         overflow: "hidden",
@@ -451,7 +458,7 @@ const UptimeBarTooltip: FunctionComponent<ComponentProps> = (
                       >
                         <path
                           d="M6 3l5 5-5 5"
-                          stroke="#6b7280"
+                          stroke="var(--ou-text-muted, #6b7280)"
                           strokeWidth="1.5"
                           strokeLinecap="round"
                           strokeLinejoin="round"
@@ -509,7 +516,7 @@ const UptimeBarTooltip: FunctionComponent<ComponentProps> = (
                     <span
                       style={{
                         fontSize: "10px",
-                        color: "#b0b0b0",
+                        color: "var(--ou-text-subtle, #b0b0b0)",
                         marginLeft: "auto",
                         whiteSpace: "nowrap",
                       }}
@@ -528,7 +535,7 @@ const UptimeBarTooltip: FunctionComponent<ComponentProps> = (
             <div
               style={{
                 fontSize: "11px",
-                color: "#9ca3af",
+                color: "var(--ou-text-subtle, #9ca3af)",
                 textAlign: "center",
                 padding: "4px 0 0",
                 fontWeight: 500,

package/UI/Components/Header/Header.tsx

@@ -3,6 +3,7 @@ import React, { FunctionComponent, ReactElement } from "react";
 export interface ComponentProps {
   leftComponents?: undefined | Array<ReactElement> | ReactElement;
   rightComponents?: undefined | Array<ReactElement> | ReactElement;
+  mobileRightComponents?: undefined | Array<ReactElement> | ReactElement;
   centerComponents?: undefined | Array<ReactElement> | ReactElement;
   className?: string | undefined;
 }
@@ -28,6 +29,12 @@ const Header: FunctionComponent<ComponentProps> = (
           </div>
         )}
 
+        {props.mobileRightComponents && (
+          <div className="relative z-20 flex items-center lg:hidden">
+            {props.mobileRightComponents}
+          </div>
+        )}
+
         <div className="hidden lg:relative lg:z-10 lg:ml-4 lg:flex lg:items-center lg:gap-2">
           {props.rightComponents}
         </div>