Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2025-12-23 11:50:14 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

🎨 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

16
client/src/components/Audio/Voices.tsx
View file

@ -3,6 +3,7 @@ import { useRecoilState } from 'recoil';
import type { Option } from '~/common';
import DropdownNoState from '~/components/ui/DropdownNoState';
import { useLocalize, useTTSBrowser, useTTSEdge, useTTSExternal } from '~/hooks';
import { Dropdown } from '~/components/ui';
import { logger } from '~/utils';
import store from '~/store';
@ -22,13 +23,12 @@ export function EdgeVoiceDropdown() {
return (
<div className="flex items-center justify-between">
<div>{localize('com_nav_voice_select')}</div>
<DropdownNoState
<Dropdown
key={`edge-voice-dropdown-${voices.length}`}
value={voice}
value={voice ?? ''}
options={voices}
onChange={handleVoiceChange}
sizeClasses="min-w-[200px] !max-w-[400px] [--anchor-max-width:400px]"
anchor="bottom start"
testId="EdgeVoiceDropdown"
/>
</div>
@ -51,13 +51,12 @@ export function BrowserVoiceDropdown() {
return (
<div className="flex items-center justify-between">
<div>{localize('com_nav_voice_select')}</div>
<DropdownNoState
<Dropdown
key={`browser-voice-dropdown-${voices.length}`}
value={voice}
value={voice ?? ''}
options={voices}
onChange={handleVoiceChange}
sizeClasses="min-w-[200px] !max-w-[400px] [--anchor-max-width:400px]"
anchor="bottom start"
testId="BrowserVoiceDropdown"
/>
</div>
@ -80,13 +79,12 @@ export function ExternalVoiceDropdown() {
return (
<div className="flex items-center justify-between">
<div>{localize('com_nav_voice_select')}</div>
<DropdownNoState
<Dropdown
key={`external-voice-dropdown-${voices.length}`}
value={voice}
value={voice ?? ''}
options={voices}
onChange={handleVoiceChange}
sizeClasses="min-w-[200px] !max-w-[400px] [--anchor-max-width:400px]"
anchor="bottom start"
testId="ExternalVoiceDropdown"
/>
</div>