Update deps & minor UI cleanup

.vscode/settings.json

@@ -0,0 +1,6 @@
+{
+  "css.validate": false,
+  "editor.quickSuggestions": {
+    "strings": true
+  }
+}

package.json

@@ -2,34 +2,34 @@
   "scripts": {
     "start": "NODE_ENV=development snowpack dev",
     "build": "snowpack build",
-    "test": "web-test-runner \"src/**/*.test.tsx\"",
+    "package": "yarn gzipper c build output",
     "format": "prettier --write \"src/**/*.{js,jsx,ts,tsx}\"",
     "lint": "prettier --check \"src/**/*.{js,jsx,ts,tsx}\""
   },
   "dependencies": {
+    "@headlessui/react": "^1.1.1",
+    "@heroicons/react": "^1.0.1",
     "@meshtastic/meshtasticjs": "^0.6.9",
-    "add": "^2.0.6",
     "react": "^17.0.0",
     "react-dom": "^17.0.0",
     "react-flags-select": "^2.1.2",
-    "react-icons": "^4.2.0",
     "yarn": "^1.22.10"
   },
   "devDependencies": {
     "@snowpack/plugin-dotenv": "^2.0.5",
     "@snowpack/plugin-postcss": "^1.2.2",
-    "@snowpack/plugin-react-refresh": "^2.4.0",
+    "@snowpack/plugin-react-refresh": "^2.5.0",
     "@snowpack/plugin-typescript": "^1.2.0",
-    "@types/react": "^17.0.0",
+    "@types/react": "^17.0.4",
     "@types/react-dom": "^17.0.0",
     "@types/snowpack-env": "^2.3.2",
     "autoprefixer": "^10.2.5",
-    "gzipper": "^4.4.0",
+    "gzipper": "^4.5.0",
-    "postcss": "^8.2.10",
+    "postcss": "^8.2.13",
     "postcss-cli": "^8.3.1",
     "prettier": "^2.0.5",
-    "snowpack": "^3.0.1",
+    "snowpack": "^3.3.7",
-    "tailwindcss": "^2.1.1",
+    "tailwindcss": "^2.1.2",
-    "typescript": "^4.0.0"
+    "typescript": "^4.2.4"
   }
 }

src/Main.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 
-import { FaBars, FaPaperPlane } from 'react-icons/fa';
+import { MenuIcon, PaperAirplaneIcon } from '@heroicons/react/outline';
-
 import type {
   IHTTPConnection,
   Protobuf,
@@ -76,10 +75,10 @@ const Main = (props: MainProps) => {
                 props.IsReady ? 'cursor-text' : 'cursor-not-allowed'
               }`}
             />
-            <span className="z-10 h-full text-gray-400 absolute w-8 right-0 py-4">
+            <span className="flex z-10 h-full text-gray-400 absolute w-8 right-0">
-              <FaPaperPlane
+              <PaperAirplaneIcon
                 onClick={sendMessage}
-                className={`text-xl hover:text-gray-500  ${
+                className={`text-xl hover:text-gray-500 h-6 w-6 my-auto ${
                   props.IsReady ? 'cursor-pointer' : 'cursor-not-allowed'
                 }`}
               />
@@ -91,7 +90,7 @@ const Main = (props: MainProps) => {
               setMobileNavOpen(!mobileNavOpen);
             }}
           >
-            <FaBars className="m-auto" />
+            <MenuIcon className="m-auto h-6 2-6" />
           </div>
         </div>
       </div>

src/components/ChatMessage.tsx

@@ -1,7 +1,10 @@
 import React from 'react';
 
-import { FaCheckCircle, FaCircle, FaUser } from 'react-icons/fa';
+import {
-
+  CheckCircleIcon,
+  DotsCircleHorizontalIcon,
+  UserIcon,
+} from '@heroicons/react/outline';
 import type { Types } from '@meshtastic/meshtasticjs';
 
 interface ChatMessageProps {
@@ -20,7 +23,7 @@ const ChatMessage = (props: ChatMessageProps) => {
             : 'bg-green-200'
         }`}
       >
-        <FaUser className="m-auto" />
+        <UserIcon className="m-auto w-5 h-5" />
       </div>
       <div className="flex flex-col container px-2 items-start">
         <div
@@ -50,9 +53,9 @@ const ChatMessage = (props: ChatMessageProps) => {
           <div className="flex justify-between text-gray-600">
             <span className="inline-block">{props.message.message.data}</span>
             {props.message.ack ? (
-              <FaCheckCircle className="my-auto" />
+              <CheckCircleIcon className="my-auto w-5 h-5" />
             ) : (
-              <FaCircle className=" text-lg my-auto animate-pulse" />
+              <DotsCircleHorizontalIcon className="my-auto animate-pulse w-5 h-5" />
             )}
           </div>
         </div>

src/components/Header.tsx

@@ -1,7 +1,10 @@
 import React from 'react';
 
-import { FaBroadcastTower, FaMobileAlt } from 'react-icons/fa';
+import {
-
+  DeviceMobileIcon,
+  StatusOfflineIcon,
+  StatusOnlineIcon,
+} from '@heroicons/react/outline';
 import { Types } from '@meshtastic/meshtasticjs';
 
 import typelogo from '../../public/typelogo.svg';
@@ -32,7 +35,12 @@ const Header = (props: HeaderProps) => {
                   : 'bg-green-400'
               }`}
             ></div>
-            <FaBroadcastTower className="m-auto ml-1 text-xl" />
+            {new Date(props.LastMeshInterraction) >
+            new Date(Date.now() - 40000) ? (
+              <StatusOnlineIcon className="m-auto ml-1 h-5 w-5" />
+            ) : (
+              <StatusOfflineIcon className="m-auto ml-1 h-5 w-5" />
+            )}
           </div>
 
           <div className="flex pl-4">
@@ -48,7 +56,7 @@ const Header = (props: HeaderProps) => {
                   : 'bg-gray-400'
               }`}
             ></div>
-            <FaMobileAlt className="m-auto ml-1 text-xl" />
+            <DeviceMobileIcon className="m-auto ml-1 w-5 h-5" />
           </div>
         </div>
       </div>

src/components/NavItem.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { FaCaretDown, FaCaretRight, FaSpinner } from 'react-icons/fa';
+import { ChevronDownIcon, ChevronRightIcon } from '@heroicons/react/outline';
 
 interface NavItemProps {
   isDropdown: boolean;
@@ -41,13 +41,14 @@ const NavItem = (props: NavItemProps) => {
         {props.titleContent}
         {props.isDropdown && !props.isLoading ? (
           navItemOpen ? (
-            <FaCaretDown className="my-auto group-hover:text-gray-700" />
+            <ChevronDownIcon className="my-auto group-hover:text-gray-700 w-5 h-5" />
           ) : (
-            <FaCaretRight className="my-auto group-hover:text-gray-700" />
+            <ChevronRightIcon className="my-auto group-hover:text-gray-700 w-5 h-5" />
           )
         ) : null}
         {props.isLoading ? (
-          <FaSpinner className="animate-spin my-auto" />
+          // <FaSpinner className="animate-spin my-auto" />
+          <div>loading</div>
         ) : null}
       </div>
       {props.isDropdown ? (

src/components/Sidebar/SidebarChannels.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 
-import { FaStream } from 'react-icons/fa';
+import { HashtagIcon } from '@heroicons/react/outline';
-
 import { Protobuf } from '@meshtastic/meshtasticjs';
 
 import type { languageTemplate } from '../../App';
@@ -21,7 +20,7 @@ const SidebarChannels = (props: SidebarChannelsProps) => {
       isNested={false}
       titleContent={
         <div className="flex">
-          <FaStream className="my-auto mr-2" />
+          <HashtagIcon className="my-auto mr-2 2-5 h-5" />
           {props.Translations.device_channels_title}
         </div>
       }

src/components/Sidebar/SidebarDeviceSettings.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 
-import { FaSave, FaUserCog } from 'react-icons/fa';
+import { AdjustmentsIcon, SaveIcon } from '@heroicons/react/outline';
-
 import { IHTTPConnection, Protobuf } from '@meshtastic/meshtasticjs';
 
 import type { languageTemplate } from '../../App';
@@ -22,7 +21,7 @@ const SidebarDeviceSettings = (props: SidebarDeviceSettingsProps) => {
       isNested={false}
       titleContent={
         <div className="flex">
-          <FaUserCog className="my-auto mr-2" />
+          <AdjustmentsIcon className="my-auto mr-2 w-5 h-5" />
           {props.Translations.device_settings_title}
         </div>
       }
@@ -93,7 +92,7 @@ const SidebarDeviceSettings = (props: SidebarDeviceSettingsProps) => {
                 props.Connection.setPreferences(props.Preferences);
               }}
             >
-              <FaSave className="m-auto mr-2 group-hover:text-gray-700" />
+              <SaveIcon className="m-auto mr-2 group-hover:text-gray-700 w-5 h-5" />
               {props.Translations.save_changes_button}
             </div>
           </div>

src/components/Sidebar/SidebarNodes.tsx

@@ -1,15 +1,13 @@
 import React from 'react';
 
 import {
-  FaBatteryHalf,
+  ClockIcon,
-  FaClock,
+  DesktopComputerIcon,
-  FaCrown,
+  FlagIcon,
-  FaDesktop,
+  GlobeIcon,
-  FaMapMarkerAlt,
+  LightningBoltIcon,
-  FaMountain,
+  UsersIcon,
-  FaUsers,
+} from '@heroicons/react/outline';
-} from 'react-icons/fa';
-
 import type { Types } from '@meshtastic/meshtasticjs';
 
 import type { languageTemplate } from '../../App';
@@ -30,7 +28,7 @@ const SidebarNodes = (props: sidebarNodesProps) => {
       isNested={false}
       titleContent={
         <div className="flex">
-          <FaUsers className="my-auto mr-2" />
+          <UsersIcon className="my-auto mr-2 w-5 h-5" />
           {props.Translations.nodes_title}
           <div className="flex m-auto rounded-full bg-gray-300 w-6 h-6 text-sm ml-2">
             <div className="m-auto">{props.Nodes.length ?? 0}</div>
@@ -49,9 +47,9 @@ const SidebarNodes = (props: sidebarNodesProps) => {
               titleContent={
                 <div key={index} className="flex">
                   {node.data.num === props.myId ? (
-                    <FaCrown className="text-yellow-500 my-auto mr-2" />
+                    <FlagIcon className="text-yellow-500 my-auto mr-2 w-5 h-5" />
                   ) : (
-                    <FaDesktop className="my-auto mr-2" />
+                    <DesktopComputerIcon className="my-auto mr-2 w-5 h-5" />
                   )}
                   <div className="m-auto">{node.data.user?.longName}</div>
                 </div>
@@ -80,7 +78,7 @@ const SidebarNodes = (props: sidebarNodesProps) => {
                         {}
                       </p>
                       <div className="flex">
-                        <FaMapMarkerAlt className="my-auto mr-2" />
+                        <GlobeIcon className="my-auto mr-2 w-5 h-5" />
                         <p>
                           {node.data.position?.latitudeI},
                           {node.data.position?.longitudeI}
@@ -88,16 +86,16 @@ const SidebarNodes = (props: sidebarNodesProps) => {
                       </div>
 
                       <div className="flex">
-                        <FaMountain className="my-auto mr-2" />
+                        <GlobeIcon className="my-auto mr-2 w-5 h-5" />
                         <p>{node.data.position?.altitude}</p>
                       </div>
 
                       <div className="flex">
-                        <FaClock className="my-auto mr-2" />
+                        <ClockIcon className="my-auto mr-2 w-5 h-5" />
                         <p>{node.data.position?.time}</p>
                       </div>
                       <div className="flex">
-                        <FaBatteryHalf className="my-auto mr-2" />
+                        <LightningBoltIcon className="my-auto mr-2 w-5 h-5" />
                         <p>{node.data.position?.batteryLevel}</p>
                       </div>
                     </div>

src/components/Sidebar/SidebarUISettings.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 
-import { Jp, Us, Br } from 'react-flags-select';
+import { Br, Jp, Us } from 'react-flags-select';
-import { FaCog, FaLaptop, FaMoon, FaSun } from 'react-icons/fa';
+
+import { CogIcon } from '@heroicons/react/outline';
 
 import type { languageTemplate } from '../../App';
 import { LanguageEnum } from '../../App';
@@ -22,7 +23,7 @@ const SidebarUISettings = (props: SidebarUISettingsProps) => {
       open={false}
       titleContent={
         <div className="flex">
-          <FaCog className="my-auto mr-2" />
+          <CogIcon className="my-auto mr-2 w-5 h-5" />
           {props.Translations.ui_settings_title}
         </div>
       }
@@ -38,7 +39,7 @@ const SidebarUISettings = (props: SidebarUISettingsProps) => {
                   {props.Translations.color_scheme_title}
                 </div>
                 <div className="flex shadow-md rounded-md ml-2">
-                  <div className="bg-gray-200 flex group p-2 rounded-l-md border border-gray-300 hover:bg-gray-200 cursor-pointer">
+                  {/* <div className="bg-gray-200 flex group p-2 rounded-l-md border border-gray-300 hover:bg-gray-200 cursor-pointer">
                     <FaSun className="m-auto group-hover:text-gray-700" />
                   </div>
                   <div className="flex group p-2 border border-gray-300 hover:bg-gray-200 cursor-pointer">
@@ -46,7 +47,7 @@ const SidebarUISettings = (props: SidebarUISettingsProps) => {
                   </div>
                   <div className="flex group p-2 rounded-r-md border border-gray-300 hover:bg-gray-200 cursor-pointer">
                     <FaLaptop className="m-auto group-hover:text-gray-700" />
-                  </div>
+                  </div> */}
                 </div>
               </>
             }

web-test-runner.config.js

@@ -1,6 +0,0 @@
-// NODE_ENV=test - Needed by "@snowpack/web-test-runner-plugin"
-process.env.NODE_ENV = 'test';
-
-module.exports = {
-  plugins: [require('@snowpack/web-test-runner-plugin')()],
-};