Misc fixed and lightmode improvements

src/components/Connection.tsx

@@ -95,7 +95,7 @@ export const Connection = (): JSX.Element => {
                 <div className="h-96 overflow-y-auto rounded-md bg-secondaryDark p-2">
                   {state.logs.map((log, index) => (
                     <div key={index} className="flex">
-                      <div className="truncate text-sm font-medium">
+                      <div className="truncate font-mono text-sm">
                         {log.message}
                       </div>
                     </div>

src/components/generic/ContextItem.tsx

@@ -0,0 +1,23 @@
+import type React from 'react';
+
+import { m } from 'framer-motion';
+
+export interface ContextItem {
+  title: string;
+  icon: JSX.Element;
+}
+
+export const ContextItem = ({ title, icon }: ContextItem): JSX.Element => {
+  return (
+    <div className="cursor-pointer first:rounded-t-md last:rounded-b-md hover:dark:bg-secondaryDark">
+      <m.div
+        whileHover={{ scale: 1.01 }}
+        whileTap={{ scale: 0.99 }}
+        className="flex gap-2 p-2"
+      >
+        <div className="my-auto">{icon}</div>
+        <div className="truncate">{title}</div>
+      </m.div>
+    </div>
+  );
+};

src/components/generic/ContextMenu.tsx

@@ -1,91 +1,54 @@
 import React from 'react';
 
-import { m } from 'framer-motion';
 import { FiActivity, FiAperture, FiTag } from 'react-icons/fi';
 
+import { ContextItem } from './ContextItem';
+
 export interface ContextMenuProps {
+  items?: JSX.Element;
   children: React.ReactNode;
 }
 
-export const ContextMenu = ({ children }: ContextMenuProps): JSX.Element => {
+export const ContextMenu = ({
+  items,
+  children,
+}: ContextMenuProps): JSX.Element => {
   const [visible, setVisible] = React.useState(false);
   const [position, setPosition] = React.useState({ x: 0, y: 0 });
-  const [selectedValue, setSelectedValue] = React.useState<string>();
-  const doSomething = (selectedValue: string) => {
-    setSelectedValue(selectedValue);
-  };
-
-  const showContextMenu = (event: React.MouseEvent<HTMLDivElement>) => {
-    event.preventDefault();
-
-    setVisible(false);
-    const newPosition = {
-      x: event.pageX,
-      y: event.pageY,
-    };
-
-    setPosition(newPosition);
-    setVisible(true);
-  };
-
-  const hideContextMenu = (event: React.MouseEvent<HTMLDivElement>) => {
-    setVisible(false);
-  };
 
   return (
     <div
       className="h-full"
-      onContextMenu={showContextMenu}
-      onClick={hideContextMenu}
+      onContextMenu={(e): void => {
+        e.preventDefault();
+
+        setVisible(false);
+        const newPosition = {
+          x: e.pageX,
+          y: e.pageY,
+        };
+
+        setPosition(newPosition);
+        setVisible(true);
+      }}
+      onClick={(): void => {
+        setVisible(false);
+      }}
     >
       {children}
-      {selectedValue && <h1>{selectedValue} is selected</h1>}
 
       {visible && (
         <div
           style={{ top: position.y, left: position.x }}
           className="fixed z-50 w-60 gap-2 divide-y divide-gray-300 rounded-md border border-gray-300 font-medium shadow-md backdrop-blur-xl dark:divide-gray-600 dark:border-gray-600  dark:text-gray-400"
         >
-          <div className="cursor-pointer first:rounded-t-md last:rounded-b-md hover:dark:bg-secondaryDark">
-            <m.div
-              whileHover={{ scale: 1.01 }}
-              whileTap={{ scale: 0.99 }}
-              className="flex gap-2 p-2"
-            >
-              <div className="my-auto">
-                <FiActivity />
-              </div>
-              <div className="truncate">Menu item</div>
-            </m.div>
-          </div>
-
-          <div className="cursor-pointer first:rounded-t-md last:rounded-b-md hover:dark:bg-secondaryDark">
-            <m.div
-              whileHover={{ scale: 1.01 }}
-              whileTap={{ scale: 0.99 }}
-              className="flex gap-2 p-2"
-            >
-              <div className="my-auto">
-                <FiAperture />
-              </div>
-              <div className="truncate">Menu item 2</div>
-            </m.div>
-          </div>
-
-          <div className="cursor-pointer first:rounded-t-md last:rounded-b-md hover:dark:bg-secondaryDark">
-            <m.div
-              whileHover={{ scale: 1.01 }}
-              whileTap={{ scale: 0.99 }}
-              className="flex gap-2 p-2"
-            >
-              <div className="my-auto">
-                <FiTag />
-              </div>
-              <div className="truncate">
-                Menu item 3 with a very long name that should wrap
-              </div>
-            </m.div>
-          </div>
+          {items}
+          <ContextItem title="Menu item" icon={<FiActivity />} />
+          <ContextItem title="Menu item 2" icon={<FiAperture />} />
+          <ContextItem
+            title="Menu item 3 with a very long name that should wrap"
+            icon={<FiTag />}
+          />
         </div>
       )}
     </div>

src/components/layout/Sidebar/ButtonNav.tsx

@@ -21,7 +21,7 @@ export const ButtonNav = ({
   const dispatch = useAppDispatch();
 
   return (
-    <div className="z-30 flex justify-between border-t border-gray-300 px-6 py-2 dark:border-gray-600 dark:bg-primaryDark">
+    <div className="z-30 flex justify-between border-t border-gray-300 bg-white px-6 py-2 dark:border-gray-600 dark:bg-primaryDark">
       <div
         onClick={(): void => {
           dispatch(toggleMobileNav());

src/components/layout/Sidebar/sections/CollapsibleSection.tsx

@@ -22,14 +22,14 @@ export const CollapsibleSection = ({
     <m.div>
       <m.div
         layout
-        className="w-full cursor-pointer select-none overflow-hidden shadow-md dark:bg-secondaryDark dark:text-gray-400"
+        className="w-full cursor-pointer select-none overflow-hidden 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-primaryDark p-2 text-sm font-medium"
+          className="flex justify-between gap-2 border-b border-gray-300 p-2 text-sm font-medium dark:border-primaryDark"
         >
           <m.div className="flex gap-2 ">
             <m.div className="my-auto">{icon}</m.div>
@@ -52,7 +52,7 @@ export const CollapsibleSection = ({
         {open && (
           <>
             {actions && (
-              <m.div className="flex justify-end gap-1 rounded-b-md border-x border-b p-1 shadow-inner dark:border-gray-600">
+              <m.div className="flex justify-end gap-1 rounded-b-md border-x border-b p-1 dark:border-gray-600">
                 {actions}
               </m.div>
             )}

src/components/layout/Sidebar/sections/ExternalSection.tsx

@@ -24,14 +24,14 @@ export const ExternalSection = ({
     >
       <m.div
         layout
-        className="w-full cursor-pointer select-none overflow-hidden shadow-md dark:bg-secondaryDark dark:text-gray-400"
+        className="w-full cursor-pointer select-none overflow-hidden 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-primaryDark p-2 text-sm font-medium"
+          className="flex justify-between gap-2 border-b border-gray-300 p-2 text-sm font-medium dark:border-primaryDark"
         >
           <m.div className="flex gap-2 ">
             <m.div className="my-auto">{icon}</m.div>

src/components/layout/index.tsx

@@ -34,7 +34,9 @@ export const Layout = ({
         </Sidebar>
       </div>
       <ErrorBoundary FallbackComponent={ErrorFallback}>
-        {children}
+        <div className="flex h-full w-full bg-gray-300 dark:bg-secondaryDark">
+          {children}
+        </div>
       </ErrorBoundary>
     </div>
   );