fix styles

Author: IldarKamalov

client_v2/src/common/controls/Select/CustomClearIndicator.tsx

@@ -1,19 +1,33 @@
 import React from 'react';
+import cn from 'clsx';
 import { ClearIndicatorProps } from 'react-select';
 import { Icon } from 'panel/common/ui/Icon';
 import theme from 'panel/lib/theme';
 
-export const CustomClearIndicator = <OptionType extends Record<string, any> = any, IsMulti extends boolean = false>(
+export const CustomClearIndicator = <
+    OptionType extends Record<string, any> = any,
+    IsMulti extends boolean = false,
+>(
     props: ClearIndicatorProps<OptionType, IsMulti>,
 ) => {
-    const { hasValue, innerProps } = props;
+    const { hasValue, innerProps, selectProps } = props;
 
     if (!hasValue) {
         return null;
     }
 
+    const noDropdownIndicator = selectProps.isMulti && hasValue;
+
     return (
-        <div className={theme.select.clearIndicator} {...innerProps}>
+        <div
+            role="button"
+            tabIndex={0}
+            className={cn(
+                theme.select.clearIndicator,
+                noDropdownIndicator && theme.select.clearIndicatorEnd,
+            )}
+            {...innerProps}
+        >
             <Icon icon="cross" className={theme.select.clearIcon} />
         </div>
     );

client_v2/src/components/Clients/AddClient/AddClient.module.pcss

@@ -29,7 +29,7 @@
 .navLink {
     display: block;
     text-decoration: none;
-    padding: 8px 16px;
+    padding: 16px;
     border-radius: 8px;
     width: 100%;
     cursor: pointer;
@@ -87,7 +87,7 @@
     padding: 16px;
 }
 
-.actions button {
+.actionButton {
     width: auto;
     min-width: 200px;
 }

client_v2/src/components/Clients/AddClient/AddClient.tsx

@@ -189,6 +189,7 @@ export const AddClient = () => {
                                 isMulti
                                 size="responsive"
                                 height="big"
+                                closeMenuOnSelect={false}
                             />
                         </div>
 
@@ -334,6 +335,7 @@ export const AddClient = () => {
                                 onClick={handleSave}
                                 disabled={form.processingSave}
                                 data-testid="client-form-save"
+                                className={s.actionButton}
                             >
                                 {intl.getMessage('save_btn')}
                             </Button>
@@ -342,6 +344,7 @@ export const AddClient = () => {
                                 size="small"
                                 onClick={handleCancel}
                                 data-testid="client-form-cancel"
+                                className={s.actionButton}
                             >
                                 {intl.getMessage('cancel_btn')}
                             </Button>

client_v2/src/components/Clients/Clients.tsx

@@ -86,7 +86,7 @@ export const Clients = () => {
                         className={cn(theme.layout.title, theme.title.h4, theme.title.h3_tablet)}
                         data-testid="clients-title"
                     >
-                        {intl.getMessage('client_settings')}
+                        {intl.getMessage('clients')}
                     </h1>
 
                     <button

client_v2/src/components/Clients/blocks/PersistentClientsTable/PersistentClientsTable.module.pcss

@@ -104,6 +104,20 @@
     }
 }
 
+.copyBtnGreen {
+    color: var(--default-product-icon);
+
+    &:hover {
+        opacity: 0.8;
+    }
+}
+
+.copyBtnTopRight {
+    position: absolute;
+    top: 8px;
+    right: 8px;
+}
+
 .servicesIcons {
     display: flex;
     align-items: center;
@@ -160,8 +174,6 @@
     flex-shrink: 0;
 }
 
-/* --- Tags --- */
-
 .tagsRow {
     display: flex;
     align-items: center;
@@ -183,7 +195,9 @@
 }
 
 .tagsTooltip {
+    position: relative;
     padding: 8px 0;
+    padding-right: 36px;
     background: var(--page-background-additional);
     border-radius: 8px;
     max-height: 240px;
@@ -199,8 +213,6 @@
     white-space: nowrap;
 }
 
-/* --- Misc --- */
-
 .userIcon {
     width: 16px;
     height: 16px;
@@ -292,7 +304,9 @@
 }
 
 .idsTooltip {
+    position: relative;
     padding: 8px 0;
+    padding-right: 36px;
     background: var(--page-background-additional);
     border-radius: 8px;
     max-height: 240px;

client_v2/src/components/Clients/blocks/PersistentClientsTable/PersistentClientsTable.tsx

@@ -100,6 +100,18 @@ export const PersistentClientsTable = ({
                                                             {id}
                                                         </span>
                                                     ))}
+                                                    <button
+                                                        type="button"
+                                                        className={cn(
+                                                            s.copyBtn,
+                                                            s.copyBtnGreen,
+                                                            s.copyBtnTopRight,
+                                                        )}
+                                                        onClick={() => handleCopy(ids.join(', '))}
+                                                        title={intl.getMessage('copy')}
+                                                    >
+                                                        <Icon icon="copy" color="green" />
+                                                    </button>
                                                 </div>
                                             }
                                         >
@@ -134,11 +146,11 @@ export const PersistentClientsTable = ({
                                         <span className={s.nameTooltipText}>{value}</span>
                                         <button
                                             type="button"
-                                            className={s.copyBtn}
+                                            className={cn(s.copyBtn, s.copyBtnGreen)}
                                             onClick={() => handleCopy(value)}
                                             title={intl.getMessage('copy')}
                                         >
-                                            <Icon icon="copy" color="gray" />
+                                            <Icon icon="copy" color="green" />
                                         </button>
                                     </div>
                                 }
@@ -224,7 +236,7 @@ export const PersistentClientsTable = ({
                 },
                 accessor: 'tags',
                 sortable: false,
-                render: (value: string[]) => <TagCell tags={value} />,
+                render: (value: string[]) => <TagCell tags={value} onCopy={handleCopy} />,
             },
             {
                 key: 'requests',

client_v2/src/components/Clients/blocks/PersistentClientsTable/TagCell.tsx

@@ -8,9 +8,10 @@ import s from './PersistentClientsTable.module.pcss';
 
 type TagCellProps = {
     tags: string[];
+    onCopy?: (text: string) => void;
 };
 
-export const TagCell = ({ tags }: TagCellProps) => {
+export const TagCell = ({ tags, onCopy }: TagCellProps) => {
     if (tags.length === 0) {
         return (
             <div className={s.cell}>
@@ -26,7 +27,7 @@ export const TagCell = ({ tags }: TagCellProps) => {
         <div className={s.cell}>
             <span className={s.cellLabel}>{intl.getMessage('tags_title')}</span>
             <div className={s.cellValue}>
-                <TagsRow tags={tags} />
+                <TagsRow tags={tags} onCopy={onCopy} />
             </div>
         </div>
     );

client_v2/src/components/Clients/blocks/PersistentClientsTable/TagsRow.tsx

@@ -1,6 +1,9 @@
 import React from 'react';
+import cn from 'clsx';
 
+import intl from 'panel/common/intl';
 import { Dropdown } from 'panel/common/ui/Dropdown';
+import { Icon } from 'panel/common/ui/Icon';
 
 import s from './PersistentClientsTable.module.pcss';
 
@@ -9,9 +12,10 @@ const MAX_VISIBLE_TAGS = 1;
 type TagsRowProps = {
     tags: string[];
     maxVisible?: number;
+    onCopy?: (text: string) => void;
 };
 
-export const TagsRow = ({ tags, maxVisible = MAX_VISIBLE_TAGS }: TagsRowProps) => {
+export const TagsRow = ({ tags, maxVisible = MAX_VISIBLE_TAGS, onCopy }: TagsRowProps) => {
     const visible = tags.slice(0, maxVisible);
     const hiddenCount = tags.length - maxVisible;
 
@@ -33,6 +37,16 @@ export const TagsRow = ({ tags, maxVisible = MAX_VISIBLE_TAGS }: TagsRowProps) =
                                     {tag}
                                 </span>
                             ))}
+                            {onCopy && (
+                                <button
+                                    type="button"
+                                    className={cn(s.copyBtn, s.copyBtnGreen, s.copyBtnTopRight)}
+                                    onClick={() => onCopy(tags.join(', '))}
+                                    title={intl.getMessage('copy')}
+                                >
+                                    <Icon icon="copy" color="green" />
+                                </button>
+                            )}
                         </div>
                     }
                 >

client_v2/src/lib/theme/Select.module.pcss

@@ -145,6 +145,13 @@
     display: flex;
     align-items: center;
     cursor: pointer;
+    border: none;
+    background: none;
+    padding: 0;
+}
+
+.clearIndicatorEnd {
+    padding-right: 12px;
 }
 
 .clearIcon {