Indicator for Community

client/coral-admin/src/components/ui/Header.js

@@ -6,11 +6,13 @@ import styles from './Header.css';
 import t from 'coral-framework/services/i18n';
 import {Logo} from './Logo';
 import {can} from 'coral-framework/services/perms';
+import Indicator from './Indicator';
 
 const CoralHeader = ({
   handleLogout,
   showShortcuts = () => {},
-  auth
+  auth,
+  root,
 }) => (
   <Header className={styles.header}>
     <Logo className={styles.logo} />
@@ -33,6 +35,7 @@ const CoralHeader = ({
                   to="/admin/moderate"
                   activeClassName={styles.active}>
                   {t('configure.moderate')}
+                  <Indicator />
                 </Link>
               )
             }
@@ -43,13 +46,16 @@ const CoralHeader = ({
               activeClassName={styles.active}>
               {t('configure.stories')}
             </Link>
+
             <Link
               id='communityNav'
               className={styles.navLink}
               to="/admin/community"
               activeClassName={styles.active}>
               {t('configure.community')}
+              {root.flaggedUsernamesCount !== 0 && <Indicator />}
             </Link>
+
             {
               can(auth.user, 'UPDATE_CONFIG') && (
                 <Link

client/coral-admin/src/components/ui/Indicator.css

@@ -0,0 +1,10 @@
+.indicator {
+  background-color: #E46D59;
+  border-radius: 10px;
+  position: absolute;
+  top: 50%;
+  width: 7px;
+  height: 7px;
+  margin-top: -4px;
+  margin-left: 7px;
+}

client/coral-admin/src/components/ui/Indicator.js

@@ -0,0 +1,7 @@
+import React from 'react';
+import styles from './Indicator.css';
+
+const Indicator = () => 
+  <span className={styles.indicator}></span>;
+
+export default Indicator;

client/coral-admin/src/components/ui/Layout.js

@@ -8,15 +8,22 @@ import styles from './Layout.css';
 const Layout = ({
   children,
   handleLogout = () => {},
-  toggleShortcutModal,
+  toggleShortcutModal = () => {},
   restricted = false,
-  ...props}) => (
+  root,
+  auth,
+}) => (
   <LayoutMDL className={styles.layout} fixedDrawer>
     <Header
       handleLogout={handleLogout}
       showShortcuts={toggleShortcutModal}
-      {...props} />
-    <Drawer handleLogout={handleLogout} restricted={restricted} {...props} />
+      root={root}
+      auth={auth}
+    />
+    <Drawer 
+      handleLogout={handleLogout}
+      restricted={restricted}
+    />
     <div className={styles.layout}>
       {children}
     </div>
@@ -24,6 +31,9 @@ const Layout = ({
 );
 
 Layout.propTypes = {
+  children: PropTypes.node,
+  auth: PropTypes.object,
+  root: PropTypes.object,
   handleLogout: PropTypes.func,
   toggleShortcutModal: PropTypes.func,
   restricted: PropTypes.bool // hide elements from a user that's logged out

client/coral-admin/src/components/ui/Logo.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import styles from './Logo.css';
 import {CoralLogo} from 'coral-ui';
+import PropTypes from 'prop-types';
 
 export const Logo = ({className = ''}) => (
   <div className={`${styles.logo} ${className}`}>
@@ -10,3 +11,7 @@ export const Logo = ({className = ''}) => (
     </h1>
   </div>
 );
+
+Logo.propTypes = {
+  className: PropTypes.string
+};

client/coral-admin/src/containers/Layout.js

@@ -25,6 +25,7 @@ class LayoutContainer extends Component {
     checkLogin();
     fetchConfig();
   }
+
   render() {
 
     const {
@@ -65,8 +66,8 @@ class LayoutContainer extends Component {
         <Layout
           handleLogout={logout}
           toggleShortcutModal={toggleShortcutModal}
-          {...this.props}
-        >
+          root={this.props.root} 
+          auth={this.props.auth} >
           <BanUserDialog />
           <SuspendUserDialog />
           <UserDetail />