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.
+
+
Launch Talk
+
Close this Installer
+
+ );
+};
+
+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}