fix: inconsistencies with prev color patterns

This commit is contained in:
Siddhant Rai committed 2026-03-26 18:32:57 +05:30
1 parent 844167ba06
commit 174dee0fe6
14 files changed
+65 -64

No files matched your search

+1 -1
View File
@@ -6,7 +6,7 @@ export default function PageNotFound() {
return (
<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:bg-card">
<h1>{t('pageNotFound.title')}</h1>
<p>{t('pageNotFound.message')}</p>
<button className="pointer-cursor bg-blue-1000 hover:bg-blue-3000 mr-4 flex cursor-pointer items-center justify-center rounded-full px-4 py-2 text-white transition-colors duration-100">
+1 -1
View File
@@ -283,7 +283,7 @@ export default function AgentCard({
className="h-7 w-7 rounded-full object-contain"
/>
{agent.status === 'draft' && (
<p className="text-xs text-black opacity-50">{`(Draft)`}</p>
<p className="text-xs text-foreground opacity-50">{`(Draft)`}</p>
)}
</div>
<div className="mt-2">
@@ -1423,12 +1423,12 @@ function WorkflowBuilderInner() {
},
{
text: ' or drag and drop',
colorClass: 'text-gray-500',
colorClass: 'text-muted-foreground',
},
]}
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-muted-foreground">
Image updates are included the next time you save.
</p>
</div>
@@ -1608,10 +1608,10 @@ function WorkflowBuilderInner() {
<Database size={18} />
</div>
<div className="flex flex-col">
<span className="text-sm font-medium text-gray-700 dark:text-gray-200">
<span className="text-sm font-medium text-foreground">
Set State
</span>
<span className="text-[10px] text-gray-400">
<span className="text-[10px] text-muted-foreground">
Modify workflow variables
</span>
</div>
@@ -1625,10 +1625,10 @@ function WorkflowBuilderInner() {
<GitBranch size={18} />
</div>
<div className="flex flex-col">
<span className="text-sm font-medium text-gray-700 dark:text-gray-200">
<span className="text-sm font-medium text-foreground">
If / Else
</span>
<span className="text-[10px] text-gray-400">
<span className="text-[10px] text-muted-foreground">
Conditional branching
</span>
</div>
@@ -2041,7 +2041,7 @@ function WorkflowBuilderInner() {
rows={2}
placeholder="input.foo + 1"
/>
<p className="mb-3 text-[10px] text-gray-400">
<p className="mb-3 text-[10px] text-muted-foreground">
Use Common Expression Language to create
a custom expression.{' '}
<a
@@ -2376,7 +2376,7 @@ function WorkflowBuilderInner() {
rows={2}
placeholder="Enter condition, e.g. input == 5"
/>
<p className="mt-1 text-[10px] text-gray-400">
<p className="mt-1 text-[10px] text-muted-foreground">
Use Common Expression Language to
create a custom expression.{' '}
<a
@@ -6,10 +6,10 @@ export default function MobileBlocker() {
<div className="bg-primary/10 dark:bg-primary/20 mb-6 flex h-20 w-20 items-center justify-center rounded-2xl">
<Monitor className="text-primary h-10 w-10" />
</div>
<h2 className="mb-2 text-xl font-bold text-gray-900 dark:text-white">
<h2 className="mb-2 text-xl font-bold text-foreground">
Desktop Required
</h2>
<p className="max-w-sm text-sm leading-relaxed text-gray-500">
<p className="max-w-sm text-sm leading-relaxed text-muted-foreground">
The Workflow Builder requires a larger screen for the best experience.
Please open this page on a desktop or laptop computer.
</p>
+3 -3
View File
@@ -547,7 +547,7 @@ const Chunks: React.FC<ChunksProps> = ({
<>
<div className="mb-3 flex flex-col items-start justify-between gap-3 sm:flex-row sm:items-center">
<div className="border-border dark:border-border flex h-[38px] w-full flex-1 items-center overflow-hidden rounded-md border">
<div className="flex h-full items-center px-4 font-medium whitespace-nowrap text-gray-700">
<div className="flex h-full items-center px-4 font-medium whitespace-nowrap text-gray-700 dark:text-foreground">
{totalChunks > 999999
? `${(totalChunks / 1000000).toFixed(2)}M`
: totalChunks > 999
@@ -606,7 +606,7 @@ const Chunks: React.FC<ChunksProps> = ({
>
<div className="w-full">
<div className="border-border bg-muted dark:border-border dark:bg-card flex w-full items-center justify-between border-b px-4 py-3">
<div className="text-sm text-[#59636E]">
<div className="text-sm text-[#59636E] dark:text-muted-foreground">
{chunk.metadata.token_count
? chunk.metadata.token_count.toLocaleString()
: '-'}{' '}
@@ -641,7 +641,7 @@ const Chunks: React.FC<ChunksProps> = ({
<div className="w-full">
<div className="border-border dark:border-border relative flex w-full flex-col overflow-hidden rounded-[5.86px] border">
<div className="border-border bg-muted dark:border-border dark:bg-card flex w-full items-center justify-between border-b px-4 py-3">
<div className="text-sm text-[#59636E]">
<div className="text-sm text-[#59636E] dark:text-muted-foreground">
{editingChunk.metadata.token_count
? editingChunk.metadata.token_count.toLocaleString()
: '-'}{' '}
+34 -33
View File
@@ -1,30 +1,31 @@
import React, { useState, useRef, useEffect } from 'react';
import React, { useEffect, useRef, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useSelector } from 'react-redux';
import { formatBytes } from '../utils/stringUtils';
import { selectToken } from '../preferences/preferenceSlice';
import userService from '../api/services/userService';
import ArrowLeft from '../assets/arrow-left.svg';
import CheckmarkIcon from '../assets/checkMark2.svg';
import EyeView from '../assets/eye-view.svg';
import FileIcon from '../assets/file.svg';
import FolderIcon from '../assets/folder.svg';
import SyncIcon from '../assets/sync.svg';
import ThreeDots from '../assets/three-dots.svg';
import { useLoaderState, useOutsideAlerter } from '../hooks';
import ConfirmationModal from '../modals/ConfirmationModal';
import { ActiveState } from '../models/misc';
import { selectToken } from '../preferences/preferenceSlice';
import { formatBytes } from '../utils/stringUtils';
import Chunks from './Chunks';
import ContextMenu, { MenuOption } from './ContextMenu';
import SkeletonLoader from './SkeletonLoader';
import ConfirmationModal from '../modals/ConfirmationModal';
import userService from '../api/services/userService';
import FileIcon from '../assets/file.svg';
import FolderIcon from '../assets/folder.svg';
import ArrowLeft from '../assets/arrow-left.svg';
import ThreeDots from '../assets/three-dots.svg';
import EyeView from '../assets/eye-view.svg';
import SyncIcon from '../assets/sync.svg';
import CheckmarkIcon from '../assets/checkMark2.svg';
import { useOutsideAlerter, useLoaderState } from '../hooks';
import {
Table,
TableBody,
TableCell,
TableContainer,
TableHead,
TableBody,
TableRow,
TableHeader,
TableCell,
TableRow,
} from './Table';
interface FileNode {
@@ -325,26 +326,26 @@ const ConnectorTree: React.FC<ConnectorTreeProps> = ({
{/* Left side with path navigation */}
<div className="flex w-full items-center sm:w-auto">
<button
className="mr-3 flex h-[29px] w-[29px] items-center justify-center rounded-full border p-2 text-sm font-medium text-gray-400 dark:border-0 dark:text-gray-500"
className="text-muted-foreground mr-3 flex h-[29px] w-[29px] items-center justify-center rounded-full border p-2 text-sm font-medium dark:border-0"
onClick={handleBackNavigation}
>
<img src={ArrowLeft} alt="left-arrow" className="h-3 w-3" />
</button>
<div className="flex flex-wrap items-center">
<span className="font-semibold break-words text-[#7D54D1]">
<span className="font-semibold wrap-break-word text-[#7D54D1]">
{sourceName}
</span>
{currentPath.length > 0 && (
<>
<span className="mx-1 flex-shrink-0 text-gray-500">/</span>
<span className="text-muted-foreground mx-1 shrink-0">/</span>
{currentPath.map((dir, index) => (
<React.Fragment key={index}>
<span className="break-words text-gray-700">
<span className="dark:text-foreground wrap-break-word text-gray-700">
{dir}
</span>
{index < currentPath.length - 1 && (
<span className="mx-1 flex-shrink-0 text-gray-500">
<span className="text-muted-foreground mx-1 shrink-0">
/
</span>
)}
@@ -364,7 +365,7 @@ const ConnectorTree: React.FC<ConnectorTreeProps> = ({
disabled={isSyncing}
className={`flex h-[38px] min-w-[108px] items-center justify-center rounded-full px-4 text-[14px] font-medium whitespace-nowrap transition-colors ${
isSyncing
? 'cursor-not-allowed bg-gray-300 text-gray-600 dark:bg-gray-600 dark:text-gray-400'
? 'dark:bg-muted dark:text-muted-foreground cursor-not-allowed bg-gray-300 text-gray-600'
: 'bg-primary hover:bg-primary/90 text-white'
}`}
title={
@@ -402,7 +403,7 @@ const ConnectorTree: React.FC<ConnectorTreeProps> = ({
<img
src={FolderIcon}
alt={t('settings.sources.parentFolderAlt')}
className="mr-2 h-4 w-4 flex-shrink-0"
className="mr-2 h-4 w-4 shrink-0"
/>
<span className="truncate">..</span>
</div>
@@ -449,7 +450,7 @@ const ConnectorTree: React.FC<ConnectorTreeProps> = ({
<img
src={FolderIcon}
alt={t('settings.sources.folderAlt')}
className="mr-2 h-4 w-4 flex-shrink-0"
className="mr-2 h-4 w-4 shrink-0"
/>
<span className="truncate">{name}</span>
</div>
@@ -466,7 +467,7 @@ const ConnectorTree: React.FC<ConnectorTreeProps> = ({
<div ref={menuRef} className="relative">
<button
onClick={(e) => handleMenuClick(e, itemId)}
className="inline-flex h-[35px] w-[24px] shrink-0 items-center justify-center rounded-md font-medium transition-colors hover:bg-[#EBEBEB] dark:hover:bg-muted"
className="dark:hover:bg-muted inline-flex h-[35px] w-6 shrink-0 items-center justify-center rounded-md font-medium transition-colors hover:bg-[#EBEBEB]"
aria-label={t('settings.sources.menuAlt')}
>
<img
@@ -512,7 +513,7 @@ const ConnectorTree: React.FC<ConnectorTreeProps> = ({
<img
src={FileIcon}
alt={t('settings.sources.fileAlt')}
className="mr-2 h-4 w-4 flex-shrink-0"
className="mr-2 h-4 w-4 shrink-0"
/>
<span className="truncate">{displayName}</span>
</div>
@@ -527,7 +528,7 @@ const ConnectorTree: React.FC<ConnectorTreeProps> = ({
<div ref={menuRef} className="relative">
<button
onClick={(e) => handleMenuClick(e, itemId)}
className="inline-flex h-[35px] w-[24px] shrink-0 items-center justify-center rounded-md font-medium transition-colors hover:bg-[#EBEBEB] dark:hover:bg-muted"
className="dark:hover:bg-muted inline-flex h-[35px] w-6 shrink-0 items-center justify-center rounded-md font-medium transition-colors hover:bg-[#EBEBEB]"
aria-label={t('settings.sources.menuAlt')}
>
<img
@@ -625,14 +626,14 @@ const ConnectorTree: React.FC<ConnectorTreeProps> = ({
}
}}
placeholder={t('settings.sources.searchFiles')}
className={`h-[38px] w-full border border-border px-4 py-2 dark:border-border ${searchQuery ? 'rounded-t-[24px]' : 'rounded-[24px]'} bg-transparent focus:outline-none`}
className={`border-border dark:border-border h-[38px] w-full border px-4 py-2 ${searchQuery ? 'rounded-t-[24px]' : 'rounded-[24px]'} bg-transparent focus:outline-none`}
/>
{searchQuery && (
<div className="absolute top-full right-0 left-0 z-10 max-h-[calc(100vh-200px)] w-full overflow-hidden rounded-b-[12px] border border-t-0 border-border bg-card shadow-lg transition-all duration-200 dark:border-border dark:bg-card">
<div className="border-border bg-card dark:border-border dark:bg-card absolute top-full right-0 left-0 z-10 max-h-[calc(100vh-200px)] w-full overflow-hidden rounded-b-2xl border border-t-0 shadow-lg transition-all duration-200">
<div className="max-h-[calc(100vh-200px)] overflow-x-hidden overflow-y-auto overscroll-contain">
{searchResults.length === 0 ? (
<div className="py-2 text-center text-sm text-gray-500 dark:text-gray-400">
<div className="text-muted-foreground py-2 text-center text-sm">
{t('settings.sources.noResults')}
</div>
) : (
@@ -641,9 +642,9 @@ const ConnectorTree: React.FC<ConnectorTreeProps> = ({
key={index}
onClick={() => handleSearchSelect(result)}
title={result.path}
className={`flex min-w-0 cursor-pointer items-center px-3 py-2 hover:bg-muted dark:hover:bg-muted ${
className={`hover:bg-muted dark:hover:bg-muted flex min-w-0 cursor-pointer items-center px-3 py-2 ${
index !== searchResults.length - 1
? 'border-b border-border dark:border-border'
? 'border-border dark:border-border border-b'
: ''
}`}
>
@@ -654,7 +655,7 @@ const ConnectorTree: React.FC<ConnectorTreeProps> = ({
? t('settings.sources.fileAlt')
: t('settings.sources.folderAlt')
}
className="mr-2 h-4 w-4 flex-shrink-0"
className="mr-2 h-4 w-4 shrink-0"
/>
<span className="flex-1 truncate text-sm">
{result.name}
+1 -1
View File
@@ -1620,7 +1620,7 @@ export default function MessageInput({
className={`xs:px-3 xs:py-1.5 dark:border-purple-taupe flex items-center rounded-[32px] border px-2 py-1 transition-colors ${
recordingState === 'recording'
? 'border-[#B42318] bg-[#FEE4E2] text-[#B42318] dark:bg-[#4A2323]'
: 'border-[#AAAAAA] hover:bg-gray-100 dark:hover:bg-[#2C2E3C]'
: 'border-border hover:bg-gray-100 dark:hover:bg-accent'
} ${
loading || recordingState === 'transcribing'
? 'cursor-not-allowed opacity-60'
@@ -458,7 +458,7 @@ const ConversationBubble = forwardRef<
<div
className={`fade-in-bubble bg-answer-bubble mr-5 flex max-w-full rounded-[18px] px-6 py-4.5 ${
type === 'ERROR'
? 'text-destructive/80 dark:border-destructive relative flex-row items-center rounded-full border border-transparent bg-[#FFE7E7] p-2 py-5 text-sm font-normal dark:text-white'
? 'text-destructive/80 dark:border-destructive relative flex-row items-center rounded-full border border-transparent bg-[#FFE7E7] p-2 py-5 text-sm font-normal dark:bg-destructive/15 dark:text-white'
: 'flex-col rounded-3xl'
}`}
>
+1 -1
View File
@@ -59,7 +59,7 @@ export default function AddActionModal({
/>
<p
className={`mt-2 ml-1 text-xs italic ${
functionNameError ? 'text-red-500' : 'text-gray-500'
functionNameError ? 'text-red-500' : 'text-muted-foreground'
}`}
>
{functionNameError
+1 -1
View File
@@ -215,7 +215,7 @@ export default function ImportSpecModal({
{parsedResult.metadata.description}
</p>
)}
<p className="mt-2 text-xs text-gray-500">
<p className="mt-2 text-xs text-muted-foreground">
{t('modals.importSpec.version')}:{' '}
{parsedResult.metadata.version}
</p>
+5 -5
View File
@@ -188,10 +188,10 @@ export default function MoveToFolderModal({
</span>
))}
</div>
<div className="max-h-60 min-h-[200px] overflow-y-auto border-t border-gray-200">
<div className="max-h-60 min-h-[200px] overflow-y-auto border-t border-gray-200 dark:border-border">
{isLoading ? (
<div className="flex h-[200px] items-center justify-center">
<span className="text-[14px] text-gray-500">
<span className="text-[14px] text-muted-foreground">
{t('loading')}...
</span>
</div>
@@ -204,7 +204,7 @@ export default function MoveToFolderModal({
e.stopPropagation();
setSelectedFolderId(null);
}}
className={`flex w-full items-center gap-2 border-b border-gray-200 px-8 py-2 text-left text-[14px] ${
className={`flex w-full items-center gap-2 border-b border-gray-200 dark:border-border px-8 py-2 text-left text-[14px] ${
selectedFolderId === null
? 'bg-[#7D54D1] text-white'
: 'bg-muted hover:bg-accent dark:bg-muted'
@@ -226,7 +226,7 @@ export default function MoveToFolderModal({
<button
key={folder.id}
onClick={() => setSelectedFolderId(folder.id)}
className={`flex w-full cursor-pointer items-center justify-between border-b border-gray-200 px-8 py-2 text-left text-[14px] ${
className={`flex w-full cursor-pointer items-center justify-between border-b border-gray-200 dark:border-border px-8 py-2 text-left text-[14px] ${
selectedFolderId === folder.id
? 'bg-[#7D54D1] text-white'
: 'bg-muted hover:bg-accent dark:bg-muted'
@@ -286,7 +286,7 @@ export default function MoveToFolderModal({
)}
</div>
<div className="flex items-center justify-between border-t border-gray-200 px-8 py-4">
<div className="flex items-center justify-between border-t border-gray-200 dark:border-border px-8 py-4">
{isCreatingFolder ? (
<input
ref={newFolderInputRef}
+2 -2
View File
@@ -278,7 +278,7 @@ function AddPrompt({
<span className="font-bold">
{t('modals.prompts.variablesLabel')}
</span>
<span className="text-xs text-[10px] font-medium text-gray-500">
<span className="text-xs text-[10px] font-medium text-muted-foreground">
{t('modals.prompts.variablesDescription')}
</span>
</p>
@@ -485,7 +485,7 @@ function EditPrompt({
<span className="font-bold">
{t('modals.prompts.variablesLabel')}
</span>
<span className="text-xs text-[10px] font-medium text-gray-500">
<span className="text-xs text-[10px] font-medium text-muted-foreground">
{t('modals.prompts.variablesDescription')}
</span>
</p>
+2 -2
View File
@@ -119,7 +119,7 @@ function LogsTable({ logs, setPage, loading, tableHeader }: LogsTableProps) {
return (
<div className="logs-table border-border h-[55vh] w-full overflow-hidden rounded-xl border bg-card dark:bg-black">
<div className="flex h-8 flex-col items-start justify-center bg-black/10 dark:bg-white/5">
<p className="dark:text-gray-6000 px-3 text-xs">
<p className="px-3 text-xs text-muted-foreground">
{tableHeader ? tableHeader : t('settings.logs.tableHeader')}
</p>
</div>
@@ -171,7 +171,7 @@ function Log({
<div className="group dark:hover:bg-accent w-full rounded-xl bg-transparent hover:bg-muted">
<div
onClick={() => onToggle(log.id)}
className={`flex cursor-pointer flex-row items-start gap-2 p-2 px-4 py-3 text-gray-900 ${
className={`flex cursor-pointer flex-row items-start gap-2 p-2 px-4 py-3 text-foreground ${
isOpen ? 'rounded-t-xl bg-[#F1F1F1] dark:bg-background' : ''
}`}
>
+3 -3
View File
@@ -203,14 +203,14 @@ function Upload({
{files.map((file) => (
<p
key={file.name}
className="text-gray-6000 truncate overflow-hidden text-ellipsis dark:text-foreground"
className="truncate overflow-hidden text-ellipsis text-muted-foreground"
title={file.name}
>
{file.name}
</p>
))}
{files.length === 0 && (
<p className="text-gray-6000 dark:text-foreground text-[14px]">
<p className="text-muted-foreground text-[14px]">
{t('modals.uploadDoc.noFilesSelected')}
</p>
)}
@@ -913,7 +913,7 @@ function Upload({
disabled={isUploadDisabled()}
className={`rounded-3xl px-4 py-2 text-[14px] font-medium ${
isUploadDisabled()
? 'cursor-not-allowed bg-gray-300 text-gray-500'
? 'cursor-not-allowed bg-gray-300 text-gray-500 dark:bg-muted dark:text-muted-foreground'
: 'bg-primary hover:bg-primary/90 cursor-pointer text-white'
}`}
>