@oneuptime/common 10.0.20 → 10.0.21

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

@@ -0,0 +1,268 @@
+import React, {
+  FunctionComponent,
+  ReactElement,
+  useMemo,
+  useCallback,
+  useRef,
+  useState,
+} from "react";
+import {
+  BarChart,
+  Bar,
+  XAxis,
+  YAxis,
+  Tooltip,
+  ResponsiveContainer,
+  ReferenceArea,
+} from "recharts";
+import { HistogramBucket } from "../types";
+import {
+  getSeverityColor,
+  getAllSeverityKeys,
+  SeverityColor,
+} from "./severityColors";
+import HistogramTooltip from "./HistogramTooltip";
+import ComponentLoader from "../../ComponentLoader/ComponentLoader";
+
+export interface LogsHistogramProps {
+  buckets: Array<HistogramBucket>;
+  isLoading: boolean;
+  onTimeRangeSelect?: ((startTime: Date, endTime: Date) => void) | undefined;
+}
+
+interface PivotedRow {
+  time: string;
+  [severity: string]: number | string;
+}
+
+function pivotBuckets(buckets: Array<HistogramBucket>): Array<PivotedRow> {
+  const map: Map<string, PivotedRow> = new Map();
+
+  for (const bucket of buckets) {
+    let row: PivotedRow | undefined = map.get(bucket.time);
+
+    if (!row) {
+      row = { time: bucket.time };
+      map.set(bucket.time, row);
+    }
+
+    row[bucket.severity] =
+      ((row[bucket.severity] as number) || 0) + bucket.count;
+  }
+
+  return Array.from(map.values());
+}
+
+function formatTickTime(time: string): string {
+  const date: Date = new Date(time);
+
+  if (isNaN(date.getTime())) {
+    return time;
+  }
+
+  return date.toLocaleTimeString([], {
+    hour: "2-digit",
+    minute: "2-digit",
+    hour12: false,
+  });
+}
+
+function formatYAxisTick(value: number): string {
+  if (value >= 1000000) {
+    return `${(value / 1000000).toFixed(1)}M`;
+  }
+
+  if (value >= 1000) {
+    return `${(value / 1000).toFixed(value >= 10000 ? 0 : 1)}K`;
+  }
+
+  return value.toString();
+}
+
+const LogsHistogram: FunctionComponent<LogsHistogramProps> = (
+  props: LogsHistogramProps,
+): ReactElement => {
+  const [selectionStart, setSelectionStart] = useState<string | null>(null);
+  const [selectionEnd, setSelectionEnd] = useState<string | null>(null);
+  const isSelecting: React.MutableRefObject<boolean> = useRef(false);
+
+  const pivotedData: Array<PivotedRow> = useMemo(() => {
+    return pivotBuckets(props.buckets);
+  }, [props.buckets]);
+
+  const activeSeverities: Array<string> = useMemo(() => {
+    const present: Set<string> = new Set<string>();
+
+    for (const bucket of props.buckets) {
+      present.add(bucket.severity);
+    }
+
+    return getAllSeverityKeys().filter((key: string): boolean => {
+      return present.has(key);
+    });
+  }, [props.buckets]);
+
+  const handleMouseDown: (e: any) => void = useCallback(
+    (e: any): void => {
+      if (!props.onTimeRangeSelect || !e?.activeLabel) {
+        return;
+      }
+
+      isSelecting.current = true;
+      setSelectionStart(e.activeLabel as string);
+      setSelectionEnd(null);
+    },
+    [props.onTimeRangeSelect],
+  );
+
+  const handleMouseMove: (e: any) => void = useCallback((e: any): void => {
+    if (!isSelecting.current || !e?.activeLabel) {
+      return;
+    }
+
+    setSelectionEnd(e.activeLabel as string);
+  }, []);
+
+  const handleMouseUp: () => void = useCallback((): void => {
+    if (
+      !isSelecting.current ||
+      !selectionStart ||
+      !selectionEnd ||
+      !props.onTimeRangeSelect
+    ) {
+      isSelecting.current = false;
+      setSelectionStart(null);
+      setSelectionEnd(null);
+      return;
+    }
+
+    isSelecting.current = false;
+
+    const start: Date = new Date(selectionStart);
+    const end: Date = new Date(selectionEnd);
+
+    if (isNaN(start.getTime()) || isNaN(end.getTime())) {
+      setSelectionStart(null);
+      setSelectionEnd(null);
+      return;
+    }
+
+    const earlierDate: Date = start < end ? start : end;
+    const laterDate: Date = start < end ? end : start;
+
+    props.onTimeRangeSelect(earlierDate, laterDate);
+
+    setSelectionStart(null);
+    setSelectionEnd(null);
+  }, [selectionStart, selectionEnd, props.onTimeRangeSelect]);
+
+  if (props.isLoading && pivotedData.length === 0) {
+    return (
+      <div className="flex h-32 items-center justify-center rounded-lg border border-gray-200 bg-white">
+        <ComponentLoader />
+      </div>
+    );
+  }
+
+  if (pivotedData.length === 0) {
+    return <></>;
+  }
+
+  return (
+    <div className="rounded-lg border border-gray-200 bg-white">
+      {/* Header with legend */}
+      <div className="flex items-center justify-between border-b border-gray-100 px-4 py-2">
+        <div className="flex items-center gap-2">
+          <span className="text-xs font-medium text-gray-500">Log Volume</span>
+          {props.onTimeRangeSelect && (
+            <span className="text-[10px] text-gray-300">Drag to zoom</span>
+          )}
+        </div>
+        <div className="flex items-center gap-3">
+          {activeSeverities.map((severity: string) => {
+            const color: SeverityColor = getSeverityColor(severity);
+            return (
+              <div key={severity} className="flex items-center gap-1.5">
+                <span
+                  className="inline-block h-2.5 w-2.5 rounded-sm"
+                  style={{ backgroundColor: color.fill }}
+                />
+                <span className="text-[11px] text-gray-500">{color.label}</span>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+
+      {/* Chart */}
+      <div
+        className="px-2 pb-1 pt-2"
+        style={{
+          height: 120,
+          cursor: props.onTimeRangeSelect ? "crosshair" : "default",
+        }}
+      >
+        <ResponsiveContainer width="100%" height="100%">
+          <BarChart
+            data={pivotedData}
+            margin={{ top: 4, right: 8, bottom: 0, left: -4 }}
+            onMouseDown={handleMouseDown}
+            onMouseMove={handleMouseMove}
+            onMouseUp={handleMouseUp}
+            barCategoryGap="15%"
+            barGap={0}
+          >
+            <XAxis
+              dataKey="time"
+              tickFormatter={formatTickTime}
+              tick={{ fontSize: 10, fill: "#9ca3af" }}
+              axisLine={{ stroke: "#e5e7eb" }}
+              tickLine={false}
+              minTickGap={40}
+              dy={4}
+              interval="preserveStartEnd"
+            />
+            <YAxis
+              tick={{ fontSize: 10, fill: "#9ca3af" }}
+              axisLine={false}
+              tickLine={false}
+              width={48}
+              allowDecimals={false}
+              tickFormatter={formatYAxisTick}
+            />
+            <Tooltip
+              content={<HistogramTooltip />}
+              cursor={{ fill: "rgba(99,102,241,0.06)" }}
+            />
+            {activeSeverities.map((severity: string, index: number) => {
+              const isLast: boolean = index === activeSeverities.length - 1;
+              return (
+                <Bar
+                  key={severity}
+                  dataKey={severity}
+                  stackId="severity"
+                  fill={getSeverityColor(severity).fill}
+                  radius={isLast ? [1.5, 1.5, 0, 0] : [0, 0, 0, 0]}
+                  isAnimationActive={false}
+                  maxBarSize={24}
+                />
+              );
+            })}
+            {selectionStart && selectionEnd && (
+              <ReferenceArea
+                x1={selectionStart}
+                x2={selectionEnd}
+                fill="rgba(99,102,241,0.12)"
+                stroke="rgba(99,102,241,0.5)"
+                strokeWidth={1}
+                radius={2}
+              />
+            )}
+          </BarChart>
+        </ResponsiveContainer>
+      </div>
+    </div>
+  );
+};
+
+export default LogsHistogram;

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

@@ -37,12 +37,12 @@ const LogsPagination: FunctionComponent<LogsPaginationProps> = (
     props.isDisabled || props.totalItems === 0 || safeCurrentPage >= totalPages;
 
   return (
-    <div className="flex flex-col gap-3 border-t border-slate-800 bg-slate-950/60 px-4 py-3 text-xs text-slate-400 md:flex-row md:items-center md:justify-between">
+    <div className="flex flex-col gap-3 border-t border-gray-200 bg-gray-50/50 px-4 py-2.5 text-xs text-gray-500 md:flex-row md:items-center md:justify-between">
       <div>
         {props.totalItems === 0 ? (
-          <span>No results to display.</span>
+          <span className="text-gray-500">No results to display.</span>
         ) : (
-          <span>
+          <span className="text-gray-500">
             Showing {firstItemIndex.toLocaleString()}-
             {lastItemIndex.toLocaleString()} of{" "}
             {props.totalItems.toLocaleString()}
@@ -51,10 +51,12 @@ const LogsPagination: FunctionComponent<LogsPaginationProps> = (
       </div>
 
       <div className="flex flex-wrap items-center gap-3">
-        <label className="flex items-center gap-2 text-slate-500">
-          <span className="uppercase tracking-wide text-[10px]">Rows</span>
+        <label className="flex items-center gap-2">
+          <span className="text-[10px] uppercase tracking-wide text-gray-400">
+            Rows
+          </span>
           <select
-            className="rounded-md border border-slate-700 bg-slate-900/80 px-2 py-1 text-xs text-slate-200 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 disabled:cursor-not-allowed disabled:opacity-50"
+            className="rounded-md border border-gray-200 bg-white px-2 py-1 text-xs text-gray-700 focus:border-indigo-400 focus:outline-none focus:ring-1 focus:ring-indigo-200"
             value={props.pageSize}
             onChange={(event: React.ChangeEvent<HTMLSelectElement>) => {
               const size: number = Number(event.target.value) || props.pageSize;
@@ -72,10 +74,10 @@ const LogsPagination: FunctionComponent<LogsPaginationProps> = (
           </select>
         </label>
 
-        <div className="inline-flex items-center gap-1 rounded-full border border-slate-800 bg-slate-900/70 p-0.5">
+        <div className="inline-flex items-center gap-1 rounded-lg border border-gray-200 bg-white p-0.5">
           <button
             type="button"
-            className="rounded-full px-3 py-1 text-xs font-medium text-slate-300 transition-colors hover:bg-slate-800 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 disabled:cursor-not-allowed disabled:opacity-40"
+            className="rounded-md px-3 py-1 text-xs font-medium text-gray-600 transition-colors hover:bg-gray-50 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-300 disabled:cursor-not-allowed disabled:opacity-40"
             onClick={() => {
               if (!disablePrev) {
                 props.onPageChange(Math.max(1, safeCurrentPage - 1));
@@ -85,12 +87,12 @@ const LogsPagination: FunctionComponent<LogsPaginationProps> = (
           >
             Previous
           </button>
-          <span className="px-3 text-[11px] uppercase tracking-wide text-slate-500">
+          <span className="px-3 text-[11px] text-gray-400">
             Page {safeCurrentPage} / {totalPages}
           </span>
           <button
             type="button"
-            className="rounded-full px-3 py-1 text-xs font-medium text-slate-300 transition-colors hover:bg-slate-800 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 disabled:cursor-not-allowed disabled:opacity-40"
+            className="rounded-md px-3 py-1 text-xs font-medium text-gray-600 transition-colors hover:bg-gray-50 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-300 disabled:cursor-not-allowed disabled:opacity-40"
             onClick={() => {
               if (!disableNext) {
                 props.onPageChange(Math.min(totalPages, safeCurrentPage + 1));

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

@@ -77,23 +77,23 @@ const LogsTable: FunctionComponent<LogsTableProps> = (
   ): string => {
     const base: string = "h-3.5 w-3.5 flex-none transition-colors";
     if (activeSortField === field) {
-      return `${base} text-indigo-300`;
+      return `${base} text-indigo-500`;
     }
 
-    return `${base} text-slate-600`;
+    return `${base} text-gray-300`;
   };
 
   return (
     <div className="relative">
-      <div className="overflow-x-auto overflow-y-hidden border-b border-slate-900 bg-slate-950">
-        <table className="min-w-full divide-y divide-slate-900/80">
-          <thead className="bg-slate-950">
-            <tr className="text-left text-[11px] font-semibold uppercase tracking-wider text-slate-200">
-              <th scope="col" className="px-4 py-3">
+      <div className="overflow-x-auto bg-white">
+        <table className="min-w-full">
+          <thead className="bg-gray-50/80">
+            <tr className="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500">
+              <th scope="col" className="px-4 py-2.5">
                 <button
                   type="button"
-                  className={`flex items-center gap-2 text-left font-semibold tracking-wider text-slate-300 transition-colors hover:text-slate-100 focus:outline-none ${
-                    activeSortField === "time" ? "text-slate-100" : ""
+                  className={`flex items-center gap-2 text-left font-semibold tracking-wider text-gray-500 transition-colors hover:text-gray-700 focus:outline-none ${
+                    activeSortField === "time" ? "text-gray-700" : ""
                   }`}
                   onClick={() => {
                     props.onSortChange?.("time");
@@ -114,14 +114,14 @@ const LogsTable: FunctionComponent<LogsTableProps> = (
                   />
                 </button>
               </th>
-              <th scope="col" className="px-4 py-3">
-                Service
+              <th scope="col" className="px-4 py-2.5">
+                <span>Service</span>
               </th>
-              <th scope="col" className="px-4 py-3">
+              <th scope="col" className="px-4 py-2.5">
                 <button
                   type="button"
-                  className={`flex items-center gap-2 text-left font-semibold tracking-wider text-slate-300 transition-colors hover:text-slate-100 focus:outline-none ${
-                    activeSortField === "severityText" ? "text-slate-100" : ""
+                  className={`flex items-center gap-2 text-left font-semibold tracking-wider text-gray-500 transition-colors hover:text-gray-700 focus:outline-none ${
+                    activeSortField === "severityText" ? "text-gray-700" : ""
                   }`}
                   onClick={() => {
                     props.onSortChange?.("severityText");
@@ -142,12 +142,12 @@ const LogsTable: FunctionComponent<LogsTableProps> = (
                   />
                 </button>
               </th>
-              <th scope="col" className="px-4 py-3">
+              <th scope="col" className="px-4 py-2.5">
                 Message
               </th>
             </tr>
           </thead>
-          <tbody className="divide-y divide-slate-900/70 bg-slate-950">
+          <tbody className="divide-y divide-gray-100">
             {props.logs.map((log: Log, index: number) => {
               const rowId: string = resolveLogIdentifier(log, index);
               const serviceId: string = log.serviceId?.toString() || "";
@@ -173,25 +173,25 @@ const LogsTable: FunctionComponent<LogsTableProps> = (
                     onClick={() => {
                       props.onRowClick(log, rowId);
                     }}
-                    className={`group cursor-pointer align-top transition-colors duration-150 hover:bg-slate-900 ${
+                    className={`group cursor-pointer align-top transition-colors hover:bg-gray-50/70 border-l-[3px] ${severityTheme.borderClass} ${
                       isSelected
-                        ? "bg-slate-900 ring-1 ring-inset ring-indigo-500/40"
+                        ? "bg-indigo-50/50 ring-1 ring-inset ring-indigo-200"
                         : ""
                     }`}
                     aria-selected={isSelected}
                     aria-expanded={isSelected}
                   >
-                    <td className="whitespace-nowrap px-4 py-3 text-[13px] font-mono text-slate-200">
+                    <td className="whitespace-nowrap px-4 py-2 text-[13px] font-mono text-gray-600">
                       {log.time
                         ? OneUptimeDate.getDateAsUserFriendlyFormattedString(
                             log.time,
                           )
                         : "-"}
                     </td>
-                    <td className="px-4 py-3">
-                      <div className="flex items-center gap-3 text-sm text-slate-300">
+                    <td className="px-4 py-2">
+                      <div className="flex items-center gap-3 text-sm text-gray-700">
                         <span
-                          className="h-2.5 w-2.5 flex-none rounded-full border border-slate-900/40 shadow-sm"
+                          className="h-2.5 w-2.5 flex-none rounded-full shadow-sm"
                           style={{ backgroundColor: serviceColor }}
                           aria-hidden="true"
                         />
@@ -200,20 +200,20 @@ const LogsTable: FunctionComponent<LogsTableProps> = (
                         </span>
                       </div>
                     </td>
-                    <td className="px-4 py-3">
+                    <td className="px-4 py-2">
                       <SeverityBadge severity={log.severityText} />
                     </td>
-                    <td className="px-4 py-3">
+                    <td className="px-4 py-2">
                       <div className="flex items-start justify-between gap-3">
                         <div className="flex min-w-0 flex-1 flex-col gap-1">
                           <p
-                            className={`whitespace-pre-wrap break-words text-sm text-slate-200 transition-colors duration-150 group-hover:text-slate-50 ${severityTheme.textClass}`}
+                            className="whitespace-pre-wrap break-words text-sm text-gray-800"
                             title={message}
                           >
                             {message || "-"}
                           </p>
                           {(traceId || spanId) && (
-                            <div className="flex flex-wrap gap-3 text-[11px] tracking-wide text-slate-500">
+                            <div className="flex flex-wrap gap-3 text-[11px] tracking-wide text-gray-400">
                               {traceId && <span>Trace: {traceId}</span>}
                               {spanId && <span>Span: {spanId}</span>}
                             </div>
@@ -225,13 +225,14 @@ const LogsTable: FunctionComponent<LogsTableProps> = (
                           variant="ghost"
                           iconOnly={true}
                           title="Copy log message"
+                          className="opacity-0 group-hover:opacity-100 transition-opacity"
                         />
                       </div>
                     </td>
                   </tr>
 
                   {isSelected && props.renderExpandedContent && (
-                    <tr className="bg-slate-950/70">
+                    <tr className="bg-white">
                       <td colSpan={4} className="px-6 pb-6 pt-3">
                         {props.renderExpandedContent(log)}
                       </td>
@@ -245,18 +246,18 @@ const LogsTable: FunctionComponent<LogsTableProps> = (
       </div>
 
       {props.isLoading && (
-        <div className="absolute inset-0 flex items-center justify-center bg-slate-950/70 backdrop-blur-md">
+        <div className="absolute inset-0 flex items-center justify-center bg-white/80 backdrop-blur-sm">
           <ComponentLoader />
         </div>
       )}
 
       {showEmptyState && (
-        <div className="flex h-full items-center justify-center px-6 py-12 text-center bg-slate-950">
-          <div className="w-full max-w-xl rounded-md border border-slate-900/70 bg-slate-950 p-6 text-left shadow-inner">
-            <p className="font-mono text-sm uppercase text-slate-400">
+        <div className="flex h-full items-center justify-center px-6 py-12 text-center bg-white">
+          <div className="w-full max-w-xl rounded-md border border-gray-200 bg-white p-6 text-left shadow-sm">
+            <p className="font-mono text-sm uppercase text-gray-500">
               No logs found
             </p>
-            <p className="mt-3 font-mono text-xs text-slate-500">
+            <p className="mt-3 font-mono text-xs text-gray-400">
               {props.emptyMessage || "Adjust filters or check again later."}
             </p>
           </div>

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

@@ -1,16 +1,17 @@
 import React, { FunctionComponent, ReactElement } from "react";
-import Button, { ButtonSize, ButtonStyleType } from "../../Button/Button";
 import LiveLogsToggle from "./LiveLogsToggle";
+import LogTimeRangePicker from "./LogTimeRangePicker";
 import { LiveLogsOptions } from "../types";
+import RangeStartAndEndDateTime from "../../../../Types/Time/RangeStartAndEndDateTime";
 
 export interface LogsViewerToolbarProps {
   resultCount: number;
-  showApplyButton?: boolean;
-  onApplyFilters?: () => void;
   currentPage?: number;
   totalPages?: number;
   className?: string;
   liveOptions?: LiveLogsOptions;
+  timeRange?: RangeStartAndEndDateTime;
+  onTimeRangeChange?: (value: RangeStartAndEndDateTime) => void;
 }
 
 const LogsViewerToolbar: FunctionComponent<LogsViewerToolbarProps> = (
@@ -23,31 +24,28 @@ const LogsViewerToolbar: FunctionComponent<LogsViewerToolbarProps> = (
 
   return (
     <div
-      className={`flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between ${props.className || ""}`}
+      className={`flex items-center justify-between gap-3 ${props.className || ""}`}
     >
-      <div className="flex flex-wrap items-center gap-3 text-xs text-slate-400">
-        <span className="font-medium text-slate-300">
+      <div className="flex flex-wrap items-center gap-3 text-xs text-gray-500">
+        <span className="font-medium text-gray-700">
           {props.resultCount.toLocaleString()} result
           {props.resultCount === 1 ? "" : "s"}
         </span>
         {hasPaginationSummary && (
-          <span className="text-slate-500">
+          <span className="text-gray-400">
             Page {currentPage} of {totalPages}
           </span>
         )}
       </div>
 
-      <div className="flex flex-wrap items-center gap-2">
-        {props.liveOptions && <LiveLogsToggle {...props.liveOptions} />}
-        {props.showApplyButton && props.onApplyFilters && (
-          <Button
-            title="Apply Filters"
-            buttonStyle={ButtonStyleType.NORMAL}
-            buttonSize={ButtonSize.Small}
-            onClick={props.onApplyFilters}
-          />
-        )}
-      </div>
+      {props.timeRange && props.onTimeRangeChange && (
+        <LogTimeRangePicker
+          value={props.timeRange}
+          onChange={props.onTimeRangeChange}
+        />
+      )}
+
+      {props.liveOptions && <LiveLogsToggle {...props.liveOptions} />}
     </div>
   );
 };

package/UI/Components/LogsViewer/components/severityColors.ts

@@ -0,0 +1,31 @@
+import LogSeverity from "../../../../Types/Log/LogSeverity";
+
+export interface SeverityColor {
+  fill: string;
+  label: string;
+}
+
+const severityColorMap: Record<string, SeverityColor> = {
+  [LogSeverity.Fatal]: { fill: "#dc2626", label: "Fatal" },
+  [LogSeverity.Error]: { fill: "#f87171", label: "Error" },
+  [LogSeverity.Warning]: { fill: "#f59e0b", label: "Warning" },
+  [LogSeverity.Information]: { fill: "#60a5fa", label: "Info" },
+  [LogSeverity.Debug]: { fill: "#a78bfa", label: "Debug" },
+  [LogSeverity.Trace]: { fill: "#9ca3af", label: "Trace" },
+  Unspecified: { fill: "#cbd5e1", label: "Unspecified" },
+};
+
+const defaultSeverityColor: SeverityColor = {
+  fill: "#cbd5e1",
+  label: "Unknown",
+};
+
+export function getSeverityColor(severity: string): SeverityColor {
+  return severityColorMap[severity] || defaultSeverityColor;
+}
+
+export function getAllSeverityKeys(): Array<string> {
+  return Object.keys(severityColorMap);
+}
+
+export default severityColorMap;

package/UI/Components/LogsViewer/components/severityTheme.ts

@@ -9,48 +9,48 @@ export interface SeverityTheme {
 
 const severityThemeMap: Record<string, SeverityTheme> = {
   [LogSeverity.Fatal]: {
-    badgeClass: "bg-rose-950/80 text-rose-100 ring-rose-500/40",
+    badgeClass: "bg-rose-50 text-rose-700 ring-rose-200",
     dotClass: "bg-rose-500",
-    borderClass: "border-rose-500/50",
-    textClass: "text-rose-100",
+    borderClass: "border-rose-200",
+    textClass: "text-gray-800",
   },
   [LogSeverity.Error]: {
-    badgeClass: "bg-rose-900/60 text-rose-100 ring-rose-500/30",
-    dotClass: "bg-rose-400",
-    borderClass: "border-rose-500/40",
-    textClass: "text-rose-100",
+    badgeClass: "bg-red-50 text-red-700 ring-red-200",
+    dotClass: "bg-red-400",
+    borderClass: "border-red-200",
+    textClass: "text-gray-800",
   },
   [LogSeverity.Warning]: {
-    badgeClass: "bg-amber-900/50 text-amber-100 ring-amber-500/30",
+    badgeClass: "bg-amber-50 text-amber-700 ring-amber-200",
     dotClass: "bg-amber-400",
-    borderClass: "border-amber-400/40",
-    textClass: "text-amber-100",
+    borderClass: "border-amber-200",
+    textClass: "text-gray-800",
   },
   [LogSeverity.Information]: {
-    badgeClass: "bg-sky-900/50 text-sky-100 ring-sky-500/30",
-    dotClass: "bg-sky-400",
-    borderClass: "border-sky-400/40",
-    textClass: "text-sky-100",
+    badgeClass: "bg-blue-50 text-blue-700 ring-blue-200",
+    dotClass: "bg-blue-400",
+    borderClass: "border-blue-200",
+    textClass: "text-gray-800",
   },
   [LogSeverity.Debug]: {
-    badgeClass: "bg-purple-900/50 text-purple-100 ring-purple-500/30",
+    badgeClass: "bg-purple-50 text-purple-700 ring-purple-200",
     dotClass: "bg-purple-400",
-    borderClass: "border-purple-500/30",
-    textClass: "text-purple-100",
+    borderClass: "border-purple-200",
+    textClass: "text-gray-800",
   },
   [LogSeverity.Trace]: {
-    badgeClass: "bg-slate-900/60 text-slate-300 ring-slate-500/20",
-    dotClass: "bg-slate-400",
-    borderClass: "border-slate-600/40",
-    textClass: "text-slate-200",
+    badgeClass: "bg-gray-50 text-gray-600 ring-gray-200",
+    dotClass: "bg-gray-400",
+    borderClass: "border-gray-200",
+    textClass: "text-gray-800",
   },
 };
 
 const defaultTheme: SeverityTheme = {
-  badgeClass: "bg-slate-800/60 text-slate-300 ring-slate-600/20",
-  dotClass: "bg-slate-500",
-  borderClass: "border-slate-700",
-  textClass: "text-slate-200",
+  badgeClass: "bg-gray-50 text-gray-600 ring-gray-200",
+  dotClass: "bg-gray-400",
+  borderClass: "border-gray-200",
+  textClass: "text-gray-800",
 };
 
 export const getSeverityTheme: (