sign in button

web/components/button.tsx

@@ -52,7 +52,7 @@ export function Button(props: {
         color === 'yellow' && 'bg-yellow-400 text-white hover:bg-yellow-500',
         color === 'blue' && 'bg-blue-400 text-white hover:bg-blue-500',
         color === 'indigo' && 'bg-indigo-500 text-white hover:bg-indigo-600',
-        color === 'gray' && 'bg-gray-100 text-gray-600 hover:bg-gray-200',
+        color === 'gray' && 'bg-gray-50 text-gray-600 hover:bg-gray-200',
         color === 'gradient' &&
           'bg-gradient-to-r from-indigo-500 to-blue-500 text-white hover:from-indigo-700 hover:to-blue-700',
         color === 'gray-white' &&

web/components/create-question-button.tsx

@@ -1,8 +1,8 @@
-import Link from 'next/link'
-import { useRouter } from 'next/router'
-import clsx from 'clsx'
-import { firebaseLogin, User } from 'web/lib/firebase/users'
 import React from 'react'
+import Link from 'next/link'
+import clsx from 'clsx'
+
+import { User } from 'web/lib/firebase/users'
 
 export const createButtonStyle =
   'border-w-0 mx-auto mt-4 -ml-1 w-full rounded-md bg-gradient-to-r py-2.5 text-base font-semibold text-white shadow-sm lg:-ml-0 h-11'
@@ -17,31 +17,16 @@ export const CreateQuestionButton = (props: {
     'from-indigo-500 to-blue-500 hover:from-indigo-700 hover:to-blue-700'
 
   const { user, overrideText, className, query } = props
-  const router = useRouter()
 
-  if (user?.isBannedFromPosting) return <></>
+  if (!user || user?.isBannedFromPosting) return <></>
 
   return (
     <div className={clsx('flex justify-center', className)}>
-      {user ? (
       <Link href={`/create${query ? query : ''}`} passHref>
         <button className={clsx(gradient, createButtonStyle)}>
           {overrideText ? overrideText : 'Create a market'}
         </button>
       </Link>
-      ) : (
-        <button
-          onClick={async () => {
-            // login, and then reload the page, to hit any SSR redirect (e.g.
-            // redirecting from / to /home for logged in users)
-            await firebaseLogin()
-            router.replace(router.asPath)
-          }}
-          className={clsx(gradient, createButtonStyle)}
-        >
-          Sign in
-        </button>
-      )}
     </div>
   )
 }

web/components/nav/sidebar.tsx

@@ -28,6 +28,7 @@ import { Spacer } from '../layout/spacer'
 import { CHALLENGES_ENABLED } from 'common/challenge'
 import { buildArray } from 'common/util/array'
 import TrophyIcon from 'web/lib/icons/trophy-icon'
+import { SignInButton } from '../sign-in-button'
 
 const logout = async () => {
   // log out, and then reload the page, in case SSR wants to boot them out
@@ -240,7 +241,8 @@ export default function Sidebar(props: { className?: string }) {
     >
       <ManifoldLogo className="py-6" twoLine />
 
-      <CreateQuestionButton user={user} />
+      {user ? <CreateQuestionButton user={user} /> : <SignInButton />}
+
       <Spacer h={4} />
       {user && (
         <div className="min-h-[80px] w-full">

web/components/sign-in-button.tsx

@@ -0,0 +1,25 @@
+import React from 'react'
+import { useRouter } from 'next/router'
+
+import { firebaseLogin, User } from 'web/lib/firebase/users'
+import { Button } from './button'
+
+export const SignInButton = (props: {
+}) => {
+  const router = useRouter()
+
+  return (
+    <Button
+      size='lg'
+      color='gray'
+      onClick={async () => {
+        // login, and then reload the page, to hit any SSR redirect (e.g.
+        // redirecting from / to /home for logged in users)
+        await firebaseLogin()
+        router.replace(router.asPath)
+      }}
+    >
+      Sign in
+    </Button>
+  )
+}