Improve market modal style

- contract searchbar now sticky
- entire card clickable to select (if quickbet is hidden)
- adjust selected card styles

web/components/contract-search.tsx

@@ -9,7 +9,6 @@ import {
 } from './contract/contracts-grid'
 import { Row } from './layout/row'
 import { useEffect, useMemo, useState } from 'react'
-import { Spacer } from './layout/spacer'
 import { ENV, IS_PRIVATE_MANIFOLD } from 'common/envs/constants'
 import { useUser } from 'web/hooks/use-user'
 import { useFollows } from 'web/hooks/use-follows'
@@ -21,6 +20,7 @@ import { PillButton } from './buttons/pill-button'
 import { range, sortBy } from 'lodash'
 import { DEFAULT_CATEGORY_GROUPS } from 'common/categories'
 import { Col } from './layout/col'
+import clsx from 'clsx'
 
 const searchClient = algoliasearch(
   'GJQPAYENIF',
@@ -65,6 +65,7 @@ export function ContractSearch(props: {
     hideGroupLink?: boolean
     hideQuickBet?: boolean
   }
+  headerClassName?: string
 }) {
   const {
     querySortOptions,
@@ -75,6 +76,7 @@ export function ContractSearch(props: {
     showPlaceHolder,
     cardHideOptions,
     highlightOptions,
+    headerClassName,
   } = props
 
   const user = useUser()
@@ -256,86 +258,89 @@ export function ContractSearch(props: {
   }
 
   return (
-    <Col>
+    <Col className="h-full">
-      <Row className="gap-1 sm:gap-2">
+      <Col
-        <input
+        className={clsx(
-          type="text"
+          'bg-base-200 sticky top-0 z-20 gap-3 pb-3',
-          value={query}
+          headerClassName
-          onChange={(e) => updateQuery(e.target.value)}
-          placeholder={showPlaceHolder ? `Search ${filter} markets` : ''}
-          className="input input-bordered w-full"
-        />
-        {!query && (
-          <select
-            className="select select-bordered"
-            value={filter}
-            onChange={(e) => selectFilter(e.target.value as filter)}
-          >
-            <option value="open">Open</option>
-            <option value="closed">Closed</option>
-            <option value="resolved">Resolved</option>
-            <option value="all">All</option>
-          </select>
         )}
-        {!hideOrderSelector && !query && (
+      >
-          <select
+        <Row className="gap-1 sm:gap-2">
-            className="select select-bordered"
+          <input
-            value={sort}
+            type="text"
-            onChange={(e) => selectSort(e.target.value as Sort)}
+            value={query}
-          >
+            onChange={(e) => updateQuery(e.target.value)}
-            {sortOptions.map((option) => (
+            placeholder={showPlaceHolder ? `Search ${filter} markets` : ''}
-              <option key={option.value} value={option.value}>
+            className="input input-bordered w-full"
-                {option.label}
+          />
-              </option>
+          {!query && (
-            ))}
+            <select
-          </select>
+              className="select select-bordered"
-        )}
+              value={filter}
-      </Row>
+              onChange={(e) => selectFilter(e.target.value as filter)}
-
-      <Spacer h={3} />
-
-      {pillsEnabled && (
-        <Row className="scrollbar-hide items-start gap-2 overflow-x-auto">
-          <PillButton
-            key={'all'}
-            selected={pillFilter === undefined}
-            onSelect={selectPill(undefined)}
-          >
-            All
-          </PillButton>
-          <PillButton
-            key={'personal'}
-            selected={pillFilter === 'personal'}
-            onSelect={selectPill('personal')}
-          >
-            {user ? 'For you' : 'Featured'}
-          </PillButton>
-
-          {user && (
-            <PillButton
-              key={'your-bets'}
-              selected={pillFilter === 'your-bets'}
-              onSelect={selectPill('your-bets')}
             >
-              Your bets
+              <option value="open">Open</option>
-            </PillButton>
+              <option value="closed">Closed</option>
+              <option value="resolved">Resolved</option>
+              <option value="all">All</option>
+            </select>
+          )}
+          {!hideOrderSelector && !query && (
+            <select
+              className="select select-bordered"
+              value={sort}
+              onChange={(e) => selectSort(e.target.value as Sort)}
+            >
+              {sortOptions.map((option) => (
+                <option key={option.value} value={option.value}>
+                  {option.label}
+                </option>
+              ))}
+            </select>
           )}
-
-          {pillGroups.map(({ name, slug }) => {
-            return (
-              <PillButton
-                key={slug}
-                selected={pillFilter === slug}
-                onSelect={selectPill(slug)}
-              >
-                {name}
-              </PillButton>
-            )
-          })}
         </Row>
-      )}
 
-      <Spacer h={3} />
+        {pillsEnabled && (
+          <Row className="scrollbar-hide items-start gap-2 overflow-x-auto">
+            <PillButton
+              key={'all'}
+              selected={pillFilter === undefined}
+              onSelect={selectPill(undefined)}
+            >
+              All
+            </PillButton>
+            <PillButton
+              key={'personal'}
+              selected={pillFilter === 'personal'}
+              onSelect={selectPill('personal')}
+            >
+              {user ? 'For you' : 'Featured'}
+            </PillButton>
+
+            {user && (
+              <PillButton
+                key={'your-bets'}
+                selected={pillFilter === 'your-bets'}
+                onSelect={selectPill('your-bets')}
+              >
+                Your bets
+              </PillButton>
+            )}
+
+            {pillGroups.map(({ name, slug }) => {
+              return (
+                <PillButton
+                  key={slug}
+                  selected={pillFilter === slug}
+                  onSelect={selectPill(slug)}
+                >
+                  {name}
+                </PillButton>
+              )
+            })}
+          </Row>
+        )}
+      </Col>
 
       {filter === 'personal' &&
       (follows ?? []).length === 0 &&

web/components/contract/contract-card.tsx

@@ -76,7 +76,8 @@ export function ContractCard(props: {
           <Col className="relative flex-1 gap-3 pr-1">
             <div
               className={clsx(
-                'peer absolute -left-6 -top-4 -bottom-4 right-0 z-10'
+                'peer absolute -left-6 -top-4 -bottom-4 z-10',
+                hideQuickBet ? '-right-20' : 'right-0'
               )}
             >
               {onClick ? (

web/components/editor/market-modal.tsx

@@ -42,49 +42,46 @@ export function MarketModal(props: {
 
   return (
     <Modal open={open} setOpen={setOpen} className={'sm:p-0'} size={'lg'}>
-      <Col className={' w-full gap-4 rounded-md bg-white'}>
+      <Col className="h-[85vh] w-full gap-4 rounded-md bg-white">
-        <Col className="p-8 pb-0">
+        <Row className="p-8 pb-0">
           <div className={'text-xl text-indigo-700'}>Embed a market</div>
 
-          <Col className={'w-full '}>
+          {!loading && (
-            {!loading ? (
+            <Row className="grow justify-end gap-4">
-              <Row className={'justify-end gap-4'}>
+              {contracts.length > 0 && (
-                {contracts.length > 0 && (
+                <Button onClick={doneAddingContracts} color={'indigo'}>
-                  <Button onClick={doneAddingContracts} color={'indigo'}>
+                  Embed {contracts.length} question
-                    Embed {contracts.length} question
+                  {contracts.length > 1 && 's'}
-                    {contracts.length > 1 && 's'}
-                  </Button>
-                )}
-                <Button
-                  onClick={() => {
-                    setContracts([])
-                  }}
-                  color={'gray'}
-                >
-                  Cancel
                 </Button>
-              </Row>
+              )}
-            ) : (
+              <Button onClick={() => setContracts([])} color="gray">
-              <Row className={'justify-center'}>
+                Cancel
-                <LoadingIndicator />
+              </Button>
-              </Row>
+            </Row>
-            )}
+          )}
-          </Col>
+        </Row>
-        </Col>
 
-        <div className={'overflow-y-scroll sm:px-8'}>
+        {loading && (
+          <div className="w-full justify-center">
+            <LoadingIndicator />
+          </div>
+        )}
+
+        <div className="overflow-y-scroll sm:px-8">
           <ContractSearch
-            hideOrderSelector={true}
+            hideOrderSelector
             onContractClick={addContract}
             overrideGridClassName={
               'flex grid grid-cols-1 sm:grid-cols-2 flex-col gap-3 p-1'
             }
-            showPlaceHolder={true}
+            showPlaceHolder
             cardHideOptions={{ hideGroupLink: true, hideQuickBet: true }}
             highlightOptions={{
               contractIds: contracts.map((c) => c.id),
-              highlightClassName: '!bg-indigo-100 border-indigo-100 border-2',
+              highlightClassName:
+                '!bg-indigo-100 outline outline-2 outline-indigo-300',
             }}
+            headerClassName="bg-white"
           />
         </div>
       </Col>