From 91a25fc3c12e3f95708d34d588d62c675a30193a Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Thu, 5 Oct 2017 08:00:08 -0300
Subject: [PATCH] max-width

---
 .../coral-admin/src/components/ui/Header.css  |   8 +-
 .../coral-admin/src/components/ui/Header.js   | 170 +++++++++---------
 .../coral-admin/src/components/ui/Layout.css  |   4 +-
 3 files changed, 93 insertions(+), 89 deletions(-)

diff --git a/client/coral-admin/src/components/ui/Header.css b/client/coral-admin/src/components/ui/Header.css
index f85a7cdf9..e6791b63b 100644
--- a/client/coral-admin/src/components/ui/Header.css
+++ b/client/coral-admin/src/components/ui/Header.css
@@ -15,19 +15,23 @@
   }
 }
 
+.headerWrapper {
+  background-color: #696969;
+}
+
 .header {
   background-color: transparent;
   box-shadow: none;
   min-height: 58px;
   display: block;
+  max-width: 1280px;
+  margin: 0 auto;
 }
 
 .header > div {
   background-color: #696969;
   position: relative;
   padding: 0;
-  min-width: 1280px;
-  margin: 0 auto;
   box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
   height: 58px;
 }
diff --git a/client/coral-admin/src/components/ui/Header.js b/client/coral-admin/src/components/ui/Header.js
index 30c5fa7e6..62f6a7fd1 100644
--- a/client/coral-admin/src/components/ui/Header.js
+++ b/client/coral-admin/src/components/ui/Header.js
@@ -15,93 +15,95 @@ const CoralHeader = ({
   root
 }) => {
   return (
-    <Header className={styles.header}>
-      <Logo className={styles.logo} />
-      <div> 
-        {
-          auth && auth.user && can(auth.user, 'ACCESS_ADMIN') ?
-            <Navigation className={styles.nav}>
-              <IndexLink
-                id='dashboardNav'
-                className={styles.navLink}
-                to="/admin/dashboard"
-                activeClassName={styles.active}>
-                {t('configure.dashboard')}
-              </IndexLink>
-              {
-                can(auth.user, 'MODERATE_COMMENTS') && (
-                  <Link
-                    id='moderateNav'
-                    className={styles.navLink}
-                    to="/admin/moderate"
-                    activeClassName={styles.active}>
-                    {t('configure.moderate')}
-                    {(root.premodCount !== 0 || root.reportedCount !== 0) && <Indicator />}
-                  </Link>
-                )
-              }
-              <Link
-                id='streamsNav'
-                className={styles.navLink}
-                to="/admin/stories"
-                activeClassName={styles.active}>
-                {t('configure.stories')}
-              </Link>
+    <div className={styles.headerWrapper}>
+      <Header className={styles.header}>
+        <Logo className={styles.logo} />
+        <div> 
+          {
+            auth && auth.user && can(auth.user, 'ACCESS_ADMIN') ?
+              <Navigation className={styles.nav}>
+                <IndexLink
+                  id='dashboardNav'
+                  className={styles.navLink}
+                  to="/admin/dashboard"
+                  activeClassName={styles.active}>
+                  {t('configure.dashboard')}
+                </IndexLink>
+                {
+                  can(auth.user, 'MODERATE_COMMENTS') && (
+                    <Link
+                      id='moderateNav'
+                      className={styles.navLink}
+                      to="/admin/moderate"
+                      activeClassName={styles.active}>
+                      {t('configure.moderate')}
+                      {(root.premodCount !== 0 || root.reportedCount !== 0) && <Indicator />}
+                    </Link>
+                  )
+                }
+                <Link
+                  id='streamsNav'
+                  className={styles.navLink}
+                  to="/admin/stories"
+                  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>
+                <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
-                    id='configureNav'
-                    className={styles.navLink}
-                    to="/admin/configure"
-                    activeClassName={styles.active}>
-                    {t('configure.configure')}
-                  </Link>
-                )
-              }
-            </Navigation>
-            :
-            null
-        }
-        <div className={styles.rightPanel}>
-          <ul>
-            <li className={styles.settings}>
-              <div>
-                <IconButton name="settings" id="menu-settings"/>
-                <Menu target="menu-settings" align="right">
-                  <MenuItem onClick={() => showShortcuts(true)}>{t('configure.shortcuts')}</MenuItem>
-                  <MenuItem>
-                    <a href="https://github.com/coralproject/talk/releases" target="_blank" rel="noopener noreferrer">
-                        View latest version
-                    </a>
-                  </MenuItem>
-                  <MenuItem>
-                    <a href="https://coralproject.net/contribute.html#other-ideas-and-bug-reports" target="_blank" rel="noopener noreferrer">
-                        Report a bug or give feedback
-                    </a>
-                  </MenuItem>
-                  <MenuItem onClick={handleLogout}>
-                    {t('configure.sign_out')}
-                  </MenuItem>
-                </Menu>
-              </div>
-            </li>
-            <li>
-              {`v${process.env.VERSION}`}
-            </li>
-          </ul>
+                {
+                  can(auth.user, 'UPDATE_CONFIG') && (
+                    <Link
+                      id='configureNav'
+                      className={styles.navLink}
+                      to="/admin/configure"
+                      activeClassName={styles.active}>
+                      {t('configure.configure')}
+                    </Link>
+                  )
+                }
+              </Navigation>
+              :
+              null
+          }
+          <div className={styles.rightPanel}>
+            <ul>
+              <li className={styles.settings}>
+                <div>
+                  <IconButton name="settings" id="menu-settings"/>
+                  <Menu target="menu-settings" align="right">
+                    <MenuItem onClick={() => showShortcuts(true)}>{t('configure.shortcuts')}</MenuItem>
+                    <MenuItem>
+                      <a href="https://github.com/coralproject/talk/releases" target="_blank" rel="noopener noreferrer">
+                          View latest version
+                      </a>
+                    </MenuItem>
+                    <MenuItem>
+                      <a href="https://coralproject.net/contribute.html#other-ideas-and-bug-reports" target="_blank" rel="noopener noreferrer">
+                          Report a bug or give feedback
+                      </a>
+                    </MenuItem>
+                    <MenuItem onClick={handleLogout}>
+                      {t('configure.sign_out')}
+                    </MenuItem>
+                  </Menu>
+                </div>
+              </li>
+              <li>
+                {`v${process.env.VERSION}`}
+              </li>
+            </ul>
+          </div>
         </div>
-      </div>
-    </Header>
+      </Header>
+    </div>
   );
 };
 
diff --git a/client/coral-admin/src/components/ui/Layout.css b/client/coral-admin/src/components/ui/Layout.css
index a3cc7b7b6..3554c20e6 100644
--- a/client/coral-admin/src/components/ui/Layout.css
+++ b/client/coral-admin/src/components/ui/Layout.css
@@ -1,5 +1,3 @@
 .layout {
-    max-width: 1280px;
-    margin: 0 auto;
-    background-color: #FAFAFA;
+  background-color: #FAFAFA;
 }