Remove old packages, add theme toggle

package.json

@@ -28,7 +28,6 @@
     "@hookform/error-message": "^2.0.1",
     "@hookform/resolvers": "^2.9.10",
     "@meshtastic/meshtasticjs": "^0.9.8",
-    "@tailwindcss/line-clamp": "^0.4.2",
     "@tailwindcss/typography": "^0.5.8",
     "@turf/turf": "^6.5.0",
     "base64-js": "^1.5.1",
@@ -47,7 +46,6 @@
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.41.3",
     "react-hot-toast": "^2.4.0",
-    "react-icons": "^4.7.1",
     "react-json-tree": "^0.17.0",
     "react-map-gl": "^7.0.20",
     "react-qrcode-logo": "^2.8.0",

pnpm-lock.yaml

@@ -8,7 +8,6 @@ specifiers:
   '@hookform/resolvers': ^2.9.10
   '@meshtastic/meshtasticjs': ^0.9.8
   '@tailwindcss/forms': ^0.5.3
-  '@tailwindcss/line-clamp': ^0.4.2
   '@tailwindcss/typography': ^0.5.8
   '@turf/turf': ^6.5.0
   '@types/chrome': ^0.0.206
@@ -48,7 +47,6 @@ specifiers:
   react-dom: ^18.2.0
   react-hook-form: ^7.41.3
   react-hot-toast: ^2.4.0
-  react-icons: ^4.7.1
   react-json-tree: ^0.17.0
   react-map-gl: ^7.0.20
   react-qrcode-logo: ^2.8.0
@@ -72,7 +70,6 @@ dependencies:
   '@hookform/error-message': 2.0.1_7yhncxxycytkes3mwygyjxyp6u
   '@hookform/resolvers': 2.9.10_react-hook-form@7.41.3
   '@meshtastic/meshtasticjs': 0.9.8
-  '@tailwindcss/line-clamp': 0.4.2_tailwindcss@3.2.4
   '@tailwindcss/typography': 0.5.8_tailwindcss@3.2.4
   '@turf/turf': 6.5.0
   base64-js: 1.5.1
@@ -91,7 +88,6 @@ dependencies:
   react-dom: 18.2.0_react@18.2.0
   react-hook-form: 7.41.3_react@18.2.0
   react-hot-toast: 2.4.0_biqbaboplfbrettd7655fr4n2y
-  react-icons: 4.7.1_react@18.2.0
   react-json-tree: 0.17.0_kzbn2opkn2327fwg5yzwzya5o4
   react-map-gl: 7.0.20_6eczaga5xxiwzxtfiyk6fioasq
   react-qrcode-logo: 2.8.0_biqbaboplfbrettd7655fr4n2y
@@ -1882,14 +1878,6 @@ packages:
       tailwindcss: 3.2.4_postcss@8.4.20
     dev: true
 
-  /@tailwindcss/line-clamp/0.4.2_tailwindcss@3.2.4:
-    resolution: {integrity: sha512-HFzAQuqYCjyy/SX9sLGB1lroPzmcnWv1FHkIpmypte10hptf4oPUfucryMKovZh2u0uiS9U5Ty3GghWfEJGwVw==}
-    peerDependencies:
-      tailwindcss: '>=2.0.0 || >=3.0.0 || >=3.0.0-alpha.1'
-    dependencies:
-      tailwindcss: 3.2.4_postcss@8.4.20
-    dev: false
-
   /@tailwindcss/typography/0.5.8_tailwindcss@3.2.4:
     resolution: {integrity: sha512-xGQEp8KXN8Sd8m6R4xYmwxghmswrd0cPnNI2Lc6fmrC3OojysTBJJGSIVwPV56q4t6THFUK3HJ0EaWwpglSxWw==}
     peerDependencies:
@@ -5744,14 +5732,6 @@ packages:
       - csstype
     dev: false
 
-  /react-icons/4.7.1_react@18.2.0:
-    resolution: {integrity: sha512-yHd3oKGMgm7zxo3EA7H2n7vxSoiGmHk5t6Ou4bXsfcgWyhfDKMpyKfhHR6Bjnn63c+YXBLBPUql9H4wPJM6sXw==}
-    peerDependencies:
-      react: '*'
-    dependencies:
-      react: 18.2.0
-    dev: false
-
   /react-is/16.13.1:
     resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
 

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>