diff --git a/web/components/contract/contract-card.tsx b/web/components/contract/contract-card.tsx index 4c770310..10d9b2cd 100644 --- a/web/components/contract/contract-card.tsx +++ b/web/components/contract/contract-card.tsx @@ -68,7 +68,7 @@ export function ContractCard(props: { <Row className={clsx( 'justify-between gap-4', - outcomeType === 'FREE_RESPONSE' && 'flex-col items-start' + outcomeType === 'FREE_RESPONSE' && 'flex-col items-start !gap-2' )} > <p @@ -85,6 +85,7 @@ export function ContractCard(props: { )} {outcomeType === 'FREE_RESPONSE' && ( <FreeResponseResolutionOrChance + className="self-end text-gray-600" contract={contract as FullContract<DPM, FreeResponse>} truncate="long" /> @@ -147,14 +148,15 @@ function getTopAnswer(contract: FreeResponseContract) { export function FreeResponseResolutionOrChance(props: { contract: FreeResponseContract truncate: 'short' | 'long' | 'none' + className?: string }) { - const { contract, truncate } = props + const { contract, truncate, className } = props const { resolution } = contract const topAnswer = getTopAnswer(contract) return ( - <Col className="text-xl"> + <Col className={clsx(resolution ? 'text-3xl' : 'text-xl', className)}> {resolution ? ( <> <div className={clsx('text-base text-gray-500')}>Resolved</div> @@ -162,13 +164,18 @@ export function FreeResponseResolutionOrChance(props: { contract={contract} resolution={resolution} truncate={truncate} + answerClassName="text-xl" /> </> ) : ( topAnswer && ( - <Row className="flex-1 items-center justify-between gap-6"> - <AnswerLabel answer={topAnswer} truncate={truncate} /> - <Col className="text-primary"> + <Row className="items-center gap-6"> + <AnswerLabel + className="!text-gray-600" + answer={topAnswer} + truncate={truncate} + /> + <Col className="text-primary text-3xl"> <div> {formatPercent(getOutcomeProbability(contract, topAnswer.id))} </div> diff --git a/web/components/outcome-label.tsx b/web/components/outcome-label.tsx index db286277..a2193684 100644 --- a/web/components/outcome-label.tsx +++ b/web/components/outcome-label.tsx @@ -1,3 +1,4 @@ +import clsx from 'clsx' import { Answer } from '../../common/answer' import { getProbability } from '../../common/calculate' import { @@ -59,8 +60,9 @@ export function FreeResponseOutcomeLabel(props: { contract: FreeResponseContract resolution: string | 'CANCEL' | 'MKT' truncate: 'short' | 'long' | 'none' + answerClassName?: string }) { - const { contract, resolution, truncate } = props + const { contract, resolution, truncate, answerClassName } = props if (resolution === 'CANCEL') return <CancelLabel /> if (resolution === 'MKT') return <MultiLabel /> @@ -68,7 +70,13 @@ export function FreeResponseOutcomeLabel(props: { const { answers } = contract const chosen = answers?.find((answer) => answer.id === resolution) if (!chosen) return <AnswerNumberLabel number={resolution} /> - return <AnswerLabel answer={chosen} truncate={truncate} /> + return ( + <AnswerLabel + answer={chosen} + truncate={truncate} + className={answerClassName} + /> + ) } export function YesLabel() { @@ -103,8 +111,9 @@ export function AnswerNumberLabel(props: { number: string }) { export function AnswerLabel(props: { answer: Answer truncate: 'short' | 'long' | 'none' + className?: string }) { - const { answer, truncate } = props + const { answer, truncate, className } = props const { text } = answer let truncated = text @@ -114,5 +123,5 @@ export function AnswerLabel(props: { truncated = text.slice(0, 75) + '...' } - return <span className="text-primary">{truncated}</span> + return <span className={className}>{truncated}</span> }