Remove old packages, add theme toggle

3 years ago · 9c0ff452bf
7 changed files with 30 additions and 41 deletions
--- a/package.json
+++ b/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",
--- a/pnpm-lock.yaml
+++ b/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[email protected]
  '@meshtastic/meshtasticjs': 0.9.8
-  '@tailwindcss/line-clamp': 0.4[email protected]
  '@tailwindcss/typography': 0.5[email protected]
  '@turf/turf': 6.5.0
  base64-js: 1.5.1
@ -91,7 +88,6 @@ dependencies:
  react-dom: 18.2[email protected]
  react-hook-form: 7.41[email protected]
  react-hot-toast: 2.4.0_biqbaboplfbrettd7655fr4n2y
-  react-icons: 4.7[email protected]
  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[email protected]
    dev: true

-  /@tailwindcss/line-clamp/[email protected]:
-    resolution: {integrity: sha512-HFzAQuqYCjyy/SX9sLGB1lroPzmcnWv1FHkIpmypte10hptf4oPUfucryMKovZh2u0uiS9U5Ty3GghWfEJGwVw==}
-    peerDependencies:
-      tailwindcss: '>=2.0.0 || >=3.0.0 || >=3.0.0-alpha.1'
-    dependencies:
-      tailwindcss: 3.2[email protected]
-    dev: false
-
  /@tailwindcss/typography/[email protected]:
    resolution: {integrity: sha512-xGQEp8KXN8Sd8m6R4xYmwxghmswrd0cPnNI2Lc6fmrC3OojysTBJJGSIVwPV56q4t6THFUK3HJ0EaWwpglSxWw==}
    peerDependencies:
@ -5744,14 +5732,6 @@ packages:
      - csstype
    dev: false

-  /react-icons/[email protected]:
-    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==}

--- a/src/components/NewDevice.tsx
+++ b/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>
  );
 };
--- a/src/components/PageComponents/Connect/BLE.tsx
+++ b/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
--- a/src/components/PageComponents/Connect/Serial.tsx
+++ b/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
--- a/src/components/PageComponents/Map/MapControlls.tsx
+++ b/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()}
--- a/src/components/form/Form.tsx
+++ b/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>