Clean up FR answer on card

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>

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>
 }