Navigation improvements & Fix language selection

src/components/Sidebar/Channels/Channel.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 
 import { Disclosure } from '@headlessui/react';
+import { ChevronDownIcon, ChevronRightIcon } from '@heroicons/react/outline';
 import { Protobuf } from '@meshtastic/meshtasticjs';
 
 export interface ChannelProps {
@@ -12,14 +13,19 @@ const Channel = (props: ChannelProps) => {
     <Disclosure>
       {({ open }) => (
         <>
-          <Disclosure.Button className="flex w-full text-lg font-medium justify-between p-3 border-b hover:bg-gray-200 cursor-pointer">
-            <div className="flex">
+          <Disclosure.Button className="flex bg-gray-50 w-full text-lg font-medium justify-between p-3 border-b hover:bg-gray-200 cursor-pointer">
+            <div className="flex ml-4">
+              {open ? (
+                <ChevronDownIcon className="my-auto w-5 h-5 mr-2" />
+              ) : (
+                <ChevronRightIcon className="my-auto w-5 h-5 mr-2" />
+              )}
               {props.channel.index} -{' '}
               {Protobuf.Channel_Role[props.channel.role]}
             </div>
           </Disclosure.Button>
           <Disclosure.Panel>
-            <div className="w-full">
+            <div className="w-full bg-gray-100 px-2">
               <div className="flex justify-between border-b hover:bg-gray-200">
                 <p>Bandwidth:</p>
                 <code className="bg-gray-200 rounded-full px-2">

src/components/Sidebar/Channels/Index.tsx

@@ -24,14 +24,14 @@ const Channels = (props: ChannelsProps) => {
         <>
           <Disclosure.Button className="flex w-full text-lg font-medium justify-between p-3 border-b hover:bg-gray-200 cursor-pointer">
             <div className="flex">
-              <HashtagIcon className="my-auto mr-2 2-5 h-5" />
+              {open ? (
+                <ChevronDownIcon className="my-auto w-5 h-5 mr-2" />
+              ) : (
+                <ChevronRightIcon className="my-auto w-5 h-5 mr-2" />
+              )}
+              <HashtagIcon className="my-auto text-gray-600 mr-2 2-5 h-5" />
               {props.translations.device_channels_title}
             </div>
-            {open ? (
-              <ChevronDownIcon className="my-auto group-hover:text-gray-700 w-5 h-5" />
-            ) : (
-              <ChevronRightIcon className="my-auto group-hover:text-gray-700 w-5 h-5" />
-            )}
           </Disclosure.Button>
           <Disclosure.Panel>
             <>

src/components/Sidebar/Device/Index.tsx

@@ -25,18 +25,18 @@ const Device = (props: DeviceProps) => {
         <>
           <Disclosure.Button className="flex w-full text-lg font-medium justify-between p-3 border-b hover:bg-gray-200 cursor-pointer">
             <div className="flex">
-              <AdjustmentsIcon className="my-auto mr-2 w-5 h-5" />
+              {open ? (
+                <ChevronDownIcon className="my-auto w-5 h-5 mr-2" />
+              ) : (
+                <ChevronRightIcon className="my-auto w-5 h-5 mr-2" />
+              )}
+              <AdjustmentsIcon className="text-gray-600 my-auto mr-2 w-5 h-5" />
               {props.translations.device_settings_title}
             </div>
-            {open ? (
-              <ChevronDownIcon className="my-auto group-hover:text-gray-700 w-5 h-5" />
-            ) : (
-              <ChevronRightIcon className="my-auto group-hover:text-gray-700 w-5 h-5" />
-            )}
           </Disclosure.Button>
           <Disclosure.Panel>
             <>
-              <div className="flex whitespace-nowrap p-3 justify-between border-b">
+              <div className="flex bg-gray-50 whitespace-nowrap p-3 justify-between border-b">
                 <div className="my-auto">
                   {props.translations.device_region_title}
                 </div>
@@ -79,7 +79,7 @@ const Device = (props: DeviceProps) => {
                   </select>
                 </div>
               </div>
-              <div className="flex whitespace-nowrap p-3 justify-between border-b">
+              <div className="flex bg-gray-50 whitespace-nowrap p-3 justify-between border-b">
                 <div className="my-auto">
                   {props.translations.device_wifi_ssid}
                 </div>
@@ -91,7 +91,7 @@ const Device = (props: DeviceProps) => {
                   />
                 </div>
               </div>
-              <div className="flex whitespace-nowrap p-3 justify-between border-b">
+              <div className="flex bg-gray-50 whitespace-nowrap p-3 justify-between border-b">
                 <div className="my-auto">
                   {props.translations.device_wifi_psk}
                 </div>
@@ -102,7 +102,7 @@ const Device = (props: DeviceProps) => {
                   />
                 </div>
               </div>
-              <div className="flex group p-1 bg-gray-100 cursor-pointer hover:bg-gray-200 border-b">
+              <div className="flex bg-gray-100 group p-1 cursor-pointer hover:bg-gray-200 border-b">
                 <div
                   className="flex m-auto font-medium group-hover:text-gray-700"
                   onClick={() => {

src/components/Sidebar/Nodes/Index.tsx

@@ -25,14 +25,14 @@ const Nodes = (props: NodesProps) => {
         <>
           <Disclosure.Button className="flex rounded-t-md w-full text-lg font-medium justify-between p-3 border-b hover:bg-gray-200 cursor-pointer">
             <div className="flex">
-              <UsersIcon className="my-auto mr-2 w-5 h-5" />
+              {open ? (
+                <ChevronDownIcon className="my-auto w-5 h-5 mr-2" />
+              ) : (
+                <ChevronRightIcon className="my-auto w-5 h-5 mr-2" />
+              )}
+              <UsersIcon className="my-auto text-gray-600 mr-2 w-5 h-5" />
               {props.translations.nodes_title}
             </div>
-            {open ? (
-              <ChevronDownIcon className="my-auto group-hover:text-gray-700 w-5 h-5" />
-            ) : (
-              <ChevronRightIcon className="my-auto group-hover:text-gray-700 w-5 h-5" />
-            )}
           </Disclosure.Button>
           <Disclosure.Panel className="shadow-inner">
             {props.nodes.length ? (

src/components/Sidebar/Nodes/Node.tsx

@@ -2,6 +2,8 @@ import React from 'react';
 
 import { Disclosure } from '@headlessui/react';
 import {
+  ChevronDownIcon,
+  ChevronRightIcon,
   ClockIcon,
   DesktopComputerIcon,
   FlagIcon,
@@ -20,18 +22,23 @@ const Node = (props: NodeProps) => {
     <Disclosure>
       {({ open }) => (
         <>
-          <Disclosure.Button className="flex w-full text-lg font-medium justify-between p-3 border-b hover:bg-gray-200 cursor-pointer">
-            <div className="flex">
+          <Disclosure.Button className="flex bg-gray-50 w-full text-lg font-medium justify-between p-3 border-b hover:bg-gray-200 cursor-pointer">
+            <div className="flex ml-4">
+              {open ? (
+                <ChevronDownIcon className="my-auto w-5 h-5 mr-2" />
+              ) : (
+                <ChevronRightIcon className="my-auto w-5 h-5 mr-2" />
+              )}
               {props.node.data.num === props.myId ? (
                 <FlagIcon className="text-yellow-500 my-auto mr-2 w-5 h-5" />
               ) : (
-                <DesktopComputerIcon className="my-auto mr-2 w-5 h-5" />
+                <DesktopComputerIcon className="text-gray-600 my-auto mr-2 w-5 h-5" />
               )}
-              <div className="m-auto">{props.node.data.user?.longName}</div>
+              {props.node.data.user?.longName}
             </div>
           </Disclosure.Button>
           <Disclosure.Panel>
-            <div>
+            <div className="border-b bg-gray-100 px-2">
               <p>
                 SNR:{' '}
                 {props.node.packet?.rxSnr ? props.node.packet.rxSnr : 'Unknown'}

src/components/Sidebar/UI/Index.tsx

@@ -25,14 +25,14 @@ const UI = (props: UIProps) => {
         <>
           <Disclosure.Button className="flex w-full text-lg font-medium justify-between p-3 border-b hover:bg-gray-200 cursor-pointer">
             <div className="flex">
-              <CogIcon className="my-auto mr-2 w-5 h-5" />
+              {open ? (
+                <ChevronDownIcon className="my-auto w-5 h-5 mr-2" />
+              ) : (
+                <ChevronRightIcon className="my-auto w-5 h-5 mr-2" />
+              )}
+              <CogIcon className="my-auto text-gray-600 mr-2 w-5 h-5" />
               {props.translations.ui_settings_title}
             </div>
-            {open ? (
-              <ChevronDownIcon className="my-auto group-hover:text-gray-700 w-5 h-5" />
-            ) : (
-              <ChevronRightIcon className="my-auto group-hover:text-gray-700 w-5 h-5" />
-            )}
           </Disclosure.Button>
           <Disclosure.Panel>
             <Translations

src/components/Sidebar/UI/Translations.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import { Br, Jp, Us } from 'react-flags-select';
 
 import { Disclosure } from '@headlessui/react';
+import { ChevronDownIcon, ChevronRightIcon } from '@heroicons/react/outline';
 
 import { LanguageEnum, languageTemplate } from '../../../App';
 
@@ -17,27 +18,49 @@ const Translations = (props: TranslationsProps) => {
     <Disclosure>
       {({ open }) => (
         <>
-          <Disclosure.Button className="flex w-full text-lg font-medium justify-between p-3 border-b hover:bg-gray-200 cursor-pointer">
-            <div className="flex my-auto">
+          <Disclosure.Button className="flex bg-gray-50 w-full text-lg font-medium justify-between p-3 border-b hover:bg-gray-200 cursor-pointer">
+            <div className="flex ml-4">
+              {open ? (
+                <ChevronDownIcon className="my-auto w-5 h-5 mr-2" />
+              ) : (
+                <ChevronRightIcon className="my-auto w-5 h-5 mr-2" />
+              )}
               {props.translations.language_title}
               <div className="my-auto">
                 {props.language === LanguageEnum.ENGLISH ? (
-                  <Us className="ml-2 w-8 shadow-md" />
+                  <Us className="ml-2 w-8" />
                 ) : props.language === LanguageEnum.JAPANESE ? (
-                  <Jp className="ml-2 w-8 shadow-md" />
+                  <Jp className="ml-2 w-8" />
+                ) : props.language === LanguageEnum.PORTUGUESE ? (
+                  <Br className="ml-2 w-8" />
                 ) : null}
               </div>
             </div>
           </Disclosure.Button>
           <Disclosure.Panel>
-            <div>
-              English <Us className="w-8 shadow-md" />
+            <div
+              className="flex bg-gray-100 hover:bg-gray-200 cursor-pointer justify-between p-2"
+              onClick={() => {
+                props.setLanguage(LanguageEnum.ENGLISH);
+              }}
+            >
+              English <Us className="w-8 my-auto" />
             </div>
-            <div>
-              Português <Br className="w-8 shadow-md" />
+            <div
+              className="flex bg-gray-100 hover:bg-gray-200 cursor-pointer justify-between p-2"
+              onClick={() => {
+                props.setLanguage(LanguageEnum.PORTUGUESE);
+              }}
+            >
+              Português <Br className="w-8 my-auto" />
             </div>
-            <div>
-              日本語 <Jp className="w-8 shadow-md" />
+            <div
+              className="flex bg-gray-100 hover:bg-gray-200 cursor-pointer justify-between p-2"
+              onClick={() => {
+                props.setLanguage(LanguageEnum.JAPANESE);
+              }}
+            >
+              日本語 <Jp className="w-8 my-auto" />
             </div>
           </Disclosure.Panel>
         </>