Add large percent chance indicator. Use primary color instead of green. Round current probability.

web/components/bet-panel.tsx

@@ -97,11 +97,11 @@ export function BetPanel(props: { contract: Contract; className?: string }) {
       <div className="p-2 font-medium">Implied probability</div>
       <Row>
         <div className="px-2 font-sans">
-          {Math.floor(initialProb * 1000) / 10 + '%'}
+          {Math.round(initialProb * 100) + '%'}
         </div>
         <div>→</div>
         <div className="px-2 font-sans">
-          {Math.floor(resultProb * 1000) / 10 + '%'}
+          {Math.round(resultProb * 100) + '%'}
         </div>
       </Row>
 
@@ -120,7 +120,7 @@ export function BetPanel(props: { contract: Contract; className?: string }) {
           betDisabled
             ? 'btn-disabled'
             : betChoice === 'YES'
-            ? 'bg-green-500 hover:bg-green-600 focus:ring-green-500'
+            ? 'btn-primary'
             : 'bg-red-400 hover:bg-red-500 focus:ring-red-400'
         )}
         onClick={betDisabled ? undefined : submitBet}

web/components/contract-overview.tsx

@@ -14,19 +14,32 @@ export const ContractOverview = (props: {
   const { pot, seedAmounts } = contract
 
   const volume = pot.YES + pot.NO - seedAmounts.YES - seedAmounts.NO
+  const prob = pot.YES ** 2 / (pot.YES ** 2 + pot.NO ** 2)
+  const probPercent = Math.round(prob * 100) + '%'
 
   return (
     <Col className={className}>
-      <div className="text-3xl font-medium p-2">{contract.question}</div>
+      <Row className="justify-between">
+        <Col>
+          <div className="text-3xl font-medium p-2">{contract.question}</div>
 
-      <Row className="flex-wrap text-sm text-gray-600">
-        <div className="p-2 whitespace-nowrap">By {contract.creatorName}</div>
-        <div className="py-2">•</div>
-        <div className="p-2 whitespace-nowrap">Dec 9</div>
-        <div className="py-2">•</div>
-        <div className="p-2 whitespace-nowrap">
-          {formatWithCommas(volume)} volume
-        </div>
+          <Row className="flex-wrap text-sm text-gray-600">
+            <div className="p-2 whitespace-nowrap">
+              By {contract.creatorName}
+            </div>
+            <div className="py-2">•</div>
+            <div className="p-2 whitespace-nowrap">Dec 9</div>
+            <div className="py-2">•</div>
+            <div className="p-2 whitespace-nowrap">
+              {formatWithCommas(volume)} volume
+            </div>
+          </Row>
+        </Col>
+
+        <Col className="text-4xl p-2 ml-2 text-primary items-end">
+          {probPercent}
+          <div className="text-xl">chance</div>
+        </Col>
       </Row>
 
       <Spacer h={4} />

web/components/contract-prob-graph.tsx

@@ -43,7 +43,7 @@ export function ContractProbGraph(props: { contract: Contract }) {
       {
         label: 'Implied probability',
         data: probs,
-        borderColor: 'rgb(75, 192, 192)',
+        borderColor: '#11b981',
       },
     ],
   }

web/components/yes-no-selector.tsx

@@ -48,7 +48,7 @@ function Button(props: {
         'inline-flex items-center px-8 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white',
         !hideFocusRing && 'focus:outline-none focus:ring-2 focus:ring-offset-2',
         color === 'green' &&
-          'bg-green-500 hover:bg-green-600 focus:ring-green-500',
+          'btn-primary',
         color === 'red' && 'bg-red-400 hover:bg-red-500 focus:ring-red-400',
         color === 'deemphasized' &&
           'text-gray-700 bg-gray-200 hover:bg-gray-300 focus:ring-gray-300',