fixing spacing around table and button in invite table

frontend/src/components/people-list/invite.js

@@ -63,7 +63,9 @@ const Invite = React.createClass({
 
     const InputStyle = {
       float: 'left',
-      width: '75%'
+      width: '75%',
+      minHeight: '50px',
+      marginBottom: '20px',
     };
 
     const AddButtonStyle = {
@@ -93,6 +95,7 @@ const Invite = React.createClass({
             <Column xs={12}>
               <form onSubmit={this.handleSubmit}>
                 <Select.Creatable
+                  aria-label="member select"
                   onChange={handleSelectChange}
                   onNewOptionClick={handleSelectChange}
                   options={selectData}

frontend/src/components/people-list/table/index.js

@@ -1,12 +1,23 @@
 const React = require('react');
+const Styled = require('styled-components');
 
 const Table = require('@ui/components/table-data-table');
 const Checkbox  = require('@ui/components/checkbox');
 
+const fns  = require('@ui/shared/functions');
+
 const PersonStatus = require('./person-status');
 const PersonRole = require('./person-role');
 const PersonDelete = require('./person-delete');
 
+const {
+  default: styled
+} = Styled;
+
+const {
+  remcalc
+} = fns;
+
 const PeopleTable = (props) => {
 
   const {
@@ -78,11 +89,17 @@ const PeopleTable = (props) => {
     };
   });
 
+  const StyledWrapper = styled.div`
+    margin-top: ${remcalc(40)};
+  `;
+
   return (
-    <Table
+    <StyledWrapper>
-      columns={columns}
+      <Table
-      data={data}
+        columns={columns}
-    />
+        data={data}
+      />
+    </StyledWrapper>
   );
 };
 

frontend/src/mock-state.json

@@ -479,7 +479,7 @@
   },
   "orgs": {
     "ui": {
-      "invite_toggled": true,
+      "invite_toggled": false,
       "member_status_tooltip": false,
       "member_role_tooltip": false,
       "sections": [
@@ -535,7 +535,7 @@
   },
   "projects": {
     "ui": {
-      "invite_toggled": true,
+      "invite_toggled": false,
       "member_status_tooltip": false,
       "member_role_tooltip": false,
       "sections": [

ui/src/components/button/index.js

@@ -124,6 +124,12 @@ const style = css`
 const StyledButton = styled.button`
   min-width: ${remcalc(120)};
   ${style}
+  
+  // Need to use HTML element selector, as adjecent buttons may have
+  // different class names if they are primary/secondary/disabled 
+  & + button {
+    margin-left: 20px;
+  }
 `;
 
 const StyledAnchor = styled.a`