un-daisy inputs
This commit is contained in:
parent
58a34b474e
commit
711e2e68ed
|
@ -46,11 +46,7 @@ export function AmountInput(props: {
|
||||||
{label}
|
{label}
|
||||||
</span>
|
</span>
|
||||||
<Input
|
<Input
|
||||||
className={clsx(
|
className={clsx('w-24 pl-9 !text-base md:w-auto', inputClassName)}
|
||||||
'w-24 pl-9 !text-base md:w-auto',
|
|
||||||
error && 'input-error',
|
|
||||||
inputClassName
|
|
||||||
)}
|
|
||||||
ref={inputRef}
|
ref={inputRef}
|
||||||
type="text"
|
type="text"
|
||||||
pattern="[0-9]*"
|
pattern="[0-9]*"
|
||||||
|
@ -58,6 +54,7 @@ export function AmountInput(props: {
|
||||||
placeholder="0"
|
placeholder="0"
|
||||||
maxLength={6}
|
maxLength={6}
|
||||||
value={amount ?? ''}
|
value={amount ?? ''}
|
||||||
|
error={!!error}
|
||||||
disabled={disabled}
|
disabled={disabled}
|
||||||
onChange={(e) => onAmountChange(e.target.value)}
|
onChange={(e) => onAmountChange(e.target.value)}
|
||||||
/>
|
/>
|
||||||
|
|
|
@ -92,10 +92,7 @@ export function BetInline(props: {
|
||||||
/>
|
/>
|
||||||
<BuyAmountInput
|
<BuyAmountInput
|
||||||
className="-mb-4"
|
className="-mb-4"
|
||||||
inputClassName={clsx(
|
inputClassName="w-20 !text-base"
|
||||||
'input-sm w-20 !text-base',
|
|
||||||
error && 'input-error'
|
|
||||||
)}
|
|
||||||
amount={amount}
|
amount={amount}
|
||||||
onChange={setAmount}
|
onChange={setAmount}
|
||||||
error="" // handle error ourselves
|
error="" // handle error ourselves
|
||||||
|
|
|
@ -7,7 +7,7 @@ export const ExpandingInput = (props: Parameters<typeof Textarea>[0]) => {
|
||||||
return (
|
return (
|
||||||
<Textarea
|
<Textarea
|
||||||
className={clsx(
|
className={clsx(
|
||||||
'textarea textarea-bordered resize-none text-[16px] md:text-[14px]',
|
'resize-none rounded-md border border-gray-300 bg-white px-4 text-[16px] leading-loose shadow-sm transition-colors focus:outline-none disabled:cursor-not-allowed disabled:border-gray-200 disabled:bg-gray-50 disabled:text-gray-500 md:text-[14px]',
|
||||||
className
|
className
|
||||||
)}
|
)}
|
||||||
{...rest}
|
{...rest}
|
||||||
|
|
|
@ -2,21 +2,21 @@ import clsx from 'clsx'
|
||||||
import React from 'react'
|
import React from 'react'
|
||||||
|
|
||||||
/** Text input. Wraps html `<input>` */
|
/** Text input. Wraps html `<input>` */
|
||||||
export const Input = (props: JSX.IntrinsicElements['input']) => {
|
export const Input = (
|
||||||
const { className, ...rest } = props
|
props: { error?: boolean } & JSX.IntrinsicElements['input']
|
||||||
|
) => {
|
||||||
|
const { error, className, ...rest } = props
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<input
|
<input
|
||||||
className={clsx('input input-bordered text-base md:text-sm', className)}
|
className={clsx(
|
||||||
|
'h-12 rounded-md border bg-white px-4 shadow-sm transition-colors invalid:border-red-600 invalid:text-red-900 invalid:placeholder-red-300 focus:outline-none disabled:cursor-not-allowed disabled:border-gray-200 disabled:bg-gray-50 disabled:text-gray-500 md:text-sm',
|
||||||
|
error
|
||||||
|
? 'border-red-300 text-red-900 placeholder-red-300 focus:border-red-600 focus:ring-red-500' // matches invalid: styles
|
||||||
|
: 'border-gray-300 focus:border-indigo-500 focus:ring-indigo-500',
|
||||||
|
className
|
||||||
|
)}
|
||||||
{...rest}
|
{...rest}
|
||||||
/>
|
/>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
|
||||||
TODO: replace daisyui style with our own. For reference:
|
|
||||||
|
|
||||||
james: text-lg placeholder:text-gray-400
|
|
||||||
inga: placeholder:text-greyscale-4 border-greyscale-2 rounded-md
|
|
||||||
austin: border-gray-300 text-gray-400 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm
|
|
||||||
*/
|
|
||||||
|
|
|
@ -32,13 +32,8 @@ export function NumberInput(props: {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Col className={className}>
|
<Col className={className}>
|
||||||
<label className="input-group">
|
|
||||||
<Input
|
<Input
|
||||||
className={clsx(
|
className={clsx('max-w-[200px] !text-lg', inputClassName)}
|
||||||
'max-w-[200px] !text-lg',
|
|
||||||
error && 'input-error',
|
|
||||||
inputClassName
|
|
||||||
)}
|
|
||||||
ref={inputRef}
|
ref={inputRef}
|
||||||
type="number"
|
type="number"
|
||||||
pattern="[0-9]*"
|
pattern="[0-9]*"
|
||||||
|
@ -46,10 +41,10 @@ export function NumberInput(props: {
|
||||||
placeholder={placeholder ?? '0'}
|
placeholder={placeholder ?? '0'}
|
||||||
maxLength={9}
|
maxLength={9}
|
||||||
value={numberString}
|
value={numberString}
|
||||||
|
error={!!error}
|
||||||
disabled={disabled}
|
disabled={disabled}
|
||||||
onChange={(e) => onChange(e.target.value.substring(0, 9))}
|
onChange={(e) => onChange(e.target.value.substring(0, 9))}
|
||||||
/>
|
/>
|
||||||
</label>
|
|
||||||
|
|
||||||
<Spacer h={4} />
|
<Spacer h={4} />
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue
Block a user