📱 style: Settings UI Enhancements for Mobile (#1721)

* Fix the interface for the mobile version.

* Make uniform margins for buttons.
This commit is contained in:
MACHINSOFT 2024-02-04 16:44:09 +03:00 committed by GitHub
parent d25ff7632a
commit e7f6b22b5d
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 12 additions and 9 deletions

View file

@ -8,7 +8,7 @@ import { useMediaQuery, useLocalize } from '~/hooks';
import { cn } from '~/utils';
export default function Settings({ open, onOpenChange }: TDialogProps) {
const isSmallScreen = useMediaQuery('(max-width: 768px)');
const isSmallScreen = useMediaQuery('(max-width: 767px)');
const localize = useLocalize();
return (
@ -47,9 +47,9 @@ 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-white radix-state-active:text-black dark:text-white dark:radix-state-active:bg-gray-800',
'group m-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'
? 'flex-col 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
? ''
@ -62,9 +62,9 @@ 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-white radix-state-active:text-black dark:text-white dark:radix-state-active:bg-gray-800',
'group m-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'
? 'flex-col 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
? ''
@ -77,9 +77,9 @@ 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-white radix-state-active:text-black dark:text-white dark:radix-state-active:bg-gray-800',
'group m-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'
? 'flex-col 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
? ''
@ -92,9 +92,9 @@ 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-white radix-state-active:text-black dark:text-white dark:radix-state-active:bg-gray-800',
'group m-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'
? 'flex-col 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
? ''

View file

@ -268,6 +268,7 @@ export default {
com_nav_welcome_message: 'Чем я могу помочь вам сегодня?',
com_nav_auto_scroll: 'Автоматически проматывать к самым новым сообщениям при открытии',
com_nav_modular_chat: 'Разрешить менять точки подключения в середине разговора',
com_nav_latex_parsing: 'Обработка LaTeX в сообщениях (может повлиять на производительность)',
com_nav_plugin_store: 'Магазин плагинов',
com_nav_plugin_search: 'Поиск плагинов',
com_nav_plugin_auth_error:
@ -286,6 +287,7 @@ export default {
com_nav_theme_system: 'Системная',
com_nav_theme_dark: 'Темная',
com_nav_theme_light: 'Светлая',
com_nav_user_name_display: 'Отображать имя пользователя в сообщениях',
com_nav_language: 'Локализация',
com_nav_setting_account: 'Аккаунт',
com_nav_profile_picture: 'Изображение профиля',
@ -306,5 +308,6 @@ export default {
com_nav_settings: 'Настройки',
com_nav_search_placeholder: 'Поиск сообщений',
com_nav_setting_general: 'Общие',
com_nav_setting_beta: 'Бета-функции',
com_nav_setting_data: 'Управление данными',
};