open.source/manifold
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Contract card ui tweaks: consistent market type colors, no underline,… (#402)

Browse Source 
* contract card ui tweaks: consistent market type colors, no underline, adjust font/border size

* bigger probabiity numbers in contract card

* revert non-color changes; change prob bar width to 1.5
This commit is contained in:
mantikoros 2022-06-06 09:54:43 -05:00 committed by GitHub
parent 9e66daa861
commit 43b0fe6749
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 13 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
web/components/contract/quick-bet.tsx
View File

@ -140,6 +140,8 @@ export function QuickBet(props: { contract: Contract; user: User }) {
} }
} }
const textColor = `text-${getColor(contract, previewProb)}`
return ( return (
<Col <Col
className={clsx( className={clsx(
@ -164,14 +166,14 @@ export function QuickBet(props: { contract: Contract; user: User }) {
<TriangleFillIcon <TriangleFillIcon
className={clsx( className={clsx(
'mx-auto h-5 w-5', 'mx-auto h-5 w-5',
upHover ? 'text-green-500' : 'text-gray-400' upHover ? textColor : 'text-gray-400'
)} )}
/> />
) : ( ) : (
<TriangleFillIcon <TriangleFillIcon
className={clsx( className={clsx(
'mx-auto h-5 w-5', 'mx-auto h-5 w-5',
upHover ? 'text-green-500' : 'text-gray-200' upHover ? textColor : 'text-gray-200'
)} )}
/> />
)} )}
@ -227,14 +229,14 @@ export function ProbBar(props: { contract: Contract; previewProb?: number }) {
<> <>
<div <div
className={clsx( className={clsx(
'absolute right-0 top-0 w-2 rounded-tr-md transition-all', 'absolute right-0 top-0 w-1.5 rounded-tr-md transition-all',
'bg-gray-200' 'bg-gray-100'
)} )}
style={{ height: `${100 * (1 - prob)}%` }} style={{ height: `${100 * (1 - prob)}%` }}
/> />
<div <div
className={clsx( className={clsx(
'absolute right-0 bottom-0 w-2 rounded-br-md transition-all', 'absolute right-0 bottom-0 w-1.5 rounded-br-md transition-all',
`bg-${color}`, `bg-${color}`,
// If we're showing the full bar, also round the top // If we're showing the full bar, also round the top
prob === 1 ? 'rounded-tr-md' : '' prob === 1 ? 'rounded-tr-md' : ''
@ -305,7 +307,6 @@ function getNumericScale(contract: NumericContract) {
} }
export function getColor(contract: Contract, previewProb?: number) { export function getColor(contract: Contract, previewProb?: number) {
// TODO: Not sure why eg green-400 doesn't work here; try upgrading Tailwind
// TODO: Try injecting a gradient here // TODO: Try injecting a gradient here
// return 'primary' // return 'primary'
const { resolution } = contract const { resolution } = contract
@ -325,7 +326,10 @@ export function getColor(contract: Contract, previewProb?: number) {
return 'blue-400' return 'blue-400'
} }
const marketClosed = (contract.closeTime || Infinity) < Date.now() if ((contract.closeTime ?? Infinity) < Date.now()) {
const prob = previewProb ?? getProb(contract) return 'gray-400'
return marketClosed ? 'gray-400' : prob >= 0.5 ? 'primary' : 'red-400' }
// TODO: Not sure why eg green-400 doesn't work here; try upgrading Tailwind
return 'primary'
} }