open.source/manifold
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

CreateQuestionButton: use Button component

Browse Source
This commit is contained in:
mantikoros 2022-08-28 16:09:42 -05:00
parent cae2154893
commit 0a5fb4752a
2 changed files with 7 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
web/components/button.tsx
View File

@ -37,8 +37,8 @@ export function Button(props: {
sm: 'px-3 py-2 text-sm', sm: 'px-3 py-2 text-sm',
md: 'px-4 py-2 text-sm', md: 'px-4 py-2 text-sm',
lg: 'px-4 py-2 text-base', lg: 'px-4 py-2 text-base',
xl: 'px-6 py-3 text-base', xl: 'px-6 py-2.5 text-base font-semibold',
'2xl': 'px-6 py-3 text-xl', '2xl': 'px-6 py-3 text-xl font-semibold',
}[size] }[size]
return ( return (
@ -54,7 +54,7 @@ export function Button(props: {
color === 'indigo' && 'bg-indigo-500 text-white hover:bg-indigo-600', color === 'indigo' && 'bg-indigo-500 text-white hover:bg-indigo-600',
color === 'gray' && 'bg-gray-50 text-gray-600 hover:bg-gray-200', color === 'gray' && 'bg-gray-50 text-gray-600 hover:bg-gray-200',
color === 'gradient' && color === 'gradient' &&
'bg-gradient-to-r from-indigo-500 to-blue-500 text-white hover:from-indigo-700 hover:to-blue-700', 'border-none bg-gradient-to-r from-indigo-500 to-blue-500 text-white hover:from-indigo-700 hover:to-blue-700',
color === 'gray-white' && color === 'gray-white' &&
'border-none bg-white text-gray-500 shadow-none hover:bg-gray-200', 'border-none bg-white text-gray-500 shadow-none hover:bg-gray-200',
className className

13
web/components/create-question-button.tsx
View File

@ -3,9 +3,7 @@ import Link from 'next/link'
import clsx from 'clsx' import clsx from 'clsx'
import { User } from 'web/lib/firebase/users' import { User } from 'web/lib/firebase/users'
import { Button } from './button'
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'
export const CreateQuestionButton = (props: { export const CreateQuestionButton = (props: {
user: User | null | undefined user: User | null | undefined
@ -13,9 +11,6 @@ export const CreateQuestionButton = (props: {
className?: string className?: string
query?: string query?: string
}) => { }) => {
const gradient =
'from-indigo-500 to-blue-500 hover:from-indigo-700 hover:to-blue-700'
const { user, overrideText, className, query } = props const { user, overrideText, className, query } = props
if (!user || user?.isBannedFromPosting) return <></> if (!user || user?.isBannedFromPosting) return <></>
@ -23,9 +18,9 @@ export const CreateQuestionButton = (props: {
return ( return (
<div className={clsx('flex justify-center', className)}> <div className={clsx('flex justify-center', className)}>
<Link href={`/create${query ? query : ''}`} passHref> <Link href={`/create${query ? query : ''}`} passHref>
<button className={clsx(gradient, createButtonStyle)}> <Button color="gradient" size="xl" className="mt-4">
{overrideText ? overrideText : 'Create a market'} {overrideText ?? 'Create a market'}
</button> </Button>
</Link> </Link>
</div> </div>
) )