Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2025-12-20 18:30:15 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

✨ style: Enhance Styling & Accessibility (#5956)

Browse source 
* ✨ feat: Enhance UI Components with Shadows and Accessibility Improvements

* 🔧 fix: Correct Category Labels and Values in API Model & Adjust Button Class in Prompt List
This commit is contained in:
Marco Beretta 2025-02-20 22:17:43 +01:00 • committed by GitHub
parent fdb3cf3f58
commit fe7013562b
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
9 changed files with 59 additions and 47 deletions
Download patch file Download diff file Expand all files Collapse all files

2
client/src/components/Prompts/Command.tsx
View file

@ -44,7 +44,7 @@ const Command = ({
}
return (
<div className="rounded-xl border border-border-light">
<div className="rounded-xl border border-border-light shadow-md">
<h3 className="flex h-10 items-center gap-1 pl-4 text-sm text-text-secondary">
<SquareSlash className="icon-sm" aria-hidden="true" />
<Input

2
client/src/components/Prompts/Description.tsx
View file

@ -41,7 +41,7 @@ const Description = ({
}
return (
<div className="rounded-xl border border-border-light">
<div className="rounded-xl border border-border-light shadow-md">
<h3 className="flex h-10 items-center gap-1 pl-4 text-sm text-text-secondary">
<Info className="icon-sm" aria-hidden="true" />
<Input

2
client/src/components/Prompts/Groups/List.tsx
View file

@ -32,7 +32,7 @@ export default function List({
<div className="flex w-full justify-end">
<Button
variant="outline"
className="w-full bg-transparent px-3"
className={`w-full bg-transparent ${isChatRoute ? '' : 'mx-2'}`}
onClick={() => navigate('/d/prompts/new')}
>
<Plus className="size-4" aria-hidden />

3
client/src/components/Prompts/PromptEditor.tsx
View file

@ -81,7 +81,7 @@ const PromptEditor: React.FC<Props> = ({ name, isEditing, setIsEditing }) => {
<div
role="button"
className={cn(
'w-full flex-1 overflow-auto rounded-b-xl border border-border-light p-2 transition-all duration-150 sm:p-4',
'w-full flex-1 overflow-auto rounded-b-xl border border-border-light p-2 shadow-md transition-all duration-150 sm:p-4',
{
'cursor-pointer bg-surface-primary hover:bg-surface-secondary active:bg-surface-tertiary':
!isEditing,
@ -105,6 +105,7 @@ const PromptEditor: React.FC<Props> = ({ name, isEditing, setIsEditing }) => {
isEditing ? (
<TextareaAutosize
{...field}
autoFocus
className="w-full resize-none overflow-y-auto rounded bg-transparent text-sm text-text-primary focus:outline-none sm:text-base"
minRows={3}
maxRows={14}

3
client/src/components/Prompts/PromptForm.tsx
View file

@ -237,7 +237,6 @@ const PromptForm = () => {
payload: { name: groupName, category: value },
})
}
className="w-full"
/>
<div className="mt-2 flex flex-row items-center justify-center gap-x-2 lg:mt-0">
{hasShareAccess && <SharePrompt group={group} disabled={isLoadingGroup} />}
@ -349,7 +348,7 @@ const PromptForm = () => {
{isLoadingPrompts ? (
<Skeleton className="h-96" aria-live="polite" />
) : (
<div className="flex h-full flex-col gap-4">
<div className="mb-2 flex h-full flex-col gap-4">
<PromptEditor name="prompt" isEditing={isEditing} setIsEditing={setIsEditing} />
<PromptVariables promptText={promptText} />
<Description

4
client/src/components/Prompts/PromptVariables.tsx
View file

@ -28,7 +28,7 @@ const PromptVariables = ({
}, [promptText]);
return (
<div className="rounded-xl border border-border-light bg-transparent p-4 shadow-md ">
<div className="rounded-xl border border-border-light bg-transparent p-4 shadow-md">
<h3 className="flex items-center gap-2 py-2 text-lg font-semibold text-text-primary">
<Variable className="icon-sm" aria-hidden="true" />
{localize('com_ui_variables')}
@ -71,7 +71,7 @@ const PromptVariables = ({
</span>
</div>
<div>
<span className="text-text-text-primary text-sm font-medium">
<span className="text-sm font-medium text-text-primary">
{localize('com_ui_dropdown_variables')}
</span>
<span className="text-sm text-text-secondary">