chore: CB-873 driver properties design update

webapp/packages/core-app/public/icons/icons.svg

@@ -29,8 +29,8 @@
     </g>
   </symbol>
 
-  <symbol id="add_sm" viewBox="-3 -3 14 14">
-    <path fill="currentColor" fill-rule="evenodd" clip-rule="evenodd" d="M5 0H3v3H0v2h3v3h2V5h3V3H5V0z"/>
+  <symbol id="add_sm" viewBox="0 0 18 18">
+    <path fill="currentColor" fill-rule="evenodd" clip-rule="evenodd" d="M10 5H8v3H5v2h3v3h2v-3h3V8h-3V5z"/>
   </symbol>
 
   <symbol id="arrow" viewBox="0 0 16 16">

webapp/packages/core-blocks/src/Button.tsx

@@ -11,7 +11,7 @@ import { observer } from 'mobx-react-lite';
 import styled, { css } from 'reshadow';
 import { use } from 'reshadow';
 
-import { useStyles, composes } from '@cloudbeaver/core-theming';
+import { useStyles, composes, ComponentStyle } from '@cloudbeaver/core-theming';
 
 import { Icon } from './Icons';
 import { Loader } from './Loader/Loader';
@@ -101,6 +101,7 @@ type ButtonProps = (
   loading?: boolean;
   icon?: string;
   viewBox?: string;
+  styles?: ComponentStyle;
   mod?: Array<keyof typeof buttonMod>;
   tag?: 'button' | 'a';
   href?: string;
@@ -115,6 +116,7 @@ export const Button: React.FC<ButtonProps> = observer(function Button({
   icon,
   viewBox,
   mod,
+  styles,
   tag = 'button',
   disabled = false,
   loading,
@@ -148,7 +150,7 @@ export const Button: React.FC<ButtonProps> = observer(function Button({
   }
 
   const Button = tag;
-  return styled(useStyles(buttonStyles, ...(mod || []).map(mod => buttonMod[mod])))(
+  return styled(useStyles(styles, buttonStyles, ...(mod || []).map(mod => buttonMod[mod])))(
     <Button {...rest} disabled={disabled} {...use({ loading })} className={className} onClick={state.click}>
       <ripple />
       {icon && <button-icon><Icon name={icon} viewBox={viewBox} /></button-icon>}

webapp/packages/core-blocks/src/PropertiesTable/PropertiesTable.tsx

@@ -18,7 +18,7 @@ import { Button } from '../Button';
 import { useObjectRef } from '../useObjectRef';
 import type { IProperty } from './IProperty';
 import { PropertyItem } from './PropertyItem';
-import { PROPERTIES_TABLE_STYLES } from './styles';
+import { PROPERTIES_TABLE_ADD_STYLES, PROPERTIES_TABLE_STYLES } from './styles';
 
 type PropertiesState = Record<string, string>;
 
@@ -122,6 +122,7 @@ export const PropertiesTable = observer(function PropertiesTable(props: Props) {
               icon='add_sm'
               viewBox="0 0 18 18"
               type='button'
+              styles={PROPERTIES_TABLE_ADD_STYLES}
               onClick={() => onAdd()}
             >
               {translate('block_properties_table_add')}

webapp/packages/core-blocks/src/PropertiesTable/PropertyValueSelector.tsx

@@ -7,7 +7,7 @@
  */
 
 import { observer } from 'mobx-react-lite';
-import { useCallback, useEffect } from 'react';
+import React, { useCallback, useEffect } from 'react';
 import {
   useMenuState,
   Menu,
@@ -57,25 +57,25 @@ const styles = composes(
   `
 );
 
-type Props = React.PropsWithChildren<{
+interface Props {
   propertyName?: string;
   values: string[];
   onSelect: (value: string) => void;
   onSwitch: (state: boolean) => void;
-}>;
+}
 
-export const PropertyValueSelector = observer(function PropertyValueSelector({
+export const PropertyValueSelector: React.FC<Props> = observer(function PropertyValueSelector({
   propertyName,
   values,
   children,
   onSelect,
   onSwitch,
-}: Props) {
+}) {
   const menu = useMenuState();
   const handleMenuSelect = useCallback(
-    (value: string) => {
+    (event: React.MouseEvent<HTMLButtonElement>) => {
       menu.hide();
-      onSelect(value);
+      onSelect(event.currentTarget.id);
     },
     [menu, onSelect]
   );
@@ -85,8 +85,8 @@ export const PropertyValueSelector = observer(function PropertyValueSelector({
     <>
       <MenuButton {...menu}>{children}</MenuButton>
       <Menu {...menu} aria-label={propertyName}>
-        {values.map(value => (
-          <MenuItem key={value} type='button' {...menu} onClick={() => handleMenuSelect(value)}>
+        {menu.visible && values.map(value => (
+          <MenuItem key={value} id={value} type='button' {...menu} onClick={handleMenuSelect}>
             {value}
           </MenuItem>
         ))}

webapp/packages/core-blocks/src/PropertiesTable/styles.ts

@@ -40,11 +40,7 @@ export const PROPERTIES_TABLE_STYLES = composes(
     }
     properties-header-add {
       flex: 0 0 100%;
-      padding: 8px 28px;
-
-      & Button {
-        text-transform: initial;
-      }
+      padding: 0px 28px;
     }
 
     properties-list {
@@ -53,6 +49,18 @@ export const PROPERTIES_TABLE_STYLES = composes(
       flex-direction: column;
       overflow: auto;
       max-height: 600px;
+      padding: 4px 0px;
     }
   `
 );
+
+export const PROPERTIES_TABLE_ADD_STYLES = css`
+  button-icon {
+    margin-right: 0px !important;
+  }
+  button-label {
+    composes: theme-typography--caption from global;
+    text-transform: initial;
+    font-weight: 500;
+  }
+`;