Select funds amount and prettier funds button / dialog

web/components/add-funds-button.tsx

@@ -1,28 +1,48 @@
 import clsx from 'clsx'
+import { useState } from 'react'
 
 import { useUser } from '../hooks/use-user'
+import { FundsSelector } from './yes-no-selector'
 
-export function AddFundsButton(props: {}) {
+export function AddFundsButton() {
-  const {} = props
   const user = useUser()
 
+  const [amountSelected, setAmountSelected] = useState<
+    500 | 1000 | 2500 | 10000
+  >(500)
+
   return (
     <>
-      <label htmlFor="add-funds" className={clsx('btn modal-button')}>
+      <label
+        htmlFor="add-funds"
+        className={clsx('btn btn-sm btn-secondary modal-button')}
+      >
         Add funds
       </label>
       <input type="checkbox" id="add-funds" className="modal-toggle" />
 
       <div className="modal">
         <div className="modal-box">
-          Buy M$500
+          <div className="text-lg mb-6">Buy Mantic Dollars</div>
+
+          <div className="text-gray-500 text-sm mb-2">Amount</div>
+          <FundsSelector
+            selected={amountSelected}
+            onSelect={setAmountSelected}
+          />
+
+          <div className="mt-6">
+            <div className="text-gray-500 text-sm mb-1">Price USD</div>
+            <div>${Math.round(amountSelected / 100)}.00</div>
+          </div>
+
           <div className="modal-action">
             <label htmlFor="add-funds" className={clsx('btn')}>
               Back
             </label>
 
             <form action={checkoutURL(user?.id || '', 500)} method="POST">
-              <button type="submit" className="btn">
+              <button type="submit" className="btn btn-primary">
                 Checkout
               </button>
             </form>

web/components/bet-panel.tsx

@@ -136,10 +136,12 @@ export function BetPanel(props: { contract: Contract; className?: string }) {
           <div className="mt-3 mb-1 text-sm text-gray-400">
             Remaining balance
           </div>
-          <div>{formatMoney(remainingBalance > 0 ? remainingBalance : 0)}</div>
+          <Row className="flex-1 justify-between items-center gap-2">
             <div>
-            <AddFundsButton />
+              {formatMoney(remainingBalance > 0 ? remainingBalance : 0)}
             </div>
+            <AddFundsButton />
+          </Row>
         </>
       )}
 

web/components/yes-no-selector.tsx

@@ -67,10 +67,37 @@ export function YesNoCancelSelector(props: {
   )
 }
 
+const fundAmounts = [500, 1000, 2500, 10000]
+
+export function FundsSelector(props: {
+  selected: 500 | 1000 | 2500 | 10000
+  onSelect: (selected: 500 | 1000 | 2500 | 10000) => void
+  className?: string
+  btnClassName?: string
+}) {
+  const { selected, onSelect, className } = props
+  const btnClassName = clsx('px-2 whitespace-nowrap', props.btnClassName)
+
+  return (
+    <Row className={clsx('space-x-3', className)}>
+      {fundAmounts.map((amount) => (
+        <Button
+          key={amount}
+          color={selected === amount ? 'purple' : 'gray'}
+          onClick={() => onSelect(amount as any)}
+          className={btnClassName}
+        >
+          M$ {amount}
+        </Button>
+      ))}
+    </Row>
+  )
+}
+
 function Button(props: {
   className?: string
   onClick?: () => void
-  color: 'green' | 'red' | 'yellow' | 'gray'
+  color: 'green' | 'purple' | 'red' | 'yellow' | 'gray'
   children?: any
 }) {
   const { className, onClick, children, color } = props
@@ -81,6 +108,7 @@ function Button(props: {
       className={clsx(
         'flex-1 inline-flex justify-center items-center px-8 py-3 border border-transparent rounded-md shadow-sm text-sm font-medium text-white',
         color === 'green' && 'btn-primary',
+        color === 'purple' && 'btn-secondary',
         color === 'red' && 'bg-red-400 hover:bg-red-500',
         color === 'yellow' && 'bg-yellow-400 hover:bg-yellow-500',
         color === 'gray' && 'text-gray-700 bg-gray-300 hover:bg-gray-400',