style tweaks

- bring back gradient background
- improve header
- improve light mode

src/components/CurrencyInputPanel/index.tsx

@@ -56,7 +56,7 @@ const CurrencySelect = styled(ButtonGray)<{ selected: boolean; hideInput?: boole
   align-items: center;
   font-size: 24px;
   font-weight: 500;
-  background-color: ${({ selected, theme }) => (selected ? theme.bg2 : theme.primary1)};
+  background-color: ${({ selected, theme }) => (selected ? theme.bg0 : theme.primary1)};
   color: ${({ selected, theme }) => (selected ? theme.text1 : theme.white)};
   border-radius: 16px;
   box-shadow: ${({ selected }) => (selected ? 'none' : '0px 6px 10px rgba(0, 0, 0, 0.075)')};
@@ -72,7 +72,7 @@ const CurrencySelect = styled(ButtonGray)<{ selected: boolean; hideInput?: boole
   margin-right: ${({ hideInput }) => (hideInput ? '0' : '12px')};
   :focus,
   :hover {
-    background-color: ${({ selected, theme }) => (selected ? theme.bg3 : darken(0.05, theme.primary1))};
+    background-color: ${({ selected, theme }) => (selected ? theme.bg2 : darken(0.05, theme.primary1))};
   }
 `
 

src/components/Header/index.tsx

@@ -31,7 +31,7 @@ import UniBalanceContent from './UniBalanceContent'
 
 const HeaderFrame = styled.div`
   display: grid;
-  grid-template-columns: 48px 1fr 120px;
+  grid-template-columns: 120px 1fr 120px;
   align-items: center;
   justify-content: space-between;
   align-items: center;
@@ -39,18 +39,20 @@ const HeaderFrame = styled.div`
   width: 100%;
   top: 0;
   position: relative;
-  /* border-bottom: 1px solid rgba(0, 0, 0, 0.1); */
-  padding: 0.5rem 1rem;
+  /* border-bottom: 1px solid ${({ theme }) => theme.bg2}; */
+  padding: 1rem;
   z-index: 21;
-  background-color: ${({ theme }) => theme.bg1};
+  /* background-color: ${({ theme }) => theme.bg1}; */
+  position: relative;
 
   ${({ theme }) => theme.mediaWidth.upToMedium`
-    display: flex;
-    padding: 0 1rem;
+    padding:  1rem;
+    grid-template-columns: 120px 1fr;
+
   `};
 
   ${({ theme }) => theme.mediaWidth.upToExtraSmall`
-        padding: 0.5rem 1rem;
+    padding: 1rem;
   `}
 `
 
@@ -105,16 +107,15 @@ const HeaderRow = styled(RowFixed)`
 `
 
 const HeaderLinks = styled(Row)`
-  justify-content: center;
-  width: 100%;
-  ${({ theme }) => theme.mediaWidth.upToLarge`
-    padding: 1rem 0 1rem 1rem;
-    justify-content: flex-start;
-`};
-  ${({ theme }) => theme.mediaWidth.upToMedium`
-    padding: 1rem 0 1rem 1rem;
-    justify-content: flex-end;
-`};
+  justify-self: center;
+  background-color: ${({ theme }) => theme.bg0};
+  width: fit-content;
+  padding: 4px;
+  border-radius: 16px;
+  display: grid;
+  grid-auto-flow: column;
+  grid-gap: 10px;
+  overflow: auto;
 `
 
 const AccountElement = styled.div<{ active: boolean }>`
@@ -215,7 +216,6 @@ const StyledNavLink = styled(NavLink).attrs({
   color: ${({ theme }) => theme.text2};
   font-size: 1rem;
   width: fit-content;
-  margin: 0 6px;
   font-weight: 500;
   padding: 8px 12px;
 
@@ -350,7 +350,7 @@ export default function Header() {
           Vote
         </StyledNavLink>
         <StyledExternalLink id={`stake-nav-link`} href={'https://info.uniswap.org'}>
-          Charts <span style={{ fontSize: '11px' }}>↗</span>
+          Charts <span style={{ fontSize: '11px', textDecoration: 'none !important' }}>↗</span>
         </StyledExternalLink>
       </HeaderLinks>
       <HeaderControls>

src/hooks/useColor.ts

@@ -22,7 +22,7 @@ async function getColorFromToken(token: Token): Promise<string | null> {
           detectedHex = shade(0.005, detectedHex)
           AAscore = hex(detectedHex, '#FFF')
         }
-        return detectedHex
+        return detectedHex + '20'
       }
       return null
     })

src/pages/App.tsx

@@ -28,6 +28,7 @@ import VotePage from './Vote/VotePage'
 import { RedirectDuplicateTokenIdsV2 } from './AddLiquidityV2/redirects'
 import { PositionPage } from './Pool/PositionPage'
 import AddLiquidity from './AddLiquidity'
+import { ThemedBackground } from '../theme'
 
 const AppWrapper = styled.div`
   display: flex;
@@ -75,11 +76,11 @@ export default function App() {
       <Route component={GoogleAnalyticsReporter} />
       <Route component={DarkModeQueryParamReader} />
       <AppWrapper>
-        <URLWarning />
         <HeaderWrapper>
           <Header />
         </HeaderWrapper>
         <BodyWrapper>
+          <ThemedBackground />
           <Popups />
           <Polling />
           <TopLevelModals />

src/theme/index.tsx

@@ -47,9 +47,9 @@ export function colors(darkMode: boolean): Colors {
     text5: darkMode ? '#2C2F36' : '#EDEEF2',
 
     // backgrounds / greys
-    bg0: darkMode ? '#191B1F' : '#F7F8FA',
-    bg1: darkMode ? '#212429' : '#EDEEF2',
-    bg2: darkMode ? '#2C2F36' : '#F0F0F0',
+    bg0: darkMode ? '#191B1F' : '#FFF',
+    bg1: darkMode ? '#212429' : '#F7F8FA',
+    bg2: darkMode ? '#2C2F36' : '#EDEEF2',
     bg3: darkMode ? '#40444F' : '#CED0D9',
     bg4: darkMode ? '#565A69' : '#888D9B',
     bg5: darkMode ? '#6C7284' : '#888D9B',
@@ -186,6 +186,25 @@ export const TYPE = {
   },
 }
 
+export const ThemedBackground = styled.div<{ backgroundColor?: string | undefined }>`
+  position: fixed;
+  top: 0;
+  left: calc(-100vw / 2);
+  right: 0;
+  pointer-events: none;
+  /* max-width: 100vw !important; */
+  width: 200vw;
+  height: 200vh;
+  mix-blend-mode: color;
+  background: ${({ backgroundColor }) =>
+    `radial-gradient(50% 50% at 50% 50%, ${
+      backgroundColor ? backgroundColor : '#fc077d15'
+    } 0%, rgba(255, 255, 255, 0) 100%)`};
+  transform: translateY(-100vh);
+  will-change: background;
+  transition: background 450ms ease;
+`
+
 export const FixedGlobalStyle = createGlobalStyle`
 html, input, textarea, button {
   font-family: 'Inter', sans-serif;