Updated tab styling

src/components/tab.jsx

@@ -1,23 +1,22 @@
 import { useContext } from "react";
 import classNames from "classnames";
 
-import { SettingsContext } from "utils/contexts/settings";
 import { TabContext } from "utils/contexts/tab";
 
 export default function Tab({ tab }) {
-  const { settings } = useContext(SettingsContext);
   const { activeTab, setActiveTab } = useContext(TabContext);
 
   return (
     <li key={tab} role="presentation"
       className={classNames(
-        "text-theme-700 dark:text-theme-200 relative h-12 w-full rounded-md flex m-1 shadow-md shadow-theme-900/10 dark:shadow-theme-900/20",
-        activeTab === tab ? "bg-theme-700/20 dark:bg-theme-700/20" : "bg-theme-500/20 dark:bg-theme-500/20",
-        settings.cardBlur !== undefined && `backdrop-blur${settings.cardBlur.length ? '-': "" }${settings.cardBlur}`
-      )}>
+        "text-theme-700 dark:text-theme-200 relative h-8 w-full rounded-md flex m-1",
+        )}>
       <button id={`${tab}-tab`} type="button" role="tab"
               aria-controls={`#${tab}`} aria-selected={activeTab === tab ? "true" : "false"}
-              className="h-full w-full rounded-md hover:bg-white/20 dark:hover:bg-white/20 dark:hover:text-theme-300"
+              className={classNames(
+                "h-full w-full rounded-md",
+                activeTab === tab ? "bg-theme-300/20 dark:bg-white/10" : "hover:bg-theme-100/20 dark:hover:bg-white/5",
+              )}
               onClick={() => { setActiveTab(tab); window.location.hash = `#${tab}`; }}
       >{tab}</button>
     </li>

src/pages/index.jsx

@@ -271,7 +271,10 @@ function Home({ initialSettings }) {
 
     return <>
       {tabs.length > 0 && <div key="tabs" id="tabs" className="p-4 sm:p-8 sm:pt-4 sm:pb-0">
-        <ul className="sm:flex" id="myTab" data-tabs-toggle="#myTabContent" role="tablist">
+        <ul className={classNames(
+          "sm:flex rounded-md bg-theme-100/20 dark:bg-white/5",
+          settings.cardBlur !== undefined && `backdrop-blur${settings.cardBlur.length ? '-': "" }${settings.cardBlur}`
+         )} id="myTab" data-tabs-toggle="#myTabContent" role="tablist" >
           {tabs.map(tab => <Tab key={tab} tab={tab} />)}
         </ul>
       </div>}
@@ -325,7 +328,8 @@ function Home({ initialSettings }) {
     bookmarks,
     settings.layout,
     settings.fiveColumns,
-    settings.disableCollapse
+    settings.disableCollapse,
+    settings.cardBlur
   ]);
 
   return (