Multiple theme support & fixes

src/components/PageComponents/Messages/ChannelChat.tsx

@@ -10,7 +10,7 @@ export interface ChannelChatProps {
 }
 
 export const ChannelChat = ({ channel }: ChannelChatProps): JSX.Element => {
-  const { nodes, connection, ackMessage } = useDevice();
+  const { nodes } = useDevice();
 
   return (
     <div className="flex flex-grow flex-col">
@@ -31,7 +31,9 @@ export const ChannelChat = ({ channel }: ChannelChatProps): JSX.Element => {
           />
         ))}
       </div>
-      <MessageInput channel={channel} />
+      <div className="p-3">
+        <MessageInput channel={channel} />
+      </div>
     </div>
   );
 };

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}

src/components/PageComponents/Messages/MessageInput.tsx

@@ -50,15 +50,11 @@ export const MessageInput = ({ channel }: MessageInputProps): JSX.Element => {
             />
           </span>
           <IconButton
-            variant="secondary"
-            icon={<PaperAirplaneIcon className="h-4 text-slate-500" />}
+            icon={<PaperAirplaneIcon className="text-slate-500 h-4" />}
           />
         </div>
       </form>
-      <IconButton
-        variant="secondary"
-        icon={<MapPinIcon className="h-4 text-slate-500" />}
-      />
+      <IconButton icon={<MapPinIcon className="text-slate-500 h-4" />} />
     </div>
   );
 };

src/components/PageComponents/Messages/WaypointMessage.tsx

@@ -15,13 +15,13 @@ export const WaypointMessage = ({
   const waypoint = waypoints.find((wp) => wp.id === waypointID);
 
   return (
-    <div className="ml-4 border-l-2 border-l-slate-200 pl-2">
-      <div className="flex gap-2 rounded-md p-2 shadow-md shadow-orange-300">
-        <MapPinIcon className="m-auto w-6 text-slate-600" />
+    <div className="border-l-slate-200 ml-4 border-l-2 pl-2">
+      <div className="flex gap-2 rounded-md p-2">
+        <MapPinIcon className="text-slate-600 m-auto w-6" />
         <div>
           <div className="flex gap-2">
             <div className="font-bold">{waypoint?.name}</div>
-            <span className="font-mono text-sm text-slate-500">
+            <span className="text-slate-500 font-mono text-sm">
               {toMGRS(waypoint?.latitudeI, waypoint?.longitudeI)}
             </span>
           </div>