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,7 +258,13 @@ export function ContractSearch(props: {
   }
 
   return (
-    <Col>
+    <Col className="h-full">
+      <Col
+        className={clsx(
+          'bg-base-200 sticky top-0 z-20 gap-3 pb-3',
+          headerClassName
+        )}
+      >
         <Row className="gap-1 sm:gap-2">
           <input
             type="text"
@@ -292,8 +300,6 @@ export function ContractSearch(props: {
           )}
         </Row>
 
-      <Spacer h={3} />
-
         {pillsEnabled && (
           <Row className="scrollbar-hide items-start gap-2 overflow-x-auto">
             <PillButton
@@ -334,8 +340,7 @@ export function ContractSearch(props: {
             })}
           </Row>
         )}
-
+      </Col>
-      <Spacer h={3} />
 
       {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 && (
                 <Button onClick={doneAddingContracts} color={'indigo'}>
                   Embed {contracts.length} question
                   {contracts.length > 1 && 's'}
                 </Button>
               )}
-                <Button
+              <Button onClick={() => setContracts([])} color="gray">
-                  onClick={() => {
-                    setContracts([])
-                  }}
-                  color={'gray'}
-                >
                 Cancel
               </Button>
             </Row>
-            ) : (
-              <Row className={'justify-center'}>
-                <LoadingIndicator />
-              </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>