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}
+      onContextMenu={(e): void => {
-      onClick={hideContextMenu}
+        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">
+          {items}
-            <m.div
+          <ContextItem title="Menu item" icon={<FiActivity />} />
-              whileHover={{ scale: 1.01 }}
+          <ContextItem title="Menu item 2" icon={<FiAperture />} />
-              whileTap={{ scale: 0.99 }}
+          <ContextItem
-              className="flex gap-2 p-2"
+            title="Menu item 3 with a very long name that should wrap"
-            >
+            icon={<FiTag />}
-              <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>
         </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>
   );

src/pages/Extensions/FileBrowser.tsx

@@ -39,8 +39,8 @@ export const FileBrowser = (): JSX.Element => {
 
   return (
     <div className="flex h-full w-full select-none flex-col gap-4 p-4">
-      <div className="w-full flex-grow rounded-md bg-gray-200 dark:bg-primaryDark">
+      <div className="w-full flex-grow rounded-md bg-white dark:bg-primaryDark">
-        <div className="flex h-10 w-full rounded-t-md bg-gray-300 px-4 text-lg font-semibold dark:bg-zinc-700 dark:text-white">
+        <div className="flex h-10 w-full rounded-t-md border-b border-gray-300 px-4 text-lg font-semibold shadow-md dark:border-gray-600 dark:bg-zinc-700 dark:text-white">
           <div className="my-auto  w-1/3">FileName</div>
           <div className="my-auto  w-1/3">Actions</div>
         </div>
@@ -63,7 +63,7 @@ export const FileBrowser = (): JSX.Element => {
           {data?.data.files.map((file) => (
             <div
               key={file.name}
-              className="flex h-10 w-full border-b border-gray-500 px-4 font-medium dark:text-white"
+              className="flex h-10 w-full border-b border-gray-300 px-4 font-medium dark:border-gray-600 dark:text-white"
             >
               <div className="my-auto  w-1/3">
                 <a

src/pages/Extensions/Info.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 
-import { m } from 'framer-motion';
 import JSONPretty from 'react-json-pretty';
 
 import { useAppSelector } from '@app/hooks/useAppSelector';
@@ -17,20 +16,17 @@ export const Info = (): JSX.Element => {
   );
 
   return (
-    <div className="flex w-full flex-grow select-none flex-col gap-4 p-4">
+    <div className="flex h-full flex-col gap-4 p-4 md:flex-row">
-      <m.div
+      <div className="flex w-full flex-col gap-4 rounded-md bg-white p-8 shadow-md dark:bg-primaryDark md:w-1/4">
-        whileHover={{ scale: 1.01 }}
-        className="flex w-full flex-col gap-4 rounded-md p-8 shadow-md dark:bg-primaryDark"
-      >
         <div className="m-auto">
           <Hashicon value={hardwareInfo.myNodeNum.toString()} size={180} />
         </div>
         <div className="text-center text-lg font-medium dark:text-white">
           {node?.user?.longName || 'Unknown'}
         </div>
-      </m.div>
+      </div>
 
-      <div className="flex-grow rounded-md p-8 shadow-md dark:bg-primaryDark">
+      <div className="flex-grow rounded-md bg-white p-8 shadow-md  dark:bg-primaryDark">
         <JSONPretty className="overflow-y-auto" data={hardwareInfo} />
       </div>
     </div>

src/pages/Extensions/Logs.tsx

@@ -48,9 +48,8 @@ export const Logs = (): JSX.Element => {
   };
 
   return (
-    <div className="flex h-full p-4 ">
+    <div className="flex h-full p-4">
-      <table className="table-cell h-full w-full select-none rounded-md dark:bg-primaryDark">
+      <table className="table-cell h-full w-full select-none rounded-md bg-white dark:bg-primaryDark">
-        {/* \/ flex flex-col gap-2 */}
         <tbody
           className="
           block h-full flex-col overflow-y-auto py-4 px-2 font-mono text-xs dark:text-gray-400"
@@ -71,13 +70,24 @@ export const Logs = (): JSX.Element => {
             )}
           </AnimatePresence>
           {logs.map((log, index) => (
-            <tr key={index} className="group hover:bg-secondaryDark">
+            // <ContextMenu
+            //   key={index}
+            //   items={
+            //     <>
+            //       <ContextItem title="Test" icon={<FiGitBranch />} />
+            //     </>
+            //   }
+            // >
+            <tr
+              key={index}
+              className="group hover:bg-gray-200 dark:hover:bg-secondaryDark"
+            >
               <m.td
                 className="w-6 cursor-pointer"
                 whileHover={{ scale: 1.01 }}
                 whileTap={{ scale: 0.99 }}
               >
-                <div className="m-auto pl-2 dark:text-primaryDark dark:group-hover:text-gray-400">
+                <div className="m-auto pl-2 text-white group-hover:text-black dark:text-primaryDark dark:group-hover:text-gray-400">
                   <FiArrowRight />
                 </div>
               </m.td>
@@ -112,6 +122,7 @@ export const Logs = (): JSX.Element => {
               </td>
               <td className="truncate pl-1">{log.message}</td>
             </tr>
+            // </ContextMenu>
           ))}
         </tbody>
       </table>
@@ -128,7 +139,7 @@ const Wrapper = ({
 }): JSX.Element => (
   <td className={className}>
     <m.div
-      className="-my-0.5 flex max-w-min cursor-pointer truncate rounded-sm px-0.5 hover:bg-gray-700"
+      className="-my-0.5 flex max-w-min cursor-pointer truncate rounded-sm px-0.5 hover:bg-gray-400 dark:hover:bg-gray-700"
       whileHover={{ scale: 1.01 }}
       whileTap={{ scale: 0.99 }}
     >

src/pages/Map/MapContainer.tsx

@@ -40,7 +40,12 @@ export const MapContainer = (): JSX.Element => {
   );
 
   return (
-    <div className="relative flex h-full w-full">
+    <div
+      className="relative flex h-full w-full"
+      onContextMenu={(e): void => {
+        e.stopPropagation();
+      }}
+    >
       <div className="absolute right-0 z-10 m-4 space-y-2 rounded-md border border-gray-300 bg-white p-2 shadow-md dark:border-gray-600 dark:bg-primaryDark">
         <IconButton
           active={mapState.style === 'Satellite'}