mirror of
https://github.com/danny-avila/LibreChat.git
synced 2025-12-19 09:50:15 +01:00
style: update graphics (#1138)
* style: update new icon and NavLinks scale * style: new username update * refactor(Dropdown); style: general settings * style(Dropdown); adjust theme * style: dropdown and settings text * fix(Dropdown) system theme not working * style: topbar sticky; fix: general's menu settings transparent with light theme * fix(SubmitButton) stop generate button * fix: user_provided dialog for new dropdown * fix: TS error 'display' * fix(EditPresetDialog): for new dropdown * style: added green send button * converted textchat in tsx * style(SubmitButton): tooltip * test: fixed ThemeSelector and LangSelector * removed transition-opacity * fix all tests * removed empty cn call * chore: Update General.tsx to add Arabic option --------- Co-authored-by: Danny Avila <110412045+danny-avila@users.noreply.github.com>
This commit is contained in:
parent
8b28fdf240
commit
9ad47b6660
43 changed files with 442 additions and 318 deletions
|
|
@ -14,6 +14,7 @@ import type { TDangerButtonProps } from '~/common';
|
|||
import AutoScrollSwitch from './AutoScrollSwitch';
|
||||
import DangerButton from './DangerButton';
|
||||
import store from '~/store';
|
||||
import { Dropdown } from '~/components/ui';
|
||||
|
||||
export const ThemeSelector = ({
|
||||
theme,
|
||||
|
|
@ -24,18 +25,22 @@ export const ThemeSelector = ({
|
|||
}) => {
|
||||
const localize = useLocalize();
|
||||
|
||||
const themeOptions = [
|
||||
{ value: 'system', display: localize('com_nav_theme_system') },
|
||||
{ value: 'dark', display: localize('com_nav_theme_dark') },
|
||||
{ value: 'light', display: localize('com_nav_theme_light') },
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="flex items-center justify-between">
|
||||
<div>{localize('com_nav_theme')}</div>
|
||||
<select
|
||||
className="w-24 rounded border border-black/10 bg-transparent px-3 py-2 text-sm dark:border-white/20 dark:bg-gray-900"
|
||||
onChange={(e) => onChange(e.target.value)}
|
||||
<div> {localize('com_nav_theme')} </div>
|
||||
<Dropdown
|
||||
value={theme}
|
||||
>
|
||||
<option value="system">{localize('com_nav_theme_system')}</option>
|
||||
<option value="dark">{localize('com_nav_theme_dark')}</option>
|
||||
<option value="light">{localize('com_nav_theme_light')}</option>
|
||||
</select>
|
||||
onChange={onChange}
|
||||
options={themeOptions}
|
||||
width={150}
|
||||
testId="theme-selector"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
@ -76,32 +81,30 @@ export const LangSelector = ({
|
|||
}) => {
|
||||
const localize = useLocalize();
|
||||
|
||||
// Create an array of options for the Dropdown
|
||||
const languageOptions = [
|
||||
{ value: 'auto', display: localize('com_nav_lang_auto') },
|
||||
{ value: 'en-US', display: localize('com_nav_lang_english') },
|
||||
{ value: 'zh-CN', display: localize('com_nav_lang_chinese') },
|
||||
{ value: 'zh-TC', display: localize('com_nav_lang_traditionalchinese') },
|
||||
{ value: 'ar-EG', display: localize('com_nav_lang_arabic') },
|
||||
{ value: 'de-DE', display: localize('com_nav_lang_german') },
|
||||
{ value: 'es-ES', display: localize('com_nav_lang_spanish') },
|
||||
{ value: 'fr-FR', display: localize('com_nav_lang_french') },
|
||||
{ value: 'it-IT', display: localize('com_nav_lang_italian') },
|
||||
{ value: 'pl-PL', display: localize('com_nav_lang_polish') },
|
||||
{ value: 'pt-BR', display: localize('com_nav_lang_brazilian_portuguese') },
|
||||
{ value: 'ru-RU', display: localize('com_nav_lang_russian') },
|
||||
{ value: 'ja-JP', display: localize('com_nav_lang_japanese') },
|
||||
{ value: 'sv-SE', display: localize('com_nav_lang_swedish') },
|
||||
{ value: 'ko-KR', display: localize('com_nav_lang_korean') },
|
||||
{ value: 'vi-VN', display: localize('com_nav_lang_vietnamese') },
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="flex items-center justify-between">
|
||||
<div>{localize('com_nav_language')}</div>
|
||||
<select
|
||||
className="w-24 rounded border border-black/10 bg-transparent px-3 py-2 text-sm dark:border-white/20 dark:bg-gray-900"
|
||||
onChange={(e) => onChange(e.target.value)}
|
||||
value={langcode}
|
||||
>
|
||||
<option value="auto">{localize('com_nav_lang_auto')}</option>
|
||||
<option value="ar-EG">{localize('com_nav_lang_arabic')}</option>
|
||||
<option value="en-US">{localize('com_nav_lang_english')}</option>
|
||||
<option value="zh-CN">{localize('com_nav_lang_chinese')}</option>
|
||||
<option value="zh-TC">{localize('com_nav_lang_traditionalchinese')}</option>
|
||||
<option value="de-DE">{localize('com_nav_lang_german')}</option>
|
||||
<option value="es-ES">{localize('com_nav_lang_spanish')}</option>
|
||||
<option value="fr-FR">{localize('com_nav_lang_french')}</option>
|
||||
<option value="it-IT">{localize('com_nav_lang_italian')}</option>
|
||||
<option value="pl-PL">{localize('com_nav_lang_polish')}</option>
|
||||
<option value="pt-BR">{localize('com_nav_lang_brazilian_portuguese')}</option>
|
||||
<option value="ru-RU">{localize('com_nav_lang_russian')}</option>
|
||||
<option value="ja-JP">{localize('com_nav_lang_japanese')}</option>
|
||||
<option value="sv-SE">{localize('com_nav_lang_swedish')}</option>
|
||||
<option value="ko-KR">{localize('com_nav_lang_korean')}</option>
|
||||
<option value="vi-VN">{localize('com_nav_lang_vietnamese')}</option>
|
||||
<option value="tr-TR">{localize('com_nav_lang_turkish')}</option>
|
||||
</select>
|
||||
<div> {localize('com_nav_language')} </div>
|
||||
<Dropdown value={langcode} onChange={onChange} options={languageOptions} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue