Skip to content

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

chore: update nft grays (#5124) 

* chore: update nft grays

* forgot to change some out

* prettier

* add 700
parent eb35d3a2
Show whitespace changes
Inline Side-by-side
Showing with 159 additions and 149 deletions
public/index.html
View file @ d951172a
<!DOCTYPE html>
<html translate="no">
<head>
<head>
<meta charset="utf-8" />
<title>Uniswap Interface</title>
......@@ -17,7 +16,10 @@
<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 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.
......@@ -103,9 +105,9 @@
}
}
</style>
</head>
</head>
<body>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root">
......@@ -114,6 +116,5 @@
</div>
<div id="background-radial-gradient"></div>
</body>
</body>
</html>
src/components/Card/index.tsx
View file @ d951172a
......@@ -14,15 +14,15 @@ export const LightCard = styled(Card)`
background-color: ${({ theme }) => theme.deprecated_bg1};
`
export const LightGreyCard = styled(Card)`
export const LightGrayCard = styled(Card)`
background-color: ${({ theme }) => theme.deprecated_bg2};
`
export const GreyCard = styled(Card)`
export const GrayCard = styled(Card)`
background-color: ${({ theme }) => theme.deprecated_bg3};
`
export const DarkGreyCard = styled(Card)`
export const DarkGrayCard = styled(Card)`
background-color: ${({ theme }) => theme.deprecated_bg2};
`
......
src/components/NavBar/SearchBarDropdown.tsx
View file @ d951172a
......@@ -47,7 +47,7 @@ export const SearchBarDropdownSection = ({
}: SearchBarDropdownSectionProps) => {
return (
<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}
<Box>{header}</Box>
</Row>
......
src/components/PositionCard/index.tsx
View file @ d951172a
......@@ -18,7 +18,7 @@ import { ExternalLink, ThemedText } from '../../theme'
import { currencyId } from '../../utils/currencyId'
import { unwrappedToken } from '../../utils/unwrappedToken'
import { ButtonEmpty, ButtonPrimary, ButtonSecondary } from '../Button'
import { GreyCard, LightCard } from '../Card'
import { GrayCard, LightCard } from '../Card'
import { AutoColumn } from '../Column'
import CurrencyLogo from '../CurrencyLogo'
import DoubleCurrencyLogo from '../DoubleLogo'
......@@ -78,7 +78,7 @@ export function MinimalPositionCard({ pair, showUnwrapped = false, border }: Pos
return (
<>
{userPoolBalance && JSBI.greaterThan(userPoolBalance.quotient, JSBI.BigInt(0)) ? (
<GreyCard border={border}>
<GrayCard border={border}>
<AutoColumn gap="12px">
<FixedHeightRow>
<RowFixed>
......@@ -139,7 +139,7 @@ export function MinimalPositionCard({ pair, showUnwrapped = false, border }: Pos
</FixedHeightRow>
</AutoColumn>
</AutoColumn>
</GreyCard>
</GrayCard>
) : (
<LightCard>
<ThemedText.DeprecatedSubHeader style={{ textAlign: 'center' }}>
......
src/components/PrivacyPolicy/index.tsx
View file @ d951172a
import { Trans } from '@lingui/macro'
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 { useEffect, useRef } from 'react'
import { ArrowDown, Info, X } from 'react-feather'
......@@ -155,7 +155,7 @@ export function PrivacyPolicy() {
</ThemedText.DeprecatedMain>
<AutoColumn gap="12px">
{EXTERNAL_APIS.map(({ name, description }, i) => (
<DarkGreyCard key={i}>
<DarkGrayCard key={i}>
<AutoColumn gap="8px">
<AutoRow gap="4px">
<Info size={18} />
......@@ -165,7 +165,7 @@ export function PrivacyPolicy() {
</AutoRow>
<ThemedText.DeprecatedMain fontSize={14}>{description}</ThemedText.DeprecatedMain>
</AutoColumn>
</DarkGreyCard>
</DarkGrayCard>
))}
<ThemedText.DeprecatedBody fontSize={12}>
<Row justify="center" marginBottom="1rem">
......
src/nft/components/bag/BagRow.tsx
View file @ d951172a
......@@ -40,7 +40,7 @@ const NoContentContainer = () => (
left="1/2"
top="1/2"
style={{ transform: 'translate3d(-50%, -50%, 0)' }}
color="grey500"
color="gray500"
fontSize="12"
fontWeight="normal"
>
......
src/nft/components/collection/ActivityCells.tsx
View file @ d951172a
......@@ -295,7 +295,7 @@ const NoContentContainer = () => (
left="1/2"
top="1/2"
style={{ transform: 'translate3d(-50%, -50%, 0)' }}
color="grey500"
color="gray500"
fontSize="12"
fontWeight="normal"
>
......
src/nft/components/collection/Card.tsx
View file @ d951172a
......@@ -664,7 +664,7 @@ const NoContentContainer = ({ uniformHeight }: NoContentContainerProps) => (
background: `linear-gradient(270deg, ${themeVars.colors.backgroundOutline} 0%, ${themeVars.colors.backgroundSurface} 100%)`,
}}
fontWeight="normal"
color="grey500"
color="gray500"
className={body}
justifyContent="center"
alignItems="center"
......@@ -690,7 +690,7 @@ const NoContentContainer = ({ uniformHeight }: NoContentContainerProps) => (
top="1/2"
style={{ transform: 'translate3d(-50%, -50%, 0)' }}
fontWeight="normal"
color="grey500"
color="gray500"
className={body}
>
Content not
......
src/nft/components/explore/ActivityFeed.tsx
View file @ d951172a
......@@ -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="span" color="explicitWhite">
<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
</Box>
{formattedPrice} ETH
......
src/nft/components/explore/Explore.css.ts
View file @ d951172a
......@@ -37,7 +37,7 @@ export const bannerOverlay = style([
position: 'absolute',
opacity: '0.7',
width: 'full',
backgroundColor: 'grey900',
backgroundColor: 'gray900',
left: '0',
top: '0',
}),
......@@ -68,14 +68,14 @@ export const activityRow = style([
])
export const activeRow = sprinkles({
backgroundColor: 'grey800',
backgroundColor: 'gray800',
})
export const timestamp = style([
sprinkles({
position: 'absolute',
fontSize: '12',
color: 'grey300',
color: 'gray300',
right: { sm: 'unset', lg: '12' },
left: { sm: '64', lg: 'unset' },
top: { sm: '28', lg: 'unset' },
......
src/nft/components/icons.tsx
View file @ d951172a
......@@ -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">
<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"
fill={vars.color.grey300}
fill={vars.color.gray300}
/>
</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}>
<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"
fill={vars.color.grey300}
fill={vars.color.gray300}
/>
</svg>
)
......
src/nft/components/layout/Checkbox.tsx
View file @ d951172a
......@@ -24,7 +24,7 @@ export const Checkbox: React.FC<CheckboxProps> = ({ hovered, children, ...props
{children}
<Box
as="span"
borderColor={props.checked || hovered ? 'accentAction' : 'grey400'}
borderColor={props.checked || hovered ? 'accentAction' : 'gray400'}
className={styles.checkbox}
background={props.checked ? 'accentAction' : undefined}
// This element is purely decorative so
......
src/nft/components/layout/Radio.css.ts
View file @ d951172a
......@@ -23,10 +23,10 @@ export const radio = style([
}),
])
export const greyBorderRadio = style([
export const grayBorderRadio = style([
radio,
sprinkles({
borderColor: 'grey400',
borderColor: 'gray400',
}),
])
......
src/nft/components/layout/Radio.tsx
View file @ d951172a
......@@ -12,7 +12,7 @@ export const Radio = ({ hovered, checked, onClick }: RadioProps) => {
return (
<Box
as="label"
className={checked ? styles.selectedRadio : hovered ? styles.blueBorderRadio : styles.greyBorderRadio}
className={checked ? styles.selectedRadio : hovered ? styles.blueBorderRadio : styles.grayBorderRadio}
onClick={onClick}
/>
)
......
src/nft/components/profile/list/ListPage.tsx
View file @ d951172a
......@@ -454,7 +454,7 @@ const PriceTextInput = ({
? 'genieBlue'
: listPrice != null
? 'textSecondary'
: 'grey700'
: 'gray700'
}
>
<NumericInput
......
src/nft/css/sprinkles.css.ts
View file @ d951172a
......@@ -178,15 +178,24 @@ export const vars = createGlobalTheme(':root', {
green400: '#1A9550',
violet200: '#BDB8FA',
violet400: '#7A7BEB',
grey900: '#0E111A',
grey800: '#141B2B',
grey700: '#293249',
grey500: '#5E6887',
grey400: '#7C85A2',
grey300: '#99A1BD',
grey200: '#B7BED4',
grey100: '#DDE3F7',
grey50: '#F5F6FC',
gray50: '#F5F6FC',
gray100: '#E8ECFB',
gray150: '#D2D9EE',
gray200: '#B8C0DC',
gray250: '#A6AFCA',
gray300: '#98A1C0',
gray350: '#888FAB',
gray400: '#7780A0',
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)',
outline: 'rgba(153, 161, 189, 0.24)',
lightGrayOverlay: '#99A1BD14',
......
src/nft/themes/darkTheme.ts
View file @ d951172a
......@@ -13,10 +13,10 @@ export const darkTheme: Theme = {
violet: vars.color.violet200,
backgroundFloating: '0000000C',
backgroundInteractive: vars.color.grey700,
backgroundModule: vars.color.grey800,
backgroundInteractive: vars.color.gray700,
backgroundModule: vars.color.gray800,
backgroundOutline: `rgba(153,161,189,0.24)`,
backgroundSurface: vars.color.grey900,
backgroundSurface: vars.color.gray900,
backgroundBackdrop: '#000',
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)`,
textPrimary: '#FFFFFF',
textSecondary: vars.color.grey300,
textTertiary: vars.color.grey500,
textSecondary: vars.color.gray300,
textTertiary: vars.color.gray500,
},
shadows: {
menu: '0px 10px 30px rgba(0, 0, 0, 0.1)',
......
src/nft/themes/lightTheme.ts
View file @ d951172a
......@@ -10,8 +10,8 @@ export const lightTheme: Theme = {
explicitWhite: '#FFFFFF',
backgroundFloating: '#00000000',
backgroundInteractive: vars.color.grey100,
backgroundModule: vars.color.grey50,
backgroundInteractive: vars.color.gray100,
backgroundModule: vars.color.gray50,
backgroundOutline: `rgba(94,104,135,0.24)`,
backgroundSurface: '#FFFFFF',
backgroundBackdrop: '#FFF',
......@@ -23,9 +23,9 @@ export const lightTheme: Theme = {
gold: vars.color.gold400,
violet: vars.color.violet400,
textPrimary: vars.color.grey900,
textSecondary: vars.color.grey500,
textTertiary: vars.color.grey300,
textPrimary: vars.color.gray900,
textSecondary: vars.color.gray500,
textTertiary: vars.color.gray300,
},
shadows: {
menu: '0px 10px 30px rgba(0, 0, 0, 0.1)',
......
src/pages/MigrateV2/MigrateV2Pair.tsx
View file @ d951172a
......@@ -7,7 +7,7 @@ import { useWeb3React } from '@web3-react/core'
import { sendEvent } from 'components/analytics'
import Badge, { BadgeVariant } from 'components/Badge'
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 FeeSelector from 'components/FeeSelector'
import RangeSelector from 'components/RangeSelector'
......@@ -585,7 +585,7 @@ function V2PairMigration({
) : null}
{position ? (
<DarkGreyCard>
<DarkGrayCard>
<AutoColumn gap="md">
<LiquidityInfo token0Amount={position.amount0} token1Amount={position.amount1} />
{chainId && refund0 && refund1 ? (
......@@ -600,7 +600,7 @@ function V2PairMigration({
</ThemedText.DeprecatedBlack>
) : null}
</AutoColumn>
</DarkGreyCard>
</DarkGrayCard>
) : null}
<AutoColumn gap="12px">
......
src/pages/Swap/index.tsx
View file @ d951172a
......@@ -31,7 +31,7 @@ import { currencyAmountToPreciseFloat, formatTransactionAmount } from 'utils/for
import AddressInputPanel from '../../components/AddressInputPanel'
import { ButtonConfirmed, ButtonError, ButtonLight, ButtonPrimary } from '../../components/Button'
import { GreyCard } from '../../components/Card'
import { GrayCard } from '../../components/Card'
import { AutoColumn } from '../../components/Column'
import SwapCurrencyInputPanel from '../../components/CurrencyInputPanel/SwapCurrencyInputPanel'
import Loader from '../../components/Loader'
......@@ -660,11 +660,11 @@ export default function Swap() {
) : null}
</ButtonPrimary>
) : routeNotFound && userHasSpecifiedInputOutput && !routeIsLoading && !routeIsSyncing ? (
<GreyCard style={{ textAlign: 'center' }}>
<GrayCard style={{ textAlign: 'center' }}>
<ThemedText.DeprecatedMain mb="4px">
<Trans>Insufficient liquidity for this trade.</Trans>
</ThemedText.DeprecatedMain>
</GreyCard>
</GrayCard>
) : showApproveFlow ? (
<AutoRow style={{ flexWrap: 'nowrap', width: '100%' }}>
<AutoColumn style={{ width: '100%' }} gap="12px">
......
src/pages/Vote/VotePage.tsx
View file @ d951172a
......@@ -18,7 +18,7 @@ import { useParams } from 'react-router-dom'
import styled from 'styled-components/macro'
import { ButtonPrimary } from '../../components/Button'
import { GreyCard } from '../../components/Card'
import { GrayCard } from '../../components/Card'
import { AutoColumn } from '../../components/Column'
import { CardSection, DataCard } from '../../components/earn/styled'
import { RowBetween, RowFixed } from '../../components/Row'
......@@ -318,7 +318,7 @@ export default function VotePage() {
</ThemedText.DeprecatedMain>
</RowBetween>
{proposalData && proposalData.status === ProposalState.ACTIVE && !showVotingButtons && (
<GreyCard>
<GrayCard>
<ThemedText.DeprecatedBlack>
<Trans>
Only UNI votes that were self delegated or delegated to another address before block{' '}
......@@ -333,7 +333,7 @@ export default function VotePage() {
</span>
)}
</ThemedText.DeprecatedBlack>
</GreyCard>
</GrayCard>
)}
</AutoColumn>
{showVotingButtons && (
......
src/theme/index.tsx
View file @ d951172a
......@@ -146,7 +146,7 @@ function oldColors(darkMode: boolean): Colors {
deprecated_text4: darkMode ? ColorsPalette.gray200 : ColorsPalette.gray300,
deprecated_text5: darkMode ? ColorsPalette.gray500 : ColorsPalette.gray50,
// backgrounds / greys
// backgrounds / grays
deprecated_bg0: darkMode ? ColorsPalette.gray900 : ColorsPalette.white,
deprecated_bg1: darkMode ? ColorsPalette.gray800 : ColorsPalette.gray50,
deprecated_bg2: darkMode ? ColorsPalette.gray700 : ColorsPalette.gray100,
......
src/theme/styled.d.ts
View file @ d951172a
......@@ -77,7 +77,7 @@ export interface Colors {
deprecated_text4: Color
deprecated_text5: Color
// backgrounds / greys
// backgrounds / grays
deprecated_bg0: Color
deprecated_bg1: Color
deprecated_bg2: Color
......
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