Skip to content

Commit

Permalink
πŸ“± style: Settings UI Enhancements for Mobile (#1721)
Browse files Browse the repository at this point in the history 
* Fix the interface for the mobile version.

* Make uniform margins for buttons.
  • Loading branch information
@machinsoft
machinsoft authored Feb 4, 2024
1 parent d25ff76 commit e7f6b22
Show file tree
Hide file tree
Showing 2 changed files with 12 additions and 9 deletions.
18 changes: 9 additions & 9 deletions client/src/components/Nav/Settings.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
Expand Down Expand Up @@ -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
? ''
Expand All @@ -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
? ''
Expand All @@ -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
? ''
Expand All @@ -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
? ''
Expand Down
3 changes: 3 additions & 0 deletions client/src/localization/languages/Ru.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand All @@ -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: 'Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ профиля',
Expand All @@ -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: 'Π£ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠ΅ Π΄Π°Π½Π½Ρ‹ΠΌΠΈ',
};

0 comments on commit e7f6b22

Please sign in to comment.