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

client/coral-admin/src/components/ui/Header.js

@@ -11,42 +11,44 @@ export default ({handleLogout, restricted = false}) => (
     <Logo />
     {
       !restricted ?
-      <Navigation className={styles.nav}>
-        <IndexLink className={styles.navLink} to="/admin"
-                   activeClassName={styles.active}>
-                   {lang.t('configure.moderate')}
-       </IndexLink>
-        <Link className={styles.navLink} to="/admin/community"
-              activeClassName={styles.active}>
-              {lang.t('configure.community')}
-        </Link>
-        <Link className={styles.navLink} to="/admin/configure"
-              activeClassName={styles.active}>
-              {lang.t('configure.configure')}
-        </Link>
-        <Link className={styles.navLink} to="/admin/streams"
-              activeClassName={styles.active}>
-              {lang.t('configure.streams')}
-        </Link>
-      </Navigation>
-      :
-      null
-    }
-    <div className={styles.rightPanel}>
-      <ul>
-        <li className={styles.settings}>
-          <div>
-            <IconButton name="settings" id="menu-settings"/>
-            <Menu target="menu-settings" align="right">
-              <MenuItem onClick={handleLogout}>Sign Out</MenuItem>
-            </Menu>
-          </div>
-        </li>
-        <li>
-          {`v${process.env.VERSION}`}
-        </li>
-      </ul>
-    </div>
+      <div>
+        <Navigation className={styles.nav}>
+          <IndexLink className={styles.navLink} to="/admin"
+                     activeClassName={styles.active}>
+                     {lang.t('configure.moderate')}
+         </IndexLink>
+          <Link className={styles.navLink} to="/admin/community"
+                activeClassName={styles.active}>
+                {lang.t('configure.community')}
+          </Link>
+          <Link className={styles.navLink} to="/admin/configure"
+                activeClassName={styles.active}>
+                {lang.t('configure.configure')}
+          </Link>
+          <Link className={styles.navLink} to="/admin/streams"
+                activeClassName={styles.active}>
+                {lang.t('configure.streams')}
+          </Link>
+        </Navigation>
+        <div className={styles.rightPanel}>
+          <ul>
+            <li className={styles.settings}>
+              <div>
+                <IconButton name="settings" id="menu-settings"/>
+                <Menu target="menu-settings" align="right">
+                  <MenuItem onClick={handleLogout}>Sign Out</MenuItem>
+                </Menu>
+              </div>
+            </li>
+            <li>
+              {`v${process.env.VERSION}`}
+            </li>
+          </ul>
+        </div>
+      </div>
+    :
+    null
+  }
   </Header>
 );
 

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;

client/coral-ui/components/Option.css

@@ -0,0 +1,3 @@
+.Option {
+  
+}

client/coral-ui/components/Option.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import {Option as OptionMDL} from 'react-mdl-selectfield';
+import styles from './Option.css';
+
+const Option = props => {
+  const {children, ...attrs} = props;
+  return (
+    <OptionMDL className={styles.Option} {...attrs}>
+      {children}
+    </OptionMDL>
+  );
+};
+
+export default Option;

client/coral-ui/components/Select.css

@@ -0,0 +1,33 @@
+.Select {
+  position: relative;
+  width: 100%;
+  height: 40px;
+  background: #2c2c2c;
+  padding: 10px 15px;
+  box-sizing: border-box;
+  color: white;
+  border-radius: 2px;
+  box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
+
+  > div {
+    padding: 0;
+  }
+
+  i {
+    position: absolute;
+    top: 7px;
+    right: 7px;
+  }
+
+  input {
+    padding: 0;
+    font-size: 13px;
+    letter-spacing: 0.7px;
+    font-weight: 400;
+  }
+
+  &:hover {
+    cursor: pointer;
+   }
+
+}

client/coral-ui/components/Select.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import {SelectField} from 'react-mdl-selectfield';
+import styles from './Select.css';
+
+const Select = props => {
+  const {children, ...attrs} = props;
+  return (
+    <SelectField className={styles.Select} {...attrs}>
+      {children}
+    </SelectField>
+  );
+};
+
+export default Select;

client/coral-ui/components/WizardNav.css

@@ -13,7 +13,7 @@
     position: relative;
     padding-left: 40px;
     border-radius: 1px;
-    
+
     &:hover {
       cursor: pointer;
     }
@@ -27,6 +27,10 @@
           border-color: transparent transparent transparent #00796B;
         }
       }
+
+      i {
+        opacity: 1;
+      }
     }
 
     &.active {
@@ -41,6 +45,15 @@
       }
     }
 
+    i {
+      transition: opacity 0.2s ease;
+      opacity: 0;
+      vertical-align: middle;
+      font-size: 16px;
+      margin-top: -5px;
+      margin-left: 8px;
+    }
+
     span {
       padding: 10px 20px;
       margin-right: 10px;

client/coral-ui/components/WizardNav.js

@@ -1,8 +1,9 @@
 import React, {PropTypes} from 'react';
 import styles from './WizardNav.css';
+import Icon from './Icon';
 
 const WizardNav = props => {
-  const {goToStep, currentStep, items} = props;
+  const {goToStep, currentStep, items, icon} = props;
   return (
     <nav className={styles.WizardNav}>
       <ul>
@@ -12,7 +13,9 @@ const WizardNav = props => {
               key={i}
               className={`${currentStep === item.step ? styles.active : ''} ${item.step < currentStep ? styles.done : ''}`}
               onClick={() => goToStep(item.step)}>
-              {item.text}<span/>
+              {item.text}
+              {icon && <Icon name={icon} />}
+              <span/>
             </li>
           ))
         }

client/coral-ui/index.js

@@ -18,3 +18,5 @@ export {default as Success} from './components/Success';
 export {default as Pager} from './components/Pager';
 export {default as Wizard} from './components/Wizard';
 export {default as WizardNav} from './components/WizardNav';
+export {default as Select} from './components/Select';
+export {default as Option} from './components/Option';