From 9f7561dac00f24b1fb527aaf86e8220870fe54d4 Mon Sep 17 00:00:00 2001
From: Sacha Weatherstone <sachaw100@hotmail.com>
Date: Sat, 19 Feb 2022 23:21:00 +1100
Subject: [PATCH] Minor UI Tweaks

---
 src/components/Connection.tsx                 |  2 +-
 .../generic/Sidebar/CollapsibleSection.tsx    | 32 +++++++------------
 .../Settings/channels/ChannelsGroup.tsx       | 17 +---------
 src/components/menu/BottomNav.tsx             |  2 +-
 4 files changed, 15 insertions(+), 38 deletions(-)

diff --git a/src/components/Connection.tsx b/src/components/Connection.tsx
index 5dd3a305..5a263774 100644
--- a/src/components/Connection.tsx
+++ b/src/components/Connection.tsx
@@ -98,7 +98,7 @@ export const Connection = (): JSX.Element => {
               </div>
             </div>
             <div className="w-1/2">
-              <div className="h-96 overflow-y-auto rounded-md bg-gray-200 dark:bg-secondaryDark dark:text-gray-400">
+              <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) => {
                     return ![
diff --git a/src/components/generic/Sidebar/CollapsibleSection.tsx b/src/components/generic/Sidebar/CollapsibleSection.tsx
index 0020f8b3..ff44b77c 100644
--- a/src/components/generic/Sidebar/CollapsibleSection.tsx
+++ b/src/components/generic/Sidebar/CollapsibleSection.tsx
@@ -6,14 +6,12 @@ import { FiArrowUp } from 'react-icons/fi';
 export interface CollapsibleSectionProps {
   title: string;
   icon?: JSX.Element;
-  actions?: JSX.Element;
   children: JSX.Element;
 }
 
 export const CollapsibleSection = ({
   title,
   icon,
-  actions,
   children,
 }: CollapsibleSectionProps): JSX.Element => {
   const [open, setOpen] = React.useState(false);
@@ -22,14 +20,14 @@ export const CollapsibleSection = ({
     <m.div>
       <m.div
         layout
-        className="w-full cursor-pointer select-none overflow-hidden dark:bg-secondaryDark dark:text-gray-400"
+        className="w-full cursor-pointer select-none overflow-hidden border-b border-gray-300 p-2 text-sm font-medium dark:border-primaryDark dark:bg-secondaryDark dark:text-gray-400"
       >
         <m.div
           layout
           onClick={toggleOpen}
           whileHover={{ scale: 1.01 }}
           whileTap={{ scale: 0.99 }}
-          className="flex justify-between gap-2 border-b border-gray-300 p-2 text-sm font-medium dark:border-primaryDark"
+          className="flex justify-between gap-2 "
         >
           <m.div className="flex gap-2 ">
             <m.div className="my-auto">{icon}</m.div>
@@ -42,6 +40,7 @@ export const CollapsibleSection = ({
               open: { rotate: 0 },
               closed: { rotate: 180 },
             }}
+            transition={{ type: 'just' }}
             className="my-auto"
           >
             <FiArrowUp />
@@ -50,22 +49,15 @@ export const CollapsibleSection = ({
       </m.div>
       <AnimatePresence>
         {open && (
-          <>
-            {actions && (
-              <m.div className="flex justify-end gap-1 rounded-b-md border-x border-b p-1 dark:border-gray-600">
-                {actions}
-              </m.div>
-            )}
-            <m.div
-              className="p-2"
-              layout
-              initial={{ opacity: 0 }}
-              animate={{ opacity: 1 }}
-              exit={{ opacity: 0 }}
-            >
-              {children}
-            </m.div>
-          </>
+          <m.div
+            className="p-2"
+            layout
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+          >
+            {children}
+          </m.div>
         )}
       </AnimatePresence>
     </m.div>
diff --git a/src/components/layout/Sidebar/Settings/channels/ChannelsGroup.tsx b/src/components/layout/Sidebar/Settings/channels/ChannelsGroup.tsx
index aaeaba7e..f8cd9c8a 100644
--- a/src/components/layout/Sidebar/Settings/channels/ChannelsGroup.tsx
+++ b/src/components/layout/Sidebar/Settings/channels/ChannelsGroup.tsx
@@ -1,9 +1,5 @@
 import type React from 'react';
 
-import { FaQrcode } from 'react-icons/fa';
-import { FiCode, FiSave } from 'react-icons/fi';
-
-import { IconButton } from '@components/generic/button/IconButton';
 import { CollapsibleSection } from '@components/generic/Sidebar/CollapsibleSection';
 import { SettingsPanel } from '@components/layout/Sidebar/Settings/channels/Channels';
 import { useAppSelector } from '@hooks/useAppSelector';
@@ -36,19 +32,8 @@ export const ChannelsGroup = (): JSX.Element => {
                   }`}
                 />
               }
-              actions={
-                <>
-                  <IconButton icon={<FiCode />} />
-                  <IconButton icon={<FaQrcode />} />
-                  <IconButton icon={<FiSave />} />
-                </>
-              }
             >
-              <>
-                {/* <DebugPanel channel={channel} /> */}
-                {/* <QRCodePanel channel={channel} /> */}
-                <SettingsPanel channel={channel} />
-              </>
+              <SettingsPanel channel={channel} />
             </CollapsibleSection>
           </div>
         );
diff --git a/src/components/menu/BottomNav.tsx b/src/components/menu/BottomNav.tsx
index b87662e1..9dc72321 100644
--- a/src/components/menu/BottomNav.tsx
+++ b/src/components/menu/BottomNav.tsx
@@ -66,7 +66,7 @@ export const BottomNav = (): JSX.Element => {
                 Types.DeviceStatusEnum.DEVICE_CONFIGURING,
               ].includes(meshtasticState.deviceStatus)
             ? 'bg-yellow-400 dark:bg-yellow-400'
-            : 'bg-gray-400 dark:bg-secondaryDark dark:text-white'
+            : ''
         }
       >
         {appState.connType === connType.BLE ? (