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

🖌️feat: ScrolltoBottom & Mobile Improvements; Translation Update (#1651)

Browse source 
* 🖌️feat: Scrolltobottom Style

* 🖌️feat: ScrolltoBottom Style

* 📱Settings tab now centered on mobile / selection bug fixed 🐞, 🌍 Updated Translation

* 🛠️fix: Adjust the width of the settings dialog and address the issue of not seeing selection on the desktop.

* 🎨 Update settings tabs background color for dark mode.
Adjusts background color dynamically based on screen size.

* 🛠️fix: Reverted changes in ScrolltoBottom file
This commit is contained in:
Raí Santos 2024-02-02 12:31:30 -03:00 • committed by GitHub
parent 5f6d431136
commit 296967eff0
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 52 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

37
client/src/components/Nav/Settings.tsx
View file

@ -15,7 +15,14 @@ export default function Settings({ open, onOpenChange }: TDialogProps) {
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent
className={cn('shadow-2xl dark:bg-gray-900 dark:text-white md:min-h-[373px] md:w-[680px]')}
style={{ borderRadius: '12px' }}
style={{
borderRadius: '12px',
position: 'fixed',
margin: 'auto',
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)',
}}
>
<DialogHeader>
<DialogTitle className="text-lg font-medium leading-6 text-gray-900 dark:text-gray-200">
@ -40,10 +47,13 @@ export default function Settings({ open, onOpenChange }: TDialogProps) {
>
<Tabs.Trigger
className={cn(
'group my-1 flex items-center justify-start gap-2 rounded-md px-2 py-1.5 text-sm text-black radix-state-active:bg-gray-100 radix-state-active:text-black dark:text-white dark:radix-state-active:bg-gray-800',
'group my-1 flex items-center justify-start gap-2 rounded-md px-2 py-1.5 text-sm text-black radix-state-active:bg-white radix-state-active:text-black dark:text-white dark:radix-state-active:bg-gray-800',
isSmallScreen
? 'flex-1 items-center justify-center text-sm dark:text-gray-500 dark:radix-state-active:text-white'
: '',
: 'bg-white radix-state-active:bg-gray-100',
isSmallScreen
? ''
: 'dark:bg-gray-900',
)}
value={SettingsTabValues.GENERAL}
>
@ -52,10 +62,13 @@ export default function Settings({ open, onOpenChange }: TDialogProps) {
</Tabs.Trigger>
<Tabs.Trigger
className={cn(
'group my-1 flex items-center justify-start gap-2 rounded-md px-2 py-1.5 text-sm text-black radix-state-active:bg-gray-100 radix-state-active:text-black dark:text-white dark:radix-state-active:bg-gray-800',
'group my-1 flex items-center justify-start gap-2 rounded-md px-2 py-1.5 text-sm text-black radix-state-active:bg-white radix-state-active:text-black dark:text-white dark:radix-state-active:bg-gray-800',
isSmallScreen
? 'flex-1 items-center justify-center text-sm dark:text-gray-500 dark:radix-state-active:text-white'
: '',
: 'bg-white radix-state-active:bg-gray-100',
isSmallScreen
? ''
: 'dark:bg-gray-900',
)}
value={SettingsTabValues.BETA}
>
@ -64,10 +77,13 @@ export default function Settings({ open, onOpenChange }: TDialogProps) {
</Tabs.Trigger>
<Tabs.Trigger
className={cn(
'group my-1 flex items-center justify-start gap-2 rounded-md px-2 py-1.5 text-sm text-black radix-state-active:bg-gray-100 radix-state-active:text-black dark:text-white dark:radix-state-active:bg-gray-800',
'group my-1 flex items-center justify-start gap-2 rounded-md px-2 py-1.5 text-sm text-black radix-state-active:bg-white radix-state-active:text-black dark:text-white dark:radix-state-active:bg-gray-800',
isSmallScreen
? 'flex-1 items-center justify-center text-sm dark:text-gray-500 dark:radix-state-active:text-white'
: '',
: 'bg-white radix-state-active:bg-gray-100',
isSmallScreen
? ''
: 'dark:bg-gray-900',
)}
value={SettingsTabValues.DATA}
>
@ -76,10 +92,13 @@ export default function Settings({ open, onOpenChange }: TDialogProps) {
</Tabs.Trigger>
<Tabs.Trigger
className={cn(
'group my-1 flex items-center justify-start gap-2 rounded-md px-2 py-1.5 text-sm text-black radix-state-active:bg-gray-100 radix-state-active:text-black dark:text-white dark:radix-state-active:bg-gray-800',
'group my-1 flex items-center justify-start gap-2 rounded-md px-2 py-1.5 text-sm text-black radix-state-active:bg-white radix-state-active:text-black dark:text-white dark:radix-state-active:bg-gray-800',
isSmallScreen
? 'flex-1 items-center justify-center text-sm dark:text-gray-500 dark:radix-state-active:text-white'
: '',
: 'bg-white radix-state-active:bg-gray-100',
isSmallScreen
? ''
: 'dark:bg-gray-900',
)}
value={SettingsTabValues.ACCOUNT}
>