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>
         ))