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

fix: Fix visual issues in Spore (#7240)

Browse Source 
* feat: make meta theme-color adapt to new spore background colors

* fix: make glow behind swap modal use a blur strategy rather than box shadow for a more squared glow

* test: grainy bg

* fix: make pool liquidity add input focus border same as swap

* remove svg grain
This commit is contained in:
Nate Wienert 2023-09-20 09:44:25 -10:00 committed by GitHub
parent 54880d201a
commit aeef2c2356
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 3160 additions and 3070 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
functions/nfts/asset/__snapshots__/nft.test.ts.snap
View File

@ -17,7 +17,7 @@ exports[`should inject metadata for valid assets 1`] = `
<link rel="apple-touch-icon" sizes="512x512" href="/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="theme-color" content="#FC72FF" />
<meta name="theme-color" content="#fff" />
<meta
http-equiv="Content-Security-Policy"
@ -164,7 +164,7 @@ exports[`should inject metadata for valid assets 2`] = `
<link rel="apple-touch-icon" sizes="512x512" href="/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="theme-color" content="#FC72FF" />
<meta name="theme-color" content="#fff" />
<meta
http-equiv="Content-Security-Policy"
@ -311,7 +311,7 @@ exports[`should inject metadata for valid assets 3`] = `
<link rel="apple-touch-icon" sizes="512x512" href="/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="theme-color" content="#FC72FF" />
<meta name="theme-color" content="#fff" />
<meta
http-equiv="Content-Security-Policy"

8
functions/nfts/collection/__snapshots__/collection.test.ts.snap
View File

@ -17,7 +17,7 @@ exports[`should inject metadata for collections 1`] = `
<link rel="apple-touch-icon" sizes="512x512" href="/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="theme-color" content="#FC72FF" />
<meta name="theme-color" content="#fff" />
<meta
http-equiv="Content-Security-Policy"
@ -164,7 +164,7 @@ exports[`should inject metadata for collections 2`] = `
<link rel="apple-touch-icon" sizes="512x512" href="/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="theme-color" content="#FC72FF" />
<meta name="theme-color" content="#fff" />
<meta
http-equiv="Content-Security-Policy"
@ -311,7 +311,7 @@ exports[`should inject metadata for collections 3`] = `
<link rel="apple-touch-icon" sizes="512x512" href="/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="theme-color" content="#FC72FF" />
<meta name="theme-color" content="#fff" />
<meta
http-equiv="Content-Security-Policy"
@ -458,7 +458,7 @@ exports[`should inject metadata for collections 4`] = `
<link rel="apple-touch-icon" sizes="512x512" href="/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="theme-color" content="#FC72FF" />
<meta name="theme-color" content="#fff" />
<meta
http-equiv="Content-Security-Policy"

8
functions/tokens/__snapshots__/token.test.ts.snap
View File

@ -17,7 +17,7 @@ exports[`should inject metadata for valid tokens 1`] = `
<link rel="apple-touch-icon" sizes="512x512" href="/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="theme-color" content="#FC72FF" />
<meta name="theme-color" content="#fff" />
<meta
http-equiv="Content-Security-Policy"
@ -164,7 +164,7 @@ exports[`should inject metadata for valid tokens 2`] = `
<link rel="apple-touch-icon" sizes="512x512" href="/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="theme-color" content="#FC72FF" />
<meta name="theme-color" content="#fff" />
<meta
http-equiv="Content-Security-Policy"
@ -311,7 +311,7 @@ exports[`should inject metadata for valid tokens 3`] = `
<link rel="apple-touch-icon" sizes="512x512" href="/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="theme-color" content="#FC72FF" />
<meta name="theme-color" content="#fff" />
<meta
http-equiv="Content-Security-Policy"
@ -458,7 +458,7 @@ exports[`should inject metadata for valid tokens 4`] = `
<link rel="apple-touch-icon" sizes="512x512" href="/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="theme-color" content="#FC72FF" />
<meta name="theme-color" content="#fff" />
<meta
http-equiv="Content-Security-Policy"

2
public/index.html
View File

@ -14,7 +14,7 @@
<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="theme-color" content="#FC72FF" />
<meta name="theme-color" content="#fff" />
<meta
http-equiv="Content-Security-Policy"
<% if (process.env.REACT_APP_CSP_ALLOW_UNSAFE_EVAL) { %>

4
src/components/CurrencyInputPanel/SwapCurrencyInputPanel.tsx
View File

@ -67,8 +67,8 @@ const CurrencySelect = styled(ButtonGray)<{
opacity: ${({ disabled }) => (!disabled ? 1 : 0.4)};
color: ${({ selected, theme }) => (selected ? theme.neutral1 : theme.white)};
cursor: pointer;
height: unset;
border-radius: 16px;
height: 36px;
border-radius: 18px;
outline: none;
user-select: none;
border: 1px solid ${({ selected, theme }) => (selected ? theme.surface3 : theme.accent1)};

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

@ -34,7 +34,7 @@ const SmallButton = styled(ButtonGray)`
`
const FocusedOutlineCard = styled(OutlineCard)<{ active?: boolean; pulsing?: boolean }>`
border-color: ${({ active, theme }) => active && theme.accent1};
border-color: ${({ active, theme }) => active && theme.deprecated_stateOverlayPressed};
padding: 12px;
animation: ${({ pulsing, theme }) => pulsing && pulse(theme.accent1)} 0.8s linear;
`
@ -62,6 +62,7 @@ const InputTitle = styled(ThemedText.DeprecatedSmall)`
const ButtonLabel = styled(ThemedText.DeprecatedWhite)<{ disabled: boolean }>`
color: ${({ theme, disabled }) => (disabled ? theme.neutral2 : theme.neutral1)} !important;
display: flex;
`
interface StepCounterProps {

40
src/components/swap/styled.tsx
View File

@ -22,25 +22,45 @@ export const PageWrapper = styled.div`
`
// Mostly copied from `AppBody` but it was getting too hard to maintain backwards compatibility.
export const SwapWrapper = styled.main<{ isDark?: boolean }>`
const SwapWrapperOuter = styled.main<{ isDark?: boolean }>`
position: relative;
background: ${({ theme }) => theme.surface1};
border-radius: 24px;
border: 1px solid ${({ theme }) => theme.surface3};
padding: 8px;
padding-top: 12px;
box-shadow: ${({ isDark }) =>
`0px 0px 10px 0px rgba(252, 114, 255, ${isDark ? '0.08' : '0.04'}), 0px 40px 120px 0px rgba(252, 114, 255, ${
isDark ? '0.18' : '0.12'
})`};
z-index: ${Z_INDEX.default};
border: 1px solid ${({ theme }) => theme.surface3};
transition: transform 250ms ease;
border-radius: 24px;
&:before {
content: ' ';
display: flex;
position: absolute;
inset: 0;
transform: scale(1.1);
filter: blur(50px);
background-color: rgba(252, 114, 255, 0.075);
z-index: -2;
}
&:hover {
border: 1px solid ${({ theme }) => theme.surface3};
}
`
export const SwapWrapper = (props: React.ComponentProps<typeof SwapWrapperOuter>) => {
return (
<SwapWrapperOuter {...props}>
<SwapWrapperInner>{props.children}</SwapWrapperInner>
</SwapWrapperOuter>
)
}
const SwapWrapperInner = styled.div`
border-radius: 24px;
background: ${({ theme }) => theme.surface1};
z-index: -1;
padding: 8px;
padding-top: 12px;
`
export const UniswapPopoverContainer = styled.div`
padding: 18px;
color: ${({ theme }) => theme.neutral1};

3
src/index.tsx
View File

@ -14,7 +14,7 @@ import { createRoot } from 'react-dom/client'
import { QueryClient, QueryClientProvider } from 'react-query'
import { Provider } from 'react-redux'
import { BrowserRouter, HashRouter } from 'react-router-dom'
import { SystemThemeUpdater } from 'theme/components/ThemeToggle'
import { SystemThemeUpdater, ThemeColorMetaUpdater } from 'theme/components/ThemeToggle'
import { isBrowserRouterEnabled } from 'utils/env'
import Web3Provider from './components/Web3Provider'
@ -40,6 +40,7 @@ function Updaters() {
<RadialGradientByChainUpdater />
<ListsUpdater />
<SystemThemeUpdater />
<ThemeColorMetaUpdater />
<ApplicationUpdater />
<TransactionUpdater />
<OrderUpdater />

6138
src/pages/Landing/__snapshots__/index.test.tsx.snap
View File

File diff suppressed because it is too large Load Diff

18
src/theme/components/ThemeToggle.tsx
View File

@ -45,6 +45,24 @@ export function SystemThemeUpdater() {
return null
}
export function ThemeColorMetaUpdater() {
const isDark = useIsDarkMode()
useEffect(() => {
const meta = document.querySelector('meta[name=theme-color]')
if (!meta) return
if (isDark) {
// this color comes from #background-radial-gradient
meta.setAttribute('content', 'rgb(19, 19, 19)')
} else {
meta.setAttribute('content', '#fff')
}
}, [isDark])
return null
}
export function useIsDarkMode(): boolean {
const mode = useAtomValue(themeModeAtom)
const systemTheme = useAtomValue(systemThemeAtom)