Widget cleanup

src/components/Widgets/BatteryWidget.tsx

@@ -45,38 +45,38 @@ export const BatteryWidget = ({
       if (currentStat && previousStat) {
         const timeDiff = currentTime.getTime() - previousTime.getTime();
         const statDiff = Math.abs(currentStat - previousStat);
-        //convert to ms/%
+        if (statDiff !== 0) {
-        const msPerPercent = timeDiff / statDiff;
+          //convert to ms/%
-        const formatted = prettyMilliseconds(
+          const msPerPercent = timeDiff / statDiff;
-          (100 - currentStat) * msPerPercent
+          const formatted = prettyMilliseconds(
-        );
+            (100 - currentStat) * msPerPercent
-        setTimeRemaining(formatted);
+          );
+          setTimeRemaining(formatted);
+        }
       } else setTimeRemaining("Unknown");
     }
   }, [hardware.myNodeNum, nodes]);
 
   return (
-    <div className="relative overflow-hidden rounded-lg bg-white p-4 shadow">
+    <div className="flex gap-3 overflow-hidden rounded-lg bg-white p-3 shadow">
-      <dt>
+      <div className="rounded-md bg-indigo-500 p-3">
-        <div className="absolute rounded-md bg-indigo-500 p-3">
+        <Battery100Icon className="h-6 text-white" />
-          <Battery100Icon className="h-6 text-white" aria-hidden="true" />
+      </div>
-        </div>
+      <div>
-        <p className="ml-16 truncate text-sm font-medium text-gray-500">
+        <p className="truncate text-sm font-medium text-gray-500">
           Battery State
         </p>
-      </dt>
+        <div className="flex gap-1">
-      <dd className="ml-16 flex items-baseline">
+          <p className="text-xl font-semibold text-gray-900">{batteryLevel}%</p>
-        <p className="text-2xl font-semibold text-gray-900">{batteryLevel}%</p>
+          <div className={`flex text-sm font-semibold text-orange-600`}>
-        <p
+            <ClockIcon
-          className={`ml-2 flex items-baseline text-sm font-semibold text-orange-600`}
+              className="text-Orange-500 h-5 w-5 flex-shrink-0 self-center"
-        >
+              aria-hidden="true"
-          <ClockIcon
+            />
-            className="text-Orange-500 h-5 w-5 flex-shrink-0 self-center"
+            <span className="my-auto">{timeRemaining}</span>
-            aria-hidden="true"
+          </div>
-          />
+        </div>
-          {timeRemaining}
+      </div>
-        </p>
-      </dd>
     </div>
   );
 };

src/components/Widgets/PeersWidget.tsx

@@ -1,16 +1,12 @@
 import type React from "react";
 
-import { base16 } from "rfc4648";
+import { useDevice } from "@app/core/providers/useDevice.js";
-
-import { Hashicon } from "@emeraldpay/hashicon-react";
 import {
-  EllipsisHorizontalCircleIcon,
+  EllipsisHorizontalIcon,
   UserGroupIcon,
 } from "@heroicons/react/24/outline";
 import type { Protobuf } from "@meshtastic/meshtasticjs";
 
-import { Card } from "../Card.js";
-import { Dropdown } from "../Dropdown.js";
 import { IconButton } from "../IconButton.js";
 import { Mono } from "../Mono.js";
 
@@ -19,45 +15,36 @@ export interface PeersWidgetProps {
 }
 
 export const PeersWidget = ({ peers }: PeersWidgetProps): JSX.Element => {
+  const { setActivePage } = useDevice();
+
   return (
-    <Card className="flex-col">
+    <div className="flex gap-3 overflow-hidden rounded-lg bg-white p-3 shadow">
-      <Dropdown
+      <div className="rounded-md bg-emerald-500 p-3">
-        title="Peers"
+        <UserGroupIcon className="h-6 text-white" />
-        stat={peers.length}
+      </div>
-        icon={<UserGroupIcon className="h-4" />}
+      <div>
-      >
+        <p className="truncate text-sm font-medium text-gray-500">
-        <div className="flex flex-col p-3">
+          Connected Peers
-          {peers.map((peer) => (
+        </p>
-            <div
+        <div className="flex gap-1">
-              className="flex gap-2 rounded-md p-2 hover:bg-slate-100"
+          {peers.length > 0 ? (
-              key={peer.num}
+            <p className="text-lg font-semibold text-gray-900">
-            >
+              {`${peers.length} ${peers.length > 1 ? "Peers" : "Peer"}`}
-              <span className="my-auto shrink-0">
+            </p>
-                <Hashicon value={peer.num.toString()} size={28} />
+          ) : (
-              </span>
+            <Mono className="m-auto">None Discovered.</Mono>
-              <div className="flex flex-col">
-                <span className="font-medium">{peer.user?.longName}</span>
-                <Mono>
-                  {base16
-                    .stringify(peer.user?.macaddr ?? [])
-                    .match(/.{1,2}/g)
-                    ?.join(":") ?? ""}
-                </Mono>
-              </div>
-              <div className="my-auto ml-auto">
-                <IconButton
-                  variant="secondary"
-                  size="sm"
-                  icon={<EllipsisHorizontalCircleIcon className="h-4" />}
-                />
-              </div>
-            </div>
-          ))}
-          {peers.length === 0 && (
-            <Mono className="m-auto">No devices discovered yet.</Mono>
           )}
         </div>
-      </Dropdown>
+      </div>
-    </Card>
+      <IconButton
+        className="my-auto ml-auto"
+        variant="secondary"
+        size="sm"
+        onClick={() => {
+          setActivePage("peers");
+        }}
+        icon={<EllipsisHorizontalIcon className="h-4" />}
+      />
+    </div>
   );
 };

src/components/Widgets/PositionWidget.tsx

@@ -8,18 +8,18 @@ export interface PositionWidgetProps {
 
 export const PositionWidget = ({ grid }: PositionWidgetProps): JSX.Element => {
   return (
-    <div className="relative overflow-hidden rounded-lg bg-white p-4 shadow">
+    <div className="flex gap-3 overflow-hidden rounded-lg bg-white p-3 shadow">
-      <dt>
+      <div className="rounded-md bg-rose-500 p-3">
-        <div className="absolute rounded-md bg-rose-500 p-3">
+        <MapPinIcon className="h-6 text-white" />
-          <MapPinIcon className="h-6 text-white" aria-hidden="true" />
+      </div>
-        </div>
+      <div>
-        <p className="ml-16 truncate text-sm font-medium text-gray-500">
+        <p className="truncate text-sm font-medium text-gray-500">
           Current Location
         </p>
-      </dt>
+        <div className="flex gap-1">
-      <dd className="ml-16 flex items-baseline">
+          <p className="text-lg font-semibold text-gray-900">{grid}</p>
-        <p className="text-lg font-semibold text-gray-900">{grid}</p>
+        </div>
-      </dd>
+      </div>
     </div>
   );
 };