removes unnecessary buttons styles previoulsy added

src/client/components/elements/Button/index.js

@@ -57,9 +57,8 @@ const Button = (props) => {
     onClick,
     disabled,
     icon,
-    removeIconBorder,
+    iconStyle,
     buttonStyle,
-    iconColor,
     round,
     size,
     iconPosition,
@@ -69,9 +68,8 @@ const Button = (props) => {
     baseClass,
     className && className,
     buttonStyle && `${baseClass}--style-${buttonStyle}`,
-    iconColor && `${baseClass}--icon-color-light-gray`,
     icon && `${baseClass}--icon`,
-    removeIconBorder && `${baseClass}--icon-without-border`,
+    iconStyle && `${baseClass}--icon-style-${iconStyle}`,
     (icon && !children) && `${baseClass}--icon-only`,
     disabled && `${baseClass}--disabled`,
     round && `${baseClass}--round`,
@@ -139,12 +137,11 @@ Button.defaultProps = {
   children: null,
   onClick: null,
   disabled: undefined,
-  removeIconBorder: false,
   icon: null,
   size: 'medium',
   round: false,
-  iconColor: undefined,
   iconPosition: 'right',
+  iconStyle: 'without-border',
 };
 
 Button.propTypes = {
@@ -159,8 +156,10 @@ Button.propTypes = {
   children: PropTypes.node,
   onClick: PropTypes.func,
   disabled: PropTypes.bool,
-  removeIconBorder: PropTypes.bool,
-  iconColor: PropTypes.oneOf(['light-gray', undefined]),
+  iconStyle: PropTypes.oneOfType([
+    'with-border',
+    'without-border',
+  ]),
   icon: PropTypes.oneOfType([
     PropTypes.node,
     PropTypes.oneOf(['chevron', 'x', 'plus']),

src/client/components/elements/Button/index.scss

@@ -1,39 +1,5 @@
 @import '../../../scss/styles.scss';
 
-@mixin style-icon-color($color: $color-dark-gray, $hover-color: white, $focus-color: $color-light-gray) {
-  .btn__icon {
-    border: 1px solid $color;
-    border-radius: 100%;
-  }
-
-  &.btn--icon-only {
-    .btn__icon {
-      margin: 0;
-    }
-  }
-
-  &:hover {
-    .btn__icon {
-      @include color-svg($hover-color);
-      background: $color;
-    }
-  }
-
-  &:focus {
-    .btn__icon {
-      @include color-svg($color);
-      background: $focus-color;
-    }
-  }
-
-  &:active {
-    .btn__icon {
-      @include color-svg($hover-color);
-      background: lighten($color, 10%);
-    }
-  }
-}
-
 .btn {
   background: transparent;
   line-height: base(1);
@@ -47,6 +13,17 @@
   text-decoration: none;
   text-align: center;
 
+  .btn__icon {
+    border: 1px solid;
+    border-radius: 100%;
+  }
+
+  &--icon-style-without-border {
+    .btn__icon {
+      border: none;
+    }
+  }
+
   span {
     line-height: base(1);
   }
@@ -111,24 +88,12 @@
   &--style-icon-label {
     padding: 0;
     font-weight: 600;
-
-    @include style-icon-color;
-  }
-
-  &--icon-color-light-gray {
-    @include style-icon-color($color-light-gray, $color-dark-gray, $color-light-gray);
   }
 
   &--style-light-gray {
     box-shadow: inset 0 0 0 $style-stroke-width $color-dark-gray;
   }
 
-  &--icon-without-border {
-    .btn__icon {
-      border: none;
-    }
-  }
-
   &--icon-position-left {
     .btn__content {
       flex-direction: row-reverse;
@@ -145,6 +110,34 @@
     }
   }
 
+  &--icon-only {
+    .btn__icon {
+      padding: 0;
+      margin: 0;
+    }
+  }
+
+  &:hover {
+    .btn__icon {
+      @include color-svg(white);
+      background: $color-dark-gray;
+    }
+  }
+
+  &:focus {
+    .btn__icon {
+      @include color-svg($color-dark-gray);
+      background: $color-light-gray;
+    }
+  }
+
+  &:active {
+    .btn__icon {
+      @include color-svg(white);
+      background: lighten($color-dark-gray, 10%);
+    }
+  }
+
   &:focus,
   &:active {
     outline: none;

src/client/components/forms/DraggableSection/ActionHandle/index.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 
 import Button from '../../../elements/Button';
@@ -11,9 +11,6 @@ const baseClass = 'action-handle';
 const ActionHandle = (props) => {
   const { addRow, removeRow, singularLabel } = props;
 
-  const [addRowPopupActive, setAddRowPopupActive] = useState(false);
-  const [removeRowPopupActive, setRemoveRowPopupActive] = useState(false);
-
   return (
     <div className={baseClass}>
       <Popup
@@ -24,16 +21,17 @@ const ActionHandle = (props) => {
         button={(
           <Button
             className={`${baseClass}__remove-row`}
+            round
+            buttonStyle="none"
             icon="x"
-            buttonStyle="icon-label"
             iconPosition="left"
-            iconColor="light-gray"
+            iconStyle="with-border"
             onClick={() => removeRow()}
           />
         )}
       >
         Remove&nbsp;
-        {`${singularLabel ?? 'Row'}`}
+        {singularLabel}
       </Popup>
 
       <Popup
@@ -44,24 +42,28 @@ const ActionHandle = (props) => {
         button={(
           <Button
             className={`${baseClass}__add-row`}
+            round
+            buttonStyle="none"
             icon="plus"
-            buttonStyle="icon-label"
             iconPosition="left"
-            iconColor="light-gray"
+            iconStyle="with-border"
             onClick={() => addRow()}
           />
         )}
       >
         Add&nbsp;
-        {`${singularLabel ?? 'Row'}`}
+        {singularLabel}
       </Popup>
     </div>
   );
 };
 
-ActionHandle.defaultProps = {};
+ActionHandle.defaultProps = {
+  singularLabel: 'Row',
+};
 
 ActionHandle.propTypes = {
+  singularLabel: PropTypes.string,
   addRow: PropTypes.func.isRequired,
   removeRow: PropTypes.func.isRequired,
 };

src/client/components/forms/DraggableSection/PositionHandle/index.js

@@ -20,20 +20,20 @@ const PositionHandle = (props) => {
       <div className={`${baseClass}__border-wrap`}>
         <Button
           className={`${baseClass}__move-backward`}
+          buttonStyle="none"
           icon="chevron"
-          buttonStyle="icon-label"
+          round
           onClick={() => moveRow(positionIndex, positionIndex - 1)}
-          removeIconBorder
         />
 
         <div className={`${baseClass}__current-position`}>{adjustedIndex >= 10 ? adjustedIndex : `0${adjustedIndex}`}</div>
 
         <Button
           className={`${baseClass}__move-forward`}
+          buttonStyle="none"
           icon="chevron"
-          buttonStyle="icon-label"
+          round
           onClick={() => moveRow(positionIndex, positionIndex + 1)}
-          removeIconBorder
         />
       </div>
     </div>

src/client/components/forms/field-types/Repeater/index.js

@@ -183,8 +183,10 @@ const Repeater = (props) => {
 
           <div className={`${baseClass}__add-button-wrap`}>
             <Button
-              buttonStyle="icon-label"
+              buttonFormat="icon-label"
+              buttonStyle="none"
               icon="plus"
+              iconStyle="with-border"
               iconPosition="left"
               onClick={() => addRow(rowCount)}
             >

src/client/components/forms/field-types/Repeater/index.scss

@@ -5,7 +5,12 @@
 
   &__add-button-wrap {
     .btn {
+      color: $color-gray;
       margin: 0;
+
+      &:hover {
+        color: $color-dark-gray;
+      }
     }
   }