un-daisy inputs

web/components/amount-input.tsx

@@ -46,11 +46,7 @@ export function AmountInput(props: {
             {label}
           </span>
           <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}
             type="text"
             pattern="[0-9]*"
@@ -58,6 +54,7 @@ export function AmountInput(props: {
             placeholder="0"
             maxLength={6}
             value={amount ?? ''}
+            error={!!error}
             disabled={disabled}
             onChange={(e) => onAmountChange(e.target.value)}
           />

web/components/bet-inline.tsx

@@ -92,10 +92,7 @@ export function BetInline(props: {
         />
         <BuyAmountInput
           className="-mb-4"
-          inputClassName={clsx(
+          inputClassName="w-20 !text-base"
-            'input-sm w-20 !text-base',
-            error && 'input-error'
-          )}
           amount={amount}
           onChange={setAmount}
           error="" // handle error ourselves

web/components/expanding-input.tsx

@@ -7,7 +7,7 @@ export const ExpandingInput = (props: Parameters<typeof Textarea>[0]) => {
   return (
     <Textarea
       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
       )}
       {...rest}

web/components/input.tsx

@@ -2,21 +2,21 @@ import clsx from 'clsx'
 import React from 'react'
 
 /** 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 (
     <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}
     />
   )
 }
-
-/*
-  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
- */

web/components/number-input.tsx

@@ -32,24 +32,19 @@ export function NumberInput(props: {
 
   return (
     <Col className={className}>
-      <label className="input-group">
+      <Input
-        <Input
+        className={clsx('max-w-[200px] !text-lg', inputClassName)}
-          className={clsx(
+        ref={inputRef}
-            'max-w-[200px] !text-lg',
+        type="number"
-            error && 'input-error',
+        pattern="[0-9]*"
-            inputClassName
+        inputMode="numeric"
-          )}
+        placeholder={placeholder ?? '0'}
-          ref={inputRef}
+        maxLength={9}
-          type="number"
+        value={numberString}
-          pattern="[0-9]*"
+        error={!!error}
-          inputMode="numeric"
+        disabled={disabled}
-          placeholder={placeholder ?? '0'}
+        onChange={(e) => onChange(e.target.value.substring(0, 9))}
-          maxLength={9}
+      />
-          value={numberString}
-          disabled={disabled}
-          onChange={(e) => onChange(e.target.value.substring(0, 9))}
-        />
-      </label>
 
       <Spacer h={4} />