tiennm99/DocsGPT
1
0 Fork 0
mirror of https://github.com/tiennm99/DocsGPT.git synced 2026-10-15 10:14:32 +00:00
Code Issues Packages Projects Releases Wiki Activity

style: standardize colors across components according to figma

Browse Source
This commit is contained in:
Siddhant Rai committed 2026-03-25 19:36:32 +05:30
1 parent 324a8cd4cf
commit 6fa3acb1ca
10 files changed
+69 -69
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

frontend/src/App.tsx
+1 -1
View File
@@ -37,7 +37,7 @@ function MainLayout() {
const [navOpen, setNavOpen] = useState(!(isMobile || isTablet)); const [navOpen, setNavOpen] = useState(!(isMobile || isTablet));
return ( return (
<div className="bg-card relative h-screen overflow-hidden"> <div className="bg-background relative h-screen overflow-hidden">
<Navigation navOpen={navOpen} setNavOpen={setNavOpen} /> <Navigation navOpen={navOpen} setNavOpen={setNavOpen} />
<ActionButtons showNewChat={true} showShare={true} /> <ActionButtons showNewChat={true} showShare={true} />
<div <div
frontend/src/Hero.tsx
+1 -1
View File
@@ -44,7 +44,7 @@ export default function Hero({
<button <button
key={key} key={key}
onClick={() => handleQuestion({ question: demo.query })} onClick={() => handleQuestion({ question: demo.query })}
className={`border-border text-foreground hover:bg-muted bg-card w-full rounded-[66px] border px-6 py-3.5 text-left transition-colors ${key >= 2 ? 'hidden md:block' : ''}`} className={`border-border text-foreground hover:bg-muted dark:hover:bg-muted/50 bg-card dark:bg-transparent w-full rounded-[66px] border px-6 py-3.5 text-left transition-colors ${key >= 2 ? 'hidden md:block' : ''}`}
> >
<p className="text-black-1000 dark:text-foreground mb-2 font-semibold"> <p className="text-black-1000 dark:text-foreground mb-2 font-semibold">
{demo.header} {demo.header}
frontend/src/PageNotFound.tsx
+1 -1
View File
@@ -5,7 +5,7 @@ export default function PageNotFound() {
const { t } = useTranslation(); const { t } = useTranslation();
return ( return (
<div className="bg-card grid min-h-screen"> <div className="bg-background grid min-h-screen">
<p className="text-foreground mx-auto my-auto mt-20 flex w-full max-w-6xl flex-col place-items-center gap-6 rounded-3xl bg-gray-100 p-6 lg:p-10 xl:p-16 dark:text-gray-100"> <p className="text-foreground mx-auto my-auto mt-20 flex w-full max-w-6xl flex-col place-items-center gap-6 rounded-3xl bg-gray-100 p-6 lg:p-10 xl:p-16 dark:text-gray-100">
<h1>{t('pageNotFound.title')}</h1> <h1>{t('pageNotFound.title')}</h1>
<p>{t('pageNotFound.message')}</p> <p>{t('pageNotFound.message')}</p>
frontend/src/agents/NewAgent.tsx
+1 -1
View File
@@ -757,7 +757,7 @@ export default function NewAgent({ mode }: { mode: 'new' | 'edit' | 'draft' }) {
</button> </button>
</div> </div>
</div> </div>
<div className="bg-muted dark:bg-accent mt-3 flex w-full flex-1 grid-cols-5 flex-col gap-10 rounded-[30px] p-5 max-[1179px]:overflow-visible min-[1180px]:grid min-[1180px]:gap-5 min-[1180px]:overflow-hidden"> <div className="bg-muted dark:bg-background mt-3 flex w-full flex-1 grid-cols-5 flex-col gap-10 rounded-[30px] p-5 max-[1179px]:overflow-visible min-[1180px]:grid min-[1180px]:gap-5 min-[1180px]:overflow-hidden">
<div className="scrollbar-overlay col-span-2 flex flex-col gap-5 max-[1179px]:overflow-visible min-[1180px]:max-h-full min-[1180px]:overflow-y-auto min-[1180px]:pr-3"> <div className="scrollbar-overlay col-span-2 flex flex-col gap-5 max-[1179px]:overflow-visible min-[1180px]:max-h-full min-[1180px]:overflow-y-auto min-[1180px]:pr-3">
<div className="bg-card rounded-[30px] px-6 py-3"> <div className="bg-card rounded-[30px] px-6 py-3">
<h2 className="text-lg font-semibold"> <h2 className="text-lg font-semibold">
frontend/src/agents/workflow/WorkflowBuilder.tsx
+42 -42
View File
@@ -2,13 +2,13 @@ import 'reactflow/dist/style.css';
import { import {
AlertCircle, AlertCircle,
ChartColumn,
Bot, Bot,
ChartColumn,
Database, Database,
Flag, Flag,
GitBranch, GitBranch,
Loader2,
Link, Link,
Loader2,
Pencil, Pencil,
Play, Play,
Plus, Plus,
@@ -1333,12 +1333,12 @@ function WorkflowBuilderInner() {
return ( return (
<> <>
<MobileBlocker /> <MobileBlocker />
<div className="bg-background fixed inset-0 z-50 hidden h-screen w-full flex-col md:flex"> <div className="bg-background dark:bg-outer-space fixed inset-0 z-50 hidden h-screen w-full flex-col md:flex">
<div className="border-border flex items-center justify-between border-b bg-card px-6 py-4"> <div className="border-border bg-card dark:bg-background flex items-center justify-between border-b px-6 py-4">
<div className="flex items-center gap-4"> <div className="flex items-center gap-4">
<button <button
onClick={navigateBackToAgents} onClick={navigateBackToAgents}
className="rounded-full border border-border p-3 text-sm text-muted-foreground hover:bg-accent" className="border-border text-muted-foreground hover:bg-accent rounded-full border p-3 text-sm"
> >
<img src={ArrowLeft} alt="left-arrow" className="h-3 w-3" /> <img src={ArrowLeft} alt="left-arrow" className="h-3 w-3" />
</button> </button>
@@ -1368,7 +1368,7 @@ function WorkflowBuilderInner() {
{showWorkflowSettings && ( {showWorkflowSettings && (
<div <div
ref={workflowSettingsRef} ref={workflowSettingsRef}
className="absolute top-full left-0 z-50 mt-2 w-80 rounded-xl border border-border bg-card p-4 shadow-lg" className="border-border bg-card absolute top-full left-0 z-50 mt-2 w-80 rounded-xl border p-4 shadow-lg"
> >
<div className="mb-3"> <div className="mb-3">
<label className="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300"> <label className="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">
@@ -1378,7 +1378,7 @@ function WorkflowBuilderInner() {
type="text" type="text"
value={workflowName} value={workflowName}
onChange={(e) => setWorkflowName(e.target.value)} onChange={(e) => setWorkflowName(e.target.value)}
className="focus:ring-ring w-full rounded-lg border border-border bg-card px-3 py-2 text-sm outline-none focus:ring-2 dark:text-white" className="focus:ring-ring border-border bg-card w-full rounded-lg border px-3 py-2 text-sm outline-none focus:ring-2 dark:text-white"
placeholder="Enter workflow name" placeholder="Enter workflow name"
/> />
</div> </div>
@@ -1389,7 +1389,7 @@ function WorkflowBuilderInner() {
<textarea <textarea
value={workflowDescription} value={workflowDescription}
onChange={(e) => setWorkflowDescription(e.target.value)} onChange={(e) => setWorkflowDescription(e.target.value)}
className="focus:ring-ring w-full rounded-lg border border-border bg-card px-3 py-2 text-sm outline-none focus:ring-2 dark:text-white" className="focus:ring-ring border-border bg-card w-full rounded-lg border px-3 py-2 text-sm outline-none focus:ring-2 dark:text-white"
rows={3} rows={3}
placeholder="Describe what this workflow does" placeholder="Describe what this workflow does"
/> />
@@ -1426,7 +1426,7 @@ function WorkflowBuilderInner() {
colorClass: 'text-gray-500', colorClass: 'text-gray-500',
}, },
]} ]}
className="rounded-lg border-2 border-dashed border-border p-3 text-center transition-colors" className="border-border rounded-lg border-2 border-dashed p-3 text-center transition-colors"
/> />
<p className="mt-1 text-[11px] text-gray-500 dark:text-gray-400"> <p className="mt-1 text-[11px] text-gray-500 dark:text-gray-400">
Image updates are included the next time you save. Image updates are included the next time you save.
@@ -1446,7 +1446,7 @@ function WorkflowBuilderInner() {
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<button <button
onClick={() => setShowWorkflowSettings((prev) => !prev)} onClick={() => setShowWorkflowSettings((prev) => !prev)}
className="flex items-center gap-2 rounded-full border border-border bg-card px-4 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-accent dark:text-gray-200" className="border-border bg-card hover:bg-accent flex items-center gap-2 rounded-full border px-4 py-2 text-sm font-medium text-gray-700 transition-colors dark:text-gray-200"
> >
<Settings2 size={16} /> <Settings2 size={16} />
Details Details
@@ -1454,7 +1454,7 @@ function WorkflowBuilderInner() {
{canManageAgent && ( {canManageAgent && (
<button <button
onClick={() => navigate(`/agents/logs/${effectiveAgentId}`)} onClick={() => navigate(`/agents/logs/${effectiveAgentId}`)}
className="flex items-center gap-2 rounded-full border border-border bg-card px-4 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-accent dark:text-gray-200" className="border-border bg-card hover:bg-accent flex items-center gap-2 rounded-full border px-4 py-2 text-sm font-medium text-gray-700 transition-colors dark:text-gray-200"
> >
<ChartColumn size={16} /> <ChartColumn size={16} />
Logs Logs
@@ -1463,7 +1463,7 @@ function WorkflowBuilderInner() {
{canManageAgent && ( {canManageAgent && (
<button <button
onClick={() => setAgentDetails('ACTIVE')} onClick={() => setAgentDetails('ACTIVE')}
className="flex items-center gap-2 rounded-full border border-border bg-card px-4 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-accent dark:text-gray-200" className="border-border bg-card hover:bg-accent flex items-center gap-2 rounded-full border px-4 py-2 text-sm font-medium text-gray-700 transition-colors dark:text-gray-200"
> >
<Link size={16} /> <Link size={16} />
Access Details Access Details
@@ -1473,7 +1473,7 @@ function WorkflowBuilderInner() {
<button <button
onClick={() => setDeleteConfirmation('ACTIVE')} onClick={() => setDeleteConfirmation('ACTIVE')}
disabled={isDeletingAgent} disabled={isDeletingAgent}
className="flex items-center gap-2 rounded-full border border-red-200 bg-card px-4 py-2 text-sm font-medium text-red-600 transition-colors hover:bg-red-50 disabled:cursor-not-allowed disabled:opacity-50 dark:border-red-900/30 dark:text-red-400 dark:hover:bg-red-900/10" className="bg-card flex items-center gap-2 rounded-full border border-red-200 px-4 py-2 text-sm font-medium text-red-600 transition-colors hover:bg-red-50 disabled:cursor-not-allowed disabled:opacity-50 dark:border-red-900/30 dark:text-red-400 dark:hover:bg-red-900/10"
> >
<Trash2 size={16} /> <Trash2 size={16} />
{isDeletingAgent ? 'Deleting...' : 'Delete'} {isDeletingAgent ? 'Deleting...' : 'Delete'}
@@ -1489,7 +1489,7 @@ function WorkflowBuilderInner() {
} }
setShowPreview(true); setShowPreview(true);
}} }}
className="flex items-center gap-2 rounded-full border border-border bg-card px-4 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-accent dark:text-gray-200" className="border-border bg-card hover:bg-accent flex items-center gap-2 rounded-full border px-4 py-2 text-sm font-medium text-gray-700 transition-colors dark:text-gray-200"
> >
<Play size={16} /> <Play size={16} />
Preview Preview
@@ -1499,7 +1499,7 @@ function WorkflowBuilderInner() {
disabled={isPrimaryActionDisabled} disabled={isPrimaryActionDisabled}
className={`relative inline-flex items-center justify-center rounded-full px-6 py-2 text-sm font-medium shadow-sm transition-colors disabled:cursor-not-allowed ${ className={`relative inline-flex items-center justify-center rounded-full px-6 py-2 text-sm font-medium shadow-sm transition-colors disabled:cursor-not-allowed ${
canManageAgent && !hasSavableChanges canManageAgent && !hasSavableChanges
? 'bg-gray-200 text-gray-500 dark:bg-accent dark:text-gray-400' ? 'dark:bg-accent bg-gray-200 text-gray-500 dark:text-gray-400'
: 'bg-primary hover:bg-primary/90 text-white disabled:opacity-50' : 'bg-primary hover:bg-primary/90 text-white disabled:opacity-50'
}`} }`}
> >
@@ -1549,14 +1549,14 @@ function WorkflowBuilderInner() {
)} )}
<div className="flex flex-1 overflow-hidden"> <div className="flex flex-1 overflow-hidden">
<div className="border-border flex w-64 flex-col gap-6 border-r bg-muted p-4"> <div className="border-border bg-muted dark:bg-background flex w-64 flex-col gap-6 border-r p-4">
<div> <div>
<h3 className="mb-3 text-xs font-semibold tracking-wider text-gray-500 uppercase dark:text-gray-400"> <h3 className="mb-3 text-xs font-semibold tracking-wider text-gray-500 uppercase dark:text-gray-400">
Core Nodes Core Nodes
</h3> </h3>
<div className="flex flex-col gap-2"> <div className="flex flex-col gap-2">
<div <div
className="group flex cursor-move items-center gap-3 rounded-full border border-border bg-card px-4 py-3 shadow-sm transition-all hover:shadow-md" className="group border-border bg-card flex cursor-move items-center gap-3 rounded-full border px-4 py-3 shadow-sm transition-all hover:shadow-md"
draggable draggable
onDragStart={(e) => handleNodeDragStart(e, 'agent')} onDragStart={(e) => handleNodeDragStart(e, 'agent')}
> >
@@ -1568,7 +1568,7 @@ function WorkflowBuilderInner() {
</span> </span>
</div> </div>
<div <div
className="group flex cursor-move items-center gap-3 rounded-full border border-border bg-card px-4 py-3 shadow-sm transition-all hover:shadow-md" className="group border-border bg-card flex cursor-move items-center gap-3 rounded-full border px-4 py-3 shadow-sm transition-all hover:shadow-md"
draggable draggable
onDragStart={(e) => handleNodeDragStart(e, 'end')} onDragStart={(e) => handleNodeDragStart(e, 'end')}
> >
@@ -1580,7 +1580,7 @@ function WorkflowBuilderInner() {
</span> </span>
</div> </div>
<div <div
className="group flex cursor-move items-center gap-3 rounded-full border border-border bg-card px-4 py-3 shadow-sm transition-all hover:shadow-md" className="group border-border bg-card flex cursor-move items-center gap-3 rounded-full border px-4 py-3 shadow-sm transition-all hover:shadow-md"
draggable draggable
onDragStart={(e) => handleNodeDragStart(e, 'note')} onDragStart={(e) => handleNodeDragStart(e, 'note')}
> >
@@ -1600,7 +1600,7 @@ function WorkflowBuilderInner() {
</h3> </h3>
<div className="flex flex-col gap-2"> <div className="flex flex-col gap-2">
<div <div
className="group flex cursor-move items-center gap-3 rounded-full border border-border bg-card px-4 py-3 shadow-sm transition-all hover:shadow-md" className="group border-border bg-card flex cursor-move items-center gap-3 rounded-full border px-4 py-3 shadow-sm transition-all hover:shadow-md"
draggable draggable
onDragStart={(e) => handleNodeDragStart(e, 'state')} onDragStart={(e) => handleNodeDragStart(e, 'state')}
> >
@@ -1617,7 +1617,7 @@ function WorkflowBuilderInner() {
</div> </div>
</div> </div>
<div <div
className="group flex cursor-move items-center gap-3 rounded-full border border-border bg-card px-4 py-3 shadow-sm transition-all hover:shadow-md" className="group border-border bg-card flex cursor-move items-center gap-3 rounded-full border px-4 py-3 shadow-sm transition-all hover:shadow-md"
draggable draggable
onDragStart={(e) => handleNodeDragStart(e, 'condition')} onDragStart={(e) => handleNodeDragStart(e, 'condition')}
> >
@@ -1639,7 +1639,7 @@ function WorkflowBuilderInner() {
<div <div
ref={reactFlowWrapper} ref={reactFlowWrapper}
className="relative flex-1 bg-muted" className="bg-muted dark:bg-background/10 relative flex-1"
> >
<ReactFlow <ReactFlow
nodes={nodes} nodes={nodes}
@@ -1665,7 +1665,7 @@ function WorkflowBuilderInner() {
className="absolute inset-0 z-10" className="absolute inset-0 z-10"
onClick={handlePanelBackdropClick} onClick={handlePanelBackdropClick}
/> />
<div className="border-border absolute top-4 right-4 z-20 w-96 rounded-2xl border bg-card shadow-[0px_4px_40px_-3px_#0000001A]"> <div className="border-border bg-card absolute top-4 right-4 z-20 w-96 rounded-2xl border shadow-[0px_4px_40px_-3px_#0000001A]">
<div className="border-border flex items-center justify-between border-b p-4"> <div className="border-border flex items-center justify-between border-b p-4">
<h3 className="font-semibold text-gray-900 dark:text-white"> <h3 className="font-semibold text-gray-900 dark:text-white">
{selectedNode.type === 'start' && 'Start Node'} {selectedNode.type === 'start' && 'Start Node'}
@@ -1685,7 +1685,7 @@ function WorkflowBuilderInner() {
<div className="max-h-[calc(100vh-200px)] overflow-y-auto p-4"> <div className="max-h-[calc(100vh-200px)] overflow-y-auto p-4">
<div className="mb-4 flex flex-col gap-2"> <div className="mb-4 flex flex-col gap-2">
<div className="rounded-lg bg-muted p-3"> <div className="bg-muted rounded-lg p-3">
<div className="mb-1 text-xs text-gray-500 dark:text-gray-400"> <div className="mb-1 text-xs text-gray-500 dark:text-gray-400">
Node ID Node ID
</div> </div>
@@ -1714,7 +1714,7 @@ function WorkflowBuilderInner() {
label: e.target.value, label: e.target.value,
}) })
} }
className="border-border focus:ring-ring w-full rounded-xl border bg-card px-3 py-2 text-sm transition-all outline-none focus:ring-2 dark:text-white" className="border-border focus:ring-ring bg-card w-full rounded-xl border px-3 py-2 text-sm transition-all outline-none focus:ring-2 dark:text-white"
placeholder="Enter node title" placeholder="Enter node title"
/> />
</div> </div>
@@ -1808,7 +1808,7 @@ function WorkflowBuilderInner() {
}, },
}) })
} }
className="border-border focus:ring-ring w-full rounded-xl border bg-card px-3 py-2 text-sm transition-all outline-none focus:ring-2 dark:text-white" className="border-border focus:ring-ring bg-card w-full rounded-xl border px-3 py-2 text-sm transition-all outline-none focus:ring-2 dark:text-white"
rows={3} rows={3}
placeholder="System prompt for the agent" placeholder="System prompt for the agent"
/> />
@@ -1851,7 +1851,7 @@ function WorkflowBuilderInner() {
}, },
}); });
}} }}
className="border-border focus:ring-ring w-full rounded-xl border bg-card px-3 py-2 text-sm transition-all outline-none focus:ring-2 dark:text-white" className="border-border focus:ring-ring bg-card w-full rounded-xl border px-3 py-2 text-sm transition-all outline-none focus:ring-2 dark:text-white"
placeholder="Variable name for output" placeholder="Variable name for output"
/> />
</div> </div>
@@ -1922,7 +1922,7 @@ function WorkflowBuilderInner() {
e.target.value, e.target.value,
) )
} }
className="border-border focus:ring-ring w-full rounded-xl border bg-card px-3 py-2 font-mono text-xs transition-all outline-none focus:ring-2 dark:text-white" className="border-border focus:ring-ring bg-card w-full rounded-xl border px-3 py-2 font-mono text-xs transition-all outline-none focus:ring-2 dark:text-white"
rows={8} rows={8}
placeholder={`{ placeholder={`{
"type": "object", "type": "object",
@@ -1962,7 +1962,7 @@ function WorkflowBuilderInner() {
content: e.target.value, content: e.target.value,
}) })
} }
className="border-border focus:ring-ring w-full rounded-xl border bg-card px-3 py-2 text-sm transition-all outline-none focus:ring-2 dark:text-white" className="border-border focus:ring-ring bg-card w-full rounded-xl border px-3 py-2 text-sm transition-all outline-none focus:ring-2 dark:text-white"
rows={4} rows={4}
placeholder="Enter note content" placeholder="Enter note content"
/> />
@@ -1987,7 +1987,7 @@ function WorkflowBuilderInner() {
) => ( ) => (
<div <div
key={idx} key={idx}
className="rounded-xl border border-border p-3" className="border-border rounded-xl border p-3"
> >
<div className="mb-2 flex items-center justify-between"> <div className="mb-2 flex items-center justify-between">
<span className="text-sm font-medium text-gray-700 dark:text-gray-300"> <span className="text-sm font-medium text-gray-700 dark:text-gray-300">
@@ -2037,7 +2037,7 @@ function WorkflowBuilderInner() {
}, },
}); });
}} }}
className="border-border focus:ring-ring mb-1 w-full rounded-xl border bg-card px-3 py-2 text-sm transition-all outline-none focus:ring-2 dark:bg-accent dark:text-white" className="border-border focus:ring-ring bg-card dark:bg-accent mb-1 w-full rounded-xl border px-3 py-2 text-sm transition-all outline-none focus:ring-2 dark:text-white"
rows={2} rows={2}
placeholder="input.foo + 1" placeholder="input.foo + 1"
/> />
@@ -2077,7 +2077,7 @@ function WorkflowBuilderInner() {
}, },
}); });
}} }}
className="border-border focus:ring-ring w-full rounded-xl border bg-card px-3 py-2 text-sm transition-all outline-none focus:ring-2 dark:bg-accent dark:text-white" className="border-border focus:ring-ring bg-card dark:bg-accent w-full rounded-xl border px-3 py-2 text-sm transition-all outline-none focus:ring-2 dark:text-white"
placeholder="variable_name" placeholder="variable_name"
/> />
</div> </div>
@@ -2098,7 +2098,7 @@ function WorkflowBuilderInner() {
}, },
}); });
}} }}
className="flex items-center gap-1 rounded-lg px-3 py-1.5 text-sm font-medium text-gray-600 transition-colors hover:bg-accent dark:text-gray-400" className="hover:bg-accent flex items-center gap-1 rounded-lg px-3 py-1.5 text-sm font-medium text-gray-600 transition-colors dark:text-gray-400"
> >
<Plus size={14} /> <Plus size={14} />
Add Add
@@ -2111,7 +2111,7 @@ function WorkflowBuilderInner() {
<p className="text-xs text-gray-500 dark:text-gray-400"> <p className="text-xs text-gray-500 dark:text-gray-400">
Create conditions to branch your workflow Create conditions to branch your workflow
</p> </p>
<div className="flex overflow-hidden rounded-lg border border-border"> <div className="border-border flex overflow-hidden rounded-lg border">
<button <button
onClick={() => onClick={() =>
handleUpdateNodeData({ handleUpdateNodeData({
@@ -2125,7 +2125,7 @@ function WorkflowBuilderInner() {
(selectedNode.data.config?.mode || (selectedNode.data.config?.mode ||
'simple') === 'simple' 'simple') === 'simple'
? 'bg-primary text-white' ? 'bg-primary text-white'
: 'text-gray-600 hover:bg-accent dark:text-gray-400' : 'hover:bg-accent text-gray-600 dark:text-gray-400'
}`} }`}
> >
Simple Simple
@@ -2143,7 +2143,7 @@ function WorkflowBuilderInner() {
selectedNode.data.config?.mode === selectedNode.data.config?.mode ===
'advanced' 'advanced'
? 'bg-primary text-white' ? 'bg-primary text-white'
: 'text-gray-600 hover:bg-accent dark:text-gray-400' : 'hover:bg-accent text-gray-600 dark:text-gray-400'
}`} }`}
> >
Advanced Advanced
@@ -2154,7 +2154,7 @@ function WorkflowBuilderInner() {
(c: ConditionCase, idx: number) => ( (c: ConditionCase, idx: number) => (
<div <div
key={c.sourceHandle} key={c.sourceHandle}
className="rounded-xl border border-border p-3" className="border-border rounded-xl border p-3"
> >
<div className="mb-2 flex items-center justify-between"> <div className="mb-2 flex items-center justify-between">
<span className="text-sm font-semibold text-orange-600 dark:text-orange-400"> <span className="text-sm font-semibold text-orange-600 dark:text-orange-400">
@@ -2219,7 +2219,7 @@ function WorkflowBuilderInner() {
}, },
}); });
}} }}
className="border-border focus:ring-ring mb-2 w-full rounded-xl border bg-card px-3 py-2 text-sm transition-all outline-none focus:ring-2 dark:bg-accent dark:text-white" className="border-border focus:ring-ring bg-card dark:bg-accent mb-2 w-full rounded-xl border px-3 py-2 text-sm transition-all outline-none focus:ring-2 dark:text-white"
placeholder="Case name (optional)" placeholder="Case name (optional)"
/> />
{(selectedNode.data.config?.mode || {(selectedNode.data.config?.mode ||
@@ -2255,7 +2255,7 @@ function WorkflowBuilderInner() {
}, },
}); });
}} }}
className="border-border focus:ring-ring w-full rounded-xl border bg-card px-3 py-2 text-sm outline-none focus:ring-2 dark:bg-accent dark:text-white" className="border-border focus:ring-ring bg-card dark:bg-accent w-full rounded-xl border px-3 py-2 text-sm outline-none focus:ring-2 dark:text-white"
placeholder="Variable" placeholder="Variable"
/> />
<Select <Select
@@ -2347,7 +2347,7 @@ function WorkflowBuilderInner() {
}, },
}); });
}} }}
className="border-border focus:ring-ring w-full rounded-xl border bg-card px-3 py-2 text-sm outline-none focus:ring-2 dark:bg-accent dark:text-white" className="border-border focus:ring-ring bg-card dark:bg-accent w-full rounded-xl border px-3 py-2 text-sm outline-none focus:ring-2 dark:text-white"
placeholder="Value" placeholder="Value"
/> />
</div> </div>
@@ -2372,7 +2372,7 @@ function WorkflowBuilderInner() {
}, },
}); });
}} }}
className="border-border focus:ring-ring w-full rounded-xl border bg-card px-3 py-2 text-sm transition-all outline-none focus:ring-2 dark:bg-accent dark:text-white" className="border-border focus:ring-ring bg-card dark:bg-accent w-full rounded-xl border px-3 py-2 text-sm transition-all outline-none focus:ring-2 dark:text-white"
rows={2} rows={2}
placeholder="Enter condition, e.g. input == 5" placeholder="Enter condition, e.g. input == 5"
/> />
@@ -2414,7 +2414,7 @@ function WorkflowBuilderInner() {
}, },
}); });
}} }}
className="flex items-center gap-1 rounded-lg px-3 py-1.5 text-sm font-medium text-gray-600 transition-colors hover:bg-accent dark:text-gray-400" className="hover:bg-accent flex items-center gap-1 rounded-lg px-3 py-1.5 text-sm font-medium text-gray-600 transition-colors dark:text-gray-400"
> >
<Plus size={14} /> <Plus size={14} />
Add Add
frontend/src/components/Dropdown.tsx
+1 -1
View File
@@ -157,7 +157,7 @@ function Dropdown<T extends DropdownOption>({
return ( return (
<div <div
key={i} key={i}
className={`flex cursor-pointer items-center justify-between hover:bg-muted ${active ? 'bg-muted' : ''}`} className={`flex cursor-pointer items-center justify-between hover:bg-accent ${active ? 'bg-accent' : ''}`}
> >
<span <span
onClick={() => { onClick={() => {
frontend/src/components/DropdownModel.tsx
+4 -4
View File
@@ -80,7 +80,7 @@ export default function DropdownModel() {
return ( return (
<div ref={dropdownRef}> <div ref={dropdownRef}>
<div <div
className={`border-border text-foreground mx-auto flex w-full cursor-pointer items-center justify-between border bg-transparent px-3 py-4 ${isOpen ? 'rounded-t-4xl' : 'rounded-4xl'}`} className={`text-foreground bg-muted dark:bg-card mx-auto flex w-full cursor-pointer items-center justify-between px-3 py-4 ${isOpen ? 'rounded-t-4xl' : 'rounded-4xl'}`}
onClick={() => setIsOpen(!isOpen)} onClick={() => setIsOpen(!isOpen)}
> >
{selectedModel?.display_name ? ( {selectedModel?.display_name ? (
@@ -101,7 +101,7 @@ export default function DropdownModel() {
/> />
</div> </div>
{isOpen && ( {isOpen && (
<div className="no-scrollbar border-border bg-card absolute right-0 left-0 z-20 -mt-1 max-h-52 w-full overflow-y-auto rounded-b-3xl border border-t-0 shadow-md"> <div className="no-scrollbar bg-muted dark:bg-card absolute right-0 left-0 z-20 -mt-1 max-h-52 w-full overflow-y-auto rounded-b-3xl shadow-md">
{availableModels && (availableModels?.length ?? 0) > 0 ? ( {availableModels && (availableModels?.length ?? 0) > 0 ? (
availableModels.map((model: Model) => ( availableModels.map((model: Model) => (
<div <div
@@ -110,7 +110,7 @@ export default function DropdownModel() {
dispatch(setSelectedModel(model)); dispatch(setSelectedModel(model));
setIsOpen(false); setIsOpen(false);
}} }}
className={`border-border/50 hover:bg-muted flex h-10 w-full cursor-pointer items-center justify-between border-t`} className={`border-border/30 hover:bg-accent flex h-10 w-full cursor-pointer items-center justify-between border-t`}
> >
<div className="flex w-full items-center justify-between"> <div className="flex w-full items-center justify-between">
<p className="flex-1 truncate py-3 pr-2 pl-5"> <p className="flex-1 truncate py-3 pr-2 pl-5">
@@ -127,7 +127,7 @@ export default function DropdownModel() {
</div> </div>
)) ))
) : ( ) : (
<div className="border-border/50 flex h-10 w-full items-center border-t"> <div className="border-border/30 flex h-10 w-full items-center border-t">
<p className="pl-5 text-sm text-muted-foreground">No models available</p> <p className="pl-5 text-sm text-muted-foreground">No models available</p>
</div> </div>
)} )}
frontend/src/components/MessageInput.tsx
+1 -1
View File
@@ -1438,7 +1438,7 @@ export default function MessageInput({
onChange={handleVoiceFileAttachment} onChange={handleVoiceFileAttachment}
/> />
<div className="border-border bg-card relative flex w-full flex-col rounded-[23px] border"> <div className="border-border bg-card dark:bg-transparent relative flex w-full flex-col rounded-[23px] border">
<div className="flex flex-wrap gap-1.5 px-2 py-2 sm:gap-2 sm:px-3"> <div className="flex flex-wrap gap-1.5 px-2 py-2 sm:gap-2 sm:px-3">
{attachments.map((attachment) => { {attachments.map((attachment) => {
return ( return (
frontend/src/conversation/SharedConversation.tsx
+1 -1
View File
@@ -138,7 +138,7 @@ export const SharedConversation = () => {
twitterTitle={title} twitterTitle={title}
twitterDescription="Shared conversations with DocsGPT" twitterDescription="Shared conversations with DocsGPT"
/> />
<div className="bg-card flex h-full flex-col items-center justify-between gap-2 overflow-y-hidden"> <div className="bg-background flex h-full flex-col items-center justify-between gap-2 overflow-y-hidden">
<div className="dark:border-b-silver w-full max-w-[1200px] border-b p-2 md:w-9/12 lg:w-8/12 xl:w-8/12 2xl:w-6/12"> <div className="dark:border-b-silver w-full max-w-[1200px] border-b p-2 md:w-9/12 lg:w-8/12 xl:w-8/12 2xl:w-6/12">
<h1 className="font-semi-bold text-foreground dark:text-foreground text-4xl"> <h1 className="font-semi-bold text-foreground dark:text-foreground text-4xl">
{title} {title}
frontend/src/index.css
+16 -16
View File
@@ -868,7 +868,7 @@ Avoid over-scrolling in mobile browsers
:root { :root {
--radius: 0.625rem; --radius: 0.625rem;
--background: #fbfbfb; --background: #ffffff;
--foreground: #171717; --foreground: #171717;
--card: #ffffff; --card: #ffffff;
--card-foreground: #171717; --card-foreground: #171717;
@@ -880,7 +880,7 @@ Avoid over-scrolling in mobile browsers
--secondary-foreground: #7d54d1; --secondary-foreground: #7d54d1;
--muted: #f6f6f6; --muted: #f6f6f6;
--muted-foreground: #737373; --muted-foreground: #737373;
--accent: #f0eef6; --accent: #ececec;
--accent-foreground: #171717; --accent-foreground: #171717;
--destructive: #ef4444; --destructive: #ef4444;
--border: #d9d9d9; --border: #d9d9d9;
@@ -891,11 +891,11 @@ Avoid over-scrolling in mobile browsers
--chart-3: oklch(0.398 0.07 227.392); --chart-3: oklch(0.398 0.07 227.392);
--chart-4: oklch(0.828 0.189 84.429); --chart-4: oklch(0.828 0.189 84.429);
--chart-5: oklch(0.769 0.188 70.08); --chart-5: oklch(0.769 0.188 70.08);
--sidebar: #ffffff; --sidebar: #fbfbfb;
--sidebar-foreground: #171717; --sidebar-foreground: #171717;
--sidebar-primary: #7d54d1; --sidebar-primary: #7d54d1;
--sidebar-primary-foreground: #ffffff; --sidebar-primary-foreground: #ffffff;
--sidebar-accent: #f0eef6; --sidebar-accent: #ececec;
--sidebar-accent-foreground: #171717; --sidebar-accent-foreground: #171717;
--sidebar-border: #d9d9d9; --sidebar-border: #d9d9d9;
--sidebar-ring: #7d54d1; --sidebar-ring: #7d54d1;
@@ -907,38 +907,38 @@ Avoid over-scrolling in mobile browsers
*/ */
.dark { .dark {
--background: #0e0e0e; --background: #222327;
--foreground: #fafafa; --foreground: #fafafa;
--card: #222222; --card: #2b2c31;
--card-foreground: #fafafa; --card-foreground: #fafafa;
--popover: #2c2c2c; --popover: #2b2c31;
--popover-foreground: #fafafa; --popover-foreground: #fafafa;
--primary: #976af3; --primary: #976af3;
--primary-foreground: #ffffff; --primary-foreground: #ffffff;
--secondary: #2c2c2c; --secondary: #2b2c31;
--secondary-foreground: #e0e0e0; --secondary-foreground: #e0e0e0;
--muted: #2c2c2c; --muted: #35363b;
--muted-foreground: #a1a1a1; --muted-foreground: #a1a1a1;
--accent: #383838; --accent: #3e3f45;
--accent-foreground: #fafafa; --accent-foreground: #fafafa;
--destructive: #dc2626; --destructive: #dc2626;
--border: #404040; --border: #44454c;
--input: #404040; --input: #44454c;
--ring: #976af3; --ring: #976af3;
--chart-1: oklch(0.488 0.243 264.376); --chart-1: oklch(0.488 0.243 264.376);
--chart-2: oklch(0.696 0.17 162.48); --chart-2: oklch(0.696 0.17 162.48);
--chart-3: oklch(0.769 0.188 70.08); --chart-3: oklch(0.769 0.188 70.08);
--chart-4: oklch(0.627 0.265 303.9); --chart-4: oklch(0.627 0.265 303.9);
--chart-5: oklch(0.645 0.246 16.439); --chart-5: oklch(0.645 0.246 16.439);
--sidebar: #0d0d0d; --sidebar: #161616;
--sidebar-foreground: #fafafa; --sidebar-foreground: #fafafa;
--sidebar-primary: #976af3; --sidebar-primary: #976af3;
--sidebar-primary-foreground: #ffffff; --sidebar-primary-foreground: #ffffff;
--sidebar-accent: #2c2c2c; --sidebar-accent: #222327;
--sidebar-accent-foreground: #fafafa; --sidebar-accent-foreground: #fafafa;
--sidebar-border: #404040; --sidebar-border: #2b2c31;
--sidebar-ring: #976af3; --sidebar-ring: #976af3;
--answer-bubble: #32333b; --answer-bubble: #2e303e;
} }
/* /*