un-daisy selects

web/components/bets-list.tsx

@@ -52,6 +52,7 @@ import {
 } from 'web/hooks/use-persistent-state'
 import { safeLocalStorage } from 'web/lib/util/local'
 import { ExclamationIcon } from '@heroicons/react/outline'
+import { Select } from './select'
 
 type BetSort = 'newest' | 'profit' | 'closeTime' | 'value'
 type BetFilter = 'open' | 'limit_bet' | 'sold' | 'closed' | 'resolved' | 'all'
@@ -200,8 +201,7 @@ export function BetsList(props: { user: User }) {
         </Row>
 
         <Row className="gap-2">
-          <select
+          <Select
-            className="border-greyscale-4 self-start overflow-hidden rounded border px-2 py-2 text-sm"
             value={filter}
             onChange={(e) => setFilter(e.target.value as BetFilter)}
           >
@@ -211,10 +211,9 @@ export function BetsList(props: { user: User }) {
             <option value="closed">Closed</option>
             <option value="resolved">Resolved</option>
             <option value="all">All</option>
-          </select>
+          </Select>
 
-          <select
+          <Select
-            className="border-greyscale-4 self-start overflow-hidden rounded px-2 py-2 text-sm"
             value={sort}
             onChange={(e) => setSort(e.target.value as BetSort)}
           >
@@ -222,7 +221,7 @@ export function BetsList(props: { user: User }) {
             <option value="value">Value</option>
             <option value="profit">Profit</option>
             <option value="closeTime">Close date</option>
-          </select>
+          </Select>
         </Row>
       </Col>
 

web/components/contract-search.tsx

@@ -42,6 +42,7 @@ import { Button } from './button'
 import { Modal } from './layout/modal'
 import { Title } from './title'
 import { Input } from './input'
+import { Select } from './select'
 
 export const SORTS = [
   { label: 'Newest', value: 'newest' },
@@ -543,8 +544,7 @@ export function SearchFilters(props: {
 
   return (
     <div className={className}>
-      <select
+      <Select
-        className="select select-bordered"
         value={filter}
         onChange={(e) => selectFilter(e.target.value as filter)}
       >
@@ -552,10 +552,9 @@ export function SearchFilters(props: {
         <option value="closed">Closed</option>
         <option value="resolved">Resolved</option>
         <option value="all">All</option>
-      </select>
+      </Select>
       {!hideOrderSelector && (
-        <select
+        <Select
-          className="select select-bordered"
           value={sort}
           onChange={(e) => selectSort(e.target.value as Sort)}
         >
@@ -564,7 +563,7 @@ export function SearchFilters(props: {
               {option.label}
             </option>
           ))}
-        </select>
+        </Select>
       )}
     </div>
   )

web/components/manalinks/create-links-button.tsx

@@ -14,6 +14,7 @@ import { DuplicateIcon } from '@heroicons/react/outline'
 import { QRCode } from '../qr-code'
 import { Input } from '../input'
 import { ExpandingInput } from '../expanding-input'
+import { Select } from '../select'
 
 export function CreateLinksButton(props: {
   user: User
@@ -150,8 +151,7 @@ function CreateManalinkForm(props: {
               </div>
               <div className="form-control w-full md:w-1/2">
                 <label className="px-1 py-2">Expires in</label>
-                <select
+                <Select
-                  className="!select !select-bordered"
                   value={expiresIn}
                   defaultValue={defaultExpire}
                   onChange={(e) => {
@@ -160,7 +160,7 @@ function CreateManalinkForm(props: {
                   }}
                 >
                   {expireOptions}
-                </select>
+                </Select>
               </div>
             </div>
             <div className="form-control w-full">

web/components/select.tsx

@@ -0,0 +1,17 @@
+import clsx from 'clsx'
+
+export const Select = (props: JSX.IntrinsicElements['select']) => {
+  const { className, children, ...rest } = props
+
+  return (
+    <select
+      className={clsx(
+        'h-12 cursor-pointer self-start overflow-hidden rounded-md border border-gray-300 pl-4 pr-10 text-sm shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-indigo-500',
+        className
+      )}
+      {...rest}
+    >
+      ß{children}
+    </select>
+  )
+}

web/pages/contract-search-firestore.tsx

@@ -10,6 +10,7 @@ import {
 } from 'web/hooks/use-persistent-state'
 import { PAST_BETS } from 'common/user'
 import { Input } from 'web/components/input'
+import { Select } from 'web/components/select'
 
 const MAX_CONTRACTS_RENDERED = 100
 
@@ -96,17 +97,13 @@ export default function ContractSearchFirestore(props: {
           placeholder="Search markets"
           className="w-full"
         />
-        <select
+        <Select value={sort} onChange={(e) => setSort(e.target.value)}>
-          className="select select-bordered"
-          value={sort}
-          onChange={(e) => setSort(e.target.value)}
-        >
           <option value="score">Trending</option>
           <option value="newest">Newest</option>
           <option value="most-traded">Most ${PAST_BETS}</option>
           <option value="24-hour-vol">24h volume</option>
           <option value="close-date">Closing soon</option>
-        </select>
+        </Select>
       </div>
       <ContractsGrid contracts={matches} showTime={showTime} />
     </div>