Widgets settings dialogs design fixes (#1935)

datalens-tech · Dec 12, 2024 · cbae9c0 · cbae9c0
1 parent 922279f
commit cbae9c0
Show file tree

Hide file tree

Showing 7 changed files with 46 additions and 48 deletions.
diff --git a/src/ui/components/DialogChartWidget/DialogChartWidget.tsx b/src/ui/components/DialogChartWidget/DialogChartWidget.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 
 import {FormRow, HelpPopover} from '@gravity-ui/components';
-import {Checkbox, Dialog, Link, Popup, Text, TextArea, TextInput} from '@gravity-ui/uikit';
+import {Checkbox, Dialog, Flex, Link, Popup, Text, TextArea, TextInput} from '@gravity-ui/uikit';
 import block from 'bem-cn-lite';
 import {i18n} from 'i18n';
 import type {CustomCommands, Spec} from 'immutability-helper';
@@ -573,38 +573,40 @@ class DialogChartWidget extends React.PureComponent<
                     fieldId={INPUT_NAME_ID}
                     label={i18n('dash.widget-dialog.edit', 'field_title')}
                 >
-                    <TextInput
-                        id={INPUT_NAME_ID}
-                        size="m"
-                        className={b('input')}
-                        placeholder={i18n('dash.widget-dialog.edit', 'context_fill-title')}
-                        value={title}
-                        onUpdate={(value) =>
-                            this.setState({
-                                isManualTitle: true,
-                                data: update(data, {
-                                    tabs: {
-                                        [tabIndex]: {
-                                            title: {$set: value},
+                    <Flex gap={2}>
+                        <TextInput
+                            id={INPUT_NAME_ID}
+                            size="m"
+                            className={b('input')}
+                            placeholder={i18n('dash.widget-dialog.edit', 'context_fill-title')}
+                            value={title}
+                            onUpdate={(value) =>
+                                this.setState({
+                                    isManualTitle: true,
+                                    data: update(data, {
+                                        tabs: {
+                                            [tabIndex]: {
+                                                title: {$set: value},
+                                            },
                                         },
-                                    },
-                                }),
-                            })
-                        }
-                    />
-                    {data.tabs.length === 1 && (
-                        <div className={b('visibility-toggle')}>
-                            <Checkbox
-                                className={b('checkbox')}
-                                size="m"
-                                onChange={this.onVisibilityCheckboxToggle}
-                                checked={!this.state.hideTitle}
-                                qa={DashCommonQa.WidgetShowTitleCheckbox}
-                            >
-                                {i18n('dash.widget-dialog.edit', 'field_show-title')}
-                            </Checkbox>
-                        </div>
-                    )}
+                                    }),
+                                })
+                            }
+                        />
+                        {data.tabs.length === 1 && (
+                            <div className={b('visibility-toggle')}>
+                                <Checkbox
+                                    className={b('checkbox')}
+                                    size="m"
+                                    onChange={this.onVisibilityCheckboxToggle}
+                                    checked={!this.state.hideTitle}
+                                    qa={DashCommonQa.WidgetShowTitleCheckbox}
+                                >
+                                    {i18n('dash.widget-dialog.edit', 'field_show-title')}
+                                </Checkbox>
+                            </div>
+                        )}
+                    </Flex>
                 </FormRow>
                 <FormRow
                     className={b('row', {type: 'line-widget'})}

diff --git a/src/ui/units/dash/components/NavigationInput/InputLink/InputLink.js b/src/ui/units/dash/components/NavigationInput/InputLink/InputLink.js
@@ -141,6 +141,7 @@ class InputLink extends React.PureComponent {
                 />
                 <div>
                     <Button
+                        view="action"
                         className={b('button')}
                         qa={NavigationInputQA.Apply}
                         disabled={this.state.progress}

diff --git a/src/ui/units/dash/components/NavigationInput/InputLink/InputLink.scss b/src/ui/units/dash/components/NavigationInput/InputLink/InputLink.scss
@@ -9,15 +9,13 @@
     }
 
     &__button {
-        width: 75px;
-
         &:not(:last-child) {
-            margin-right: 10px;
+            margin-right: var(--g-spacing-2);
         }
     }
 
     &__error {
         color: var(--g-color-text-danger);
-        padding: 10px;
+        padding: var(--g-spacing-2);
     }
 }
diff --git a/src/ui/units/dash/components/NavigationInput/NavigationInput.js b/src/ui/units/dash/components/NavigationInput/NavigationInput.js
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import {Button} from '@gravity-ui/uikit';
+import {Button, Flex} from '@gravity-ui/uikit';
 import block from 'bem-cn-lite';
 import {i18n} from 'i18n';
 import PropTypes from 'prop-types';
@@ -103,7 +103,7 @@ class NavigationInput extends React.PureComponent {
                         </Button>
                     )}
                 </div>
-                <div className={b('row', linkMixin)}>
+                <Flex gap={2} className={b('row', linkMixin)}>
                     {showInput ? (
                         <InputLink
                             onApply={({entry, params}) => {
@@ -127,7 +127,7 @@ class NavigationInput extends React.PureComponent {
                             {i18n('dash.navigation-input.edit', 'button_use-link')}
                         </Button>
                     )}
-                </div>
+                </Flex>
             </React.Fragment>
         );
     }

diff --git a/src/ui/units/dash/components/NavigationInput/NavigationInput.scss b/src/ui/units/dash/components/NavigationInput/NavigationInput.scss
@@ -2,7 +2,7 @@
     &__row {
         display: grid;
         grid-template-columns: var(--dl-dropdown-navigation-width) auto;
-        grid-column-gap: 10px;
+        grid-column-gap: var(--g-spacing-2);
         align-items: center;
     }
 

diff --git a/src/ui/units/dash/containers/Dialogs/components/PaletteBackground/PaletteBackground.scss b/src/ui/units/dash/containers/Dialogs/components/PaletteBackground/PaletteBackground.scss
@@ -2,10 +2,11 @@
 
 .widget-palette-background {
     $class: &;
-    display: block;
+    display: inline-block;
     position: relative;
     line-height: 0;
     width: fit-content;
+    vertical-align: text-top;
 
     &__hint {
         @include text-body-1();
@@ -21,8 +22,8 @@
         display: inline-block;
         position: relative;
         border-radius: 4px;
-        width: 28px;
-        height: 28px;
+        width: 26px;
+        height: 26px;
         cursor: pointer;
 
         $colorItem: &;
@@ -62,10 +63,7 @@
         &_selected:not(&_small)::after {
             content: '';
             position: absolute;
-            top: -1px;
-            left: -1px;
-            width: 30px;
-            height: 30px;
+            inset: -1px;
             border: 1px solid var(--g-color-line-misc);
             border-radius: 6px;
             z-index: 0;

diff --git a/src/ui/units/dash/containers/Dialogs/components/PaletteBackground/PaletteBackground.tsx b/src/ui/units/dash/containers/Dialogs/components/PaletteBackground/PaletteBackground.tsx
@@ -150,7 +150,6 @@ export const PaletteBackground = (props: PaletteBackgroundProps) => {
             <Tooltip content={i18n('dash.palette-background', 'tooltip_click-to-select')}>
                 <ColorItem
                     color={selectedColor}
-                    isSelected={true}
                     isPreview={true}
                     qa={DashCommonQa.WidgetSelectBackgroundButton}
                 />