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

🎨 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

43
client/src/components/Nav/SettingsTabs/General/General.tsx
View file

@ -1,14 +1,12 @@
import { useRecoilState } from 'recoil';
import Cookies from 'js-cookie';
import React, { useContext, useCallback } from 'react';
import type { TDangerButtonProps } from '~/common';
import UserMsgMarkdownSwitch from './UserMsgMarkdownSwitch';
import HideSidePanelSwitch from './HideSidePanelSwitch';
import { ThemeContext, useLocalize } from '~/hooks';
import AutoScrollSwitch from './AutoScrollSwitch';
import ArchivedChats from './ArchivedChats';
import { Dropdown } from '~/components/ui';
import DangerButton from '../DangerButton';
import store from '~/store';
export const ThemeSelector = ({
@ -41,34 +39,6 @@ export const ThemeSelector = ({
);
};
export const ClearChatsButton = ({
confirmClear,
className = '',
showText = true,
mutation,
onClick,
}: Pick<
TDangerButtonProps,
'confirmClear' | 'mutation' | 'className' | 'showText' | 'onClick'
>) => {
return (
<DangerButton
id="clearConvosBtn"
mutation={mutation}
confirmClear={confirmClear}
className={className}
showText={showText}
infoTextCode="com_nav_clear_all_chats"
actionTextCode="com_ui_clear"
confirmActionTextCode="com_nav_confirm_clear"
dataTestIdInitial="clear-convos-initial"
dataTestIdConfirm="clear-convos-confirm"
infoDescriptionCode="com_nav_info_clear_all_chats"
onClick={onClick}
/>
);
};
export const LangSelector = ({
langcode,
onChange,
@ -78,7 +48,6 @@ export const LangSelector = ({
}) => {
const localize = useLocalize();
// Create an array of options for the Dropdown
const languageOptions = [
{ value: 'auto', label: localize('com_nav_lang_auto') },
{ value: 'en-US', label: localize('com_nav_lang_english') },
@ -147,22 +116,22 @@ function General() {
return (
<div className="flex flex-col gap-3 p-1 text-sm text-text-primary">
<div className="border-b border-border-light pb-3 last-of-type:border-b-0">
<div className="pb-3">
<ThemeSelector theme={theme} onChange={changeTheme} />
</div>
<div className="border-b border-border-light pb-3 last-of-type:border-b-0">
<div className="pb-3">
<LangSelector langcode={langcode} onChange={changeLang} />
</div>
<div className="border-b border-border-light pb-3 last-of-type:border-b-0">
<div className="pb-3">
<UserMsgMarkdownSwitch />
</div>
<div className="border-b border-border-light pb-3 last-of-type:border-b-0">
<div className="pb-3">
<AutoScrollSwitch />
</div>
<div className="border-b border-border-light pb-3 last-of-type:border-b-0">
<div className="pb-3">
<HideSidePanelSwitch />
</div>
<div className="border-b border-border-light pb-3 last-of-type:border-b-0">
<div className="pb-3">
<ArchivedChats />
</div>
</div>