From 31de1df62f00c0c963fe378b4ce243837bae0787 Mon Sep 17 00:00:00 2001
From: Andrew Dassonville <dassonville.andrew@gmail.com>
Date: Mon, 2 Dec 2019 22:13:24 -0800
Subject: [PATCH] Display login button on all pages (#909)

---
 components/EditorContainer.js | 13 -------------
 components/LoginButton.js     |  2 +-
 components/Page.js            |  9 +++++++++
 3 files changed, 10 insertions(+), 14 deletions(-)

diff --git a/components/EditorContainer.js b/components/EditorContainer.js
index 04571cf..cd8f696 100644
--- a/components/EditorContainer.js
+++ b/components/EditorContainer.js
@@ -4,7 +4,6 @@ import { useAsyncCallback } from 'actionsack'
 
 import Editor from './Editor'
 import Toasts from './Toasts'
-import LoginButton from './LoginButton'
 import { useAPI } from './ApiContext'
 import { useAuth } from './AuthContext'
 
@@ -102,18 +101,6 @@ function EditorContainer(props) {
 
   return (
     <>
-      <div className="login-button-container">
-        <LoginButton />
-        <style jsx>
-          {`
-            .login-button-container {
-              position: absolute;
-              top: 1.4rem;
-              right: 1rem;
-            }
-          `}
-        </style>
-      </div>
       <Toasts toasts={toasts} />
       <Editor
         {...props}
diff --git a/components/LoginButton.js b/components/LoginButton.js
index f73d075..48b66b5 100644
--- a/components/LoginButton.js
+++ b/components/LoginButton.js
@@ -87,7 +87,7 @@ function LoginButton({ isVisible, toggleVisibility }) {
             height: 100%;
           }
           div :global(.profile-button) {
-            max-width: 142px;
+            max-width: 218px;
             min-height: 40px;
           }
           span {
diff --git a/components/Page.js b/components/Page.js
index 1d20689..c8ee2b1 100644
--- a/components/Page.js
+++ b/components/Page.js
@@ -4,6 +4,7 @@ import Meta from './Meta'
 import Header from './Header'
 import Footer from './Footer'
 import Announcement from './Announcement'
+import LoginButton from './LoginButton'
 
 const COLUMN = `
   display: flex;
@@ -20,6 +21,9 @@ class Page extends React.Component {
         <AuthContext>
           <Announcement />
           <Header enableHeroText={enableHeroText} />
+          <div className="login-button-container">
+            <LoginButton />
+          </div>
           <div className="page">{children}</div>
         </AuthContext>
 
@@ -30,6 +34,11 @@ class Page extends React.Component {
             .main {
               ${flex ? COLUMN : ''}
             }
+            .login-button-container {
+              position: absolute;
+              top: 1.4rem;
+              right: 1rem;
+            }
             @media (min-width: 1024px) {
               .main {
                 ${COLUMN};