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

fix(frontend): Add border on opened select input-button

Browse Source
This commit is contained in:
Zamil Majdy
2025-04-03 11:44:08 +04:00
parent 200e5814b3
commit ad303d69d1
2 changed files with 19 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
autogpt_platform/frontend/src/app/globals.css
View File

@@ -74,7 +74,7 @@
@layer components {
.agpt-border-input {
@apply m-0.5 border border-input focus-visible:border-gray-400 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-gray-400;
@apply m-0.5 border border-input focus:border-gray-400 focus:outline-none focus:ring-1 focus:ring-gray-400 data-[state=open]:border-gray-400 data-[state=open]:ring-1 data-[state=open]:ring-gray-400;
}
.agpt-shadow-input {

27
autogpt_platform/frontend/src/components/type-based-input.tsx
View File

@@ -73,7 +73,7 @@ export const TypeBasedInput: FC<
case DataType.LONG_TEXT:
innerInputElement = (
<Textarea
className="rounded-[12px] px-3 py-2"
className="rounded-xl px-3 py-2"
value={value ?? ""}
placeholder={placeholder || "Enter text"}
onChange={(e) => onChange(e.target.value)}
@@ -145,11 +145,14 @@ export const TypeBasedInput: FC<
innerInputElement = (
<Select value={value ?? ""} onValueChange={(val) => onChange(val)}>
<SelectTrigger
className={cn(inputClasses, "text-sm text-gray-500")}
className={cn(
inputClasses,
"agpt-border-input text-sm text-gray-500",
)}
>
<SelectValue placeholder={placeholder || "Select an option"} />
</SelectTrigger>
<SelectContent className="rounded-[12px] border">
<SelectContent className="rounded-xl">
{schema.enum
.filter((opt) => opt)
.map((opt) => (
@@ -198,7 +201,7 @@ export function DatePicker({
<Button
variant="outline"
className={cn(
"w-full justify-start font-normal",
"agpt-border-input w-full justify-start font-normal",
!value && "text-muted-foreground",
className,
)}
@@ -250,7 +253,9 @@ export function TimePicker({ value, onChange }: TimePickerProps) {
value={hour}
onValueChange={(val) => changeTime(val, minute, meridiem)}
>
<SelectTrigger className={cn("text-center", inputClasses)}>
<SelectTrigger
className={cn("agpt-border-input text-center", inputClasses)}
>
<SelectValue />
</SelectTrigger>
<SelectContent>
@@ -272,7 +277,9 @@ export function TimePicker({ value, onChange }: TimePickerProps) {
value={minute}
onValueChange={(val) => changeTime(hour, val, meridiem)}
>
<SelectTrigger className={cn("text-center", inputClasses)}>
<SelectTrigger
className={cn("agpt-border-input text-center", inputClasses)}
>
<SelectValue />
</SelectTrigger>
<SelectContent>
@@ -290,7 +297,9 @@ export function TimePicker({ value, onChange }: TimePickerProps) {
value={meridiem}
onValueChange={(val) => changeTime(hour, minute, val)}
>
<SelectTrigger className={cn("text-center", inputClasses)}>
<SelectTrigger
className={cn("agpt-border-input text-center", inputClasses)}
>
<SelectValue />
</SelectTrigger>
<SelectContent>
@@ -378,7 +387,7 @@ const FileInput: FC<FileInputProps> = ({
<div className={cn("w-full", className)}>
{value ? (
<div className="flex min-h-14 items-center gap-4">
<div className="agpt-border-input flex min-h-14 w-full items-center justify-between rounded-[12px] bg-zinc-50 p-4 text-sm text-gray-500">
<div className="agpt-border-input flex min-h-14 w-full items-center justify-between rounded-xl bg-zinc-50 p-4 text-sm text-gray-500">
<div className="flex items-center gap-2">
<FileTextIcon className="h-7 w-7 text-black" />
<div className="flex flex-col gap-0.5">
@@ -402,7 +411,7 @@ const FileInput: FC<FileInputProps> = ({
<div
onDrop={handleFileDrop}
onDragOver={(e) => e.preventDefault()}
className="agpt-border-input flex min-h-14 w-full items-center justify-center rounded-[12px] border-dashed bg-zinc-50 text-sm text-gray-500"
className="agpt-border-input flex min-h-14 w-full items-center justify-center rounded-xl border-dashed bg-zinc-50 text-sm text-gray-500"
>
Choose a file or drag and drop it here
</div>