Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2026-01-06 10:38:50 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

🎨 style: UI Style Enhancements and Refactor for Improved Consistency and Layout (#4471)

Browse source 
* 🎨 style: adjust padding and class names in UI components

* 🎨 style: update ExportModal export button, update Export button hover style, refactor ChatForm style and fixed isRTL styles, update AttachFile position

* 🎨 style: remove redundant border classes in SettingsTabs components for cleaner UI

* 🎨 style: refactor Account component, extract DisplayUsernameMessages, and remove redundant border classes for cleaner layout

* 🎨 style: conditionally render Dropdown in ForkSettings component for improved UI responsiveness

* 🎨 style: replace DropdownNoState with Dropdown in voice selection components for consistency

* 🎨 style: update Settings component layout for better responsivenes on large screens

* 🎨 style: remove redundant margin-top classes for cleaner layout in various components
This commit is contained in:
Marco Beretta 2024-10-20 17:29:47 +02:00 • committed by GitHub
parent ecf5699513
commit 4d4a6b53f1
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
30 changed files with 118 additions and 145 deletions
Download patch file Download diff file Expand all files Collapse all files

2
client/src/components/Chat/ExportAndShareMenu.tsx
View file

@ -70,7 +70,7 @@ export default function ExportAndShareMenu({
<Ariakit.MenuButton
id="export-menu-button"
aria-label="Export options"
className="mr-4 inline-flex h-10 w-10 items-center justify-center rounded-md border border-border-light bg-transparent p-0 text-sm font-medium transition-all duration-300 ease-in-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
className="inline-flex size-10 items-center justify-center rounded-lg border border-border-light bg-transparent text-text-primary transition-all ease-in-out hover:bg-surface-tertiary disabled:pointer-events-none disabled:opacity-50 radix-state-open:bg-surface-tertiary"
>
<Upload className="icon-md dark:text-gray-300" aria-hidden="true" focusable="false" />
</Ariakit.MenuButton>

18
client/src/components/Chat/Input/ChatForm.tsx
View file

@ -131,6 +131,14 @@ const ChatForm = ({ index = 0 }) => {
const endpointSupportsFiles: boolean = supportsFiles[endpointType ?? endpoint ?? ''] ?? false;
const isUploadDisabled: boolean = endpointFileConfig?.disabled ?? false;
const baseClasses =
'md:py-3.5 m-0 w-full resize-none bg-surface-tertiary py-[13px] placeholder-black/50 dark:placeholder-white/50 [&:has(textarea:focus)]:shadow-[0_2px_6px_rgba(0,0,0,.05)] max-h-[65vh] md:max-h-[75vh]';
const uploadActive = endpointSupportsFiles && !isUploadDisabled;
const speechClass = isRTL
? `pr-${uploadActive ? '12' : '4'} pl-12`
: `pl-${uploadActive ? '12' : '4'} pr-12`;
return (
<form
onSubmit={methods.handleSubmit((data) => submitMessage(data))}
@ -177,15 +185,7 @@ const ChatForm = ({ index = 0 }) => {
data-testid="text-input"
style={{ height: 44, overflowY: 'auto' }}
rows={1}
className={cn(
endpointSupportsFiles && !isUploadDisabled
? 'pl-10 md:pl-[55px]'
: 'pl-3 md:pl-4',
'md:py-3.5- m-0 w-full resize-none bg-surface-tertiary py-[13px] placeholder-black/50 dark:placeholder-white/50 [&:has(textarea:focus)]:shadow-[0_2px_6px_rgba(0,0,0,.05)]',
SpeechToText && !isRTL ? 'pr-20 md:pr-[85px]' : 'pr-10 md:pr-12',
'max-h-[65vh] md:max-h-[75vh]',
removeFocusRings,
)}
className={cn(baseClasses, speechClass, removeFocusRings)}
/>
)}
</FileFormWrapper>

2
client/src/components/Chat/Input/Files/AttachFile.tsx
View file

@ -24,7 +24,7 @@ const AttachFile = ({
disabled={isUploadDisabled}
className={cn(
'absolute flex size-[35px] items-center justify-center rounded-full p-1 transition-colors hover:bg-surface-hover',
isRTL ? 'bottom-2 right-2' : 'bottom-2 left-2',
isRTL ? 'bottom-2 right-2' : 'bottom-2 left-1 md:left-2',
)}
description={localize('com_sidepanel_attach_files')}
>

2
client/src/components/Chat/Input/StopButton.tsx
View file

@ -12,7 +12,7 @@ export default function StopButton({ stop, setShowStopButton }) {
<button
type="button"
className={cn(
'rounded-full bg-text-primary p-1.5 text-text-primary outline-offset-4 transition-all duration-200 disabled:cursor-not-allowed disabled:text-text-secondary disabled:opacity-10',
'rounded-full bg-text-primary p-2 text-text-primary outline-offset-4 transition-all duration-200 disabled:cursor-not-allowed disabled:text-text-secondary disabled:opacity-10',
)}
aria-label={localize('com_nav_stop_generating')}
onClick={(e) => {