offcanvas style and login fixes

components/nav/common.js

@@ -45,7 +45,6 @@ export function noNavSelect ({ path, pathname }) {
     path.startsWith('/referrals') ||
     path.startsWith('/live') ||
     path.startsWith('/settings') ||
-    path.startsWith('/referrals') ||
     path.startsWith('/invites') ||
     path.startsWith('/stackers') ||
     path.startsWith('/satistics') ||
@@ -241,7 +240,13 @@ export function MeDropdown ({ me, dropNavKey }) {
   )
 }
 
-export function SignUpButton ({ handleLogin, className = 'py-0' }) {
+export function SignUpButton ({ className = 'py-0' }) {
+  const router = useRouter()
+  const handleLogin = useCallback(async pathname => await router.push({
+    pathname,
+    query: { callbackUrl: window.location.origin + router.asPath }
+  }), [router])
+
   return (
     <Button
       className={classNames('align-items-center ps-2 pe-3', className)}
@@ -258,25 +263,31 @@ export function SignUpButton ({ handleLogin, className = 'py-0' }) {
   )
 }
 
-export function LoginButtons () {
+export default function LoginButton ({ className }) {
   const router = useRouter()
   const handleLogin = useCallback(async pathname => await router.push({
     pathname,
     query: { callbackUrl: window.location.origin + router.asPath }
   }), [router])
 
+  return (
+    <Button
+      className='align-items-center px-3 py-1 mb-2'
+      id='signup'
+      style={{ borderWidth: '2px' }}
+      variant='outline-grey-darkmode'
+      onClick={() => handleLogin('/login')}
+    >
+      login
+    </Button>
+  )
+}
+
+export function LoginButtons () {
   return (
     <>
-      <Button
-        className='align-items-center px-3 py-1 mb-2'
-        id='signup'
-        style={{ borderWidth: '2px' }}
-        variant='outline-grey-darkmode'
-        onClick={() => handleLogin('/login')}
-      >
-        login
-      </Button>
-      <SignUpButton handleLogin={handleLogin} className='py-1' />
+      <LoginButton />
+      <SignUpButton className='py-1' />
     </>
   )
 }

components/nav/mobile/offcanvas.js

@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import { Dropdown, Image, Offcanvas } from 'react-bootstrap'
+import { Dropdown, Image, Nav, Navbar, Offcanvas } from 'react-bootstrap'
 import { MEDIA_URL } from '@/lib/constants'
 import Link from 'next/link'
 import { useServiceWorker } from '@/components/serviceworker'
@@ -32,7 +32,7 @@ export default function OffCanvas ({ me, dropNavKey }) {
         <Offcanvas.Header closeButton>
           <Offcanvas.Title><NavWalletSummary /></Offcanvas.Title>
         </Offcanvas.Header>
-        <Offcanvas.Body>
+        <Offcanvas.Body className='pb-0'>
           <div style={{
             '--bs-dropdown-item-padding-y': '.5rem',
             '--bs-dropdown-item-padding-x': 0,
@@ -94,12 +94,16 @@ export default function OffCanvas ({ me, dropNavKey }) {
                 </>
                 )
               : <LoginButtons />}
-            <Link href={`/${me?.name || 'anon'}`} className='d-flex flex-row p-2 mt-auto text-muted'>
-              <MeImage />
-              <div className='ms-2'>
-                @{me?.name || 'anon'}
-              </div>
-            </Link>
+            <Navbar className='container d-flex flex-row px-0 p-2 mt-auto text-muted'>
+              <Nav>
+                <Link href={`/${me?.name || 'anon'}`} className='d-flex flex-row p-2 mt-auto text-muted'>
+                  <MeImage />
+                  <div className='ms-2'>
+                    @{me?.name || 'anon'}
+                  </div>
+                </Link>
+              </Nav>
+            </Navbar>
           </div>
         </Offcanvas.Body>
       </Offcanvas>