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

chore: update nft grays (#5124)

Browse Source 
* chore: update nft grays

* forgot to change some out

* prettier

* add 700
This commit is contained in:
vignesh mohankumar 2022-11-08 16:15:05 -05:00 committed by GitHub
parent eb35d3a2a0
commit d951172a81
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
24 changed files with 153 additions and 143 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

175
public/index.html
View File

@ -1,119 +1,120 @@
<!DOCTYPE html> <!DOCTYPE html>
<html translate="no"> <html translate="no">
<head>
<meta charset="utf-8" />
<head> <title>Uniswap Interface</title>
<meta charset="utf-8" /> <meta name="description" content="Swap or provide liquidity on the Uniswap Protocol" />
<title>Uniswap Interface</title> <!--
<meta name="description" content="Swap or provide liquidity on the Uniswap Protocol" />
<!--
%PUBLIC_URL% will be replaced with the URL of the `public` folder during build. %PUBLIC_URL% will be replaced with the URL of the `public` folder during build.
Only files inside the `public` folder can be referenced from the HTML. Only files inside the `public` folder can be referenced from the HTML.
--> -->
<link rel="shortcut icon" type="image/png" href="%PUBLIC_URL%/favicon.png" /> <link rel="shortcut icon" type="image/png" href="%PUBLIC_URL%/favicon.png" />
<link rel="apple-touch-icon" sizes="192x192" href="%PUBLIC_URL%/images/192x192_App_Icon.png" /> <link rel="apple-touch-icon" sizes="192x192" href="%PUBLIC_URL%/images/192x192_App_Icon.png" />
<link rel="apple-touch-icon" sizes="512x512" href="%PUBLIC_URL%/images/512x512_App_Icon.png" /> <link rel="apple-touch-icon" sizes="512x512" href="%PUBLIC_URL%/images/512x512_App_Icon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="theme-color" content="#FC72FF" /> <meta name="theme-color" content="#FC72FF" />
<meta http-equiv="Content-Security-Policy" content="script-src 'self' https://www.google-analytics.com https://www.googletagmanager.com 'unsafe-inline'" /> <meta
http-equiv="Content-Security-Policy"
content="script-src 'self' https://www.google-analytics.com https://www.googletagmanager.com 'unsafe-inline'"
/>
<!-- <!--
manifest.json provides metadata used when the app is installed as a PWA. manifest.json provides metadata used when the app is installed as a PWA.
See https://developers.google.com/web/fundamentals/web-app-manifest/ See https://developers.google.com/web/fundamentals/web-app-manifest/
--> -->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<link rel="preconnect" href="https://www.google-analytics.com/" /> <link rel="preconnect" href="https://www.google-analytics.com/" />
<link rel="preload" href="%PUBLIC_URL%/fonts/Inter-roman.var.woff2" as="font" type="font/woff2" crossorigin /> <link rel="preload" href="%PUBLIC_URL%/fonts/Inter-roman.var.woff2" as="font" type="font/woff2" crossorigin />
<style> <style>
* { * {
font-family: 'Inter', sans-serif; font-family: 'Inter', sans-serif;
box-sizing: border-box; box-sizing: border-box;
} }
/** /**
Explicitly load Inter var from public/ so it does not block LCP's critical path. Explicitly load Inter var from public/ so it does not block LCP's critical path.
*/ */
@font-face { @font-face {
font-family: 'Inter custom'; font-family: 'Inter custom';
font-weight: 100 900; font-weight: 100 900;
font-style: normal; font-style: normal;
font-display: block; font-display: block;
font-named-instance: 'Regular'; font-named-instance: 'Regular';
src: url(%PUBLIC_URL%/fonts/Inter-roman.var.woff2) format('woff2 supports variations(gvar)'), src: url(%PUBLIC_URL%/fonts/Inter-roman.var.woff2) format('woff2 supports variations(gvar)'),
url(%PUBLIC_URL%/fonts/Inter-roman.var.woff2) format('woff2-variations'), url(%PUBLIC_URL%/fonts/Inter-roman.var.woff2) format('woff2-variations'),
url(%PUBLIC_URL%/fonts/Inter-roman.var.woff2) format('woff2'); url(%PUBLIC_URL%/fonts/Inter-roman.var.woff2) format('woff2');
}
@supports (font-variation-settings: normal) {
* {
font-family: 'Inter custom', sans-serif;
} }
}
html, @supports (font-variation-settings: normal) {
body { * {
margin: 0; font-family: 'Inter custom', sans-serif;
padding: 0; }
} }
button { html,
user-select: none; body {
} margin: 0;
padding: 0;
}
html { button {
font-size: 16px; user-select: none;
font-variant: none; }
font-smooth: always;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
#background-radial-gradient {
background: linear-gradient(180deg, #202738 0%, #070816 100%);
position: fixed;
top: 0;
left: 0;
right: 0;
pointer-events: none;
width: 200vw;
height: 200vh;
transform: translate(-50vw, -100vh);
z-index: -1;
}
html {
min-height: 100%;
}
@media (prefers-color-scheme: dark) {
html { html {
background-color: #212429; font-size: 16px;
font-variant: none;
font-smooth: always;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
#background-radial-gradient {
background: linear-gradient(180deg, #202738 0%, #070816 100%);
position: fixed;
top: 0;
left: 0;
right: 0;
pointer-events: none;
width: 200vw;
height: 200vh;
transform: translate(-50vw, -100vh);
z-index: -1;
} }
}
@media (prefers-color-scheme: light) {
html { html {
background-color: #f7f8fa; min-height: 100%;
} }
}
</style>
</head>
<body> @media (prefers-color-scheme: dark) {
<noscript>You need to enable JavaScript to run this app.</noscript> html {
background-color: #212429;
}
}
<div id="root"> @media (prefers-color-scheme: light) {
<!-- Triggers the font to load immediately and then is replaced by the app --> html {
<div>&emsp;</div> background-color: #f7f8fa;
</div> }
}
</style>
</head>
<div id="background-radial-gradient"></div> <body>
</body> <noscript>You need to enable JavaScript to run this app.</noscript>
</html> <div id="root">
<!-- Triggers the font to load immediately and then is replaced by the app -->
<div>&emsp;</div>
</div>
<div id="background-radial-gradient"></div>
</body>
</html>

2
public/manifest.json
View File

@ -27,4 +27,4 @@
"short_name": "Uniswap", "short_name": "Uniswap",
"start_url": ".", "start_url": ".",
"theme_color": "#FC72FFs" "theme_color": "#FC72FFs"
} }

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

@ -14,15 +14,15 @@ export const LightCard = styled(Card)`
background-color: ${({ theme }) => theme.deprecated_bg1}; background-color: ${({ theme }) => theme.deprecated_bg1};
` `
export const LightGreyCard = styled(Card)` export const LightGrayCard = styled(Card)`
background-color: ${({ theme }) => theme.deprecated_bg2}; background-color: ${({ theme }) => theme.deprecated_bg2};
` `
export const GreyCard = styled(Card)` export const GrayCard = styled(Card)`
background-color: ${({ theme }) => theme.deprecated_bg3}; background-color: ${({ theme }) => theme.deprecated_bg3};
` `
export const DarkGreyCard = styled(Card)` export const DarkGrayCard = styled(Card)`
background-color: ${({ theme }) => theme.deprecated_bg2}; background-color: ${({ theme }) => theme.deprecated_bg2};
` `

2
src/components/NavBar/SearchBarDropdown.tsx
View File

@ -47,7 +47,7 @@ export const SearchBarDropdownSection = ({
}: SearchBarDropdownSectionProps) => { }: SearchBarDropdownSectionProps) => {
return ( return (
<Column gap="12"> <Column gap="12">
<Row paddingX="16" paddingY="4" gap="8" color="grey300" className={subheadSmall} style={{ lineHeight: '20px' }}> <Row paddingX="16" paddingY="4" gap="8" color="gray300" className={subheadSmall} style={{ lineHeight: '20px' }}>
{headerIcon ? headerIcon : null} {headerIcon ? headerIcon : null}
<Box>{header}</Box> <Box>{header}</Box>
</Row> </Row>

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

@ -18,7 +18,7 @@ import { ExternalLink, ThemedText } from '../../theme'
import { currencyId } from '../../utils/currencyId' import { currencyId } from '../../utils/currencyId'
import { unwrappedToken } from '../../utils/unwrappedToken' import { unwrappedToken } from '../../utils/unwrappedToken'
import { ButtonEmpty, ButtonPrimary, ButtonSecondary } from '../Button' import { ButtonEmpty, ButtonPrimary, ButtonSecondary } from '../Button'
import { GreyCard, LightCard } from '../Card' import { GrayCard, LightCard } from '../Card'
import { AutoColumn } from '../Column' import { AutoColumn } from '../Column'
import CurrencyLogo from '../CurrencyLogo' import CurrencyLogo from '../CurrencyLogo'
import DoubleCurrencyLogo from '../DoubleLogo' import DoubleCurrencyLogo from '../DoubleLogo'
@ -78,7 +78,7 @@ export function MinimalPositionCard({ pair, showUnwrapped = false, border }: Pos
return ( return (
<> <>
{userPoolBalance && JSBI.greaterThan(userPoolBalance.quotient, JSBI.BigInt(0)) ? ( {userPoolBalance && JSBI.greaterThan(userPoolBalance.quotient, JSBI.BigInt(0)) ? (
<GreyCard border={border}> <GrayCard border={border}>
<AutoColumn gap="12px"> <AutoColumn gap="12px">
<FixedHeightRow> <FixedHeightRow>
<RowFixed> <RowFixed>
@ -139,7 +139,7 @@ export function MinimalPositionCard({ pair, showUnwrapped = false, border }: Pos
</FixedHeightRow> </FixedHeightRow>
</AutoColumn> </AutoColumn>
</AutoColumn> </AutoColumn>
</GreyCard> </GrayCard>
) : ( ) : (
<LightCard> <LightCard>
<ThemedText.DeprecatedSubHeader style={{ textAlign: 'center' }}> <ThemedText.DeprecatedSubHeader style={{ textAlign: 'center' }}>

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

@ -1,6 +1,6 @@
import { Trans } from '@lingui/macro' import { Trans } from '@lingui/macro'
import { sendEvent } from 'components/analytics' import { sendEvent } from 'components/analytics'
import Card, { DarkGreyCard } from 'components/Card' import Card, { DarkGrayCard } from 'components/Card'
import Row, { AutoRow, RowBetween } from 'components/Row' import Row, { AutoRow, RowBetween } from 'components/Row'
import { useEffect, useRef } from 'react' import { useEffect, useRef } from 'react'
import { ArrowDown, Info, X } from 'react-feather' import { ArrowDown, Info, X } from 'react-feather'
@ -155,7 +155,7 @@ export function PrivacyPolicy() {
</ThemedText.DeprecatedMain> </ThemedText.DeprecatedMain>
<AutoColumn gap="12px"> <AutoColumn gap="12px">
{EXTERNAL_APIS.map(({ name, description }, i) => ( {EXTERNAL_APIS.map(({ name, description }, i) => (
<DarkGreyCard key={i}> <DarkGrayCard key={i}>
<AutoColumn gap="8px"> <AutoColumn gap="8px">
<AutoRow gap="4px"> <AutoRow gap="4px">
<Info size={18} /> <Info size={18} />
@ -165,7 +165,7 @@ export function PrivacyPolicy() {
</AutoRow> </AutoRow>
<ThemedText.DeprecatedMain fontSize={14}>{description}</ThemedText.DeprecatedMain> <ThemedText.DeprecatedMain fontSize={14}>{description}</ThemedText.DeprecatedMain>
</AutoColumn> </AutoColumn>
</DarkGreyCard> </DarkGrayCard>
))} ))}
<ThemedText.DeprecatedBody fontSize={12}> <ThemedText.DeprecatedBody fontSize={12}>
<Row justify="center" marginBottom="1rem"> <Row justify="center" marginBottom="1rem">

2
src/nft/components/bag/BagRow.tsx
View File

@ -40,7 +40,7 @@ const NoContentContainer = () => (
left="1/2" left="1/2"
top="1/2" top="1/2"
style={{ transform: 'translate3d(-50%, -50%, 0)' }} style={{ transform: 'translate3d(-50%, -50%, 0)' }}
color="grey500" color="gray500"
fontSize="12" fontSize="12"
fontWeight="normal" fontWeight="normal"
> >

2
src/nft/components/collection/ActivityCells.tsx
View File

@ -295,7 +295,7 @@ const NoContentContainer = () => (
left="1/2" left="1/2"
top="1/2" top="1/2"
style={{ transform: 'translate3d(-50%, -50%, 0)' }} style={{ transform: 'translate3d(-50%, -50%, 0)' }}
color="grey500" color="gray500"
fontSize="12" fontSize="12"
fontWeight="normal" fontWeight="normal"
> >

4
src/nft/components/collection/Card.tsx
View File

@ -664,7 +664,7 @@ const NoContentContainer = ({ uniformHeight }: NoContentContainerProps) => (
background: `linear-gradient(270deg, ${themeVars.colors.backgroundOutline} 0%, ${themeVars.colors.backgroundSurface} 100%)`, background: `linear-gradient(270deg, ${themeVars.colors.backgroundOutline} 0%, ${themeVars.colors.backgroundSurface} 100%)`,
}} }}
fontWeight="normal" fontWeight="normal"
color="grey500" color="gray500"
className={body} className={body}
justifyContent="center" justifyContent="center"
alignItems="center" alignItems="center"
@ -690,7 +690,7 @@ const NoContentContainer = ({ uniformHeight }: NoContentContainerProps) => (
top="1/2" top="1/2"
style={{ transform: 'translate3d(-50%, -50%, 0)' }} style={{ transform: 'translate3d(-50%, -50%, 0)' }}
fontWeight="normal" fontWeight="normal"
color="grey500" color="gray500"
className={body} className={body}
> >
Content not Content not

2
src/nft/components/explore/ActivityFeed.tsx
View File

@ -98,7 +98,7 @@ const ActivityRow = ({ event, index, current }: { event: ActivityEvent; index: n
<Box as="img" src={event.tokenMetadata?.imageUrl} borderRadius="12" marginRight="8" width="40" height="40" /> <Box as="img" src={event.tokenMetadata?.imageUrl} borderRadius="12" marginRight="8" width="40" height="40" />
<Box as="span" color="explicitWhite"> <Box as="span" color="explicitWhite">
<Box as="span">{ActivityEventTypeDisplay[event.eventType]}</Box> <Box as="span">{ActivityEventTypeDisplay[event.eventType]}</Box>
<Box as="span" color="grey300" paddingLeft="4" paddingRight="4"> <Box as="span" color="gray300" paddingLeft="4" paddingRight="4">
for for
</Box> </Box>
{formattedPrice} ETH {formattedPrice} ETH

6
src/nft/components/explore/Explore.css.ts
View File

@ -37,7 +37,7 @@ export const bannerOverlay = style([
position: 'absolute', position: 'absolute',
opacity: '0.7', opacity: '0.7',
width: 'full', width: 'full',
backgroundColor: 'grey900', backgroundColor: 'gray900',
left: '0', left: '0',
top: '0', top: '0',
}), }),
@ -68,14 +68,14 @@ export const activityRow = style([
]) ])
export const activeRow = sprinkles({ export const activeRow = sprinkles({
backgroundColor: 'grey800', backgroundColor: 'gray800',
}) })
export const timestamp = style([ export const timestamp = style([
sprinkles({ sprinkles({
position: 'absolute', position: 'absolute',
fontSize: '12', fontSize: '12',
color: 'grey300', color: 'gray300',
right: { sm: 'unset', lg: '12' }, right: { sm: 'unset', lg: '12' },
left: { sm: '64', lg: 'unset' }, left: { sm: '64', lg: 'unset' },
top: { sm: '28', lg: 'unset' }, top: { sm: '28', lg: 'unset' },

4
src/nft/components/icons.tsx
View File

@ -780,7 +780,7 @@ export const ClockIcon = () => (
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path <path
d="M10.7474 4.99984C10.7474 4.58562 10.4116 4.24984 9.9974 4.24984C9.58318 4.24984 9.2474 4.58562 9.2474 4.99984H10.7474ZM9.9974 9.99984H9.2474C9.2474 10.2839 9.4079 10.5436 9.66199 10.6707L9.9974 9.99984ZM12.9953 12.3373C13.3658 12.5226 13.8163 12.3724 14.0015 12.0019C14.1868 11.6314 14.0366 11.1809 13.6661 10.9957L12.9953 12.3373ZM17.5807 9.99984C17.5807 14.188 14.1856 17.5832 9.9974 17.5832V19.0832C15.014 19.0832 19.0807 15.0164 19.0807 9.99984H17.5807ZM9.9974 17.5832C5.80924 17.5832 2.41406 14.188 2.41406 9.99984H0.914062C0.914062 15.0164 4.98081 19.0832 9.9974 19.0832V17.5832ZM2.41406 9.99984C2.41406 5.81168 5.80924 2.4165 9.9974 2.4165V0.916504C4.98081 0.916504 0.914062 4.98325 0.914062 9.99984H2.41406ZM9.9974 2.4165C14.1856 2.4165 17.5807 5.81168 17.5807 9.99984H19.0807C19.0807 4.98325 15.014 0.916504 9.9974 0.916504V2.4165ZM9.2474 4.99984V9.99984H10.7474V4.99984H9.2474ZM9.66199 10.6707L12.9953 12.3373L13.6661 10.9957L10.3328 9.32902L9.66199 10.6707Z" d="M10.7474 4.99984C10.7474 4.58562 10.4116 4.24984 9.9974 4.24984C9.58318 4.24984 9.2474 4.58562 9.2474 4.99984H10.7474ZM9.9974 9.99984H9.2474C9.2474 10.2839 9.4079 10.5436 9.66199 10.6707L9.9974 9.99984ZM12.9953 12.3373C13.3658 12.5226 13.8163 12.3724 14.0015 12.0019C14.1868 11.6314 14.0366 11.1809 13.6661 10.9957L12.9953 12.3373ZM17.5807 9.99984C17.5807 14.188 14.1856 17.5832 9.9974 17.5832V19.0832C15.014 19.0832 19.0807 15.0164 19.0807 9.99984H17.5807ZM9.9974 17.5832C5.80924 17.5832 2.41406 14.188 2.41406 9.99984H0.914062C0.914062 15.0164 4.98081 19.0832 9.9974 19.0832V17.5832ZM2.41406 9.99984C2.41406 5.81168 5.80924 2.4165 9.9974 2.4165V0.916504C4.98081 0.916504 0.914062 4.98325 0.914062 9.99984H2.41406ZM9.9974 2.4165C14.1856 2.4165 17.5807 5.81168 17.5807 9.99984H19.0807C19.0807 4.98325 15.014 0.916504 9.9974 0.916504V2.4165ZM9.2474 4.99984V9.99984H10.7474V4.99984H9.2474ZM9.66199 10.6707L12.9953 12.3373L13.6661 10.9957L10.3328 9.32902L9.66199 10.6707Z"
fill={vars.color.grey300} fill={vars.color.gray300}
/> />
</svg> </svg>
) )
@ -1261,7 +1261,7 @@ export const TrendingArrow = (props: SVGProps) => (
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}> <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
<path <path
d="M17.5 5.8335H18.25C18.25 5.41928 17.9142 5.0835 17.5 5.0835V5.8335ZM11.0227 12.4307L10.4876 12.9562C10.6286 13.0998 10.8214 13.1807 11.0227 13.1807C11.224 13.1807 11.4169 13.0998 11.5579 12.9562L11.0227 12.4307ZM7.61364 8.9585L8.14881 8.43305C8.00778 8.28941 7.81493 8.2085 7.61364 8.2085C7.41234 8.2085 7.21949 8.28941 7.07846 8.43305L7.61364 8.9585ZM1.96483 13.6414C1.67463 13.937 1.67899 14.4118 1.97456 14.702C2.27013 14.9922 2.74498 14.9878 3.03517 14.6923L1.96483 13.6414ZM13.4091 5.0835C12.9949 5.0835 12.6591 5.41928 12.6591 5.8335C12.6591 6.24771 12.9949 6.5835 13.4091 6.5835V5.0835ZM16.75 10.0002C16.75 10.4144 17.0858 10.7502 17.5 10.7502C17.9142 10.7502 18.25 10.4144 18.25 10.0002H16.75ZM16.9648 5.30805L10.4876 11.9053L11.5579 12.9562L18.0352 6.35894L16.9648 5.30805ZM11.5579 11.9053L8.14881 8.43305L7.07846 9.48394L10.4876 12.9562L11.5579 11.9053ZM7.07846 8.43305L1.96483 13.6414L3.03517 14.6923L8.14881 9.48394L7.07846 8.43305ZM13.4091 6.5835H17.5V5.0835H13.4091V6.5835ZM16.75 5.8335V10.0002H18.25V5.8335H16.75Z" d="M17.5 5.8335H18.25C18.25 5.41928 17.9142 5.0835 17.5 5.0835V5.8335ZM11.0227 12.4307L10.4876 12.9562C10.6286 13.0998 10.8214 13.1807 11.0227 13.1807C11.224 13.1807 11.4169 13.0998 11.5579 12.9562L11.0227 12.4307ZM7.61364 8.9585L8.14881 8.43305C8.00778 8.28941 7.81493 8.2085 7.61364 8.2085C7.41234 8.2085 7.21949 8.28941 7.07846 8.43305L7.61364 8.9585ZM1.96483 13.6414C1.67463 13.937 1.67899 14.4118 1.97456 14.702C2.27013 14.9922 2.74498 14.9878 3.03517 14.6923L1.96483 13.6414ZM13.4091 5.0835C12.9949 5.0835 12.6591 5.41928 12.6591 5.8335C12.6591 6.24771 12.9949 6.5835 13.4091 6.5835V5.0835ZM16.75 10.0002C16.75 10.4144 17.0858 10.7502 17.5 10.7502C17.9142 10.7502 18.25 10.4144 18.25 10.0002H16.75ZM16.9648 5.30805L10.4876 11.9053L11.5579 12.9562L18.0352 6.35894L16.9648 5.30805ZM11.5579 11.9053L8.14881 8.43305L7.07846 9.48394L10.4876 12.9562L11.5579 11.9053ZM7.07846 8.43305L1.96483 13.6414L3.03517 14.6923L8.14881 9.48394L7.07846 8.43305ZM13.4091 6.5835H17.5V5.0835H13.4091V6.5835ZM16.75 5.8335V10.0002H18.25V5.8335H16.75Z"
fill={vars.color.grey300} fill={vars.color.gray300}
/> />
</svg> </svg>
) )

2
src/nft/components/layout/Checkbox.tsx
View File

@ -24,7 +24,7 @@ export const Checkbox: React.FC<CheckboxProps> = ({ hovered, children, ...props
{children} {children}
<Box <Box
as="span" as="span"
borderColor={props.checked || hovered ? 'accentAction' : 'grey400'} borderColor={props.checked || hovered ? 'accentAction' : 'gray400'}
className={styles.checkbox} className={styles.checkbox}
background={props.checked ? 'accentAction' : undefined} background={props.checked ? 'accentAction' : undefined}
// This element is purely decorative so // This element is purely decorative so

4
src/nft/components/layout/Radio.css.ts
View File

@ -23,10 +23,10 @@ export const radio = style([
}), }),
]) ])
export const greyBorderRadio = style([ export const grayBorderRadio = style([
radio, radio,
sprinkles({ sprinkles({
borderColor: 'grey400', borderColor: 'gray400',
}), }),
]) ])

2
src/nft/components/layout/Radio.tsx
View File

@ -12,7 +12,7 @@ export const Radio = ({ hovered, checked, onClick }: RadioProps) => {
return ( return (
<Box <Box
as="label" as="label"
className={checked ? styles.selectedRadio : hovered ? styles.blueBorderRadio : styles.greyBorderRadio} className={checked ? styles.selectedRadio : hovered ? styles.blueBorderRadio : styles.grayBorderRadio}
onClick={onClick} onClick={onClick}
/> />
) )

2
src/nft/components/profile/list/ListPage.tsx
View File

@ -454,7 +454,7 @@ const PriceTextInput = ({
? 'genieBlue' ? 'genieBlue'
: listPrice != null : listPrice != null
? 'textSecondary' ? 'textSecondary'
: 'grey700' : 'gray700'
} }
> >
<NumericInput <NumericInput

27
src/nft/css/sprinkles.css.ts
View File

@ -178,15 +178,24 @@ export const vars = createGlobalTheme(':root', {
green400: '#1A9550', green400: '#1A9550',
violet200: '#BDB8FA', violet200: '#BDB8FA',
violet400: '#7A7BEB', violet400: '#7A7BEB',
grey900: '#0E111A', gray50: '#F5F6FC',
grey800: '#141B2B', gray100: '#E8ECFB',
grey700: '#293249', gray150: '#D2D9EE',
grey500: '#5E6887', gray200: '#B8C0DC',
grey400: '#7C85A2', gray250: '#A6AFCA',
grey300: '#99A1BD', gray300: '#98A1C0',
grey200: '#B7BED4', gray350: '#888FAB',
grey100: '#DDE3F7', gray400: '#7780A0',
grey50: '#F5F6FC', gray450: '#6B7594',
gray500: '#5D6785',
gray550: '#505A78',
gray600: '#404A67',
gray650: '#333D59',
gray700: '#293249',
gray750: '#1B2236',
gray800: '#131A2A',
gray850: '#0E1524',
gray900: '#0D111C',
accentTextLightTertiary: 'rgba(255, 255, 255, 0.12)', accentTextLightTertiary: 'rgba(255, 255, 255, 0.12)',
outline: 'rgba(153, 161, 189, 0.24)', outline: 'rgba(153, 161, 189, 0.24)',
lightGrayOverlay: '#99A1BD14', lightGrayOverlay: '#99A1BD14',

10
src/nft/themes/darkTheme.ts
View File

@ -13,10 +13,10 @@ export const darkTheme: Theme = {
violet: vars.color.violet200, violet: vars.color.violet200,
backgroundFloating: '0000000C', backgroundFloating: '0000000C',
backgroundInteractive: vars.color.grey700, backgroundInteractive: vars.color.gray700,
backgroundModule: vars.color.grey800, backgroundModule: vars.color.gray800,
backgroundOutline: `rgba(153,161,189,0.24)`, backgroundOutline: `rgba(153,161,189,0.24)`,
backgroundSurface: vars.color.grey900, backgroundSurface: vars.color.gray900,
backgroundBackdrop: '#000', backgroundBackdrop: '#000',
modalBackdrop: 'linear-gradient(0deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7))', modalBackdrop: 'linear-gradient(0deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7))',
@ -24,8 +24,8 @@ export const darkTheme: Theme = {
stateOverlayHover: `rgba(153,161,189,0.08)`, stateOverlayHover: `rgba(153,161,189,0.08)`,
textPrimary: '#FFFFFF', textPrimary: '#FFFFFF',
textSecondary: vars.color.grey300, textSecondary: vars.color.gray300,
textTertiary: vars.color.grey500, textTertiary: vars.color.gray500,
}, },
shadows: { shadows: {
menu: '0px 10px 30px rgba(0, 0, 0, 0.1)', menu: '0px 10px 30px rgba(0, 0, 0, 0.1)',

10
src/nft/themes/lightTheme.ts
View File

@ -10,8 +10,8 @@ export const lightTheme: Theme = {
explicitWhite: '#FFFFFF', explicitWhite: '#FFFFFF',
backgroundFloating: '#00000000', backgroundFloating: '#00000000',
backgroundInteractive: vars.color.grey100, backgroundInteractive: vars.color.gray100,
backgroundModule: vars.color.grey50, backgroundModule: vars.color.gray50,
backgroundOutline: `rgba(94,104,135,0.24)`, backgroundOutline: `rgba(94,104,135,0.24)`,
backgroundSurface: '#FFFFFF', backgroundSurface: '#FFFFFF',
backgroundBackdrop: '#FFF', backgroundBackdrop: '#FFF',
@ -23,9 +23,9 @@ export const lightTheme: Theme = {
gold: vars.color.gold400, gold: vars.color.gold400,
violet: vars.color.violet400, violet: vars.color.violet400,
textPrimary: vars.color.grey900, textPrimary: vars.color.gray900,
textSecondary: vars.color.grey500, textSecondary: vars.color.gray500,
textTertiary: vars.color.grey300, textTertiary: vars.color.gray300,
}, },
shadows: { shadows: {
menu: '0px 10px 30px rgba(0, 0, 0, 0.1)', menu: '0px 10px 30px rgba(0, 0, 0, 0.1)',

6
src/pages/MigrateV2/MigrateV2Pair.tsx
View File

@ -7,7 +7,7 @@ import { useWeb3React } from '@web3-react/core'
import { sendEvent } from 'components/analytics' import { sendEvent } from 'components/analytics'
import Badge, { BadgeVariant } from 'components/Badge' import Badge, { BadgeVariant } from 'components/Badge'
import { ButtonConfirmed } from 'components/Button' import { ButtonConfirmed } from 'components/Button'
import { BlueCard, DarkGreyCard, LightCard, YellowCard } from 'components/Card' import { BlueCard, DarkGrayCard, LightCard, YellowCard } from 'components/Card'
import DoubleCurrencyLogo from 'components/DoubleLogo' import DoubleCurrencyLogo from 'components/DoubleLogo'
import FeeSelector from 'components/FeeSelector' import FeeSelector from 'components/FeeSelector'
import RangeSelector from 'components/RangeSelector' import RangeSelector from 'components/RangeSelector'
@ -585,7 +585,7 @@ function V2PairMigration({
) : null} ) : null}
{position ? ( {position ? (
<DarkGreyCard> <DarkGrayCard>
<AutoColumn gap="md"> <AutoColumn gap="md">
<LiquidityInfo token0Amount={position.amount0} token1Amount={position.amount1} /> <LiquidityInfo token0Amount={position.amount0} token1Amount={position.amount1} />
{chainId && refund0 && refund1 ? ( {chainId && refund0 && refund1 ? (
@ -600,7 +600,7 @@ function V2PairMigration({
</ThemedText.DeprecatedBlack> </ThemedText.DeprecatedBlack>
) : null} ) : null}
</AutoColumn> </AutoColumn>
</DarkGreyCard> </DarkGrayCard>
) : null} ) : null}
<AutoColumn gap="12px"> <AutoColumn gap="12px">

6
src/pages/Swap/index.tsx
View File

@ -31,7 +31,7 @@ import { currencyAmountToPreciseFloat, formatTransactionAmount } from 'utils/for
import AddressInputPanel from '../../components/AddressInputPanel' import AddressInputPanel from '../../components/AddressInputPanel'
import { ButtonConfirmed, ButtonError, ButtonLight, ButtonPrimary } from '../../components/Button' import { ButtonConfirmed, ButtonError, ButtonLight, ButtonPrimary } from '../../components/Button'
import { GreyCard } from '../../components/Card' import { GrayCard } from '../../components/Card'
import { AutoColumn } from '../../components/Column' import { AutoColumn } from '../../components/Column'
import SwapCurrencyInputPanel from '../../components/CurrencyInputPanel/SwapCurrencyInputPanel' import SwapCurrencyInputPanel from '../../components/CurrencyInputPanel/SwapCurrencyInputPanel'
import Loader from '../../components/Loader' import Loader from '../../components/Loader'
@ -660,11 +660,11 @@ export default function Swap() {
) : null} ) : null}
</ButtonPrimary> </ButtonPrimary>
) : routeNotFound && userHasSpecifiedInputOutput && !routeIsLoading && !routeIsSyncing ? ( ) : routeNotFound && userHasSpecifiedInputOutput && !routeIsLoading && !routeIsSyncing ? (
<GreyCard style={{ textAlign: 'center' }}> <GrayCard style={{ textAlign: 'center' }}>
<ThemedText.DeprecatedMain mb="4px"> <ThemedText.DeprecatedMain mb="4px">
<Trans>Insufficient liquidity for this trade.</Trans> <Trans>Insufficient liquidity for this trade.</Trans>
</ThemedText.DeprecatedMain> </ThemedText.DeprecatedMain>
</GreyCard> </GrayCard>
) : showApproveFlow ? ( ) : showApproveFlow ? (
<AutoRow style={{ flexWrap: 'nowrap', width: '100%' }}> <AutoRow style={{ flexWrap: 'nowrap', width: '100%' }}>
<AutoColumn style={{ width: '100%' }} gap="12px"> <AutoColumn style={{ width: '100%' }} gap="12px">

6
src/pages/Vote/VotePage.tsx
View File

@ -18,7 +18,7 @@ import { useParams } from 'react-router-dom'
import styled from 'styled-components/macro' import styled from 'styled-components/macro'
import { ButtonPrimary } from '../../components/Button' import { ButtonPrimary } from '../../components/Button'
import { GreyCard } from '../../components/Card' import { GrayCard } from '../../components/Card'
import { AutoColumn } from '../../components/Column' import { AutoColumn } from '../../components/Column'
import { CardSection, DataCard } from '../../components/earn/styled' import { CardSection, DataCard } from '../../components/earn/styled'
import { RowBetween, RowFixed } from '../../components/Row' import { RowBetween, RowFixed } from '../../components/Row'
@ -318,7 +318,7 @@ export default function VotePage() {
</ThemedText.DeprecatedMain> </ThemedText.DeprecatedMain>
</RowBetween> </RowBetween>
{proposalData && proposalData.status === ProposalState.ACTIVE && !showVotingButtons && ( {proposalData && proposalData.status === ProposalState.ACTIVE && !showVotingButtons && (
<GreyCard> <GrayCard>
<ThemedText.DeprecatedBlack> <ThemedText.DeprecatedBlack>
<Trans> <Trans>
Only UNI votes that were self delegated or delegated to another address before block{' '} Only UNI votes that were self delegated or delegated to another address before block{' '}
@ -333,7 +333,7 @@ export default function VotePage() {
</span> </span>
)} )}
</ThemedText.DeprecatedBlack> </ThemedText.DeprecatedBlack>
</GreyCard> </GrayCard>
)} )}
</AutoColumn> </AutoColumn>
{showVotingButtons && ( {showVotingButtons && (

2
src/theme/index.tsx
View File

@ -146,7 +146,7 @@ function oldColors(darkMode: boolean): Colors {
deprecated_text4: darkMode ? ColorsPalette.gray200 : ColorsPalette.gray300, deprecated_text4: darkMode ? ColorsPalette.gray200 : ColorsPalette.gray300,
deprecated_text5: darkMode ? ColorsPalette.gray500 : ColorsPalette.gray50, deprecated_text5: darkMode ? ColorsPalette.gray500 : ColorsPalette.gray50,
// backgrounds / greys // backgrounds / grays
deprecated_bg0: darkMode ? ColorsPalette.gray900 : ColorsPalette.white, deprecated_bg0: darkMode ? ColorsPalette.gray900 : ColorsPalette.white,
deprecated_bg1: darkMode ? ColorsPalette.gray800 : ColorsPalette.gray50, deprecated_bg1: darkMode ? ColorsPalette.gray800 : ColorsPalette.gray50,
deprecated_bg2: darkMode ? ColorsPalette.gray700 : ColorsPalette.gray100, deprecated_bg2: darkMode ? ColorsPalette.gray700 : ColorsPalette.gray100,

2
src/theme/styled.d.ts vendored
View File

@ -77,7 +77,7 @@ export interface Colors {
deprecated_text4: Color deprecated_text4: Color
deprecated_text5: Color deprecated_text5: Color
// backgrounds / greys // backgrounds / grays
deprecated_bg0: Color deprecated_bg0: Color
deprecated_bg1: Color deprecated_bg1: Color
deprecated_bg2: Color deprecated_bg2: Color