fix: input/output value/balance styles (#3207)
* fix: right-align balance * fix: set min-height on text
This commit is contained in:
parent
7055d60406
commit
ab8c1e3e90
@ -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)`
|
||||
|
Loading…
Reference in New Issue
Block a user