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

36
client/src/components/Nav/SettingsTabs/Account/Account.tsx
View file

@ -1,43 +1,19 @@
import React from 'react';
import { useRecoilState } from 'recoil';
import HoverCardSettings from '../HoverCardSettings';
import DisplayUsernameMessages from './DisplayUsernameMessages';
import DeleteAccount from './DeleteAccount';
import { Switch } from '~/components/ui';
import { useLocalize } from '~/hooks';
import Avatar from './Avatar';
import store from '~/store';
function Account({ onCheckedChange }: { onCheckedChange?: (value: boolean) => void }) {
const [UsernameDisplay, setUsernameDisplay] = useRecoilState<boolean>(store.UsernameDisplay);
const localize = useLocalize();
const handleCheckedChange = (value: boolean) => {
setUsernameDisplay(value);
if (onCheckedChange) {
onCheckedChange(value);
}
};
function Account() {
return (
<div className="flex flex-col gap-3 p-1 text-sm text-text-primary">
<div className="border-b border-border-medium pb-3 last-of-type:border-b-0">
<div className="pb-3">
<Avatar />
</div>
<div className="border-b border-border-medium pb-3 last-of-type:border-b-0">
<div className="pb-3">
<DeleteAccount />
</div>
<div className="flex items-center justify-between">
<div className="flex items-center space-x-2">
<div>{localize('com_nav_user_name_display')}</div>
<HoverCardSettings side="bottom" text="com_nav_info_user_name_display" />
</div>
<Switch
id="UsernameDisplay"
checked={UsernameDisplay}
onCheckedChange={handleCheckedChange}
className="ml-4 mt-2"
data-testid="UsernameDisplay"
/>
<div className="pb-3">
<DisplayUsernameMessages />
</div>
</div>
);