Use gray-500 instead of gray-400 for text against gray bg.
This commit is contained in:
parent
e4206d6277
commit
519dda6473
|
@ -17,7 +17,7 @@ export function AdvancedPanel(props: { children: any }) {
|
||||||
onClick={() => setCollapsed((collapsed) => !collapsed)}
|
onClick={() => setCollapsed((collapsed) => !collapsed)}
|
||||||
className="cursor-pointer"
|
className="cursor-pointer"
|
||||||
>
|
>
|
||||||
<div className="mt-4 mr-6 text-sm text-gray-400 text-right">
|
<div className="mt-4 mr-6 text-sm text-gray-500 text-right">
|
||||||
Advanced
|
Advanced
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
|
@ -25,7 +25,7 @@ export function AdvancedPanel(props: { children: any }) {
|
||||||
style={{
|
style={{
|
||||||
top: -2,
|
top: -2,
|
||||||
right: -15,
|
right: -15,
|
||||||
color: '#9ca3af' /* gray-400 */,
|
color: '#6a7280' /* gray-500 */,
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,4 +1,3 @@
|
||||||
import { getFunctions, httpsCallable } from 'firebase/functions'
|
|
||||||
import clsx from 'clsx'
|
import clsx from 'clsx'
|
||||||
import React, { useEffect, useState } from 'react'
|
import React, { useEffect, useState } from 'react'
|
||||||
|
|
||||||
|
@ -115,14 +114,14 @@ export function BetPanel(props: { contract: Contract; className?: string }) {
|
||||||
>
|
>
|
||||||
<Title className="!mt-0 whitespace-nowrap" text={`Buy ${betChoice}`} />
|
<Title className="!mt-0 whitespace-nowrap" text={`Buy ${betChoice}`} />
|
||||||
|
|
||||||
<div className="mt-2 mb-1 text-sm text-gray-400">Outcome</div>
|
<div className="mt-2 mb-1 text-sm text-gray-500">Outcome</div>
|
||||||
<YesNoSelector
|
<YesNoSelector
|
||||||
className="my-2"
|
className="my-2"
|
||||||
selected={betChoice}
|
selected={betChoice}
|
||||||
onSelect={(choice) => onBetChoice(choice)}
|
onSelect={(choice) => onBetChoice(choice)}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<div className="mt-3 mb-1 text-sm text-gray-400">
|
<div className="mt-3 mb-1 text-sm text-gray-500">
|
||||||
Amount{' '}
|
Amount{' '}
|
||||||
{user && (
|
{user && (
|
||||||
<span className="float-right">
|
<span className="float-right">
|
||||||
|
@ -156,14 +155,14 @@ export function BetPanel(props: { contract: Contract; className?: string }) {
|
||||||
{user && <AddFundsButton className="self-end mt-3" />}
|
{user && <AddFundsButton className="self-end mt-3" />}
|
||||||
</Col>
|
</Col>
|
||||||
|
|
||||||
<div className="mt-2 mb-1 text-sm text-gray-400">Implied probability</div>
|
<div className="mt-2 mb-1 text-sm text-gray-500">Implied probability</div>
|
||||||
<Row>
|
<Row>
|
||||||
<div>{formatPercent(initialProb)}</div>
|
<div>{formatPercent(initialProb)}</div>
|
||||||
<div className="mx-2">→</div>
|
<div className="mx-2">→</div>
|
||||||
<div>{formatPercent(resultProb)}</div>
|
<div>{formatPercent(resultProb)}</div>
|
||||||
</Row>
|
</Row>
|
||||||
|
|
||||||
<div className="mt-2 mb-1 text-sm text-gray-400">
|
<div className="mt-2 mb-1 text-sm text-gray-500">
|
||||||
Estimated max payout
|
Estimated max payout
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
|
@ -172,7 +171,7 @@ export function BetPanel(props: { contract: Contract; className?: string }) {
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<AdvancedPanel>
|
<AdvancedPanel>
|
||||||
<div className="mt-2 mb-1 text-sm text-gray-400">
|
<div className="mt-2 mb-1 text-sm text-gray-500">
|
||||||
<OutcomeLabel outcome={betChoice} /> shares
|
<OutcomeLabel outcome={betChoice} /> shares
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
|
@ -180,7 +179,7 @@ export function BetPanel(props: { contract: Contract; className?: string }) {
|
||||||
{formatWithCommas(shares + contract.totalShares[betChoice])}
|
{formatWithCommas(shares + contract.totalShares[betChoice])}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="mt-2 mb-1 text-sm text-gray-400">
|
<div className="mt-2 mb-1 text-sm text-gray-500">
|
||||||
Current payout if <OutcomeLabel outcome={betChoice} />
|
Current payout if <OutcomeLabel outcome={betChoice} />
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
|
|
|
@ -183,7 +183,7 @@ export default function NewContract() {
|
||||||
/>
|
/>
|
||||||
</label>
|
</label>
|
||||||
<label>
|
<label>
|
||||||
<span className="label-text text-gray-400 ml-1">
|
<span className="label-text text-gray-500 ml-1">
|
||||||
Remaining balance:{' '}
|
Remaining balance:{' '}
|
||||||
{formatMoney(remainingBalance > 0 ? remainingBalance : 0)}
|
{formatMoney(remainingBalance > 0 ? remainingBalance : 0)}
|
||||||
</span>
|
</span>
|
||||||
|
@ -207,7 +207,7 @@ export default function NewContract() {
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<label>
|
<label>
|
||||||
<span className="label-text text-gray-400 ml-1">
|
<span className="label-text text-gray-500 ml-1">
|
||||||
No new trades will be allowed after{' '}
|
No new trades will be allowed after{' '}
|
||||||
{closeDate ? formattedCloseTime : 'this time'}
|
{closeDate ? formattedCloseTime : 'this time'}
|
||||||
</span>
|
</span>
|
||||||
|
|
Loading…
Reference in New Issue
Block a user