Minor UI Tweaks

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 ![

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 && (
-          <>
+          <m.div
-            {actions && (
+            className="p-2"
-              <m.div className="flex justify-end gap-1 rounded-b-md border-x border-b p-1 dark:border-gray-600">
+            layout
-                {actions}
+            initial={{ opacity: 0 }}
-              </m.div>
+            animate={{ opacity: 1 }}
-            )}
+            exit={{ opacity: 0 }}
-            <m.div
+          >
-              className="p-2"
+            {children}
-              layout
+          </m.div>
-              initial={{ opacity: 0 }}
-              animate={{ opacity: 1 }}
-              exit={{ opacity: 0 }}
-            >
-              {children}
-            </m.div>
-          </>
         )}
       </AnimatePresence>
     </m.div>

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 />} />
-                </>
-              }
             >
-              <>
+              <SettingsPanel channel={channel} />
-                {/* <DebugPanel channel={channel} /> */}
-                {/* <QRCodePanel channel={channel} /> */}
-                <SettingsPanel channel={channel} />
-              </>
             </CollapsibleSection>
           </div>
         );

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 ? (