Add Import dialog, fix device icons & toggle styling

src/components/CommandPalette/Index.tsx

@@ -28,6 +28,7 @@ import { Hashicon } from "@emeraldpay/hashicon-react";
 import { Combobox, Dialog, Transition } from "@headlessui/react";
 import {
   ArchiveBoxXMarkIcon,
+  ArrowDownOnSquareStackIcon,
   ArrowPathIcon,
   ArrowsRightLeftIcon,
   BeakerIcon,
@@ -44,6 +45,7 @@ import {
   PlusIcon,
   PowerIcon,
   QrCodeIcon,
+  QueueListIcon,
   Square3Stack3DIcon,
   TrashIcon,
   UsersIcon,
@@ -83,6 +85,7 @@ export const CommandPalette = (): JSX.Element => {
 
   const {
     setQRDialogOpen,
+    setImportDialogOpen,
     setShutdownDialogOpen,
     setRebootDialogOpen,
     setActivePage,
@@ -167,7 +170,7 @@ export const CommandPalette = (): JSX.Element => {
                 )?.data.user?.longName ?? device.hardware.myNodeNum.toString(),
               icon: (
                 <Hashicon
-                  size={24}
+                  size={18}
                   value={device.hardware.myNodeNum.toString()}
                 />
               ),
@@ -191,11 +194,24 @@ export const CommandPalette = (): JSX.Element => {
       icon: CubeTransparentIcon,
       commands: [
         {
-          name: "QR Code Generator",
+          name: "QR Code",
           icon: QrCodeIcon,
-          action() {
-            setQRDialogOpen(true);
-          }
+          subItems: [
+            {
+              name: "Generator",
+              icon: <QueueListIcon className="w-4" />,
+              action() {
+                setQRDialogOpen(true);
+              }
+            },
+            {
+              name: "Import",
+              icon: <ArrowDownOnSquareStackIcon className="w-4" />,
+              action() {
+                setImportDialogOpen(true);
+              }
+            }
+          ]
         },
         {
           name: "Reset Peers",

src/components/CommandPalette/SearchResult.tsx

@@ -53,6 +53,7 @@ export const SearchResult = ({ group }: SearchResultProps): JSX.Element => {
                 >
                   {({ active }) => (
                     <>
+                      {item.icon}
                       <span className="ml-3">{item.name}</span>
                       {active && (
                         <ChevronRightIcon className="ml-auto h-4 text-gray-400" />