Multiple theme support & fixes

src/components/Widgets/BatteryWidget.tsx

@@ -58,19 +58,17 @@ export const BatteryWidget = ({
   }, [hardware.myNodeNum, nodes]);
 
   return (
-    <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 className="flex gap-3 overflow-hidden rounded-lg bg-backgroundPrimary p-3 text-textSecondary">
+      <div className="rounded-md bg-accent p-3 text-textPrimary">
+        <Battery100Icon className="h-6" />
       </div>
       <div>
-        <p className="truncate text-sm font-medium text-gray-500">
-          Battery State
-        </p>
+        <p className="truncate text-sm font-medium">Battery State</p>
         <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`}>
+          <p className="text-xl font-semibold">{batteryLevel}%</p>
+          <div className="flex text-sm font-semibold">
             <ClockIcon
-              className="text-Orange-500 h-5 w-5 flex-shrink-0 self-center"
+              className="h-5 w-5 flex-shrink-0 self-center"
               aria-hidden="true"
             />
             <span className="my-auto">{timeRemaining}</span>

src/components/Widgets/DeviceWidget.tsx

@@ -20,24 +20,23 @@ export const DeviceWidget = ({
   reconnect
 }: DeviceWidgetProps): JSX.Element => {
   return (
-    <div className="relative flex shrink-0 flex-col overflow-hidden rounded-md bg-white text-sm text-black shadow-md">
+    <div className="relative flex shrink-0 flex-col overflow-hidden rounded-md text-sm text-textPrimary">
       <div className="absolute bottom-20 h-full w-full">
         <Hashicon size={350} value={nodeNum} />
       </div>
-      <div className="flex p-3 backdrop-blur-md backdrop-brightness-50 backdrop-hue-rotate-30">
-        <div className="drop-shadow-md">
+      <div className="backdrop-brightness-50 flex p-3 backdrop-blur-md backdrop-hue-rotate-30">
+        <div>
           <Hashicon size={96} value={nodeNum} />
         </div>
         <div className="flex w-full flex-col">
-          <span className="ml-auto whitespace-nowrap text-xl font-bold text-slate-200">
+          <span className="ml-auto whitespace-nowrap text-xl font-bold">
             {name}
           </span>
           <div className="my-auto ml-auto">
             <Button
               onClick={disconnected ? reconnect : disconnect}
-              variant={disconnected ? "secondary" : "primary"}
               size="sm"
-              iconAfter={<XCircleIcon className="h-4" />}
+              iconBefore={<XCircleIcon className="h-4" />}
             >
               {disconnected ? "Reconnect" : "Disconnect"}
             </Button>

src/components/Widgets/PeersWidget.tsx

@@ -17,15 +17,15 @@ export const PeersWidget = ({ peers }: PeersWidgetProps): JSX.Element => {
   const { setActivePage } = useDevice();
 
   return (
-    <div className="flex gap-3 overflow-hidden rounded-lg bg-white p-3 shadow">
-      <div className="rounded-md bg-emerald-500 p-3">
-        <UserGroupIcon className="h-6 text-white" />
+    <div className="flex gap-3 overflow-hidden rounded-lg bg-backgroundPrimary p-3 text-textSecondary">
+      <div className="rounded-md bg-accent p-3">
+        <UserGroupIcon className="h-6 text-textPrimary" />
       </div>
       <div>
-        <p className="truncate text-sm font-medium text-gray-500">Peers</p>
+        <p className="truncate text-sm font-medium">Peers</p>
         <div className="flex gap-1">
           {peers.length > 0 ? (
-            <p className="text-lg font-semibold text-gray-900">
+            <p className="text-lg font-semibold">
               {`${peers.length} ${peers.length > 1 ? "Peers" : "Peer"}`}
             </p>
           ) : (
@@ -35,7 +35,6 @@ export const PeersWidget = ({ peers }: PeersWidgetProps): JSX.Element => {
       </div>
       <IconButton
         className="my-auto ml-auto"
-        variant="secondary"
         size="sm"
         onClick={() => {
           setActivePage("peers");

src/components/Widgets/PositionWidget.tsx

@@ -8,16 +8,14 @@ export interface PositionWidgetProps {
 
 export const PositionWidget = ({ grid }: PositionWidgetProps): JSX.Element => {
   return (
-    <div className="flex gap-3 overflow-hidden rounded-lg bg-white p-3 shadow">
-      <div className="rounded-md bg-rose-500 p-3">
-        <MapPinIcon className="h-6 text-white" />
+    <div className="flex gap-3 overflow-hidden rounded-lg bg-backgroundPrimary p-3 text-textSecondary">
+      <div className="rounded-md bg-accent p-3 text-textPrimary">
+        <MapPinIcon className="text-white h-6" />
       </div>
       <div>
-        <p className="truncate text-sm font-medium text-gray-500">
-          Current Location
-        </p>
+        <p className="truncate text-sm font-medium">Current Location</p>
         <div className="flex gap-1">
-          <p className="text-lg font-semibold text-gray-900">{grid}</p>
+          <p className="text-lg font-semibold">{grid}</p>
         </div>
       </div>
     </div>