Skip to content

I
interface
Commit d5e4e21a authored by Daniel James's avatar Daniel James Committed by GitHub
Browse files
Options

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

* 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
parent 46490518
Hide whitespace changes
Inline Side-by-side
Showing with 711 additions and 669 deletions
src/components/AccountDetails/Copy.tsx
View file @ d5e4e21a
......@@ -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`
......
src/components/AccountDetails/Transaction.tsx
View file @ d5e4e21a
......@@ -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 }) {
......
src/components/AccountDetails/index.tsx
View file @ d5e4e21a
......@@ -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>
......
src/components/AddressInputPanel/index.tsx
View file @ d5e4e21a
......@@ -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 && (
......
src/components/Badge/RangeBadge.tsx
View file @ d5e4e21a
......@@ -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;
......
src/components/Badge/index.tsx
View file @ d5e4e21a
......@@ -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)
}
}
......
src/components/Button/index.tsx
View file @ d5e4e21a
......@@ -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>
......
src/components/Card/index.tsx
View file @ d5e4e21a
......@@ -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;
`
src/components/ConnectedAccountBlocked/index.tsx
View file @ d5e4e21a
......@@ -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>
......
src/components/CurrencyInputPanel/FiatValue.tsx
View file @ d5e4e21a
......@@ -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>
) : (
......
src/components/CurrencyInputPanel/index.tsx
View file @ d5e4e21a
......@@ -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' }}
......
src/components/ErrorBoundary/index.tsx
View file @ d5e4e21a
......@@ -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;
`
......
src/components/FeeSelector/index.tsx
View file @ d5e4e21a
......@@ -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;
`
......
src/components/Header/ChainConnectivityWarning.tsx
View file @ d5e4e21a
......@@ -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;
......
src/components/Header/NetworkSelector.tsx
View file @ d5e4e21a
......@@ -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;
......
src/components/Header/Polling.tsx
View file @ d5e4e21a
......@@ -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>
......
src/components/Header/index.tsx
View file @ d5e4e21a
......@@ -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>
......
src/components/HoverInlineText/index.tsx
View file @ d5e4e21a
......@@ -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) {
......
src/components/Identicon/index.tsx
View file @ d5e4e21a
......@@ -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;
`
......
src/components/InputStepCounter/InputStepCounter.tsx
View file @ d5e4e21a
......@@ -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 {
......
src/components/LiquidityChartRangeInput/Area.tsx
View file @ d5e4e21a
......@@ -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 = ({
......
src/components/LiquidityChartRangeInput/AxisBottom.tsx
View file @ d5e4e21a
......@@ -8,7 +8,7 @@ const StyledGroup = styled.g`
}
text {
color: ${({ theme }) => theme.text2};
color: ${({ theme }) => theme.deprecated_text2};
transform: translateY(5px);
}
`
......
src/components/LiquidityChartRangeInput/Brush.tsx
View file @ d5e4e21a
......@@ -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
......
src/components/LiquidityChartRangeInput/Line.tsx
View file @ d5e4e21a
......@@ -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;
`
......
src/components/LiquidityChartRangeInput/Zoom.tsx
View file @ d5e4e21a
......@@ -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;
......
src/components/LiquidityChartRangeInput/index.tsx
View file @ d5e4e21a
......@@ -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,
},
},
}}
......
src/components/Loader/index.tsx
View file @ d5e4e21a
......@@ -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};
}
`
......
src/components/Loader/styled.tsx
View file @ d5e4e21a
......@@ -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;
......
src/components/Logo/index.tsx
View file @ d5e4e21a
......@@ -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 }} />
}
src/components/Menu/index.tsx
View file @ d5e4e21a
......@@ -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;
}
......
src/components/Modal/index.tsx
View file @ d5e4e21a
......@@ -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;
......
src/components/ModalViews/index.tsx
View file @ d5e4e21a
......@@ -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}
......
src/components/NavigationTabs/index.tsx
View file @ d5e4e21a
......@@ -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}
......
src/components/NumericalInput/index.tsx
View file @ d5e4e21a
......@@ -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};
}
`
......
src/components/Popover/index.tsx
View file @ d5e4e21a
......@@ -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 {
......
src/components/Popups/FailedNetworkSwitchPopup.tsx
View file @ d5e4e21a
......@@ -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}>
......
src/components/Popups/PopupItem.tsx
View file @ d5e4e21a
......@@ -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>
......
src/components/Popups/SurveyPopup.tsx
View file @ d5e4e21a
......@@ -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>
......
src/components/Popups/TransactionPopup.tsx
View file @ d5e4e21a
......@@ -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}>
......
src/components/PositionCard/Sushi.tsx
View file @ d5e4e21a
......@@ -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;
`
......
src/components/PositionCard/V2.tsx
View file @ d5e4e21a
......@@ -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;
`
......
src/components/PositionCard/index.tsx
View file @ d5e4e21a
......@@ -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;
`
......
src/components/PositionListItem/index.tsx
View file @ d5e4e21a
......@@ -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`
......
src/components/PositionPreview/index.tsx
View file @ d5e4e21a
......@@ -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>
......
src/components/PrivacyPolicy/index.tsx
View file @ d5e4e21a
......@@ -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>
......
src/components/ProgressSteps/index.tsx
View file @ d5e4e21a
......@@ -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>
)
})}
......
src/components/QuestionHelper/index.tsx
View file @ d5e4e21a
......@@ -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 {
......
src/components/RangeSelector/PresetsButtons.tsx
View file @ d5e4e21a
......@@ -10,7 +10,7 @@ const Button = styled(ButtonOutlined).attrs(() => ({
padding: '8px',
$borderRadius: '8px',
}))`
color: ${({ theme }) => theme.text1};
color: ${({ theme }) => theme.deprecated_text1};
flex: 1;
`
......
src/components/RoutingDiagram/RoutingDiagram.tsx
View file @ d5e4e21a
......@@ -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};
......
src/components/SearchModal/BlockedToken.tsx
View file @ d5e4e21a
......@@ -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;
`
......
src/components/SearchModal/CommonBases.tsx
View file @ d5e4e21a
......@@ -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)'};
`
......
src/components/SearchModal/CurrencyList/__snapshots__/index.test.tsx.snap
View file @ d5e4e21a
......@@ -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>
......
src/components/SearchModal/CurrencyList/index.tsx
View file @ d5e4e21a
......@@ -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>
......
src/components/SearchModal/CurrencySearch.tsx
View file @ d5e4e21a
......@@ -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>
......
src/components/SearchModal/ImportList.tsx
View file @ d5e4e21a
......@@ -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>
......
src/components/SearchModal/ImportRow.tsx
View file @ d5e4e21a
......@@ -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>
......
src/components/SearchModal/ImportToken.tsx
View file @ d5e4e21a
......@@ -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
......
src/components/SearchModal/Manage.tsx
View file @ d5e4e21a
......@@ -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 {
......
src/components/SearchModal/ManageLists.tsx
View file @ d5e4e21a
......@@ -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>
......
src/components/SearchModal/ManageTokens.tsx
View file @ d5e4e21a
......@@ -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)}
......
src/components/SearchModal/TokenImportCard.tsx
View file @ d5e4e21a
......@@ -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>
......
src/components/SearchModal/styleds.tsx
View file @ d5e4e21a
......@@ -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)`
......
src/components/Settings/index.tsx
View file @ d5e4e21a
......@@ -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
......
src/components/Slider/index.tsx
View file @ d5e4e21a
......@@ -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};
}
`
......
src/components/TextInput/index.tsx
View file @ d5e4e21a
......@@ -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};
}
`
......
src/components/Toggle/MultiToggle.tsx
View file @ d5e4e21a
......@@ -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)};
}
`
src/components/Toggle/index.tsx
View file @ d5e4e21a
......@@ -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 {
......
src/components/Tooltip/index.tsx
View file @ d5e4e21a
......@@ -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)};
`
......
src/components/TransactionConfirmationModal/AnimatedConfirmation.tsx
View file @ d5e4e21a
......@@ -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"
......
src/components/TransactionConfirmationModal/index.tsx
View file @ d5e4e21a
......@@ -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>
......
src/components/TransactionSettings/index.tsx
View file @ d5e4e21a
......@@ -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
......
src/components/WalletModal/Option.tsx
View file @ d5e4e21a
......@@ -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;
`
......
src/components/WalletModal/index.tsx
View file @ d5e4e21a
......@@ -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;
......
src/components/Web3Status/index.tsx
View file @ d5e4e21a
......@@ -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)};
}
}
`
......
src/components/earn/PoolCard.tsx
View file @ d5e4e21a
......@@ -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>
......
src/components/swap/AdvancedSwapDetails.tsx
View file @ d5e4e21a
......@@ -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>
......
src/components/swap/GasEstimateBadge.tsx
View file @ d5e4e21a
......@@ -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};
}
`
......
src/components/swap/RouterLabel.tsx
View file @ d5e4e21a
......@@ -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%);
......
src/components/swap/SwapDetailsDropdown.tsx
View file @ d5e4e21a
......@@ -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}>
......
src/components/swap/SwapHeader.tsx
View file @ d5e4e21a
......@@ -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 }) {
......
src/components/swap/SwapModalHeader.tsx
View file @ d5e4e21a
......@@ -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>
......
src/components/swap/SwapRoute.tsx
View file @ d5e4e21a
......@@ -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;
......
src/components/swap/SwapWarningDropdown.tsx
View file @ d5e4e21a
......@@ -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};
`
/**
......
src/components/swap/TradePrice.tsx
View file @ d5e4e21a
......@@ -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 && (
......
src/components/swap/UnsupportedCurrencyFooter.tsx
View file @ d5e4e21a
......@@ -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%)')};
......
src/components/swap/styleds.tsx
View file @ d5e4e21a
......@@ -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'};
......
src/components/vote/ExecuteModal.tsx
View file @ d5e4e21a
......@@ -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'}>
......
src/components/vote/ProposalEmptyState.tsx
View file @ d5e4e21a
......@@ -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;
......
src/components/vote/QueueModal.tsx
View file @ d5e4e21a
......@@ -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'}>
......
src/components/vote/VoteModal.tsx
View file @ d5e4e21a
......@@ -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'}>
......
src/pages/AddLiquidity/index.tsx
View file @ d5e4e21a
......@@ -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>
......
src/pages/AddLiquidity/styled.tsx
View file @ d5e4e21a
......@@ -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;
......
src/pages/AddLiquidityV2/PoolPriceBar.tsx
View file @ d5e4e21a
......@@ -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>
......
src/pages/AddLiquidityV2/index.tsx
View file @ d5e4e21a
......@@ -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]}
......
src/pages/AppBody.tsx
View file @ d5e4e21a
......@@ -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;
......
src/pages/CreateProposal/ProposalActionSelector.tsx
View file @ d5e4e21a
......@@ -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`
......
src/pages/CreateProposal/ProposalEditor.tsx
View file @ d5e4e21a
......@@ -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 = ({
......
src/pages/CreateProposal/ProposalSubmissionModal.tsx
View file @ d5e4e21a
......@@ -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>
......
src/pages/CreateProposal/index.tsx
View file @ d5e4e21a
......@@ -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
......
src/pages/Earn/Manage.tsx
View file @ d5e4e21a
......@@ -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;
`
......
src/pages/Earn/index.tsx
View file @ d5e4e21a
import { Trans } from '@lingui/macro'
import { useWeb3React } from '@web3-react/core'
import useTheme from 'hooks/useTheme'
import JSBI from 'jsbi'
import styled from 'styled-components/macro'
......@@ -40,6 +41,7 @@ flex-direction: column;
`
export default function Earn() {
const theme = useTheme()
const { chainId } = useWeb3React()
// staking info for connected account
......@@ -75,7 +77,7 @@ export default function Earn() {
</ThemedText.White>
</RowBetween>{' '}
<ExternalLink
style={{ color: 'white', textDecoration: 'underline' }}
style={{ color: theme.deprecated_white, textDecoration: 'underline' }}
href="https://uniswap.org/blog/uni/"
target="_blank"
>
......
src/pages/MigrateV2/MigrateV2Pair.tsx
View file @ d5e4e21a
......@@ -436,7 +436,7 @@ function V2PairMigration({
<FeeSelector feeAmount={feeAmount} handleFeePoolSelect={setFeeAmount} />
{noLiquidity && (
<BlueCard style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
<AlertCircle color={theme.text1} style={{ marginBottom: '12px', opacity: 0.8 }} />
<AlertCircle color={theme.deprecated_text1} style={{ marginBottom: '12px', opacity: 0.8 }} />
<ThemedText.Body
fontSize={14}
style={{ marginBottom: 8, fontWeight: 500, opacity: 0.8 }}
......@@ -564,7 +564,7 @@ function V2PairMigration({
{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 your range.
......@@ -577,7 +577,7 @@ function V2PairMigration({
{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>
......
src/pages/MigrateV2/index.tsx
View file @ d5e4e21a
......@@ -134,13 +134,13 @@ export default function MigrateV2() {
{!account ? (
<LightCard padding="40px">
<ThemedText.Body color={theme.text3} textAlign="center">
<ThemedText.Body color={theme.deprecated_text3} textAlign="center">
<Trans>Connect to a wallet to view your V2 liquidity.</Trans>
</ThemedText.Body>
</LightCard>
) : v2IsLoading ? (
<LightCard padding="40px">
<ThemedText.Body color={theme.text3} textAlign="center">
<ThemedText.Body color={theme.deprecated_text3} textAlign="center">
<Dots>
<Trans>Loading</Trans>
</Dots>
......
src/pages/Pool/CTACards.tsx
View file @ d5e4e21a
......@@ -28,15 +28,15 @@ const CTA1 = styled(ExternalLink)`
justify-content: center;
align-items: center;
overflow: hidden;
border: 1px solid ${({ theme }) => theme.bg3};
border: 1px solid ${({ theme }) => theme.deprecated_bg3};
* {
color: ${({ theme }) => theme.text1};
color: ${({ theme }) => theme.deprecated_text1};
text-decoration: none !important;
}
:hover {
border: 1px solid ${({ theme }) => theme.bg4};
border: 1px solid ${({ theme }) => theme.deprecated_bg4};
text-decoration: none;
* {
......@@ -53,15 +53,15 @@ const CTA2 = styled(ExternalLink)`
display: flex;
flex-direction: column;
justify-content: center;
border: 1px solid ${({ theme }) => theme.bg3};
border: 1px solid ${({ theme }) => theme.deprecated_bg3};
* {
color: ${({ theme }) => theme.text1};
color: ${({ theme }) => theme.deprecated_text1};
text-decoration: none !important;
}
:hover {
border: 1px solid ${({ theme }) => theme.bg4};
border: 1px solid ${({ theme }) => theme.deprecated_bg4};
text-decoration: none !important;
* {
text-decoration: none !important;
......
src/pages/Pool/PositionPage.tsx
View file @ d5e4e21a
......@@ -90,7 +90,7 @@ const Label = styled(({ end, ...props }) => <ThemedText.Label {...props} />)<{ e
`
const ExtentsText = styled.span`
color: ${({ theme }) => theme.text2};
color: ${({ theme }) => theme.deprecated_text2};
font-size: 14px;
text-align: center;
margin-right: 4px;
......@@ -99,15 +99,15 @@ const ExtentsText = styled.span`
const HoverText = styled(ThemedText.Main)`
text-decoration: none;
color: ${({ theme }) => theme.text3};
color: ${({ theme }) => theme.deprecated_text3};
:hover {
color: ${({ theme }) => theme.text1};
color: ${({ theme }) => theme.deprecated_text1};
text-decoration: none;
}
`
const DoubleArrow = styled.span`
color: ${({ theme }) => theme.text3};
color: ${({ theme }) => theme.deprecated_text3};
margin: 0 1rem;
`
const ResponsiveRow = styled(RowBetween)`
......@@ -683,7 +683,7 @@ export function PositionPage() {
<Trans>${fiatValueOfLiquidity.toFixed(2, { groupSeparator: ',' })}</Trans>
</ThemedText.LargeHeader>
) : (
<ThemedText.LargeHeader color={theme.text1} fontSize="36px" fontWeight={500}>
<ThemedText.LargeHeader color={theme.deprecated_text1} fontSize="36px" fontWeight={500}>
<Trans>$-</Trans>
</ThemedText.LargeHeader>
)}
......@@ -713,7 +713,7 @@ export function PositionPage() {
</ThemedText.Main>
{typeof ratio === 'number' && !removed ? (
<Badge style={{ marginLeft: '10px' }}>
<ThemedText.Main color={theme.text2} fontSize={11}>
<ThemedText.Main color={theme.deprecated_text2} fontSize={11}>
<Trans>{inverted ? 100 - ratio : ratio}%</Trans>
</ThemedText.Main>
</Badge>
......@@ -733,11 +733,11 @@ export function PositionPage() {
<Trans>Unclaimed fees</Trans>
</Label>
{fiatValueOfFees?.greaterThan(new Fraction(1, 100)) ? (
<ThemedText.LargeHeader color={theme.green1} fontSize="36px" fontWeight={500}>
<ThemedText.LargeHeader color={theme.deprecated_green1} fontSize="36px" fontWeight={500}>
<Trans>${fiatValueOfFees.toFixed(2, { groupSeparator: ',' })}</Trans>
</ThemedText.LargeHeader>
) : (
<ThemedText.LargeHeader color={theme.text1} fontSize="36px" fontWeight={500}>
<ThemedText.LargeHeader color={theme.deprecated_text1} fontSize="36px" fontWeight={500}>
<Trans>$-</Trans>
</ThemedText.LargeHeader>
)}
......@@ -753,11 +753,11 @@ export function PositionPage() {
onClick={() => setShowConfirm(true)}
>
{!!collectMigrationHash && !isCollectPending ? (
<ThemedText.Main color={theme.text1}>
<ThemedText.Main color={theme.deprecated_text1}>
<Trans> Collected</Trans>
</ThemedText.Main>
) : isCollectPending || collecting ? (
<ThemedText.Main color={theme.text1}>
<ThemedText.Main color={theme.deprecated_text1}>
{' '}
<Dots>
<Trans>Collecting</Trans>
......@@ -765,7 +765,7 @@ export function PositionPage() {
</ThemedText.Main>
) : (
<>
<ThemedText.Main color={theme.white}>
<ThemedText.Main color={theme.deprecated_white}>
<Trans>Collect fees</Trans>
</ThemedText.Main>
</>
......@@ -868,7 +868,7 @@ export function PositionPage() {
</ExtentsText>
{inRange && (
<ThemedText.Small color={theme.text3}>
<ThemedText.Small color={theme.deprecated_text3}>
<Trans>Your position will be 100% {currencyBase?.symbol} at this price.</Trans>
</ThemedText.Small>
)}
......@@ -892,7 +892,7 @@ export function PositionPage() {
</ExtentsText>
{inRange && (
<ThemedText.Small color={theme.text3}>
<ThemedText.Small color={theme.deprecated_text3}>
<Trans>Your position will be 100% {currencyQuote?.symbol} at this price.</Trans>
</ThemedText.Small>
)}
......
src/pages/Pool/index.tsx
View file @ d5e4e21a
......@@ -39,7 +39,7 @@ const PageWrapper = styled(AutoColumn)`
`};
`
const TitleRow = styled(RowBetween)`
color: ${({ theme }) => theme.text2};
color: ${({ theme }) => theme.deprecated_text2};
${({ theme }) => theme.mediaWidth.upToSmall`
flex-wrap: wrap;
gap: 12px;
......@@ -82,7 +82,7 @@ const MoreOptionsButton = styled(ButtonGray)`
flex: 1 1 auto;
padding: 6px 8px;
width: 100%;
background-color: ${({ theme }) => theme.bg0};
background-color: ${({ theme }) => theme.deprecated_bg0};
margin-right: 8px;
`
......@@ -126,7 +126,7 @@ const ResponsiveButtonPrimary = styled(ButtonPrimary)`
`
const MainContentWrapper = styled.main`
background-color: ${({ theme }) => theme.bg0};
background-color: ${({ theme }) => theme.deprecated_bg0};
padding: 8px;
border-radius: 20px;
display: flex;
......@@ -168,7 +168,7 @@ function WrongNetworkCard() {
<MainContentWrapper>
<ErrorContainer>
<ThemedText.Body color={theme.text3} textAlign="center">
<ThemedText.Body color={theme.deprecated_text3} textAlign="center">
<NetworkIcon strokeWidth={1.2} />
<div data-testid="pools-unsupported-err">
<Trans>
......@@ -298,7 +298,7 @@ export default function Pool() {
/>
) : (
<ErrorContainer>
<ThemedText.Body color={theme.text3} textAlign="center">
<ThemedText.Body color={theme.deprecated_text3} textAlign="center">
<InboxIcon strokeWidth={1} />
<div>
<Trans>Your active V3 liquidity positions will appear here.</Trans>
......
src/pages/Pool/styleds.tsx
View file @ d5e4e21a
......@@ -11,12 +11,12 @@ export const ClickableText = styled(Text)`
:hover {
cursor: pointer;
}
color: ${({ theme }) => theme.primary1};
color: ${({ theme }) => theme.deprecated_primary1};
`
export const MaxButton = styled.button<{ width: string }>`
padding: 0.5rem 1rem;
background-color: ${({ theme }) => theme.primary5};
border: 1px solid ${({ theme }) => theme.primary5};
background-color: ${({ theme }) => theme.deprecated_primary5};
border: 1px solid ${({ theme }) => theme.deprecated_primary5};
border-radius: 0.5rem;
font-size: 1rem;
${({ theme }) => theme.mediaWidth.upToSmall`
......@@ -26,12 +26,12 @@ export const MaxButton = styled.button<{ width: string }>`
cursor: pointer;
margin: 0.25rem;
overflow: hidden;
color: ${({ theme }) => theme.primary1};
color: ${({ theme }) => theme.deprecated_primary1};
:hover {
border: 1px solid ${({ theme }) => theme.primary1};
border: 1px solid ${({ theme }) => theme.deprecated_primary1};
}
:focus {
border: 1px solid ${({ theme }) => theme.primary1};
border: 1px solid ${({ theme }) => theme.deprecated_primary1};
outline: none;
}
`
......
src/pages/Pool/v2.tsx
View file @ d5e4e21a
......@@ -71,7 +71,7 @@ const ResponsiveButtonSecondary = styled(ButtonSecondary)`
`
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;
......@@ -160,7 +160,7 @@ export default function Pool() {
</ThemedText.White>
</RowBetween>
<ExternalLink
style={{ color: 'white', textDecoration: 'underline' }}
style={{ color: theme.deprecated_white, textDecoration: 'underline' }}
target="_blank"
href="https://uniswap.org/docs/v2/core-concepts/pools/"
>
......@@ -178,7 +178,7 @@ export default function Pool() {
<AutoColumn gap="lg" justify="center">
<AutoColumn gap="md" style={{ width: '100%' }}>
<Layer2Prompt>
<ThemedText.Body color={theme.text3} textAlign="center">
<ThemedText.Body color={theme.deprecated_text3} textAlign="center">
<Trans>V2 Pool is not available on Layer 2. Switch to Layer 1 Ethereum.</Trans>
</ThemedText.Body>
</Layer2Prompt>
......@@ -212,13 +212,13 @@ export default function Pool() {
{!account ? (
<Card padding="40px">
<ThemedText.Body color={theme.text3} textAlign="center">
<ThemedText.Body color={theme.deprecated_text3} textAlign="center">
<Trans>Connect to a wallet to view your liquidity.</Trans>
</ThemedText.Body>
</Card>
) : v2IsLoading ? (
<EmptyProposals>
<ThemedText.Body color={theme.text3} textAlign="center">
<ThemedText.Body color={theme.deprecated_text3} textAlign="center">
<Dots>
<Trans>Loading</Trans>
</Dots>
......@@ -269,7 +269,7 @@ export default function Pool() {
</>
) : (
<EmptyProposals>
<ThemedText.Body color={theme.text3} textAlign="center">
<ThemedText.Body color={theme.deprecated_text3} textAlign="center">
<Trans>No liquidity found.</Trans>
</ThemedText.Body>
</EmptyProposals>
......
src/pages/PoolFinder/index.tsx
View file @ d5e4e21a
......@@ -104,7 +104,7 @@ export default function PoolFinder() {
<AutoColumn style={{ padding: '1rem' }} gap="md">
<BlueCard>
<AutoColumn gap="10px">
<ThemedText.Link fontWeight={400} color={'primaryText1'}>
<ThemedText.Link fontWeight={400} color={'deprecated_primaryText1'}>
<Trans>
<b>Tip:</b> Use this tool to find v2 pools that don&apos;t automatically appear in the interface.
</Trans>
......
src/pages/RemoveLiquidity/V3.tsx
View file @ d5e4e21a
......@@ -227,7 +227,7 @@ function Remove({ tokenId }: { tokenId: BigNumber }) {
</RowBetween>
{feeValue0?.greaterThan(0) || feeValue1?.greaterThan(0) ? (
<>
<ThemedText.Italic fontSize={12} color={theme.text2} textAlign="left" padding={'8px 0 0 0'}>
<ThemedText.Italic fontSize={12} color={theme.deprecated_text2} textAlign="left" padding={'8px 0 0 0'}>
<Trans>You will also collect fees earned from this position.</Trans>
</ThemedText.Italic>
<RowBetween>
......
src/pages/RemoveLiquidity/index.tsx
View file @ d5e4e21a
......@@ -303,7 +303,7 @@ export default function RemoveLiquidity() {
</RowFixed>
</RowBetween>
<RowFixed>
<Plus size="16" color={theme.text2} />
<Plus size="16" color={theme.deprecated_text2} />
</RowFixed>
<RowBetween align="flex-end">
<Text fontSize={24} fontWeight={500}>
......@@ -317,7 +317,7 @@ export default function RemoveLiquidity() {
</RowFixed>
</RowBetween>
<ThemedText.Italic fontSize={12} color={theme.text2} textAlign="left" padding={'12px 0 0 0'}>
<ThemedText.Italic fontSize={12} color={theme.deprecated_text2} textAlign="left" padding={'12px 0 0 0'}>
<Trans>
Output is estimated. If the price changes by more than {allowedSlippage.toSignificant(4)}% your transaction
will revert.
......@@ -331,7 +331,7 @@ export default function RemoveLiquidity() {
return (
<>
<RowBetween>
<Text color={theme.text2} fontWeight={500} fontSize={16}>
<Text color={theme.deprecated_text2} fontWeight={500} fontSize={16}>
<Trans>
UNI {currencyA?.symbol}/{currencyB?.symbol} Burned
</Trans>
......@@ -346,16 +346,16 @@ export default function RemoveLiquidity() {
{pair && (
<>
<RowBetween>
<Text color={theme.text2} fontWeight={500} fontSize={16}>
<Text color={theme.deprecated_text2} fontWeight={500} fontSize={16}>
<Trans>Price</Trans>
</Text>
<Text fontWeight={500} fontSize={16} color={theme.text1}>
<Text fontWeight={500} fontSize={16} color={theme.deprecated_text1}>
1 {currencyA?.symbol} = {tokenA ? pair.priceOf(tokenA).toSignificant(6) : '-'} {currencyB?.symbol}
</Text>
</RowBetween>
<RowBetween>
<div />
<Text fontWeight={500} fontSize={16} color={theme.text1}>
<Text fontWeight={500} fontSize={16} color={theme.deprecated_text1}>
1 {currencyB?.symbol} = {tokenB ? pair.priceOf(tokenB).toSignificant(6) : '-'} {currencyA?.symbol}
</Text>
</RowBetween>
......@@ -451,7 +451,7 @@ export default function RemoveLiquidity() {
<AutoColumn gap="md">
<BlueCard>
<AutoColumn gap="10px">
<ThemedText.Link fontWeight={400} color={'primaryText1'}>
<ThemedText.Link fontWeight={400} color={'deprecated_primaryText1'}>
<Trans>
<b>Tip:</b> Removing pool tokens converts your position back into underlying tokens at the current
rate, proportional to your share of the pool. Accrued fees are included in the amounts you receive.
......@@ -503,7 +503,7 @@ export default function RemoveLiquidity() {
{!showDetailed && (
<>
<ColumnCenter>
<ArrowDown size="16" color={theme.text2} />
<ArrowDown size="16" color={theme.deprecated_text2} />
</ColumnCenter>
<LightCard>
<AutoColumn gap="10px">
......@@ -577,7 +577,7 @@ export default function RemoveLiquidity() {
id="liquidity-amount"
/>
<ColumnCenter>
<ArrowDown size="16" color={theme.text2} />
<ArrowDown size="16" color={theme.deprecated_text2} />
</ColumnCenter>
<CurrencyInputPanel
hideBalance={true}
......@@ -591,7 +591,7 @@ export default function RemoveLiquidity() {
id="remove-liquidity-tokena"
/>
<ColumnCenter>
<Plus size="16" color={theme.text2} />
<Plus size="16" color={theme.deprecated_text2} />
</ColumnCenter>
<CurrencyInputPanel
hideBalance={true}
......
src/pages/Swap/index.tsx
View file @ d5e4e21a
......@@ -468,7 +468,11 @@ export default function Swap() {
setApprovalSubmitted(false) // reset 2 step UI for approvals
onSwitchTokens()
}}
color={currencies[Field.INPUT] && currencies[Field.OUTPUT] ? theme.text1 : theme.text3}
color={
currencies[Field.INPUT] && currencies[Field.OUTPUT]
? theme.deprecated_text1
: theme.deprecated_text3
}
/>
</ArrowWrapper>
<Trace section={SectionName.CURRENCY_OUTPUT_PANEL}>
......@@ -496,7 +500,7 @@ export default function Swap() {
<>
<AutoRow justify="space-between" style={{ padding: '0 1rem' }}>
<ArrowWrapper clickable={false}>
<ArrowDown size="16" color={theme.text2} />
<ArrowDown size="16" color={theme.deprecated_text2} />
</ArrowWrapper>
<LinkStyledButton id="remove-recipient-button" onClick={() => onChangeRecipient(null)}>
<Trans>- Remove recipient</Trans>
......@@ -584,7 +588,7 @@ export default function Swap() {
<Loader stroke="white" />
) : (approvalSubmitted && approvalState === ApprovalState.APPROVED) ||
signatureState === UseERC20PermitState.SIGNED ? (
<CheckCircle size="20" color={theme.green1} />
<CheckCircle size="20" color={theme.deprecated_green1} />
) : (
<MouseoverTooltip
text={
......@@ -594,7 +598,7 @@ export default function Swap() {
</Trans>
}
>
<HelpCircle size="20" color={'white'} style={{ marginLeft: '8px' }} />
<HelpCircle size="20" color={'deprecated_white'} style={{ marginLeft: '8px' }} />
</MouseoverTooltip>
)}
</AutoRow>
......
src/pages/Vote/Landing.tsx
View file @ d5e4e21a
......@@ -13,6 +13,7 @@ import { SwitchLocaleLink } from 'components/SwitchLocaleLink'
import Toggle from 'components/Toggle'
import DelegateModal from 'components/vote/DelegateModal'
import ProposalEmptyState from 'components/vote/ProposalEmptyState'
import useTheme from 'hooks/useTheme'
import JSBI from 'jsbi'
import { darken } from 'polished'
import { useState } from 'react'
......@@ -50,14 +51,14 @@ const Proposal = styled(Button)`
text-align: left;
outline: none;
cursor: pointer;
color: ${({ theme }) => theme.text1};
color: ${({ theme }) => theme.deprecated_text1};
text-decoration: none;
background-color: ${({ theme }) => theme.bg1};
background-color: ${({ theme }) => theme.deprecated_bg1};
&:focus {
background-color: ${({ theme }) => darken(0.05, theme.bg1)};
background-color: ${({ theme }) => darken(0.05, theme.deprecated_bg1)};
}
&:hover {
background-color: ${({ theme }) => darken(0.05, theme.bg1)};
background-color: ${({ theme }) => darken(0.05, theme.deprecated_bg1)};
}
`
......@@ -88,7 +89,7 @@ const WrapSmall = styled(RowBetween)`
`
const TextButton = styled(ThemedText.Main)`
color: ${({ theme }) => theme.primary1};
color: ${({ theme }) => theme.deprecated_primary1};
:hover {
cursor: pointer;
text-decoration: underline;
......@@ -96,7 +97,7 @@ const TextButton = styled(ThemedText.Main)`
`
const AddressButton = styled.div`
border: 1px solid ${({ theme }) => theme.bg3};
border: 1px solid ${({ theme }) => theme.deprecated_bg3};
padding: 2px 4px;
border-radius: 8px;
display: flex;
......@@ -105,10 +106,11 @@ const AddressButton = styled.div`
`
const StyledExternalLink = styled(ExternalLink)`
color: ${({ theme }) => theme.text1};
color: ${({ theme }) => theme.deprecated_text1};
`
export default function Landing() {
const theme = useTheme()
const { account, chainId } = useWeb3React()
const [hideCancelled, setHideCancelled] = useState(true)
......@@ -161,7 +163,10 @@ export default function Landing() {
</ThemedText.White>
</RowBetween>
<ExternalLink
style={{ color: 'white', textDecoration: 'underline' }}
style={{
color: theme.deprecated_white,
textDecoration: 'underline',
}}
href="https://uniswap.org/blog/uni"
target="_blank"
>
......
src/pages/Vote/VotePage.tsx
View file @ d5e4e21a
......@@ -60,7 +60,7 @@ const PageWrapper = styled(AutoColumn)`
`
const ProposalInfo = styled(AutoColumn)`
background: ${({ theme }) => theme.bg0};
background: ${({ theme }) => theme.deprecated_bg0};
border-radius: 12px;
padding: 1.5rem;
position: relative;
......@@ -73,10 +73,10 @@ const ArrowWrapper = styled(StyledInternalLink)`
align-items: center;
gap: 8px;
height: 24px;
color: ${({ theme }) => theme.text1};
color: ${({ theme }) => theme.deprecated_text1};
a {
color: ${({ theme }) => theme.text1};
color: ${({ theme }) => theme.deprecated_text1};
text-decoration: none;
}
:hover {
......@@ -93,7 +93,7 @@ const CardWrapper = styled.div`
const StyledDataCard = styled(DataCard)`
width: 100%;
background: none;
background-color: ${({ theme }) => theme.bg1};
background-color: ${({ theme }) => theme.deprecated_bg1};
height: fit-content;
z-index: 2;
`
......@@ -103,14 +103,14 @@ const ProgressWrapper = styled.div`
margin-top: 1rem;
height: 4px;
border-radius: 4px;
background-color: ${({ theme }) => theme.bg3};
background-color: ${({ theme }) => theme.deprecated_bg3};
position: relative;
`
const Progress = styled.div<{ status: 'for' | 'against'; percentageString?: string }>`
height: 4px;
border-radius: 4px;
background-color: ${({ theme, status }) => (status === 'for' ? theme.green1 : theme.red1)};
background-color: ${({ theme, status }) => (status === 'for' ? theme.deprecated_green1 : theme.deprecated_red1)};
width: ${({ percentageString }) => percentageString ?? '0%'};
`
......
src/pages/Vote/styled.tsx
View file @ d5e4e21a
......@@ -7,17 +7,17 @@ const handleColorType = (status: ProposalState, theme: DefaultTheme) => {
switch (status) {
case ProposalState.PENDING:
case ProposalState.ACTIVE:
return theme.blue1
return theme.deprecated_blue1
case ProposalState.SUCCEEDED:
case ProposalState.EXECUTED:
return theme.green1
return theme.deprecated_green1
case ProposalState.DEFEATED:
return theme.red1
return theme.deprecated_red1
case ProposalState.QUEUED:
case ProposalState.CANCELED:
case ProposalState.EXPIRED:
default:
return theme.text3
return theme.deprecated_text3
}
}
......
src/theme/components.tsx
View file @ d5e4e21a
......@@ -38,7 +38,7 @@ export const IconWrapper = styled.div<{ stroke?: string; size?: string; marginRi
margin-right: ${({ marginRight }) => marginRight ?? 0};
margin-left: ${({ marginLeft }) => marginLeft ?? 0};
& > * {
stroke: ${({ theme, stroke }) => stroke ?? theme.blue1};
stroke: ${({ theme, stroke }) => stroke ?? theme.deprecated_blue1};
}
`
......@@ -49,7 +49,7 @@ export const LinkStyledButton = styled.button<{ disabled?: boolean }>`
background: none;
cursor: ${({ disabled }) => (disabled ? 'default' : 'pointer')};
color: ${({ theme, disabled }) => (disabled ? theme.text2 : theme.primary1)};
color: ${({ theme, disabled }) => (disabled ? theme.deprecated_text2 : theme.deprecated_primary1)};
font-weight: 500;
:hover {
......@@ -70,7 +70,7 @@ export const LinkStyledButton = styled.button<{ disabled?: boolean }>`
export const StyledInternalLink = styled(Link)`
text-decoration: none;
cursor: pointer;
color: ${({ theme }) => theme.primary1};
color: ${({ theme }) => theme.deprecated_primary1};
font-weight: 500;
:hover {
......@@ -90,7 +90,7 @@ export const StyledInternalLink = styled(Link)`
const StyledLink = styled.a`
text-decoration: none;
cursor: pointer;
color: ${({ theme }) => theme.primary1};
color: ${({ theme }) => theme.deprecated_primary1};
font-weight: 500;
:hover {
......@@ -133,14 +133,14 @@ const LinkIcon = styled(LinkIconFeather)`
height: 16px;
width: 18px;
margin-left: 10px;
stroke: ${({ theme }) => theme.blue1};
stroke: ${({ theme }) => theme.deprecated_blue1};
`
export const TrashIcon = styled(Trash)`
height: 16px;
width: 18px;
margin-left: 10px;
stroke: ${({ theme }) => theme.text3};
stroke: ${({ theme }) => theme.deprecated_text3};
cursor: pointer;
align-items: center;
......@@ -228,7 +228,7 @@ const Spinner = styled.img`
`
const BackArrowLink = styled(StyledInternalLink)`
color: ${({ theme }) => theme.text1};
color: ${({ theme }) => theme.deprecated_text1};
`
export function BackArrow({ to }: { to: string }) {
return (
......@@ -265,5 +265,5 @@ export const SmallOnly = styled.span`
export const Separator = styled.div`
width: 100%;
height: 1px;
background-color: ${({ theme }) => theme.bg2};
background-color: ${({ theme }) => theme.deprecated_bg2};
`
src/theme/index.tsx
View file @ d5e4e21a
......@@ -48,67 +48,67 @@ const mediaWidthTemplates: { [width in keyof typeof MEDIA_WIDTHS]: typeof css }
{}
) as any
const white = '#FFFFFF'
const black = '#000000'
const deprecated_white = '#FFFFFF'
const deprecated_black = '#000000'
function colors(darkMode: boolean): Colors {
return {
darkMode,
// base
white,
black,
deprecated_white,
deprecated_black,
// text
text1: darkMode ? '#FFFFFF' : '#000000',
text2: darkMode ? '#C3C5CB' : '#565A69',
text3: darkMode ? '#8F96AC' : '#6E727D',
text4: darkMode ? '#B2B9D2' : '#C3C5CB',
text5: darkMode ? '#2C2F36' : '#EDEEF2',
deprecated_text1: darkMode ? '#FFFFFF' : '#000000',
deprecated_text2: darkMode ? '#C3C5CB' : '#565A69',
deprecated_text3: darkMode ? '#8F96AC' : '#6E727D',
deprecated_text4: darkMode ? '#B2B9D2' : '#C3C5CB',
deprecated_text5: darkMode ? '#2C2F36' : '#EDEEF2',
// backgrounds / greys
bg0: darkMode ? '#191B1F' : '#FFF',
bg1: darkMode ? '#212429' : '#F7F8FA',
bg2: darkMode ? '#2C2F36' : '#EDEEF2',
bg3: darkMode ? '#40444F' : '#CED0D9',
bg4: darkMode ? '#565A69' : '#888D9B',
bg5: darkMode ? '#6C7284' : '#888D9B',
bg6: darkMode ? '#1A2028' : '#6C7284',
deprecated_bg0: darkMode ? '#191B1F' : '#FFF',
deprecated_bg1: darkMode ? '#212429' : '#F7F8FA',
deprecated_bg2: darkMode ? '#2C2F36' : '#EDEEF2',
deprecated_bg3: darkMode ? '#40444F' : '#CED0D9',
deprecated_bg4: darkMode ? '#565A69' : '#888D9B',
deprecated_bg5: darkMode ? '#6C7284' : '#888D9B',
deprecated_bg6: darkMode ? '#1A2028' : '#6C7284',
//specialty colors
modalBG: darkMode ? 'rgba(0,0,0,.425)' : 'rgba(0,0,0,0.3)',
advancedBG: darkMode ? 'rgba(0,0,0,0.1)' : 'rgba(255,255,255,0.6)',
deprecated_modalBG: darkMode ? 'rgba(0,0,0,.425)' : 'rgba(0,0,0,0.3)',
deprecated_advancedBG: darkMode ? 'rgba(0,0,0,0.1)' : 'rgba(255,255,255,0.6)',
//primary colors
primary1: darkMode ? '#2172E5' : '#E8006F',
primary2: darkMode ? '#3680E7' : '#FF8CC3',
primary3: darkMode ? '#4D8FEA' : '#FF99C9',
primary4: darkMode ? '#376bad70' : '#F6DDE8',
primary5: darkMode ? '#153d6f70' : '#FDEAF1',
deprecated_primary1: darkMode ? '#2172E5' : '#E8006F',
deprecated_primary2: darkMode ? '#3680E7' : '#FF8CC3',
deprecated_primary3: darkMode ? '#4D8FEA' : '#FF99C9',
deprecated_primary4: darkMode ? '#376bad70' : '#F6DDE8',
deprecated_primary5: darkMode ? '#153d6f70' : '#FDEAF1',
// color text
primaryText1: darkMode ? '#5090ea' : '#D50066',
deprecated_primaryText1: darkMode ? '#5090ea' : '#D50066',
// secondary colors
secondary1: darkMode ? '#2172E5' : '#E8006F',
secondary2: darkMode ? '#17000b26' : '#F6DDE8',
secondary3: darkMode ? '#17000b26' : '#FDEAF1',
deprecated_secondary1: darkMode ? '#2172E5' : '#E8006F',
deprecated_secondary2: darkMode ? '#17000b26' : '#F6DDE8',
deprecated_secondary3: darkMode ? '#17000b26' : '#FDEAF1',
// other
red1: darkMode ? '#FF4343' : '#DA2D2B',
red2: darkMode ? '#F82D3A' : '#DF1F38',
red3: '#D60000',
green1: darkMode ? '#27AE60' : '#007D35',
yellow1: '#E3A507',
yellow2: '#FF8F00',
yellow3: '#F3B71E',
blue1: darkMode ? '#2172E5' : '#0068FC',
blue2: darkMode ? '#5199FF' : '#0068FC',
error: darkMode ? '#FD4040' : '#DF1F38',
success: darkMode ? '#27AE60' : '#007D35',
warning: '#FF8F00',
deprecated_red1: darkMode ? '#FF4343' : '#DA2D2B',
deprecated_red2: darkMode ? '#F82D3A' : '#DF1F38',
deprecated_red3: '#D60000',
deprecated_green1: darkMode ? '#27AE60' : '#007D35',
deprecated_yellow1: '#E3A507',
deprecated_yellow2: '#FF8F00',
deprecated_yellow3: '#F3B71E',
deprecated_blue1: darkMode ? '#2172E5' : '#0068FC',
deprecated_blue2: darkMode ? '#5199FF' : '#0068FC',
deprecated_error: darkMode ? '#FD4040' : '#DF1F38',
deprecated_success: darkMode ? '#27AE60' : '#007D35',
deprecated_warning: '#FF8F00',
// dont wanna forget these blue yet
blue4: darkMode ? '#153d6f70' : '#C4D9F8',
deprecated_blue4: darkMode ? '#153d6f70' : '#C4D9F8',
// blue5: darkMode ? '#153d6f70' : '#EBF4FF',
}
}
......@@ -158,22 +158,22 @@ const TextWrapper = styled(Text)<{ color: keyof Colors }>`
*/
export const ThemedText = {
Main(props: TextProps) {
return <TextWrapper fontWeight={500} color={'text2'} {...props} />
return <TextWrapper fontWeight={500} color={'deprecated_text2'} {...props} />
},
Link(props: TextProps) {
return <TextWrapper fontWeight={500} color={'primary1'} {...props} />
return <TextWrapper fontWeight={500} color={'deprecated_primary1'} {...props} />
},
Label(props: TextProps) {
return <TextWrapper fontWeight={600} color={'text1'} {...props} />
return <TextWrapper fontWeight={600} color={'deprecated_text1'} {...props} />
},
Black(props: TextProps) {
return <TextWrapper fontWeight={500} color={'text1'} {...props} />
return <TextWrapper fontWeight={500} color={'deprecated_text1'} {...props} />
},
White(props: TextProps) {
return <TextWrapper fontWeight={500} color={'white'} {...props} />
return <TextWrapper fontWeight={500} color={'deprecated_white'} {...props} />
},
Body(props: TextProps) {
return <TextWrapper fontWeight={400} fontSize={16} color={'text1'} {...props} />
return <TextWrapper fontWeight={400} fontSize={16} color={'deprecated_text1'} {...props} />
},
LargeHeader(props: TextProps) {
return <TextWrapper fontWeight={600} fontSize={24} {...props} />
......@@ -188,32 +188,32 @@ export const ThemedText = {
return <TextWrapper fontWeight={500} fontSize={11} {...props} />
},
Blue(props: TextProps) {
return <TextWrapper fontWeight={500} color={'blue1'} {...props} />
return <TextWrapper fontWeight={500} color={'deprecated_blue1'} {...props} />
},
Yellow(props: TextProps) {
return <TextWrapper fontWeight={500} color={'yellow3'} {...props} />
return <TextWrapper fontWeight={500} color={'deprecated_yellow3'} {...props} />
},
DarkGray(props: TextProps) {
return <TextWrapper fontWeight={500} color={'text3'} {...props} />
return <TextWrapper fontWeight={500} color={'deprecated_text3'} {...props} />
},
Gray(props: TextProps) {
return <TextWrapper fontWeight={500} color={'bg3'} {...props} />
return <TextWrapper fontWeight={500} color={'deprecated_bg3'} {...props} />
},
Italic(props: TextProps) {
return <TextWrapper fontWeight={500} fontSize={12} fontStyle={'italic'} color={'text2'} {...props} />
return <TextWrapper fontWeight={500} fontSize={12} fontStyle={'italic'} color={'deprecated_text2'} {...props} />
},
Error({ error, ...props }: { error: boolean } & TextProps) {
return <TextWrapper fontWeight={500} color={error ? 'red1' : 'text2'} {...props} />
return <TextWrapper fontWeight={500} color={error ? 'deprecated_red1' : 'deprecated_text2'} {...props} />
},
}
export const ThemedGlobalStyle = createGlobalStyle`
html {
color: ${({ theme }) => theme.text1};
background-color: ${({ theme }) => theme.bg1} !important;
color: ${({ theme }) => theme.deprecated_text1};
background-color: ${({ theme }) => theme.deprecated_bg1} !important;
}
a {
color: ${({ theme }) => theme.blue1};
color: ${({ theme }) => theme.deprecated_blue1};
}
`
src/theme/styled.d.ts
View file @ d5e4e21a
......@@ -5,58 +5,58 @@ export interface Colors {
darkMode: boolean
// base
white: Color
black: Color
deprecated_white: Color
deprecated_black: Color
// text
text1: Color
text2: Color
text3: Color
text4: Color
text5: Color
deprecated_text1: Color
deprecated_text2: Color
deprecated_text3: Color
deprecated_text4: Color
deprecated_text5: Color
// backgrounds / greys
bg0: Color
bg1: Color
bg2: Color
bg3: Color
bg4: Color
bg5: Color
bg6: Color
deprecated_bg0: Color
deprecated_bg1: Color
deprecated_bg2: Color
deprecated_bg3: Color
deprecated_bg4: Color
deprecated_bg5: Color
deprecated_bg6: Color
modalBG: Color
advancedBG: Color
deprecated_modalBG: Color
deprecated_advancedBG: Color
//blues
primary1: Color
primary2: Color
primary3: Color
primary4: Color
primary5: Color
deprecated_primary1: Color
deprecated_primary2: Color
deprecated_primary3: Color
deprecated_primary4: Color
deprecated_primary5: Color
primaryText1: Color
deprecated_primaryText1: Color
// pinks
secondary1: Color
secondary2: Color
secondary3: Color
deprecated_secondary1: Color
deprecated_secondary2: Color
deprecated_secondary3: Color
// other
red1: Color
red2: Color
red3: Color
green1: Color
yellow1: Color
yellow2: Color
yellow3: Color
blue1: Color
blue2: Color
deprecated_red1: Color
deprecated_red2: Color
deprecated_red3: Color
deprecated_green1: Color
deprecated_yellow1: Color
deprecated_yellow2: Color
deprecated_yellow3: Color
deprecated_blue1: Color
deprecated_blue2: Color
blue4: Color
deprecated_blue4: Color
error: Color
success: Color
warning: Color
deprecated_error: Color
deprecated_success: Color
deprecated_warning: Color
}
declare module 'styled-components/macro' {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment