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

🎨 style: Improve Styling (#3205)

Browse source 
* style: add scrollbar-gutter to prevent layout shift

* style: better styling for simple/advanced tab and remove border-r on smaller screens

* style: better description styling

* style: make sure single response Messages style is the same as pre-multi-stream response feature
This commit is contained in:
Danny Avila 2024-06-25 14:28:05 -04:00 • committed by GitHub
parent 156c52e293
commit 791b0139bc
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
9 changed files with 44 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

47
client/src/components/Prompts/AdvancedSwitch.tsx
View file

@ -1,7 +1,8 @@
import { useRecoilState, useSetRecoilState } from 'recoil';
import { Tabs, TabsList, TabsTrigger } from '~/components/ui';
import { useLocalize } from '~/hooks';
import { cn } from '~/utils';
import store from '~/store';
const { PromptsEditorMode, promptsEditorMode, alwaysMakeProd } = store;
const AdvancedSwitch = () => {
@ -10,29 +11,35 @@ const AdvancedSwitch = () => {
const setAlwaysMakeProd = useSetRecoilState(alwaysMakeProd);
return (
<Tabs
defaultValue={mode}
className="w-auto rounded-lg"
onValueChange={(value) => {
value === PromptsEditorMode.SIMPLE && setAlwaysMakeProd(true);
setMode(value);
}}
>
<TabsList className="grid w-auto grid-cols-2 bg-surface-tertiary">
<TabsTrigger
value={PromptsEditorMode.SIMPLE}
className="w-20 min-w-0 rounded-md text-xs md:w-auto md:text-sm"
<div className="inline-flex h-10 items-center justify-center rounded-lg border border-border-light bg-surface-primary p-0.5 text-sm font-medium transition-colors disabled:pointer-events-none disabled:opacity-50">
<div className="flex flex-row items-stretch gap-0 whitespace-nowrap">
<button
type="button"
className={`rounded-md px-3 py-1.5 text-sm font-medium transition-colors duration-200 ${
mode === PromptsEditorMode.SIMPLE
? 'bg-surface-tertiary text-text-primary'
: 'bg-transparent text-text-tertiary hover:text-text-secondary'
}`}
onClick={() => {
setAlwaysMakeProd(true);
setMode(PromptsEditorMode.SIMPLE);
}}
>
{localize('com_ui_simple')}
</TabsTrigger>
<TabsTrigger
value={PromptsEditorMode.ADVANCED}
className="w-20 min-w-0 rounded-md text-xs md:w-auto md:text-sm"
</button>
<button
type="button"
className={`rounded-md px-3 py-1.5 text-sm font-medium transition-colors duration-200 ${
mode === PromptsEditorMode.ADVANCED
? 'bg-surface-tertiary text-text-primary'
: 'bg-transparent text-text-tertiary hover:text-text-secondary'
}`}
onClick={() => setMode(PromptsEditorMode.ADVANCED)}
>
{localize('com_ui_advanced')}
</TabsTrigger>
</TabsList>
</Tabs>
</button>
</div>
</div>
);
};