converting simple elements to a base-element;

frontend/src/components/empty/instances.js

@@ -3,6 +3,11 @@ const ReactIntl = require('react-intl');
 
 const Column = require('@ui/components/column');
 const Row = require('@ui/components/row');
+const BaseElements = require('@ui/components/base-elements');
+
+const {
+  P
+} = BaseElements;
 
 const {
   FormattedMessage
@@ -11,9 +16,9 @@ const {
 module.exports = () => (
   <Row>
     <Column xs={12}>
-      <p name='empty'>
+      <P name='empty'>
         <FormattedMessage id='no-instances' />
-      </p>
+      </P>
     </Column>
   </Row>
 );

frontend/src/components/empty/services.js

@@ -4,6 +4,12 @@ const ReactIntl = require('react-intl');
 const Button = require('@ui/components/button');
 const Column = require('@ui/components/column');
 const Row = require('@ui/components/row');
+const BaseElements = require('@ui/components/base-elements');
+
+const {
+  P,
+  H3,
+} = BaseElements;
 
 const {
   FormattedMessage
@@ -13,12 +19,12 @@ module.exports = () => (
   <div>
     <Row name='empty-services'>
       <Column md={6} xs={12}>
-        <h3>
+        <H3>
           <FormattedMessage id='add-services' />
-        </h3>
-        <p>
+        </H3>
+        <P>
           <FormattedMessage id='no-services' />
-        </p>
+        </P>
       </Column>
     </Row>
     <Row>
@@ -27,9 +33,9 @@ module.exports = () => (
       </Button>
     </Row>
     <Row>
-      <p>
+      <P>
         <FormattedMessage id='or-bring-in-from' />
-      </p>
+      </P>
     </Row>
     <Row>
       <Column>

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

@@ -3,10 +3,15 @@ const React = require('react');
 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'
 };
@@ -39,7 +44,7 @@ const People = (props) => {
         <Column xs={12}>
           { people.length > 0
             ? <PeopleTable {...props} />
-            : <h3>Noody here!</h3> }
+            : <H3>Noody here!</H3> }
         </Column>
       </Row>
     </div>