Move login button (#867)

* move login button

* reuse loginGitHub

* remove old comment

components/Editor.js

@@ -16,7 +16,6 @@ import Carbon from './Carbon'
 import ExportMenu from './ExportMenu'
 import Themes from './Themes'
 import TweetButton from './TweetButton'
-import LoginButton from './LoginButton'
 import FontFace from './FontFace'
 import LanguageIcon from './svg/Language'
 import {
@@ -355,7 +354,6 @@ class Editor extends React.Component {
     return (
       <div className="editor">
         <Toolbar>
-          <LoginButton />
           <Themes
             theme={theme}
             highlights={highlights}

components/EditorContainer.js

@@ -1,16 +1,17 @@
 // Theirs
 import React from 'react'
+import { useAsyncCallback } from '@dawnlabs/tacklebox'
 
 import Editor from './Editor'
 import Toasts from './Toasts'
+import LoginButton from './LoginButton'
+import { useAPI } from './ApiContext'
+import { useAuth } from './AuthContext'
+
 import { THEMES } from '../lib/constants'
 import { updateRouteState } from '../lib/routing'
 import { getThemes, saveThemes, clearSettings, saveSettings } from '../lib/util'
 
-import { useAPI } from './ApiContext'
-import { useAuth } from './AuthContext'
-import { useAsyncCallback } from '@dawnlabs/tacklebox'
-
 function onReset() {
   clearSettings()
 
@@ -101,6 +102,18 @@ function EditorContainer(props) {
 
   return (
     <>
+      <div className="login-button-container">
+        <LoginButton />
+        <style jsx>
+          {`
+            .login-button-container {
+              position: absolute;
+              top: 1rem;
+              right: 2rem;
+            }
+          `}
+        </style>
+      </div>
       <Toasts toasts={toasts} />
       <Editor
         {...props}

components/LoginButton.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import Link from 'next/link'
-import firebase, { login, logout } from '../lib/client'
+import firebase, { logout, loginGitHub } from '../lib/client'
 
 import Button from './Button'
 import Popout, { managePopout } from './Popout'
@@ -13,7 +13,6 @@ function Drawer(props) {
         <Link href="/snippets">
           <Button large center padding="0.5rem 0" style={{ borderBottom: '1px solid' }}>
             <img src="/static/svg/snippets.svg" alt="Snippets page" width="16px" /> Snippets{' '}
-            {/* FILES? */}
           </Button>
         </Link>
         <Link href="/account">
@@ -66,11 +65,7 @@ function LoginButton({ isVisible, toggleVisibility }) {
         className="profile-button"
         onClick={() => {
           if (!user) {
-            const provider = new firebase.auth.GithubAuthProvider()
-            provider.setCustomParameters({
-              allow_signup: 'true'
-            })
-            login(provider)
+            loginGitHub()
           } else {
             toggleVisibility()
           }