Multiple theme support & fixes

src/components/PageComponents/Messages/Message.tsx

@@ -6,7 +6,8 @@ import type { AllMessageTypes } from "@core/stores/deviceStore.js";
 import { Hashicon } from "@emeraldpay/hashicon-react";
 import {
   CheckCircleIcon,
-  EllipsisHorizontalCircleIcon
+  EllipsisHorizontalCircleIcon,
+  ExclamationCircleIcon
 } from "@heroicons/react/24/outline";
 import type { Protobuf } from "@meshtastic/meshtasticjs";
 
@@ -31,16 +32,16 @@ export const Message = ({
   return lastMsgSameUser ? (
     <div className="ml-4 flex">
       {message.ack ? (
-        <CheckCircleIcon className="my-auto h-4 text-slate-400" />
+        <CheckCircleIcon className="my-auto h-4 text-textSecondary" />
       ) : (
-        <EllipsisHorizontalCircleIcon className="my-auto h-4 text-slate-200" />
+        <EllipsisHorizontalCircleIcon className="my-auto h-4 text-textSecondary" />
       )}
       {"waypointID" in message ? (
         <WaypointMessage waypointID={message.waypointID} />
       ) : (
         <span
-          className={`ml-4 border-l-2 border-l-slate-200 pl-2 ${
-            message.ack ? "text-black" : "text-slate-500"
+          className={`ml-4 border-l-2 border-l-backgroundPrimary pl-2 ${
+            message.ack ? "text-textPrimary" : "text-textSecondary"
           }`}
         >
           {message.text}
@@ -54,12 +55,12 @@ export const Message = ({
           <Hashicon value={(sender?.num ?? 0).toString()} size={32} />
         </div>
         <span
-          className="cursor-pointer font-medium text-slate-700"
+          className="cursor-pointer font-medium text-textPrimary"
           onClick={openPeer}
         >
           {sender?.user?.longName ?? "UNK"}
         </span>
-        <span className="text-sm">
+        <span className="mt-1 font-mono text-xs text-textSecondary">
           {new Date(message.packet.rxTime).toLocaleTimeString(undefined, {
             hour: "2-digit",
             minute: "2-digit"
@@ -67,17 +68,18 @@ export const Message = ({
         </span>
       </div>
       <div className="flex">
+        {/* <ExclamationCircleIcon /> */}
         {message.ack ? (
-          <CheckCircleIcon className="my-auto h-4 text-slate-400" />
+          <CheckCircleIcon className="my-auto h-4 text-textSecondary" />
         ) : (
-          <EllipsisHorizontalCircleIcon className="my-auto h-4 text-slate-200" />
+          <EllipsisHorizontalCircleIcon className="my-auto h-4 text-textSecondary" />
         )}
         {"waypointID" in message ? (
           <WaypointMessage waypointID={message.waypointID} />
         ) : (
           <span
-            className={`ml-4 border-l-2 border-l-slate-200 pl-2 ${
-              message.ack ? "text-black" : "text-slate-500"
+            className={`ml-4 border-l-2 border-l-backgroundPrimary pl-2 ${
+              message.ack ? "text-textPrimary" : "text-textSecondary"
             }`}
           >
             {message.text}