fix: Fix visual issues in Spore (#7240)

* 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

functions/nfts/asset/__snapshots__/nft.test.ts.snap

@@ -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"
       

functions/nfts/collection/__snapshots__/collection.test.ts.snap

@@ -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"
       

functions/tokens/__snapshots__/token.test.ts.snap

@@ -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"
       

public/index.html

@@ -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) { %>

src/components/CurrencyInputPanel/SwapCurrencyInputPanel.tsx

@@ -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;
+  height: 36px;
-  border-radius: 16px;
+  border-radius: 18px;
   outline: none;
   user-select: none;
   border: 1px solid ${({ selected, theme }) => (selected ? theme.surface3 : theme.accent1)};

src/components/InputStepCounter/InputStepCounter.tsx

@@ -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 {

src/components/swap/styled.tsx

@@ -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};

src/index.tsx

@@ -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 />

src/theme/components/ThemeToggle.tsx

@@ -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)