Ádding Select, Options to Coral Ui and steps with formField

client/coral-admin/src/containers/Install/InstallContainer.js

@@ -18,7 +18,7 @@ const InstallContainer = props => {
     <Layout restricted={true}>
       <div className={styles.Install}>
         <h2>Welcome to the Coral Project</h2>
-        { install.step !== 0 ? <WizardNav goToStep={goToStep} items={wizardNavitems} currentStep={install.step}/> : null }
+        { install.step !== 0 ? <WizardNav goToStep={goToStep} items={wizardNavitems} currentStep={install.step} icon='check'/> : null }
         <Wizard currentStep={install.step} nextStep={nextStep} previousStep={previousStep} goToStep={goToStep}>
           <InitialStep/>
           <AddOrganizationName/>

client/coral-admin/src/containers/Install/components/Steps/AddOrganizationName.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import styles from './style.css';
-import {Button} from 'coral-ui';
+import {FormField, Button} from 'coral-ui';
 
 const InitialStep = props => {
   const {nextStep} = props;
@@ -10,11 +10,16 @@ const InitialStep = props => {
         Please tell us the name of your organization. This will appear in emails when
         inviting new team members
       </p>
-      <form>
-        <label htmlFor='organizationName'>Organization name:</label>
-        <input type='text' name='organizationName' id='organizationName'/>
-        <Button cStyle='black' onClick={nextStep} full>Save</Button>
-      </form>
+      <div className={styles.form}>
+        <form onSubmit={() => {}}>
+          <FormField
+            className={styles.FormField}
+            id="organizationName"
+            type="text"
+            label='Organization name' required/>
+          <Button cStyle='black' full>Save</Button>
+        </form>
+      </div>
     </div>
   );
 };

client/coral-admin/src/containers/Install/components/Steps/CreateYourAccount.js

@@ -1,30 +1,40 @@
 import React from 'react';
 import styles from './style.css';
-import {Button} from 'coral-ui';
+import {FormField, Button} from 'coral-ui';
 
 const InitialStep = props => {
   const {nextStep} = props;
   return (
     <div className={styles.step}>
-      <form>
-        <div className='formField'>
-          <label htmlFor='email'>Email address</label>
-          <input type='email' name='email' id='email'/>
-        </div>
-        <div className='formField'>
-          <label htmlFor='username'>Username</label>
-          <input type='text' name='username' id='username'/>
-        </div>
-        <div className='formField'>
-          <label htmlFor='password'>Password</label>
-          <input type='password' name='password' id='password'/>
-        </div>
-        <div className='formField'>
-          <label htmlFor='confirmPassword'>Confirm Password</label>
-          <input type='password' name='confirmPassword' id='confirmPassword'/>
-        </div>
-        <Button cStyle='black' onClick={nextStep} full>Save</Button>
-      </form>
+      <div className={styles.form}>
+        <form>
+          <FormField
+            className={styles.formField}
+            id="email"
+            type="email"
+            label='Email address' required/>
+
+          <FormField
+            className={styles.formField}
+            id="username"
+            type="text"
+            label='Username' required/>
+
+          <FormField
+            className={styles.formField}
+            id="password"
+            type="password"
+            label='Password' required/>
+
+          <FormField
+            className={styles.formField}
+            id="confirmPassword"
+            type="password"
+            label='Confirm Password' required/>
+
+          <Button cStyle='black' onClick={nextStep} full>Save</Button>
+        </form>
+      </div>
     </div>
   );
 };

client/coral-admin/src/containers/Install/components/Steps/InitialStep.js

@@ -11,7 +11,7 @@ const InitialStep = props => {
         Once you complete the following three steps, you will have a free
         installation and provision of Mongo and Redis.
       </p>
-      <Button cStyle='green' onClick={nextStep}>Get Started</Button>
+      <Button cStyle='green' onClick={nextStep} raised>Get Started</Button>
     </div>
   );
 };

client/coral-admin/src/containers/Install/components/Steps/InviteTeamMembers.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import styles from './style.css';
-import {Button} from 'coral-ui';
+import {Button, Select, Option, FormField} from 'coral-ui';
 
 const InviteTeamMembers = props => {
   const {nextStep} = props;
@@ -11,23 +11,32 @@ const InviteTeamMembers = props => {
         Once registered, new team members will receive an email to Create
         their password.
       </p>
-      <form>
-        <div className='formField'>
-          <label htmlFor='email'>Email address</label>
-          <input type='email' name='email' id='email'/>
-        </div>
-        <div className='formField'>
-          <label htmlFor='username'>Username</label>
-          <input type='text' name='username' id='username'/>
-        </div>
-        <div className='formField'>
-          <select>
-            <option>Admin</option>
-            <option>Moderator</option>
-          </select>
-        </div>
-        <Button cStyle='black' onClick={nextStep} full>Invite team member</Button>
-      </form>
+      <div className={styles.form}>
+        <form>
+
+          <FormField
+            className={styles.formField}
+            id="email"
+            type="email"
+            label='Email address' required/>
+
+          <FormField
+            className={styles.formField}
+            id="username"
+            type="text"
+            label='Username' required/>
+
+          <div className={styles.formField}>
+            <label htmlFor='role'>Assing a role</label>
+            <Select id='role' label='Select Role'>
+              <Option>Admin</Option>
+              <Option>Moderator</Option>
+            </Select>
+          </div>
+
+          <Button cStyle='black' onClick={nextStep} icon='arrow_forward' full>Invite team member</Button>
+        </form>
+      </div>
     </div>
   );
 };

client/coral-admin/src/containers/Install/components/Steps/style.css

@@ -1,34 +1,54 @@
 .step {
+  padding: 20px 0;
+
+  h3 {
+    max-width: 450px;
+    margin: 0 auto;
+    text-align: left;
+    font-size: 1.4em;
+    font-weight: bold;
+  }
 
   p {
     max-width: 450px;
-    margin: 10px auto 30px;
+    margin: 0 auto 30px;
+    font-size: 1.1em;
+    text-align: left;
   }
 
   > button {
-    min-width: 140px;
+    min-width: 145px;
   }
 
-  form {
+  .form {
     max-width: 300px;
     margin: 30px auto;
 
-    label {
-      text-align: left;
-      display: block;
+    form > button {
+      margin: 30px 0;
     }
 
-    input {
-      border: solid 1px rgba(0, 0, 0, 0.23);
-      padding: 10px 2px;
-      border-radius: 3px;
-      width: 100%;
-      box-sizing: border-box;
-      margin: 10px 0;
-      transition: border-color 0.2 ease;
+    .formField {
+      label {
+        text-align: left;
+        display: block;
+        margin: 10px 0;
+        font-weight: 400;
+        font-size: 1.08em;
+      }
 
-      &:focus {
-        border-color: black;
+      > input {
+        border: solid 1px rgba(0, 0, 0, 0.23);
+        padding: 10px;
+        border-radius: 3px;
+        width: 100%;
+        box-sizing: border-box;
+        transition: border-color 0.2s ease;
+        font-size: 1em;
+
+        &:focus {
+          border-color: black;
+        }
       }
     }
   }

client/coral-admin/src/containers/Install/style.css

@@ -2,7 +2,7 @@
   max-width: 900px;
   margin: 0 auto;
   text-align: center;
-  padding: 40px 0;
+  padding: 50px 0;
 
   h2 {
     font-size: 2em;