add why no roles and landing pages

UI/src/components/role-editor/RoleEditor.sass

@@ -22,6 +22,22 @@
   &__uncat-zone
     padding: 10px
 
+  &__alert
+    background-color: var(--c-5)
+    padding: 15px      
+
+    a
+      color: var(--c-9)
+      text-decoration: none
+      font-style: italic
+      transition: color 0.15s ease-in-out
+
+      &:hover
+        color: var(--c-white)
+
+        
+      
+
   .role-editor__category
     box-sizing: border-box
     background-color: var(--c-1)

UI/src/components/role-editor/actions.js

@@ -7,13 +7,14 @@ import superagent from 'superagent'
 export const constructView = id => (dispatch, getState) => {
   const server = getState().servers.get(id)
 
-  let { viewMap } = getViewMap(server)
+  let { viewMap, hasSafeRoles } = getViewMap(server)
   viewMap = viewMap.map(c => c.set('mode', Symbol.for('drop')))
 
   dispatch({
     type: Symbol.for('re: setup'),
     data: {
-      viewMap: viewMap,
+      hasSafeRoles,
+      viewMap,
       originalSnapshot: viewMap
     }
   })

UI/src/components/role-editor/index.js

@@ -2,6 +2,8 @@ import React, { Component } from 'react'
 import { Set } from 'immutable'
 import { connect } from 'react-redux'
 import { DropTarget } from 'react-dnd'
+import { Link, Prompt } from 'react-router-dom'
+import { Scrollbars } from 'react-custom-scrollbars'
 import * as Actions from './actions'
 import * as PickerActions from '../role-picker/actions'
 import * as UIActions from '../../actions/ui'
@@ -10,7 +12,6 @@ import './RoleEditor.sass'
 import Category from './Category'
 import CategoryEditor from './CategoryEditor'
 import Role from '../role/draggable'
-import { Scrollbars } from 'react-custom-scrollbars';
 
 const mapState = ({ rolePicker, roleEditor, servers }, ownProps) => ({
   rp: rolePicker,
@@ -113,6 +114,7 @@ class RoleEditor extends Component {
   render () {
     const vm = this.props.editor.get('viewMap')
     return <div className="inner role-editor">
+      <Prompt when={this.hasChanged} message="Are you sure you want to leave? You have unsaved changes that will be lost." />
       <div className="role-picker__header" style={{ marginBottom: 10 }}>
         <h3>{this.props.server.getIn(['server','name'])}</h3>
         <div className="role-picker__spacer"></div>
@@ -161,6 +163,13 @@ class RoleEditor extends Component {
                   .map((r, k) => <Role key={k} categoryId='Uncategorized' role={r} />)
                   .toArray()
               }
+              {
+                (!this.props.editor.hasSafeRoles)
+                ? <div className="role-editor__alert">
+                    <Link to="/help/why-no-roles">Why are there no roles here? <i uk-icon="icon: info" /></Link>
+                  </div>
+                : null
+              }
               </div>
             </Scrollbars>
           </div>)

UI/src/components/role-picker/actions.js

@@ -48,9 +48,12 @@ export const getViewMap = server => {
 
   const selected = roles.reduce((acc, r) => acc.set(r.get('id'), r.get('selected')), Map())
 
+  const hasSafeRoles = allRoles.size > 0
+
   return {
     viewMap,
-    selected
+    selected,
+    hasSafeRoles
   }
 }
 

UI/src/components/role-picker/index.js

@@ -1,5 +1,6 @@
 import React, { Component, Fragment } from 'react'
 import { connect } from 'react-redux'
+import { Prompt } from 'react-router-dom'
 import superagent from 'superagent'
 import * as Actions from './actions'
 import * as UIActions from '../../actions/ui'
@@ -100,6 +101,7 @@ class RolePicker extends Component {
     }
 
     return <div className={`inner role-picker ${(data.get('hidden')) ? 'hidden' : ''}`}>
+      <Prompt when={this.rolesHaveChanged} message="Are you sure you want to leave? You have unsaved changes that will be lost." />
       { this.renderServerMessage(server) }
       <section>
         <div className="role-picker__header">

UI/src/components/role/Role.sass

@@ -22,6 +22,7 @@
         cursor: inherit
 
     &:hover:not(.disabled)
+      cursor: pointer
       .role__option
         transform: translateY(-1px) translateZ(0px)
         box-shadow: 0 1px 1px var(--c-dark)

UI/src/components/role/demo.js

@@ -0,0 +1,19 @@
+import React, { Component } from 'react'
+import { Map } from 'immutable'
+
+import Role from './index'
+
+export default class DemoRole extends Component {
+  state = {
+    isSelected: false
+  }
+
+  handleToggle = () => {
+    this.setState({ isSelected: !this.state.isSelected })
+  }
+
+
+  render () {
+    return <Role selected={this.state.isSelected} role={Map({ name: this.props.name, color: this.props.color })} onToggle={this.handleToggle} type='button' />
+  }
+}

UI/src/components/wrapper/index.js

@@ -11,7 +11,9 @@ class Wrapper extends Component {
       <div style={styles.container}>
         <nav uk-navbar='' style={styles.nav} className='uk-navbar-transparent'>
           <div className='uk-navbar-left'>
-            <Logotype style={{ height: '2rem' }} className='wrapper__logotype' />
+            <Link to="/">
+              <Logotype style={{ height: '2rem' }} className='wrapper__logotype' />
+            </Link>
           </div>
           <div className='uk-navbar-right'>
             <ul className='uk-navbar-nav'>