Fix mobile nav & minor tweaks

src/components/Connection.tsx

@@ -56,8 +56,8 @@ export const Connection = (): JSX.Element => {
             dispatch(closeConnectionModal());
           }}
         >
-          <div className="flex max-w-3xl flex-grow gap-4">
-            <div className="w-1/2">
+          <div className="flex max-w-3xl flex-col gap-4 md:flex-row">
+            <div className="md:w-1/2">
               <div className="space-y-2">
                 <Select
                   label="Connection Method"
@@ -97,7 +97,7 @@ export const Connection = (): JSX.Element => {
                 )}
               </div>
             </div>
-            <div className="w-1/2">
+            <div className="md:w-1/2">
               <div className="h-96 overflow-y-auto rounded-md bg-gray-200 p-2 dark:bg-secondaryDark dark:text-gray-400">
                 {state.logs
                   .filter((log) => {

src/components/connection/BLE.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { useForm } from 'react-hook-form';
-import { FiCheck } from 'react-icons/fi';
+import { FiArrowRightCircle } from 'react-icons/fi';
 
 import { Button } from '@components/generic/button/Button';
 import { IconButton } from '@components/generic/button/IconButton';
@@ -41,7 +41,7 @@ export const BLE = ({ connecting }: BLEProps): JSX.Element => {
           onClick={async (): Promise<void> => {
             await setConnection(connType.BLE);
           }}
-          className="flex justify-between rounded-md bg-gray-700 p-2"
+          className="flex justify-between rounded-md bg-gray-700 p-2 dark:text-white"
           key={index}
         >
           <div className="my-auto">{device.name}</div>
@@ -49,7 +49,7 @@ export const BLE = ({ connecting }: BLEProps): JSX.Element => {
             onClick={async (): Promise<void> => {
               await setConnection(connType.BLE);
             }}
-            icon={<FiCheck />}
+            icon={<FiArrowRightCircle />}
             disabled={connecting}
           />
         </div>

src/components/connection/Serial.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { useForm } from 'react-hook-form';
-import { FiCheck } from 'react-icons/fi';
+import { FiArrowRightCircle } from 'react-icons/fi';
 
 import { Button } from '@components/generic/button/Button';
 import { IconButton } from '@components/generic/button/IconButton';
@@ -41,7 +41,7 @@ export const Serial = ({ connecting }: SerialProps): JSX.Element => {
       {serialDevices.length > 0 ? (
         serialDevices.map((device, index) => (
           <div
-            className="flex justify-between rounded-md bg-secondaryDark p-2"
+            className="flex justify-between rounded-md bg-secondaryDark p-2 dark:text-white"
             key={index}
           >
             <div className="my-auto flex gap-4">
@@ -65,7 +65,7 @@ export const Serial = ({ connecting }: SerialProps): JSX.Element => {
                 await setConnection(connType.SERIAL);
               }}
               disabled={connecting}
-              icon={<FiCheck />}
+              icon={<FiArrowRightCircle />}
             />
           </div>
         ))

src/pages/Nodes/NodeCard.tsx

@@ -129,23 +129,28 @@ export const NodeCard = ({
         </CollapsibleSection>
         <CollapsibleSection title="Location" icon={<FiMapPin />}>
           <>
-            {node.currentPosition && (
-              <div className="flex h-10 select-none justify-between rounded-md border border-gray-300 bg-transparent bg-gray-200 px-1 text-gray-500 dark:border-gray-600 dark:bg-secondaryDark dark:text-gray-400 ">
-                <div className="my-auto px-1">
-                  {(node.currentPosition.latitudeI / 1e7).toPrecision(6)},&nbsp;
-                  {(node.currentPosition?.longitudeI / 1e7).toPrecision(6)}
-                </div>
-                <CopyButton
-                  data={
-                    node.currentPosition
-                      ? `${node.currentPosition.latitudeI / 1e7},${
-                          node.currentPosition.longitudeI / 1e7
-                        }`
-                      : ''
-                  }
-                />
-              </div>
-            )}
+            <div className="flex h-10 select-none justify-between rounded-md border border-gray-300 bg-transparent bg-gray-200 px-1 text-gray-500 dark:border-gray-600 dark:bg-secondaryDark dark:text-gray-400 ">
+              {node.currentPosition ? (
+                <>
+                  <div className="my-auto px-1">
+                    {(node.currentPosition.latitudeI / 1e7).toPrecision(6)}
+                    ,&nbsp;
+                    {(node.currentPosition?.longitudeI / 1e7).toPrecision(6)}
+                  </div>
+                  <CopyButton
+                    data={
+                      node.currentPosition
+                        ? `${node.currentPosition.latitudeI / 1e7},${
+                            node.currentPosition.longitudeI / 1e7
+                          }`
+                        : ''
+                    }
+                  />
+                </>
+              ) : (
+                <div className="my-auto px-1">No location data received</div>
+              )}
+            </div>
           </>
         </CollapsibleSection>
         <CollapsibleSection title="Line of Sight" icon={<IoTelescope />}>