From 1e09a7500bb9723b76a7a589559380be8d266cfb Mon Sep 17 00:00:00 2001
From: leutinatasya <leutinatasya@yandex-team.ru>
Date: Fri, 6 Oct 2023 12:30:24 +0300
Subject: [PATCH] fix(Settings): not-found state styles for mobile

---
 src/components/Settings/Settings.scss         |  7 ++++++
 src/components/Settings/Settings.tsx          |  2 +-
 .../__stories__/SettingsMobileDemo.scss       |  6 +++++
 .../__stories__/SettingsMobileDemo.tsx        | 23 +++++++++++--------
 4 files changed, 28 insertions(+), 10 deletions(-)

diff --git a/src/components/Settings/Settings.scss b/src/components/Settings/Settings.scss
index ed830a3b..5e434b79 100644
--- a/src/components/Settings/Settings.scss
+++ b/src/components/Settings/Settings.scss
@@ -103,6 +103,13 @@ $block: '.#{variables.$ns}settings';
                 width: 100%;
             }
         }
+
+        #{$block}__not-found {
+            @include text-body-2;
+            justify-items: start;
+            color: var(--g-color-text-hint);
+            margin: 20px 0 0 20px;
+        }
     }
 
     &_loading {
diff --git a/src/components/Settings/Settings.tsx b/src/components/Settings/Settings.tsx
index 7cf4dea9..90487f87 100644
--- a/src/components/Settings/Settings.tsx
+++ b/src/components/Settings/Settings.tsx
@@ -234,7 +234,7 @@ function SettingsContent({
                         initialValue={initialSearch}
                         onChange={setSearch}
                         autoFocus={false}
-                        inputSize={'l'}
+                        inputSize={'xl'}
                     />
                     <SettingsMenuMobile
                         items={menu}
diff --git a/src/components/Settings/__stories__/SettingsMobileDemo.scss b/src/components/Settings/__stories__/SettingsMobileDemo.scss
index fca9165a..a568b1ab 100644
--- a/src/components/Settings/__stories__/SettingsMobileDemo.scss
+++ b/src/components/Settings/__stories__/SettingsMobileDemo.scss
@@ -1,7 +1,13 @@
+@import '../../../../styles/mixins';
+
 .settings-mobile-demo {
     height: 100%;
 
     &__select {
         border-radius: 10px;
     }
+
+    &__appearance-header {
+        @include text-body-2;
+    }
 }
diff --git a/src/components/Settings/__stories__/SettingsMobileDemo.tsx b/src/components/Settings/__stories__/SettingsMobileDemo.tsx
index 47e6f5fb..fb43f2e0 100644
--- a/src/components/Settings/__stories__/SettingsMobileDemo.tsx
+++ b/src/components/Settings/__stories__/SettingsMobileDemo.tsx
@@ -12,22 +12,22 @@ const b = cn('settings-mobile-demo');
 const SELECT_1_ITEMS = [
     {
         value: 'light',
-        title: 'Light',
+        content: 'Light',
         key: 'select_1_elem_1',
     },
     {
         value: 'dark',
-        title: 'Dark',
+        content: 'Dark',
         key: 'select_1_elem_2',
     },
     {
         value: 'special',
-        title: 'Special',
+        content: 'Special',
         key: 'select_1_elem_3',
     },
     {
         value: 'general',
-        title: 'Inherit from General',
+        content: 'Inherit from General',
         key: 'select_1_elem_4',
     },
 ];
@@ -145,7 +145,11 @@ export const SettingsMobileComponent = React.memo(
                     <Settings.Page id="appearance" title="Appearance">
                         <Settings.Section
                             title="Appearance"
-                            header={<div>These settings affect the appearance </div>}
+                            header={
+                                <div className={b('appearance-header')}>
+                                    These settings affect the appearance
+                                </div>
+                            }
                             showTitle={false}
                         >
                             <Settings.Item
@@ -157,19 +161,20 @@ export const SettingsMobileComponent = React.memo(
                                 )}
                             >
                                 <Select
-                                    value={settings.arcanumTheme ?? 'light'}
-                                    size="l"
+                                    value={[settings.arcanumTheme] ?? ['light']}
+                                    size="xl"
                                     onUpdate={(value) => {
-                                        handleChange('arcanumTheme', value);
+                                        handleChange('arcanumTheme', value[0]);
                                     }}
                                     options={SELECT_1_ITEMS}
                                     placeholder={'Select value...'}
                                     className={b('select')}
+                                    width="max"
                                 />
                             </Settings.Item>
                             <Settings.Item title="Code theme">
                                 <RadioButton
-                                    value={settings.codeTheme ?? 'light'}
+                                    value={settings.codeTheme ?? 'default'}
                                     onChange={(event) => {
                                         handleChange('codeTheme', event.target.value);
                                     }}