OpenSource/homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Updated tab styling

Browse Source
This commit is contained in:
shamoon 2023-09-14 00:41:03 -07:00
parent be8023a087
commit 044ec9f192
2 changed files with 12 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/components/tab.jsx
View File

@ -1,23 +1,22 @@
import { useContext } from "react"; import { useContext } from "react";
import classNames from "classnames"; import classNames from "classnames";
import { SettingsContext } from "utils/contexts/settings";
import { TabContext } from "utils/contexts/tab"; import { TabContext } from "utils/contexts/tab";
export default function Tab({ tab }) { export default function Tab({ tab }) {
const { settings } = useContext(SettingsContext);
const { activeTab, setActiveTab } = useContext(TabContext); const { activeTab, setActiveTab } = useContext(TabContext);
return ( return (
<li key={tab} role="presentation" <li key={tab} role="presentation"
className={classNames( 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", "text-theme-700 dark:text-theme-200 relative h-8 w-full rounded-md flex m-1",
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}`
)}>
<button id={`${tab}-tab`} type="button" role="tab" <button id={`${tab}-tab`} type="button" role="tab"
aria-controls={`#${tab}`} aria-selected={activeTab === tab ? "true" : "false"} 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}`; }} onClick={() => { setActiveTab(tab); window.location.hash = `#${tab}`; }}
>{tab}</button> >{tab}</button>
</li> </li>

8
src/pages/index.jsx
View File

@ -271,7 +271,10 @@ function Home({ initialSettings }) {
return <> return <>
{tabs.length > 0 && <div key="tabs" id="tabs" className="p-4 sm:p-8 sm:pt-4 sm:pb-0"> {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} />)} {tabs.map(tab => <Tab key={tab} tab={tab} />)}
</ul> </ul>
</div>} </div>}
@ -325,7 +328,8 @@ function Home({ initialSettings }) {
bookmarks, bookmarks,
settings.layout, settings.layout,
settings.fiveColumns, settings.fiveColumns,
settings.disableCollapse settings.disableCollapse,
settings.cardBlur
]); ]);
return ( return (