diff --git a/client/coral-admin/src/components/ui/Header.js b/client/coral-admin/src/components/ui/Header.js index abfb0ff13..3e6598d6e 100644 --- a/client/coral-admin/src/components/ui/Header.js +++ b/client/coral-admin/src/components/ui/Header.js @@ -11,42 +11,44 @@ export default ({handleLogout, restricted = false}) => ( { !restricted ? - - - {lang.t('configure.moderate')} - - - {lang.t('configure.community')} - - - {lang.t('configure.configure')} - - - {lang.t('configure.streams')} - - - : - null - } -
- -
+
+ + + {lang.t('configure.moderate')} + + + {lang.t('configure.community')} + + + {lang.t('configure.configure')} + + + {lang.t('configure.streams')} + + +
+
    +
  • +
    + + + Sign Out + +
    +
  • +
  • + {`v${process.env.VERSION}`} +
  • +
+
+
+ : + null + } ); diff --git a/client/coral-admin/src/containers/Install/InstallContainer.js b/client/coral-admin/src/containers/Install/InstallContainer.js index aac4654d3..350e60709 100644 --- a/client/coral-admin/src/containers/Install/InstallContainer.js +++ b/client/coral-admin/src/containers/Install/InstallContainer.js @@ -18,7 +18,7 @@ const InstallContainer = props => {

Welcome to the Coral Project

- { install.step !== 0 ? : null } + { install.step !== 0 ? : null } diff --git a/client/coral-admin/src/containers/Install/components/Steps/AddOrganizationName.js b/client/coral-admin/src/containers/Install/components/Steps/AddOrganizationName.js index 74f2c3016..ff7125ab5 100644 --- a/client/coral-admin/src/containers/Install/components/Steps/AddOrganizationName.js +++ b/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

-
- - - -
+
+
{}}> + + + +
); }; diff --git a/client/coral-admin/src/containers/Install/components/Steps/CreateYourAccount.js b/client/coral-admin/src/containers/Install/components/Steps/CreateYourAccount.js index cb29c3429..f245218d8 100644 --- a/client/coral-admin/src/containers/Install/components/Steps/CreateYourAccount.js +++ b/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 (
-
-
- - -
-
- - -
-
- - -
-
- - -
- -
+
+
+ + + + + + + + + + +
); }; diff --git a/client/coral-admin/src/containers/Install/components/Steps/InitialStep.js b/client/coral-admin/src/containers/Install/components/Steps/InitialStep.js index 95043b515..51c40d44d 100644 --- a/client/coral-admin/src/containers/Install/components/Steps/InitialStep.js +++ b/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.

- + ); }; diff --git a/client/coral-admin/src/containers/Install/components/Steps/InviteTeamMembers.js b/client/coral-admin/src/containers/Install/components/Steps/InviteTeamMembers.js index 99ef84d19..156916ab0 100644 --- a/client/coral-admin/src/containers/Install/components/Steps/InviteTeamMembers.js +++ b/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.

-
-
- - -
-
- - -
-
- -
- -
+
+
+ + + + + +
+ + +
+ + + +
); }; diff --git a/client/coral-admin/src/containers/Install/components/Steps/style.css b/client/coral-admin/src/containers/Install/components/Steps/style.css index c7d41aef0..9dd95f90b 100644 --- a/client/coral-admin/src/containers/Install/components/Steps/style.css +++ b/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; + } } } } diff --git a/client/coral-admin/src/containers/Install/style.css b/client/coral-admin/src/containers/Install/style.css index 90c62c20e..62f7ffe04 100644 --- a/client/coral-admin/src/containers/Install/style.css +++ b/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; diff --git a/client/coral-ui/components/Option.css b/client/coral-ui/components/Option.css new file mode 100644 index 000000000..54784d8fc --- /dev/null +++ b/client/coral-ui/components/Option.css @@ -0,0 +1,3 @@ +.Option { + +} diff --git a/client/coral-ui/components/Option.js b/client/coral-ui/components/Option.js new file mode 100644 index 000000000..d322ef0ef --- /dev/null +++ b/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 ( + + {children} + + ); +}; + +export default Option; diff --git a/client/coral-ui/components/Select.css b/client/coral-ui/components/Select.css new file mode 100644 index 000000000..ac93a843c --- /dev/null +++ b/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; + } + +} diff --git a/client/coral-ui/components/Select.js b/client/coral-ui/components/Select.js new file mode 100644 index 000000000..731c50ddc --- /dev/null +++ b/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 ( + + {children} + + ); +}; + +export default Select; diff --git a/client/coral-ui/components/WizardNav.css b/client/coral-ui/components/WizardNav.css index 90d07af09..001ee8603 100644 --- a/client/coral-ui/components/WizardNav.css +++ b/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; diff --git a/client/coral-ui/components/WizardNav.js b/client/coral-ui/components/WizardNav.js index b5a8db549..9fd9a1f23 100644 --- a/client/coral-ui/components/WizardNav.js +++ b/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 (