github/AutoGPT
1
1
Fork 0
mirror of https://github.com/Significant-Gravitas/AutoGPT.git synced 2026-04-08 03:00:28 -04:00
Code Issues Packages Projects Releases Wiki Activity

Blocks control dark mode

Browse Source
This commit is contained in:
SwiftyOS
2024-11-28 14:16:47 +01:00
parent 86a10858bd
commit 52d19d084c
1 changed files with 12 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
autogpt_platform/frontend/src/components/edit/control/BlocksControl.tsx
View File

@@ -118,6 +118,7 @@ export const BlocksControl: React.FC<BlocksControlProps> = ({
variant="ghost"
size="icon"
data-id="blocks-control-popover-trigger"
className="dark:hover:bg-slate-800 dark:bg-slate-900 dark:text-slate-100"
>
<IconToyBrick />
</Button>
@@ -132,26 +133,26 @@ export const BlocksControl: React.FC<BlocksControlProps> = ({
className="absolute -top-3 w-[17rem] rounded-xl border-none p-0 shadow-none md:w-[30rem]"
data-id="blocks-control-popover-content"
>
<Card className="p-3 pb-0">
<Card className="p-3 pb-0 dark:bg-slate-900">
<CardHeader className="flex flex-col gap-x-8 gap-y-1 p-3 px-2">
<div className="items-center justify-between">
<Label
htmlFor="search-blocks"
className="whitespace-nowrap text-base font-bold text-black 2xl:text-xl"
className="whitespace-nowrap text-base font-bold text-black dark:text-white 2xl:text-xl"
data-id="blocks-control-label"
>
Blocks
</Label>
</div>
<div className="relative flex items-center">
<MagnifyingGlassIcon className="absolute m-2 h-5 w-5 text-gray-500" />
<MagnifyingGlassIcon className="absolute m-2 h-5 w-5 text-gray-500 dark:text-gray-400" />
<Input
id="search-blocks"
type="text"
placeholder="Search blocks"
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
className="rounded-lg px-8 py-5"
className="rounded-lg px-8 py-5 dark:bg-slate-800 dark:text-white"
data-id="blocks-control-search-input"
/>
</div>
@@ -165,7 +166,7 @@ export const BlocksControl: React.FC<BlocksControlProps> = ({
return (
<div
key={category}
className={`cursor-pointer rounded-xl border px-2 py-2 text-xs font-medium ${colorClass}`}
className={`cursor-pointer rounded-xl border px-2 py-2 text-xs font-medium dark:border-slate-700 dark:text-white ${colorClass}`}
onClick={() =>
setSelectedCategory(
selectedCategory === category ? null : category,
@@ -178,15 +179,15 @@ export const BlocksControl: React.FC<BlocksControlProps> = ({
})}
</div>
</CardHeader>
<CardContent className="overflow-scroll border-t p-0">
<CardContent className="overflow-scroll border-t border-t-gray-200 dark:border-t-slate-700 p-0">
<ScrollArea
className="h-[60vh] w-fit w-full"
className="h-[60vh] w-fit"
data-id="blocks-control-scroll-area"
>
{getFilteredBlockList().map((block) => (
<Card
key={block.uiKey || block.id}
className="m-2 my-4 flex h-20 cursor-pointer shadow-none hover:shadow-lg"
className="m-2 my-4 flex h-20 cursor-pointer shadow-none hover:shadow-lg dark:bg-slate-800 dark:hover:bg-slate-700 dark:text-slate-100 dark:border-slate-700"
data-id={`block-card-${block.id}`}
onClick={() =>
addBlock(block.id, block.name, block?.hardcodedValues || {})
@@ -199,12 +200,12 @@ export const BlocksControl: React.FC<BlocksControlProps> = ({
<div className="mx-3 flex flex-1 items-center justify-between">
<div className="mr-2 min-w-0">
<span
className="block truncate pb-1 text-sm font-semibold"
className="block truncate pb-1 text-sm font-semibold dark:text-white"
data-id={`block-name-${block.id}`}
>
{beautifyString(block.name).replace(/ Block$/, "")}
</span>
<span className="block break-words text-xs font-normal text-gray-500">
<span className="block break-words text-xs font-normal text-gray-500 dark:text-gray-400">
{/* Cap description at 100 characters max */}
{block.description?.length > 100
? block.description.slice(0, 100) + "..."
@@ -215,7 +216,7 @@ export const BlocksControl: React.FC<BlocksControlProps> = ({
className="flex flex-shrink-0 items-center gap-1"
data-id={`block-tooltip-${block.id}`}
>
<PlusIcon className="h-6 w-6 rounded-lg bg-gray-200 stroke-black stroke-[0.5px] p-1" />
<PlusIcon className="h-6 w-6 rounded-lg bg-gray-200 stroke-black stroke-[0.5px] p-1 dark:bg-gray-700 dark:stroke-white" />
</div>
</div>
</Card>