Better nested form icons

packages/vulcan-forms/lib/components/FormGroup.jsx

@@ -4,50 +4,6 @@ import { Components } from 'meteor/vulcan:core';
 import classNames from 'classnames';
 import { registerComponent } from 'meteor/vulcan:core';
 
-const IconRight = ({ width = 24, height = 24 }) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width={width}
-    height={height}
-    viewBox="0 0 24 24"
-  >
-    <polyline
-      fill="none"
-      stroke="#000"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeMiterlimit="10"
-      points="5.5,23.5 18.5,12 5.5,0.5"
-      id="Outline_Icons"
-    />
-    <rect fill="none" width="24" height="24" id="Frames-24px" />
-  </svg>
-);
-
-registerComponent('IconRight', IconRight);
-
-const IconDown = ({ width = 24, height = 24 }) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width={width}
-    height={height}
-    viewBox="0 0 24 24"
-  >
-    <polyline
-      fill="none"
-      stroke="#000"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeMiterlimit="10"
-      points="0.501,5.5 12.001,18.5 23.501,5.5"
-      id="Outline_Icons"
-    />
-    <rect fill="none" width="24" height="24" id="Frames-24px" />
-  </svg>
-);
-
-registerComponent('IconDown', IconDown);
-
 class FormGroup extends PureComponent {
   constructor(props) {
     super(props);
@@ -112,3 +68,47 @@ FormGroup.propTypes = {
 };
 
 registerComponent('FormGroup', FormGroup);
+
+const IconRight = ({ width = 24, height = 24 }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={width}
+    height={height}
+    viewBox="0 0 24 24"
+  >
+    <polyline
+      fill="none"
+      stroke="#000"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeMiterlimit="10"
+      points="5.5,23.5 18.5,12 5.5,0.5"
+      id="Outline_Icons"
+    />
+    <rect fill="none" width="24" height="24" id="Frames-24px" />
+  </svg>
+);
+
+registerComponent('IconRight', IconRight);
+
+const IconDown = ({ width = 24, height = 24 }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={width}
+    height={height}
+    viewBox="0 0 24 24"
+  >
+    <polyline
+      fill="none"
+      stroke="#000"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeMiterlimit="10"
+      points="0.501,5.5 12.001,18.5 23.501,5.5"
+      id="Outline_Icons"
+    />
+    <rect fill="none" width="24" height="24" id="Frames-24px" />
+  </svg>
+);
+
+registerComponent('IconDown', IconDown);

packages/vulcan-forms/lib/components/FormNested.jsx

@@ -3,10 +3,7 @@ import PropTypes from 'prop-types';
 import { Components, registerComponent } from 'meteor/vulcan:core';
 import Button from 'react-bootstrap/lib/Button';
 
-const FormNestedItem = (
+const FormNestedItem = ({ nestedFields, name, path, removeItem, itemIndex, ...props }, { errors }) => {
-  { nestedFields, name, path, removeItem, itemIndex, ...props },
-  { errors }
-) => {
   return (
     <div className="form-nested-item">
       <div className="form-nested-item-inner">
@@ -24,12 +21,14 @@ const FormNestedItem = (
       </div>
       <div className="form-nested-item-remove">
         <Button
+          className="form-nested-button"
           bsStyle="danger"
+          bsSize="small"
           onClick={() => {
             removeItem(name);
           }}
         >
-          ✖️
+          <Components.IconRemove height={12} width={12} />
         </Button>
       </div>
       <div className="form-nested-item-deleted-overlay" />
@@ -85,8 +84,8 @@ class FormNested extends PureComponent {
                   />
                 )
             )}
-          <Button bsStyle="success" onClick={this.addItem}>
+          <Button bsSize="small" bsStyle="success" onClick={this.addItem} className="form-nested-button">
-            ➕
+            <Components.IconAdd height={12} width={12} />
           </Button>
         </div>
       </div>
@@ -99,3 +98,19 @@ FormNested.contextTypes = {
 };
 
 registerComponent('FormNested', FormNested);
+
+const IconAdd = ({ width = 24, height = 24 }) => (
+  <svg width={width} height={height} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
+    <path d="M448 294.2v-76.4c0-13.3-10.7-24-24-24H286.2V56c0-13.3-10.7-24-24-24h-76.4c-13.3 0-24 10.7-24 24v137.8H24c-13.3 0-24 10.7-24 24v76.4c0 13.3 10.7 24 24 24h137.8V456c0 13.3 10.7 24 24 24h76.4c13.3 0 24-10.7 24-24V318.2H424c13.3 0 24-10.7 24-24z" />
+  </svg>
+);
+
+registerComponent('IconAdd', IconAdd);
+
+const IconRemove = ({ width = 24, height = 24 }) => (
+  <svg width={width} height={height} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
+    <path d="M424 318.2c13.3 0 24-10.7 24-24v-76.4c0-13.3-10.7-24-24-24H24c-13.3 0-24 10.7-24 24v76.4c0 13.3 10.7 24 24 24h400z" />
+  </svg>
+);
+
+registerComponent('IconRemove', IconRemove);

packages/vulcan-forms/lib/stylesheets/style.scss

@@ -238,16 +238,21 @@ div.ReactTags__suggestions mark{
   }
 }
 
-.form-nested-item-deleted{
-  opacity: 0.3;
-  .form-nested-item-deleted-overlay{
-    display: block;
-  }
-}
-
 .form-nested-item-inner{
   flex: 1;
 }
 .form-nested-item-remove{
   margin-left: 10px;
+}
+.form-nested-button{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  svg{
+    display:block;
+    path{
+      fill: rgba(255,255,255,0.7);
+      stroke: rgba(255,255,255,0.7);
+    }
+  }
 }