Remove old packages, add theme toggle

src/components/NewDevice.tsx

@@ -1,17 +1,18 @@
 import React from "react";
 
-import { FiBluetooth, FiTerminal, FiWifi } from "react-icons/fi";
-
 import { TabbedContent, TabType } from "@components/generic/TabbedContent.js";
 import { BLE } from "@components/PageComponents/Connect/BLE.js";
 import { HTTP } from "@components/PageComponents/Connect/HTTP.js";
 import { Serial } from "@components/PageComponents/Connect/Serial.js";
+import { useAppStore } from "@app/core/stores/appStore.js";
+import { MoonIcon, SunIcon } from "@heroicons/react/24/outline";
 
 export const NewDevice = () => {
+  const { darkMode, setDarkMode } = useAppStore();
+
   const tabs: TabType[] = [
     {
-      name: "BLE",
-      icon: <FiBluetooth className="h-4" />,
+      name: "Bluetooth",
       element: BLE,
       disabled: !navigator.bluetooth,
       disabledMessage:
@@ -21,14 +22,12 @@ export const NewDevice = () => {
     },
     {
       name: "HTTP",
-      icon: <FiWifi className="h-4" />,
       element: HTTP,
       disabled: false,
       disabledMessage: "Unsuported connection method"
     },
     {
       name: "Serial",
-      icon: <FiTerminal className="h-4" />,
       element: Serial,
       disabled: !navigator.serial,
       disabledMessage:
@@ -38,7 +37,23 @@ export const NewDevice = () => {
 
   return (
     <div className="m-auto h-96 w-96">
-      <TabbedContent tabs={tabs} />
+      <TabbedContent
+        tabs={tabs}
+        actions={[
+          () => (
+            <div
+              className="my-auto cursor-pointer bg-backgroundPrimary p-2 text-textSecondary hover:brightness-hover active:brightness-press"
+              onClick={() => setDarkMode(!darkMode)}
+            >
+              {darkMode ? (
+                <SunIcon className="w-6" />
+              ) : (
+                <MoonIcon className="w-6" />
+              )}
+            </div>
+          )
+        ]}
+      />
     </div>
   );
 };

src/components/PageComponents/Connect/BLE.tsx

@@ -49,7 +49,7 @@ export const BLE = (): JSX.Element => {
           </Button>
         ))}
         {bleDevices.length === 0 && (
-          <Mono className="m-auto">No devices paired yet.</Mono>
+          <Mono className="m-auto select-none">No devices paired yet.</Mono>
         )}
       </div>
       <Button

src/components/PageComponents/Connect/Serial.tsx

@@ -61,7 +61,7 @@ export const Serial = (): JSX.Element => {
           </Button>
         ))}
         {serialPorts.length === 0 && (
-          <Mono className="m-auto">No devices paired yet.</Mono>
+          <Mono className="m-auto select-none">No devices paired yet.</Mono>
         )}
       </div>
       <Button

src/components/PageComponents/Map/MapControlls.tsx

@@ -1,4 +1,3 @@
-import { FiCrosshair } from "react-icons/fi";
 import { useMap } from "react-map-gl";
 import { lineString, bbox } from "@turf/turf";
 
@@ -79,12 +78,6 @@ export const MapControlls = (): JSX.Element => {
         >
           <MagnifyingGlassMinusIcon className="h-4 w-4" />
         </div>
-        <div
-          className="hover:bg-orange-200 cursor-pointer p-3 hover:text-accent"
-          onClick={() => {}}
-        >
-          <FiCrosshair className="h-4 w-4" />
-        </div>
         <div
           className="hover:bg-orange-200 cursor-pointer p-3 hover:text-accent"
           onClick={() => getBBox()}

src/components/form/Form.tsx

@@ -1,11 +1,11 @@
 import type React from "react";
 import type { HTMLProps } from "react";
 
-import { FiSave } from "react-icons/fi";
-
 import { Button } from "@components/form/Button.js";
 import {
+  ArrowRightCircleIcon,
   ArrowUturnLeftIcon,
+  CheckIcon,
   ChevronRightIcon,
   HomeIcon
 } from "@heroicons/react/24/outline";
@@ -58,7 +58,10 @@ export const Form = ({
             >
               Reset
             </Button>
-            <Button disabled={!dirty} iconBefore={<FiSave className="w-4" />}>
+            <Button
+              disabled={!dirty}
+              iconBefore={<CheckIcon className="w-4" />}
+            >
               Save
             </Button>
           </div>