fix: hide language icon while opening language menu

binary-com · Apr 13, 2023 · 228311e · 228311e
1 parent df0c7fc
commit 228311e
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 12 deletions.
diff --git a/packages/core/src/App/Components/Layout/Header/toggle-menu-drawer.jsx b/packages/core/src/App/Components/Layout/Header/toggle-menu-drawer.jsx
@@ -432,16 +432,20 @@ const ToggleMenuDrawer = observer(({ platform_config }) => {
                         }
                     }}
                 >
-                    <Icon
-                        icon={`IcFlag${current_language.replace('_', '-')}`}
-                        data_testid='dt_icon'
-                        className='ic-settings-language__icon'
-                        type={current_language.replace(/(\s|_)/, '-').toLowerCase()}
-                        size={22}
-                    />
-                    <Text weight='bold' size='xxs'>
-                        <Localize i18n_default_text={current_language} />
-                    </Text>
+                    {!is_mobile_language_menu_open && (
+                        <React.Fragment>
+                            <Icon
+                                icon={`IcFlag${current_language.replace('_', '-')}`}
+                                data_testid='dt_icon'
+                                className='ic-settings-language__icon'
+                                type={current_language.replace(/(\s|_)/, '-').toLowerCase()}
+                                size={22}
+                            />
+                            <Text weight='bold' size='xxs'>
+                                <Localize i18n_default_text={current_language} />
+                            </Text>
+                        </React.Fragment>
+                    )}
                 </div>
             </React.Fragment>
         ),

diff --git a/packages/core/src/sass/app/_common/components/settings-language.scss b/packages/core/src/sass/app/_common/components/settings-language.scss
@@ -20,8 +20,9 @@
         @include mobile {
             grid-template-columns: repeat(2, minmax(40%, 1fr));
             grid-template-rows: auto;
-            margin: 1.4rem auto 0;
-            padding: 0 1.6rem;
+            grid-gap: initial;
+            margin: 0 auto;
+            padding: 0 0.8rem;
 
             @include mobile {
                 &--disabled {