diff --git a/client/coral-admin/src/AppRouter.js b/client/coral-admin/src/AppRouter.js index ebb79b4e1..bebe6a19b 100644 --- a/client/coral-admin/src/AppRouter.js +++ b/client/coral-admin/src/AppRouter.js @@ -10,14 +10,16 @@ import LayoutContainer from 'containers/LayoutContainer'; import InstallContainer from 'containers/Install/InstallContainer'; const routes = ( - - - - - - - - +
+ + + + + + + + +
); const AppRouter = () => ; diff --git a/client/coral-admin/src/components/ui/Header.js b/client/coral-admin/src/components/ui/Header.js index 4e2b391c8..abfb0ff13 100644 --- a/client/coral-admin/src/components/ui/Header.js +++ b/client/coral-admin/src/components/ui/Header.js @@ -6,19 +6,32 @@ import I18n from 'coral-framework/modules/i18n/i18n'; import translations from '../../translations.json'; import {Logo} from './Logo'; -export default ({handleLogout}) => ( +export default ({handleLogout, restricted = false}) => (
- - {lang.t('configure.moderate')} - {lang.t('configure.community')} - {lang.t('configure.configure')} - {lang.t('configure.streams')} - + { + !restricted ? + + + {lang.t('configure.moderate')} + + + {lang.t('configure.community')} + + + {lang.t('configure.configure')} + + + {lang.t('configure.streams')} + + + : + null + }
  • diff --git a/client/coral-admin/src/containers/Install/InstallContainer.js b/client/coral-admin/src/containers/Install/InstallContainer.js index 8ed0bbf69..aac4654d3 100644 --- a/client/coral-admin/src/containers/Install/InstallContainer.js +++ b/client/coral-admin/src/containers/Install/InstallContainer.js @@ -3,22 +3,31 @@ import {connect} from 'react-redux'; import styles from './style.css'; import {nextStep, previousStep, goToStep} from '../../actions/install'; import {Wizard, WizardNav} from 'coral-ui'; +import {Layout} from '../../components/ui/Layout'; import InitialStep from './components/Steps/InitialStep'; import AddOrganizationName from './components/Steps/AddOrganizationName'; +import CreateYourAccount from './components/Steps/CreateYourAccount'; +import InviteTeamMembers from './components/Steps/InviteTeamMembers'; +import FinalStep from './components/Steps/FinalStep'; const InstallContainer = props => { const {nextStep, previousStep, goToStep, install} = props; return ( -
    -

    Welcome to the Coral Project

    - { install.step !== 0 ? : null } - - - - -
    + +
    +

    Welcome to the Coral Project

    + { install.step !== 0 ? : null } + + + + + + + +
    +
    ); }; diff --git a/client/coral-admin/src/containers/Install/components/Steps/CreateYourAccount.js b/client/coral-admin/src/containers/Install/components/Steps/CreateYourAccount.js new file mode 100644 index 000000000..cb29c3429 --- /dev/null +++ b/client/coral-admin/src/containers/Install/components/Steps/CreateYourAccount.js @@ -0,0 +1,32 @@ +import React from 'react'; +import styles from './style.css'; +import {Button} from 'coral-ui'; + +const InitialStep = props => { + const {nextStep} = props; + return ( +
    +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    + + +
    + +
    +
    + ); +}; + +export default InitialStep; diff --git a/client/coral-admin/src/containers/Install/components/Steps/FinalStep.js b/client/coral-admin/src/containers/Install/components/Steps/FinalStep.js new file mode 100644 index 000000000..0b58508a0 --- /dev/null +++ b/client/coral-admin/src/containers/Install/components/Steps/FinalStep.js @@ -0,0 +1,19 @@ +import React from 'react'; +import styles from './style.css'; +import {Button} from 'coral-ui'; + +const InitialStep = props => { + const {nextStep} = props; + return ( +
    +

    + Thanks for installing Talk! We sent an email to your team member. + While they finish setting up their account, start engaging with your readers now. +

    + + +
    + ); +}; + +export default InitialStep; diff --git a/client/coral-admin/src/containers/Install/components/Steps/InviteTeamMembers.js b/client/coral-admin/src/containers/Install/components/Steps/InviteTeamMembers.js new file mode 100644 index 000000000..99ef84d19 --- /dev/null +++ b/client/coral-admin/src/containers/Install/components/Steps/InviteTeamMembers.js @@ -0,0 +1,35 @@ +import React from 'react'; +import styles from './style.css'; +import {Button} from 'coral-ui'; + +const InviteTeamMembers = props => { + const {nextStep} = props; + return ( +
    +

    Invite Team Members

    +

    + Once registered, new team members will receive an email to Create + their password. +

    +
    +
    + + +
    +
    + + +
    +
    + +
    + +
    +
    + ); +}; + +export default InviteTeamMembers; 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 5284b3470..c7d41aef0 100644 --- a/client/coral-admin/src/containers/Install/components/Steps/style.css +++ b/client/coral-admin/src/containers/Install/components/Steps/style.css @@ -25,6 +25,11 @@ width: 100%; box-sizing: border-box; margin: 10px 0; + transition: border-color 0.2 ease; + + &:focus { + border-color: black; + } } } } diff --git a/client/coral-ui/components/WizardNav.css b/client/coral-ui/components/WizardNav.css index 12b9b3841..90d07af09 100644 --- a/client/coral-ui/components/WizardNav.css +++ b/client/coral-ui/components/WizardNav.css @@ -12,11 +12,23 @@ color: #A7A7A7; position: relative; padding-left: 40px; - + border-radius: 1px; + &:hover { cursor: pointer; } + &.done { + border-color: #00796B; + background-color: #00796B; + color: #ffffff; + span { + &::after { + border-color: transparent transparent transparent #00796B; + } + } + } + &.active { background-color: #FFFFFF; color: #636363; @@ -64,7 +76,7 @@ position: absolute; border: 23px solid #DFDFDF; border-color: transparent transparent transparent #DFDFDF; - top: 0; + top: -1px; left: 0; } @@ -74,36 +86,9 @@ position: absolute; border: 23px solid white; border-color: transparent transparent transparent #fafafa; - top: 0; + top: -1px; left: -1px; } -/* - &::before { - position: absolute; - top: 0; - left: -1px; - display: block; - border-left: 23px solid white; - border-top: 23px solid transparent; - border-bottom: 23px solid transparent; - width: 0; - height: 0; - content: " "; - } - - &::after{ - z-index: 1; - position: absolute; - top: 0; - right: -23px; - display: block; - border-left: 23px solid #f0f0f0; - border-top: 23px solid transparent; - border-bottom: 23px solid transparent; - width: 0; - height: 0; - content: " "; - }*/ } } diff --git a/client/coral-ui/components/WizardNav.js b/client/coral-ui/components/WizardNav.js index 200adb216..b5a8db549 100644 --- a/client/coral-ui/components/WizardNav.js +++ b/client/coral-ui/components/WizardNav.js @@ -10,7 +10,7 @@ const WizardNav = props => { items.map((item, i) => (
  • goToStep(item.step)}> {item.text}