fix: input/output value/balance styles (#3207)

* fix: right-align balance

* fix: set min-height on text
This commit is contained in:
Zach Pomerantz 2022-01-31 10:46:10 -08:00 committed by GitHub
parent 7055d60406
commit ab8c1e3e90
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 5 additions and 3 deletions

@ -65,7 +65,7 @@ export default function Input({ disabled }: InputProps) {
>
<ThemedText.Body2 color="secondary">
<Row>
{inputUSDC ? `$${inputUSDC.toFixed(2)}` : '-'}
<span>{inputUSDC ? `$${inputUSDC.toFixed(2)}` : '-'}</span>
{balance && (
<ThemedText.Body2 color={inputCurrencyAmount?.greaterThan(balance) ? 'error' : undefined}>
Balance: <span style={{ userSelect: 'text' }}>{formatCurrencyAmount(balance, 4)}</span>

@ -92,7 +92,7 @@ export default function Output({ disabled, children }: OutputProps) {
>
<ThemedText.Body2 color="secondary">
<Row>
{usdc}
<span>{usdc}</span>
{balance && (
<span>
Balance: <span style={{ userSelect: 'text' }}>{formatCurrencyAmount(balance, 4)}</span>

@ -5,8 +5,10 @@ import { Color } from './theme'
type TextProps = Omit<TextPropsWithCss, 'css' | 'color'> & { color?: Color }
const TextWrapper = styled(Text)<{ color?: Color }>`
const TextWrapper = styled(Text)<{ color?: Color; lineHeight: string }>`
color: ${({ color = 'currentColor', theme }) => theme[color as Color]};
// Avoid the need for placeholders by setting min-height to line-height.
min-height: ${({ lineHeight }) => lineHeight};
`
const TransitionTextWrapper = styled(TextWrapper)`