style: finish based global them

This commit is contained in:
ghost2023
2026-05-20 11:35:00 +03:00
parent 024871c127
commit b9ef5a2b46
9 changed files with 143 additions and 95 deletions

View File

@@ -123,7 +123,7 @@ const DashboardLayout = ({
) : null;
return (
<div className="flex min-h-screen bg-slate-50 dark:bg-slate-950">
<div className="flex min-h-screen">
<Sidebar
title={title}
items={sidebarItems}
@@ -132,10 +132,8 @@ const DashboardLayout = ({
headerExtra={themeToggleButton}
/>
<div className="flex flex-1 flex-col">
<header className="flex h-16 items-center justify-between border-b border-slate-200 bg-white px-6 dark:border-slate-800 dark:bg-slate-900">
<div className="text-base font-medium text-slate-700 dark:text-slate-200">
{title}
</div>
<header className="flex h-16 items-center justify-between border-b px-6 ">
<div className="text-base font-medium ">{title}</div>
<div className="flex items-center gap-2">
<button
@@ -219,9 +217,7 @@ const DashboardLayout = ({
</div>
</header>
<main className="flex-1 overflow-auto bg-background p-6 ">
{children}
</main>
<main className="flex-1 overflow-auto bg-background ">{children}</main>
</div>
</div>
);

View File

@@ -22,11 +22,11 @@ const Sidebar = ({
onNavigate,
headerExtra,
}: SidebarProps) => (
<aside className="flex w-64 flex-col gap-1 border-r border-slate-200 bg-[#33578D]/10 px-3 py-5 dark:border-slate-800 dark:bg-slate-900">
<aside className="flex w-64 flex-col gap-1 border-r border-sidebar-border bg-sidebar px-3 py-5 ">
{title ? (
<div className="flex items-center justify-between gap-2 px-3 pb-4">
<div className="flex items-center gap-2">
<div className="flex h-9 w-9 items-center justify-center rounded-xl bg-[#33578D] text-sm font-bold text-white">
<div className="flex h-9 w-9 items-center justify-center rounded-xl bg-sidebar-primary text-sm font-bold text-white">
{title.charAt(0)}
</div>
<div className="text-base font-semibold text-slate-800 dark:text-slate-100">
@@ -39,8 +39,7 @@ const Sidebar = ({
<nav className="flex flex-col gap-1">
{items.map((item) => {
const isActive =
activeHref?.toLowerCase() === item.href.toLowerCase();
const isActive = activeHref?.toLowerCase() === item.href.toLowerCase();
return (
<a
@@ -54,10 +53,10 @@ const Sidebar = ({
}}
aria-current={isActive ? "page" : undefined}
className={clsx(
"group flex items-center gap-3 rounded-xl px-3 py-2.5 text-sm font-medium transition",
"group flex items-center gap-3 rounded-md px-3 py-2.5 text-sm font-medium transition",
isActive
? "bg-[#33578D] text-white shadow-sm shadow-[#33578D]/20"
: "text-slate-700 hover:bg-[#33578D]/10 hover:text-[#33578D] dark:text-slate-300 dark:hover:bg-[#33578D]/20 dark:hover:text-white",
? "bg-sidebar-primary text-sidebar-primary-foreground shadow-sm "
: "text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
)}
>
{item.icon ? (