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

Fix answer panel coloration to not be weird and work on Firefox

Browse Source
This commit is contained in:
Marshall Polaris 2022-10-11 23:58:19 -07:00
parent e569f45193
commit 7769f9c9a1
1 changed files with 7 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
web/components/answers/answers-panel.tsx
View File

@ -191,8 +191,9 @@ function OpenAnswer(props: {
const [open, setOpen] = useState(false) const [open, setOpen] = useState(false)
const color = const color =
colorIndex != undefined && colorIndex < CHOICE_ANSWER_COLORS.length colorIndex != undefined && colorIndex < CHOICE_ANSWER_COLORS.length
? CHOICE_ANSWER_COLORS[colorIndex] ? CHOICE_ANSWER_COLORS[colorIndex] + '55' // semi-transparent
: '#B1B1C7' : '#B1B1C755'
const colorWidth = 100 * Math.max(prob, 0.01)
return ( return (
<Col className="my-1 px-2"> <Col className="my-1 px-2">
@ -208,9 +209,12 @@ function OpenAnswer(props: {
<Col <Col
className={clsx( className={clsx(
'bg-greyscale-1 relative w-full rounded-lg transition-all', 'relative w-full rounded-lg transition-all',
tradingAllowed(contract) ? 'text-greyscale-7' : 'text-greyscale-5' tradingAllowed(contract) ? 'text-greyscale-7' : 'text-greyscale-5'
)} )}
style={{
background: `linear-gradient(to right, ${color} ${colorWidth}%, #FBFBFF ${colorWidth}%)`,
}}
> >
<Row className="z-20 -mb-1 justify-between gap-2 py-2 px-3"> <Row className="z-20 -mb-1 justify-between gap-2 py-2 px-3">
<Row> <Row>
@ -238,11 +242,6 @@ function OpenAnswer(props: {
)} )}
</Row> </Row>
</Row> </Row>
<hr
color={color}
className="absolute z-0 h-full w-full rounded-l-lg border-none opacity-30"
style={{ width: `${100 * Math.max(prob, 0.01)}%` }}
/>
</Col> </Col>
</Col> </Col>
) )