Minor UI Tweaks

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>