sign up buttons

components/header.js

@@ -7,7 +7,7 @@ import { Button, Container, NavDropdown } from 'react-bootstrap'
 import Price from './price'
 import { useMe } from './me'
 import Head from 'next/head'
-import { signOut, signIn } from 'next-auth/client'
+import { signOut } from 'next-auth/client'
 import { useLightning } from './lightning'
 import { useEffect, useState } from 'react'
 import { randInRange } from '../lib/rand'
@@ -50,7 +50,7 @@ export default function Header ({ sub }) {
       }
       setLastCheckedJobs(localStorage.getItem('lastCheckedJobs'))
     }
-  })
+  }, [sub])
 
   const Corner = () => {
     if (me) {
@@ -134,18 +134,30 @@ export default function Header ({ sub }) {
           return () => { isMounted = false }
         }, [])
       }
-      return path !== '/login' && !path.startsWith('/invites') &&
-        <Button
-          className='align-items-center d-flex pl-2 pr-3'
-          id='login'
-          onClick={() => signIn(null, { callbackUrl: window.location.origin + router.asPath })}
-        >
-          <LightningIcon
-            width={17}
-            height={17}
-            className='mr-1'
-          />login
-        </Button>
+      return path !== '/login' && path !== '/signup' && !path.startsWith('/invites') &&
+        <div>
+          <Button
+            className='align-items-center px-3 py-1 mr-2'
+            id='signup'
+            style={{ borderWidth: '2px' }}
+            variant='outline-grey-darkmode'
+            onClick={async () => await router.push({ pathname: '/login', query: { callbackUrl: window.location.origin + router.asPath } })}
+          >
+            login
+          </Button>
+          <Button
+            className='align-items-center pl-2 py-1 pr-3'
+            style={{ borderWidth: '2px' }}
+            id='login'
+            onClick={async () => await router.push({ pathname: '/signup', query: { callbackUrl: window.location.origin + router.asPath } })}
+          >
+            <LightningIcon
+              width={17}
+              height={17}
+              className='mr-1'
+            />sign up
+          </Button>
+        </div>
     }
   }
 

components/header.module.css

@@ -11,6 +11,7 @@
 
 .navLinkButton {
     border: 2px solid;
+    padding: 0.2rem .9rem !important;
     border-radius: .4rem;
 }
 
@@ -57,6 +58,6 @@
     padding: 0;
 }
 
-.dropdown > a {
+.dropdown>a {
     padding-left: 0 !important;
 }

components/login.js

@@ -16,7 +16,7 @@ export const EmailSchema = Yup.object({
   email: Yup.string().email('email is no good').required('required')
 })
 
-export function EmailLoginForm ({ callbackUrl }) {
+export function EmailLoginForm ({ text, callbackUrl }) {
   return (
     <Form
       initial={{
@@ -34,12 +34,12 @@ export function EmailLoginForm ({ callbackUrl }) {
         required
         autoFocus
       />
-      <SubmitButton variant='secondary' className={styles.providerButton}>Login with Email</SubmitButton>
+      <SubmitButton variant='secondary' className={styles.providerButton}>{text || 'Login'} with Email</SubmitButton>
     </Form>
   )
 }
 
-export default function Login ({ providers, callbackUrl, error, Header }) {
+export default function Login ({ providers, callbackUrl, error, text, Header, Footer }) {
   const errors = {
     Signin: 'Try signing with a different account.',
     OAuthSignin: 'Try signing with a different account.',
@@ -60,9 +60,6 @@ export default function Login ({ providers, callbackUrl, error, Header }) {
     <LayoutCenter noFooter>
       <div className={styles.login}>
         {Header && <Header />}
-        <div className='text-center font-weight-bold text-muted pb-4'>
-          Not registered? Just login, we'll automatically create an account.
-        </div>
         {errorMessage &&
           <Alert variant='danger' onClose={() => setErrorMessage(undefined)} dismissible>{errorMessage}</Alert>}
         {router.query.type === 'lightning'
@@ -81,7 +78,7 @@ export default function Login ({ providers, callbackUrl, error, Header }) {
                   width={20}
                   height={20}
                   className='mr-3'
-                />Login with Lightning
+                />{text || 'Login'} with Lightning
               </Button>
               {Object.values(providers).map(provider => {
                 if (provider.name === 'Email' || provider.name === 'Lightning') {
@@ -101,13 +98,14 @@ export default function Login ({ providers, callbackUrl, error, Header }) {
                   >
                     <Icon
                       className='mr-3'
-                    />Login with {provider.name}
+                    />{text || 'Login'} with {provider.name}
                   </Button>
                 )
               })}
               <div className='mt-2 text-center text-muted font-weight-bold'>or</div>
-              <EmailLoginForm callbackUrl={callbackUrl} />
+              <EmailLoginForm text={text} callbackUrl={callbackUrl} />
             </>)}
+        {Footer && <Footer />}
       </div>
     </LayoutCenter>
   )

components/price.js

@@ -78,7 +78,7 @@ export default function Price () {
 
   if (asSats === 'yep') {
     return (
-      <Button className='text-reset p-0' onClick={handleClick} variant='link'>
+      <Button className='text-reset p-0 line-height-1' onClick={handleClick} variant='link'>
         {fixedDecimal(100000000 / price, 0) + ` sats/${fiatSymbol}`}
       </Button>
     )
@@ -86,14 +86,14 @@ export default function Price () {
 
   if (asSats === '1btc') {
     return (
-      <Button className='text-reset p-0' onClick={handleClick} variant='link'>
+      <Button className='text-reset p-0 line-height-1' onClick={handleClick} variant='link'>
         1sat=1sat
       </Button>
     )
   }
 
   return (
-    <Button className='text-reset p-0' onClick={handleClick} variant='link'>
+    <Button className='text-reset p-0 line-height-1' onClick={handleClick} variant='link'>
       {fiatSymbol + fixedDecimal(price, 0)}
     </Button>
   )

pages/invites/[id].js

@@ -63,7 +63,7 @@ function InviteHeader ({ invite }) {
   } else {
     Inner = () => (
       <div>
-        get <span className='text-success'>{invite.gift} free sats</span> from{' '}
+        Get <span className='text-success'>{invite.gift} free sats</span> from{' '}
         <Link href={`/${invite.user.name}`} passHref><a>@{invite.user.name}</a></Link>{' '}
         when you sign up today
       </div>
@@ -71,12 +71,12 @@ function InviteHeader ({ invite }) {
   }
 
   return (
-    <h2 className='text-center pb-3'>
+    <h3 className='text-center pb-3'>
       <Inner />
-    </h2>
+    </h3>
   )
 }
 
 export default function Invite ({ invite, ...props }) {
-  return <Login Header={() => <InviteHeader invite={invite} />} {...props} />
+  return <Login Header={() => <InviteHeader invite={invite} />} text='Sign up' {...props} />
 }

pages/login.js

@@ -1,4 +1,5 @@
 import { providers, getSession } from 'next-auth/client'
+import Link from 'next/link'
 import Login from '../components/login'
 
 export async function getServerSideProps ({ req, res, query: { callbackUrl, error = null } }) {
@@ -21,4 +22,17 @@ export async function getServerSideProps ({ req, res, query: { callbackUrl, erro
   }
 }
 
-export default Login
+function LoginFooter ({ callbackUrl }) {
+  return (
+    <small className='font-weight-bold text-muted pt-4'>Don't have an account? <Link href={{ pathname: '/signup', query: { callbackUrl } }}>sign up</Link></small>
+  )
+}
+
+export default function LoginPage (props) {
+  return (
+    <Login
+      Footer={() => <LoginFooter callbackUrl={props.callbackUrl} />}
+      {...props}
+    />
+  )
+}

styles/globals.scss

@@ -7,6 +7,7 @@ $theme-colors: (
   "twitter" : #1da1f2,
   "boost" : #8c25f4,
   "grey" : #e9ecef,
+  "grey-darkmode": #8c8c8c
 );
 
 $body-bg: #f5f5f5;
@@ -61,6 +62,10 @@ $tooltip-bg: #5c8001;
   }
 }
 
+.line-height-1 {
+  line-height: 1;
+}
+
 .lexical blockquote>* {
   margin-bottom: 0 !important;
 }
@@ -196,6 +201,10 @@ div[contenteditable]:disabled,
   fill: #212529;
 }
 
+.btn-grey svg {
+  fill: #212529;
+}
+
 .fresh {
   background-color: var(--theme-clickToContextColor);
   border-radius: .4rem;