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