WIP

src/components/chat/MessageBar.tsx

@@ -1,16 +1,12 @@
 import React from 'react';
 
 import { useTranslation } from 'react-i18next';
+import { FiPaperclip, FiSend, FiSmile } from 'react-icons/fi';
 
 import { useAppSelector } from '@app/hooks/redux';
 import { Button } from '@components/generic/Button';
 import { Input } from '@components/generic/Input';
 import { connection } from '@core/connection';
-import {
-  EmojiHappyIcon,
-  PaperAirplaneIcon,
-  PaperClipIcon,
-} from '@heroicons/react/outline';
 
 export const MessageBar = (): JSX.Element => {
   const ready = useAppSelector((state) => state.meshtastic.ready);
@@ -26,8 +22,8 @@ export const MessageBar = (): JSX.Element => {
     <div className="flex w-full p-4 mx-auto space-x-2 text-gray-500 bg-gray-50 dark:bg-transparent dark:text-gray-400">
       <div className="flex w-full max-w-4xl mx-auto">
         <div className="flex">
-          <Button icon={<EmojiHappyIcon className="w-5 h-5" />} circle />
-          <Button icon={<PaperClipIcon className="w-5 h-5" />} circle />
+          <Button icon={<FiSmile className="w-5 h-5" />} circle />
+          <Button icon={<FiPaperclip className="w-5 h-5" />} circle />
         </div>
         <form
           className="flex w-full space-x-2"
@@ -46,11 +42,7 @@ export const MessageBar = (): JSX.Element => {
               setCurrentMessage(e.target.value);
             }}
           />
-          <Button
-            icon={<PaperAirplaneIcon className="w-5 h-5" />}
-            type="submit"
-            circle
-          />
+          <Button icon={<FiSend className="w-5 h-5" />} type="submit" circle />
         </form>
       </div>
     </div>

src/components/generic/Button.tsx

@@ -1,5 +1,7 @@
 import React from 'react';
 
+import { FiCheck } from 'react-icons/fi';
+
 type DefaultButtonProps = JSX.IntrinsicElements['button'];
 
 interface ButtonProps extends DefaultButtonProps {
@@ -7,6 +9,7 @@ interface ButtonProps extends DefaultButtonProps {
   circle?: boolean;
   active?: boolean;
   border?: boolean;
+  confirmAction?: () => void;
 }
 
 export const Button = ({
@@ -15,12 +18,28 @@ export const Button = ({
   className,
   active,
   border,
+  confirmAction,
   disabled,
   children,
   ...props
 }: ButtonProps): JSX.Element => {
+  const [hasConfirmed, setHasConfirmed] = React.useState(false);
+
+  const handleConfirm = (): void => {
+    if (typeof confirmAction == 'function') {
+      if (hasConfirmed) {
+        void confirmAction();
+      }
+      setHasConfirmed(true);
+      setTimeout(() => {
+        setHasConfirmed(false);
+      }, 3000);
+    }
+  };
+
   return (
     <button
+      onClick={handleConfirm}
       className={`items-center  select-none flex dark:text-white active:scale-95 ${
         active && !disabled ? 'bg-gray-100 dark:bg-gray-700' : ''
       } ${
@@ -38,7 +57,7 @@ export const Button = ({
             circle ? 'mx-auto' : ''
           }`}
         >
-          {icon}
+          {hasConfirmed ? <FiCheck /> : icon}
         </div>
       )}
 

src/components/generic/Select.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 
+import { FiChevronDown } from 'react-icons/fi';
+
 import { Listbox } from '@headlessui/react';
-import { SelectorIcon } from '@heroicons/react/solid';
 
 export interface SelectProps {
   label: string;
@@ -41,7 +42,7 @@ export const Select = ({
             <div className="mx-2 my-auto">{active.icon}</div>
             <span className="block my-auto truncate">{active.name}</span>
             <span className="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
-              <SelectorIcon
+              <FiChevronDown
                 className="w-5 h-5 text-gray-400"
                 aria-hidden="true"
               />

src/components/generic/Toggle.tsx

@@ -5,19 +5,35 @@ import { Switch } from '@headlessui/react';
 type DefaultButtonProps = JSX.IntrinsicElements['button'];
 
 interface ToggleProps extends DefaultButtonProps {
+  action?: (enabled: boolean) => void;
   label?: string;
   valid?: boolean;
   validationMessage?: string;
+  checked?: boolean;
 }
 
 export const Toggle = ({
+  action,
   label,
   valid,
   validationMessage,
+  checked,
   id,
   ...props
 }: ToggleProps): JSX.Element => {
   const [enabled, setEnabled] = React.useState(false);
+  React.useEffect(() => {
+    if (checked !== undefined) {
+      setEnabled(checked);
+    }
+  }, [checked]);
+
+  const handleToggle = (enabled: boolean) => {
+    setEnabled(enabled);
+    if (action) {
+      action(enabled);
+    }
+  };
 
   return (
     <div className="flex flex-col w-full">
@@ -32,7 +48,7 @@ export const Toggle = ({
           id={id}
           {...props}
           checked={enabled}
-          onChange={setEnabled}
+          onChange={handleToggle}
           className={`${
             enabled ? 'bg-primary' : 'bg-gray-200 dark:bg-secondaryDark'
           }

src/components/menu/Navigation.tsx

@@ -1,13 +1,15 @@
 import React from 'react';
 
+import {
+  FiGrid,
+  FiInfo,
+  FiMessageSquare,
+  FiPackage,
+  FiSettings,
+} from 'react-icons/fi';
+
 import { Button } from '@components/generic/Button';
 import { routes, useRoute } from '@core/router';
-import {
-  AnnotationIcon,
-  CogIcon,
-  InformationCircleIcon,
-  ViewGridIcon,
-} from '@heroicons/react/outline';
 
 type DefaultDivProps = JSX.IntrinsicElements['div'];
 
@@ -26,7 +28,7 @@ export const Navigation = ({
     >
       <div onClick={onClick}>
         <Button
-          icon={<AnnotationIcon className="w-6 h-6" />}
+          icon={<FiMessageSquare className="w-6 h-6" />}
           active={route.name === 'messages'}
           className="w-full md:w-auto"
           {...routes.messages().link}
@@ -36,7 +38,7 @@ export const Navigation = ({
       </div>
       <div onClick={onClick}>
         <Button
-          icon={<ViewGridIcon className="w-6 h-6" />}
+          icon={<FiGrid className="w-6 h-6" />}
           className="w-full md:w-auto"
           active={route.name === 'nodes'}
           {...routes.nodes().link}
@@ -46,7 +48,17 @@ export const Navigation = ({
       </div>
       <div onClick={onClick}>
         <Button
-          icon={<CogIcon className="w-6 h-6" />}
+          icon={<FiPackage className="w-6 h-6" />}
+          className="w-full md:w-auto"
+          active={route.name === 'plugins'}
+          {...routes.plugins().link}
+        >
+          Plugins
+        </Button>
+      </div>
+      <div onClick={onClick}>
+        <Button
+          icon={<FiSettings className="w-6 h-6" />}
           className="w-full md:w-auto"
           active={route.name === 'settings'}
           {...routes.settings().link}
@@ -56,7 +68,7 @@ export const Navigation = ({
       </div>
       <div onClick={onClick}>
         <Button
-          icon={<InformationCircleIcon className="w-6 h-6" />}
+          icon={<FiInfo className="w-6 h-6" />}
           className="w-full md:w-auto"
           active={route.name === 'about'}
           {...routes.about().link}

src/components/menu/buttons/DeviceStatusDropdown.tsx

@@ -1,20 +1,22 @@
 import React from 'react';
 
+import { FiWifi, FiWifiOff } from 'react-icons/fi';
+
 import { useAppSelector } from '@app/hooks/redux';
 import { Button } from '@components/generic/Button';
-import { SwitchVerticalIcon } from '@heroicons/react/outline';
 
 export const DeviceStatusDropdown = (): JSX.Element => {
   const ready = useAppSelector((state) => state.meshtastic.ready);
 
-  return (
-    <Button
-      icon={
-        <SwitchVerticalIcon
-          className={`h-6 w-6 ${!ready ? 'animate-pulse' : ''}`}
-        />
-      }
-      circle
-    />
+  return !ready ? (
+    <Button icon={<FiWifi className="w-6 h-6" />} circle />
+  ) : (
+    <div className="flex bg-black rounded-full bg-opacity-20">
+      <div className="flex px-2 my-auto text-white">
+        <div className="my-auto mx-2 w-2 h-2 rounded-full bg-yellow-400 min-w-[2]"></div>
+        Loading
+      </div>
+      <Button icon={<FiWifiOff className="w-6 h-6 animate-pulse" />} circle />
+    </div>
   );
 };

src/components/menu/buttons/MobileNavToggle.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
 
+import { FiMenu } from 'react-icons/fi';
+
 import { Button } from '@components/generic/Button';
 import { openMobileNav } from '@core/slices/appSlice';
-import { MenuIcon } from '@heroicons/react/outline';
 
 import { useAppDispatch } from '../../../hooks/redux';
 
@@ -12,7 +13,7 @@ export const MobileNavToggle = (): JSX.Element => {
   return (
     <div className="md:hidden">
       <Button
-        icon={<MenuIcon className="w-5 h-5" />}
+        icon={<FiMenu className="w-5 h-5" />}
         onClick={(): void => {
           dispatch(openMobileNav());
         }}

src/components/menu/buttons/ThemeToggle.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
 
+import { FiMoon, FiSun } from 'react-icons/fi';
+
 import { useAppDispatch, useAppSelector } from '@app/hooks/redux';
 import { Button } from '@components/generic/Button';
 import { setDarkModeEnabled } from '@core/slices/appSlice';
-import { MoonIcon, SunIcon } from '@heroicons/react/outline';
 
 export const ThemeToggle = (): JSX.Element => {
   const dispatch = useAppDispatch();
@@ -13,9 +14,9 @@ export const ThemeToggle = (): JSX.Element => {
     <Button
       icon={
         darkMode ? (
-          <SunIcon className="w-5 h-5" />
+          <FiSun className="w-5 h-5" />
         ) : (
-          <MoonIcon className="w-5 h-5" />
+          <FiMoon className="w-5 h-5" />
         )
       }
       circle