Display login button on all pages (#909)

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}

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 {

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};