Start consistancy fixing

package.json

@@ -23,17 +23,17 @@
     "@emeraldpay/hashicon-react": "^0.5.2",
     "@meshtastic/eslint-config": "^1.0.6",
     "@meshtastic/meshtasticjs": "^0.6.48",
-    "@reduxjs/toolkit": "^1.7.2",
+    "@reduxjs/toolkit": "^1.8.0",
     "@tippyjs/react": "^4.2.6",
     "base64-js": "^1.5.1",
-    "framer-motion": "^6.2.7",
+    "framer-motion": "^6.2.8",
     "mapbox-gl": "^2.7.0",
     "prettier": "^2.5.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-draggable": "^4.4.4",
     "react-error-boundary": "^3.1.4",
-    "react-flow-renderer": "^10.0.0-next.39",
+    "react-flow-renderer": "^10.0.0-next.45",
     "react-hook-form": "^7.27.1",
     "react-icons": "^4.3.1",
     "react-json-pretty": "^2.2.0",
@@ -49,7 +49,7 @@
   },
   "devDependencies": {
     "@hookform/devtools": "^4.0.2",
-    "@types/mapbox-gl": "^2.6.1",
+    "@types/mapbox-gl": "^2.6.2",
     "@types/react": "^17.0.39",
     "@types/react-dom": "^17.0.11",
     "@types/w3c-web-serial": "^1.0.2",
@@ -57,15 +57,15 @@
     "@vitejs/plugin-react": "^1.2.0",
     "autoprefixer": "^10.4.2",
     "gzipper": "^7.0.0",
-    "postcss": "^8.4.6",
+    "postcss": "^8.4.7",
-    "rollup-plugin-visualizer": "^5.5.4",
+    "rollup-plugin-visualizer": "^5.6.0",
     "tailwindcss": "^3.0.23",
     "tar": "^6.1.11",
-    "typescript": "^4.5.5",
+    "typescript": "^4.6.2",
     "unimported": "^1.19.1",
-    "vite": "^2.8.4",
+    "vite": "^2.8.5",
     "vite-plugin-cdn-import": "^0.3.5",
     "vite-plugin-pwa": "^0.11.13",
-    "workbox-window": "^6.4.2"
+    "workbox-window": "^6.5.0"
   }
 }

src/App.tsx

@@ -19,7 +19,7 @@ export const App = (): JSX.Element => {
     <div className={`h-screen w-screen ${appState.darkMode ? 'dark' : ''}`}>
       <ContextMenu>
         <Connection />
-        <div className="flex h-full flex-col bg-gray-200 dark:bg-secondaryDark">
+        <div className="flex h-full flex-col">
           <div className="flex min-h-0 w-full flex-grow">
             {route.name === 'messages' && <Messages />}
             {route.name === 'nodes' && <Nodes />}

src/components/Connection.tsx

@@ -98,7 +98,7 @@ export const Connection = (): JSX.Element => {
           </div>
         </div>
         <div className="md:w-1/2">
-          <div className="h-96 overflow-y-auto rounded-md border border-gray-300 bg-gray-200 p-2 shadow-md dark:border-gray-600 dark:bg-primaryDark dark:text-gray-400">
+          <div className="h-96 overflow-y-auto rounded-md border border-gray-400 bg-gray-200 p-2 drop-shadow-md dark:border-gray-600 dark:bg-tertiaryDark dark:text-gray-400">
             {meshtasticState.logs.length === 0 && (
               <div className="flex h-full w-full">
                 <m.img

src/components/MapBox/MapboxProvider.tsx

@@ -4,6 +4,7 @@ import { useEffect, useRef } from 'react';
 import { ScaleControl } from 'mapbox-gl';
 
 import { MapboxContext } from '@components/MapBox/mapboxContext';
+import { MapStyles } from '@core/mapStyles';
 import {
   setBearing,
   setLatLng,
@@ -15,8 +16,6 @@ import { useAppDispatch } from '@hooks/useAppDispatch';
 import { useAppSelector } from '@hooks/useAppSelector';
 import { useCreateMapbox } from '@hooks/useCreateMapbox';
 
-import { MapStyles } from '../../pages/Map/styles';
-
 export type MapboxProviderProps = {
   children: React.ReactNode;
 };

src/components/Tab.tsx

@@ -24,7 +24,7 @@ export const Tab = ({
     <div
       className={`max-w-[10rem] md:flex-grow ${
         active
-          ? 'bg-gray-100 dark:bg-primaryDark'
+          ? 'bg-white dark:bg-primaryDark'
           : 'bg-gray-300 dark:bg-secondaryDark'
       }`}
     >
@@ -32,7 +32,7 @@ export const Tab = ({
         className={`group flex flex-grow cursor-pointer select-none py-2 hover:underline dark:text-white ${
           active
             ? 'z-10 rounded-t-lg bg-gray-300 shadow-inner dark:bg-secondaryDark'
-            : 'bg-gray-100 shadow-md dark:bg-primaryDark'
+            : 'bg-white drop-shadow-md dark:bg-primaryDark'
         } ${activeRight ? 'rounded-br-lg' : ''} ${
           activeLeft ? 'rounded-bl-lg' : ''
         }`}

src/components/Tabs.tsx

@@ -0,0 +1,35 @@
+import type React from 'react';
+
+import { Tab, TabProps } from './Tab';
+
+export interface TabsProps {
+  tabs: Omit<TabProps, 'activeLeft' | 'activeRight'>[];
+}
+
+export const Tabs = ({ tabs }: TabsProps): JSX.Element => {
+  return (
+    <div className="flex flex-grow bg-gray-300 dark:bg-secondaryDark">
+      <div
+        className={`h-full w-2 bg-white dark:bg-primaryDark ${
+          tabs[0].active ? 'rounded-br-lg' : ''
+        }`}
+      />
+      {tabs.map((tab, index) => (
+        <Tab
+          key={index}
+          link={tab.link}
+          title={tab.title}
+          icon={tab.icon}
+          active={tab.active}
+          activeLeft={tabs[index - 1]?.active}
+          activeRight={tabs[index + 1]?.active}
+        />
+      ))}
+      <div
+        className={`h-full flex-grow bg-white drop-shadow-md dark:bg-primaryDark ${
+          tabs[tabs.length - 1].active ? 'rounded-bl-lg' : ''
+        }`}
+      />
+    </div>
+  );
+};

src/components/connection/BLE.tsx

@@ -37,7 +37,7 @@ export const BLE = ({ connecting }: BLEProps): JSX.Element => {
 
   return (
     <form onSubmit={onSubmit} className="flex flex-grow flex-col">
-      <div className="flex flex-grow flex-col gap-2 overflow-y-auto rounded-md border border-gray-300 bg-gray-200 p-2 dark:border-gray-600 dark:bg-secondaryDark dark:text-gray-400">
+      <div className="flex flex-grow flex-col gap-2 overflow-y-auto rounded-md border border-gray-400 bg-gray-200 p-2 dark:border-gray-600 dark:bg-tertiaryDark dark:text-gray-400">
         {bleDevices.length > 0 ? (
           bleDevices.map((device, index) => (
             <div

src/components/connection/Serial.tsx

@@ -39,7 +39,7 @@ export const Serial = ({ connecting }: SerialProps): JSX.Element => {
 
   return (
     <form onSubmit={onSubmit} className="flex flex-grow flex-col">
-      <div className="flex flex-grow flex-col gap-2 overflow-y-auto rounded-md border border-gray-300 bg-gray-200 p-2 dark:border-gray-600 dark:bg-secondaryDark dark:text-gray-400">
+      <div className="flex flex-grow flex-col gap-2 overflow-y-auto rounded-md border border-gray-400 bg-gray-200 p-2 dark:border-gray-600 dark:bg-tertiaryDark dark:text-gray-400">
         {serialDevices.length > 0 ? (
           serialDevices.map((device, index) => (
             <div

src/components/generic/Card.tsx

@@ -23,13 +23,13 @@ export const Card = ({
   return (
     <Draggable handle=".handle" disabled={!draggable}>
       <div
-        className={`flex h-full w-full flex-col rounded-md shadow-md ${
+        className={`flex h-full w-full flex-col rounded-md drop-shadow-md ${
-          border ? 'border border-gray-300 dark:border-gray-600' : ''
+          border ? 'border border-gray-400 dark:border-gray-600' : ''
         } ${className ?? ''}`}
       >
         {(title || actions) && (
           <div
-            className={`w-full select-none justify-between rounded-t-md border-b border-gray-300 bg-gray-200 p-2 px-2 text-lg font-medium dark:border-gray-600 dark:bg-primaryDark dark:text-white ${
+            className={`w-full select-none justify-between rounded-t-md border-b border-gray-400 bg-gray-200 p-2 px-2 text-lg font-medium dark:border-gray-600 dark:bg-tertiaryDark dark:text-white ${
               draggable ? 'cursor-move' : ''
             }`}
           >
@@ -41,9 +41,9 @@ export const Card = ({
         )}
 
         <m.div
-          className={`flex flex-grow select-none flex-col gap-4 bg-white p-4 dark:bg-secondaryDark  ${
+          className={`flex flex-grow select-none flex-col gap-4 bg-white p-4 dark:bg-primaryDark  ${
             title || actions ? 'rounded-b-md' : 'rounded-md'
-          } ${draggable ? '' : 'bg-white dark:bg-primaryDark'}`}
+          }`}
           initial={{ opacity: 0 }}
           animate={{ opacity: 1 }}
           exit={{ opacity: 0 }}

src/components/generic/ContextMenu.tsx

@@ -41,7 +41,7 @@ export const ContextMenu = ({
       {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"
+          className="fixed z-50 w-60 gap-2 divide-y divide-gray-300 rounded-md border border-gray-400 font-medium drop-shadow-md backdrop-blur-xl dark:divide-gray-600 dark:border-gray-600  dark:text-gray-400"
         >
           {items}
           <ContextItem title="Menu item" icon={<FiActivity />} />

src/components/generic/Modal.tsx

@@ -36,7 +36,7 @@ export const Modal = ({
             animate={{ opacity: 1 }}
             exit={{ opacity: 0 }}
             transition={{ duration: 0.1 }}
-            className="fixed h-full w-full backdrop-blur-md backdrop-filter"
+            className="fixed h-full w-full backdrop-blur-md backdrop-brightness-75 backdrop-filter"
             onClick={(): void => {
               bgDismiss && onClose();
             }}

src/components/generic/Sidebar/CollapsibleSection.tsx

@@ -21,8 +21,10 @@ export const CollapsibleSection = ({
     <m.div>
       <m.div
         layout
-        className={`w-full cursor-pointer select-none overflow-hidden border-l-4 border-b border-gray-300 p-2 text-sm font-medium dark:border-primaryDark dark:bg-secondaryDark dark:text-gray-400 ${
+        className={`w-full cursor-pointer select-none overflow-hidden border-l-4 border-b bg-gray-200 p-2 text-sm font-medium dark:border-primaryDark dark:bg-tertiaryDark dark:text-gray-400 ${
-          open ? 'dark:border-l-primary' : 'dark:border-secondaryDark'
+          open
+            ? 'border-l-primary dark:border-l-primary'
+            : 'border-gray-400 dark:border-secondaryDark'
         }`}
       >
         <m.div

src/components/generic/Sidebar/ExternalSection.tsx

@@ -27,8 +27,10 @@ export const ExternalSection = ({
     >
       <m.div
         layout
-        className={`w-full cursor-pointer select-none overflow-hidden border-l-4 dark:bg-secondaryDark dark:text-gray-400 ${
+        className={`w-full cursor-pointer select-none overflow-hidden border-l-4 bg-gray-200 dark:bg-tertiaryDark dark:text-gray-400 ${
-          active ? 'border-primary' : 'dark:border-secondaryDark'
+          active
+            ? 'border-l-primary dark:border-l-primary'
+            : 'border-gray-400 dark:border-secondaryDark'
         }`}
       >
         <m.div
@@ -36,7 +38,7 @@ export const ExternalSection = ({
           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 border-b border-gray-400 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/generic/Sidebar/SidebarOverlay.tsx

@@ -24,7 +24,7 @@ export const SidebarOverlay = ({
     <AnimatePresence>
       {open && (
         <m.div
-          className="absolute z-30 flex h-full w-full flex-col bg-gray-100 dark:bg-primaryDark"
+          className="absolute z-30 flex h-full w-full flex-col bg-white dark:bg-primaryDark"
           animate={direction === 'x' ? { translateX: 0 } : { translateY: 0 }}
           initial={
             direction === 'x' ? { translateX: '-100%' } : { translateY: '100%' }
@@ -35,15 +35,20 @@ export const SidebarOverlay = ({
           transition={{ type: 'just' }}
         >
           <AnimateSharedLayout>
-            <div className="flex gap-2 border-b border-gray-300 p-2 dark:border-gray-600">
+            {/* <div className="flex gap-2 border-b border-gray-400 p-2 dark:border-gray-600"> */}
-              <IconButton
+            <div className="bg-white px-1 pt-1 drop-shadow-md dark:bg-primaryDark">
-                onClick={(): void => {
+              <div className="flex h-10 gap-1">
-                  close();
+                <div className="my-auto">
-                }}
+                  <IconButton
-                icon={<FiArrowLeft />}
+                    onClick={(): void => {
-              />
+                      close();
-              <div className="my-auto text-lg font-medium dark:text-white">
+                    }}
-                {title}
+                    icon={<FiArrowLeft />}
+                  />
+                </div>
+                <div className="my-auto text-lg font-medium dark:text-white">
+                  {title}
+                </div>
               </div>
             </div>
             <div className="flex-grow overflow-y-auto">{children}</div>

src/components/generic/button/Button.tsx

@@ -61,7 +61,7 @@ export const Button = ({
       ${
         disabled
           ? 'cursor-not-allowed bg-white dark:bg-primaryDark'
-          : 'cursor-pointer hover:bg-gray-100 hover:shadow-md dark:hover:bg-secondaryDark'
+          : 'cursor-pointer hover:bg-white hover:drop-shadow-md dark:hover:bg-secondaryDark'
       } ${border ? 'border-gray-400 dark:border-gray-200' : ''} ${
         className ?? ''
       }`}

src/components/layout/Sidebar/index.tsx

@@ -22,7 +22,7 @@ export const Sidebar = ({
         appState.mobileNavOpen ? 'flex' : 'hidden'
       }`}
     >
-      <div className="flex h-full w-full flex-col shadow-xl dark:bg-primaryDark">
+      <div className="flex h-full w-full flex-col drop-shadow-xl dark:bg-primaryDark">
         <div className="relative flex-grow gap-1">
           <div className="absolute h-full w-full">{children}</div>
           <Settings open={settingsOpen} setOpen={setSettingsOpen} />

src/components/layout/index.tsx

@@ -2,7 +2,7 @@ import type React from 'react';
 import { useState } from 'react';
 
 import { ErrorBoundary } from 'react-error-boundary';
-import { FiMessageCircle, FiSettings, FiTag } from 'react-icons/fi';
+import { FiMessageCircle, FiSettings } from 'react-icons/fi';
 import { RiMindMap, RiRoadMapLine } from 'react-icons/ri';
 import { VscExtensions } from 'react-icons/vsc';
 
@@ -11,7 +11,8 @@ import { IconButton } from '@components/generic/button/IconButton';
 import { Sidebar } from '@components/layout/Sidebar';
 
 import { ErrorFallback } from '../ErrorFallback';
-import { Tab } from '../Tab';
+import type { TabProps } from '../Tab';
+import { Tabs } from '../Tabs';
 
 export interface LayoutProps {
   title: string;
@@ -30,7 +31,7 @@ export const Layout = ({
 
   const route = useRoute();
 
-  const tabs = [
+  const tabs: Omit<TabProps, 'activeLeft' | 'activeRight'>[] = [
     {
       title: 'Messages',
       icon: <FiMessageCircle />,
@@ -55,22 +56,20 @@ export const Layout = ({
       link: routes.extensions().link,
       active: route.name === 'extensions',
     },
-    {
-      title: 'Temp',
-      icon: <FiTag />,
-      link: routes.extensions().link,
-      active: route.name === 'map',
-    },
   ];
 
   return (
-    <div className="relative flex w-full bg-gray-100 dark:bg-secondaryDark md:overflow-hidden md:shadow-xl">
+    <div className="relative flex w-full bg-white dark:bg-secondaryDark ">
       <div className="flex flex-grow">
         <Sidebar settingsOpen={settingsOpen} setSettingsOpen={setSettingsOpen}>
-          <div className="flex gap-2 border-b border-gray-300 p-2 dark:border-gray-600">
+          <div className="bg-white px-1 pt-1 drop-shadow-md dark:bg-primaryDark">
-            <IconButton icon={icon} />
+            <div className="flex h-10 gap-1">
-            <div className="my-auto text-lg font-medium dark:text-white">
+              <div className="my-auto">
-              {title}
+                <IconButton icon={icon} />
+              </div>
+              <div className="my-auto text-lg font-medium dark:text-white">
+                {title}
+              </div>
             </div>
           </div>
           <div className="flex flex-col gap-2">{sidebarContents}</div>
@@ -78,10 +77,10 @@ export const Layout = ({
       </div>
       <ErrorBoundary FallbackComponent={ErrorFallback}>
         <div className="flex h-full w-full flex-col bg-gray-300 dark:bg-secondaryDark">
-          <div className="flex w-full bg-gray-100 pt-1 dark:bg-primaryDark">
+          <div className="flex w-full bg-white pt-1 dark:bg-primaryDark">
-            <div className="h-8">
+            <div className="z-10 -mr-2 h-8">
               <IconButton
-                className="mx-1 rounded-b-none p-3"
+                className="m-1"
                 icon={<FiSettings />}
                 onClick={(): void => {
                   setSettingsOpen(!settingsOpen);
@@ -89,18 +88,7 @@ export const Layout = ({
                 active={settingsOpen}
               />
             </div>
-            {tabs.map((tab, index) => (
+            <Tabs tabs={tabs} />
-              <Tab
-                key={index}
-                link={tab.link}
-                title={tab.title}
-                icon={tab.icon}
-                active={tab.active}
-                activeLeft={tabs[index - 1]?.active}
-                activeRight={tabs[index + 1]?.active}
-              />
-            ))}
-            <div className="-z-10 flex-grow shadow-md" />
           </div>
           <div className="flex flex-grow">{children}</div>
         </div>

src/components/menu/BottomNav.tsx

@@ -41,7 +41,7 @@ export const BottomNav = (): JSX.Element => {
   ).find((channel) => channel.role === Protobuf.Channel_Role.PRIMARY)?.settings;
 
   return (
-    <div className="z-20 flex justify-between divide-x divide-gray-300 border-t border-gray-300 bg-white dark:divide-gray-600 dark:border-gray-600 dark:bg-secondaryDark">
+    <div className="z-20 flex justify-between divide-x divide-gray-400 border-t border-gray-400 bg-white dark:divide-gray-600 dark:border-gray-600 dark:bg-secondaryDark">
       <BottomNavItem tooltip="Meshtastic WebUI">
         <img
           title="Logo"

src/components/menu/BottomNavItem.tsx

@@ -21,7 +21,7 @@ export const BottomNavItem = ({
     <Tooltip disabled={!tooltip} content={tooltip}>
       <div
         onClick={onClick}
-        className={`group flex h-full cursor-pointer select-none p-1 hover:bg-gray-200 dark:text-white dark:hover:bg-primaryDark ${className}`}
+        className={`group flex h-full cursor-pointer select-none p-1 hover:bg-gray-300 dark:text-white dark:hover:bg-primaryDark ${className}`}
       >
         <m.div className="flex w-full gap-1" whileTap={{ scale: 0.99 }}>
           {children}

src/core/mapStyles.ts

@@ -28,7 +28,7 @@ export const MapStyles: MapStyleType = {
 
   Light: {
     title: 'Light',
-    data: 'mapbox://styles/mapbox/light-v10?optimize=true',
+    data: 'mapbox://styles/sachaw/cl03ij03g001414l20w0w0ivj?optimize=true',
   } as MapStyle,
   Dark: {
     title: 'Dark',

src/pages/Extensions/FileBrowser.tsx

@@ -71,7 +71,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-300 px-4 font-medium dark:border-gray-600 dark:text-white"
+              className="flex h-10 w-full border-b border-gray-400 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,10 +1,11 @@
 import type React from 'react';
 
-import { FiClipboard, FiRefreshCw } from 'react-icons/fi';
+import { FiRefreshCw } from 'react-icons/fi';
 import JSONPretty from 'react-json-pretty';
 
 import { IconButton } from '@app/components/generic/button/IconButton';
 import { Card } from '@app/components/generic/Card';
+import { CopyButton } from '@app/components/menu/buttons/CopyButton';
 import { Hashicon } from '@emeraldpay/hashicon-react';
 import { useAppSelector } from '@hooks/useAppSelector';
 
@@ -40,7 +41,7 @@ export const Info = (): JSX.Element => {
       <Card
         title="Debug Information"
         className="flex-grow"
-        actions={<IconButton icon={<FiClipboard />} />}
+        actions={<CopyButton data={JSON.stringify(hardwareInfo)} />}
       >
         <JSONPretty className="overflow-y-auto" data={hardwareInfo} />
       </Card>

src/pages/Extensions/Logs.tsx

@@ -87,21 +87,13 @@ export const Logs = (): JSX.Element => {
               )}
 
               {meshtasticState.logs.map((log, index) => (
-                // <ContextMenu
-                //   key={index}
-                //   items={
-                //     <>
-                //       <ContextItem title="Test" icon={<FiGitBranch />} />
-                //     </>
-                //   }
-                // >
                 <m.tr
                   key={index}
                   initial={{ opacity: 0 }}
                   animate={{ opacity: 1 }}
                   exit={{ opacity: 0 }}
                   transition={{ duration: 0.3 }}
-                  className="group hover:bg-gray-200 dark:hover:bg-secondaryDark"
+                  className="group hover:bg-gray-300 dark:hover:bg-secondaryDark"
                 >
                   <m.td
                     className="w-6 cursor-pointer"

src/pages/Map/MapContainer.tsx

@@ -5,6 +5,8 @@ import { FaDirections, FaGlobeAfrica, FaMountain } from 'react-icons/fa';
 import { MdFullscreen, MdRadar, MdWbShade } from 'react-icons/md';
 
 import { IconButton } from '@components/generic/button/IconButton';
+import type { MapStyle } from '@core/mapStyles';
+import { MapStyles } from '@core/mapStyles';
 import {
   setExaggeration,
   setHillShade,
@@ -13,8 +15,6 @@ import {
 import { useAppDispatch } from '@hooks/useAppDispatch';
 import { useAppSelector } from '@hooks/useAppSelector';
 import { useMapbox } from '@hooks/useMapbox';
-import type { MapStyle } from '@pages/Map/styles';
-import { MapStyles } from '@pages/Map/styles';
 
 export const MapContainer = (): JSX.Element => {
   const dispatch = useAppDispatch();
@@ -46,7 +46,7 @@ export const MapContainer = (): JSX.Element => {
         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">
+      <div className="absolute right-0 z-10 m-4 space-y-2 rounded-md border border-gray-400 bg-white p-2 shadow-md dark:border-gray-600 dark:bg-primaryDark">
         <IconButton
           active={mapState.style === 'Satellite'}
           onClick={(): void => {
@@ -56,7 +56,7 @@ export const MapContainer = (): JSX.Element => {
         />
 
         <div
-          className={`-m-1 space-y-2 rounded-md border-gray-300 p-1 dark:border-gray-600 ${
+          className={`-m-1 space-y-2 rounded-md border-gray-400 p-1 dark:border-gray-600 ${
             mapState.style === 'Outdoors' ? 'border' : ''
           }`}
         >

src/pages/Messages/ChannelChat.tsx

@@ -50,7 +50,7 @@ export const ChannelChat = ({
             : `CH: ${channel.index}`
         }
       >
-        <div className="flex h-8 w-8 rounded-full bg-gray-200 dark:bg-primaryDark dark:text-white">
+        <div className="flex h-8 w-8 rounded-full bg-gray-300 dark:bg-primaryDark dark:text-white">
           <div className="m-auto">
             {channel.role === Protobuf.Channel_Role.PRIMARY ? (
               <MdPublic />

src/pages/Messages/Message.tsx

@@ -22,7 +22,7 @@ export const Message = ({
   sender,
 }: MessageProps): JSX.Element => {
   return (
-    <div className="group mb-3 hover:bg-gray-200 dark:hover:bg-primaryDark">
+    <div className="group mb-3 hover:bg-gray-200 dark:hover:bg-tertiaryDark">
       {lastMsgSameUser ? (
         <div
           className={`mx-6 -mt-3 flex justify-between ${

src/pages/Messages/MessageBar.tsx

@@ -55,7 +55,7 @@ export const MessageBar = ({ chatIndex }: MessageBarProps): JSX.Element => {
     }
   };
   return (
-    <div className="mx-auto flex w-full space-x-2 bg-gray-50 p-3 text-gray-500 dark:bg-transparent dark:text-gray-400">
+    <div className="mx-auto flex w-full space-x-2 bg-gray-50 bg-transparent p-3 text-gray-500 dark:text-gray-400">
       <div className="mx-auto flex w-full max-w-4xl">
         <form
           className="flex w-full space-x-2"

src/pages/Messages/index.tsx

@@ -49,7 +49,7 @@ export const Messages = (): JSX.Element => {
               />
             ))}
           {nodes.length !== 0 && channels.length !== 0 && (
-            <div className="mx-2 rounded-md border-2 border-gray-300 dark:border-gray-600" />
+            <div className="mx-2 border-b border-gray-400 dark:border-gray-600" />
           )}
           {nodes
             .filter((node) => node.number !== myNodeNum)
@@ -65,7 +65,7 @@ export const Messages = (): JSX.Element => {
       }
     >
       <div className="flex w-full flex-col">
-        <div className="flex w-full justify-between border-b border-gray-300 px-2 dark:border-gray-600 dark:text-gray-300">
+        <div className="flex w-full justify-between border-b border-gray-400 px-2 dark:border-gray-600 dark:text-gray-300">
           <div className="my-auto flex gap-2 py-2 text-sm">
             <IconButton nested icon={<FiHash className="h-4 w-4" />} />
             <div className="my-auto">
@@ -90,7 +90,7 @@ export const Messages = (): JSX.Element => {
         </div>
         <div
           ref={chatRef}
-          className="flex flex-grow flex-col space-y-2 overflow-y-auto border-b border-gray-300 bg-white pb-6 dark:border-gray-600 dark:bg-secondaryDark"
+          className="flex flex-grow flex-col space-y-2 overflow-y-auto border-b border-gray-400 bg-gray-300 pb-6 dark:border-gray-600 dark:bg-secondaryDark"
         >
           <div className="mt-auto">
             {chats[selectedChatIndex]?.messages.map((message, index) => (

src/pages/Nodes/NodeCard.tsx

@@ -145,7 +145,7 @@ export const NodeCard = ({
         </CollapsibleSection>
         <CollapsibleSection title="Location" icon={<FiMapPin />}>
           <>
-            <div className="flex h-10 select-none justify-between rounded-md border border-gray-300 bg-transparent bg-gray-200 px-1 text-gray-500 dark:border-gray-600 dark:bg-secondaryDark dark:text-gray-400 ">
+            <div className="flex h-10 select-none justify-between rounded-md border border-gray-400 bg-transparent bg-gray-300 px-1 text-gray-500 dark:border-gray-600 dark:bg-secondaryDark dark:text-gray-400 ">
               {node.currentPosition ? (
                 <>
                   <div className="my-auto px-1">

tailwind.config.cjs

@@ -13,7 +13,7 @@ module.exports = {
         primary: '#67ea94',
         primaryDark: '#25262C',
         secondaryDark: '#1C1D23',
-        accentDark: '25262C',
+        tertiaryDark: '#323438',
       },
       boxShadow: {
         border: '0 0 0 1px #67ea94',