Start consistancy fixing

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 ${
-          border ? 'border border-gray-300 dark:border-gray-600' : ''
+        className={`flex h-full w-full flex-col rounded-md drop-shadow-md ${
+          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 ${
-          open ? 'dark:border-l-primary' : 'dark:border-secondaryDark'
+        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
+            ? '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 ${
-          active ? 'border-primary' : 'dark:border-secondaryDark'
+        className={`w-full cursor-pointer select-none overflow-hidden border-l-4 bg-gray-200 dark:bg-tertiaryDark dark:text-gray-400 ${
+          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">
-              <IconButton
-                onClick={(): void => {
-                  close();
-                }}
-                icon={<FiArrowLeft />}
-              />
-              <div className="my-auto text-lg font-medium dark:text-white">
-                {title}
+            {/* <div className="flex gap-2 border-b border-gray-400 p-2 dark:border-gray-600"> */}
+            <div className="bg-white px-1 pt-1 drop-shadow-md dark:bg-primaryDark">
+              <div className="flex h-10 gap-1">
+                <div className="my-auto">
+                  <IconButton
+                    onClick={(): void => {
+                      close();
+                    }}
+                    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">
-            <IconButton icon={icon} />
-            <div className="my-auto text-lg font-medium dark:text-white">
-              {title}
+          <div className="bg-white px-1 pt-1 drop-shadow-md dark:bg-primaryDark">
+            <div className="flex h-10 gap-1">
+              <div className="my-auto">
+                <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="h-8">
+          <div className="flex w-full bg-white pt-1 dark:bg-primaryDark">
+            <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) => (
-              <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" />
+            <Tabs tabs={tabs} />
           </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}