From 36988d7e203482fca95ca31bd43dd174f706dc3c Mon Sep 17 00:00:00 2001
From: okbel <curciobelen@gmail.com>
Date: Thu, 22 Mar 2018 15:29:56 -0300
Subject: [PATCH] Forbidden component

---
 client/coral-admin/src/components/Forbidden.css     |  8 ++++++++
 client/coral-admin/src/components/Forbidden.js      | 13 +++++++++++++
 client/coral-admin/src/containers/Layout.js         |  6 ++----
 .../Moderation/components/ModerationQueue.css       |  4 ----
 views/admin.ejs                                     | 11 ++++++-----
 5 files changed, 29 insertions(+), 13 deletions(-)
 create mode 100644 client/coral-admin/src/components/Forbidden.css
 create mode 100644 client/coral-admin/src/components/Forbidden.js

diff --git a/client/coral-admin/src/components/Forbidden.css b/client/coral-admin/src/components/Forbidden.css
new file mode 100644
index 000000000..8f93cf869
--- /dev/null
+++ b/client/coral-admin/src/components/Forbidden.css
@@ -0,0 +1,8 @@
+.container {
+  max-width: 1280px;
+  margin: 0 auto;
+}
+
+.copy {
+  padding: 20px 0;
+}
\ No newline at end of file
diff --git a/client/coral-admin/src/components/Forbidden.js b/client/coral-admin/src/components/Forbidden.js
new file mode 100644
index 000000000..0c50e6d76
--- /dev/null
+++ b/client/coral-admin/src/components/Forbidden.js
@@ -0,0 +1,13 @@
+import React from 'react';
+import styles from './Forbidden.css';
+
+const Forbidden = () => (
+  <div className={styles.container}>
+    <p className={styles.copy}>
+      This page is for team use only. Please contact an administrator if you
+      want to join this team.
+    </p>
+  </div>
+);
+
+export default Forbidden;
diff --git a/client/coral-admin/src/containers/Layout.js b/client/coral-admin/src/containers/Layout.js
index aad9971c4..580b20f9b 100644
--- a/client/coral-admin/src/containers/Layout.js
+++ b/client/coral-admin/src/containers/Layout.js
@@ -11,6 +11,7 @@ import { logout } from 'coral-framework/actions/auth';
 import { can } from 'coral-framework/services/perms';
 import UserDetail from 'coral-admin/src/containers/UserDetail';
 import PropTypes from 'prop-types';
+import Forbidden from '../components/Forbidden';
 
 class LayoutContainer extends React.Component {
   render() {
@@ -47,10 +48,7 @@ class LayoutContainer extends React.Component {
       } else {
         return (
           <Layout {...this.props} handleLogout={logout}>
-            <p>
-              This page is for team use only. Please contact an administrator if
-              you want to join this team.
-            </p>
+            <Forbidden />
           </Layout>
         );
       }
diff --git a/client/coral-admin/src/routes/Moderation/components/ModerationQueue.css b/client/coral-admin/src/routes/Moderation/components/ModerationQueue.css
index 465c7ccbd..cef4184db 100644
--- a/client/coral-admin/src/routes/Moderation/components/ModerationQueue.css
+++ b/client/coral-admin/src/routes/Moderation/components/ModerationQueue.css
@@ -6,10 +6,6 @@
   margin-top: 16px;
 }
 
-:global(html) {
-  height: inherit;
-}
-
 .list {
   outline: none;
 }
diff --git a/views/admin.ejs b/views/admin.ejs
index 1ecca390e..a5e05032e 100644
--- a/views/admin.ejs
+++ b/views/admin.ejs
@@ -4,17 +4,18 @@
     <meta name="viewport" content="initial-scale=1, maximum-scale=1">
     <title>Talk - Coral Admin</title>
     <style media="screen">
-      body, #root {
-        width: 100%;
+      
+
+      html, body, #root, #root > div {
         height: 100%;
+      }
+
+      body {
         margin: 0;
         background-color: #FAFAFA;
         font-family: 'Roboto', sans-serif;
       }
 
-      #root > div {
-        height: 100%;
-      }
     </style>
     <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
     <link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.min.css">