Modal and connection modal improvements

src/components/Connection.tsx

@@ -1,7 +1,7 @@
 import type React from 'react';
 import { useEffect } from 'react';
 
-import { AnimatePresence, m } from 'framer-motion';
+import { m } from 'framer-motion';
 
 import { BLE } from '@components/connection/BLE';
 import { HTTP } from '@components/connection/HTTP';
@@ -49,17 +49,16 @@ export const Connection = (): JSX.Element => {
   }, [meshtasticState.ready, dispatch]);
 
   return (
-    <AnimatePresence>
-      {appState.connectionModalOpen && (
     <Modal
       title="Connect to a device"
+      open={appState.connectionModalOpen}
       onClose={(): void => {
         dispatch(closeConnectionModal());
       }}
     >
       <div className="flex max-w-3xl flex-col gap-4 md:flex-row">
-            <div className="md:w-1/2">
-              <div className="space-y-2">
+        <div className="flex flex-col md:w-1/2">
+          <div className="flex flex-grow flex-col space-y-2">
             <Select
               label="Connection Method"
               optionsEnum={connType}
@@ -108,9 +107,7 @@ export const Connection = (): JSX.Element => {
                   exit={{ opacity: 0 }}
                   className="m-auto h-40 w-40 text-green-500"
                   src={`/placeholders/${
-                        appState.darkMode
-                          ? 'View Code Dark.svg'
-                          : 'View Code.svg'
+                    appState.darkMode ? 'View Code Dark.svg' : 'View Code.svg'
                   }`}
                 />
               </div>
@@ -134,7 +131,5 @@ export const Connection = (): JSX.Element => {
         </div>
       </div>
     </Modal>
-      )}
-    </AnimatePresence>
   );
 };

src/components/connection/BLE.tsx

@@ -36,13 +36,12 @@ export const BLE = ({ connecting }: BLEProps): JSX.Element => {
   });
 
   return (
-    <form onSubmit={onSubmit} className="space-y-2">
-      {bleDevices.map((device, index) => (
+    <form onSubmit={onSubmit} className="flex flex-grow flex-col">
+      <div className="flex flex-grow flex-col gap-2 overflow-y-auto rounded-md border border-gray-300 bg-gray-200 p-2 dark:border-gray-600 dark:bg-secondaryDark dark:text-gray-400">
+        {bleDevices.length > 0 ? (
+          bleDevices.map((device, index) => (
             <div
-          onClick={async (): Promise<void> => {
-            await setConnection(connType.BLE);
-          }}
-          className="flex justify-between rounded-md bg-gray-700 p-2 dark:text-white"
+              className="flex justify-between rounded-md bg-white p-2 dark:bg-primaryDark dark:text-white"
               key={index}
             >
               <div className="my-auto">{device.name}</div>
@@ -55,7 +54,13 @@ export const BLE = ({ connecting }: BLEProps): JSX.Element => {
                 disabled={connecting}
               />
             </div>
-      ))}
+          ))
+        ) : (
+          <div className="m-auto">
+            <p>No previously connected devices found</p>
+          </div>
+        )}
+      </div>
       <Button
         className="mt-2 ml-auto"
         onClick={async (): Promise<void> => {

src/components/connection/Serial.tsx

@@ -38,11 +38,12 @@ export const Serial = ({ connecting }: SerialProps): JSX.Element => {
   });
 
   return (
-    <form onSubmit={onSubmit} className="space-y-2">
+    <form onSubmit={onSubmit} className="flex flex-grow flex-col">
+      <div className="flex flex-grow flex-col gap-2 overflow-y-auto rounded-md border border-gray-300 bg-gray-200 p-2 dark:border-gray-600 dark:bg-secondaryDark dark:text-gray-400">
         {serialDevices.length > 0 ? (
           serialDevices.map((device, index) => (
             <div
-            className="flex justify-between rounded-md bg-secondaryDark p-2 dark:text-white"
+              className="flex justify-between rounded-md bg-white p-2 dark:bg-primaryDark dark:text-white"
               key={index}
             >
               <div className="my-auto flex gap-4">
@@ -54,7 +55,6 @@ export const Serial = ({ connecting }: SerialProps): JSX.Element => {
                 </p>
               </div>
               <IconButton
-              nested
                 onClick={async (): Promise<void> => {
                   dispatch(
                     setConnectionParams({
@@ -72,10 +72,11 @@ export const Serial = ({ connecting }: SerialProps): JSX.Element => {
             </div>
           ))
         ) : (
-        <div className="h-40 rounded-md border border-gray-300 dark:border-gray-600">
+          <div className="m-auto">
             <p>No previously connected devices found</p>
           </div>
         )}
+      </div>
       <Button
         className="mt-2 ml-auto"
         onClick={async (): Promise<void> => {

src/components/generic/Card.tsx

@@ -47,6 +47,7 @@ export const Card = ({
           initial={{ opacity: 0 }}
           animate={{ opacity: 1 }}
           exit={{ opacity: 0 }}
+          transition={{ duration: 0.1 }}
         >
           {children}
         </m.div>

src/components/generic/Modal.tsx

@@ -1,33 +1,45 @@
 import type React from 'react';
 
-import { m } from 'framer-motion';
+import { AnimatePresence, m } from 'framer-motion';
 import { FiX } from 'react-icons/fi';
 
 import { useAppSelector } from '@hooks/useAppSelector';
 
 import { IconButton } from './button/IconButton';
-import { Card } from './Card';
+import { Card, CardProps } from './Card';
 
-export interface ModalProps {
-  title: string;
+export interface ModalProps extends CardProps {
+  open: boolean;
+  bgDismiss?: boolean;
   onClose: () => void;
-  actions?: React.ReactNode;
-  children: React.ReactNode;
 }
 
 export const Modal = ({
-  title,
+  open,
+  bgDismiss,
   onClose,
   actions,
-  children,
+  ...props
 }: ModalProps): JSX.Element => {
   const darkMode = useAppSelector((state) => state.app.darkMode);
 
   return (
-    <m.div className={`fixed inset-0 z-30 ${darkMode ? 'dark' : ''}`}>
+    <AnimatePresence>
+      {open && (
         <m.div
-        className="fixed h-full w-full backdrop-blur-sm backdrop-filter"
-        onClick={onClose}
+          className={`fixed inset-0  ${darkMode ? 'dark' : ''} ${
+            open ? 'z-30' : 'z-0'
+          }`}
+        >
+          <m.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            transition={{ duration: 0.1 }}
+            className="fixed h-full w-full backdrop-blur-md backdrop-filter"
+            onClick={(): void => {
+              bgDismiss && onClose();
+            }}
           />
           <m.div className="text-center ">
             <span
@@ -40,19 +52,23 @@ export const Modal = ({
               <Card
                 border
                 draggable
-            title={title}
                 actions={
-              <>
+                  <div className="flex gap-2">
                     {actions}
-                <IconButton tooltip="Close" icon={<FiX />} onClick={onClose} />
-              </>
+                    <IconButton
+                      tooltip="Close"
+                      icon={<FiX />}
+                      onClick={onClose}
+                    />
+                  </div>
                 }
-            className="relative flex-col gap-4 "
-          >
-            {children}
-          </Card>
+                className="relative flex-col gap-4"
+                {...props}
+              />
             </div>
           </m.div>
         </m.div>
+      )}
+    </AnimatePresence>
   );
 };

src/components/menu/BottomNav.tsx

@@ -146,7 +146,7 @@ export const BottomNav = (): JSX.Element => {
       </BottomNavItem>
 
       <VersionInfo
-        visible={showVersionInfo}
+        modalOpen={showVersionInfo}
         onClose={(): void => {
           setShowVersionInfo(false);
         }}

src/components/modals/VersionInfo.tsx

@@ -1,7 +1,6 @@
 import type React from 'react';
 import { useEffect } from 'react';
 
-import { AnimatePresence } from 'framer-motion';
 import { MdUpgrade } from 'react-icons/md';
 import useSWR from 'swr';
 
@@ -38,12 +37,12 @@ export interface Commit {
 }
 
 export interface VersionInfoProps {
-  visible: boolean;
+  modalOpen: boolean;
   onClose: () => void;
 }
 
 export const VersionInfo = ({
-  visible,
+  modalOpen,
   onClose,
 }: VersionInfoProps): JSX.Element => {
   const appState = useAppSelector((state) => state.app);
@@ -67,13 +66,13 @@ export const VersionInfo = ({
         dispatch(setUpdateAvaliable(true));
       }
     }
-  }, [data]);
+  }, [data, dispatch]);
 
   return (
-    <AnimatePresence>
-      {visible && (
     <Modal
+      open={modalOpen}
       title="Version Info"
+      bgDismiss
       actions={
         // TODO: Check if version is hosted, and merge pwa update button here
         appState.updateAvaliable && (
@@ -98,9 +97,7 @@ export const VersionInfo = ({
               }`}
             >
               <div className="my-auto text-xs dark:text-gray-400">
-                    {new Date(
-                      commit.commit.committer.date,
-                    ).toLocaleDateString()}
+                {new Date(commit.commit.committer.date).toLocaleDateString()}
               </div>
               <div className="my-auto font-mono text-sm">
                 {commit.sha.substring(0, 7)}
@@ -110,7 +107,5 @@ export const VersionInfo = ({
           ))}
       </div>
     </Modal>
-      )}
-    </AnimatePresence>
   );
 };