diff --git a/src/components/Card/index.tsx b/src/components/Card/index.tsx index 9fb4767f..8af2c353 100644 --- a/src/components/Card/index.tsx +++ b/src/components/Card/index.tsx @@ -10,8 +10,9 @@ const Card = styled(Box)<{ width?: string; padding?: string; border?: string; $b export default Card export const LightCard = styled(Card)` - border: 1px solid ${({ theme }) => theme.surface3}; - background-color: ${({ theme }) => theme.surface2}; + border-radius: 8px; + background: rgba(196, 196, 196, 0.01); + box-shadow: 0px 0.76977px 30.79088px 0px rgba(227, 222, 255, 0.20) inset, 0px 3.07909px 13.8559px 0px rgba(154, 146, 210, 0.30) inset, 0px 75.43767px 76.9772px -36.94907px rgba(202, 172, 255, 0.30) inset, 0px -63.12132px 52.3445px -49.26542px rgba(96, 68, 144, 0.30) inset; ` export const GrayCard = styled(Card)` @@ -28,8 +29,7 @@ export const DarkCard = styled(Card)` ` export const OutlineCard = styled(Card)` - border: 1px solid ${({ theme }) => theme.surface3}; - background-color: ${({ theme }) => theme.surface2}; + border: 1px solid ${({ theme }) => theme.jediGreyBorder}; ` export const YellowCard = styled(Card)` @@ -39,7 +39,7 @@ export const YellowCard = styled(Card)` ` export const BlueCard = styled(Card)` - background-color: ${({ theme }) => theme.accent2}; - color: ${({ theme }) => theme.accent1}; + background-color: ${({ theme }) => theme.jediNavyBlue}; + color: ${({ theme }) => theme.jediWhite}; border-radius: 12px; ` diff --git a/src/components/CurrencyInputPanel/index.tsx b/src/components/CurrencyInputPanel/index.tsx index 73d3ff32..8b372bb8 100644 --- a/src/components/CurrencyInputPanel/index.tsx +++ b/src/components/CurrencyInputPanel/index.tsx @@ -28,7 +28,7 @@ const InputPanel = styled.div<{ hideInput?: boolean }>` ${flexColumnNoWrap}; position: relative; border-radius: ${({ hideInput }) => (hideInput ? '16px' : '20px')}; - background-color: ${({ theme, hideInput }) => (hideInput ? 'transparent' : theme.surface2)}; + // background-color: ${({ theme, hideInput }) => (hideInput ? 'transparent' : theme.surface2)}; z-index: 1; width: ${({ hideInput }) => (hideInput ? '100%' : 'initial')}; @@ -37,10 +37,13 @@ const InputPanel = styled.div<{ hideInput?: boolean }>` `; const Container = styled.div<{ hideInput: boolean; disabled: boolean }>` - border-radius: ${({ hideInput }) => (hideInput ? '16px' : '20px')}; + border-radius: ${({ hideInput }) => (hideInput ? '8px' : '8px')}; border: 1px solid ${({ theme }) => theme.surface3}; - background-color: ${({ theme }) => theme.surface2}; - width: ${({ hideInput }) => (hideInput ? '100%' : 'initial')}; + // background-color: ${({ theme }) => theme.surface2}; + background-color: rgba(196, 196, 196, 0.01); + // background-color: #3e1371; + box-shadow: 0px 0.76977px 30.79088px 0px rgba(227, 222, 255, 0.20) inset, 0px 3.07909px 13.8559px 0px rgba(154, 146, 210, 0.30) inset, 0px 75.43767px 76.9772px -36.94907px rgba(202, 172, 255, 0.30) inset, 0px -63.12132px 52.3445px -49.26542px rgba(96, 68, 144, 0.30) inset; + width: ${({ hideInput }) => (hideInput ? '90%' : 'initial')}; ${({ theme, hideInput, disabled }) => !disabled && ` :focus, @@ -58,7 +61,8 @@ const CurrencySelect = styled(ButtonGray)<{ pointerEvents?: string }>` align-items: center; - background-color: ${({ selected, theme }) => (selected ? theme.surface1 : theme.accent1)}; + // background-color: ${({ selected, theme }) => (selected ? theme.surface1 : theme.accent1)}; + background-color: ${({theme}) => theme.jediNavyBlue}; opacity: ${({ disabled }) => (!disabled ? 1 : 0.4)}; box-shadow: ${({ theme }) => theme.deprecated_shallowShadow}; color: ${({ selected, theme }) => (selected ? theme.neutral1 : theme.white)}; @@ -82,7 +86,7 @@ const InputRow = styled.div<{ selected: boolean }>` ${flexRowNoWrap}; align-items: center; justify-content: space-between; - padding: ${({ selected }) => (selected ? ' 1rem 1rem 0.75rem 1rem' : '1rem 1rem 1rem 1rem')}; + padding: ${({ selected }) => (selected ? ' 1rem 1rem 0.75rem 0' : '1rem 1rem 1rem 0')}; `; const LabelRow = styled.div` @@ -130,14 +134,14 @@ const StyledTokenName = styled.span<{ active?: boolean }>` const StyledBalanceMax = styled.button<{ disabled?: boolean }>` background-color: transparent; - background-color: ${({ theme }) => theme.accent2}; - border: none; - border-radius: 12px; - color: ${({ theme }) => theme.accent1}; + // background-color: ${({ theme }) => theme.accent2}; + border: 1px solid #444; + border-radius: 4px; + color: ${({ theme }) => theme.jediWhite}; cursor: pointer; font-size: 11px; font-weight: 535; - margin-left: 0.25rem; + margin-right: 0.5rem; opacity: ${({ disabled }) => (!disabled ? 1 : 0.4)}; padding: 4px 6px; pointer-events: ${({ disabled }) => (!disabled ? 'initial' : 'none')}; @@ -179,7 +183,8 @@ interface CurrencyInputPanelProps { disableNonToken?: boolean renderBalance?: (amount: CurrencyAmount) => ReactNode locked?: boolean - loading?: boolean + loading?: boolean, + hideShadow?: boolean, } export default function CurrencyInputPanel({ value, @@ -200,6 +205,7 @@ export default function CurrencyInputPanel({ value, hideInput = false, locked = false, loading = false, + hideShadow = false, ...rest }: CurrencyInputPanelProps) { const [modalOpen, setModalOpen] = useState(false); const { account, chainId } = useWeb3React(); @@ -212,21 +218,12 @@ export default function CurrencyInputPanel({ value, const chainAllowed = isSupportedChain(chainId); + const containerStyles = hideShadow ? {boxShadow: 'none'} : {}; return ( {!locked && ( - + - {!hideInput && ( - - )} - + {!hideInput && ( +
+ +
+ )} {Boolean(!hideInput && !hideBalance && currency) && ( - - {fiatValue && } - {account && ( - - {Boolean(!hideBalance && currency && selectedCurrencyBalance) - && (renderBalance?.(selectedCurrencyBalance as CurrencyAmount) || ( - Balance: {formatCurrencyAmount(selectedCurrencyBalance, 4)} - ))} - {Boolean(showMaxButton && selectedCurrencyBalance) && ( )} + + {Boolean(!hideBalance && currency && selectedCurrencyBalance) + && (renderBalance?.(selectedCurrencyBalance as CurrencyAmount) || ( + Bal: {formatCurrencyAmount(selectedCurrencyBalance, 4)} + ))} + )} + + {fiatValue && } + )} diff --git a/src/components/FeeSelector/FeeOption.tsx b/src/components/FeeSelector/FeeOption.tsx index 1b0d3057..bf4da08b 100644 --- a/src/components/FeeSelector/FeeOption.tsx +++ b/src/components/FeeSelector/FeeOption.tsx @@ -31,7 +31,7 @@ interface FeeOptionProps { export function FeeOption({ feeAmount, active, poolState, distributions, onClick }: FeeOptionProps) { return ( - + diff --git a/src/components/FeeSelector/FeeTierPercentageBadge.tsx b/src/components/FeeSelector/FeeTierPercentageBadge.tsx index 611dec8a..b6b433b8 100644 --- a/src/components/FeeSelector/FeeTierPercentageBadge.tsx +++ b/src/components/FeeSelector/FeeTierPercentageBadge.tsx @@ -16,7 +16,7 @@ export function FeeTierPercentageBadge({ poolState: PoolState }) { return ( - + {!distributions || poolState === PoolState.NOT_EXISTS || poolState === PoolState.INVALID ? ( Not created diff --git a/src/components/FeeSelector/index.tsx b/src/components/FeeSelector/index.tsx index 1ef77a04..67120f34 100644 --- a/src/components/FeeSelector/index.tsx +++ b/src/components/FeeSelector/index.tsx @@ -152,7 +152,7 @@ export default function FeeSelector({ {!feeAmount ? ( <> - Fee tier + Select Fee tier The % you will earn in fees. @@ -163,7 +163,7 @@ export default function FeeSelector({ {FEE_AMOUNT_DETAIL[feeAmount].label}% fee tier - + {distributions && ( ` diff --git a/src/components/LiquidityChartRangeInput/Zoom.tsx b/src/components/LiquidityChartRangeInput/Zoom.tsx index c28c796f..d428009b 100644 --- a/src/components/LiquidityChartRangeInput/Zoom.tsx +++ b/src/components/LiquidityChartRangeInput/Zoom.tsx @@ -7,7 +7,7 @@ import styled from 'styled-components' import { ZoomLevels } from './types' const Wrapper = styled.div<{ count: number }>` - display: grid; + display: none; grid-template-columns: repeat(${({ count }) => count.toString()}, 1fr); grid-gap: 6px; diff --git a/src/components/NavigationTabs/index.tsx b/src/components/NavigationTabs/index.tsx index eefbf4ae..4aefafe2 100644 --- a/src/components/NavigationTabs/index.tsx +++ b/src/components/NavigationTabs/index.tsx @@ -102,7 +102,7 @@ export function AddRemoveTabs({ }} flex={children ? '1' : undefined} > - + {creating ? ( diff --git a/src/components/RateToggle/index.tsx b/src/components/RateToggle/index.tsx index 13c7b93c..d8dce97e 100644 --- a/src/components/RateToggle/index.tsx +++ b/src/components/RateToggle/index.tsx @@ -21,10 +21,10 @@ export default function RateToggle({ return tokenA && tokenB ? (
- + {isSorted ? currencyA.symbol : currencyB.symbol} - + {isSorted ? currencyB.symbol : currencyA.symbol} diff --git a/src/components/Toggle/MultiToggle.tsx b/src/components/Toggle/MultiToggle.tsx index 30985af7..22b91a2f 100644 --- a/src/components/Toggle/MultiToggle.tsx +++ b/src/components/Toggle/MultiToggle.tsx @@ -4,10 +4,10 @@ export const ToggleWrapper = styled.button<{ width?: string }>` display: flex; align-items: center; width: ${({ width }) => width ?? '100%'}; - padding: 1px; + padding: 0; background: ${({ theme }) => theme.surface2}; border-radius: 8px; - border: ${({ theme }) => '1px solid ' + theme.surface3}; + border: none; cursor: pointer; outline: none; ` @@ -17,11 +17,12 @@ export const ToggleElement = styled.span<{ isActive?: boolean; fontSize?: string align-items: center; width: 100%; padding: 4px 0.5rem; - border-radius: 6px; + border-radius: 4px; justify-content: center; height: 100%; - background: ${({ theme, isActive }) => (isActive ? theme.surface1 : 'none')}; - color: ${({ theme, isActive }) => (isActive ? theme.neutral1 : theme.neutral3)}; + background: ${({ theme, isActive }) => (isActive ? theme.jediWhite : '#572c95')}; + box-shadow: 0px 0.76977px 30.79088px 0px rgba(227, 222, 255, 0.20) inset, 0px 3.07909px 13.8559px 0px rgba(154, 146, 210, 0.30) inset; + color: ${({ theme, isActive }) => (isActive ? theme.jediPink : theme.jediWhite)}; font-size: ${({ fontSize }) => fontSize ?? '1rem'}; font-weight: 535; white-space: nowrap; diff --git a/src/pages/AddLiquidity/index.tsx b/src/pages/AddLiquidity/index.tsx index dd603f39..a5c02e08 100644 --- a/src/pages/AddLiquidity/index.tsx +++ b/src/pages/AddLiquidity/index.tsx @@ -28,7 +28,7 @@ import { ThemedText } from 'theme/components'; import { addressesAreEquivalent } from 'utils/addressesAreEquivalent'; import { WrongChainError } from 'utils/errors'; import { ButtonError, ButtonLight, ButtonPrimary, ButtonText } from '../../components/Button'; -import { BlueCard, OutlineCard, YellowCard } from '../../components/Card'; +import { BlueCard, LightCard, OutlineCard, YellowCard } from '../../components/Card'; import { AutoColumn } from '../../components/Column'; import CurrencyInputPanel from '../../components/CurrencyInputPanel'; import FeeSelector from '../../components/FeeSelector'; @@ -618,6 +618,7 @@ function AddLiquidity() { currency={currencies[Field.CURRENCY_A] ?? null} id="add-liquidity-input-tokena" showCommonBases + hideShadow /> @@ -689,7 +691,20 @@ function AddLiquidity() { )} - + )} - ) : ( @@ -796,16 +797,15 @@ function AddLiquidity() { )} - + - + theme.deprecated_mediaWidth.deprecated_upToMedium` margin: 0 auto; @@ -33,7 +37,6 @@ export const DynamicSection = styled(AutoColumn)<{ disabled?: boolean }>` `; export const StyledInput = styled(Input)` - background-color: ${({ theme }) => theme.surface1}; text-align: left; font-size: 18px; width: 100%; diff --git a/src/pages/AppBody.tsx b/src/pages/AppBody.tsx index d7dc2110..dba97190 100644 --- a/src/pages/AppBody.tsx +++ b/src/pages/AppBody.tsx @@ -13,7 +13,6 @@ export const BodyWrapper = styled.main` margin-top: ${({ $margin }) => $margin ?? '0px'}; max-width: ${({ $maxWidth }) => $maxWidth ?? '420px'}; width: 100%; - background: ${({ theme }) => theme.surface1}; border-radius: 16px; border: 1px solid ${({ theme }) => theme.surface3}; margin-top: 1rem; diff --git a/src/theme/colors.ts b/src/theme/colors.ts index 8061ef54..806230d7 100644 --- a/src/theme/colors.ts +++ b/src/theme/colors.ts @@ -5,6 +5,7 @@ const jediPink = '#FF00E9'; const jediWhite = '#fff'; const jediGrey = '#959595'; const jediNavyBlue = '#141451'; +const jediGreyBorder = '#444'; export const colors = { white: '#FFFFFF', @@ -119,7 +120,7 @@ export const colors = { accent1_dark: jediBlue, accent2_dark: jediPink, - neutral1_light: '#222222', + neutral1_light: jediWhite, neutral2_light: '#7D7D7D', neutral3_light: '#CECECE', @@ -130,7 +131,7 @@ export const colors = { surface5_light: '#00000004', surface6_light: '#00000004', - accent1_light: '#FC72FF', + accent1_light: jediBlue, accent2_light: '#FFEFFF', success: '#40B66B', critical: '#FF3257', @@ -174,6 +175,7 @@ const commonTheme = { jediWhite, jediGrey, jediNavyBlue, + jediGreyBorder }; export const darkTheme = { diff --git a/src/theme/components/text.tsx b/src/theme/components/text.tsx index 8160677d..4880699e 100644 --- a/src/theme/components/text.tsx +++ b/src/theme/components/text.tsx @@ -68,7 +68,7 @@ export const ThemedText = { return ; }, DeprecatedMain(props: TextProps) { - return ; + return ; }, DeprecatedLink(props: TextProps) { return ;