Improve market modal style

- contract searchbar now sticky
- entire card clickable to select (if quickbet is hidden)
- adjust selected card styles
This commit is contained in:
Sinclair Chen 2022-08-10 14:19:30 -07:00
parent 8d5246cc09
commit 193e5b59d2
3 changed files with 110 additions and 107 deletions

View File

@ -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>
<Row className="gap-1 sm:gap-2">
<input
type="text"
value={query}
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>
<Col className="h-full">
<Col
className={clsx(
'bg-base-200 sticky top-0 z-20 gap-3 pb-3',
headerClassName
)}
{!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>
)}
</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')}
>
<Row className="gap-1 sm:gap-2">
<input
type="text"
value={query}
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)}
>
Your bets
</PillButton>
<option value="open">Open</option>
<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 &&

View File

@ -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 ? (

View File

@ -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="p-8 pb-0">
<Col className="h-[85vh] w-full gap-4 rounded-md bg-white">
<Row className="p-8 pb-0">
<div className={'text-xl text-indigo-700'}>Embed a market</div>
<Col className={'w-full '}>
{!loading ? (
<Row className={'justify-end gap-4'}>
{contracts.length > 0 && (
<Button onClick={doneAddingContracts} color={'indigo'}>
Embed {contracts.length} question
{contracts.length > 1 && 's'}
</Button>
)}
<Button
onClick={() => {
setContracts([])
}}
color={'gray'}
>
Cancel
{!loading && (
<Row className="grow justify-end gap-4">
{contracts.length > 0 && (
<Button onClick={doneAddingContracts} color={'indigo'}>
Embed {contracts.length} question
{contracts.length > 1 && 's'}
</Button>
</Row>
) : (
<Row className={'justify-center'}>
<LoadingIndicator />
</Row>
)}
</Col>
</Col>
)}
<Button onClick={() => setContracts([])} color="gray">
Cancel
</Button>
</Row>
)}
</Row>
<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>