ButterflyEffect/uniswap-interface-uncensored
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
* 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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/lib/components/Swap/Input.tsx
View File

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

2
src/lib/components/Swap/Output.tsx
View File

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

4
src/lib/theme/type.tsx
View File

@ -5,8 +5,10 @@ import { Color } from './theme'
type TextProps = Omit<TextPropsWithCss, 'css' | 'color'> & { color?: Color } 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]}; 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)` const TransitionTextWrapper = styled(TextWrapper)`