From fce2344c9a5596640bab96f7096dd156131b5afa Mon Sep 17 00:00:00 2001
From: Dan Ditomaso <dan.ditomaso@gmail.com>
Date: Wed, 30 Apr 2025 12:54:07 -0400
Subject: [PATCH] fix: more dark mode styling improvements

---
 src/components/PageComponents/Map/NodeDetail.tsx | 16 ++++++++--------
 src/components/PageLayout.tsx                    |  2 +-
 src/components/UI/Button.tsx                     |  2 +-
 src/components/UI/Dialog.tsx                     |  2 +-
 src/components/UI/Footer.tsx                     |  2 +-
 src/components/UI/Typography/Subtle.tsx          |  2 +-
 src/components/generic/Mono.tsx                  | 10 ++++++++--
 src/pages/Map/index.tsx                          |  1 +
 8 files changed, 22 insertions(+), 15 deletions(-)

diff --git a/src/components/PageComponents/Map/NodeDetail.tsx b/src/components/PageComponents/Map/NodeDetail.tsx
index 95964bcc..214a037c 100644
--- a/src/components/PageComponents/Map/NodeDetail.tsx
+++ b/src/components/PageComponents/Map/NodeDetail.tsx
@@ -49,7 +49,7 @@ export const NodeDetail = ({ node }: NodeDetailProps) => {
   }
 
   return (
-    <div className="p-1">
+    <div className="p-1 text-slate-900">
       <div className="flex gap-2">
         <div className="flex flex-col items-center gap-2 min-w-6 pt-1">
           <Avatar text={shortName} size="sm" />
@@ -113,17 +113,17 @@ export const NodeDetail = ({ node }: NodeDetailProps) => {
 
           {!!node.deviceMetrics?.batteryLevel && (
             <div
-              className="flex items-center gap-1 mt-0.5"
+              className="flex items-center gap-1 mt-0.5 text-gray-500"
               title={`${node.deviceMetrics?.voltage?.toPrecision(3) ?? "Unknown"
                 } volts`}
             >
               {node.deviceMetrics?.batteryLevel > 100
-                ? <BatteryChargingIcon size={22} />
+                ? <BatteryChargingIcon size={22} className="text-gray-600" />
                 : node.deviceMetrics?.batteryLevel > 80
-                  ? <BatteryFullIcon size={22} />
+                  ? <BatteryFullIcon size={22} className="text-green-500" />
                   : node.deviceMetrics?.batteryLevel > 20
-                    ? <BatteryMediumIcon size={22} />
-                    : <BatteryLowIcon size={22} />}
+                    ? <BatteryMediumIcon size={22} className="text-yellow-400" />
+                    : <BatteryLowIcon size={22} className="text-red-500" />}
               <Subtle aria-label="Battery">
                 {node.deviceMetrics?.batteryLevel > 100
                   ? "Charging"
@@ -197,7 +197,7 @@ export const NodeDetail = ({ node }: NodeDetailProps) => {
         {!!node.deviceMetrics?.airUtilTx && (
           <div className="grow">
             <div>Airtime Util</div>
-            <Mono>{node.deviceMetrics?.airUtilTx.toPrecision(3)}%</Mono>
+            <Mono className="text-gray-500">{node.deviceMetrics?.airUtilTx.toPrecision(3)}%</Mono>
           </div>
         )}
       </div>
@@ -205,7 +205,7 @@ export const NodeDetail = ({ node }: NodeDetailProps) => {
       {node.snr !== 0 && (
         <div className="mt-2">
           <div>SNR</div>
-          <Mono className="flex items-center text-xs">
+          <Mono className="flex items-center text-xs text-gray-500">
             {node.snr}db
             <Dot />
             {Math.min(Math.max((node.snr + 10) * 5, 0), 100)}%
diff --git a/src/components/PageLayout.tsx b/src/components/PageLayout.tsx
index 673ca78d..5799f8c1 100644
--- a/src/components/PageLayout.tsx
+++ b/src/components/PageLayout.tsx
@@ -112,7 +112,7 @@ export const PageLayout = ({
         {rightBar && (
           <aside
             className={cn(
-              "w-76 max-w-76 shrink-0 border-l border-slate-300 dark:border-slate-700 p-2 overflow-hidden",
+              "w-56 lg:w-76 max-w-76 shrink-0 border-l border-slate-300 dark:border-slate-700 p-2 overflow-hidden",
               rightBarClassName
             )}
           >
diff --git a/src/components/UI/Button.tsx b/src/components/UI/Button.tsx
index b36fca54..39be63d8 100644
--- a/src/components/UI/Button.tsx
+++ b/src/components/UI/Button.tsx
@@ -8,7 +8,7 @@ const buttonVariants = cva(
     variants: {
       variant: {
         default:
-          "bg-slate-900 text-white dark:bg-slate-200 hover:dark:bg-slate-300 dark:text-slate-900 hover:bg-slate-500",
+          "bg-slate-900 text-white dark:bg-slate-50 hover:dark:bg-slate-200 dark:text-slate-900 hover:bg-slate-500",
         destructive:
           "bg-red-500 text-white hover:bg-red-600 dark:hover:bg-red-600",
         success:
diff --git a/src/components/UI/Dialog.tsx b/src/components/UI/Dialog.tsx
index 95b9516c..a92474d5 100644
--- a/src/components/UI/Dialog.tsx
+++ b/src/components/UI/Dialog.tsx
@@ -44,7 +44,7 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed z-50 grid w-full bg-slate-100 dark:bg-slate-700 dark:text-slate-200 text-slate-900 max-w-[512px] max-h-[100vh] overflow-y-auto scale-100 gap-4 p-6 opacity-100 animate-in fade-in-90 slide-in-from-bottom-10 sm:max-w-lg sm:rounded-lg sm:zoom-in-90 sm:slide-in-from-bottom-0",
+        "fixed z-50 grid w-full bg-slate-100 dark:bg-slate-800 dark:text-slate-200 text-slate-900 max-w-[512px] max-h-[100vh] overflow-y-auto scale-100 gap-4 p-6 opacity-100 animate-in fade-in-90 slide-in-from-bottom-10 sm:max-w-lg sm:rounded-lg sm:zoom-in-90 sm:slide-in-from-bottom-0",
         className,
       )}
       {...props}
diff --git a/src/components/UI/Footer.tsx b/src/components/UI/Footer.tsx
index 775b68d7..9f6340f4 100644
--- a/src/components/UI/Footer.tsx
+++ b/src/components/UI/Footer.tsx
@@ -7,7 +7,7 @@ type FooterProps = {
 const Footer = ({ className, ...props }: FooterProps) => {
   return (
     <footer
-      className={cn("flex mt-auto justify-center p-2", className)}
+      className={cn("flex mt-auto justify-center p-2 text-sm lg:text-md", className)}
       {...props}
     >
       <p>
diff --git a/src/components/UI/Typography/Subtle.tsx b/src/components/UI/Typography/Subtle.tsx
index 753ff5ef..6a2f7568 100644
--- a/src/components/UI/Typography/Subtle.tsx
+++ b/src/components/UI/Typography/Subtle.tsx
@@ -6,7 +6,7 @@ export interface SubtleProps {
 }
 
 export const Subtle = ({ className, children }: SubtleProps) => (
-  <p className={cn("text-sm text-slate-500 dark:text-slate-300", className)}>
+  <p className={cn("text-sm text-slate-500 dark:text-slate-400", className)}>
     {children}
   </p>
 );
diff --git a/src/components/generic/Mono.tsx b/src/components/generic/Mono.tsx
index af565a33..c3d0d61d 100644
--- a/src/components/generic/Mono.tsx
+++ b/src/components/generic/Mono.tsx
@@ -1,11 +1,17 @@
+import { cn } from "@core/utils/cn.ts";
+
+interface MonoProps extends React.HTMLAttributes<HTMLSpanElement> {
+  children: React.ReactNode;
+  className?: string;
+}
 export const Mono = ({
   children,
   className,
   ...rest
-}: JSX.IntrinsicElements["span"]) => {
+}: MonoProps) => {
   return (
     <span
-      className={`font-mono text-sm text-text-secondary ${className ?? ""}`}
+      className={cn("font-mono text-sm text-text-secondary", className)}
       {...rest}
     >
       {children}
diff --git a/src/pages/Map/index.tsx b/src/pages/Map/index.tsx
index 26c2bc08..3e34d05e 100644
--- a/src/pages/Map/index.tsx
+++ b/src/pages/Map/index.tsx
@@ -200,6 +200,7 @@ const MapPage = () => {
                 longitude={convertToLatLng(selectedNode.position).longitude}
                 latitude={convertToLatLng(selectedNode.position).latitude}
                 onClose={() => setSelectedNode(null)}
+                className="w-full"
               >
                 <NodeDetail node={selectedNode} />
               </Popup>