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

🖌️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

26
client/src/components/Messages/ScrollToBottom.tsx
View file

@ -1,3 +1,5 @@
import React from "react";
type Props = {
scrollHandler: React.MouseEventHandler<HTMLButtonElement>;
};
@ -6,22 +8,22 @@ export default function ScrollToBottom({ scrollHandler }: Props) {
return (
<button
onClick={scrollHandler}
className="absolute bottom-2 right-6 z-10 cursor-pointer rounded-full border border-gray-200 bg-gray-50 text-gray-600 dark:border-white/10 dark:bg-white/10 dark:text-gray-200"
className="cursor-pointer absolute rounded-full border border-white bg-gray-50 text-gray-600 dark:border-white/10 dark:bg-white/10 bottom-5 right-1/2 dark:text-gray-200"
>
<svg
stroke="currentColor"
fill="none"
strokeWidth="2"
width="24"
height="24"
viewBox="0 0 24 24"
strokeLinecap="round"
strokeLinejoin="round"
className="m-1 h-4 w-4"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
fill="none"
className="m-1 text-black dark:text-white"
>
<line x1="12" y1="5" x2="12" y2="19" />
<polyline points="19 12 12 19 5 12" />
<path
d="M17 13L12 18L7 13M12 6L12 17"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
></path>
</svg>
</button>
);

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}
>