Merge branch 'master' into feat/add-error-boundary

src/pages/Config/DeviceConfig.tsx

@@ -5,7 +5,7 @@ import { LoRa } from "@components/PageComponents/Config/LoRa.tsx";
 import { Network } from "@components/PageComponents/Config/Network.tsx";
 import { Position } from "@components/PageComponents/Config/Position.tsx";
 import { Power } from "@components/PageComponents/Config/Power.tsx";
-import { Security } from "@components/PageComponents/Config/Security.tsx";
+import { Security } from "@components/PageComponents/Config/Security/Security";
 import {
   Tabs,
   TabsContent,

src/pages/Dashboard/index.tsx

@@ -34,7 +34,7 @@ export const Dashboard = () => {
 
         <div className="flex h-[450px] rounded-md border border-dashed border-slate-200 p-3 dark:border-slate-700">
           {devices.length ? (
-            <ul className="grow divide-y divide-gray-200">
+            <ul className="grow divide-y divide-slate-200">
               {devices.map((device) => {
                 return (
                   <li key={device.id}>
@@ -72,10 +72,10 @@ export const Dashboard = () => {
                         </div>
                       </div>
                       <div className="mt-2 sm:flex sm:justify-between">
-                        <div className="flex gap-2 text-sm text-gray-500">
+                        <div className="flex gap-2 text-sm text-slate-500">
                           <UsersIcon
                             size={20}
-                            className="text-gray-400"
+                            className="text-slate-400"
                             aria-hidden="true"
                           />
                           {device.nodes.size === 0 ? 0 : device.nodes.size - 1}
@@ -92,7 +92,7 @@ export const Dashboard = () => {
               <Heading as="h3">No Devices</Heading>
               <Subtle>Connect at least one device to get started</Subtle>
               <Button
-                className="gap-2"
+                className="gap-2 dark:bg-white dark:text-slate-900 dark:hover:text-slate-100"
                 variant={"default"}
                 onClick={() => setConnectDialogOpen(true)}
               >

src/pages/Messages.tsx

@@ -62,7 +62,7 @@ export const MessagesPage = () => {
               placeholder="Search nodes..."
               value={searchTerm}
               onChange={(e) => setSearchTerm(e.target.value)}
-              className="w-full p-2 border border-gray-300 rounded-sm bg-white text-slate-900"
+              className="w-full p-2 border border-slate-300 rounded-sm bg-white text-slate-900"
             />
           </div>
           <div className="flex flex-col gap-4">

src/pages/Nodes.tsx

@@ -63,9 +63,10 @@ const NodesPage = (): JSX.Element => {
 
   const handleLocation = useCallback(
     (location: Types.PacketMetadata<Protobuf.Mesh.Position>) => {
+      if (location.to.valueOf() !== hardware.myNodeNum) return;
       setSelectedLocation(location);
     },
-    [],
+    [hardware.myNodeNum],
   );
 
   return (
@@ -78,7 +79,7 @@ const NodesPage = (): JSX.Element => {
             placeholder="Search nodes..."
             value={searchTerm}
             onChange={(e) => setSearchTerm(e.target.value)}
-            className="w-full p-2 border border-gray-300 rounded-sm bg-white text-slate-900"
+            className="w-full p-2 border border-slate-300 rounded-sm bg-white text-slate-900"
           />
         </div>
         <div className="overflow-y-auto h-full">