sidebar dark mode implemented
This commit is contained in:
Lucas Oliveira
parent
df712f0abb
commit
7742859c12
5 changed files with 25 additions and 25 deletions
|
|
@ -20,11 +20,11 @@ export default function ExtraSidebar() {
|
|||
<aside
|
||||
className={` ${
|
||||
isStackedOpen ? "w-60" : "w-0 "
|
||||
} flex-shrink-0 flex overflow-hidden flex-col border-r transition-all duration-500`}
|
||||
} flex-shrink-0 flex overflow-hidden flex-col border-r dark:border-r-slate-700 transition-all duration-500`}
|
||||
>
|
||||
<div className="w-60 overflow-y-auto scrollbar-hide h-full flex flex-col items-start">
|
||||
<div className="w-60 dark:bg-slate-800 border dark:border-slate-700 overflow-y-auto scrollbar-hide h-full flex flex-col items-start">
|
||||
<div className="flex pt-4 px-4 justify-between align-middle w-full">
|
||||
<span className="text-gray-900 text-lg ml-2 font-semibold">
|
||||
<span className="text-gray-900 dark:text-white text-lg ml-2 font-semibold">
|
||||
{extraNavigation.title}
|
||||
</span>
|
||||
<button
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ export default function Sidebar() {
|
|||
<div className="w-20 h-full">
|
||||
<nav
|
||||
aria-label="Sidebar"
|
||||
className="h-full overflow-y-auto bg-gray-800"
|
||||
className="h-full overflow-y-auto bg-slate-800 dark:bg-slate-900"
|
||||
>
|
||||
<div className="flex flex-col h-full justify-between">
|
||||
<div className="relative flex w-20 flex-col space-y-3 p-3">
|
||||
|
|
|
|||
|
|
@ -88,9 +88,9 @@ export default function Chat({flow, reactFlowInstance }) {
|
|||
leaveTo="translate-y-96"
|
||||
>
|
||||
<div className="w-[400px] absolute bottom-0 right-6">
|
||||
<div className="border h-full rounded-xl rounded-b-none bg-white shadow">
|
||||
<div className="flex justify-between items-center px-5 py-3 border-b">
|
||||
<div className="flex gap-3 text-xl font-medium items-center">
|
||||
<div className="border dark:border-slate-700 h-full rounded-xl rounded-b-none bg-white dark:bg-slate-800 shadow">
|
||||
<div className="flex justify-between items-center px-5 py-3 border-b dark:border-b-slate-700">
|
||||
<div className="flex gap-3 text-xl dark:text-white font-medium items-center">
|
||||
<Bars3CenterLeftIcon className="h-8 w-8 mt-1" style={{color: nodeColors['chat']}} />
|
||||
Chat
|
||||
</div>
|
||||
|
|
@ -99,21 +99,21 @@ export default function Chat({flow, reactFlowInstance }) {
|
|||
setOpen(false);
|
||||
}}
|
||||
>
|
||||
<XMarkIcon className="h-6 w-6 text-gray-600" />
|
||||
<XMarkIcon className="h-6 w-6 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300" />
|
||||
</button>
|
||||
</div>
|
||||
<div className="w-full h-[400px] flex gap-3 mb-auto overflow-y-auto scrollbar-hide flex-col bg-gray-50 p-3 py-5">
|
||||
<div className="w-full h-[400px] flex gap-3 mb-auto overflow-y-auto scrollbar-hide flex-col bg-gray-50 dark:bg-slate-900 p-3 py-5">
|
||||
{chatHistory.map((c, i) => (
|
||||
<div key={i}>
|
||||
{c.isSend ? (
|
||||
{!c.isSend ? (
|
||||
<div className="w-full text-end">
|
||||
<div className="text-start inline-block bg-gray-200 rounded-xl p-3 overflow-hidden w-fit max-w-[280px] px-5 text-sm font-normal rounded-tr-none">
|
||||
<div style={{backgroundColor: nodeColors['chat']}} className="text-start inline-block text-white rounded-xl p-3 overflow-hidden w-fit max-w-[280px] px-5 text-sm font-normal rounded-tr-none">
|
||||
{c.message}
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="w-full text-start">
|
||||
<div style={{backgroundColor: nodeColors['chat']}} className="text-start inline-block rounded-xl p-3 overflow-hidden w-fit max-w-[280px] px-5 text-sm text-white font-normal rounded-tl-none">
|
||||
<div className="text-start inline-block rounded-xl p-3 overflow-hidden w-fit max-w-[280px] px-5 text-sm text-black dark:text-white dark:bg-slate-700 bg-gray-200 font-normal rounded-tl-none">
|
||||
{c.message}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -122,7 +122,7 @@ export default function Chat({flow, reactFlowInstance }) {
|
|||
))}
|
||||
<div ref={ref}></div>
|
||||
</div>
|
||||
<div className="w-full bg-white border-t flex items-center justify-between p-3">
|
||||
<div className="w-full bg-white dark:bg-slate-800 border-t dark:border-t-slate-600 flex items-center justify-between p-3">
|
||||
<div className="relative w-full mt-1 rounded-md shadow-sm">
|
||||
<input
|
||||
onKeyDown={(event)=>{
|
||||
|
|
@ -135,7 +135,7 @@ export default function Chat({flow, reactFlowInstance }) {
|
|||
onChange={(e) => {
|
||||
setChatValue(e.target.value);
|
||||
}}
|
||||
className="form-input block w-full rounded-md border-gray-300 pr-10 sm:text-sm"
|
||||
className="form-input block w-full rounded-md border-gray-300 dark:border-slate-600 dark:bg-slate-700 dark:text-white pr-10 sm:text-sm"
|
||||
placeholder="Send a message..."
|
||||
/>
|
||||
<div className="absolute inset-y-0 right-0 flex items-center pr-3">
|
||||
|
|
@ -143,7 +143,7 @@ export default function Chat({flow, reactFlowInstance }) {
|
|||
onClick={() => sendMessage()}
|
||||
>
|
||||
<PaperAirplaneIcon
|
||||
className="h-5 w-5 text-gray-400 hover:text-gray-600"
|
||||
className="h-5 w-5 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</button>
|
||||
|
|
@ -164,7 +164,7 @@ export default function Chat({flow, reactFlowInstance }) {
|
|||
leaveTo="translate-y-96"
|
||||
>
|
||||
<div className="absolute bottom-0 right-6">
|
||||
<div className="border flex justify-center align-center py-2 px-4 rounded-xl rounded-b-none bg-white shadow">
|
||||
<div className="border flex justify-center align-center py-2 px-4 rounded-xl rounded-b-none bg-white dark:bg-slate-800 dark:border-slate-600 dark:text-white shadow">
|
||||
<button
|
||||
onClick={() => {
|
||||
setOpen(true);
|
||||
|
|
|
|||
|
|
@ -19,10 +19,10 @@ export default function DisclosureComponent({
|
|||
{({ open }) => (
|
||||
<>
|
||||
<div>
|
||||
<div className="select-none bg-gray-50 w-full flex justify-between items-center -mt-px px-3 py-2 border border-gray-200">
|
||||
<div className="select-none bg-gray-50 dark:bg-slate-700 dark:border-y-slate-600 w-full flex justify-between items-center -mt-px px-3 py-2 border-y border-y-gray-200">
|
||||
<div className="flex gap-4">
|
||||
<Icon className="w-6 text-gray-800" />
|
||||
<span className="flex items-center text-sm text-gray-800 font-medium">
|
||||
<Icon className="w-6 text-gray-800 dark:text-white" />
|
||||
<span className="flex items-center text-sm text-gray-800 dark:text-white font-medium">
|
||||
{title}
|
||||
</span>
|
||||
</div>
|
||||
|
|
@ -36,7 +36,7 @@ export default function DisclosureComponent({
|
|||
<ChevronRightIcon
|
||||
className={`${
|
||||
open ? "rotate-90 transform" : ""
|
||||
} h-5 w-5 text-gray-800`}
|
||||
} h-5 w-5 text-gray-800 dark:text-white`}
|
||||
/>
|
||||
</Disclosure.Button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -70,7 +70,7 @@ export default function ExtraSidebar() {
|
|||
}
|
||||
>
|
||||
<div className="flex w-full justify-between text-sm px-4 py-3 items-center border-dashed border-gray-400 border-l-0 rounded-md rounded-l-none border-2">
|
||||
<span className="text-black w-36 truncate">{t}</span>
|
||||
<span className="text-black dark:text-white w-36 truncate">{t}</span>
|
||||
<Bars2Icon className="w-6 h-6 text-gray-400" />
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -95,7 +95,7 @@ export default function ExtraSidebar() {
|
|||
}
|
||||
>
|
||||
<div className="flex w-full justify-between text-sm px-4 py-3 items-center border-dashed border-gray-400 border-l-0 rounded-md rounded-l-none border-2">
|
||||
<span className="text-black w-36 truncate">Chat Input</span>
|
||||
<span className="text-black dark:text-white w-36 truncate">Chat Input</span>
|
||||
<Bars2Icon className="w-6 h-6 text-gray-400" />
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -112,7 +112,7 @@ export default function ExtraSidebar() {
|
|||
}
|
||||
>
|
||||
<div className="flex w-full justify-between text-sm px-4 py-3 items-center border-dashed border-gray-400 border-l-0 rounded-md rounded-l-none border-2">
|
||||
<span className="text-black w-36 truncate">Chat Output</span>
|
||||
<span className="text-black dark:text-white w-36 truncate">Chat Output</span>
|
||||
<Bars2Icon className="w-6 h-6 text-gray-400" />
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -135,7 +135,7 @@ export default function ExtraSidebar() {
|
|||
}
|
||||
>
|
||||
<div className="flex w-full justify-between text-sm px-4 py-3 items-center border-dashed border-gray-400 border-l-0 rounded-md rounded-l-none border-2">
|
||||
<span className="text-black w-36 truncate">String</span>
|
||||
<span className="text-black dark:text-white w-36 truncate">String</span>
|
||||
<Bars2Icon className="w-6 h-6 text-gray-400" />
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -152,7 +152,7 @@ export default function ExtraSidebar() {
|
|||
}
|
||||
>
|
||||
<div className="flex w-full justify-between text-sm px-4 py-3 items-center border-dashed border-gray-400 border-l-0 rounded-md rounded-l-none border-2">
|
||||
<span className="text-black w-36 truncate">Boolean</span>
|
||||
<span className="text-black dark:text-white w-36 truncate">Boolean</span>
|
||||
<Bars2Icon className="w-6 h-6 text-gray-400" />
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue