creating empty members component

frontend/locales/en-us.json

@@ -10,6 +10,7 @@
   "add-services": "Add services",
   "no-services": "You don’t have any services. You can either add them by editing a manifest file or by connecting your repo on GitHub or BitBucket.",
   "no-projects": "You don’t have any projects.",
+  "no-people": "There are no members here. Add them above",
   "edit-project-manifest": "Edit project manifest",
   "or-bring-in-from": "or bring in from",
   "your-settings": "Your settings",

frontend/src/components/empty/people.js

@@ -0,0 +1,20 @@
+const React = require('react');
+const ReactIntl = require('react-intl');
+
+const Column = require('@ui/components/column');
+const Row = require('@ui/components/row');
+
+const {
+  FormattedMessage
+} = ReactIntl;
+
+module.exports = () => (
+  <Row>
+    <Column xs={12}>
+      <p name='empty'>
+        <FormattedMessage id='no-people' />
+      </p>
+    </Column>
+  </Row>
+);
+

frontend/src/components/empty/projects.js

@@ -17,3 +17,4 @@ module.exports = () => (
     </Column>
   </Row>
 );
+

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

@@ -1,17 +1,14 @@
 const React = require('react');
 
+const Empty = require('@components/empty/people');
+
 const Row = require('@ui/components/row');
 const Column = require('@ui/components/column');
 const Button = require('@ui/components/button');
-const BaseElements = require('@ui/components/base-elements');
 
 const PeopleTable = require('./table');
 const Invite = require('./invite');
 
-const {
-  H3,
-} = BaseElements;
-
 const buttonStyle = {
   float: 'right'
 };
@@ -44,7 +41,7 @@ const People = (props) => {
         <Column xs={12}>
           { people.length > 0
             ? <PeopleTable {...props} />
-            : <H3>Noody here!</H3> }
+            : <Empty /> }
         </Column>
       </Row>
     </div>

ui/src/shared/constants/baseunits.js

@@ -1,12 +0,0 @@
-// WIP - possibly create a function like spacerXL, spacerS, spacerM for things lik
-//        padding, margins, widths
-
-const baseunit = {
-  xs: 3,
-  s: 6,
-  m: 12,
-  l: 18,
-  xl: 24
-};
-
-module.exports = baseunit;

ui/src/shared/constants/index.js

@@ -6,7 +6,6 @@ const boxes = require('./boxes');
 const typography = require('./typography');
 const sizes = require('./sizes');
 const breakpoints = require('./breakpoints');
-const baseunit = require('./baseunits');
 
 const tables = {
   bg: 'transparent',
@@ -23,8 +22,7 @@ const constants = traverse({
   forms,
   sizes,
   tables,
-  typography,
+  typography
-  baseunit
 }).map(function(x) {
   return isFunction(x) ? x(this.parent.node) : x;
 });