Style adjustments

Author: VeraZab

src/components/fields/AxisCreator.js

@@ -77,26 +77,21 @@ class UnconnectedNewAxisCreator extends Component {
   render() {
     const icon = <PlusIcon />;
     const _ = this.props.localize;
+    const extraComponent = this.canAddAxis() ? (
+      <Button variant="no-text" icon={icon} onClick={() => this.updateAxis()} />
+    ) : (
+      <Button variant="no-text--disabled" icon={icon} onClick={() => {}} />
+    );
 
     return (
-      <Fragment>
-        <Dropdown
-          label={this.props.label}
-          attr={this.props.attr}
-          clearable={false}
-          options={this.props.options}
-          updatePlot={u => this.recalcAxes(u)}
-        />
-        {this.canAddAxis() ? (
-          <Button
-            attr={this.props.attr}
-            label={_('Axis')}
-            variant="secondary"
-            icon={icon}
-            onClick={() => this.updateAxis()}
-          />
-        ) : null}
-      </Fragment>
+      <Dropdown
+        label={this.props.label}
+        attr={this.props.attr}
+        clearable={false}
+        options={this.props.options}
+        updatePlot={u => this.recalcAxes(u)}
+        extraComponent={extraComponent}
+      />
     );
   }
 }

src/components/fields/Field.js

@@ -26,6 +26,7 @@ class Field extends Component {
       localize: _,
       multiValued,
       units,
+      extraComponent,
     } = this.props;
 
     let fieldClass;
@@ -57,6 +58,7 @@ class Field extends Component {
               </div>
             </MenuPanel>
           ) : null}
+          {extraComponent ? extraComponent : null}
         </div>
         {units ? (
           <div className={bem('field', 'units')}>
@@ -75,6 +77,7 @@ Field.propTypes = {
   units: PropTypes.string,
   multiValued: PropTypes.bool,
   children: PropTypes.node,
+  extraComponent: PropTypes.any,
 };
 
 Field.defaultProps = {

src/styles/_mixins.scss

@@ -69,12 +69,12 @@
     }
   }
 
-  &:hover {
+  &:hover:not(.button--no-text--disabled) {
     background-color: var(--color-button-#{$variant}-hover-fill);
     border: 1px solid var(--color-button-#{$variant}-hover-border);
     color: var(--color-button-#{$variant}-hover-text);
   }
-  &:active {
+  &:active:not(.button--no-text--disabled) {
     background-color: var(--color-button-#{$variant}-active-fill);
     border: 1px solid var(--color-button-#{$variant}-active-border);
     color: var(--color-button-#{$variant}-active-text);

src/styles/components/widgets/_button.scss

@@ -59,6 +59,19 @@ button {
     margin-right: var(--spacing-half-unit);
   }
 
+  &--no-text {
+    @include button();
+    padding-right: var(--spacing-quarter-unit);
+    margin-left: 5px;
+    &--disabled {
+      @include button();
+      padding-right: var(--spacing-quarter-unit);
+      margin-left: 5px;
+      color: rgb(186, 186, 186);
+      cursor: default;
+    }
+  }
+
   &--default {
     @include button();
   }