Skip to content

I
interface
Commit 077437e1 authored by vignesh mohankumar's avatar vignesh mohankumar Committed by GitHub
Browse files
Options

fix: update swap box styles (#4687) 

* fix: update swap box styles

* fix balance text color/weight

* fix padding

* text color
parent ba9e509d
Show whitespace changes
Inline Side-by-side
Showing with 49 additions and 74 deletions
src/components/CurrencyInputPanel/FiatValue.tsx
View file @ 077437e1
......@@ -2,6 +2,7 @@ import { Trans } from '@lingui/macro'
// eslint-disable-next-line no-restricted-imports
import { t } from '@lingui/macro'
import { Currency, CurrencyAmount, Percent } from '@uniswap/sdk-core'
import { RedesignVariant, useRedesignFlag } from 'featureFlags/flags/redesign'
import { useMemo } from 'react'
import { useTheme } from 'styled-components/macro'
......@@ -17,6 +18,7 @@ export function FiatValue({
priceImpact?: Percent
}) {
const theme = useTheme()
const redesignFlagEnabled = useRedesignFlag() === RedesignVariant.Enabled
const priceImpactColor = useMemo(() => {
if (!priceImpact) return undefined
if (priceImpact.lessThan('0')) return theme.deprecated_green1
......@@ -29,8 +31,14 @@ export function FiatValue({
const p = Number(fiatValue?.toFixed())
const visibleDecimalPlaces = p < 1.05 ? 4 : 2
const textColor = redesignFlagEnabled
? theme.textSecondary
: fiatValue
? theme.deprecated_text3
: theme.deprecated_text4
return (
<ThemedText.DeprecatedBody fontSize={14} color={fiatValue ? theme.deprecated_text3 : theme.deprecated_text4}>
<ThemedText.DeprecatedBody fontSize={14} color={textColor}>
{fiatValue && <>${fiatValue?.toFixed(visibleDecimalPlaces, { groupSeparator: ',' })}</>}
{priceImpact ? (
<span style={{ color: priceImpactColor }}>
......
src/components/CurrencyInputPanel/SwapCurrencyInputPanel.tsx
View file @ 077437e1
......@@ -11,7 +11,6 @@ import { RedesignVariant, useRedesignFlag } from 'featureFlags/flags/redesign'
import { darken } from 'polished'
import { ReactNode, useCallback, useState } from 'react'
import { Lock } from 'react-feather'
import { useLocation } from 'react-router-dom'
import styled, { useTheme } from 'styled-components/macro'
import { formatCurrencyAmount } from 'utils/formatCurrencyAmount'
......@@ -78,7 +77,7 @@ const CurrencySelect = styled(ButtonGray)<{
background-color: ${({ selected, theme, redesignFlag }) =>
redesignFlag
? selected
? theme.backgroundSurface
? theme.stateOverlayPressed
: theme.accentAction
: selected
? theme.deprecated_bg2
......@@ -100,29 +99,26 @@ const CurrencySelect = styled(ButtonGray)<{
gap: ${({ redesignFlag }) => (redesignFlag ? '8px' : '0px')};
justify-content: space-between;
margin-left: ${({ hideInput }) => (hideInput ? '0' : '12px')};
:focus,
:hover {
&:hover {
background-color: ${({ selected, theme, redesignFlag }) =>
selected
? redesignFlag
? theme.backgroundSurface
: theme.deprecated_bg3
: darken(0.05, theme.deprecated_primary1)};
redesignFlag
? theme.stateOverlayHover
: selected
? darken(0.05, theme.deprecated_primary1)
: theme.deprecated_bg3};
}
visibility: ${({ visible }) => (visible ? 'visible' : 'hidden')};
`
const InputCurrencySelect = styled(CurrencySelect)<{ redesignFlag: boolean }>`
background-color: ${({ theme, selected, redesignFlag }) =>
redesignFlag && (selected ? theme.backgroundModule : theme.accentAction)};
:focus,
:hover {
&:active {
background-color: ${({ selected, theme, redesignFlag }) =>
selected
? redesignFlag
? theme.backgroundInteractive
: theme.deprecated_bg3
: darken(0.05, theme.deprecated_primary1)};
redesignFlag
? theme.stateOverlayPressed
: selected
? darken(0.05, theme.deprecated_primary1)
: theme.deprecated_bg3};
}
visibility: ${({ visible }) => (visible ? 'visible' : 'hidden')};
`
const InputRow = styled.div<{ selected: boolean; redesignFlag: boolean }>`
......@@ -133,10 +129,10 @@ const InputRow = styled.div<{ selected: boolean; redesignFlag: boolean }>`
redesignFlag ? '0px' : selected ? ' 1rem 1rem 0.75rem 1rem' : '1rem 1rem 1rem 1rem'};
`
const LabelRow = styled.div`
const LabelRow = styled.div<{ redesignFlag: boolean }>`
${({ theme }) => theme.flexRowNoWrap}
align-items: center;
color: ${({ theme }) => theme.deprecated_text1};
color: ${({ theme, redesignFlag }) => (redesignFlag ? theme.textSecondary : theme.deprecated_text1)};
font-size: 0.75rem;
line-height: 1rem;
padding: 0 1rem 1rem;
......@@ -154,18 +150,6 @@ const FiatRow = styled(LabelRow)<{ redesignFlag: boolean }>`
height: ${({ redesignFlag }) => !redesignFlag && '24px'};
`
const NoBalanceState = styled.div`
color: ${({ theme }) => theme.textTertiary};
font-weight: 400;
justify-content: space-between;
padding: 0px 4px 1px 4px;
`
const NoBalanceDash = styled.span`
color: ${({ theme }) => theme.textTertiary};
font-variant: small-caps;
font-feature-settings: 'pnum' on, 'lnum' on;
`
const Aligner = styled.span`
display: flex;
align-items: center;
......@@ -217,6 +201,8 @@ const StyledBalanceMax = styled.button<{ disabled?: boolean; redesignFlag: boole
const StyledNumericalInput = styled(NumericalInput)<{ $loading: boolean; redesignFlag: boolean }>`
${loadingOpacityMixin};
text-align: left;
font-size: ${({ redesignFlag }) => redesignFlag && '36px'};
line-height: ${({ redesignFlag }) => redesignFlag && '44px'};
font-variant: ${({ redesignFlag }) => redesignFlag && 'small-caps'};
font-feature-settings: ${({ redesignFlag }) => redesignFlag && 'pnum on, lnum on'};
`
......@@ -272,8 +258,6 @@ export default function SwapCurrencyInputPanel({
const redesignFlagEnabled = redesignFlag === RedesignVariant.Enabled
const selectedCurrencyBalance = useCurrencyBalance(account ?? undefined, currency ?? undefined)
const theme = useTheme()
const { pathname } = useLocation()
const isAddLiquidityPage = pathname.includes('/add') && !pathname.includes('/add/v2')
const handleDismissSearch = useCallback(() => {
setModalOpen(false)
......@@ -310,7 +294,7 @@ export default function SwapCurrencyInputPanel({
/>
)}
<InputCurrencySelect
<CurrencySelect
disabled={!chainAllowed}
visible={currency !== undefined}
selected={!!currency}
......@@ -352,18 +336,8 @@ export default function SwapCurrencyInputPanel({
</RowFixed>
{onCurrencySelect && <StyledDropDown selected={!!currency} redesignFlag={redesignFlagEnabled} />}
</Aligner>
</InputCurrencySelect>
</CurrencySelect>
</InputRow>
{redesignFlagEnabled && !currency && !isAddLiquidityPage && (
<NoBalanceState>
<FiatRow redesignFlag={redesignFlagEnabled}>
<RowBetween>
<NoBalanceDash>-</NoBalanceDash>
<NoBalanceDash>-</NoBalanceDash>
</RowBetween>
</FiatRow>
</NoBalanceState>
)}
{!hideInput && !hideBalance && currency && (
<FiatRow redesignFlag={redesignFlagEnabled}>
<RowBetween>
......@@ -373,8 +347,8 @@ export default function SwapCurrencyInputPanel({
{account ? (
<RowFixed style={{ height: '17px' }}>
<ThemedText.DeprecatedBody
color={theme.deprecated_text3}
fontWeight={500}
color={redesignFlag ? theme.textSecondary : theme.deprecated_text3}
fontWeight={redesignFlag ? 400 : 500}
fontSize={14}
style={{ display: 'inline' }}
>
......
src/components/HoverInlineText/index.tsx
View file @ 077437e1
......@@ -10,7 +10,6 @@ const TextWrapper = styled.span<{
textColor?: string
}>`
margin-left: ${({ margin }) => margin && '4px'};
color: ${({ theme, link, textColor }) => (link ? theme.deprecated_blue1 : textColor ?? theme.deprecated_text1)};
font-size: ${({ fontSize }) => fontSize ?? 'inherit'};
@media screen and (max-width: 600px) {
......
src/components/swap/styleds.tsx
View file @ 077437e1
......@@ -10,7 +10,7 @@ import { AutoColumn } from '../Column'
export const PageWrapper = styled.div<{ redesignFlag: boolean; navBarFlag: boolean }>`
padding: ${({ navBarFlag }) => (navBarFlag ? '68px 8px 0px' : '0px 8px')};
max-width: ${({ redesignFlag }) => (redesignFlag ? '420px' : '480px')};
max-width: 480px;
width: 100%;
@media only screen and (max-width: ${({ theme }) => `${theme.breakpoint.md}px`}) {
......@@ -42,13 +42,13 @@ export const ArrowWrapper = styled.div<{ clickable: boolean; redesignFlag: boole
height: ${({ redesignFlag }) => (redesignFlag ? '40px' : '32px')};
width: ${({ redesignFlag }) => (redesignFlag ? '40px' : '32px')};
position: relative;
margin-top: -14px;
margin-top: ${({ redesignFlag }) => (redesignFlag ? '-18px' : '-14px')};
margin-bottom: ${({ redesignFlag }) => (redesignFlag ? '-18px' : '-14px')};
left: calc(50% - 16px);
/* transform: rotate(90deg); */
background-color: ${({ theme, redesignFlag }) => (redesignFlag ? theme.backgroundSurface : theme.deprecated_bg1)};
background-color: ${({ theme, redesignFlag }) => (redesignFlag ? theme.backgroundInteractive : theme.deprecated_bg1)};
border: 4px solid;
border-color: ${({ theme, redesignFlag }) => (redesignFlag ? theme.backgroundModule : theme.deprecated_bg0)};
border-color: ${({ theme, redesignFlag }) => (redesignFlag ? theme.backgroundSurface : theme.deprecated_bg0)};
z-index: 2;
${({ clickable }) =>
......
src/pages/Swap/index.tsx
View file @ 077437e1
......@@ -83,26 +83,21 @@ const ArrowUpWrapper = styled.div`
margin-left: 56%;
margin-top: -18%;
`
const BottomWrapper = styled.div<{ redesignFlag: boolean }>`
const InputWrapper = styled.div<{ redesignFlag: boolean }>`
visibility: ${({ redesignFlag }) => !redesignFlag && 'none'};
${({ redesignFlag }) =>
redesignFlag &&
css`
background-color: ${({ theme }) => theme.backgroundModule};
border-radius: 12px;
padding: 8px 12px 10px;
padding: 16px;
color: ${({ theme }) => theme.textSecondary};
font-size: 14px;
line-height: 20px;
font-weight: 500;
`}
`
const TopInputWrapper = styled.div<{ redesignFlag: boolean }>`
padding: ${({ redesignFlag }) => redesignFlag && '0px 12px'};
visibility: ${({ redesignFlag }) => !redesignFlag && 'none'};
`
const BottomInputWrapper = styled.div<{ redesignFlag: boolean }>`
padding: ${({ redesignFlag }) => redesignFlag && '8px 0px'};
`
export function getIsValidSwapQuote(
trade: InterfaceTrade<Currency, Currency, TradeType> | undefined,
......@@ -541,7 +536,7 @@ export default function Swap() {
<AutoColumn gap={'0px'}>
<div style={{ display: 'relative' }}>
<TopInputWrapper redesignFlag={redesignFlagEnabled}>
<InputWrapper redesignFlag={redesignFlagEnabled}>
<Trace section={SectionName.CURRENCY_INPUT_PANEL}>
<SwapCurrencyInputPanel
label={
......@@ -564,7 +559,7 @@ export default function Swap() {
loading={independentField === Field.OUTPUT && routeIsSyncing}
/>
</Trace>
</TopInputWrapper>
</InputWrapper>
<ArrowWrapper clickable={isSupportedChain(chainId)} redesignFlag={redesignFlagEnabled}>
<TraceEvent
events={[Event.onClick]}
......@@ -603,10 +598,9 @@ export default function Swap() {
</TraceEvent>
</ArrowWrapper>
</div>
<BottomWrapper redesignFlag={redesignFlagEnabled}>
{redesignFlagEnabled && 'For'}
<AutoColumn gap={redesignFlagEnabled ? '0px' : '8px'}>
<BottomInputWrapper redesignFlag={redesignFlagEnabled}>
<div>
<AutoColumn gap={redesignFlagEnabled ? '12px' : '8px'}>
<InputWrapper redesignFlag={redesignFlagEnabled}>
<Trace section={SectionName.CURRENCY_OUTPUT_PANEL}>
<SwapCurrencyInputPanel
value={formattedAmounts[Field.OUTPUT]}
......@@ -655,7 +649,7 @@ export default function Swap() {
/>
)}
{showPriceImpactWarning && <PriceImpactWarning priceImpact={largerPriceImpact} />}
</BottomInputWrapper>
</InputWrapper>
<div>
{swapIsUnsupported ? (
<ButtonPrimary disabled={true}>
......@@ -810,7 +804,7 @@ export default function Swap() {
{isExpertMode && swapErrorMessage ? <SwapCallbackError error={swapErrorMessage} /> : null}
</div>
</AutoColumn>
</BottomWrapper>
</div>
</AutoColumn>
</SwapWrapper>
<NetworkAlert />
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment