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