Mahdiyeh/fix: padding for language (#8117)

* fix: padding for language * redeploy: circleci * redeploy: vercel --------- Co-authored-by: Jim Daniels Wasswa <104334373+jim-deriv@users.noreply.github.com> Co-authored-by: Hamid <hamid@regentmarkets.com> Co-authored-by: Thisyahlen Nair <thisyahlen@regentmarkets.com> Co-authored-by: thisyahlen <104053934+thisyahlen-deriv@users.noreply.github.com>
binary-com · Jun 30, 2023 · 6cb9238 · 6cb9238
1 parent ca104aa
commit 6cb9238
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 5 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
@@ -390,9 +390,12 @@ const ToggleMenuDrawer = observer(({ platform_config }) => {
                 submenu_toggle_class='dc-mobile-drawer__submenu-toggle--hidden'
             >
                 <div
-                    className={classNames('settings-language__language-container', {
-                        'settings-language__language-container--disabled': is_language_changing,
-                    })}
+                    className={classNames(
+                        'settings-language__language-container settings-language__language-container--has-padding',
+                        {
+                            'settings-language__language-container--disabled': is_language_changing,
+                        }
+                    )}
                 >
                     {Object.keys(getAllowedLanguages()).map(lang => (
                         <LanguageLink

diff --git a/packages/core/src/App/Containers/SettingsModal/settings-language.jsx b/packages/core/src/App/Containers/SettingsModal/settings-language.jsx
@@ -12,7 +12,7 @@ const LanguageSettings = observer(() => {
 
     return (
         <div className='settings-language'>
-            <div className='settings-language__language-container'>
+            <div className='settings-language__language-container settings-language__language-container--has-padding'>
                 {Object.keys(getAllowedLanguages()).map(lang =>
                     isCurrentLanguage(lang, current_language) ? (
                         <LanguageLink key={lang} lang={lang} />

diff --git a/packages/core/src/sass/app/_common/components/settings-language.scss b/packages/core/src/sass/app/_common/components/settings-language.scss
@@ -9,11 +9,18 @@
         display: grid;
         grid-template-columns: repeat(4, minmax(90px, 1fr));
         grid-gap: 1.6rem;
-
+        &--has-padding {
+            padding: 1.6rem;
+        }
         @include mobile {
             grid-template-columns: repeat(2, minmax(50%, 1fr));
             grid-gap: 0.3rem;
             grid-template-rows: auto;
+            width: 100%;
+            &--has-padding {
+                padding: 0 1.6rem;
+                grid-gap: 0;
+            }
 
             @include mobile {
                 &--disabled {