tabs dark mode implemented
This commit is contained in:
parent
a14a7dc9a2
commit
df712f0abb
3 changed files with 8 additions and 8 deletions
|
|
@ -105,7 +105,7 @@ export default function App() {
|
|||
<ExtraSidebar />
|
||||
|
||||
{/* Main area */}
|
||||
<main className="min-w-0 flex-1 border-t border-gray-200 flex">
|
||||
<main className="min-w-0 flex-1 border-t border-gray-200 dark:border-slate-700 flex">
|
||||
{/* Primary column */}
|
||||
<div className="w-full h-full">
|
||||
<TabsManagerComponent></TabsManagerComponent>
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ export default function TabComponent({ selected, flow, onClick }) {
|
|||
{flow ? (
|
||||
!selected ? (
|
||||
<div
|
||||
className="flex justify-between select-none truncate w-44 items-center px-4 my-1.5 border-x border-t border-t-transparent border-gray-300 -ml-px"
|
||||
className="dark:text-white flex justify-between select-none truncate w-44 items-center px-4 my-1.5 border-x border-x-gray-300 dark:border-x-slate-600 -ml-px"
|
||||
onClick={onClick}
|
||||
>
|
||||
{flow.name}
|
||||
|
|
@ -25,11 +25,11 @@ export default function TabComponent({ selected, flow, onClick }) {
|
|||
removeFlow(flow.id);
|
||||
}}
|
||||
>
|
||||
<XMarkIcon className="h-4 hover:bg-white rounded-full" />
|
||||
<XMarkIcon className="h-4 hover:bg-white dark:hover:bg-slate-600 rounded-full" />
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="bg-white flex select-none justify-between w-44 items-center border border-b-0 border-gray-300 px-4 py-1.5 rounded-t-xl -ml-px">
|
||||
<div className="bg-white dark:text-white dark:bg-slate-700 flex select-none justify-between w-44 items-center border border-b-0 border-gray-300 dark:border-slate-600 px-4 py-1.5 rounded-t-xl -ml-px">
|
||||
{isRename ? (
|
||||
<input
|
||||
autoFocus
|
||||
|
|
@ -70,7 +70,7 @@ export default function TabComponent({ selected, flow, onClick }) {
|
|||
}}
|
||||
>
|
||||
{flows.length > 1 && (
|
||||
<XMarkIcon className="h-4 hover:bg-gray-100 rounded-full" />
|
||||
<XMarkIcon className="h-4 hover:bg-gray-100 dark:hover:bg-slate-600 rounded-full" />
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
|
|
@ -78,10 +78,10 @@ export default function TabComponent({ selected, flow, onClick }) {
|
|||
) : (
|
||||
<div className="h-full py-1.5 flex justify-center items-center">
|
||||
<button
|
||||
className="px-3 flex items-center h-full pb-0.5 pt-0.5 border-gray-300 -ml-px border-t border-t-transparent"
|
||||
className="px-3 flex items-center h-full pb-0.5 pt-0.5 border-x-gray-300 dark:border-x-slate-600 dark:text-white -ml-px"
|
||||
onClick={onClick}
|
||||
>
|
||||
<PlusIcon className="h-5 rounded-full hover:bg-white" />
|
||||
<PlusIcon className="h-5 rounded-full hover:bg-white dark:hover:bg-slate-600" />
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ export default function TabsManagerComponent() {
|
|||
|
||||
return (
|
||||
<div className="h-full w-full flex flex-col">
|
||||
<div className="w-full flex pr-2 flex-row text-center items-center bg-gray-100 px-2">
|
||||
<div className="w-full flex pr-2 flex-row text-center items-center bg-gray-100 dark:bg-slate-800 px-2">
|
||||
{flows.map((flow, index) => {
|
||||
return (
|
||||
<TabComponent
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue