From c72f471f7c618ebf5d1ccdf638806da8ccee0da0 Mon Sep 17 00:00:00 2001
From: Georgy <i@64mb.ru>
Date: Mon, 20 May 2024 22:44:39 +0300
Subject: [PATCH] fix: correct style load for lang control at static mode

---
 src/components/Controls/Controls.scss         | 24 -----------
 .../LangControl/LangControl.scss              | 41 ++++++++++++++++++-
 .../LangControl/LangControl.tsx               |  8 ++--
 .../SettingsControl/SettingsControl.scss      |  6 +--
 4 files changed, 46 insertions(+), 33 deletions(-)

diff --git a/src/components/Controls/Controls.scss b/src/components/Controls/Controls.scss
index 93a8f14d..58772f20 100644
--- a/src/components/Controls/Controls.scss
+++ b/src/components/Controls/Controls.scss
@@ -13,36 +13,12 @@
 
     &__list {
         padding: 4px 0;
-
-        &_langs {
-            width: 100px;
-        }
     }
 
     &__list-icon {
         font-size: 22px;
     }
 
-    &__lang-item {
-        --g-focus-border-radius: 4px;
-
-        display: flex;
-        gap: 8px;
-        align-items: center;
-        width: 100%;
-        height: 100%;
-        border-radius: var(--g-focus-border-radius);
-        border: 0;
-        padding: 0 12px;
-        color: inherit;
-        cursor: inherit;
-        background-color: inherit;
-        font-family: inherit;
-
-        @include focusable(-2px);
-
-    }
-
     &__icon-rotated {
         transform: rotate(90deg);
     }
diff --git a/src/components/Controls/single-controls/LangControl/LangControl.scss b/src/components/Controls/single-controls/LangControl/LangControl.scss
index ab754b63..af096dc4 100644
--- a/src/components/Controls/single-controls/LangControl/LangControl.scss
+++ b/src/components/Controls/single-controls/LangControl/LangControl.scss
@@ -1,3 +1,40 @@
-.dc-controls__lang-item {
-    padding: 0 18px;
+@import '../../../../styles/mixins';
+@import '../../../../styles/variables';
+
+.dc-lang-control {
+    display: flex;
+    align-items: center;
+    @include text-size(body-1);
+
+    &__popup {
+        width: 100px;
+        @include text-size(body-1);
+    }
+
+    &__popup-tooltip {
+        padding: 0;
+    }
+
+    &__list {
+        padding: 4px 0;
+    }
+
+    &__list-item {
+        --g-focus-border-radius: 4px;
+
+        display: flex;
+        gap: 8px;
+        align-items: center;
+        width: 100%;
+        height: 100%;
+        border-radius: var(--g-focus-border-radius);
+        border: 0;
+        padding: 0 12px;
+        color: inherit;
+        cursor: inherit;
+        background-color: inherit;
+        font-family: inherit;
+
+        @include focusable(-2px);
+    }
 }
diff --git a/src/components/Controls/single-controls/LangControl/LangControl.tsx b/src/components/Controls/single-controls/LangControl/LangControl.tsx
index d291e170..87e6ac8d 100644
--- a/src/components/Controls/single-controls/LangControl/LangControl.tsx
+++ b/src/components/Controls/single-controls/LangControl/LangControl.tsx
@@ -11,7 +11,6 @@ import {getPopupPosition} from '../../../../utils';
 import {Control} from '../../../Control';
 import {ControlsLayoutContext} from '../../ControlsLayout';
 
-import '../../Controls.scss';
 import './LangControl.scss';
 
 const DEFAULT_LANGS = ['en', 'ru', 'he'];
@@ -21,7 +20,7 @@ const LEGACY_LANG_ITEMS = [
     {value: Lang.He, text: 'Hebrew'},
 ];
 
-const b = block('dc-controls');
+const b = block('dc-lang-control');
 
 interface ControlProps {
     lang: Lang;
@@ -62,7 +61,7 @@ const LangControl = (props: ControlProps) => {
         return preparedLangs.length ? preparedLangs : LEGACY_LANG_ITEMS;
     }, [langs]);
     const renderItem = useCallback((item: ListItem) => {
-        return <button className={b('lang-item')}>{item.text}</button>;
+        return <button className={b('list-item')}>{item.text}</button>;
     }, []);
     const onItemClick = useCallback(
         (item: ListItem) => {
@@ -95,12 +94,13 @@ const LangControl = (props: ControlProps) => {
             onCloseClick={popupState.close}
             onOpenChange={onOpenChange}
             className={controlClassName}
+            contentClassName={b('popup')}
             tooltipContentClassName={b('popup-tooltip')}
             content={
                 <List
                     role={'list'}
                     filterable={false}
-                    className={b('list', {langs: true})}
+                    className={b('list')}
                     items={langItems}
                     onItemClick={onItemClick}
                     selectedItemIndex={selectedItemIndex}
diff --git a/src/components/Controls/single-controls/SettingsControl/SettingsControl.scss b/src/components/Controls/single-controls/SettingsControl/SettingsControl.scss
index f00ace14..7308c046 100644
--- a/src/components/Controls/single-controls/SettingsControl/SettingsControl.scss
+++ b/src/components/Controls/single-controls/SettingsControl/SettingsControl.scss
@@ -4,7 +4,6 @@
     &__text-size-control {
         display: flex;
         align-items: center;
-
     }
 
     &__text-size-button {
@@ -51,7 +50,6 @@
         display: flex;
         padding: 12px;
         width: 100%;
-
     }
 
     &__list-item-description {
@@ -79,8 +77,10 @@
 
         &__popup-tooltip {
             position: fixed;
+            /* stylelint-disable-next-line declaration-no-important */
             inset: var(--header-height) 0px auto 0px !important;
-            transform: translate3d(0,0,0) !important;
+            /* stylelint-disable-next-line declaration-no-important */
+            transform: translate3d(0, 0, 0) !important;
         }
 
         &__popup-tooltip-content {