Start consistancy fixing

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>