fix unsafe roles being usable, begin work on role/server editor

UI/src/components/servers/ServerCard.sass

@@ -25,9 +25,9 @@
 
     &__icon img
       border-radius: 100%
-      width: 50px
-      height: 50px
-      border: 2px solid transparent  
+      max-width: 50px
+      max-height: 50px
+      border: 2px solid transparent
 
     &__info
       padding: 0 10px

UI/src/components/servers/index.js

@@ -1,19 +1,22 @@
 import React, { Component } from 'react'
 import { Route } from 'react-router-dom'
+import { CSSTransition, TransitionGroup } from 'react-transition-group'
 import { Scrollbars } from 'react-custom-scrollbars'
 import { connect } from 'react-redux'
+import { withRouter } from 'react-router'
 import './index.sass'
 
 import Navigation from './Navigation'
 import RolePicker from '../role-picker'
-import { withRouter } from 'react-router';
+import RoleEditor from '../role-editor'
 
 // import mockData from './mockData'
 
-const mapState = ({ servers, user }) => {
+const mapState = ({ servers, user, appState }) => {
   return {
     servers,
-    user
+    user,
+    fade: appState.fade
   }
 }
 
@@ -22,12 +25,12 @@ class Servers extends Component {
   render () {
     return <div className="servers">
       <Navigation className="servers__nav" servers={this.props.servers} user={this.props.user} />
-        <div className="servers__content">
-          <Scrollbars autoHeight autoHeightMax='calc(100vh - 80px)'>
-            <Route path='/s/:server' component={RolePicker} />
-            <Route path='/s/:server/edit' component={RolePicker} />
-          </Scrollbars>
-        </div>
+      <div className='servers__content'>
+        <Scrollbars className={`fade-element ${(this.props.fade) ? 'fade' : ''}`} autoHeight autoHeightMax='calc(100vh - 80px)'>
+          <Route path='/s/:server' component={RolePicker} exact />
+        </Scrollbars>
+        <Route path='/s/:server/edit' component={RoleEditor} />
+      </div>
     </div>
   }
 }