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

style: Adds "deprecated_" prefix to all non-theme colors (#4146)

Browse Source 
* Add deprecated_ label to white and black

* Add deprecated_ label to text1 through text5

* Add deprecated_ label for bg0 through bg6

* Add deprecated_ prefix to remaining colors

* Add deprecated_ prefix to direct style references

* Add deprecated_ prefix to all remaining colors

* Update link color

* Fix 'deprecated_white' -> theme.deprecated_white

* Update snapshots
This commit is contained in:
Daniel James 2022-07-20 16:18:38 -04:00 committed by GitHub
parent 4649051843
commit d5e4e21a79
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
118 changed files with 711 additions and 669 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/AccountDetails/Copy.tsx
View File

@ -6,7 +6,7 @@ import styled from 'styled-components/macro'
import { LinkStyledButton } from 'theme'
const CopyIcon = styled(LinkStyledButton)`
color: ${({ color, theme }) => color || theme.text3};
color: ${({ color, theme }) => color || theme.deprecated_text3};
flex-shrink: 0;
display: flex;
text-decoration: none;
@ -14,7 +14,7 @@ const CopyIcon = styled(LinkStyledButton)`
:active,
:focus {
text-decoration: none;
color: ${({ color, theme }) => color || theme.text2};
color: ${({ color, theme }) => color || theme.deprecated_text2};
}
`
const StyledText = styled.span`

5
src/components/AccountDetails/Transaction.tsx
View File

@ -27,11 +27,12 @@ const TransactionState = styled(ExternalLink)<{ pending: boolean; success?: bool
padding: 0.25rem 0rem;
font-weight: 500;
font-size: 0.825rem;
color: ${({ theme }) => theme.primary1};
color: ${({ theme }) => theme.deprecated_primary1};
`
const IconWrapper = styled.div<{ pending: boolean; success?: boolean }>`
color: ${({ pending, success, theme }) => (pending ? theme.primary1 : success ? theme.green1 : theme.red1)};
color: ${({ pending, success, theme }) =>
pending ? theme.deprecated_primary1 : success ? theme.deprecated_green1 : theme.deprecated_red1};
`
export default function Transaction({ hash }: { hash: string }) {

20
src/components/AccountDetails/index.tsx
View File

@ -24,7 +24,7 @@ const HeaderRow = styled.div`
${({ theme }) => theme.flexRowNoWrap};
padding: 1rem 1rem;
font-weight: 500;
color: ${(props) => (props.color === 'blue' ? ({ theme }) => theme.primary1 : 'inherit')};
color: ${(props) => (props.color === 'blue' ? ({ theme }) => theme.deprecated_primary1 : 'inherit')};
${({ theme }) => theme.mediaWidth.upToMedium`
padding: 1rem;
`};
@ -52,7 +52,7 @@ const UpperSection = styled.div`
const InfoCard = styled.div`
padding: 1rem;
border: 1px solid ${({ theme }) => theme.bg3};
border: 1px solid ${({ theme }) => theme.deprecated_bg3};
border-radius: 20px;
position: relative;
display: grid;
@ -65,7 +65,7 @@ const AccountGroupingRow = styled.div`
justify-content: space-between;
align-items: center;
font-weight: 400;
color: ${({ theme }) => theme.text1};
color: ${({ theme }) => theme.deprecated_text1};
div {
${({ theme }) => theme.flexRowNoWrap}
@ -95,14 +95,14 @@ const LowerSection = styled.div`
padding: 1.5rem;
flex-grow: 1;
overflow: auto;
background-color: ${({ theme }) => theme.bg2};
background-color: ${({ theme }) => theme.deprecated_bg2};
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
h5 {
margin: 0;
font-weight: 400;
color: ${({ theme }) => theme.text3};
color: ${({ theme }) => theme.deprecated_text3};
}
`
@ -130,12 +130,12 @@ const AccountControl = styled.div`
const AddressLink = styled(ExternalLink)<{ hasENS: boolean; isENS: boolean }>`
font-size: 0.825rem;
color: ${({ theme }) => theme.text3};
color: ${({ theme }) => theme.deprecated_text3};
margin-left: 1rem;
font-size: 0.825rem;
display: flex;
:hover {
color: ${({ theme }) => theme.text2};
color: ${({ theme }) => theme.deprecated_text2};
}
`
@ -151,7 +151,7 @@ const CloseIcon = styled.div`
const CloseColor = styled(Close)`
path {
stroke: ${({ theme }) => theme.text4};
stroke: ${({ theme }) => theme.deprecated_text4};
}
`
@ -159,7 +159,7 @@ const WalletName = styled.div`
width: initial;
font-size: 0.825rem;
font-weight: 500;
color: ${({ theme }) => theme.text3};
color: ${({ theme }) => theme.deprecated_text3};
`
const TransactionListWrapper = styled.div`
@ -351,7 +351,7 @@ export default function AccountDetails({
</LowerSection>
) : (
<LowerSection>
<ThemedText.Body color={theme.text1}>
<ThemedText.Body color={theme.deprecated_text1}>
<Trans>Your transactions will appear here...</Trans>
</ThemedText.Body>
</LowerSection>

16
src/components/AddressInputPanel/index.tsx
View File

@ -15,7 +15,7 @@ const InputPanel = styled.div`
${({ theme }) => theme.flexColumnNoWrap}
position: relative;
border-radius: 1.25rem;
background-color: ${({ theme }) => theme.bg1};
background-color: ${({ theme }) => theme.deprecated_bg1};
z-index: 1;
width: 100%;
`
@ -25,10 +25,10 @@ const ContainerRow = styled.div<{ error: boolean }>`
justify-content: center;
align-items: center;
border-radius: 1.25rem;
border: 1px solid ${({ error, theme }) => (error ? theme.red1 : theme.bg2)};
border: 1px solid ${({ error, theme }) => (error ? theme.deprecated_red1 : theme.deprecated_bg2)};
transition: border-color 300ms ${({ error }) => (error ? 'step-end' : 'step-start')},
color 500ms ${({ error }) => (error ? 'step-end' : 'step-start')};
background-color: ${({ theme }) => theme.bg1};
background-color: ${({ theme }) => theme.deprecated_bg1};
`
const InputContainer = styled.div`
@ -42,15 +42,15 @@ const Input = styled.input<{ error?: boolean }>`
border: none;
flex: 1 1 auto;
width: 0;
background-color: ${({ theme }) => theme.bg1};
background-color: ${({ theme }) => theme.deprecated_bg1};
transition: color 300ms ${({ error }) => (error ? 'step-end' : 'step-start')};
color: ${({ error, theme }) => (error ? theme.red1 : theme.text1)};
color: ${({ error, theme }) => (error ? theme.deprecated_red1 : theme.deprecated_text1)};
overflow: hidden;
text-overflow: ellipsis;
font-weight: 500;
width: 100%;
::placeholder {
color: ${({ theme }) => theme.text4};
color: ${({ theme }) => theme.deprecated_text4};
}
padding: 0px;
-webkit-appearance: textfield;
@ -65,7 +65,7 @@ const Input = styled.input<{ error?: boolean }>`
}
::placeholder {
color: ${({ theme }) => theme.text4};
color: ${({ theme }) => theme.deprecated_text4};
}
`
@ -108,7 +108,7 @@ export default function AddressInputPanel({
<InputContainer>
<AutoColumn gap="md">
<RowBetween>
<ThemedText.Black color={theme.text2} fontWeight={500} fontSize={14}>
<ThemedText.Black color={theme.deprecated_text2} fontWeight={500} fontSize={14}>
{label ?? <Trans>Recipient</Trans>}
</ThemedText.Black>
{address && chainId && (

2
src/components/Badge/RangeBadge.tsx
View File

@ -17,7 +17,7 @@ const BadgeText = styled.div`
`
const ActiveDot = styled.span`
background-color: ${({ theme }) => theme.success};
background-color: ${({ theme }) => theme.deprecated_success};
border-radius: 50%;
height: 8px;
width: 8px;

22
src/components/Badge/index.tsx
View File

@ -20,24 +20,24 @@ interface BadgeProps {
function pickBackgroundColor(variant: BadgeVariant | undefined, theme: DefaultTheme): Color {
switch (variant) {
case BadgeVariant.NEGATIVE:
return theme.error
return theme.deprecated_error
case BadgeVariant.POSITIVE:
return theme.success
return theme.deprecated_success
case BadgeVariant.PRIMARY:
return theme.primary1
return theme.deprecated_primary1
case BadgeVariant.WARNING:
return theme.warning
return theme.deprecated_warning
case BadgeVariant.WARNING_OUTLINE:
return 'transparent'
default:
return theme.bg2
return theme.deprecated_bg2
}
}
function pickBorder(variant: BadgeVariant | undefined, theme: DefaultTheme): string {
switch (variant) {
case BadgeVariant.WARNING_OUTLINE:
return `1px solid ${theme.warning}`
return `1px solid ${theme.deprecated_warning}`
default:
return 'unset'
}
@ -46,15 +46,15 @@ function pickBorder(variant: BadgeVariant | undefined, theme: DefaultTheme): str
function pickFontColor(variant: BadgeVariant | undefined, theme: DefaultTheme): string {
switch (variant) {
case BadgeVariant.NEGATIVE:
return readableColor(theme.error)
return readableColor(theme.deprecated_error)
case BadgeVariant.POSITIVE:
return readableColor(theme.success)
return readableColor(theme.deprecated_success)
case BadgeVariant.WARNING:
return readableColor(theme.warning)
return readableColor(theme.deprecated_warning)
case BadgeVariant.WARNING_OUTLINE:
return theme.warning
return theme.deprecated_warning
default:
return readableColor(theme.bg2)
return readableColor(theme.deprecated_bg2)
}
}

116
src/components/Button/index.tsx
View File

@ -23,7 +23,7 @@ export const BaseButton = styled(RebassButton)<
border-radius: ${({ $borderRadius }) => $borderRadius ?? '20px'};
outline: none;
border: 1px solid transparent;
color: ${({ theme }) => theme.text1};
color: ${({ theme }) => theme.deprecated_text1};
text-decoration: none;
display: flex;
justify-content: center;
@ -52,24 +52,24 @@ export const BaseButton = styled(RebassButton)<
`
export const ButtonPrimary = styled(BaseButton)`
background-color: ${({ theme }) => theme.primary1};
background-color: ${({ theme }) => theme.deprecated_primary1};
color: white;
&:focus {
box-shadow: 0 0 0 1pt ${({ theme }) => darken(0.05, theme.primary1)};
background-color: ${({ theme }) => darken(0.05, theme.primary1)};
box-shadow: 0 0 0 1pt ${({ theme }) => darken(0.05, theme.deprecated_primary1)};
background-color: ${({ theme }) => darken(0.05, theme.deprecated_primary1)};
}
&:hover {
background-color: ${({ theme }) => darken(0.05, theme.primary1)};
background-color: ${({ theme }) => darken(0.05, theme.deprecated_primary1)};
}
&:active {
box-shadow: 0 0 0 1pt ${({ theme }) => darken(0.1, theme.primary1)};
background-color: ${({ theme }) => darken(0.1, theme.primary1)};
box-shadow: 0 0 0 1pt ${({ theme }) => darken(0.1, theme.deprecated_primary1)};
background-color: ${({ theme }) => darken(0.1, theme.deprecated_primary1)};
}
&:disabled {
background-color: ${({ theme, altDisabledStyle, disabled }) =>
altDisabledStyle ? (disabled ? theme.primary1 : theme.bg2) : theme.bg2};
altDisabledStyle ? (disabled ? theme.deprecated_primary1 : theme.deprecated_bg2) : theme.deprecated_bg2};
color: ${({ altDisabledStyle, disabled, theme }) =>
altDisabledStyle ? (disabled ? theme.white : theme.text2) : theme.text2};
altDisabledStyle ? (disabled ? theme.deprecated_white : theme.deprecated_text2) : theme.deprecated_text2};
cursor: auto;
box-shadow: none;
border: 1px solid transparent;
@ -78,26 +78,26 @@ export const ButtonPrimary = styled(BaseButton)`
`
export const ButtonLight = styled(BaseButton)`
background-color: ${({ theme }) => theme.primary5};
color: ${({ theme }) => theme.primaryText1};
background-color: ${({ theme }) => theme.deprecated_primary5};
color: ${({ theme }) => theme.deprecated_primaryText1};
font-size: 16px;
font-weight: 500;
&:focus {
box-shadow: 0 0 0 1pt ${({ theme, disabled }) => !disabled && darken(0.03, theme.primary5)};
background-color: ${({ theme, disabled }) => !disabled && darken(0.03, theme.primary5)};
box-shadow: 0 0 0 1pt ${({ theme, disabled }) => !disabled && darken(0.03, theme.deprecated_primary5)};
background-color: ${({ theme, disabled }) => !disabled && darken(0.03, theme.deprecated_primary5)};
}
&:hover {
background-color: ${({ theme, disabled }) => !disabled && darken(0.03, theme.primary5)};
background-color: ${({ theme, disabled }) => !disabled && darken(0.03, theme.deprecated_primary5)};
}
&:active {
box-shadow: 0 0 0 1pt ${({ theme, disabled }) => !disabled && darken(0.05, theme.primary5)};
background-color: ${({ theme, disabled }) => !disabled && darken(0.05, theme.primary5)};
box-shadow: 0 0 0 1pt ${({ theme, disabled }) => !disabled && darken(0.05, theme.deprecated_primary5)};
background-color: ${({ theme, disabled }) => !disabled && darken(0.05, theme.deprecated_primary5)};
}
:disabled {
opacity: 0.4;
:hover {
cursor: auto;
background-color: ${({ theme }) => theme.primary5};
background-color: ${({ theme }) => theme.deprecated_primary5};
box-shadow: none;
border: 1px solid transparent;
outline: none;
@ -106,37 +106,37 @@ export const ButtonLight = styled(BaseButton)`
`
export const ButtonGray = styled(BaseButton)`
background-color: ${({ theme }) => theme.bg1};
color: ${({ theme }) => theme.text2};
background-color: ${({ theme }) => theme.deprecated_bg1};
color: ${({ theme }) => theme.deprecated_text2};
font-size: 16px;
font-weight: 500;
&:hover {
background-color: ${({ theme, disabled }) => !disabled && darken(0.05, theme.bg2)};
background-color: ${({ theme, disabled }) => !disabled && darken(0.05, theme.deprecated_bg2)};
}
&:active {
background-color: ${({ theme, disabled }) => !disabled && darken(0.1, theme.bg2)};
background-color: ${({ theme, disabled }) => !disabled && darken(0.1, theme.deprecated_bg2)};
}
`
export const ButtonSecondary = styled(BaseButton)`
border: 1px solid ${({ theme }) => theme.primary4};
color: ${({ theme }) => theme.primary1};
border: 1px solid ${({ theme }) => theme.deprecated_primary4};
color: ${({ theme }) => theme.deprecated_primary1};
background-color: transparent;
font-size: 16px;
border-radius: 12px;
padding: ${({ padding }) => (padding ? padding : '10px')};
&:focus {
box-shadow: 0 0 0 1pt ${({ theme }) => theme.primary4};
border: 1px solid ${({ theme }) => theme.primary3};
box-shadow: 0 0 0 1pt ${({ theme }) => theme.deprecated_primary4};
border: 1px solid ${({ theme }) => theme.deprecated_primary3};
}
&:hover {
border: 1px solid ${({ theme }) => theme.primary3};
border: 1px solid ${({ theme }) => theme.deprecated_primary3};
}
&:active {
box-shadow: 0 0 0 1pt ${({ theme }) => theme.primary4};
border: 1px solid ${({ theme }) => theme.primary3};
box-shadow: 0 0 0 1pt ${({ theme }) => theme.deprecated_primary4};
border: 1px solid ${({ theme }) => theme.deprecated_primary3};
}
&:disabled {
opacity: 50%;
@ -148,17 +148,17 @@ export const ButtonSecondary = styled(BaseButton)`
`
export const ButtonOutlined = styled(BaseButton)`
border: 1px solid ${({ theme }) => theme.bg2};
border: 1px solid ${({ theme }) => theme.deprecated_bg2};
background-color: transparent;
color: ${({ theme }) => theme.text1};
color: ${({ theme }) => theme.deprecated_text1};
&:focus {
box-shadow: 0 0 0 1px ${({ theme }) => theme.bg4};
box-shadow: 0 0 0 1px ${({ theme }) => theme.deprecated_bg4};
}
&:hover {
box-shadow: 0 0 0 1px ${({ theme }) => theme.bg4};
box-shadow: 0 0 0 1px ${({ theme }) => theme.deprecated_bg4};
}
&:active {
box-shadow: 0 0 0 1px ${({ theme }) => theme.bg4};
box-shadow: 0 0 0 1px ${({ theme }) => theme.deprecated_bg4};
}
&:disabled {
opacity: 50%;
@ -167,21 +167,21 @@ export const ButtonOutlined = styled(BaseButton)`
`
export const ButtonYellow = styled(BaseButton)`
background-color: ${({ theme }) => theme.yellow3};
background-color: ${({ theme }) => theme.deprecated_yellow3};
color: white;
&:focus {
box-shadow: 0 0 0 1pt ${({ theme }) => darken(0.05, theme.yellow3)};
background-color: ${({ theme }) => darken(0.05, theme.yellow3)};
box-shadow: 0 0 0 1pt ${({ theme }) => darken(0.05, theme.deprecated_yellow3)};
background-color: ${({ theme }) => darken(0.05, theme.deprecated_yellow3)};
}
&:hover {
background-color: ${({ theme }) => darken(0.05, theme.yellow3)};
background-color: ${({ theme }) => darken(0.05, theme.deprecated_yellow3)};
}
&:active {
box-shadow: 0 0 0 1pt ${({ theme }) => darken(0.1, theme.yellow3)};
background-color: ${({ theme }) => darken(0.1, theme.yellow3)};
box-shadow: 0 0 0 1pt ${({ theme }) => darken(0.1, theme.deprecated_yellow3)};
background-color: ${({ theme }) => darken(0.1, theme.deprecated_yellow3)};
}
&:disabled {
background-color: ${({ theme }) => theme.yellow3};
background-color: ${({ theme }) => theme.deprecated_yellow3};
opacity: 50%;
cursor: auto;
}
@ -189,7 +189,7 @@ export const ButtonYellow = styled(BaseButton)`
export const ButtonEmpty = styled(BaseButton)`
background-color: transparent;
color: ${({ theme }) => theme.primary1};
color: ${({ theme }) => theme.deprecated_primary1};
display: flex;
justify-content: center;
align-items: center;
@ -232,39 +232,39 @@ export const ButtonText = styled(BaseButton)`
`
const ButtonConfirmedStyle = styled(BaseButton)`
background-color: ${({ theme }) => theme.bg3};
color: ${({ theme }) => theme.text1};
/* border: 1px solid ${({ theme }) => theme.green1}; */
background-color: ${({ theme }) => theme.deprecated_bg3};
color: ${({ theme }) => theme.deprecated_text1};
/* border: 1px solid ${({ theme }) => theme.deprecated_green1}; */
&:disabled {
opacity: 50%;
background-color: ${({ theme }) => theme.bg2};
color: ${({ theme }) => theme.text2};
background-color: ${({ theme }) => theme.deprecated_bg2};
color: ${({ theme }) => theme.deprecated_text2};
cursor: auto;
}
`
const ButtonErrorStyle = styled(BaseButton)`
background-color: ${({ theme }) => theme.red1};
border: 1px solid ${({ theme }) => theme.red1};
background-color: ${({ theme }) => theme.deprecated_red1};
border: 1px solid ${({ theme }) => theme.deprecated_red1};
&:focus {
box-shadow: 0 0 0 1pt ${({ theme }) => darken(0.05, theme.red1)};
background-color: ${({ theme }) => darken(0.05, theme.red1)};
box-shadow: 0 0 0 1pt ${({ theme }) => darken(0.05, theme.deprecated_red1)};
background-color: ${({ theme }) => darken(0.05, theme.deprecated_red1)};
}
&:hover {
background-color: ${({ theme }) => darken(0.05, theme.red1)};
background-color: ${({ theme }) => darken(0.05, theme.deprecated_red1)};
}
&:active {
box-shadow: 0 0 0 1pt ${({ theme }) => darken(0.1, theme.red1)};
background-color: ${({ theme }) => darken(0.1, theme.red1)};
box-shadow: 0 0 0 1pt ${({ theme }) => darken(0.1, theme.deprecated_red1)};
background-color: ${({ theme }) => darken(0.1, theme.deprecated_red1)};
}
&:disabled {
opacity: 50%;
cursor: auto;
box-shadow: none;
background-color: ${({ theme }) => theme.red1};
border: 1px solid ${({ theme }) => theme.red1};
background-color: ${({ theme }) => theme.deprecated_red1};
border: 1px solid ${({ theme }) => theme.deprecated_red1};
}
`
@ -312,14 +312,14 @@ export function ButtonDropdownLight({ disabled = false, children, ...rest }: { d
const ActiveOutlined = styled(ButtonOutlined)`
border: 1px solid;
border-color: ${({ theme }) => theme.primary1};
border-color: ${({ theme }) => theme.deprecated_primary1};
`
const Circle = styled.div`
height: 17px;
width: 17px;
border-radius: 50%;
background-color: ${({ theme }) => theme.primary1};
background-color: ${({ theme }) => theme.deprecated_primary1};
display: flex;
align-items: center;
justify-content: center;
@ -354,7 +354,7 @@ export function ButtonRadioChecked({ active = false, children, ...rest }: { acti
{children}
<CheckboxWrapper>
<Circle>
<ResponsiveCheck size={13} stroke={theme.white} />
<ResponsiveCheck size={13} stroke={theme.deprecated_white} />
</Circle>
</CheckboxWrapper>
</RowBetween>

20
src/components/Card/index.tsx
View File

@ -10,38 +10,38 @@ const Card = styled(Box)<{ width?: string; padding?: string; border?: string; $b
export default Card
export const LightCard = styled(Card)`
border: 1px solid ${({ theme }) => theme.bg2};
background-color: ${({ theme }) => theme.bg1};
border: 1px solid ${({ theme }) => theme.deprecated_bg2};
background-color: ${({ theme }) => theme.deprecated_bg1};
`
export const LightGreyCard = styled(Card)`
background-color: ${({ theme }) => theme.bg2};
background-color: ${({ theme }) => theme.deprecated_bg2};
`
export const GreyCard = styled(Card)`
background-color: ${({ theme }) => theme.bg3};
background-color: ${({ theme }) => theme.deprecated_bg3};
`
export const DarkGreyCard = styled(Card)`
background-color: ${({ theme }) => theme.bg2};
background-color: ${({ theme }) => theme.deprecated_bg2};
`
export const DarkCard = styled(Card)`
background-color: ${({ theme }) => theme.bg0};
background-color: ${({ theme }) => theme.deprecated_bg0};
`
export const OutlineCard = styled(Card)`
border: 1px solid ${({ theme }) => theme.bg3};
border: 1px solid ${({ theme }) => theme.deprecated_bg3};
`
export const YellowCard = styled(Card)`
background-color: rgba(243, 132, 30, 0.05);
color: ${({ theme }) => theme.yellow3};
color: ${({ theme }) => theme.deprecated_yellow3};
font-weight: 500;
`
export const BlueCard = styled(Card)`
background-color: ${({ theme }) => theme.primary5};
color: ${({ theme }) => theme.blue2};
background-color: ${({ theme }) => theme.deprecated_primary5};
color: ${({ theme }) => theme.deprecated_blue2};
border-radius: 12px;
`

4
src/components/ConnectedAccountBlocked/index.tsx
View File

@ -16,7 +16,7 @@ const ContentWrapper = styled(Column)`
const WarningIcon = styled(AlertOctagon)`
min-height: 22px;
min-width: 22px;
color: ${({ theme }) => theme.warning};
color: ${({ theme }) => theme.deprecated_warning};
`
const Copy = styled(CopyHelper)`
font-size: 12px;
@ -49,7 +49,7 @@ export default function ConnectedAccountBlocked(props: ConnectedAccountBlockedPr
<ThemedText.Main fontSize={12}>
<Trans>If you believe this is an error, please send an email including your address to </Trans>{' '}
</ThemedText.Main>
<Copy iconSize={12} toCopy="compliance@uniswap.org" color={theme.primary1} iconPosition="right">
<Copy iconSize={12} toCopy="compliance@uniswap.org" color={theme.deprecated_primary1} iconPosition="right">
compliance@uniswap.org
</Copy>
</ContentWrapper>

14
src/components/CurrencyInputPanel/FiatValue.tsx
View File

@ -20,24 +20,24 @@ export function FiatValue({
const theme = useTheme()
const priceImpactColor = useMemo(() => {
if (!priceImpact) return undefined
if (priceImpact.lessThan('0')) return theme.green1
if (priceImpact.lessThan('0')) return theme.deprecated_green1
const severity = warningSeverity(priceImpact)
if (severity < 1) return theme.text3
if (severity < 3) return theme.yellow1
return theme.red1
}, [priceImpact, theme.green1, theme.red1, theme.text3, theme.yellow1])
if (severity < 1) return theme.deprecated_text3
if (severity < 3) return theme.deprecated_yellow1
return theme.deprecated_red1
}, [priceImpact, theme.deprecated_green1, theme.deprecated_red1, theme.deprecated_text3, theme.deprecated_yellow1])
const p = Number(fiatValue?.toFixed())
const visibleDecimalPlaces = p < 1.05 ? 4 : 2
return (
<ThemedText.Body fontSize={14} color={fiatValue ? theme.text3 : theme.text4}>
<ThemedText.Body fontSize={14} color={fiatValue ? theme.deprecated_text3 : theme.deprecated_text4}>
{fiatValue ? (
<Trans>
$
<HoverInlineText
text={fiatValue?.toFixed(visibleDecimalPlaces, { groupSeparator: ',' })}
textColor={fiatValue ? theme.text3 : theme.text4}
textColor={fiatValue ? theme.deprecated_text3 : theme.deprecated_text4}
/>
</Trans>
) : (

29
src/components/CurrencyInputPanel/index.tsx
View File

@ -26,7 +26,7 @@ const InputPanel = styled.div<{ hideInput?: boolean }>`
${({ theme }) => theme.flexColumnNoWrap}
position: relative;
border-radius: ${({ hideInput }) => (hideInput ? '16px' : '20px')};
background-color: ${({ theme, hideInput }) => (hideInput ? 'transparent' : theme.bg2)};
background-color: ${({ theme, hideInput }) => (hideInput ? 'transparent' : theme.deprecated_bg2)};
z-index: 1;
width: ${({ hideInput }) => (hideInput ? '100%' : 'initial')};
transition: height 1s ease;
@ -38,7 +38,7 @@ const FixedContainer = styled.div`
height: 100%;
position: absolute;
border-radius: 20px;
background-color: ${({ theme }) => theme.bg2};
background-color: ${({ theme }) => theme.deprecated_bg2};
display: flex;
align-items: center;
justify-content: center;
@ -47,21 +47,21 @@ const FixedContainer = styled.div`
const Container = styled.div<{ hideInput: boolean }>`
border-radius: ${({ hideInput }) => (hideInput ? '16px' : '20px')};
border: 1px solid ${({ theme }) => theme.bg0};
background-color: ${({ theme }) => theme.bg1};
border: 1px solid ${({ theme }) => theme.deprecated_bg0};
background-color: ${({ theme }) => theme.deprecated_bg1};
width: ${({ hideInput }) => (hideInput ? '100%' : 'initial')};
:focus,
:hover {
border: 1px solid ${({ theme, hideInput }) => (hideInput ? ' transparent' : theme.bg3)};
border: 1px solid ${({ theme, hideInput }) => (hideInput ? ' transparent' : theme.deprecated_bg3)};
}
`
const CurrencySelect = styled(ButtonGray)<{ visible: boolean; selected: boolean; hideInput?: boolean }>`
align-items: center;
background-color: ${({ selected, theme }) => (selected ? theme.bg2 : theme.primary1)};
background-color: ${({ selected, theme }) => (selected ? theme.deprecated_bg2 : theme.deprecated_primary1)};
box-shadow: ${({ selected }) => (selected ? 'none' : '0px 6px 10px rgba(0, 0, 0, 0.075)')};
box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.075);
color: ${({ selected, theme }) => (selected ? theme.text1 : theme.white)};
color: ${({ selected, theme }) => (selected ? theme.deprecated_text1 : theme.deprecated_white)};
cursor: pointer;
border-radius: 16px;
outline: none;
@ -76,7 +76,8 @@ const CurrencySelect = styled(ButtonGray)<{ visible: boolean; selected: boolean;
margin-left: ${({ hideInput }) => (hideInput ? '0' : '12px')};
:focus,
:hover {
background-color: ${({ selected, theme }) => (selected ? theme.bg3 : darken(0.05, theme.primary1))};
background-color: ${({ selected, theme }) =>
selected ? theme.deprecated_bg3 : darken(0.05, theme.deprecated_primary1)};
}
visibility: ${({ visible }) => (visible ? 'visible' : 'hidden')};
`
@ -91,13 +92,13 @@ const InputRow = styled.div<{ selected: boolean }>`
const LabelRow = styled.div`
${({ theme }) => theme.flexRowNoWrap}
align-items: center;
color: ${({ theme }) => theme.text1};
color: ${({ theme }) => theme.deprecated_text1};
font-size: 0.75rem;
line-height: 1rem;
padding: 0 1rem 1rem;
span:hover {
cursor: pointer;
color: ${({ theme }) => darken(0.2, theme.text2)};
color: ${({ theme }) => darken(0.2, theme.deprecated_text2)};
}
`
@ -118,7 +119,7 @@ const StyledDropDown = styled(DropDown)<{ selected: boolean }>`
height: 35%;
path {
stroke: ${({ selected, theme }) => (selected ? theme.text1 : theme.white)};
stroke: ${({ selected, theme }) => (selected ? theme.deprecated_text1 : theme.deprecated_white)};
stroke-width: 1.5px;
}
`
@ -130,10 +131,10 @@ const StyledTokenName = styled.span<{ active?: boolean }>`
const StyledBalanceMax = styled.button<{ disabled?: boolean }>`
background-color: transparent;
background-color: ${({ theme }) => theme.primary5};
background-color: ${({ theme }) => theme.deprecated_primary5};
border: none;
border-radius: 12px;
color: ${({ theme }) => theme.primary1};
color: ${({ theme }) => theme.deprecated_primary1};
cursor: pointer;
font-size: 11px;
font-weight: 500;
@ -281,7 +282,7 @@ export default function CurrencyInputPanel({
<RowFixed style={{ height: '17px' }}>
<ThemedText.Body
onClick={onMax}
color={theme.text3}
color={theme.deprecated_text3}
fontWeight={500}
fontSize={14}
style={{ display: 'inline', cursor: 'pointer' }}

6
src/components/ErrorBoundary/index.tsx
View File

@ -24,18 +24,18 @@ const BodyWrapper = styled.div<{ margin?: string }>`
`
const CodeBlockWrapper = styled.div`
background: ${({ theme }) => theme.bg0};
background: ${({ theme }) => theme.deprecated_bg0};
overflow: auto;
white-space: pre;
box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.01), 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 16px 24px rgba(0, 0, 0, 0.04),
0px 24px 32px rgba(0, 0, 0, 0.01);
border-radius: 24px;
padding: 18px 24px;
color: ${({ theme }) => theme.text1};
color: ${({ theme }) => theme.deprecated_text1};
`
const LinkWrapper = styled.div`
color: ${({ theme }) => theme.blue1};
color: ${({ theme }) => theme.deprecated_blue1};
padding: 6px 24px;
`

4
src/components/FeeSelector/index.tsx
View File

@ -34,8 +34,8 @@ const pulse = (color: string) => keyframes`
}
`
const FocusedOutlineCard = styled(Card)<{ pulsing: boolean }>`
border: 1px solid ${({ theme }) => theme.bg2};
animation: ${({ pulsing, theme }) => pulsing && pulse(theme.primary1)} 0.6s linear;
border: 1px solid ${({ theme }) => theme.deprecated_bg2};
animation: ${({ pulsing, theme }) => pulsing && pulse(theme.deprecated_primary1)} 0.6s linear;
align-self: center;
`

8
src/components/Header/ChainConnectivityWarning.tsx
View File

@ -7,14 +7,14 @@ import styled from 'styled-components/macro'
import { ExternalLink, MEDIA_WIDTHS } from 'theme'
const BodyRow = styled.div`
color: ${({ theme }) => theme.black};
color: ${({ theme }) => theme.deprecated_black};
font-size: 12px;
`
const CautionIcon = styled(AlertOctagon)`
color: ${({ theme }) => theme.black};
color: ${({ theme }) => theme.deprecated_black};
`
const Link = styled(ExternalLink)`
color: ${({ theme }) => theme.black};
color: ${({ theme }) => theme.deprecated_black};
text-decoration: underline;
`
const TitleRow = styled.div`
@ -31,7 +31,7 @@ const TitleText = styled.div`
margin: 0px 12px;
`
const Wrapper = styled.div`
background-color: ${({ theme }) => theme.yellow3};
background-color: ${({ theme }) => theme.deprecated_yellow3};
border-radius: 12px;
bottom: 60px;
display: none;

18
src/components/Header/NetworkSelector.tsx
View File

@ -25,7 +25,7 @@ const ActiveRowLinkList = styled.div`
padding: 0 8px;
& > a {
align-items: center;
color: ${({ theme }) => theme.text2};
color: ${({ theme }) => theme.deprecated_text2};
display: flex;
flex-direction: row;
font-size: 14px;
@ -41,14 +41,14 @@ const ActiveRowLinkList = styled.div`
}
`
const ActiveRowWrapper = styled.div`
background-color: ${({ theme }) => theme.bg1};
background-color: ${({ theme }) => theme.deprecated_bg1};
border-radius: 8px;
cursor: pointer;
padding: 8px;
width: 100%;
`
const FlyoutHeader = styled.div`
color: ${({ theme }) => theme.text2};
color: ${({ theme }) => theme.deprecated_text2};
font-weight: 400;
`
const FlyoutMenu = styled.div`
@ -63,7 +63,7 @@ const FlyoutMenu = styled.div`
`
const FlyoutMenuContents = styled.div`
align-items: flex-start;
background-color: ${({ theme }) => theme.bg0};
background-color: ${({ theme }) => theme.deprecated_bg0};
box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.01), 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 16px 24px rgba(0, 0, 0, 0.04),
0px 24px 32px rgba(0, 0, 0, 0.01);
border-radius: 20px;
@ -78,7 +78,7 @@ const FlyoutMenuContents = styled.div`
`
const FlyoutRow = styled.div<{ active: boolean }>`
align-items: center;
background-color: ${({ active, theme }) => (active ? theme.bg1 : 'transparent')};
background-color: ${({ active, theme }) => (active ? theme.deprecated_bg1 : 'transparent')};
border-radius: 8px;
cursor: pointer;
display: flex;
@ -89,7 +89,7 @@ const FlyoutRow = styled.div<{ active: boolean }>`
width: 100%;
`
const FlyoutRowActiveIndicator = styled.div`
background-color: ${({ theme }) => theme.green1};
background-color: ${({ theme }) => theme.deprecated_green1};
border-radius: 50%;
height: 9px;
width: 9px;
@ -123,10 +123,10 @@ const SelectorLabel = styled(NetworkLabel)`
`
const SelectorControls = styled.div`
align-items: center;
background-color: ${({ theme }) => theme.bg0};
border: 2px solid ${({ theme }) => theme.bg0};
background-color: ${({ theme }) => theme.deprecated_bg0};
border: 2px solid ${({ theme }) => theme.deprecated_bg0};
border-radius: 16px;
color: ${({ theme }) => theme.text1};
color: ${({ theme }) => theme.deprecated_text1};
display: flex;
font-weight: 500;
justify-content: space-between;

10
src/components/Header/Polling.tsx
View File

@ -24,7 +24,7 @@ const StyledPolling = styled.div<{ warning: boolean }>`
right: 0;
bottom: 0;
padding: 1rem;
color: ${({ theme, warning }) => (warning ? theme.yellow3 : theme.green1)};
color: ${({ theme, warning }) => (warning ? theme.deprecated_yellow3 : theme.deprecated_green1)};
transition: 250ms ease color;
${({ theme }) => theme.mediaWidth.upToMedium`
@ -53,12 +53,12 @@ const StyledPollingDot = styled.div<{ warning: boolean }>`
min-width: 8px;
border-radius: 50%;
position: relative;
background-color: ${({ theme, warning }) => (warning ? theme.yellow3 : theme.green1)};
background-color: ${({ theme, warning }) => (warning ? theme.deprecated_yellow3 : theme.deprecated_green1)};
transition: 250ms ease background-color;
`
const StyledGasDot = styled.div`
background-color: ${({ theme }) => theme.text3};
background-color: ${({ theme }) => theme.deprecated_text3};
border-radius: 50%;
height: 4px;
min-height: 4px;
@ -84,7 +84,7 @@ const Spinner = styled.div<{ warning: boolean }>`
border-top: 1px solid transparent;
border-right: 1px solid transparent;
border-bottom: 1px solid transparent;
border-left: 2px solid ${({ theme, warning }) => (warning ? theme.yellow3 : theme.green1)};
border-left: 2px solid ${({ theme, warning }) => (warning ? theme.deprecated_yellow3 : theme.deprecated_green1)};
background: transparent;
width: 14px;
height: 14px;
@ -143,7 +143,7 @@ export default function Polling() {
<ExternalLink href={'https://etherscan.io/gastracker'}>
{priceGwei ? (
<RowFixed style={{ marginRight: '8px' }}>
<ThemedText.Main fontSize="11px" mr="8px" color={theme.text3}>
<ThemedText.Main fontSize="11px" mr="8px" color={theme.deprecated_text3}>
<MouseoverTooltip
text={
<Trans>

32
src/components/Header/index.tsx
View File

@ -39,10 +39,10 @@ const HeaderFrame = styled.div<{ showBackground: boolean }>`
z-index: 21;
position: relative;
/* Background slide effect on scroll. */
background-image: ${({ theme }) => `linear-gradient(to bottom, transparent 50%, ${theme.bg0} 50% )}}`};
background-image: ${({ theme }) => `linear-gradient(to bottom, transparent 50%, ${theme.deprecated_bg0} 50% )}}`};
background-position: ${({ showBackground }) => (showBackground ? '0 -100%' : '0 0')};
background-size: 100% 200%;
box-shadow: 0px 0px 0px 1px ${({ theme, showBackground }) => (showBackground ? theme.bg2 : 'transparent;')};
box-shadow: 0px 0px 0px 1px ${({ theme, showBackground }) => (showBackground ? theme.deprecated_bg2 : 'transparent;')};
transition: background-position 0.1s, box-shadow 0.1s;
background-blend-mode: hard-light;
@ -88,7 +88,7 @@ const HeaderElement = styled.div`
const HeaderLinks = styled(Row)`
justify-self: center;
background-color: ${({ theme }) => theme.bg0};
background-color: ${({ theme }) => theme.deprecated_bg0};
width: fit-content;
padding: 2px;
border-radius: 16px;
@ -112,8 +112,8 @@ const HeaderLinks = styled(Row)`
bottom: 0; right: 50%;
transform: translate(50%,-50%);
margin: 0 auto;
background-color: ${({ theme }) => theme.bg0};
border: 1px solid ${({ theme }) => theme.bg2};
background-color: ${({ theme }) => theme.deprecated_bg0};
border: 1px solid ${({ theme }) => theme.deprecated_bg2};
box-shadow: 0px 6px 10px rgb(0 0 0 / 2%);
`};
`
@ -122,7 +122,7 @@ const AccountElement = styled.div<{ active: boolean }>`
display: flex;
flex-direction: row;
align-items: center;
background-color: ${({ theme, active }) => (!active ? theme.bg0 : theme.bg0)};
background-color: ${({ theme, active }) => (!active ? theme.deprecated_bg0 : theme.deprecated_bg0)};
border-radius: 16px;
white-space: nowrap;
width: 100%;
@ -138,7 +138,7 @@ const UNIAmount = styled(AccountElement)`
padding: 4px 8px;
height: 36px;
font-weight: 500;
background-color: ${({ theme }) => theme.bg3};
background-color: ${({ theme }) => theme.deprecated_bg3};
background: radial-gradient(174.47% 188.91% at 1.84% 0%, #ff007a 0%, #2172e5 100%), #edeef2;
`
@ -196,7 +196,7 @@ const StyledNavLink = styled(NavLink).attrs({
outline: none;
cursor: pointer;
text-decoration: none;
color: ${({ theme }) => theme.text2};
color: ${({ theme }) => theme.deprecated_text2};
font-size: 1rem;
font-weight: 500;
padding: 8px 12px;
@ -207,13 +207,13 @@ const StyledNavLink = styled(NavLink).attrs({
border-radius: 14px;
font-weight: 600;
justify-content: center;
color: ${({ theme }) => theme.text1};
background-color: ${({ theme }) => theme.bg1};
color: ${({ theme }) => theme.deprecated_text1};
background-color: ${({ theme }) => theme.deprecated_bg1};
}
:hover,
:focus {
color: ${({ theme }) => darken(0.1, theme.text1)};
color: ${({ theme }) => darken(0.1, theme.deprecated_text1)};
}
`
@ -226,7 +226,7 @@ const StyledExternalLink = styled(ExternalLink).attrs({
outline: none;
cursor: pointer;
text-decoration: none;
color: ${({ theme }) => theme.text2};
color: ${({ theme }) => theme.deprecated_text2};
font-size: 1rem;
width: fit-content;
margin: 0 12px;
@ -235,12 +235,12 @@ const StyledExternalLink = styled(ExternalLink).attrs({
&.${activeClassName} {
border-radius: 14px;
font-weight: 600;
color: ${({ theme }) => theme.text1};
color: ${({ theme }) => theme.deprecated_text1};
}
:hover,
:focus {
color: ${({ theme }) => darken(0.1, theme.text1)};
color: ${({ theme }) => darken(0.1, theme.deprecated_text1)};
text-decoration: none;
}
`
@ -250,7 +250,7 @@ export default function Header() {
const userEthBalance = useNativeCurrencyBalances(account ? [account] : [])?.[account ?? '']
const [darkMode] = useDarkModeManager()
const { white, black } = useTheme()
const { deprecated_white, deprecated_black } = useTheme()
const toggleClaimModal = useToggleSelfClaimModal()
@ -272,7 +272,7 @@ export default function Header() {
<ClaimModal />
<Title href=".">
<UniIcon>
<Logo fill={darkMode ? white : black} width="24px" height="100%" title="logo" />
<Logo fill={darkMode ? deprecated_white : deprecated_black} width="24px" height="100%" title="logo" />
<HolidayOrnament />
</UniIcon>
</Title>

2
src/components/HoverInlineText/index.tsx
View File

@ -10,7 +10,7 @@ const TextWrapper = styled.span<{
textColor?: string
}>`
margin-left: ${({ margin }) => margin && '4px'};
color: ${({ theme, link, textColor }) => (link ? theme.blue1 : textColor ?? theme.text1)};
color: ${({ theme, link, textColor }) => (link ? theme.deprecated_blue1 : textColor ?? theme.deprecated_text1)};
font-size: ${({ fontSize }) => fontSize ?? 'inherit'};
@media screen and (max-width: 600px) {

2
src/components/Identicon/index.tsx
View File

@ -8,7 +8,7 @@ const StyledIdenticon = styled.div`
height: 1rem;
width: 1rem;
border-radius: 1.125rem;
background-color: ${({ theme }) => theme.bg4};
background-color: ${({ theme }) => theme.deprecated_bg4};
font-size: initial;
`

8
src/components/InputStepCounter/InputStepCounter.tsx
View File

@ -36,9 +36,9 @@ const SmallButton = styled(ButtonGray)`
`
const FocusedOutlineCard = styled(OutlineCard)<{ active?: boolean; pulsing?: boolean }>`
border-color: ${({ active, theme }) => active && theme.blue1};
border-color: ${({ active, theme }) => active && theme.deprecated_blue1};
padding: 12px;
animation: ${({ pulsing, theme }) => pulsing && pulse(theme.blue1)} 0.8s linear;
animation: ${({ pulsing, theme }) => pulsing && pulse(theme.deprecated_blue1)} 0.8s linear;
`
const StyledInput = styled(NumericalInput)<{ usePercent?: boolean }>`
@ -58,13 +58,13 @@ const StyledInput = styled(NumericalInput)<{ usePercent?: boolean }>`
`
const InputTitle = styled(ThemedText.Small)`
color: ${({ theme }) => theme.text2};
color: ${({ theme }) => theme.deprecated_text2};
font-size: 12px;
font-weight: 500;
`
const ButtonLabel = styled(ThemedText.White)<{ disabled: boolean }>`
color: ${({ theme, disabled }) => (disabled ? theme.text2 : theme.text1)} !important;
color: ${({ theme, disabled }) => (disabled ? theme.deprecated_text2 : theme.deprecated_text1)} !important;
`
interface StepCounterProps {

4
src/components/LiquidityChartRangeInput/Area.tsx
View File

@ -6,8 +6,8 @@ import { ChartEntry } from './types'
const Path = styled.path<{ fill: string | undefined }>`
opacity: 0.5;
stroke: ${({ fill, theme }) => fill ?? theme.blue2};
fill: ${({ fill, theme }) => fill ?? theme.blue2};
stroke: ${({ fill, theme }) => fill ?? theme.deprecated_blue2};
fill: ${({ fill, theme }) => fill ?? theme.deprecated_blue2};
`
export const Area = ({

2
src/components/LiquidityChartRangeInput/AxisBottom.tsx
View File

@ -8,7 +8,7 @@ const StyledGroup = styled.g`
}
text {
color: ${({ theme }) => theme.text2};
color: ${({ theme }) => theme.deprecated_text2};
transform: translateY(5px);
}
`

6
src/components/LiquidityChartRangeInput/Brush.tsx
View File

@ -18,7 +18,7 @@ const HandleAccent = styled.path`
pointer-events: none;
stroke-width: 1.5;
stroke: ${({ theme }) => theme.white};
stroke: ${({ theme }) => theme.deprecated_white};
opacity: 0.6;
`
@ -28,13 +28,13 @@ const LabelGroup = styled.g<{ visible: boolean }>`
`
const TooltipBackground = styled.rect`
fill: ${({ theme }) => theme.bg2};
fill: ${({ theme }) => theme.deprecated_bg2};
`
const Tooltip = styled.text`
text-anchor: middle;
font-size: 13px;
fill: ${({ theme }) => theme.text1};
fill: ${({ theme }) => theme.deprecated_text1};
`
// flips the handles draggers when close to the container edges

2
src/components/LiquidityChartRangeInput/Line.tsx
View File

@ -5,7 +5,7 @@ import styled from 'styled-components/macro'
const StyledLine = styled.line`
opacity: 0.5;
stroke-width: 2;
stroke: ${({ theme }) => theme.text1};
stroke: ${({ theme }) => theme.deprecated_text1};
fill: none;
`

4
src/components/LiquidityChartRangeInput/Zoom.tsx
View File

@ -18,8 +18,8 @@ const Wrapper = styled.div<{ count: number }>`
const Button = styled(ButtonGray)`
&:hover {
background-color: ${({ theme }) => theme.bg2};
color: ${({ theme }) => theme.text1};
background-color: ${({ theme }) => theme.deprecated_bg2};
color: ${({ theme }) => theme.deprecated_text1};
}
width: 32px;

14
src/components/LiquidityChartRangeInput/index.tsx
View File

@ -166,19 +166,19 @@ export default function LiquidityChartRangeInput({
{isUninitialized ? (
<InfoBox
message={<Trans>Your position will appear here.</Trans>}
icon={<Inbox size={56} stroke={theme.text1} />}
icon={<Inbox size={56} stroke={theme.deprecated_text1} />}
/>
) : isLoading ? (
<InfoBox icon={<Loader size="40px" stroke={theme.text4} />} />
<InfoBox icon={<Loader size="40px" stroke={theme.deprecated_text4} />} />
) : isError ? (
<InfoBox
message={<Trans>Liquidity data not available.</Trans>}
icon={<CloudOff size={56} stroke={theme.text4} />}
icon={<CloudOff size={56} stroke={theme.deprecated_text4} />}
/>
) : !formattedData || formattedData === [] || !price ? (
<InfoBox
message={<Trans>There is no liquidity data.</Trans>}
icon={<BarChart2 size={56} stroke={theme.text4} />}
icon={<BarChart2 size={56} stroke={theme.deprecated_text4} />}
/>
) : (
<ChartWrapper>
@ -188,12 +188,12 @@ export default function LiquidityChartRangeInput({
margins={{ top: 10, right: 2, bottom: 20, left: 0 }}
styles={{
area: {
selection: theme.blue1,
selection: theme.deprecated_blue1,
},
brush: {
handle: {
west: saturate(0.1, tokenAColor) ?? theme.red1,
east: saturate(0.1, tokenBColor) ?? theme.blue1,
west: saturate(0.1, tokenAColor) ?? theme.deprecated_red1,
east: saturate(0.1, tokenBColor) ?? theme.deprecated_blue1,
},
},
}}

2
src/components/Loader/index.tsx
View File

@ -14,7 +14,7 @@ const StyledSVG = styled.svg<{ size: string; stroke?: string }>`
height: ${({ size }) => size};
width: ${({ size }) => size};
path {
stroke: ${({ stroke, theme }) => stroke ?? theme.primary1};
stroke: ${({ stroke, theme }) => stroke ?? theme.deprecated_primary1};
}
`

6
src/components/Loader/styled.tsx
View File

@ -17,9 +17,9 @@ export const LoadingRows = styled.div`
animation-fill-mode: both;
background: linear-gradient(
to left,
${({ theme }) => theme.bg1} 25%,
${({ theme }) => theme.bg2} 50%,
${({ theme }) => theme.bg1} 75%
${({ theme }) => theme.deprecated_bg1} 25%,
${({ theme }) => theme.deprecated_bg2} 50%,
${({ theme }) => theme.deprecated_bg1} 75%
);
background-size: 400%;
border-radius: 12px;

2
src/components/Logo/index.tsx
View File

@ -35,5 +35,5 @@ export default function Logo({ srcs, alt, style, ...rest }: LogoProps) {
)
}
return <Slash {...rest} style={{ ...style, color: theme.bg4 }} />
return <Slash {...rest} style={{ ...style, color: theme.deprecated_bg4 }} />
}

28
src/components/Menu/index.tsx
View File

@ -38,7 +38,7 @@ export enum FlyoutAlignment {
const StyledMenuIcon = styled(MenuIcon)`
path {
stroke: ${({ theme }) => theme.text1};
stroke: ${({ theme }) => theme.deprecated_text1};
}
`
@ -50,8 +50,8 @@ const StyledMenuButton = styled.button`
margin: 0;
padding: 0;
height: 40px;
background-color: ${({ theme }) => theme.bg0};
border: 1px solid ${({ theme }) => theme.bg0};
background-color: ${({ theme }) => theme.deprecated_bg0};
border: 1px solid ${({ theme }) => theme.deprecated_bg0};
padding: 0.15rem 0.5rem;
border-radius: 16px;
@ -59,7 +59,7 @@ const StyledMenuButton = styled.button`
:focus {
cursor: pointer;
outline: none;
border: 1px solid ${({ theme }) => theme.bg3};
border: 1px solid ${({ theme }) => theme.deprecated_bg3};
}
svg {
@ -68,7 +68,7 @@ const StyledMenuButton = styled.button`
`
const UNIbutton = styled(ButtonPrimary)`
background-color: ${({ theme }) => theme.bg3};
background-color: ${({ theme }) => theme.deprecated_bg3};
background: radial-gradient(174.47% 188.91% at 1.84% 0%, #ff007a 0%, #2172e5 100%), #edeef2;
border: none;
`
@ -86,10 +86,10 @@ const MenuFlyout = styled.span<{ flyoutAlignment?: FlyoutAlignment }>`
min-width: 196px;
max-height: 350px;
overflow: auto;
background-color: ${({ theme }) => theme.bg1};
background-color: ${({ theme }) => theme.deprecated_bg1};
box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.01), 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 16px 24px rgba(0, 0, 0, 0.04),
0px 24px 32px rgba(0, 0, 0, 0.01);
border: 1px solid ${({ theme }) => theme.bg0};
border: 1px solid ${({ theme }) => theme.deprecated_bg0};
border-radius: 12px;
padding: 0.5rem;
display: flex;
@ -121,9 +121,9 @@ const MenuItem = styled(ExternalLink)`
align-items: center;
padding: 0.5rem 0.5rem;
justify-content: space-between;
color: ${({ theme }) => theme.text2};
color: ${({ theme }) => theme.deprecated_text2};
:hover {
color: ${({ theme }) => theme.text1};
color: ${({ theme }) => theme.deprecated_text1};
cursor: pointer;
text-decoration: none;
}
@ -132,9 +132,9 @@ const MenuItem = styled(ExternalLink)`
const InternalMenuItem = styled(Link)`
flex: 1;
padding: 0.5rem 0.5rem;
color: ${({ theme }) => theme.text2};
color: ${({ theme }) => theme.deprecated_text2};
:hover {
color: ${({ theme }) => theme.text1};
color: ${({ theme }) => theme.deprecated_text1};
cursor: pointer;
text-decoration: none;
}
@ -151,7 +151,7 @@ const InternalLinkMenuItem = styled(InternalMenuItem)`
justify-content: space-between;
text-decoration: none;
:hover {
color: ${({ theme }) => theme.text1};
color: ${({ theme }) => theme.deprecated_text1};
cursor: pointer;
text-decoration: none;
}
@ -170,9 +170,9 @@ const ToggleMenuItem = styled.button`
justify-content: space-between;
font-size: 1rem;
font-weight: 500;
color: ${({ theme }) => theme.text2};
color: ${({ theme }) => theme.deprecated_text2};
:hover {
color: ${({ theme }) => theme.text1};
color: ${({ theme }) => theme.deprecated_text1};
cursor: pointer;
text-decoration: none;
}

6
src/components/Modal/index.tsx
View File

@ -19,7 +19,7 @@ const StyledDialogOverlay = styled(AnimatedDialogOverlay)`
align-items: center;
justify-content: center;
background-color: ${({ theme }) => theme.modalBG};
background-color: ${({ theme }) => theme.deprecated_modalBG};
}
`
@ -35,8 +35,8 @@ const StyledDialogContent = styled(({ minHeight, maxHeight, mobile, isOpen, ...r
&[data-reach-dialog-content] {
margin: 0 0 2rem 0;
background-color: ${({ theme }) => theme.bg0};
border: 1px solid ${({ theme }) => theme.bg1};
background-color: ${({ theme }) => theme.deprecated_bg0};
border: 1px solid ${({ theme }) => theme.deprecated_bg1};
box-shadow: 0 4px 8px 0 ${({ theme }) => transparentize(0.95, theme.shadow1)};
padding: 0px;
width: 50vw;

2
src/components/ModalViews/index.tsx
View File

@ -59,7 +59,7 @@ export function SubmittedView({
<CloseIcon onClick={onDismiss} />
</RowBetween>
<ConfirmedIcon>
<ArrowUpCircle strokeWidth={0.5} size={90} color={theme.primary1} />
<ArrowUpCircle strokeWidth={0.5} size={90} color={theme.deprecated_primary1} />
</ConfirmedIcon>
<AutoColumn gap="100px" justify={'center'}>
{children}

10
src/components/NavigationTabs/index.tsx
View File

@ -35,18 +35,18 @@ const StyledNavLink = styled(NavLink).attrs({
outline: none;
cursor: pointer;
text-decoration: none;
color: ${({ theme }) => theme.text3};
color: ${({ theme }) => theme.deprecated_text3};
font-size: 20px;
&.${activeClassName} {
border-radius: 12px;
font-weight: 500;
color: ${({ theme }) => theme.text1};
color: ${({ theme }) => theme.deprecated_text1};
}
:hover,
:focus {
color: ${({ theme }) => darken(0.1, theme.text1)};
color: ${({ theme }) => darken(0.1, theme.deprecated_text1)};
}
`
@ -65,7 +65,7 @@ const ActiveText = styled.div`
`
const StyledArrowLeft = styled(ArrowLeft)`
color: ${({ theme }) => theme.text1};
color: ${({ theme }) => theme.deprecated_text1};
`
export function SwapPoolTabs({ active }: { active: 'swap' | 'pool' }) {
@ -134,7 +134,7 @@ export function AddRemoveTabs({
}}
flex={children ? '1' : undefined}
>
<StyledArrowLeft stroke={theme.text2} />
<StyledArrowLeft stroke={theme.deprecated_text2} />
</StyledHistoryLink>
<ThemedText.MediumHeader
fontWeight={500}

6
src/components/NumericalInput/index.tsx
View File

@ -4,14 +4,14 @@ import styled from 'styled-components/macro'
import { escapeRegExp } from '../../utils'
const StyledInput = styled.input<{ error?: boolean; fontSize?: string; align?: string }>`
color: ${({ error, theme }) => (error ? theme.red1 : theme.text1)};
color: ${({ error, theme }) => (error ? theme.deprecated_red1 : theme.deprecated_text1)};
width: 0;
position: relative;
font-weight: 500;
outline: none;
border: none;
flex: 1 1 auto;
background-color: ${({ theme }) => theme.bg1};
background-color: ${({ theme }) => theme.deprecated_bg1};
font-size: ${({ fontSize }) => fontSize ?? '28px'};
text-align: ${({ align }) => align && align};
white-space: nowrap;
@ -35,7 +35,7 @@ const StyledInput = styled.input<{ error?: boolean; fontSize?: string; align?: s
}
::placeholder {
color: ${({ theme }) => theme.text4};
color: ${({ theme }) => theme.deprecated_text4};
}
`

6
src/components/Popover/index.tsx
View File

@ -10,7 +10,7 @@ const PopoverContainer = styled.div<{ show: boolean }>`
visibility: ${(props) => (props.show ? 'visible' : 'hidden')};
opacity: ${(props) => (props.show ? 1 : 0)};
transition: visibility 150ms linear, opacity 150ms linear;
color: ${({ theme }) => theme.text2};
color: ${({ theme }) => theme.deprecated_text2};
`
const ReferenceElement = styled.div`
@ -30,9 +30,9 @@ const Arrow = styled.div`
z-index: 9998;
content: '';
border: 1px solid ${({ theme }) => theme.bg2};
border: 1px solid ${({ theme }) => theme.deprecated_bg2};
transform: rotate(45deg);
background: ${({ theme }) => theme.bg0};
background: ${({ theme }) => theme.deprecated_bg0};
}
&.arrow-top {

2
src/components/Popups/FailedNetworkSwitchPopup.tsx
View File

@ -20,7 +20,7 @@ export default function FailedNetworkSwitchPopup({ chainId }: { chainId: Support
return (
<RowNoFlex>
<div style={{ paddingRight: 16 }}>
<AlertCircle color={theme.red1} size={24} />
<AlertCircle color={theme.deprecated_red1} size={24} />
</div>
<AutoColumn gap="8px">
<ThemedText.Body fontWeight={500}>

6
src/components/Popups/PopupItem.tsx
View File

@ -22,7 +22,7 @@ const Popup = styled.div`
display: inline-block;
width: 100%;
padding: 1em;
background-color: ${({ theme }) => theme.bg0};
background-color: ${({ theme }) => theme.deprecated_bg0};
position: relative;
border-radius: 10px;
padding: 20px;
@ -42,7 +42,7 @@ const Fader = styled.div`
left: 0px;
width: 100%;
height: 2px;
background-color: ${({ theme }) => theme.bg3};
background-color: ${({ theme }) => theme.deprecated_bg3};
`
const AnimatedFader = animated(Fader)
@ -90,7 +90,7 @@ export default function PopupItem({
return (
<Popup>
<StyledClose color={theme.text2} onClick={removeThisPopup} />
<StyledClose color={theme.deprecated_text2} onClick={removeThisPopup} />
{popupContent}
{removeAfterMs !== null ? <AnimatedFader style={faderStyle} /> : null}
</Popup>

13
src/components/Popups/SurveyPopup.tsx
View File

@ -19,7 +19,7 @@ const Wrapper = styled(AutoColumn)`
padding: 18px;
max-width: 360px;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
color: ${({ theme }) => theme.text1};
color: ${({ theme }) => theme.deprecated_text1};
overflow: hidden;
${({ theme }) => theme.mediaWidth.upToSmall`
@ -90,13 +90,18 @@ export default function SurveyPopup() {
<BGOrb src={BGImage} />
<ExternalLink href="https://www.surveymonkey.com/r/YGWV9VD">
<RowFixed>
<MessageCircle stroke={theme.black} size="20px" strokeWidth="1px" />
<ThemedText.White fontWeight={600} color={theme.black} ml="6px">
<MessageCircle stroke={theme.deprecated_black} size="20px" strokeWidth="1px" />
<ThemedText.White fontWeight={600} color={theme.deprecated_black} ml="6px">
<Trans>Tell us what you think ↗</Trans>
</ThemedText.White>
</RowFixed>
</ExternalLink>
<ThemedText.Black style={{ zIndex: Z_INDEX.fixed }} fontWeight={400} fontSize="12px" color={theme.black}>
<ThemedText.Black
style={{ zIndex: Z_INDEX.fixed }}
fontWeight={400}
fontSize="12px"
color={theme.deprecated_black}
>
<Trans>Take a 10 minute survey to help us improve your experience in the Uniswap app.</Trans>
</ThemedText.Black>
</Wrapper>

6
src/components/Popups/TransactionPopup.tsx
View File

@ -27,7 +27,11 @@ export default function TransactionPopup({ hash }: { hash: string }) {
return (
<RowNoFlex>
<div style={{ paddingRight: 16 }}>
{success ? <CheckCircle color={theme.green1} size={24} /> : <AlertCircle color={theme.red1} size={24} />}
{success ? (
<CheckCircle color={theme.deprecated_green1} size={24} />
) : (
<AlertCircle color={theme.deprecated_red1} size={24} />
)}
</div>
<AutoColumn gap="8px">
<ThemedText.Body fontWeight={500}>

2
src/components/PositionCard/Sushi.tsx
View File

@ -20,7 +20,7 @@ import { FixedHeightRow } from '.'
const StyledPositionCard = styled(LightCard)<{ bgColor: any }>`
border: none;
background: ${({ theme, bgColor }) =>
`radial-gradient(91.85% 100% at 1.84% 0%, ${transparentize(0.8, bgColor)} 0%, ${theme.bg3} 100%) `};
`radial-gradient(91.85% 100% at 1.84% 0%, ${transparentize(0.8, bgColor)} 0%, ${theme.deprecated_bg3} 100%) `};
position: relative;
overflow: hidden;
`

2
src/components/PositionCard/V2.tsx
View File

@ -29,7 +29,7 @@ import { FixedHeightRow } from '.'
const StyledPositionCard = styled(LightCard)<{ bgColor: any }>`
border: none;
background: ${({ theme, bgColor }) =>
`radial-gradient(91.85% 100% at 1.84% 0%, ${transparentize(0.8, bgColor)} 0%, ${theme.bg3} 100%) `};
`radial-gradient(91.85% 100% at 1.84% 0%, ${transparentize(0.8, bgColor)} 0%, ${theme.deprecated_bg3} 100%) `};
position: relative;
overflow: hidden;
`

2
src/components/PositionCard/index.tsx
View File

@ -33,7 +33,7 @@ export const FixedHeightRow = styled(RowBetween)`
const StyledPositionCard = styled(LightCard)<{ bgColor: any }>`
border: none;
background: ${({ theme, bgColor }) =>
`radial-gradient(91.85% 100% at 1.84% 0%, ${transparentize(0.8, bgColor)} 0%, ${theme.bg3} 100%) `};
`radial-gradient(91.85% 100% at 1.84% 0%, ${transparentize(0.8, bgColor)} 0%, ${theme.deprecated_bg3} 100%) `};
position: relative;
overflow: hidden;
`

14
src/components/PositionListItem/index.tsx
View File

@ -31,12 +31,12 @@ const LinkRow = styled(Link)`
flex-direction: column;
justify-content: space-between;
color: ${({ theme }) => theme.text1};
color: ${({ theme }) => theme.deprecated_text1};
margin: 8px 0;
padding: 16px;
text-decoration: none;
font-weight: 500;
background-color: ${({ theme }) => theme.bg1};
background-color: ${({ theme }) => theme.deprecated_bg1};
&:last-of-type {
margin: 8px 0 0 0;
@ -45,7 +45,7 @@ const LinkRow = styled(Link)`
text-align: center;
}
:hover {
background-color: ${({ theme }) => theme.bg2};
background-color: ${({ theme }) => theme.deprecated_bg2};
}
@media screen and (min-width: ${MEDIA_WIDTHS.upToSmall}px) {
@ -79,7 +79,7 @@ const RangeLineItem = styled(DataLineItem)`
width: 100%;
${({ theme }) => theme.mediaWidth.upToSmall`
background-color: ${({ theme }) => theme.bg2};
background-color: ${({ theme }) => theme.deprecated_bg2};
border-radius: 12px;
padding: 8px 0;
`};
@ -87,7 +87,7 @@ const RangeLineItem = styled(DataLineItem)`
const DoubleArrow = styled.span`
margin: 0 2px;
color: ${({ theme }) => theme.text3};
color: ${({ theme }) => theme.deprecated_text3};
${({ theme }) => theme.mediaWidth.upToSmall`
margin: 4px;
padding: 20px;
@ -95,13 +95,13 @@ const DoubleArrow = styled.span`
`
const RangeText = styled.span`
/* background-color: ${({ theme }) => theme.bg2}; */
/* background-color: ${({ theme }) => theme.deprecated_bg2}; */
padding: 0.25rem 0.5rem;
border-radius: 8px;
`
const ExtentsText = styled.span`
color: ${({ theme }) => theme.text3};
color: ${({ theme }) => theme.deprecated_text3};
font-size: 14px;
margin-right: 4px;
${({ theme }) => theme.mediaWidth.upToSmall`

4
src/components/PositionPreview/index.tsx
View File

@ -135,7 +135,7 @@ export const PositionPreview = ({
{quoteCurrency.symbol} per {baseCurrency.symbol}
</Trans>
</ThemedText.Main>
<ThemedText.Small textAlign="center" color={theme.text3} style={{ marginTop: '4px' }}>
<ThemedText.Small textAlign="center" color={theme.deprecated_text3} style={{ marginTop: '4px' }}>
<Trans>Your position will be 100% composed of {baseCurrency?.symbol} at this price</Trans>
</ThemedText.Small>
</AutoColumn>
@ -156,7 +156,7 @@ export const PositionPreview = ({
{quoteCurrency.symbol} per {baseCurrency.symbol}
</Trans>
</ThemedText.Main>
<ThemedText.Small textAlign="center" color={theme.text3} style={{ marginTop: '4px' }}>
<ThemedText.Small textAlign="center" color={theme.deprecated_text3} style={{ marginTop: '4px' }}>
<Trans>Your position will be 100% composed of {quoteCurrency?.symbol} at this price</Trans>
</ThemedText.Small>
</AutoColumn>

12
src/components/PrivacyPolicy/index.tsx
View File

@ -20,20 +20,20 @@ const Wrapper = styled.div`
`
const StyledExternalCard = styled(Card)`
background-color: ${({ theme }) => theme.primary5};
background-color: ${({ theme }) => theme.deprecated_primary5};
padding: 0.5rem;
width: 100%;
:hover,
:focus,
:active {
background-color: ${({ theme }) => theme.primary4};
background-color: ${({ theme }) => theme.deprecated_primary4};
}
`
const HoverText = styled.div`
text-decoration: none;
color: ${({ theme }) => theme.text1};
color: ${({ theme }) => theme.deprecated_text1};
display: flex;
align-items: center;
@ -128,7 +128,7 @@ export function PrivacyPolicy() {
<RowBetween>
<AutoRow gap="4px">
<Info size={20} />
<ThemedText.Main fontSize={14} color={'primaryText1'}>
<ThemedText.Main fontSize={14} color={'deprecated_primaryText1'}>
<Trans>Uniswap Labs&apos; Terms of Service</Trans>
</ThemedText.Main>
</AutoRow>
@ -141,7 +141,7 @@ export function PrivacyPolicy() {
<RowBetween>
<AutoRow gap="4px">
<Info size={20} />
<ThemedText.Main fontSize={14} color={'primaryText1'}>
<ThemedText.Main fontSize={14} color={'deprecated_primaryText1'}>
<Trans>Protocol Disclaimer</Trans>
</ThemedText.Main>
</AutoRow>
@ -159,7 +159,7 @@ export function PrivacyPolicy() {
<AutoColumn gap="8px">
<AutoRow gap="4px">
<Info size={18} />
<ThemedText.Main fontSize={14} color={'text1'}>
<ThemedText.Main fontSize={14} color={'deprecated_text1'}>
{name}
</ThemedText.Main>
</AutoRow>

8
src/components/ProgressSteps/index.tsx
View File

@ -13,7 +13,7 @@ const Wrapper = styled(AutoColumn)`
const Grouping = styled(AutoColumn)`
width: fit-content;
padding: 4px;
/* background-color: ${({ theme }) => theme.bg2}; */
/* background-color: ${({ theme }) => theme.deprecated_bg2}; */
border-radius: 16px;
`
@ -21,9 +21,9 @@ const Circle = styled.div<{ confirmed?: boolean; disabled?: boolean }>`
width: 48px;
height: 48px;
background-color: ${({ theme, confirmed, disabled }) =>
disabled ? theme.bg3 : confirmed ? theme.green1 : theme.primary1};
disabled ? theme.deprecated_bg3 : confirmed ? theme.deprecated_green1 : theme.deprecated_primary1};
border-radius: 50%;
color: ${({ theme, disabled }) => (disabled ? theme.text3 : theme.text1)};
color: ${({ theme, disabled }) => (disabled ? theme.deprecated_text3 : theme.deprecated_text1)};
display: flex;
align-items: center;
justify-content: center;
@ -65,7 +65,7 @@ export default function ProgressCircles({ steps, disabled = false, ...rest }: Pr
<Circle confirmed={step} disabled={disabled || (!steps[i - 1] && i !== 0)}>
{step ? '✓' : i + 1 + '.'}
</Circle>
<ThemedText.Main color={theme.text4}>|</ThemedText.Main>
<ThemedText.Main color={theme.deprecated_text4}>|</ThemedText.Main>
</CircleRow>
)
})}

4
src/components/QuestionHelper/index.tsx
View File

@ -16,8 +16,8 @@ const QuestionWrapper = styled.div`
cursor: default;
border-radius: 36px;
font-size: 12px;
background-color: ${({ theme }) => theme.bg2};
color: ${({ theme }) => theme.text2};
background-color: ${({ theme }) => theme.deprecated_bg2};
color: ${({ theme }) => theme.deprecated_text2};
:hover,
:focus {

2
src/components/RangeSelector/PresetsButtons.tsx
View File

@ -10,7 +10,7 @@ const Button = styled(ButtonOutlined).attrs(() => ({
padding: '8px',
$borderRadius: '8px',
}))`
color: ${({ theme }) => theme.text1};
color: ${({ theme }) => theme.deprecated_text1};
flex: 1;
`

8
src/components/RoutingDiagram/RoutingDiagram.tsx
View File

@ -48,12 +48,12 @@ const DottedLine = styled.div`
const DotColor = styled(DotLine)`
path {
stroke: ${({ theme }) => theme.bg4};
stroke: ${({ theme }) => theme.deprecated_bg4};
}
`
const OpaqueBadge = styled(Badge)`
background-color: ${({ theme }) => theme.bg2};
background-color: ${({ theme }) => theme.deprecated_bg2};
border-radius: 8px;
display: grid;
font-size: 12px;
@ -65,9 +65,9 @@ const OpaqueBadge = styled(Badge)`
`
const ProtocolBadge = styled(Badge)`
background-color: ${({ theme }) => theme.bg3};
background-color: ${({ theme }) => theme.deprecated_bg3};
border-radius: 4px;
color: ${({ theme }) => theme.text2};
color: ${({ theme }) => theme.deprecated_text2};
font-size: 10px;
padding: 2px 4px;
z-index: ${Z_INDEX.sticky + 1};

2
src/components/SearchModal/BlockedToken.tsx
View File

@ -37,7 +37,7 @@ const Header = styled.div`
width: 100%;
`
const Icon = styled(AlertCircle)`
stroke: ${({ theme }) => theme.text2};
stroke: ${({ theme }) => theme.deprecated_text2};
width: 48px;
height: 48px;
`

8
src/components/SearchModal/CommonBases.tsx
View File

@ -17,7 +17,7 @@ const MobileWrapper = styled(AutoColumn)`
`
const BaseWrapper = styled.div<{ disable?: boolean }>`
border: 1px solid ${({ theme, disable }) => (disable ? 'transparent' : theme.bg3)};
border: 1px solid ${({ theme, disable }) => (disable ? 'transparent' : theme.deprecated_bg3)};
border-radius: 10px;
display: flex;
padding: 6px;
@ -25,11 +25,11 @@ const BaseWrapper = styled.div<{ disable?: boolean }>`
align-items: center;
:hover {
cursor: ${({ disable }) => !disable && 'pointer'};
background-color: ${({ theme, disable }) => !disable && theme.bg2};
background-color: ${({ theme, disable }) => !disable && theme.deprecated_bg2};
}
color: ${({ theme, disable }) => disable && theme.text3};
background-color: ${({ theme, disable }) => disable && theme.bg3};
color: ${({ theme, disable }) => disable && theme.deprecated_text3};
background-color: ${({ theme, disable }) => disable && theme.deprecated_bg3};
filter: ${({ disable }) => disable && 'grayscale(1)'};
`

6
src/components/SearchModal/CurrencyList/__snapshots__/index.test.tsx.snap
View File

@ -86,7 +86,7 @@ exports[`renders currency rows correctly when currencies list is non-empty 1`] =
DAI
</div>
<div
class="c5 css-165qfk5"
class="c5 css-1j6a53a"
>
Dai Stablecoin
</div>
@ -109,7 +109,7 @@ exports[`renders currency rows correctly when currencies list is non-empty 1`] =
USDC
</div>
<div
class="c5 css-165qfk5"
class="c5 css-1j6a53a"
>
USD//C
</div>
@ -132,7 +132,7 @@ exports[`renders currency rows correctly when currencies list is non-empty 1`] =
WBTC
</div>
<div
class="c5 css-165qfk5"
class="c5 css-1j6a53a"
>
Wrapped BTC
</div>

6
src/components/SearchModal/CurrencyList/index.tsx
View File

@ -38,8 +38,8 @@ const StyledBalanceText = styled(Text)`
`
const Tag = styled.div`
background-color: ${({ theme }) => theme.bg3};
color: ${({ theme }) => theme.text2};
background-color: ${({ theme }) => theme.deprecated_bg3};
color: ${({ theme }) => theme.deprecated_text2};
font-size: 14px;
border-radius: 4px;
padding: 0.25rem 0.3rem 0.25rem 0.3rem;
@ -180,7 +180,7 @@ function BreakLineComponent({ style }: { style: CSSProperties }) {
<RowBetween>
<RowFixed>
<TokenListLogoWrapper src={TokenListLogo} />
<ThemedText.Main ml="6px" fontSize="12px" color={theme.text1}>
<ThemedText.Main ml="6px" fontSize="12px" color={theme.deprecated_text1}>
<Trans>Expanded results from inactive Token Lists</Trans>
</ThemedText.Main>
</RowFixed>

12
src/components/SearchModal/CurrencySearch.tsx
View File

@ -42,8 +42,8 @@ const Footer = styled.div`
padding: 20px;
border-top-left-radius: 0;
border-top-right-radius: 0;
background-color: ${({ theme }) => theme.bg1};
border-top: 1px solid ${({ theme }) => theme.bg2};
background-color: ${({ theme }) => theme.deprecated_bg1};
border-top: 1px solid ${({ theme }) => theme.deprecated_bg2};
`
interface CurrencySearchProps {
@ -251,19 +251,19 @@ export function CurrencySearch({
</div>
) : (
<Column style={{ padding: '20px', height: '100%' }}>
<ThemedText.Main color={theme.text3} textAlign="center" mb="20px">
<ThemedText.Main color={theme.deprecated_text3} textAlign="center" mb="20px">
<Trans>No results found.</Trans>
</ThemedText.Main>
</Column>
)}
<Footer>
<Row justify="center">
<ButtonText onClick={showManageView} color={theme.primary1} className="list-token-manage-button">
<ButtonText onClick={showManageView} color={theme.deprecated_primary1} className="list-token-manage-button">
<RowFixed>
<IconWrapper size="16px" marginRight="6px" stroke={theme.primaryText1}>
<IconWrapper size="16px" marginRight="6px" stroke={theme.deprecated_primaryText1}>
<Edit />
</IconWrapper>
<ThemedText.Main color={theme.primaryText1}>
<ThemedText.Main color={theme.deprecated_primaryText1}>
<Trans>Manage Token Lists</Trans>
</ThemedText.Main>
</RowFixed>

16
src/components/SearchModal/ImportList.tsx
View File

@ -90,7 +90,7 @@ export function ImportList({ listURL, list, setModalView, onDismiss }: ImportPro
<SectionBreak />
<PaddedColumn gap="md">
<AutoColumn gap="md">
<Card backgroundColor={theme.bg2} padding="12px 20px">
<Card backgroundColor={theme.deprecated_bg2} padding="12px 20px">
<RowBetween>
<RowFixed>
{list.logoURI && <ListLogo logoURI={list.logoURI} size="40px" />}
@ -105,7 +105,7 @@ export function ImportList({ listURL, list, setModalView, onDismiss }: ImportPro
</ThemedText.Main>
</RowFixed>
<ExternalLink href={`https://tokenlists.org/token-list?url=${listURL}`}>
<ThemedText.Main fontSize={'12px'} color={theme.blue1}>
<ThemedText.Main fontSize={'12px'} color={theme.deprecated_blue1}>
{listURL}
</ThemedText.Main>
</ExternalLink>
@ -113,23 +113,23 @@ export function ImportList({ listURL, list, setModalView, onDismiss }: ImportPro
</RowFixed>
</RowBetween>
</Card>
<Card style={{ backgroundColor: transparentize(0.8, theme.red1) }}>
<Card style={{ backgroundColor: transparentize(0.8, theme.deprecated_red1) }}>
<AutoColumn justify="center" style={{ textAlign: 'center', gap: '16px', marginBottom: '12px' }}>
<AlertTriangle stroke={theme.red1} size={32} />
<ThemedText.Body fontWeight={500} fontSize={20} color={theme.red1}>
<AlertTriangle stroke={theme.deprecated_red1} size={32} />
<ThemedText.Body fontWeight={500} fontSize={20} color={theme.deprecated_red1}>
<Trans>Import at your own risk</Trans>
</ThemedText.Body>
</AutoColumn>
<AutoColumn style={{ textAlign: 'center', gap: '16px', marginBottom: '12px' }}>
<ThemedText.Body fontWeight={500} color={theme.red1}>
<ThemedText.Body fontWeight={500} color={theme.deprecated_red1}>
<Trans>
By adding this list you are implicitly trusting that the data is correct. Anyone can create a list,
including creating fake versions of existing lists and lists that claim to represent projects that do
not have one.
</Trans>
</ThemedText.Body>
<ThemedText.Body fontWeight={600} color={theme.red1}>
<ThemedText.Body fontWeight={600} color={theme.deprecated_red1}>
<Trans>If you purchase a token from this list, you may not be able to sell it back.</Trans>
</ThemedText.Body>
</AutoColumn>
@ -140,7 +140,7 @@ export function ImportList({ listURL, list, setModalView, onDismiss }: ImportPro
checked={confirmed}
onChange={() => setConfirmed(!confirmed)}
/>
<ThemedText.Body ml="10px" fontSize="16px" color={theme.red1} fontWeight={500}>
<ThemedText.Body ml="10px" fontSize="16px" color={theme.deprecated_red1} fontWeight={500}>
<Trans>I understand</Trans>
</ThemedText.Body>
</AutoRow>

6
src/components/SearchModal/ImportRow.tsx
View File

@ -29,7 +29,7 @@ const CheckIcon = styled(CheckCircle)`
height: 16px;
width: 16px;
margin-right: 6px;
stroke: ${({ theme }) => theme.green1};
stroke: ${({ theme }) => theme.deprecated_green1};
`
const NameOverflow = styled.div`
@ -74,7 +74,7 @@ export default function ImportRow({
</AutoRow>
{list && list.logoURI && (
<RowFixed>
<ThemedText.Small mr="4px" color={theme.text3}>
<ThemedText.Small mr="4px" color={theme.deprecated_text3}>
<Trans>via {list.name} </Trans>
</ThemedText.Small>
<ListLogo logoURI={list.logoURI} size="12px" />
@ -97,7 +97,7 @@ export default function ImportRow({
) : (
<RowFixed style={{ minWidth: 'fit-content' }}>
<CheckIcon />
<ThemedText.Main color={theme.green1}>
<ThemedText.Main color={theme.deprecated_green1}>
<Trans>Active</Trans>
</ThemedText.Main>
</RowFixed>

2
src/components/SearchModal/ImportToken.tsx
View File

@ -65,7 +65,7 @@ export function ImportToken(props: ImportProps) {
<SectionBreak />
<AutoColumn gap="md" style={{ marginBottom: '32px', padding: '1rem' }}>
<AutoColumn justify="center" style={{ textAlign: 'center', gap: '16px', padding: '1rem' }}>
<AlertCircle size={48} stroke={theme.text2} strokeWidth={1} />
<AlertCircle size={48} stroke={theme.deprecated_text2} strokeWidth={1} />
<ThemedText.Body fontWeight={400} fontSize={16}>
<Trans>
This token doesn&apos;t appear on the active token list(s). Make sure this is the token that you want to

6
src/components/SearchModal/Manage.tsx
View File

@ -21,7 +21,7 @@ const Wrapper = styled.div`
`
const ToggleWrapper = styled(RowBetween)`
background-color: ${({ theme }) => theme.bg3};
background-color: ${({ theme }) => theme.deprecated_bg3};
border-radius: 12px;
padding: 6px;
`
@ -34,8 +34,8 @@ const ToggleOption = styled.div<{ active?: boolean }>`
justify-content: center;
border-radius: 12px;
font-weight: 600;
background-color: ${({ theme, active }) => (active ? theme.bg1 : theme.bg3)};
color: ${({ theme, active }) => (active ? theme.text1 : theme.text2)};
background-color: ${({ theme, active }) => (active ? theme.deprecated_bg1 : theme.deprecated_bg3)};
color: ${({ theme, active }) => (active ? theme.deprecated_text1 : theme.deprecated_text2)};
user-select: none;
:hover {

20
src/components/SearchModal/ManageLists.tsx
View File

@ -46,11 +46,11 @@ const PopoverContainer = styled.div<{ show: boolean }>`
visibility: ${(props) => (props.show ? 'visible' : 'hidden')};
opacity: ${(props) => (props.show ? 1 : 0)};
transition: visibility 150ms linear, opacity 150ms linear;
background: ${({ theme }) => theme.bg2};
border: 1px solid ${({ theme }) => theme.bg3};
background: ${({ theme }) => theme.deprecated_bg2};
border: 1px solid ${({ theme }) => theme.deprecated_bg3};
box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.01), 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 16px 24px rgba(0, 0, 0, 0.04),
0px 24px 32px rgba(0, 0, 0, 0.01);
color: ${({ theme }) => theme.text2};
color: ${({ theme }) => theme.deprecated_text2};
border-radius: 0.5rem;
padding: 1rem;
display: grid;
@ -73,16 +73,16 @@ const StyledTitleText = styled.div<{ active: boolean }>`
overflow: hidden;
text-overflow: ellipsis;
font-weight: 600;
color: ${({ theme, active }) => (active ? theme.white : theme.text2)};
color: ${({ theme, active }) => (active ? theme.deprecated_white : theme.deprecated_text2)};
`
const StyledListUrlText = styled(ThemedText.Main)<{ active: boolean }>`
font-size: 12px;
color: ${({ theme, active }) => (active ? theme.white : theme.text2)};
color: ${({ theme, active }) => (active ? theme.deprecated_white : theme.deprecated_text2)};
`
const RowWrapper = styled(Row)<{ bgColor: string; active: boolean; hasActiveTokens: boolean }>`
background-color: ${({ bgColor, active, theme }) => (active ? bgColor ?? 'transparent' : theme.bg2)};
background-color: ${({ bgColor, active, theme }) => (active ? bgColor ?? 'transparent' : theme.deprecated_bg2)};
opacity: ${({ hasActiveTokens }) => (hasActiveTokens ? 1 : 0.4)};
transition: 200ms;
align-items: center;
@ -193,7 +193,7 @@ const ListRow = memo(function ListRow({ listUrl }: { listUrl: string }) {
</StyledListUrlText>
<StyledMenu ref={node as any}>
<ButtonEmpty onClick={toggle} ref={setReferenceElement} padding="0">
<Settings stroke={isActive ? theme.bg1 : theme.text1} size={12} />
<Settings stroke={isActive ? theme.deprecated_bg1 : theme.deprecated_text1} size={12} />
</ButtonEmpty>
{open && (
<PopoverContainer show={true} ref={setPopperElement as any} style={styles.popper} {...attributes.popper}>
@ -369,7 +369,7 @@ export function ManageLists({
</PaddedColumn>
{tempList && (
<PaddedColumn style={{ paddingTop: 0 }}>
<Card backgroundColor={theme.bg2} padding="12px 20px">
<Card backgroundColor={theme.deprecated_bg2} padding="12px 20px">
<RowBetween>
<RowFixed>
{tempList.logoURI && <ListLogo logoURI={tempList.logoURI} size="40px" />}
@ -382,10 +382,10 @@ export function ManageLists({
</RowFixed>
{isImported ? (
<RowFixed>
<IconWrapper stroke={theme.text2} size="16px" marginRight={'10px'}>
<IconWrapper stroke={theme.deprecated_text2} size="16px" marginRight={'10px'}>
<CheckCircle />
</IconWrapper>
<ThemedText.Body color={theme.text2}>
<ThemedText.Body color={theme.deprecated_text2}>
<Trans>Loaded</Trans>
</ThemedText.Body>
</RowFixed>

4
src/components/SearchModal/ManageTokens.tsx
View File

@ -32,7 +32,7 @@ const Footer = styled.div`
border-radius: 20px;
border-top-right-radius: 0;
border-top-left-radius: 0;
border-top: 1px solid ${({ theme }) => theme.bg3};
border-top: 1px solid ${({ theme }) => theme.deprecated_bg3};
padding: 20px;
text-align: center;
`
@ -116,7 +116,7 @@ export default function ManageTokens({
</ThemedText.Error>
)}
{searchToken && (
<Card backgroundColor={theme.bg2} padding="10px 0">
<Card backgroundColor={theme.deprecated_bg2} padding="10px 0">
<ImportRow
token={searchToken}
showImportView={() => setModalView(CurrencyModalView.importToken)}

10
src/components/SearchModal/TokenImportCard.tsx
View File

@ -15,7 +15,7 @@ import { ExplorerDataType, getExplorerLink } from 'utils/getExplorerLink'
const WarningWrapper = styled(Card)<{ highWarning: boolean }>`
background-color: ${({ theme, highWarning }) =>
highWarning ? transparentize(0.8, theme.red1) : transparentize(0.8, theme.yellow2)};
highWarning ? transparentize(0.8, theme.deprecated_red1) : transparentize(0.8, theme.deprecated_yellow2)};
width: fit-content;
`
@ -35,7 +35,7 @@ const TokenImportCard = ({ list, token }: TokenImportCardProps) => {
const theme = useTheme()
const { chainId } = useWeb3React()
return (
<Card backgroundColor={theme.bg2} padding="2rem">
<Card backgroundColor={theme.deprecated_bg2} padding="2rem">
<AutoColumn gap="10px" justify="center">
<CurrencyLogo currency={token} size={'32px'} />
<AutoColumn gap="4px" justify="center">
@ -54,15 +54,15 @@ const TokenImportCard = ({ list, token }: TokenImportCardProps) => {
{list !== undefined ? (
<RowFixed>
{list.logoURI && <ListLogo logoURI={list.logoURI} size="16px" />}
<ThemedText.Small ml="6px" fontSize={14} color={theme.text3}>
<ThemedText.Small ml="6px" fontSize={14} color={theme.deprecated_text3}>
<Trans>via {list.name} token list</Trans>
</ThemedText.Small>
</RowFixed>
) : (
<WarningWrapper $borderRadius="4px" padding="4px" highWarning={true}>
<RowFixed>
<AlertCircle stroke={theme.red1} size="10px" />
<ThemedText.Body color={theme.red1} ml="4px" fontSize="10px" fontWeight={500}>
<AlertCircle stroke={theme.deprecated_red1} size="10px" />
<ThemedText.Body color={theme.deprecated_red1} ml="4px" fontSize="10px" fontWeight={500}>
<Trans>Unknown Source</Trans>
</ThemedText.Body>
</RowFixed>

18
src/components/SearchModal/styleds.tsx
View File

@ -7,12 +7,12 @@ import { RowBetween } from '../Row'
export const TextDot = styled.div`
height: 3px;
width: 3px;
background-color: ${({ theme }) => theme.text2};
background-color: ${({ theme }) => theme.deprecated_text2};
border-radius: 50%;
`
export const Checkbox = styled.input`
border: 1px solid ${({ theme }) => theme.red3};
border: 1px solid ${({ theme }) => theme.deprecated_red3};
height: 20px;
margin: 0;
`
@ -30,7 +30,7 @@ export const MenuItem = styled(RowBetween)`
cursor: ${({ disabled }) => !disabled && 'pointer'};
pointer-events: ${({ disabled }) => disabled && 'none'};
:hover {
background-color: ${({ theme, disabled }) => !disabled && theme.bg2};
background-color: ${({ theme, disabled }) => !disabled && theme.deprecated_bg2};
}
opacity: ${({ disabled, selected }) => (disabled || selected ? 0.5 : 1)};
`
@ -46,32 +46,32 @@ export const SearchInput = styled.input`
border: none;
outline: none;
border-radius: 20px;
color: ${({ theme }) => theme.text1};
color: ${({ theme }) => theme.deprecated_text1};
border-style: solid;
border: 1px solid ${({ theme }) => theme.bg3};
border: 1px solid ${({ theme }) => theme.deprecated_bg3};
-webkit-appearance: none;
font-size: 18px;
::placeholder {
color: ${({ theme }) => theme.text3};
color: ${({ theme }) => theme.deprecated_text3};
}
transition: border 100ms;
:focus {
border: 1px solid ${({ theme }) => theme.primary1};
border: 1px solid ${({ theme }) => theme.deprecated_primary1};
outline: none;
}
`
export const Separator = styled.div`
width: 100%;
height: 1px;
background-color: ${({ theme }) => theme.bg2};
background-color: ${({ theme }) => theme.deprecated_bg2};
`
export const SeparatorDark = styled.div`
width: 100%;
height: 1px;
background-color: ${({ theme }) => theme.bg3};
background-color: ${({ theme }) => theme.deprecated_bg3};
`
export const LoadingRows = styled(BaseLoadingRows)`

16
src/components/Settings/index.tsx
View File

@ -27,7 +27,7 @@ const StyledMenuIcon = styled(Settings)`
width: 20px;
> * {
stroke: ${({ theme }) => theme.text1};
stroke: ${({ theme }) => theme.deprecated_text1};
}
:hover {
@ -43,7 +43,7 @@ const StyledCloseIcon = styled(X)`
}
> * {
stroke: ${({ theme }) => theme.text1};
stroke: ${({ theme }) => theme.deprecated_text1};
}
`
@ -83,8 +83,8 @@ const StyledMenu = styled.div`
const MenuFlyout = styled.span`
min-width: 20.125rem;
background-color: ${({ theme }) => theme.bg2};
border: 1px solid ${({ theme }) => theme.bg3};
background-color: ${({ theme }) => theme.deprecated_bg2};
border: 1px solid ${({ theme }) => theme.deprecated_bg3};
box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.01), 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 16px 24px rgba(0, 0, 0, 0.04),
0px 24px 32px rgba(0, 0, 0, 0.01);
border-radius: 12px;
@ -106,7 +106,7 @@ const MenuFlyout = styled.span`
const Break = styled.div`
width: 100%;
height: 1px;
background-color: ${({ theme }) => theme.bg3};
background-color: ${({ theme }) => theme.deprecated_bg3};
`
const ModalContentWrapper = styled.div`
@ -114,7 +114,7 @@ const ModalContentWrapper = styled.div`
align-items: center;
justify-content: center;
padding: 2rem 0;
background-color: ${({ theme }) => theme.bg2};
background-color: ${({ theme }) => theme.deprecated_bg2};
border-radius: 20px;
`
@ -202,7 +202,7 @@ export default function SettingsTab({ placeholderSlippage }: { placeholderSlippa
{isSupportedChainId(chainId) && (
<RowBetween>
<RowFixed>
<ThemedText.Black fontWeight={400} fontSize={14} color={theme.text2}>
<ThemedText.Black fontWeight={400} fontSize={14} color={theme.deprecated_text2}>
<Trans>Auto Router API</Trans>
</ThemedText.Black>
<QuestionHelper text={<Trans>Use the Uniswap Labs API to get faster quotes.</Trans>} />
@ -222,7 +222,7 @@ export default function SettingsTab({ placeholderSlippage }: { placeholderSlippa
)}
<RowBetween>
<RowFixed>
<ThemedText.Black fontWeight={400} fontSize={14} color={theme.text2}>
<ThemedText.Black fontWeight={400} fontSize={14} color={theme.deprecated_text2}>
<Trans>Expert Mode</Trans>
</ThemedText.Black>
<QuestionHelper

22
src/components/Slider/index.tsx
View File

@ -19,11 +19,11 @@ const StyledRangeInput = styled.input<{ size: number }>`
-webkit-appearance: none;
height: ${({ size }) => size}px;
width: ${({ size }) => size}px;
background-color: ${({ theme }) => theme.blue1};
background-color: ${({ theme }) => theme.deprecated_blue1};
border-radius: 100%;
border: none;
transform: translateY(-50%);
color: ${({ theme }) => theme.bg1};
color: ${({ theme }) => theme.deprecated_bg1};
&:hover,
&:focus {
@ -38,7 +38,7 @@ const StyledRangeInput = styled.input<{ size: number }>`
background-color: #565a69;
border-radius: 100%;
border: none;
color: ${({ theme }) => theme.bg1};
color: ${({ theme }) => theme.deprecated_bg1};
&:hover,
&:focus {
@ -52,7 +52,7 @@ const StyledRangeInput = styled.input<{ size: number }>`
width: ${({ size }) => size}px;
background-color: #565a69;
border-radius: 100%;
color: ${({ theme }) => theme.bg1};
color: ${({ theme }) => theme.deprecated_bg1};
&:hover,
&:focus {
@ -62,12 +62,16 @@ const StyledRangeInput = styled.input<{ size: number }>`
}
&::-webkit-slider-runnable-track {
background: linear-gradient(90deg, ${({ theme }) => theme.blue1}, ${({ theme }) => theme.blue2});
background: linear-gradient(
90deg,
${({ theme }) => theme.deprecated_blue1},
${({ theme }) => theme.deprecated_blue2}
);
height: 2px;
}
&::-moz-range-track {
background: linear-gradient(90deg, ${({ theme }) => theme.bg5}, ${({ theme }) => theme.bg3});
background: linear-gradient(90deg, ${({ theme }) => theme.deprecated_bg5}, ${({ theme }) => theme.deprecated_bg3});
height: 2px;
}
@ -76,14 +80,14 @@ const StyledRangeInput = styled.input<{ size: number }>`
border-color: transparent;
color: transparent;
background: ${({ theme }) => theme.bg5};
background: ${({ theme }) => theme.deprecated_bg5};
height: 2px;
}
&::-ms-fill-lower {
background: ${({ theme }) => theme.bg5};
background: ${({ theme }) => theme.deprecated_bg5};
}
&::-ms-fill-upper {
background: ${({ theme }) => theme.bg3};
background: ${({ theme }) => theme.deprecated_bg3};
}
`

12
src/components/TextInput/index.tsx
View File

@ -7,9 +7,9 @@ const Input = styled.input<{ error?: boolean; fontSize?: string }>`
border: none;
flex: 1 1 auto;
width: 0;
background-color: ${({ theme }) => theme.bg1};
background-color: ${({ theme }) => theme.deprecated_bg1};
transition: color 300ms ${({ error }) => (error ? 'step-end' : 'step-start')};
color: ${({ error, theme }) => (error ? theme.red1 : theme.text1)};
color: ${({ error, theme }) => (error ? theme.deprecated_red1 : theme.deprecated_text1)};
overflow: hidden;
text-overflow: ellipsis;
font-weight: 500;
@ -27,7 +27,7 @@ const Input = styled.input<{ error?: boolean; fontSize?: string }>`
}
::placeholder {
color: ${({ theme }) => theme.text4};
color: ${({ theme }) => theme.deprecated_text4};
}
`
@ -38,9 +38,9 @@ const TextAreaInput = styled.textarea<{ error?: boolean; fontSize?: string }>`
flex: 1 1 auto;
width: 0;
resize: none;
background-color: ${({ theme }) => theme.bg1};
background-color: ${({ theme }) => theme.deprecated_bg1};
transition: color 300ms ${({ error }) => (error ? 'step-end' : 'step-start')};
color: ${({ error, theme }) => (error ? theme.red1 : theme.text1)};
color: ${({ error, theme }) => (error ? theme.deprecated_red1 : theme.deprecated_text1)};
overflow: hidden;
text-overflow: ellipsis;
font-weight: 500;
@ -59,7 +59,7 @@ const TextAreaInput = styled.textarea<{ error?: boolean; fontSize?: string }>`
}
::placeholder {
color: ${({ theme }) => theme.text4};
color: ${({ theme }) => theme.deprecated_text4};
}
`

10
src/components/Toggle/MultiToggle.tsx
View File

@ -5,9 +5,9 @@ export const ToggleWrapper = styled.button<{ width?: string }>`
align-items: center;
width: ${({ width }) => width ?? '100%'};
padding: 1px;
background: ${({ theme }) => theme.bg1};
background: ${({ theme }) => theme.deprecated_bg1};
border-radius: 8px;
border: ${({ theme }) => '1px solid ' + theme.bg2};
border: ${({ theme }) => '1px solid ' + theme.deprecated_bg2};
cursor: pointer;
outline: none;
`
@ -20,13 +20,13 @@ export const ToggleElement = styled.span<{ isActive?: boolean; fontSize?: string
border-radius: 6px;
justify-content: center;
height: 100%;
background: ${({ theme, isActive }) => (isActive ? theme.bg0 : 'none')};
color: ${({ theme, isActive }) => (isActive ? theme.text1 : theme.text3)};
background: ${({ theme, isActive }) => (isActive ? theme.deprecated_bg0 : 'none')};
color: ${({ theme, isActive }) => (isActive ? theme.deprecated_text1 : theme.deprecated_text3)};
font-size: ${({ fontSize }) => fontSize ?? '1rem'};
font-weight: 500;
white-space: nowrap;
:hover {
user-select: initial;
color: ${({ theme, isActive }) => (isActive ? theme.text2 : theme.text3)};
color: ${({ theme, isActive }) => (isActive ? theme.deprecated_text2 : theme.deprecated_text3)};
}
`

8
src/components/Toggle/index.tsx
View File

@ -4,7 +4,7 @@ import styled, { keyframes } from 'styled-components/macro'
const Wrapper = styled.button<{ isActive?: boolean; activeElement?: boolean }>`
align-items: center;
background: ${({ theme }) => theme.bg1};
background: ${({ theme }) => theme.deprecated_bg1};
border: none;
border-radius: 20px;
cursor: pointer;
@ -42,8 +42,8 @@ const ToggleElementHoverStyle = (hasBgColor: boolean, theme: any, isActive?: boo
opacity: '0.8',
}
: {
background: isActive ? darken(0.05, theme.primary1) : darken(0.05, theme.bg4),
color: isActive ? theme.white : theme.text3,
background: isActive ? darken(0.05, theme.deprecated_primary1) : darken(0.05, theme.deprecated_bg4),
color: isActive ? theme.deprecated_white : theme.deprecated_text3,
}
const ToggleElement = styled.span<{ isActive?: boolean; bgColor?: string; isInitialToggleLoad?: boolean }>`
@ -51,7 +51,7 @@ const ToggleElement = styled.span<{ isActive?: boolean; bgColor?: string; isInit
${({ isActive, isInitialToggleLoad }) => (isInitialToggleLoad ? 'none' : isActive ? turnOnToggle : turnOffToggle)}
ease-in;
background: ${({ theme, bgColor, isActive }) =>
isActive ? bgColor ?? theme.primary1 : !!bgColor ? theme.bg4 : theme.text3};
isActive ? bgColor ?? theme.deprecated_primary1 : !!bgColor ? theme.deprecated_bg4 : theme.deprecated_text3};
border-radius: 50%;
height: 24px;
:hover {

4
src/components/Tooltip/index.tsx
View File

@ -10,9 +10,9 @@ export const TooltipContainer = styled.div`
font-weight: 400;
word-break: break-word;
background: ${({ theme }) => theme.bg0};
background: ${({ theme }) => theme.deprecated_bg0};
border-radius: 12px;
border: 1px solid ${({ theme }) => theme.bg2};
border: 1px solid ${({ theme }) => theme.deprecated_bg2};
box-shadow: 0 4px 8px 0 ${({ theme }) => transparentize(0.9, theme.shadow1)};
`

4
src/components/TransactionConfirmationModal/AnimatedConfirmation.tsx
View File

@ -48,7 +48,7 @@ export default function AnimatedConfirmation() {
<Circle
className="path circle"
fill="none"
stroke={theme.green1}
stroke={theme.deprecated_green1}
strokeWidth="6"
strokeMiterlimit="10"
cx="65.1"
@ -58,7 +58,7 @@ export default function AnimatedConfirmation() {
<PolyLine
className="path check"
fill="none"
stroke={theme.green1}
stroke={theme.deprecated_green1}
strokeWidth="6"
strokeLinecap="round"
strokeMiterlimit="10"

20
src/components/TransactionConfirmationModal/index.tsx
View File

@ -127,7 +127,7 @@ function TransactionSubmittedContent({
</RowBetween>
)}
<ConfirmedIcon inline={inline}>
<ArrowUpCircle strokeWidth={0.5} size={inline ? '40px' : '90px'} color={theme.primary1} />
<ArrowUpCircle strokeWidth={0.5} size={inline ? '40px' : '90px'} color={theme.deprecated_primary1} />
</ConfirmedIcon>
<AutoColumn gap="12px" justify={'center'}>
<Text fontWeight={500} fontSize={20} textAlign="center">
@ -135,7 +135,7 @@ function TransactionSubmittedContent({
</Text>
{chainId && hash && (
<ExternalLink href={getExplorerLink(chainId, hash, ExplorerDataType.TRANSACTION)}>
<Text fontWeight={500} fontSize={14} color={theme.primary1}>
<Text fontWeight={500} fontSize={14} color={theme.deprecated_primary1}>
<Trans>View on Explorer</Trans>
</Text>
</ExternalLink>
@ -149,7 +149,7 @@ function TransactionSubmittedContent({
) : (
<RowFixed>
<Trans>Added {currencyToAdd.symbol} </Trans>
<CheckCircle size={'16px'} stroke={theme.green1} style={{ marginLeft: '6px' }} />
<CheckCircle size={'16px'} stroke={theme.deprecated_green1} style={{ marginLeft: '6px' }} />
</RowFixed>
)}
</ButtonLight>
@ -204,11 +204,11 @@ export function TransactionErrorContent({ message, onDismiss }: { message: React
<CloseIcon onClick={onDismiss} />
</RowBetween>
<AutoColumn style={{ marginTop: 20, padding: '2rem 0' }} gap="24px" justify="center">
<AlertTriangle color={theme.red1} style={{ strokeWidth: 1.5 }} size={64} />
<AlertTriangle color={theme.deprecated_red1} style={{ strokeWidth: 1.5 }} size={64} />
<Text
fontWeight={500}
fontSize={16}
color={theme.red1}
color={theme.deprecated_red1}
style={{ textAlign: 'center', width: '85%', wordBreak: 'break-word' }}
>
{message}
@ -268,10 +268,10 @@ function L2Content({
<ConfirmedIcon inline={inline}>
{confirmed ? (
transactionSuccess ? (
// <CheckCircle strokeWidth={1} size={inline ? '40px' : '90px'} color={theme.green1} />
// <CheckCircle strokeWidth={1} size={inline ? '40px' : '90px'} color={theme.deprecated_green1} />
<AnimatedConfirmation />
) : (
<AlertCircle strokeWidth={1} size={inline ? '40px' : '90px'} color={theme.red1} />
<AlertCircle strokeWidth={1} size={inline ? '40px' : '90px'} color={theme.deprecated_red1} />
)
) : (
<CustomLightSpinner src={Circle} alt="loader" size={inline ? '40px' : '90px'} />
@ -294,20 +294,20 @@ function L2Content({
</Text>
{chainId && hash ? (
<ExternalLink href={getExplorerLink(chainId, hash, ExplorerDataType.TRANSACTION)}>
<Text fontWeight={500} fontSize={14} color={theme.primary1}>
<Text fontWeight={500} fontSize={14} color={theme.deprecated_primary1}>
<Trans>View on Explorer</Trans>
</Text>
</ExternalLink>
) : (
<div style={{ height: '17px' }} />
)}
<Text color={theme.text3} style={{ margin: '20px 0 0 0' }} fontSize={'14px'}>
<Text color={theme.deprecated_text3} style={{ margin: '20px 0 0 0' }} fontSize={'14px'}>
{!secondsToConfirm ? (
<div style={{ height: '24px' }} />
) : (
<div>
<Trans>Transaction completed in </Trans>
<span style={{ fontWeight: 500, marginLeft: '4px', color: theme.text1 }}>
<span style={{ fontWeight: 500, marginLeft: '4px', color: theme.deprecated_text1 }}>
{secondsToConfirm} seconds 🎉
</span>
</div>

28
src/components/TransactionSettings/index.tsx
View File

@ -23,21 +23,21 @@ enum DeadlineError {
}
const FancyButton = styled.button`
color: ${({ theme }) => theme.text1};
color: ${({ theme }) => theme.deprecated_text1};
align-items: center;
height: 2rem;
border-radius: 36px;
font-size: 1rem;
width: auto;
min-width: 3.5rem;
border: 1px solid ${({ theme }) => theme.bg3};
border: 1px solid ${({ theme }) => theme.deprecated_bg3};
outline: none;
background: ${({ theme }) => theme.bg1};
background: ${({ theme }) => theme.deprecated_bg1};
:hover {
border: 1px solid ${({ theme }) => theme.bg4};
border: 1px solid ${({ theme }) => theme.deprecated_bg4};
}
:focus {
border: 1px solid ${({ theme }) => theme.primary1};
border: 1px solid ${({ theme }) => theme.deprecated_primary1};
}
`
@ -46,12 +46,12 @@ const Option = styled(FancyButton)<{ active: boolean }>`
:hover {
cursor: pointer;
}
background-color: ${({ active, theme }) => active && theme.primary1};
color: ${({ active, theme }) => (active ? theme.white : theme.text1)};
background-color: ${({ active, theme }) => active && theme.deprecated_primary1};
color: ${({ active, theme }) => (active ? theme.deprecated_white : theme.deprecated_text1)};
`
const Input = styled.input`
background: ${({ theme }) => theme.bg1};
background: ${({ theme }) => theme.deprecated_bg1};
font-size: 16px;
width: auto;
outline: none;
@ -59,7 +59,7 @@ const Input = styled.input`
&::-webkit-inner-spin-button {
-webkit-appearance: none;
}
color: ${({ theme, color }) => (color === 'red' ? theme.red1 : theme.text1)};
color: ${({ theme, color }) => (color === 'red' ? theme.deprecated_red1 : theme.deprecated_text1)};
text-align: right;
`
@ -69,10 +69,12 @@ const OptionCustom = styled(FancyButton)<{ active?: boolean; warning?: boolean }
padding: 0 0.75rem;
flex: 1;
border: ${({ theme, active, warning }) =>
active ? `1px solid ${warning ? theme.red1 : theme.primary1}` : warning && `1px solid ${theme.red1}`};
active
? `1px solid ${warning ? theme.deprecated_red1 : theme.deprecated_primary1}`
: warning && `1px solid ${theme.deprecated_red1}`};
:hover {
border: ${({ theme, active, warning }) =>
active && `1px solid ${warning ? darken(0.1, theme.red1) : darken(0.1, theme.primary1)}`};
active && `1px solid ${warning ? darken(0.1, theme.deprecated_red1) : darken(0.1, theme.deprecated_primary1)}`};
}
input {
@ -163,7 +165,7 @@ export default function TransactionSettings({ placeholderSlippage }: Transaction
<AutoColumn gap="md">
<AutoColumn gap="sm">
<RowFixed>
<ThemedText.Black fontWeight={400} fontSize={14} color={theme.text2}>
<ThemedText.Black fontWeight={400} fontSize={14} color={theme.deprecated_text2}>
<Trans>Slippage tolerance</Trans>
</ThemedText.Black>
<QuestionHelper
@ -232,7 +234,7 @@ export default function TransactionSettings({ placeholderSlippage }: Transaction
{showCustomDeadlineRow && (
<AutoColumn gap="sm">
<RowFixed>
<ThemedText.Black fontSize={14} fontWeight={400} color={theme.text2}>
<ThemedText.Black fontSize={14} fontWeight={400} color={theme.deprecated_text2}>
<Trans>Transaction deadline</Trans>
</ThemedText.Black>
<QuestionHelper

17
src/components/WalletModal/Option.tsx
View File

@ -6,16 +6,16 @@ import styled from 'styled-components/macro'
import { ExternalLink } from '../../theme'
const InfoCard = styled.button<{ isActive?: boolean }>`
background-color: ${({ theme, isActive }) => (isActive ? theme.bg3 : theme.bg2)};
background-color: ${({ theme, isActive }) => (isActive ? theme.deprecated_bg3 : theme.deprecated_bg2)};
padding: 1rem;
outline: none;
border: 1px solid;
border-radius: 12px;
width: 100% !important;
&:focus {
box-shadow: 0 0 0 1px ${({ theme }) => theme.primary1};
box-shadow: 0 0 0 1px ${({ theme }) => theme.deprecated_primary1};
}
border-color: ${({ theme, isActive }) => (isActive ? 'transparent' : theme.bg3)};
border-color: ${({ theme, isActive }) => (isActive ? 'transparent' : theme.deprecated_bg3)};
`
const OptionCard = styled(InfoCard as any)`
@ -37,7 +37,7 @@ const OptionCardClickable = styled(OptionCard as any)<{ clickable?: boolean }>`
margin-top: 0;
&:hover {
cursor: ${({ clickable }) => (clickable ? 'pointer' : '')};
border: ${({ clickable, theme }) => (clickable ? `1px solid ${theme.primary1}` : ``)};
border: ${({ clickable, theme }) => (clickable ? `1px solid ${theme.deprecated_primary1}` : ``)};
}
opacity: ${({ disabled }) => (disabled ? '0.5' : '1')};
`
@ -51,13 +51,13 @@ const GreenCircle = styled.div`
height: 8px;
width: 8px;
margin-right: 8px;
background-color: ${({ theme }) => theme.green1};
background-color: ${({ theme }) => theme.deprecated_green1};
border-radius: 50%;
}
`
const CircleWrapper = styled.div`
color: ${({ theme }) => theme.green1};
color: ${({ theme }) => theme.deprecated_green1};
display: flex;
justify-content: center;
align-items: center;
@ -65,13 +65,14 @@ const CircleWrapper = styled.div`
const HeaderText = styled.div`
${({ theme }) => theme.flexRowNoWrap};
color: ${(props) => (props.color === 'blue' ? ({ theme }) => theme.primary1 : ({ theme }) => theme.text1)};
color: ${(props) =>
props.color === 'blue' ? ({ theme }) => theme.deprecated_primary1 : ({ theme }) => theme.deprecated_text1};
font-size: 1rem;
font-weight: 500;
`
const SubHeader = styled.div`
color: ${({ theme }) => theme.text1};
color: ${({ theme }) => theme.deprecated_text1};
margin-top: 10px;
font-size: 12px;
`

8
src/components/WalletModal/index.tsx
View File

@ -41,7 +41,7 @@ const CloseIcon = styled.div`
const CloseColor = styled(Close)`
path {
stroke: ${({ theme }) => theme.text4};
stroke: ${({ theme }) => theme.deprecated_text4};
}
`
@ -56,14 +56,14 @@ const HeaderRow = styled.div`
${({ theme }) => theme.flexRowNoWrap};
padding: 1rem 1rem;
font-weight: 500;
color: ${(props) => (props.color === 'blue' ? ({ theme }) => theme.primary1 : 'inherit')};
color: ${(props) => (props.color === 'blue' ? ({ theme }) => theme.deprecated_primary1 : 'inherit')};
${({ theme }) => theme.mediaWidth.upToMedium`
padding: 1rem;
`};
`
const ContentWrapper = styled.div`
background-color: ${({ theme }) => theme.bg0};
background-color: ${({ theme }) => theme.deprecated_bg0};
padding: 0 1rem 1rem 1rem;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
@ -98,7 +98,7 @@ const OptionGrid = styled.div`
const HoverText = styled.div`
text-decoration: none;
color: ${({ theme }) => theme.text1};
color: ${({ theme }) => theme.deprecated_text1};
display: flex;
align-items: center;

38
src/components/Web3Status/index.tsx
View File

@ -40,55 +40,57 @@ const Web3StatusGeneric = styled(ButtonSecondary)`
}
`
const Web3StatusError = styled(Web3StatusGeneric)`
background-color: ${({ theme }) => theme.red1};
border: 1px solid ${({ theme }) => theme.red1};
color: ${({ theme }) => theme.white};
background-color: ${({ theme }) => theme.deprecated_red1};
border: 1px solid ${({ theme }) => theme.deprecated_red1};
color: ${({ theme }) => theme.deprecated_white};
font-weight: 500;
:hover,
:focus {
background-color: ${({ theme }) => darken(0.1, theme.red1)};
background-color: ${({ theme }) => darken(0.1, theme.deprecated_red1)};
}
`
const Web3StatusConnect = styled(Web3StatusGeneric)<{ faded?: boolean }>`
background-color: ${({ theme }) => theme.primary4};
background-color: ${({ theme }) => theme.deprecated_primary4};
border: none;
color: ${({ theme }) => theme.primaryText1};
color: ${({ theme }) => theme.deprecated_primaryText1};
font-weight: 500;
:hover,
:focus {
border: 1px solid ${({ theme }) => darken(0.05, theme.primary4)};
color: ${({ theme }) => theme.primaryText1};
border: 1px solid ${({ theme }) => darken(0.05, theme.deprecated_primary4)};
color: ${({ theme }) => theme.deprecated_primaryText1};
}
${({ faded }) =>
faded &&
css`
background-color: ${({ theme }) => theme.primary5};
border: 1px solid ${({ theme }) => theme.primary5};
color: ${({ theme }) => theme.primaryText1};
background-color: ${({ theme }) => theme.deprecated_primary5};
border: 1px solid ${({ theme }) => theme.deprecated_primary5};
color: ${({ theme }) => theme.deprecated_primaryText1};
:hover,
:focus {
border: 1px solid ${({ theme }) => darken(0.05, theme.primary4)};
color: ${({ theme }) => darken(0.05, theme.primaryText1)};
border: 1px solid ${({ theme }) => darken(0.05, theme.deprecated_primary4)};
color: ${({ theme }) => darken(0.05, theme.deprecated_primaryText1)};
}
`}
`
const Web3StatusConnected = styled(Web3StatusGeneric)<{ pending?: boolean }>`
background-color: ${({ pending, theme }) => (pending ? theme.primary1 : theme.bg1)};
border: 1px solid ${({ pending, theme }) => (pending ? theme.primary1 : theme.bg1)};
color: ${({ pending, theme }) => (pending ? theme.white : theme.text1)};
background-color: ${({ pending, theme }) => (pending ? theme.deprecated_primary1 : theme.deprecated_bg1)};
border: 1px solid ${({ pending, theme }) => (pending ? theme.deprecated_primary1 : theme.deprecated_bg1)};
color: ${({ pending, theme }) => (pending ? theme.deprecated_white : theme.deprecated_text1)};
font-weight: 500;
:hover,
:focus {
border: 1px solid ${({ theme }) => darken(0.05, theme.bg3)};
border: 1px solid ${({ theme }) => darken(0.05, theme.deprecated_bg3)};
:focus {
border: 1px solid ${({ pending, theme }) => (pending ? darken(0.1, theme.primary1) : darken(0.1, theme.bg2))};
border: 1px solid
${({ pending, theme }) =>
pending ? darken(0.1, theme.deprecated_primary1) : darken(0.1, theme.deprecated_bg2)};
}
}
`

11
src/components/earn/PoolCard.tsx
View File

@ -38,8 +38,11 @@ const Wrapper = styled(AutoColumn)<{ showBackground: boolean; bgColor: any }>`
position: relative;
opacity: ${({ showBackground }) => (showBackground ? '1' : '1')};
background: ${({ theme, bgColor, showBackground }) =>
`radial-gradient(91.85% 100% at 1.84% 0%, ${bgColor} 0%, ${showBackground ? theme.black : theme.bg5} 100%) `};
color: ${({ theme, showBackground }) => (showBackground ? theme.white : theme.text1)} !important;
`radial-gradient(91.85% 100% at 1.84% 0%, ${bgColor} 0%, ${
showBackground ? theme.deprecated_black : theme.deprecated_bg5
} 100%) `};
color: ${({ theme, showBackground }) =>
showBackground ? theme.deprecated_white : theme.deprecated_text1} !important;
${({ showBackground }) =>
showBackground &&
@ -164,13 +167,13 @@ export default function PoolCard({ stakingInfo }: { stakingInfo: StakingInfo })
<>
<Break />
<BottomSection showBackground={true}>
<ThemedText.Black color={'white'} fontWeight={500}>
<ThemedText.Black color={'deprecated_white'} fontWeight={500}>
<span>
<Trans>Your rate</Trans>
</span>
</ThemedText.Black>
<ThemedText.Black style={{ textAlign: 'right' }} color={'white'} fontWeight={500}>
<ThemedText.Black style={{ textAlign: 'right' }} color={'deprecated_white'} fontWeight={500}>
<span role="img" aria-label="wizard-icon" style={{ marginRight: '0.5rem' }}>
⚡
</span>

12
src/components/swap/AdvancedSwapDetails.tsx
View File

@ -77,7 +77,7 @@ export function AdvancedSwapDetails({
}
disableHover={hideInfoTooltips}
>
<ThemedText.SubHeader color={theme.text1}>
<ThemedText.SubHeader color={theme.deprecated_text1}>
<Trans>Expected Output</Trans>
</ThemedText.SubHeader>
</MouseoverTooltip>
@ -96,7 +96,7 @@ export function AdvancedSwapDetails({
text={<Trans>The impact your trade has on the market price of this pool.</Trans>}
disableHover={hideInfoTooltips}
>
<ThemedText.SubHeader color={theme.text1}>
<ThemedText.SubHeader color={theme.deprecated_text1}>
<Trans>Price Impact</Trans>
</ThemedText.SubHeader>
</MouseoverTooltip>
@ -119,7 +119,7 @@ export function AdvancedSwapDetails({
}
disableHover={hideInfoTooltips}
>
<ThemedText.SubHeader color={theme.text3}>
<ThemedText.SubHeader color={theme.deprecated_text3}>
{trade.tradeType === TradeType.EXACT_INPUT ? (
<Trans>Minimum received</Trans>
) : (
@ -130,7 +130,7 @@ export function AdvancedSwapDetails({
</MouseoverTooltip>
</RowFixed>
<TextWithLoadingPlaceholder syncing={syncing} width={70}>
<ThemedText.Black textAlign="right" fontSize={14} color={theme.text3}>
<ThemedText.Black textAlign="right" fontSize={14} color={theme.deprecated_text3}>
{trade.tradeType === TradeType.EXACT_INPUT
? `${trade.minimumAmountOut(allowedSlippage).toSignificant(6)} ${trade.outputAmount.currency.symbol}`
: `${trade.maximumAmountIn(allowedSlippage).toSignificant(6)} ${trade.inputAmount.currency.symbol}`}
@ -147,12 +147,12 @@ export function AdvancedSwapDetails({
}
disableHover={hideInfoTooltips}
>
<ThemedText.SubHeader color={theme.text3}>
<ThemedText.SubHeader color={theme.deprecated_text3}>
<Trans>Network Fee</Trans>
</ThemedText.SubHeader>
</MouseoverTooltip>
<TextWithLoadingPlaceholder syncing={syncing} width={50}>
<ThemedText.Black textAlign="right" fontSize={14} color={theme.text3}>
<ThemedText.Black textAlign="right" fontSize={14} color={theme.deprecated_text3}>
~${trade.gasUseEstimateUSD.toFixed(2)}
</ThemedText.Black>
</TextWithLoadingPlaceholder>

6
src/components/swap/GasEstimateBadge.tsx
View File

@ -17,8 +17,8 @@ const GasWrapper = styled(RowFixed)`
border-radius: 8px;
padding: 4px 6px;
height: 24px;
color: ${({ theme }) => theme.text3};
background-color: ${({ theme }) => theme.bg1};
color: ${({ theme }) => theme.deprecated_text3};
background-color: ${({ theme }) => theme.deprecated_bg1};
font-size: 14px;
font-weight: 500;
user-select: none;
@ -27,7 +27,7 @@ const StyledGasIcon = styled(GasIcon)`
margin-right: 4px;
height: 14px;
& > * {
stroke: ${({ theme }) => theme.text3};
stroke: ${({ theme }) => theme.deprecated_text3};
}
`

4
src/components/swap/RouterLabel.tsx
View File

@ -19,7 +19,7 @@ const StyledStaticRouterIcon = styled(StaticRouterIcon)`
height: 16px;
width: 16px;
fill: ${({ theme }) => theme.text3};
fill: ${({ theme }) => theme.deprecated_text3};
:hover {
filter: brightness(1.3);
@ -30,7 +30,7 @@ const StyledAutoRouterLabel = styled(ThemedText.Black)`
line-height: 1rem;
/* fallback color */
color: ${({ theme }) => theme.green1};
color: ${({ theme }) => theme.deprecated_green1};
@supports (-webkit-background-clip: text) and (-webkit-text-fill-color: transparent) {
background-image: linear-gradient(90deg, #2172e5 0%, #54e521 163.16%);

22
src/components/swap/SwapDetailsDropdown.tsx
View File

@ -30,24 +30,25 @@ const StyledInfoIcon = styled(Info)`
height: 16px;
width: 16px;
margin-right: 4px;
color: ${({ theme }) => theme.text3};
color: ${({ theme }) => theme.deprecated_text3};
`
const StyledCard = styled(OutlineCard)`
padding: 12px;
border: 1px solid ${({ theme }) => theme.bg2};
border: 1px solid ${({ theme }) => theme.deprecated_bg2};
`
const StyledHeaderRow = styled(RowBetween)<{ disabled: boolean; open: boolean }>`
padding: 4px 8px;
border-radius: 12px;
background-color: ${({ open, theme }) => (open ? theme.bg1 : 'transparent')};
background-color: ${({ open, theme }) => (open ? theme.deprecated_bg1 : 'transparent')};
align-items: center;
cursor: ${({ disabled }) => (disabled ? 'initial' : 'pointer')};
min-height: 40px;
:hover {
background-color: ${({ theme, disabled }) => (disabled ? theme.bg1 : darken(0.015, theme.bg1))};
background-color: ${({ theme, disabled }) =>
disabled ? theme.deprecated_bg1 : darken(0.015, theme.deprecated_bg1)};
}
`
@ -63,7 +64,7 @@ const StyledPolling = styled.div`
margin-right: 2px;
margin-left: 10px;
align-items: center;
color: ${({ theme }) => theme.text1};
color: ${({ theme }) => theme.deprecated_text1};
transition: 250ms ease color;
${({ theme }) => theme.mediaWidth.upToMedium`
@ -78,7 +79,7 @@ const StyledPollingDot = styled.div`
min-width: 8px;
border-radius: 50%;
position: relative;
background-color: ${({ theme }) => theme.bg2};
background-color: ${({ theme }) => theme.deprecated_bg2};
transition: 250ms ease background-color;
`
@ -97,7 +98,7 @@ const Spinner = styled.div`
border-top: 1px solid transparent;
border-right: 1px solid transparent;
border-bottom: 1px solid transparent;
border-left: 2px solid ${({ theme }) => theme.text1};
border-left: 2px solid ${({ theme }) => theme.deprecated_text1};
background: transparent;
width: 14px;
height: 14px;
@ -159,7 +160,7 @@ export default function SwapDetailsDropdown({
placement="bottom"
disableHover={showDetails}
>
<StyledInfoIcon color={trade ? theme.text3 : theme.bg3} />
<StyledInfoIcon color={trade ? theme.deprecated_text3 : theme.deprecated_bg3} />
</MouseoverTooltipContent>
</HideSmall>
)}
@ -189,7 +190,10 @@ export default function SwapDetailsDropdown({
disableHover={showDetails}
/>
)}
<RotatingArrow stroke={trade ? theme.text3 : theme.bg3} open={Boolean(trade && showDetails)} />
<RotatingArrow
stroke={trade ? theme.deprecated_text3 : theme.deprecated_bg3}
open={Boolean(trade && showDetails)}
/>
</RowFixed>
</StyledHeaderRow>
<AnimatedDropdown open={showDetails}>

2
src/components/swap/SwapHeader.tsx
View File

@ -9,7 +9,7 @@ import SettingsTab from '../Settings'
const StyledSwapHeader = styled.div`
padding: 1rem 1.25rem 0.5rem 1.25rem;
width: 100%;
color: ${({ theme }) => theme.text2};
color: ${({ theme }) => theme.deprecated_text2};
`
export default function SwapHeader({ allowedSlippage }: { allowedSlippage: Percent }) {

12
src/components/swap/SwapModalHeader.tsx
View File

@ -32,9 +32,9 @@ const ArrowWrapper = styled.div`
display: flex;
justify-content: center;
align-items: center;
background-color: ${({ theme }) => theme.bg1};
background-color: ${({ theme }) => theme.deprecated_bg1};
border: 4px solid;
border-color: ${({ theme }) => theme.bg0};
border-color: ${({ theme }) => theme.deprecated_bg0};
z-index: 2;
`
@ -67,7 +67,7 @@ export default function SwapModalHeader({
<TruncatedText
fontSize={24}
fontWeight={500}
color={showAcceptChanges && trade.tradeType === TradeType.EXACT_OUTPUT ? theme.primary1 : ''}
color={showAcceptChanges && trade.tradeType === TradeType.EXACT_OUTPUT ? theme.deprecated_primary1 : ''}
>
{trade.inputAmount.toSignificant(6)}
</TruncatedText>
@ -85,7 +85,7 @@ export default function SwapModalHeader({
</AutoColumn>
</LightCard>
<ArrowWrapper>
<ArrowDown size="16" color={theme.text2} />
<ArrowDown size="16" color={theme.deprecated_text2} />
</ArrowWrapper>
<LightCard padding="0.75rem 1rem" style={{ marginBottom: '0.25rem' }}>
<AutoColumn gap={'8px'}>
@ -103,7 +103,7 @@ export default function SwapModalHeader({
</RowFixed>
</RowBetween>
<RowBetween>
<ThemedText.Body fontSize={14} color={theme.text3}>
<ThemedText.Body fontSize={14} color={theme.deprecated_text3}>
<FiatValue
fiatValue={fiatValueOutput}
priceImpact={computeFiatValuePriceImpact(fiatValueInput, fiatValueOutput)}
@ -123,7 +123,7 @@ export default function SwapModalHeader({
<RowBetween>
<RowFixed>
<AlertTriangle size={20} style={{ marginRight: '8px', minWidth: 24 }} />
<ThemedText.Main color={theme.primary1}>
<ThemedText.Main color={theme.deprecated_primary1}>
<Trans>Price Updated</Trans>
</ThemedText.Main>
</RowFixed>

4
src/components/swap/SwapRoute.tsx
View File

@ -23,7 +23,7 @@ import { AutoRouterLabel, AutoRouterLogo } from './RouterLabel'
const Wrapper = styled(AutoColumn)<{ darkMode?: boolean; fixedOpen?: boolean }>`
padding: ${({ fixedOpen }) => (fixedOpen ? '12px' : '12px 8px 12px 12px')};
border-radius: 16px;
border: 1px solid ${({ theme, fixedOpen }) => (fixedOpen ? 'transparent' : theme.bg2)};
border: 1px solid ${({ theme, fixedOpen }) => (fixedOpen ? 'transparent' : theme.deprecated_bg2)};
cursor: pointer;
`
@ -33,7 +33,7 @@ const OpenCloseIcon = styled(Plus)<{ open?: boolean }>`
stroke-width: 2px;
transition: transform 0.1s;
transform: ${({ open }) => (open ? 'rotate(45deg)' : 'none')};
stroke: ${({ theme }) => theme.text3};
stroke: ${({ theme }) => theme.deprecated_text3};
cursor: pointer;
:hover {
opacity: 0.8;

4
src/components/swap/SwapWarningDropdown.tsx
View File

@ -10,7 +10,7 @@ import { ThemedText } from 'theme'
import { ResponsiveTooltipContainer } from './styleds'
const Wrapper = styled.div`
background-color: ${({ theme }) => theme.bg1};
background-color: ${({ theme }) => theme.deprecated_bg1};
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
padding: 14px;
@ -19,7 +19,7 @@ const Wrapper = styled.div`
`
const StyledInfoIcon = styled(Info)`
stroke: ${({ theme }) => theme.text3};
stroke: ${({ theme }) => theme.deprecated_text3};
`
/**

2
src/components/swap/TradePrice.tsx
View File

@ -60,7 +60,7 @@ export default function TradePrice({ price, showInverted, setShowInverted }: Tra
}}
title={text}
>
<Text fontWeight={500} color={theme.text1}>
<Text fontWeight={500} color={theme.deprecated_text1}>
{text}
</Text>{' '}
{usdcPrice && (

4
src/components/swap/UnsupportedCurrencyFooter.tsx
View File

@ -24,8 +24,8 @@ const DetailsFooter = styled.div<{ show: boolean }>`
max-width: 400px;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
color: ${({ theme }) => theme.text2};
background-color: ${({ theme }) => theme.advancedBG};
color: ${({ theme }) => theme.deprecated_text2};
background-color: ${({ theme }) => theme.deprecated_advancedBG};
z-index: ${Z_INDEX.deprecated_zero};
transform: ${({ show }) => (show ? 'translateY(0%)' : 'translateY(-100%)')};

30
src/components/swap/styleds.tsx
View File

@ -25,8 +25,8 @@ export const ArrowWrapper = styled.div<{ clickable: boolean }>`
margin-bottom: -14px;
left: calc(50% - 16px);
/* transform: rotate(90deg); */
background-color: ${({ theme }) => theme.bg1};
border: 4px solid ${({ theme }) => theme.bg0};
background-color: ${({ theme }) => theme.deprecated_bg1};
border: 4px solid ${({ theme }) => theme.deprecated_bg0};
z-index: 2;
${({ clickable }) =>
clickable
@ -42,18 +42,18 @@ export const ArrowWrapper = styled.div<{ clickable: boolean }>`
export const SectionBreak = styled.div`
height: 1px;
width: 100%;
background-color: ${({ theme }) => theme.bg3};
background-color: ${({ theme }) => theme.deprecated_bg3};
`
export const ErrorText = styled(Text)<{ severity?: 0 | 1 | 2 | 3 | 4 }>`
color: ${({ theme, severity }) =>
severity === 3 || severity === 4
? theme.red1
? theme.deprecated_red1
: severity === 2
? theme.yellow2
? theme.deprecated_yellow2
: severity === 1
? theme.text1
: theme.text2};
? theme.deprecated_text1
: theme.deprecated_text2};
`
export const TruncatedText = styled(Text)`
@ -86,7 +86,7 @@ export const Dots = styled.span`
`
const SwapCallbackErrorInner = styled.div`
background-color: ${({ theme }) => transparentize(0.9, theme.red1)};
background-color: ${({ theme }) => transparentize(0.9, theme.deprecated_red1)};
border-radius: 1rem;
display: flex;
align-items: center;
@ -94,7 +94,7 @@ const SwapCallbackErrorInner = styled.div`
width: 100%;
padding: 3rem 1.25rem 1rem 1rem;
margin-top: -2rem;
color: ${({ theme }) => theme.red1};
color: ${({ theme }) => theme.deprecated_red1};
z-index: -1;
p {
padding: 0;
@ -104,7 +104,7 @@ const SwapCallbackErrorInner = styled.div`
`
const SwapCallbackErrorInnerAlertTriangle = styled.div`
background-color: ${({ theme }) => transparentize(0.9, theme.red1)};
background-color: ${({ theme }) => transparentize(0.9, theme.deprecated_red1)};
display: flex;
align-items: center;
justify-content: center;
@ -126,21 +126,21 @@ export function SwapCallbackError({ error }: { error: ReactNode }) {
}
export const SwapShowAcceptChanges = styled(AutoColumn)`
background-color: ${({ theme }) => transparentize(0.95, theme.primary3)};
color: ${({ theme }) => theme.primaryText1};
background-color: ${({ theme }) => transparentize(0.95, theme.deprecated_primary3)};
color: ${({ theme }) => theme.deprecated_primaryText1};
padding: 0.5rem;
border-radius: 12px;
margin-top: 8px;
`
export const TransactionDetailsLabel = styled(ThemedText.Black)`
border-bottom: 1px solid ${({ theme }) => theme.bg2};
border-bottom: 1px solid ${({ theme }) => theme.deprecated_bg2};
padding-bottom: 0.5rem;
`
export const ResponsiveTooltipContainer = styled(TooltipContainer)<{ origin?: string; width?: string }>`
background-color: ${({ theme }) => theme.bg0};
border: 1px solid ${({ theme }) => theme.bg2};
background-color: ${({ theme }) => theme.deprecated_bg0};
border: 1px solid ${({ theme }) => theme.deprecated_bg2};
padding: 1rem;
width: ${({ width }) => width ?? 'auto'};

2
src/components/vote/ExecuteModal.tsx
View File

@ -127,7 +127,7 @@ export default function ExecuteModal({ isOpen, onDismiss, proposalId }: ExecuteM
<StyledClosed onClick={wrappedOnDismiss} />
</RowBetween>
<ConfirmedIcon>
<ArrowUpCircle strokeWidth={0.5} size={90} color={theme.primary1} />
<ArrowUpCircle strokeWidth={0.5} size={90} color={theme.deprecated_primary1} />
</ConfirmedIcon>
<AutoColumn gap="100px" justify={'center'}>
<AutoColumn gap="12px" justify={'center'}>

2
src/components/vote/ProposalEmptyState.tsx
View File

@ -5,7 +5,7 @@ import styled from 'styled-components/macro'
import { ThemedText } from 'theme'
const EmptyProposals = styled.div`
border: 1px solid ${({ theme }) => theme.text4};
border: 1px solid ${({ theme }) => theme.deprecated_text4};
padding: 16px 12px;
border-radius: 12px;
display: flex;

2
src/components/vote/QueueModal.tsx
View File

@ -127,7 +127,7 @@ export default function QueueModal({ isOpen, onDismiss, proposalId }: QueueModal
<StyledClosed onClick={wrappedOnDismiss} />
</RowBetween>
<ConfirmedIcon>
<ArrowUpCircle strokeWidth={0.5} size={90} color={theme.primary1} />
<ArrowUpCircle strokeWidth={0.5} size={90} color={theme.deprecated_primary1} />
</ConfirmedIcon>
<AutoColumn gap="100px" justify={'center'}>
<AutoColumn gap="12px" justify={'center'}>

2
src/components/vote/VoteModal.tsx
View File

@ -141,7 +141,7 @@ export default function VoteModal({ isOpen, onDismiss, proposalId, voteOption }:
<StyledClosed onClick={wrappedOnDismiss} />
</RowBetween>
<ConfirmedIcon>
<ArrowUpCircle strokeWidth={0.5} size={90} color={theme.primary1} />
<ArrowUpCircle strokeWidth={0.5} size={90} color={theme.deprecated_primary1} />
</ConfirmedIcon>
<AutoColumn gap="100px" justify={'center'}>
<AutoColumn gap="12px" justify={'center'}>

16
src/pages/AddLiquidity/index.tsx
View File

@ -744,7 +744,7 @@ export default function AddLiquidity() {
fontSize={14}
style={{ fontWeight: 500 }}
textAlign="left"
color={theme.primaryText1}
color={theme.deprecated_primaryText1}
>
<Trans>
This pool must be initialized before you can add liquidity. To initialize, select a
@ -761,7 +761,9 @@ export default function AddLiquidity() {
onUserInput={onStartPriceInput}
/>
</OutlineCard>
<RowBetween style={{ backgroundColor: theme.bg1, padding: '12px', borderRadius: '12px' }}>
<RowBetween
style={{ backgroundColor: theme.deprecated_bg1, padding: '12px', borderRadius: '12px' }}
>
<ThemedText.Main>
<Trans>Current {baseCurrency?.symbol} Price:</Trans>
</ThemedText.Main>
@ -830,13 +832,13 @@ export default function AddLiquidity() {
$borderRadius="12px"
height="100%"
style={{
borderColor: theme.yellow3,
borderColor: theme.deprecated_yellow3,
border: '1px solid',
}}
>
<AutoColumn gap="8px" style={{ height: '100%' }}>
<RowFixed>
<AlertTriangle stroke={theme.yellow3} size="16px" />
<AlertTriangle stroke={theme.deprecated_yellow3} size="16px" />
<ThemedText.Yellow ml="12px" fontSize="15px">
<Trans>Efficiency Comparison</Trans>
</ThemedText.Yellow>
@ -846,7 +848,7 @@ export default function AddLiquidity() {
<Trans>
Full range positions may earn less fees than concentrated positions. Learn more{' '}
<ExternalLink
style={{ color: theme.yellow3, textDecoration: 'underline' }}
style={{ color: theme.deprecated_yellow3, textDecoration: 'underline' }}
href={
'https://help.uniswap.org/en/articles/5434296-can-i-provide-liquidity-over-the-full-range-in-v3'
}
@ -882,7 +884,7 @@ export default function AddLiquidity() {
{outOfRange ? (
<YellowCard padding="8px 12px" $borderRadius="12px">
<RowBetween>
<AlertTriangle stroke={theme.yellow3} size="16px" />
<AlertTriangle stroke={theme.deprecated_yellow3} size="16px" />
<ThemedText.Yellow ml="12px" fontSize="12px">
<Trans>
Your position will not earn fees or be used in trades until the market price moves into
@ -896,7 +898,7 @@ export default function AddLiquidity() {
{invalidRange ? (
<YellowCard padding="8px 12px" $borderRadius="12px">
<RowBetween>
<AlertTriangle stroke={theme.yellow3} size="16px" />
<AlertTriangle stroke={theme.deprecated_yellow3} size="16px" />
<ThemedText.Yellow ml="12px" fontSize="12px">
<Trans>Invalid range selected. The min price must be lower than the max price.</Trans>
</ThemedText.Yellow>

4
src/pages/AddLiquidity/styled.tsx
View File

@ -49,7 +49,7 @@ export const CurrencyDropdown = styled(CurrencyInputPanel)`
`
export const StyledInput = styled(Input)`
background-color: ${({ theme }) => theme.bg0};
background-color: ${({ theme }) => theme.deprecated_bg0};
text-align: left;
font-size: 18px;
width: 100%;
@ -66,7 +66,7 @@ export const ResponsiveTwoColumns = styled.div<{ wide: boolean }>`
padding-top: 20px;
border-top: 1px solid ${({ theme }) => theme.bg2};
border-top: 1px solid ${({ theme }) => theme.deprecated_bg2};
${({ theme }) => theme.mediaWidth.upToMedium`
grid-template-columns: 1fr;

6
src/pages/AddLiquidityV2/PoolPriceBar.tsx
View File

@ -27,7 +27,7 @@ export function PoolPriceBar({
<AutoRow justify="space-around" gap="4px">
<AutoColumn justify="center">
<ThemedText.Black>{price?.toSignificant(6) ?? '-'}</ThemedText.Black>
<Text fontWeight={500} fontSize={14} color={theme.text2} pt={1}>
<Text fontWeight={500} fontSize={14} color={theme.deprecated_text2} pt={1}>
<Trans>
{currencies[Field.CURRENCY_B]?.symbol} per {currencies[Field.CURRENCY_A]?.symbol}
</Trans>
@ -35,7 +35,7 @@ export function PoolPriceBar({
</AutoColumn>
<AutoColumn justify="center">
<ThemedText.Black>{price?.invert()?.toSignificant(6) ?? '-'}</ThemedText.Black>
<Text fontWeight={500} fontSize={14} color={theme.text2} pt={1}>
<Text fontWeight={500} fontSize={14} color={theme.deprecated_text2} pt={1}>
<Trans>
{currencies[Field.CURRENCY_A]?.symbol} per {currencies[Field.CURRENCY_B]?.symbol}
</Trans>
@ -48,7 +48,7 @@ export function PoolPriceBar({
: (poolTokenPercentage?.lessThan(ONE_BIPS) ? '<0.01' : poolTokenPercentage?.toFixed(2)) ?? '0'}
%
</ThemedText.Black>
<Text fontWeight={500} fontSize={14} color={theme.text2} pt={1}>
<Text fontWeight={500} fontSize={14} color={theme.deprecated_text2} pt={1}>
<Trans>Share of Pool</Trans>
</Text>
</AutoColumn>

10
src/pages/AddLiquidityV2/index.tsx
View File

@ -346,13 +346,13 @@ export default function AddLiquidity() {
<ColumnCenter>
<BlueCard>
<AutoColumn gap="10px">
<ThemedText.Link fontWeight={600} color={'primaryText1'}>
<ThemedText.Link fontWeight={600} color={'deprecated_primaryText1'}>
<Trans>You are the first liquidity provider.</Trans>
</ThemedText.Link>
<ThemedText.Link fontWeight={400} color={'primaryText1'}>
<ThemedText.Link fontWeight={400} color={'deprecated_primaryText1'}>
<Trans>The ratio of tokens you add will set the price of this pool.</Trans>
</ThemedText.Link>
<ThemedText.Link fontWeight={400} color={'primaryText1'}>
<ThemedText.Link fontWeight={400} color={'deprecated_primaryText1'}>
<Trans>Once you are happy with the rate click supply to review.</Trans>
</ThemedText.Link>
</AutoColumn>
@ -362,7 +362,7 @@ export default function AddLiquidity() {
<ColumnCenter>
<BlueCard>
<AutoColumn gap="10px">
<ThemedText.Link fontWeight={400} color={'primaryText1'}>
<ThemedText.Link fontWeight={400} color={'deprecated_primaryText1'}>
<Trans>
<b>
<Trans>Tip:</Trans>
@ -389,7 +389,7 @@ export default function AddLiquidity() {
showCommonBases
/>
<ColumnCenter>
<Plus size="16" color={theme.text2} />
<Plus size="16" color={theme.deprecated_text2} />
</ColumnCenter>
<CurrencyInputPanel
value={formattedAmounts[Field.CURRENCY_B]}

2
src/pages/AppBody.tsx
View File

@ -7,7 +7,7 @@ export const BodyWrapper = styled.main<{ margin?: string; maxWidth?: string }>`
margin-top: ${({ margin }) => margin ?? '0px'};
max-width: ${({ maxWidth }) => maxWidth ?? '480px'};
width: 100%;
background: ${({ theme }) => theme.bg0};
background: ${({ theme }) => theme.deprecated_bg0};
box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.01), 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 16px 24px rgba(0, 0, 0, 0.04),
0px 24px 32px rgba(0, 0, 0, 0.01);
border-radius: 24px;

8
src/pages/CreateProposal/ProposalActionSelector.tsx
View File

@ -28,13 +28,13 @@ const ContentWrapper = styled(Column)`
const ActionSelectorHeader = styled.div`
font-size: 14px;
font-weight: 500;
color: ${({ theme }) => theme.text2};
color: ${({ theme }) => theme.deprecated_text2};
`
const ActionDropdown = styled(ButtonDropdown)`
padding: 0px;
background-color: transparent;
color: ${({ theme }) => theme.text1};
color: ${({ theme }) => theme.deprecated_text1};
font-size: 1.25rem;
:hover,
@ -51,8 +51,8 @@ const ProposalActionSelectorFlex = styled.div`
display: flex;
flex-flow: column nowrap;
border-radius: 20px;
border: 1px solid ${({ theme }) => theme.bg2};
background-color: ${({ theme }) => theme.bg1};
border: 1px solid ${({ theme }) => theme.deprecated_bg2};
background-color: ${({ theme }) => theme.deprecated_bg1};
`
const ProposalActionSelectorContainer = styled.div`

6
src/pages/CreateProposal/ProposalEditor.tsx
View File

@ -8,7 +8,7 @@ import styled from 'styled-components/macro'
const ProposalEditorHeader = styled(Text)`
font-size: 14px;
font-weight: 500;
color: ${({ theme }) => theme.text2};
color: ${({ theme }) => theme.deprecated_text2};
`
const ProposalTitle = memo(styled(TextInput)`
@ -20,8 +20,8 @@ const ProposalEditorContainer = styled.div`
margin-top: 10px;
padding: 0.75rem 1rem 0.75rem 1rem;
border-radius: 20px;
border: 1px solid ${({ theme }) => theme.bg2};
background-color: ${({ theme }) => theme.bg1};
border: 1px solid ${({ theme }) => theme.deprecated_bg2};
background-color: ${({ theme }) => theme.deprecated_bg1};
`
export const ProposalEditor = ({

2
src/pages/CreateProposal/ProposalSubmissionModal.tsx
View File

@ -39,7 +39,7 @@ export const ProposalSubmissionModal = ({
</Text>
{hash && (
<ExternalLink href={getExplorerLink(1, hash, ExplorerDataType.TRANSACTION)}>
<Text fontWeight={500} fontSize={14} color={theme.primary1}>
<Text fontWeight={500} fontSize={14} color={theme.deprecated_primary1}>
<Trans>View on Etherscan</Trans>
</Text>
</ExternalLink>

2
src/pages/CreateProposal/index.tsx
View File

@ -233,7 +233,7 @@ ${bodyValue}
<CreateProposalWrapper>
<BlueCard>
<AutoColumn gap="10px">
<ThemedText.Link fontWeight={400} color={'primaryText1'}>
<ThemedText.Link fontWeight={400} color={'deprecated_primaryText1'}>
<Trans>
<strong>Tip:</strong> Select an action and describe your proposal for the community. The proposal
cannot be modified after submission, so please verify all information before submitting. The voting

8
src/pages/Earn/Manage.tsx
View File

@ -51,11 +51,13 @@ const StyledDataCard = styled(DataCard)<{ bgColor?: any; showBackground?: any }>
z-index: 2;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
background: ${({ theme, bgColor, showBackground }) =>
`radial-gradient(91.85% 100% at 1.84% 0%, ${bgColor} 0%, ${showBackground ? theme.black : theme.bg5} 100%) `};
`radial-gradient(91.85% 100% at 1.84% 0%, ${bgColor} 0%, ${
showBackground ? theme.deprecated_black : theme.deprecated_bg5
} 100%) `};
`
const StyledBottomCard = styled(DataCard)<{ dim: any }>`
background: ${({ theme }) => theme.bg3};
background: ${({ theme }) => theme.deprecated_bg3};
opacity: ${({ dim }) => (dim ? 0.4 : 1)};
margin-top: -40px;
padding: 0 1.25rem 1rem 1.25rem;
@ -65,7 +67,7 @@ const StyledBottomCard = styled(DataCard)<{ dim: any }>`
const PoolData = styled(DataCard)`
background: none;
border: 1px solid ${({ theme }) => theme.bg4};
border: 1px solid ${({ theme }) => theme.deprecated_bg4};
padding: 1rem;
z-index: 1;
`

Some files were not shown because too many files have changed in this diff Show More