feat: update Swap styles, update theme colors (#4294)

* toggle

* fixed position

* im bad at spelling

* rm button

* fix

* initial

* fix

* styles

* iteration

* minor updates

* additions

* updates

* rm file

* color update

* updates

* start feature flag

* more flagging

* FLAGZ

* even more flagging

* flagbergasted

* more

* minor updates

* updates

* lets go

* merge

* merge fix

* merge fixes

* theme

* Merge remote-tracking branch 'origin/kg/explore-colorChanges2' into swap_and_colors

* Fix merge conflicts

* themeUpdates

* Update colors based on Phil's latest

* Add new default gradients

* toggle

* fixed position

* im bad at spelling

* rm button

* initial

* fix

* styles

* iteration

* minor updates

* additions

* updates

* rm file

* color update

* updates

* start feature flag

* more flagging

* FLAGZ

* even more flagging

* flagbergasted

* more

* minor updates

* updates

* lets go

* Merge remote-tracking branch 'origin/kg/explore-colorChanges2' into swap_and_colors

* merge

* Fix merge conflicts

* merge fixes

* theme

* themeUpdates

* Update colors based on Phil's latest

* Add new default gradients

* update swap index

* fix merge bugs

* Tweak swap

* update from main

* Fix merge issues and color bug

* Update index.test.tsx.snap

* Remove un-used constants

* updates

* font

* add space

* style

* style

* style

* hover state

* color fixes

* meh

* Update index.tsx

* fix conflict
Co-authored-by: Kaylee George <62825936+kayleegeorge@users.noreply.github.com>

src/components/Button/index.tsx

@@ -77,27 +77,35 @@ export const ButtonPrimary = styled(BaseButton)`
   }
 `
 
-export const ButtonLight = styled(BaseButton)`
-  background-color: ${({ theme }) => theme.deprecated_primary5};
-  color: ${({ theme }) => theme.deprecated_primaryText1};
-  font-size: 16px;
-  font-weight: 500;
+export const ButtonLight = styled(BaseButton)<{ phase0Flag?: boolean }>`
+  background-color: ${({ theme, phase0Flag }) => (phase0Flag ? theme.accentActionSoft : theme.deprecated_primary5)};
+  color: ${({ theme, phase0Flag }) => (phase0Flag ? theme.accentAction : theme.deprecated_primaryText1)};
+  font-size: ${({ phase0Flag }) => (phase0Flag ? '20px' : '16px')};
+  font-weight: ${({ phase0Flag }) => (phase0Flag ? '600' : '500')};
+
   &:focus {
-    box-shadow: 0 0 0 1pt ${({ theme, disabled }) => !disabled && darken(0.03, theme.deprecated_primary5)};
-    background-color: ${({ theme, disabled }) => !disabled && darken(0.03, theme.deprecated_primary5)};
+    box-shadow: 0 0 0 1pt
+      ${({ theme, disabled, phase0Flag }) =>
+        !disabled && (phase0Flag ? theme.accentActionSoft : darken(0.03, theme.deprecated_primary5))};
+    background-color: ${({ theme, disabled, phase0Flag }) =>
+      !disabled && (phase0Flag ? theme.accentActionSoft : darken(0.03, theme.deprecated_primary5))};
   }
   &:hover {
-    background-color: ${({ theme, disabled }) => !disabled && darken(0.03, theme.deprecated_primary5)};
+    background-color: ${({ theme, disabled, phase0Flag }) =>
+      !disabled && (phase0Flag ? theme.accentActionSoft : darken(0.03, theme.deprecated_primary5))};
   }
   &:active {
-    box-shadow: 0 0 0 1pt ${({ theme, disabled }) => !disabled && darken(0.05, theme.deprecated_primary5)};
-    background-color: ${({ theme, disabled }) => !disabled && darken(0.05, theme.deprecated_primary5)};
+    box-shadow: 0 0 0 1pt
+      ${({ theme, disabled, phase0Flag }) =>
+        !disabled && (phase0Flag ? theme.accentActionSoft : darken(0.05, theme.deprecated_primary5))};
+    background-color: ${({ theme, disabled, phase0Flag }) =>
+      !disabled && (phase0Flag ? theme.accentActionSoft : darken(0.05, theme.deprecated_primary5))};
   }
   :disabled {
     opacity: 0.4;
     :hover {
       cursor: auto;
-      background-color: ${({ theme }) => theme.deprecated_primary5};
+      background-color: ${({ theme, phase0Flag }) => (phase0Flag ? theme.none : theme.deprecated_primary5)};
       box-shadow: none;
       border: 1px solid transparent;
       outline: none;

src/components/CurrencyInputPanel/index.tsx

@@ -7,6 +7,7 @@ import { TraceEvent } from 'components/AmplitudeAnalytics/TraceEvent'
 import { AutoColumn } from 'components/Column'
 import { LoadingOpacityContainer, loadingOpacityMixin } from 'components/Loader/styled'
 import { isSupportedChain } from 'constants/chains'
+import { Phase0Variant, usePhase0Flag } from 'featureFlags/flags/phase0'
 import { darken } from 'polished'
 import { ReactNode, useCallback, useState } from 'react'
 import { Lock } from 'react-feather'
@@ -25,35 +26,37 @@ import { RowBetween, RowFixed } from '../Row'
 import CurrencySearchModal from '../SearchModal/CurrencySearchModal'
 import { FiatValue } from './FiatValue'
 
-const InputPanel = styled.div<{ hideInput?: boolean }>`
+const InputPanel = styled.div<{ hideInput?: boolean; phase0Flag: boolean }>`
   ${({ theme }) => theme.flexColumnNoWrap}
   position: relative;
   border-radius: ${({ hideInput }) => (hideInput ? '16px' : '20px')};
-  background-color: ${({ theme, hideInput }) => (hideInput ? 'transparent' : theme.deprecated_bg2)};
+  background-color: ${({ theme, phase0Flag, hideInput }) =>
+    phase0Flag ? theme.none : hideInput ? 'transparent' : theme.deprecated_bg2};
   z-index: 1;
   width: ${({ hideInput }) => (hideInput ? '100%' : 'initial')};
   transition: height 1s ease;
   will-change: height;
 `
 
-const FixedContainer = styled.div`
+const FixedContainer = styled.div<{ phase0Flag: boolean }>`
   width: 100%;
   height: 100%;
   position: absolute;
   border-radius: 20px;
-  background-color: ${({ theme }) => theme.deprecated_bg2};
+  background-color: ${({ theme, phase0Flag }) => (phase0Flag ? theme.none : theme.deprecated_bg2)};
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 2;
 `
 
-const Container = styled.div<{ hideInput: boolean; disabled: boolean }>`
+const Container = styled.div<{ hideInput: boolean; disabled: boolean; phase0Flag: boolean }>`
   border-radius: ${({ hideInput }) => (hideInput ? '16px' : '20px')};
-  border: 1px solid ${({ theme }) => theme.deprecated_bg0};
-  background-color: ${({ theme }) => theme.deprecated_bg1};
+  border: 1px solid ${({ theme, phase0Flag }) => (phase0Flag ? theme.none : theme.deprecated_bg0)};
+  background-color: ${({ theme, phase0Flag }) => (phase0Flag ? theme.none : theme.deprecated_bg1)};
   width: ${({ hideInput }) => (hideInput ? '100%' : 'initial')};
-  ${({ theme, hideInput, disabled }) =>
+  ${({ theme, hideInput, disabled, phase0Flag }) =>
+    !phase0Flag &&
     !disabled &&
     `
     :focus,
@@ -68,38 +71,64 @@ const CurrencySelect = styled(ButtonGray)<{
   selected: boolean
   hideInput?: boolean
   disabled?: boolean
+  phase0Flag: boolean
 }>`
   align-items: center;
-  background-color: ${({ selected, theme }) => (selected ? theme.deprecated_bg2 : theme.deprecated_primary1)};
+  background-color: ${({ selected, theme, phase0Flag }) =>
+    phase0Flag
+      ? selected
+        ? theme.backgroundSurface
+        : theme.accentAction
+      : selected
+      ? theme.deprecated_bg2
+      : theme.deprecated_primary1};
   opacity: ${({ disabled }) => (!disabled ? 1 : 0.4)};
   box-shadow: ${({ selected }) => (selected ? 'none' : '0px 6px 10px rgba(0, 0, 0, 0.075)')};
-  box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.075);
   color: ${({ selected, theme }) => (selected ? theme.deprecated_text1 : theme.deprecated_white)};
   cursor: pointer;
+  height: ${({ hideInput, phase0Flag }) => (phase0Flag ? 'unset' : hideInput ? '2.8rem' : '2.4rem')};
   border-radius: 16px;
   outline: none;
   user-select: none;
   border: none;
   font-size: 24px;
-  font-weight: 500;
-  height: ${({ hideInput }) => (hideInput ? '2.8rem' : '2.4rem')};
+  font-weight: 400;
   width: ${({ hideInput }) => (hideInput ? '100%' : 'initial')};
-  padding: 0 8px;
+  padding: ${({ selected, phase0Flag }) => (phase0Flag ? (selected ? '4px 8px 4px 4px' : '6px 6px 6px 8px') : '0 8px')};
+  gap: ${({ phase0Flag }) => (phase0Flag ? '8px' : '0px')};
   justify-content: space-between;
   margin-left: ${({ hideInput }) => (hideInput ? '0' : '12px')};
   :focus,
   :hover {
-    background-color: ${({ selected, theme }) =>
-      selected ? theme.deprecated_bg3 : darken(0.05, theme.deprecated_primary1)};
+    background-color: ${({ selected, theme, phase0Flag }) =>
+      selected
+        ? phase0Flag
+          ? theme.backgroundSurface
+          : theme.deprecated_bg3
+        : darken(0.05, theme.deprecated_primary1)};
   }
   visibility: ${({ visible }) => (visible ? 'visible' : 'hidden')};
 `
+const InputCurrencySelect = styled(CurrencySelect)<{ phase0Flag: boolean }>`
+  background-color: ${({ theme, selected, phase0Flag }) =>
+    phase0Flag && (selected ? theme.backgroundContainer : theme.accentAction)};
+  :focus,
+  :hover {
+    background-color: ${({ selected, theme, phase0Flag }) =>
+      selected
+        ? phase0Flag
+          ? theme.backgroundAction
+          : theme.deprecated_bg3
+        : darken(0.05, theme.deprecated_primary1)};
+  }
+`
 
-const InputRow = styled.div<{ selected: boolean }>`
+const InputRow = styled.div<{ selected: boolean; phase0Flag: boolean }>`
   ${({ theme }) => theme.flexRowNoWrap}
   align-items: center;
   justify-content: space-between;
-  padding: ${({ selected }) => (selected ? ' 1rem 1rem 0.75rem 1rem' : '1rem 1rem 1rem 1rem')};
+  padding: ${({ selected, phase0Flag }) =>
+    phase0Flag ? '0px' : selected ? ' 1rem 1rem 0.75rem 1rem' : '1rem 1rem 1rem 1rem'};
 `
 
 const LabelRow = styled.div`
@@ -109,15 +138,29 @@ const LabelRow = styled.div`
   font-size: 0.75rem;
   line-height: 1rem;
   padding: 0 1rem 1rem;
+
   span:hover {
     cursor: pointer;
     color: ${({ theme }) => darken(0.2, theme.deprecated_text2)};
   }
 `
 
-const FiatRow = styled(LabelRow)`
+const FiatRow = styled(LabelRow)<{ phase0Flag: boolean }>`
   justify-content: flex-end;
-  height: 16px;
+  padding: ${({ phase0Flag }) => phase0Flag && '8px 0px'};
+  height: ${({ phase0Flag }) => !phase0Flag && '24px'};
+`
+
+const NoBalanceState = styled.div`
+  color: ${({ theme }) => theme.textTertiary};
+  font-weight: 400;
+  justify-content: space-between;
+  padding: 0px 4px;
+`
+const NoBalanceDash = styled.span`
+  color: ${({ theme }) => theme.textTertiary};
+  font-variant: small-caps;
+  font-feature-settings: 'pnum' on, 'lnum' on;
 `
 
 const Aligner = styled.span`
@@ -127,31 +170,34 @@ const Aligner = styled.span`
   width: 100%;
 `
 
-const StyledDropDown = styled(DropDown)<{ selected: boolean }>`
+const StyledDropDown = styled(DropDown)<{ selected: boolean; phase0Flag: boolean }>`
   margin: 0 0.25rem 0 0.35rem;
   height: 35%;
+  margin-left: ${({ phase0Flag }) => phase0Flag && '8px'};
 
   path {
     stroke: ${({ selected, theme }) => (selected ? theme.deprecated_text1 : theme.deprecated_white)};
-    stroke-width: 1.5px;
+    stroke-width: ${({ phase0Flag }) => (phase0Flag ? '2px' : '1.5px')};
   }
 `
 
-const StyledTokenName = styled.span<{ active?: boolean }>`
+const StyledTokenName = styled.span<{ active?: boolean; phase0Flag: boolean }>`
   ${({ active }) => (active ? '  margin: 0 0.25rem 0 0.25rem;' : '  margin: 0 0.25rem 0 0.25rem;')}
   font-size:  ${({ active }) => (active ? '18px' : '18px')};
+  font-weight: ${({ phase0Flag }) => (phase0Flag ? '600' : '500')};
 `
 
-const StyledBalanceMax = styled.button<{ disabled?: boolean }>`
+const StyledBalanceMax = styled.button<{ disabled?: boolean; phase0Flag: boolean }>`
   background-color: transparent;
-  background-color: ${({ theme }) => theme.deprecated_primary5};
+  background-color: ${({ theme, phase0Flag }) => !phase0Flag && theme.deprecated_primary5};
   border: none;
-  border-radius: 12px;
-  color: ${({ theme }) => theme.deprecated_primary1};
+  text-transform: ${({ phase0Flag }) => !phase0Flag && 'uppercase'};
+  border-radius: ${({ phase0Flag }) => !phase0Flag && '12px'};
+  color: ${({ theme, phase0Flag }) => (phase0Flag ? theme.accentAction : theme.deprecated_primary1)};
   cursor: pointer;
-  font-size: 11px;
-  font-weight: 500;
-  margin-left: 0.25rem;
+  font-size: ${({ phase0Flag }) => (phase0Flag ? '14px' : '11px')};
+  font-weight: ${({ phase0Flag }) => (phase0Flag ? '600' : '500')};
+  margin-left: ${({ phase0Flag }) => (phase0Flag ? '0px' : '0.25rem')};
   opacity: ${({ disabled }) => (!disabled ? 1 : 0.4)};
   padding: 4px 6px;
   pointer-events: ${({ disabled }) => (!disabled ? 'initial' : 'none')};
@@ -165,9 +211,11 @@ const StyledBalanceMax = styled.button<{ disabled?: boolean }>`
   }
 `
 
-const StyledNumericalInput = styled(NumericalInput)<{ $loading: boolean }>`
+const StyledNumericalInput = styled(NumericalInput)<{ $loading: boolean; phase0Flag: boolean }>`
   ${loadingOpacityMixin};
   text-align: left;
+  font-variant: ${({ phase0Flag }) => phase0Flag && 'small-caps'};
+  font-feature-settings: ${({ phase0Flag }) => phase0Flag && 'pnum on, lnum on'};
 `
 
 interface CurrencyInputPanelProps {
@@ -217,6 +265,8 @@ export default function CurrencyInputPanel({
 }: CurrencyInputPanelProps) {
   const [modalOpen, setModalOpen] = useState(false)
   const { account, chainId } = useWeb3React()
+  const phase0Flag = usePhase0Flag()
+  const phase0FlagEnabled = phase0Flag === Phase0Variant.Enabled
   const selectedCurrencyBalance = useCurrencyBalance(account ?? undefined, currency ?? undefined)
   const theme = useTheme()
 
@@ -227,9 +277,9 @@ export default function CurrencyInputPanel({
   const chainAllowed = isSupportedChain(chainId)
 
   return (
-    <InputPanel id={id} hideInput={hideInput} {...rest}>
+    <InputPanel id={id} hideInput={hideInput} {...rest} phase0Flag={phase0FlagEnabled}>
       {locked && (
-        <FixedContainer>
+        <FixedContainer phase0Flag={phase0FlagEnabled}>
           <AutoColumn gap="sm" justify="center">
             <Lock />
             <ThemedText.DeprecatedLabel fontSize="12px" textAlign="center" padding="0 12px">
@@ -238,8 +288,12 @@ export default function CurrencyInputPanel({
           </AutoColumn>
         </FixedContainer>
       )}
-      <Container hideInput={hideInput} disabled={!chainAllowed}>
-        <InputRow style={hideInput ? { padding: '0', borderRadius: '8px' } : {}} selected={!onCurrencySelect}>
+      <Container hideInput={hideInput} disabled={!chainAllowed} phase0Flag={phase0FlagEnabled}>
+        <InputRow
+          style={hideInput ? { padding: '0', borderRadius: '8px' } : {}}
+          selected={!onCurrencySelect}
+          phase0Flag={phase0FlagEnabled}
+        >
           {!hideInput && (
             <StyledNumericalInput
               className="token-amount-input"
@@ -247,14 +301,16 @@ export default function CurrencyInputPanel({
               onUserInput={onUserInput}
               disabled={!chainAllowed}
               $loading={loading}
+              phase0Flag={phase0FlagEnabled}
             />
           )}
 
-          <CurrencySelect
+          <InputCurrencySelect
             disabled={!chainAllowed}
             visible={currency !== undefined}
             selected={!!currency}
             hideInput={hideInput}
+            phase0Flag={phase0FlagEnabled}
             className="open-currency-select-button"
             onClick={() => {
               if (onCurrencySelect) {
@@ -269,28 +325,42 @@ export default function CurrencyInputPanel({
                     <DoubleCurrencyLogo currency0={pair.token0} currency1={pair.token1} size={24} margin={true} />
                   </span>
                 ) : currency ? (
-                  <CurrencyLogo style={{ marginRight: '0.5rem' }} currency={currency} size={'24px'} />
+                  <CurrencyLogo style={{ marginRight: '2px' }} currency={currency} size={'24px'} />
                 ) : null}
                 {pair ? (
-                  <StyledTokenName className="pair-name-container">
+                  <StyledTokenName className="pair-name-container" phase0Flag={phase0FlagEnabled}>
                     {pair?.token0.symbol}:{pair?.token1.symbol}
                   </StyledTokenName>
                 ) : (
-                  <StyledTokenName className="token-symbol-container" active={Boolean(currency && currency.symbol)}>
+                  <StyledTokenName
+                    className="token-symbol-container"
+                    active={Boolean(currency && currency.symbol)}
+                    phase0Flag={phase0FlagEnabled}
+                  >
                     {(currency && currency.symbol && currency.symbol.length > 20
                       ? currency.symbol.slice(0, 4) +
                         '...' +
                         currency.symbol.slice(currency.symbol.length - 5, currency.symbol.length)
-                      : currency?.symbol) || <Trans>Select a token</Trans>}
+                      : currency?.symbol) || <Trans>Select token</Trans>}
                   </StyledTokenName>
                 )}
               </RowFixed>
-              {onCurrencySelect && <StyledDropDown selected={!!currency} />}
+              {onCurrencySelect && <StyledDropDown selected={!!currency} phase0Flag={phase0FlagEnabled} />}
             </Aligner>
-          </CurrencySelect>
+          </InputCurrencySelect>
         </InputRow>
+        {phase0FlagEnabled && !currency && (
+          <NoBalanceState>
+            <FiatRow phase0Flag={phase0FlagEnabled}>
+              <RowBetween>
+                <NoBalanceDash>-</NoBalanceDash>
+                <NoBalanceDash>-</NoBalanceDash>
+              </RowBetween>
+            </FiatRow>
+          </NoBalanceState>
+        )}
         {!hideInput && !hideBalance && currency && (
-          <FiatRow>
+          <FiatRow phase0Flag={phase0FlagEnabled}>
             <RowBetween>
               <LoadingOpacityContainer $loading={loading}>
                 <FiatValue fiatValue={fiatValue} priceImpact={priceImpact} />
@@ -318,8 +388,8 @@ export default function CurrencyInputPanel({
                       name={EventName.SWAP_MAX_TOKEN_AMOUNT_SELECTED}
                       element={ElementName.MAX_TOKEN_AMOUNT_BUTTON}
                     >
-                      <StyledBalanceMax onClick={onMax}>
-                        <Trans>MAX</Trans>
+                      <StyledBalanceMax onClick={onMax} phase0Flag={phase0FlagEnabled}>
+                        <Trans>Max</Trans>
                       </StyledBalanceMax>
                     </TraceEvent>
                   ) : null}

src/components/ErrorBoundary/index.tsx

@@ -20,7 +20,6 @@ const FallbackWrapper = styled.div`
 const BodyWrapper = styled.div<{ margin?: string }>`
   padding: 1rem;
   width: 100%;
-  white-space: ;
 `
 
 const CodeBlockWrapper = styled.div`

src/components/Explore/TokenDetails/LoadingTokenDetail.tsx

@@ -56,6 +56,7 @@ const StatsLoadingContainer = styled.div`
 const ChartAnimation = styled.div`
   display: flex;
   animation: wave 8s cubic-bezier(0.36, 0.45, 0.63, 0.53) infinite;
+  overflow: hidden;
 
   @keyframes wave {
     0% {
@@ -69,6 +70,7 @@ const ChartAnimation = styled.div`
 const Space = styled.div<{ heightSize: number }>`
   height: ${({ heightSize }) => `${heightSize}px`};
 `
+
 /* Loading State: row component with loading bubbles */
 export default function LoadingTokenDetail() {
   return (

src/components/Explore/TokenTable/FavoriteButton.tsx

@@ -15,8 +15,8 @@ const FavoriteButtonContent = styled.div`
 const StyledFavoriteButton = styled.button<{ active: boolean }>`
   padding: 0px 16px;
   border-radius: 12px;
-  background-color: ${({ theme, active }) => (active ? theme.accentAction : theme.none)};
-  border: 1px solid ${({ theme, active }) => (active ? theme.accentActive : theme.backgroundOutline)};
+  background-color: ${({ theme, active }) => (active ? theme.accentAction : theme.backgroundAction)};
+  border: none;
   color: ${({ theme }) => theme.textPrimary};
   font-size: 16px;
   font-weight: 600;

src/components/Explore/TokenTable/NetworkFilter.tsx

@@ -35,7 +35,7 @@ const InternalLinkMenuItem = styled(InternalMenuItem)`
   justify-content: space-between;
   text-decoration: none;
   cursor: pointer;
-  border-radius: 12px;
+  border-radius: 8px;
 
   :hover {
     background-color: ${({ theme }) => theme.hoverState};
@@ -43,7 +43,7 @@ const InternalLinkMenuItem = styled(InternalMenuItem)`
   }
 `
 const MenuTimeFlyout = styled.span`
-  min-width: 200px;
+  min-width: 240px;
   max-height: 350px;
   overflow: auto;
   background-color: ${({ theme }) => theme.backgroundSurface};
@@ -58,21 +58,14 @@ const MenuTimeFlyout = styled.span`
   top: 48px;
   z-index: 100;
   left: 0px;
-
-  ${({ theme }) => theme.mediaWidth.upToMedium`
-    bottom: unset;
-    right: 0;
-    left: unset;
-  `};
 `
 
 const StyledMenuButton = styled.button<{ open: boolean }>`
   width: 100%;
   height: 100%;
   color: ${({ theme, open }) => (open ? theme.blue200 : theme.textPrimary)};
-  background-color: transparent;
-  background-color: ${({ theme, open }) => (open ? theme.accentActionSoft : theme.none)};
-  border: 1px solid ${({ theme, open }) => (open ? theme.accentActiveSoft : theme.backgroundOutline)};
+  border: none;
+  background-color: ${({ theme, open }) => (open ? theme.accentActionSoft : theme.backgroundAction)};
   margin: 0;
   padding: 6px 12px 6px 12px;
   border-radius: 12px;
@@ -80,13 +73,14 @@ const StyledMenuButton = styled.button<{ open: boolean }>`
   line-height: 24px;
   font-weight: 400;
 
-  :hover,
-  :focus {
+  :hover {
     cursor: pointer;
     outline: none;
-    background-color: ${({ theme, open }) => !open && theme.backgroundContainer};
+    background-color: ${({ theme, open }) => (open ? theme.accentActionSoft : theme.backgroundContainer)};
+  }
+  :focus {
+    background-color: ${({ theme, open }) => (open ? theme.accentActionSoft : theme.backgroundAction)};
   }
-
   svg {
     margin-top: 2px;
   }

src/components/Explore/TokenTable/SearchBar.tsx

@@ -16,12 +16,12 @@ const SearchInput = styled.input<{ expanded: boolean }>`
   background: no-repeat scroll 7px 7px;
   background-image: ${({ expanded }) => !expanded && `url(${searchIcon})`};
   background-size: 20px 20px;
-  background-position: 11px center;
+  background-position: 14px center;
   background-color: ${({ theme }) => theme.none};
   border-radius: 12px;
   border: 1px solid ${({ theme }) => theme.backgroundOutline};
   height: 100%;
-  width: ${({ expanded }) => (expanded ? '100%' : '44px')};
+  width: ${({ expanded }) => (expanded ? '100%' : '52px')};
   font-size: 16px;
   padding-left: 18px;
   color: ${({ theme }) => theme.textPrimary};
@@ -38,7 +38,7 @@ const SearchInput = styled.input<{ expanded: boolean }>`
     border: none;
   }
   ::placeholder {
-    color: ${({ expanded, theme }) => expanded && theme.textTertiary};
+    color: ${({ expanded, theme }) => (expanded ? theme.textTertiary : theme.none)};
   }
   ::-webkit-search-cancel-button {
     -webkit-appearance: none;

src/components/Explore/TokenTable/TimeSelector.tsx

@@ -7,7 +7,7 @@ import { useModalIsOpen, useToggleModal } from 'state/application/hooks'
 import { ApplicationModal } from 'state/application/reducer'
 import styled, { useTheme } from 'styled-components/macro'
 
-import { MOBILE_MEDIA_BREAKPOINT } from '../constants'
+import { MOBILE_MEDIA_BREAKPOINT, SMALL_MEDIA_BREAKPOINT } from '../constants'
 import { filterTimeAtom } from '../state'
 
 export const TIME_DISPLAYS: { [key: string]: string } = {
@@ -18,13 +18,13 @@ export const TIME_DISPLAYS: { [key: string]: string } = {
   year: '1Y',
 }
 
-const TIMES = Object.values(TimePeriod)
+const TIMES = [TimePeriod.hour, TimePeriod.day, TimePeriod.week, TimePeriod.month, TimePeriod.year]
 
 const InternalMenuItem = styled.div`
   flex: 1;
   padding: 8px;
   color: ${({ theme }) => theme.textPrimary};
-  border-radius: 12px;
+  border-radius: 8px;
 
   :hover {
     cursor: pointer;
@@ -47,7 +47,7 @@ const InternalLinkMenuItem = styled(InternalMenuItem)`
   }
 `
 const MenuTimeFlyout = styled.span`
-  min-width: 200px;
+  min-width: 240px;
   max-height: 300px;
   overflow: auto;
   background-color: ${({ theme }) => theme.backgroundSurface};
@@ -62,22 +62,20 @@ const MenuTimeFlyout = styled.span`
   top: 48px;
   z-index: 100;
   left: 0px;
-  ${({ theme }) => theme.mediaWidth.upToMedium`
-    bottom: unset;
-    right: 0;
+
+  @media only screen and (max-width: ${SMALL_MEDIA_BREAKPOINT}) {
+    right: 0px;
     left: unset;
-  `};
+  }
 `
 
 const StyledMenuButton = styled.button<{ open: boolean }>`
   width: 100%;
   height: 100%;
   border: none;
-  background-color: transparent;
   color: ${({ theme, open }) => (open ? theme.blue200 : theme.textPrimary)};
   margin: 0;
-  background-color: ${({ theme, open }) => (open ? theme.accentActionSoft : theme.none)};
-  border: 1px solid ${({ theme, open }) => (open ? theme.accentActiveSoft : theme.backgroundOutline)};
+  background-color: ${({ theme, open }) => (open ? theme.accentActionSoft : theme.backgroundAction)};
   padding: 6px 12px 6px 12px;
   border-radius: 12px;
   font-size: 16px;
@@ -87,9 +85,11 @@ const StyledMenuButton = styled.button<{ open: boolean }>`
   :hover {
     cursor: pointer;
     outline: none;
-    background-color: ${({ theme, open }) => !open && theme.backgroundContainer};
+    background-color: ${({ theme, open }) => (open ? theme.accentActionSoft : theme.backgroundContainer)};
+  }
+  :focus {
+    background-color: ${({ theme, open }) => (open ? theme.accentActionSoft : theme.backgroundAction)};
   }
-
   svg {
     margin-top: 2px;
   }

src/components/Explore/TokenTable/TokenRow.tsx

@@ -132,7 +132,7 @@ const StyledHeaderRow = styled(StyledTokenRow)`
   width: 100%;
 
   &:hover {
-    background-color: ${({ theme }) => theme.backgroundSurface};
+    background-color: ${({ theme }) => theme.none};
   }
 
   @media only screen and (max-width: ${MAX_WIDTH_MEDIA_BREAKPOINT}) {
@@ -163,6 +163,7 @@ const DataCell = styled(Cell)<{ sortable: boolean }>`
   }
 `
 const MarketCapCell = styled(DataCell)`
+  padding-right: 8px;
   @media only screen and (max-width: ${MEDIUM_MEDIA_BREAKPOINT}) {
     display: none;
   }
@@ -172,13 +173,12 @@ const NameCell = styled(Cell)`
   padding-left: 8px;
   min-width: 200px;
   gap: 8px;
-
-  @media only screen and (max-width: ${MOBILE_MEDIA_BREAKPOINT}) {
+`
+const PriceCell = styled(DataCell)`
   padding-right: 8px;
-  }
 `
-const PriceCell = styled(DataCell)``
 const PercentChangeCell = styled(DataCell)`
+  padding-right: 8px;
   @media only screen and (max-width: ${MOBILE_MEDIA_BREAKPOINT}) {
     display: none;
   }
@@ -212,7 +212,6 @@ const HeaderCellWrapper = styled.span<{ onClick?: () => void }>`
   display: flex;
   height: 100%;
   justify-content: flex-end;
-  padding-right: 8px;
   width: 100%;
 `
 const SparkLineCell = styled(Cell)`
@@ -266,6 +265,7 @@ const TokenSymbol = styled(Cell)`
   }
 `
 const VolumeCell = styled(DataCell)`
+  padding-right: 8px;
   @media only screen and (max-width: ${LARGE_MEDIA_BREAKPOINT}) {
     display: none;
   }
@@ -381,7 +381,7 @@ export function HeaderRow() {
       address={null}
       header={true}
       favorited={null}
-      listNumber={null}
+      listNumber="#"
       tokenInfo={<Trans>Token Name</Trans>}
       price={<HeaderCell category={Category.price} sortable />}
       percentChange={<HeaderCell category={Category.percentChange} sortable />}
@@ -483,7 +483,7 @@ export default function LoadedRow({
               toggleFavorite()
             }}
           >
-            <Heart size={15} color={heartColor} fill={heartColor} />
+            <Heart size={18} color={heartColor} fill={heartColor} />
           </ClickFavorited>
         }
         listNumber={tokenListIndex + 1}

src/components/NumericalInput/index.tsx

+import { Phase0Variant, usePhase0Flag } from 'featureFlags/flags/phase0'
 import React from 'react'
 import styled from 'styled-components/macro'
 
 import { escapeRegExp } from '../../utils'
 
-const StyledInput = styled.input<{ error?: boolean; fontSize?: string; align?: string }>`
+const StyledInput = styled.input<{ error?: boolean; fontSize?: string; align?: string; phase0Flag: boolean }>`
   color: ${({ error, theme }) => (error ? theme.deprecated_red1 : theme.deprecated_text1)};
   width: 0;
   position: relative;
-  font-weight: 500;
+  font-weight: ${({ phase0Flag }) => (phase0Flag ? 400 : 500)};
   outline: none;
   border: none;
   flex: 1 1 auto;
-  background-color: ${({ theme }) => theme.deprecated_bg1};
+  background-color: ${({ theme, phase0Flag }) => (phase0Flag ? theme.none : theme.deprecated_bg1)};
   font-size: ${({ fontSize }) => fontSize ?? '28px'};
   text-align: ${({ align }) => align && align};
   white-space: nowrap;
@@ -35,7 +36,7 @@ const StyledInput = styled.input<{ error?: boolean; fontSize?: string; align?: s
   }
 
   ::placeholder {
-    color: ${({ theme }) => theme.deprecated_text4};
+    color: ${({ theme, phase0Flag }) => (phase0Flag ? theme.textSecondary : theme.deprecated_text4)};
   }
 `
 
@@ -55,6 +56,8 @@ export const Input = React.memo(function InnerInput({
   align?: 'right' | 'left'
   prependSymbol?: string | undefined
 } & Omit<React.HTMLProps<HTMLInputElement>, 'ref' | 'onChange' | 'as'>) {
+  const phase0Flag = usePhase0Flag()
+  const phase0FlagEnabled = phase0Flag === Phase0Variant.Enabled
   const enforcer = (nextUserInput: string) => {
     if (nextUserInput === '' || inputRegex.test(escapeRegExp(nextUserInput))) {
       onUserInput(nextUserInput)
@@ -65,6 +68,7 @@ export const Input = React.memo(function InnerInput({
     <StyledInput
       {...rest}
       value={prependSymbol && value ? prependSymbol + value : value}
+      phase0Flag={phase0FlagEnabled}
       onChange={(event) => {
         if (prependSymbol) {
           const value = event.target.value
@@ -87,7 +91,7 @@ export const Input = React.memo(function InnerInput({
       // text-specific options
       type="text"
       pattern="^[0-9]*[.,]?[0-9]*$"
-      placeholder={placeholder || '0.0'}
+      placeholder={placeholder || (phase0FlagEnabled ? '0' : '0.0')}
       minLength={1}
       maxLength={79}
       spellCheck="false"

src/components/QuestionHelper/index.tsx

+import { Phase0Variant, usePhase0Flag } from 'featureFlags/flags/phase0'
 import { ReactNode, useCallback, useState } from 'react'
+import { HelpCircle } from 'react-feather'
 import styled from 'styled-components/macro'
 
 import Tooltip from '../Tooltip'
 
-const QuestionWrapper = styled.div`
+const QuestionWrapper = styled.div<{ phase0Flag: boolean }>`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -16,8 +18,8 @@ const QuestionWrapper = styled.div`
   cursor: default;
   border-radius: 36px;
   font-size: 12px;
-  background-color: ${({ theme }) => theme.deprecated_bg2};
-  color: ${({ theme }) => theme.deprecated_text2};
+  border-radius: ${({ phase0Flag }) => phase0Flag && '12px'};
+  color: ${({ theme, phase0Flag }) => !phase0Flag && theme.deprecated_text2};
 
   :hover,
   :focus {
@@ -25,8 +27,12 @@ const QuestionWrapper = styled.div`
   }
 `
 
-const QuestionMark = styled.span`
+const QuestionMark = styled.span<{ phase0Flag?: boolean }>`
   font-size: 14px;
+  margin-left: ${({ phase0Flag }) => phase0Flag && '8px'};
+  align-items: ${({ phase0Flag }) => phase0Flag && 'center'};
+  color: ${({ theme, phase0Flag }) => phase0Flag && theme.textSecondary};
+  margin-top: ${({ phase0Flag }) => phase0Flag && '2.5px'};
 `
 
 export default function QuestionHelper({ text }: { text: ReactNode; size?: number }) {
@@ -34,12 +40,15 @@ export default function QuestionHelper({ text }: { text: ReactNode; size?: numbe
 
   const open = useCallback(() => setShow(true), [setShow])
   const close = useCallback(() => setShow(false), [setShow])
-
+  const phase0Flag = usePhase0Flag()
+  const phase0FlagEnabled = phase0Flag === Phase0Variant.Enabled
   return (
     <span style={{ marginLeft: 4, display: 'flex', alignItems: 'center' }}>
       <Tooltip text={text} show={show}>
-        <QuestionWrapper onClick={open} onMouseEnter={open} onMouseLeave={close}>
-          <QuestionMark>?</QuestionMark>
+        <QuestionWrapper onClick={open} onMouseEnter={open} onMouseLeave={close} phase0Flag={phase0FlagEnabled}>
+          <QuestionMark phase0Flag={phase0FlagEnabled}>
+            {phase0FlagEnabled ? <HelpCircle size={16}></HelpCircle> : '?'}
+          </QuestionMark>
         </QuestionWrapper>
       </Tooltip>
     </span>

src/components/Settings/index.tsx

@@ -3,6 +3,7 @@ import { t, Trans } from '@lingui/macro'
 import { Percent } from '@uniswap/sdk-core'
 import { useWeb3React } from '@web3-react/core'
 import { sendEvent } from 'components/analytics'
+import { Phase0Variant, usePhase0Flag } from 'featureFlags/flags/phase0'
 import { isSupportedChainId } from 'lib/hooks/routing/clientSideSmartOrderRouter'
 import { useContext, useRef, useState } from 'react'
 import { Settings, X } from 'react-feather'
@@ -22,16 +23,16 @@ import { RowBetween, RowFixed } from '../Row'
 import Toggle from '../Toggle'
 import TransactionSettings from '../TransactionSettings'
 
-const StyledMenuIcon = styled(Settings)`
+const StyledMenuIcon = styled(Settings)<{ phase0Flag: boolean }>`
   height: 20px;
   width: 20px;
 
   > * {
-    stroke: ${({ theme }) => theme.deprecated_text1};
+    stroke: ${({ theme, phase0Flag }) => (phase0Flag ? theme.textSecondary : theme.deprecated_text1)};
   }
 `
 
-const StyledCloseIcon = styled(X)`
+const StyledCloseIcon = styled(X)<{ phase0Flag: boolean }>`
   height: 20px;
   width: 20px;
   :hover {
@@ -39,7 +40,7 @@ const StyledCloseIcon = styled(X)`
   }
 
   > * {
-    stroke: ${({ theme }) => theme.deprecated_text1};
+    stroke: ${({ theme, phase0Flag }) => (phase0Flag ? theme.textSecondary : theme.deprecated_text1)};
   }
 `
 
@@ -82,10 +83,10 @@ const StyledMenu = styled.div`
   text-align: left;
 `
 
-const MenuFlyout = styled.span`
+const MenuFlyout = styled.span<{ phase0Flag: boolean }>`
   min-width: 20.125rem;
-  background-color: ${({ theme }) => theme.deprecated_bg2};
-  border: 1px solid ${({ theme }) => theme.deprecated_bg3};
+  background-color: ${({ theme, phase0Flag }) => (phase0Flag ? theme.backgroundSurface : theme.deprecated_bg2)};
+  border: 1px solid ${({ theme, phase0Flag }) => (phase0Flag ? theme.backgroundOutline : theme.deprecated_bg3)};
   box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.01), 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 16px 24px rgba(0, 0, 0, 0.04),
     0px 24px 32px rgba(0, 0, 0, 0.01);
   border-radius: 12px;
@@ -96,6 +97,7 @@ const MenuFlyout = styled.span`
   top: 2rem;
   right: 0rem;
   z-index: 100;
+  color: ${({ theme, phase0Flag }) => phase0Flag && theme.textPrimary};
 
   ${({ theme }) => theme.mediaWidth.upToMedium`
     min-width: 18.125rem;
@@ -121,6 +123,8 @@ const ModalContentWrapper = styled.div`
 
 export default function SettingsTab({ placeholderSlippage }: { placeholderSlippage: Percent }) {
   const { chainId } = useWeb3React()
+  const phase0Flag = usePhase0Flag()
+  const phase0FlagEnabled = phase0Flag === Phase0Variant.Enabled
 
   const node = useRef<HTMLDivElement>()
   const open = useModalIsOpen(ApplicationModal.SETTINGS)
@@ -148,7 +152,7 @@ export default function SettingsTab({ placeholderSlippage }: { placeholderSlippa
               <Text fontWeight={500} fontSize={20}>
                 <Trans>Are you sure?</Trans>
               </Text>
-              <StyledCloseIcon onClick={() => setShowConfirmation(false)} />
+              <StyledCloseIcon onClick={() => setShowConfirmation(false)} phase0Flag={phase0FlagEnabled} />
             </RowBetween>
             <Break />
             <AutoColumn gap="lg" style={{ padding: '0 2rem' }}>
@@ -186,7 +190,7 @@ export default function SettingsTab({ placeholderSlippage }: { placeholderSlippa
         id="open-settings-dialog-button"
         aria-label={t`Transaction Settings`}
       >
-        <StyledMenuIcon />
+        <StyledMenuIcon phase0Flag={phase0FlagEnabled} />
         {expertMode ? (
           <EmojiWrapper>
             <span role="img" aria-label="wizard-icon">
@@ -196,10 +200,10 @@ export default function SettingsTab({ placeholderSlippage }: { placeholderSlippa
         ) : null}
       </StyledMenuButton>
       {open && (
-        <MenuFlyout>
+        <MenuFlyout phase0Flag={phase0FlagEnabled}>
           <AutoColumn gap="md" style={{ padding: '1rem' }}>
             <Text fontWeight={600} fontSize={14}>
-              <Trans>Transaction Settings</Trans>
+              <Trans>{phase0FlagEnabled ? 'Settings' : 'Transaction Settings'}</Trans>
             </Text>
             <TransactionSettings placeholderSlippage={placeholderSlippage} />
             <Text fontWeight={600} fontSize={14}>

src/components/Toggle/index.tsx

+import { Phase0Variant, usePhase0Flag } from 'featureFlags/flags/phase0'
 import { darken } from 'polished'
 import { useState } from 'react'
 import styled, { keyframes } from 'styled-components/macro'
 
-const Wrapper = styled.button<{ isActive?: boolean; activeElement?: boolean }>`
+const Wrapper = styled.button<{ isActive?: boolean; activeElement?: boolean; phase0Flag: boolean }>`
   align-items: center;
-  background: ${({ theme }) => theme.deprecated_bg1};
+  background: ${({ isActive, theme, phase0Flag }) =>
+    phase0Flag && isActive ? theme.accentActionSoft : theme.deprecated_bg1};
   border: none;
   border-radius: 20px;
   cursor: pointer;
@@ -71,6 +73,8 @@ interface ToggleProps {
 
 export default function Toggle({ id, bgColor, isActive, toggle }: ToggleProps) {
   const [isInitialToggleLoad, setIsInitialToggleLoad] = useState(true)
+  const phase0Flag = usePhase0Flag()
+  const phase0FlagEnabled = phase0Flag === Phase0Variant.Enabled
 
   const switchToggle = () => {
     toggle()
@@ -78,7 +82,7 @@ export default function Toggle({ id, bgColor, isActive, toggle }: ToggleProps) {
   }
 
   return (
-    <Wrapper id={id} isActive={isActive} onClick={switchToggle}>
+    <Wrapper id={id} isActive={isActive} onClick={switchToggle} phase0Flag={phase0FlagEnabled}>
       <ToggleElement isActive={isActive} bgColor={bgColor} isInitialToggleLoad={isInitialToggleLoad} />
     </Wrapper>
   )

src/components/TransactionSettings/index.tsx

@@ -3,6 +3,7 @@ import { Percent } from '@uniswap/sdk-core'
 import { useWeb3React } from '@web3-react/core'
 import { L2_CHAIN_IDS } from 'constants/chains'
 import { DEFAULT_DEADLINE_FROM_NOW } from 'constants/misc'
+import { Phase0Variant, usePhase0Flag } from 'featureFlags/flags/phase0'
 import ms from 'ms.macro'
 import { darken } from 'polished'
 import { useContext, useState } from 'react'
@@ -41,8 +42,9 @@ const FancyButton = styled.button`
   }
 `
 
-const Option = styled(FancyButton)<{ active: boolean }>`
+const Option = styled(FancyButton)<{ active: boolean; phase0Flag: boolean }>`
   margin-right: 8px;
+  border-radius: ${({ phase0Flag }) => phase0Flag && '12px'};
   :hover {
     cursor: pointer;
   }
@@ -50,9 +52,10 @@ const Option = styled(FancyButton)<{ active: boolean }>`
   color: ${({ active, theme }) => (active ? theme.deprecated_white : theme.deprecated_text1)};
 `
 
-const Input = styled.input`
+const Input = styled.input<{ phase0Flag: boolean }>`
   background: ${({ theme }) => theme.deprecated_bg1};
   font-size: 16px;
+  border-radius: ${({ phase0Flag }) => phase0Flag && '12px'};
   width: auto;
   outline: none;
   &::-webkit-outer-spin-button,
@@ -63,10 +66,11 @@ const Input = styled.input`
   text-align: right;
 `
 
-const OptionCustom = styled(FancyButton)<{ active?: boolean; warning?: boolean }>`
+const OptionCustom = styled(FancyButton)<{ active?: boolean; warning?: boolean; phase0Flag: boolean }>`
   height: 2rem;
   position: relative;
   padding: 0 0.75rem;
+  border-radius: ${({ phase0Flag }) => phase0Flag && '12px'};
   flex: 1;
   border: ${({ theme, active, warning }) =>
     active
@@ -101,6 +105,8 @@ const THREE_DAYS_IN_SECONDS = ms`3 days` / 1000
 export default function TransactionSettings({ placeholderSlippage }: TransactionSettingsProps) {
   const { chainId } = useWeb3React()
   const theme = useContext(ThemeContext)
+  const phase0Flag = usePhase0Flag()
+  const phase0FlagEnabled = phase0Flag === Phase0Variant.Enabled
 
   const userSlippageTolerance = useUserSlippageTolerance()
   const setUserSlippageTolerance = useSetUserSlippageTolerance()
@@ -176,6 +182,7 @@ export default function TransactionSettings({ placeholderSlippage }: Transaction
         </RowFixed>
         <RowBetween>
           <Option
+            phase0Flag={phase0FlagEnabled}
             onClick={() => {
               parseSlippageInput('')
             }}
@@ -183,7 +190,12 @@ export default function TransactionSettings({ placeholderSlippage }: Transaction
           >
             <Trans>Auto</Trans>
           </Option>
-          <OptionCustom active={userSlippageTolerance !== 'auto'} warning={!!slippageError} tabIndex={-1}>
+          <OptionCustom
+            phase0Flag={phase0FlagEnabled}
+            active={userSlippageTolerance !== 'auto'}
+            warning={!!slippageError}
+            tabIndex={-1}
+          >
             <RowBetween>
               {tooLow || tooHigh ? (
                 <SlippageEmojiContainer>
@@ -193,6 +205,7 @@ export default function TransactionSettings({ placeholderSlippage }: Transaction
                 </SlippageEmojiContainer>
               ) : null}
               <Input
+                phase0Flag={phase0FlagEnabled}
                 placeholder={placeholderSlippage.toFixed(2)}
                 value={
                   slippageInput.length > 0
@@ -242,8 +255,14 @@ export default function TransactionSettings({ placeholderSlippage }: Transaction
             />
           </RowFixed>
           <RowFixed>
-            <OptionCustom style={{ width: '80px' }} warning={!!deadlineError} tabIndex={-1}>
+            <OptionCustom
+              style={{ width: '80px' }}
+              warning={!!deadlineError}
+              tabIndex={-1}
+              phase0Flag={phase0FlagEnabled}
+            >
               <Input
+                phase0Flag={phase0FlagEnabled}
                 placeholder={(DEFAULT_DEADLINE_FROM_NOW / 60).toString()}
                 value={
                   deadlineInput.length > 0

src/components/swap/AdvancedSwapDetails.tsx

@@ -4,6 +4,7 @@ import { useWeb3React } from '@web3-react/core'
 import Card from 'components/Card'
 import { LoadingRows } from 'components/Loader/styled'
 import { SUPPORTED_GAS_ESTIMATE_CHAIN_IDS } from 'constants/chains'
+import { Phase0Variant, usePhase0Flag } from 'featureFlags/flags/phase0'
 import useNativeCurrency from 'lib/hooks/useNativeCurrency'
 import { useContext, useMemo } from 'react'
 import { InterfaceTrade } from 'state/routing/types'
@@ -54,6 +55,8 @@ export function AdvancedSwapDetails({
   const theme = useContext(ThemeContext)
   const { chainId } = useWeb3React()
   const nativeCurrency = useNativeCurrency()
+  const phase0Flag = usePhase0Flag()
+  const phase0FlagEnabled = phase0Flag === Phase0Variant.Enabled
 
   const { expectedOutputAmount, priceImpact } = useMemo(() => {
     return {
@@ -106,7 +109,7 @@ export function AdvancedSwapDetails({
             </ThemedText.DeprecatedBlack>
           </TextWithLoadingPlaceholder>
         </RowBetween>
-        <Separator />
+        <Separator phase0Flag={phase0FlagEnabled} />
         <RowBetween>
           <RowFixed style={{ marginRight: '20px' }}>
             <MouseoverTooltip

src/components/swap/SwapDetailsDropdown.tsx

@@ -10,7 +10,7 @@ import { LoadingOpacityContainer } from 'components/Loader/styled'
 import Row, { RowBetween, RowFixed } from 'components/Row'
 import { MouseoverTooltipContent } from 'components/Tooltip'
 import { SUPPORTED_GAS_ESTIMATE_CHAIN_IDS } from 'constants/chains'
-import { darken } from 'polished'
+import { Phase0Variant, usePhase0Flag } from 'featureFlags/flags/phase0'
 import { useState } from 'react'
 import { ChevronDown, Info } from 'react-feather'
 import { InterfaceTrade } from 'state/routing/types'
@@ -35,23 +35,20 @@ const StyledInfoIcon = styled(Info)`
   color: ${({ theme }) => theme.deprecated_text3};
 `
 
-const StyledCard = styled(OutlineCard)`
+const StyledCard = styled(OutlineCard)<{ phase0Flag: boolean }>`
   padding: 12px;
-  border: 1px solid ${({ theme }) => theme.deprecated_bg2};
+  border: 1px solid ${({ theme, phase0Flag }) => (phase0Flag ? theme.backgroundOutline : theme.deprecated_bg3)};
 `
 
-const StyledHeaderRow = styled(RowBetween)<{ disabled: boolean; open: boolean }>`
-  padding: 4px 8px;
-  border-radius: 12px;
-  background-color: ${({ open, theme }) => (open ? theme.deprecated_bg1 : 'transparent')};
+const StyledHeaderRow = styled(RowBetween)<{ disabled: boolean; open: boolean; phase0Flag: boolean }>`
+  padding: ${({ phase0Flag }) => (phase0Flag ? '8px 0px 0px 0px' : '4px 8px')};
+  background-color: ${({ open, theme, phase0Flag }) => (open && !phase0Flag ? theme.deprecated_bg1 : theme.none)};
   align-items: center;
+  border-top: 1px solid ${({ theme, phase0Flag }) => (phase0Flag ? theme.backgroundOutline : theme.none)};
+  margin-top: ${({ phase0Flag }) => phase0Flag && '8px'};
   cursor: ${({ disabled }) => (disabled ? 'initial' : 'pointer')};
   min-height: 40px;
-
-  :hover {
-    background-color: ${({ theme, disabled }) =>
-      disabled ? theme.deprecated_bg1 : darken(0.015, theme.deprecated_bg1)};
-  }
+  border-radius: ${({ phase0Flag }) => !phase0Flag && '12px'};
 `
 
 const RotatingArrow = styled(ChevronDown)<{ open?: boolean }>`
@@ -131,9 +128,11 @@ export default function SwapDetailsDropdown({
   const theme = useTheme()
   const { chainId } = useWeb3React()
   const [showDetails, setShowDetails] = useState(false)
+  const phase0Flag = usePhase0Flag()
+  const phase0FlagEnabled = phase0Flag === Phase0Variant.Enabled
 
   return (
-    <Wrapper>
+    <Wrapper style={{ marginTop: '8px' }}>
       <AutoColumn gap={'8px'} style={{ width: '100%', marginBottom: '-8px' }}>
         <TraceEvent
           events={[Event.onClick]}
@@ -141,7 +140,12 @@ export default function SwapDetailsDropdown({
           element={ElementName.SWAP_DETAILS_DROPDOWN}
           shouldLogImpression={!showDetails}
         >
-          <StyledHeaderRow onClick={() => setShowDetails(!showDetails)} disabled={!trade} open={showDetails}>
+          <StyledHeaderRow
+            phase0Flag={phase0FlagEnabled}
+            onClick={() => setShowDetails(!showDetails)}
+            disabled={!trade}
+            open={showDetails}
+          >
             <RowFixed style={{ position: 'relative' }}>
               {loading || syncing ? (
                 <StyledPolling>
@@ -208,7 +212,7 @@ export default function SwapDetailsDropdown({
         <AnimatedDropdown open={showDetails}>
           <AutoColumn gap={'8px'} style={{ padding: '0', paddingBottom: '8px' }}>
             {trade ? (
-              <StyledCard>
+              <StyledCard phase0Flag={phase0FlagEnabled}>
                 <AdvancedSwapDetails trade={trade} allowedSlippage={allowedSlippage} syncing={syncing} />
               </StyledCard>
             ) : null}

src/components/swap/SwapModalHeader.tsx

@@ -4,6 +4,7 @@ import { Price } from '@uniswap/sdk-core'
 import { sendAnalyticsEvent } from 'components/AmplitudeAnalytics'
 import { EventName, SWAP_PRICE_UPDATE_USER_RESPONSE } from 'components/AmplitudeAnalytics/constants'
 import { formatPercentInBasisPointsNumber } from 'components/AmplitudeAnalytics/utils'
+import { Phase0Variant, usePhase0Flag } from 'featureFlags/flags/phase0'
 import { useContext, useEffect, useState } from 'react'
 import { AlertTriangle, ArrowDown } from 'react-feather'
 import { Text } from 'rebass'
@@ -24,11 +25,11 @@ import TradePrice from '../swap/TradePrice'
 import { AdvancedSwapDetails } from './AdvancedSwapDetails'
 import { SwapShowAcceptChanges, TruncatedText } from './styleds'
 
-const ArrowWrapper = styled.div`
+const ArrowWrapper = styled.div<{ phase0Flag: boolean }>`
   padding: 4px;
   border-radius: 12px;
-  height: 32px;
-  width: 32px;
+  height: ${({ phase0Flag }) => (phase0Flag ? '40px' : '32px')};
+  width: ${({ phase0Flag }) => (phase0Flag ? '40px' : '32px')};
   position: relative;
   margin-top: -18px;
   margin-bottom: -18px;
@@ -36,9 +37,9 @@ const ArrowWrapper = styled.div`
   display: flex;
   justify-content: center;
   align-items: center;
-  background-color: ${({ theme }) => theme.deprecated_bg1};
+  background-color: ${({ theme, phase0Flag }) => (phase0Flag ? theme.backgroundSurface : theme.deprecated_bg1)};
   border: 4px solid;
-  border-color: ${({ theme }) => theme.deprecated_bg0};
+  border-color: ${({ theme, phase0Flag }) => (phase0Flag ? theme.backgroundContainer : theme.deprecated_bg0)};
   z-index: 2;
 `
 
@@ -84,6 +85,8 @@ export default function SwapModalHeader({
   onAcceptChanges: () => void
 }) {
   const theme = useContext(ThemeContext)
+  const phase0Flag = usePhase0Flag()
+  const phase0FlagEnabled = phase0Flag === Phase0Variant.Enabled
 
   const [showInverted, setShowInverted] = useState<boolean>(false)
   const [lastExecutionPrice, setLastExecutionPrice] = useState(trade.executionPrice)
@@ -134,8 +137,8 @@ export default function SwapModalHeader({
           </RowBetween>
         </AutoColumn>
       </LightCard>
-      <ArrowWrapper>
-        <ArrowDown size="16" color={theme.deprecated_text2} />
+      <ArrowWrapper phase0Flag={phase0FlagEnabled}>
+        <ArrowDown size="16" color={phase0FlagEnabled ? theme.textPrimary : theme.deprecated_text2} />
       </ArrowWrapper>
       <LightCard padding="0.75rem 1rem" style={{ marginBottom: '0.25rem' }}>
         <AutoColumn gap={'8px'}>

src/components/swap/SwapRoute.tsx

@@ -12,6 +12,7 @@ import { LoadingRows } from 'components/Loader/styled'
 import RoutingDiagram from 'components/RoutingDiagram/RoutingDiagram'
 import { AutoRow, RowBetween } from 'components/Row'
 import { SUPPORTED_GAS_ESTIMATE_CHAIN_IDS } from 'constants/chains'
+import { Phase0Variant, usePhase0Flag } from 'featureFlags/flags/phase0'
 import useAutoRouterSupported from 'hooks/useAutoRouterSupported'
 import { memo, useState } from 'react'
 import { Plus } from 'react-feather'
@@ -22,10 +23,12 @@ import { Separator, ThemedText } from 'theme'
 
 import { AutoRouterLabel, AutoRouterLogo } from './RouterLabel'
 
-const Wrapper = styled(AutoColumn)<{ darkMode?: boolean; fixedOpen?: boolean }>`
+const Wrapper = styled(AutoColumn)<{ darkMode?: boolean; fixedOpen?: boolean; phase0Flag: boolean }>`
   padding: ${({ fixedOpen }) => (fixedOpen ? '12px' : '12px 8px 12px 12px')};
   border-radius: 16px;
-  border: 1px solid ${({ theme, fixedOpen }) => (fixedOpen ? 'transparent' : theme.deprecated_bg2)};
+  border: 1px solid
+    ${({ theme, fixedOpen, phase0Flag }) =>
+      fixedOpen ? 'transparent' : phase0Flag ? theme.backgroundOutline : theme.deprecated_bg2};
   cursor: pointer;
 `
 
@@ -53,6 +56,8 @@ export default memo(function SwapRoute({ trade, syncing, fixedOpen = false, ...r
   const routes = getTokenPath(trade)
   const [open, setOpen] = useState(false)
   const { chainId } = useWeb3React()
+  const phase0Flag = usePhase0Flag()
+  const phase0FlagEnabled = phase0Flag === Phase0Variant.Enabled
 
   const [darkMode] = useDarkModeManager()
 
@@ -63,7 +68,7 @@ export default memo(function SwapRoute({ trade, syncing, fixedOpen = false, ...r
     : undefined
 
   return (
-    <Wrapper {...rest} darkMode={darkMode} fixedOpen={fixedOpen}>
+    <Wrapper {...rest} darkMode={darkMode} fixedOpen={fixedOpen} phase0Flag={phase0FlagEnabled}>
       <TraceEvent
         events={[Event.onClick]}
         name={EventName.SWAP_AUTOROUTER_VISUALIZATION_EXPANDED}

src/components/swap/styleds.tsx

@@ -15,18 +15,20 @@ export const Wrapper = styled.div`
   padding: 8px;
 `
 
-export const ArrowWrapper = styled.div<{ clickable: boolean }>`
+export const ArrowWrapper = styled.div<{ clickable: boolean; phase0Flag: boolean }>`
   padding: 4px;
   border-radius: 12px;
-  height: 32px;
-  width: 32px;
+  height: ${({ phase0Flag }) => (phase0Flag ? '40px' : '32px')};
+  width: ${({ phase0Flag }) => (phase0Flag ? '40px' : '32px')};
   position: relative;
   margin-top: -14px;
-  margin-bottom: -14px;
+  margin-bottom: ${({ phase0Flag }) => (phase0Flag ? '-18px' : '-14px')};
   left: calc(50% - 16px);
   /* transform: rotate(90deg); */
-  background-color: ${({ theme }) => theme.deprecated_bg1};
-  border: 4px solid ${({ theme }) => theme.deprecated_bg0};
+  background-color: ${({ theme, phase0Flag }) => (phase0Flag ? theme.backgroundSurface : theme.deprecated_bg1)};
+  border: 4px solid;
+  border-color: ${({ theme, phase0Flag }) => (phase0Flag ? theme.backgroundContainer : theme.deprecated_bg0)};
+
   z-index: 2;
   ${({ clickable }) =>
     clickable

src/pages/AppBody.tsx

+import { Phase0Variant, usePhase0Flag } from 'featureFlags/flags/phase0'
 import React from 'react'
 import styled from 'styled-components/macro'
 import { Z_INDEX } from 'theme'
 
-export const BodyWrapper = styled.main<{ margin?: string; maxWidth?: string }>`
+export const BodyWrapper = styled.main<{ margin?: string; maxWidth?: string; phase0Flag?: boolean }>`
   position: relative;
   margin-top: ${({ margin }) => margin ?? '0px'};
-  max-width: ${({ maxWidth }) => maxWidth ?? '480px'};
+  max-width: ${({ maxWidth, phase0Flag }) => maxWidth ?? (phase0Flag ? '420px' : '480px')};
   width: 100%;
-  background: ${({ theme }) => theme.deprecated_bg0};
-  box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.01), 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 16px 24px rgba(0, 0, 0, 0.04),
-    0px 24px 32px rgba(0, 0, 0, 0.01);
-  border-radius: 24px;
+  background: ${({ theme, phase0Flag }) => (phase0Flag ? theme.backgroundSurface : theme.deprecated_bg0)};
+  border-radius: ${({ phase0Flag }) => (phase0Flag ? '16px' : '24px')};
+  border: 1px solid ${({ theme, phase0Flag }) => (phase0Flag ? theme.backgroundOutline : theme.none)};
   margin-top: 1rem;
   margin-left: auto;
   margin-right: auto;
   z-index: ${Z_INDEX.deprecated_content};
+  font-feature-settings: ${({ phase0Flag }) => phase0Flag && "'ss02' off"};
+  box-shadow: ${({ phase0Flag }) =>
+    !phase0Flag &&
+    '0px 0px 1px rgba(0, 0, 0, 0.01), 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 16px 24px rgba(0, 0, 0, 0.04), 0px 24px 32px rgba(0, 0, 0, 0.01)'};
 `
 
 /**
  * The styled container element that wraps the content of most pages and the tabs.
  */
 export default function AppBody({ children, ...rest }: { children: React.ReactNode }) {
-  return <BodyWrapper {...rest}>{children}</BodyWrapper>
+  const phase0Flag = usePhase0Flag()
+  const phase0FlagEnabled = phase0Flag === Phase0Variant.Enabled
+  return (
+    <BodyWrapper {...rest} phase0Flag={phase0FlagEnabled}>
+      {children}
+    </BodyWrapper>
+  )
 }

src/pages/Explore/index.tsx

@@ -31,7 +31,7 @@ const TitleContainer = styled.div`
 const FiltersContainer = styled.div`
   display: flex;
   gap: 8px;
-  height: 44px;
+  height: 40px;
 
   @media only screen and (max-width: ${MEDIUM_MEDIA_BREAKPOINT}) {
     order: 2;

src/pages/Swap/index.tsx

@@ -28,13 +28,13 @@ import useTransactionDeadline from 'hooks/useTransactionDeadline'
 import JSBI from 'jsbi'
 import { Context, useCallback, useContext, useEffect, useMemo, useState } from 'react'
 import { ReactNode } from 'react'
-import { ArrowDown, CheckCircle, HelpCircle } from 'react-feather'
+import { ArrowDown, ArrowUp, CheckCircle, HelpCircle } from 'react-feather'
 import { useNavigate } from 'react-router-dom'
 import { Text } from 'rebass'
 import { useToggleWalletModal } from 'state/application/hooks'
 import { InterfaceTrade } from 'state/routing/types'
 import { TradeState } from 'state/routing/types'
-import styled, { DefaultTheme, ThemeContext } from 'styled-components/macro'
+import styled, { css, DefaultTheme, ThemeContext } from 'styled-components/macro'
 
 import AddressInputPanel from '../../components/AddressInputPanel'
 import { ButtonConfirmed, ButtonError, ButtonLight, ButtonPrimary } from '../../components/Button'
@@ -78,6 +78,38 @@ const AlertWrapper = styled.div`
   max-width: 460px;
   width: 100%;
 `
+const ArrowContainer = styled.div`
+  display: inline-block;
+  margin-left: 6%;
+`
+const ArrowDownWrapper = styled.div`
+  margin-top: -80%;
+  margin-left: 24%;
+`
+const ArrowUpWrapper = styled.div`
+  margin-left: 56%;
+  margin-top: -18%;
+`
+const BottomWrapper = styled.div<{ phase0Flag: boolean }>`
+  ${({ phase0Flag }) =>
+    phase0Flag &&
+    css`
+      background-color: ${({ theme }) => theme.backgroundContainer};
+      border-radius: 12px;
+      padding: 8px 12px 10px;
+      color: ${({ theme }) => theme.textSecondary};
+      font-size: 14px;
+      line-height: 20px;
+      font-weight: 500;
+    `}
+`
+const TopInputWrapper = styled.div<{ phase0Flag: boolean }>`
+  padding: ${({ phase0Flag }) => phase0Flag && '0px 12px'};
+  visibility: ${({ phase0Flag }) => !phase0Flag && 'none'};
+`
+const BottomInputWrapper = styled.div<{ phase0Flag: boolean }>`
+  padding: ${({ phase0Flag }) => phase0Flag && '8px 0px'};
+`
 
 export function getIsValidSwapQuote(
   trade: InterfaceTrade<Currency, Currency, TradeType> | undefined,
@@ -123,11 +155,12 @@ const formatSwapQuoteReceivedEventProperties = (
 
 export default function Swap() {
   const navigate = useNavigate()
+  const phase0Flag = usePhase0Flag()
+  const phase0FlagEnabled = phase0Flag === Phase0Variant.Enabled
   const { account, chainId } = useWeb3React()
   const loadedUrlParams = useDefaultsFromURLSearch()
   const [newSwapQuoteNeedsLogging, setNewSwapQuoteNeedsLogging] = useState(true)
   const [fetchingSwapQuoteStartTime, setFetchingSwapQuoteStartTime] = useState<Date | undefined>()
-  const phase0Flag = usePhase0Flag()
 
   // token warning stuff
   const [loadedInputCurrency, loadedOutputCurrency] = [
@@ -139,6 +172,9 @@ export default function Swap() {
     () => [loadedInputCurrency, loadedOutputCurrency]?.filter((c): c is Token => c?.isToken ?? false) ?? [],
     [loadedInputCurrency, loadedOutputCurrency]
   )
+  const handleConfirmTokenWarning = useCallback(() => {
+    setDismissTokenWarning(true)
+  }, [])
 
   // dismiss warning if all imported tokens are in active lists
   const defaultTokens = useAllTokens()
@@ -161,10 +197,6 @@ export default function Swap() {
     [chainId, defaultTokens, urlLoadedTokens]
   )
 
-  const handleConfirmTokenWarning = useCallback(() => {
-    setDismissTokenWarning(true)
-  }, [])
-
   const theme = useContext(ThemeContext as Context<DefaultTheme>)
 
   // toggle wallet when disconnected
@@ -528,8 +560,9 @@ export default function Swap() {
               swapQuoteReceivedDate={swapQuoteReceivedDate}
             />
 
-            <AutoColumn gap={'sm'}>
+            <AutoColumn gap={'0px'}>
               <div style={{ display: 'relative' }}>
+                <TopInputWrapper phase0Flag={phase0FlagEnabled}>
                   <Trace section={SectionName.CURRENCY_INPUT_PANEL}>
                     <CurrencyInputPanel
                       label={
@@ -552,12 +585,29 @@ export default function Swap() {
                       loading={independentField === Field.OUTPUT && routeIsSyncing}
                     />
                   </Trace>
-                <ArrowWrapper clickable={isSupportedChain(chainId)}>
+                </TopInputWrapper>
+                <ArrowWrapper clickable={isSupportedChain(chainId)} phase0Flag={phase0FlagEnabled}>
                   <TraceEvent
                     events={[Event.onClick]}
                     name={EventName.SWAP_TOKENS_REVERSED}
                     element={ElementName.SWAP_TOKENS_REVERSE_ARROW_BUTTON}
                   >
+                    {phase0FlagEnabled ? (
+                      <ArrowContainer
+                        onClick={() => {
+                          setApprovalSubmitted(false) // reset 2 step UI for approvals
+                          onSwitchTokens()
+                        }}
+                        color={theme.textPrimary}
+                      >
+                        <ArrowUpWrapper>
+                          <ArrowUp size="12" stroke-width="3" />
+                        </ArrowUpWrapper>
+                        <ArrowDownWrapper>
+                          <ArrowDown size="12" stroke-width="3" />
+                        </ArrowDownWrapper>
+                      </ArrowContainer>
+                    ) : (
                       <ArrowDown
                         size="16"
                         onClick={() => {
@@ -570,14 +620,24 @@ export default function Swap() {
                             : theme.deprecated_text3
                         }
                       />
+                    )}
                   </TraceEvent>
                 </ArrowWrapper>
+              </div>
+              <BottomWrapper phase0Flag={phase0FlagEnabled}>
+                {phase0FlagEnabled && 'For'}
+                <AutoColumn gap={phase0FlagEnabled ? '0px' : '8px'}>
+                  <BottomInputWrapper phase0Flag={phase0FlagEnabled}>
                     <Trace section={SectionName.CURRENCY_OUTPUT_PANEL}>
                       <CurrencyInputPanel
                         value={formattedAmounts[Field.OUTPUT]}
                         onUserInput={handleTypeOutput}
                         label={
-                      independentField === Field.INPUT && !showWrap ? <Trans>To (at least)</Trans> : <Trans>To</Trans>
+                          independentField === Field.INPUT && !showWrap ? (
+                            <Trans>To (at least)</Trans>
+                          ) : (
+                            <Trans>To</Trans>
+                          )
                         }
                         showMaxButton={false}
                         hideBalance={false}
@@ -591,12 +651,11 @@ export default function Swap() {
                         loading={independentField === Field.INPUT && routeIsSyncing}
                       />
                     </Trace>
-              </div>
 
                     {recipient !== null && !showWrap ? (
                       <>
                         <AutoRow justify="space-between" style={{ padding: '0 1rem' }}>
-                    <ArrowWrapper clickable={false}>
+                          <ArrowWrapper clickable={false} phase0Flag={phase0FlagEnabled}>
                             <ArrowDown size="16" color={theme.deprecated_text2} />
                           </ArrowWrapper>
                           <LinkStyledButton id="remove-recipient-button" onClick={() => onChangeRecipient(null)}>
@@ -617,6 +676,7 @@ export default function Swap() {
                       />
                     )}
                     {showPriceImpactWarning && <PriceImpactWarning priceImpact={largerPriceImpact} />}
+                  </BottomInputWrapper>
                   <div>
                     {swapIsUnsupported ? (
                       <ButtonPrimary disabled={true}>
@@ -631,7 +691,7 @@ export default function Swap() {
                         properties={{ received_swap_quote: getIsValidSwapQuote(trade, tradeState, swapInputError) }}
                         element={ElementName.CONNECT_WALLET_BUTTON}
                       >
-                    <ButtonLight onClick={toggleWalletModal}>
+                        <ButtonLight onClick={toggleWalletModal} phase0Flag={phase0FlagEnabled}>
                           <Trans>Connect Wallet</Trans>
                         </ButtonLight>
                       </TraceEvent>
@@ -675,7 +735,9 @@ export default function Swap() {
                                 signatureState === UseERC20PermitState.SIGNED ? (
                                   <Trans>You can now trade {currencies[Field.INPUT]?.symbol}</Trans>
                                 ) : (
-                              <Trans>Allow the Uniswap Protocol to use your {currencies[Field.INPUT]?.symbol}</Trans>
+                                  <Trans>
+                                    Allow the Uniswap Protocol to use your {currencies[Field.INPUT]?.symbol}
+                                  </Trans>
                                 )}
                               </span>
                               {approvalState === ApprovalState.PENDING ? (
@@ -717,7 +779,8 @@ export default function Swap() {
                               !isValid ||
                               routeIsSyncing ||
                               routeIsLoading ||
-                          (approvalState !== ApprovalState.APPROVED && signatureState !== UseERC20PermitState.SIGNED) ||
+                              (approvalState !== ApprovalState.APPROVED &&
+                                signatureState !== UseERC20PermitState.SIGNED) ||
                               priceImpactTooHigh
                             }
                             error={isValid && priceImpactSeverity > 2}
@@ -750,7 +813,9 @@ export default function Swap() {
                           }
                         }}
                         id="swap-button"
-                    disabled={!isValid || routeIsSyncing || routeIsLoading || priceImpactTooHigh || !!swapCallbackError}
+                        disabled={
+                          !isValid || routeIsSyncing || routeIsLoading || priceImpactTooHigh || !!swapCallbackError
+                        }
                         error={isValid && priceImpactSeverity > 2 && !swapCallbackError}
                       >
                         <Text fontSize={20} fontWeight={500}>
@@ -771,6 +836,8 @@ export default function Swap() {
                     {isExpertMode && swapErrorMessage ? <SwapCallbackError error={swapErrorMessage} /> : null}
                   </div>
                 </AutoColumn>
+              </BottomWrapper>
+            </AutoColumn>
           </Wrapper>
         </AppBody>
         <AlertWrapper>

src/theme/RadialGradientByChainUpdater.ts

 import { useWeb3React } from '@web3-react/core'
+import { BaseVariant } from 'featureFlags'
+import { usePhase0Flag } from 'featureFlags/flags/phase0'
 import { useEffect } from 'react'
 import { useDarkModeManager } from 'state/user/hooks'
 
@@ -29,6 +31,8 @@ const setBackground = (newValues: TargetBackgroundStyles) =>
 export default function RadialGradientByChainUpdater(): null {
   const { chainId } = useWeb3React()
   const [darkMode] = useDarkModeManager()
+  const phase0Flag = usePhase0Flag()
+  const phase0FlagEnabled = phase0Flag === BaseVariant.Enabled
   // manage background color
   useEffect(() => {
     if (!backgroundRadialGradientElement) {
@@ -39,40 +43,72 @@ export default function RadialGradientByChainUpdater(): null {
       case SupportedChainId.ARBITRUM_ONE:
       case SupportedChainId.ARBITRUM_RINKEBY:
         setBackground(backgroundResetStyles)
-        const arbitrumLightGradient = 'radial-gradient(150% 100% at 50% 0%, #CDE8FB 0%, #FCF3F9 50%, #FFFFFF 100%)'
-        const arbitrumDarkGradient = 'radial-gradient(150% 100% at 50% 0%, #0A294B 0%, #221E30 50%, #1F2128 100%)'
+        const arbitrumLightGradient = phase0FlagEnabled
+          ? 'radial-gradient(100% 100% at 50% 0%, rgba(205, 232, 251, 0.7) 0%, rgba(252, 243, 249, 0.6536) 49.48%, rgba(255, 255, 255, 0) 100%), #FFFFFF'
+          : 'radial-gradient(150% 100% at 50% 0%, #CDE8FB 0%, #FCF3F9 50%, #FFFFFF 100%)'
+        const arbitrumDarkGradient = phase0FlagEnabled
+          ? 'radial-gradient(100% 100% at 50% 0%, rgba(10, 41, 75, 0.7) 0%, rgba(34, 30, 48, 0.6536) 49.48%, rgba(31, 33, 40, 0) 100%), #0D0E0E'
+          : 'radial-gradient(150% 100% at 50% 0%, #0A294B 0%, #221E30 50%, #1F2128 100%)'
         backgroundRadialGradientElement.style.background = darkMode ? arbitrumDarkGradient : arbitrumLightGradient
         break
       case SupportedChainId.OPTIMISM:
       case SupportedChainId.OPTIMISTIC_KOVAN:
         setBackground(backgroundResetStyles)
-        const optimismLightGradient = 'radial-gradient(150% 100% at 50% 0%, #FFFBF2 2%, #FFF4F9 53%, #FFFFFF 100%)'
-        const optimismDarkGradient = 'radial-gradient(150% 100% at 50% 0%, #3E2E38 2%, #2C1F2D 53%, #1F2128 100%)'
+        const optimismLightGradient = phase0FlagEnabled
+          ? 'radial-gradient(100% 100% at 50% 0%, rgba(255, 251, 242, 0.8) 0%, rgba(255, 244, 249, 0.6958) 50.52%, rgba(255, 255, 255, 0) 100%), #FFFFFF'
+          : 'radial-gradient(150% 100% at 50% 0%, #FFFBF2 2%, #FFF4F9 53%, #FFFFFF 100%)'
+        const optimismDarkGradient = phase0FlagEnabled
+          ? 'radial-gradient(100% 100% at 50% 0%, rgba(62, 46, 56, 0.8) 0%, rgba(44, 31, 45, 0.6958) 50.52%, rgba(31, 33, 40, 0) 100%), #0D0E0E'
+          : 'radial-gradient(150% 100% at 50% 0%, #3E2E38 2%, #2C1F2D 53%, #1F2128 100%)'
         backgroundRadialGradientElement.style.background = darkMode ? optimismDarkGradient : optimismLightGradient
         break
       case SupportedChainId.POLYGON:
       case SupportedChainId.POLYGON_MUMBAI:
         setBackground(backgroundResetStyles)
-        const polygonLightGradient =
-          'radial-gradient(153.32% 100% at 47.26% 0%, rgba(130, 71, 229, 0.0864) 0%, rgba(0, 41, 255, 0.06) 48.19%, rgba(0, 41, 255, 0.012) 100%), #FFFFFF'
-        const polygonDarkGradient =
-          'radial-gradient(150.6% 98.22% at 48.06% 0%, rgba(130, 71, 229, 0.6) 0%, rgba(200, 168, 255, 0) 100%), #1F2128'
+        const polygonLightGradient = phase0FlagEnabled
+          ? 'radial-gradient(100% 100% at 50% 0%, rgba(130, 71, 229, 0.2) 0%, rgba(200, 168, 255, 0.05) 52.6%, rgba(0, 0, 0, 0) 100%), #FFFFFF'
+          : 'radial-gradient(153.32% 100% at 47.26% 0%, rgba(130, 71, 229, 0.0864) 0%, rgba(0, 41, 255, 0.06) 48.19%, rgba(0, 41, 255, 0.012) 100%), #FFFFFF'
+        const polygonDarkGradient = phase0FlagEnabled
+          ? 'radial-gradient(100% 100% at 50% 0%, rgba(130, 71, 229, 0.2) 0%, rgba(200, 168, 255, 0.05) 52.6%, rgba(0, 0, 0, 0) 100%), #0D0E0E'
+          : 'radial-gradient(150.6% 98.22% at 48.06% 0%, rgba(130, 71, 229, 0.6) 0%, rgba(200, 168, 255, 0) 100%), #1F2128'
         backgroundRadialGradientElement.style.background = darkMode ? polygonDarkGradient : polygonLightGradient
-        backgroundRadialGradientElement.style.backgroundBlendMode = darkMode ? 'overlay,normal' : 'multiply,normal'
+        backgroundRadialGradientElement.style.backgroundBlendMode = phase0FlagEnabled
+          ? 'none'
+          : darkMode
+          ? 'overlay,normal'
+          : 'multiply,normal'
         break
       case SupportedChainId.CELO:
       case SupportedChainId.CELO_ALFAJORES:
         setBackground(backgroundResetStyles)
-        const celoLightGradient = 'radial-gradient(150% 100% at 50% 0%,#35D07F35 0, #FBCC5C35 100%)'
-        const celoDarkGradient =
-          'radial-gradient(150% 100% at 50% 0%, rgb(2 80 47) 2%, rgb(12 41 28) 53%, rgb(31, 33, 40) 100%)'
+        const celoLightGradient = phase0FlagEnabled
+          ? 'radial-gradient(100% 100% at 50% 0%, rgba(186, 228, 210, 0.7) 0%, rgba(252, 243, 249, 0.6536) 49.48%, rgba(255, 255, 255, 0) 100%), #FFFFFF'
+          : 'radial-gradient(150% 100% at 50% 0%,#35D07F35 0, #FBCC5C35 100%)'
+        const celoDarkGradient = phase0FlagEnabled
+          ? 'radial-gradient(100% 100% at 50% 0%, rgba(20, 49, 37, 0.29) 0%, rgba(12, 31, 23, 0.6536) 49.48%, rgba(31, 33, 40, 0) 100%, rgba(31, 33, 40, 0) 100%), #0D0E0E'
+          : 'radial-gradient(150% 100% at 50% 0%, rgb(2 80 47) 2%, rgb(12 41 28) 53%, rgb(31, 33, 40) 100%)'
         backgroundRadialGradientElement.style.background = darkMode ? celoDarkGradient : celoLightGradient
-        backgroundRadialGradientElement.style.backgroundBlendMode = darkMode ? 'overlay,normal' : 'multiply,normal'
+        backgroundRadialGradientElement.style.backgroundBlendMode = phase0FlagEnabled
+          ? 'none'
+          : darkMode
+          ? 'overlay,normal'
+          : 'multiply,normal'
         break
       default:
         setBackground(initialStyles)
-        backgroundRadialGradientElement.style.background = ''
+        const defaultLightGradient = phase0FlagEnabled
+          ? 'radial-gradient(100% 100% at 50% 0%, rgba(255, 184, 226, 0.51) 0%, rgba(255, 255, 255, 0) 100%), #FFFFFF'
+          : 'radial-gradient(50% 50% at 50% 50%,#fc077d10 0,rgba(255,255,255,0) 100%)'
+        const defaultDarkGradient = phase0FlagEnabled
+          ? 'linear-gradient(180deg, #202738 0%, #070816 100%)'
+          : 'radial-gradient(50% 50% at 50% 50%,#fc077d10 0,rgba(255,255,255,0) 100%)'
+        backgroundRadialGradientElement.style.background = darkMode ? defaultDarkGradient : defaultLightGradient
+        backgroundRadialGradientElement.style.backgroundBlendMode = phase0FlagEnabled
+          ? 'none'
+          : darkMode
+          ? 'overlay,normal'
+          : 'multiply,normal'
     }
-  }, [darkMode, chainId])
+  }, [darkMode, chainId, phase0FlagEnabled])
   return null
 }

src/theme/colors.ts

@@ -87,73 +87,73 @@ export interface GlobalPalette {
 export const colors: GlobalPalette = {
   white: '#FFFFFF',
   black: '#000000',
-  gray50: '#F4F6FE',
-  gray100: '#DBE1F5',
-  gray200: '#C0C7DE',
+  gray50: '#F8F9FF',
+  gray100: '#DDE3F7',
+  gray200: '#B7BED4',
   gray300: '#99A1BD',
-  gray400: '#747D9C',
-  gray500: '#5F667D',
-  gray600: '#44495A',
-  gray700: '#272A35',
-  gray800: '#181B24',
-  gray900: '#070A15',
-  pink50: '#FFF2F7',
-  pink100: '#FFD7E3',
+  gray400: '#7C85A2',
+  gray500: '#5E6887',
+  gray600: '#404963',
+  gray700: '#293249',
+  gray800: '#141B2B',
+  gray900: '#0E111A',
+  pink50: '#F9ECF1',
+  pink100: '#FFD9E4',
   pink200: '#FBA4C0',
   pink300: '#FF6FA3',
-  pink400: '#EF368E',
+  pink400: '#FB118E',
   pink500: '#C41969',
   pink600: '#8C0F49',
   pink700: '#55072A',
   pink800: '#350318',
   pink900: '#2B000B',
   pinkVibrant: '#F51A70',
-  red50: '#FFF4EE',
-  red100: '#FFD9CE',
-  red200: '#FDA799',
-  red300: '#FF776D',
-  red400: '#FD4040',
-  red500: '#C52533',
+  red50: '#FAECEA',
+  red100: '#FED5CF',
+  red200: '#FEA79B',
+  red300: '#FD766B',
+  red400: '#FA2B39',
+  red500: '#C4292F',
   red600: '#891E20',
-  red700: '#530F10',
-  red800: '#350700',
-  red900: '#2C0000',
+  red700: '#530F0F',
+  red800: '#380A03',
+  red900: '#240800',
   redVibrant: '#F14544',
-  yellow50: '#FFF5E8',
-  yellow100: '#F8DEB6',
-  yellow200: '#F3B71E',
-  yellow300: '#DC910D',
-  yellow400: '#AE780C',
-  yellow500: '#8F5C0F',
-  yellow600: '#643F07',
-  yellow700: '#3F2208',
-  yellow800: '#26130A',
-  yellow900: '#110A00',
+  yellow50: '#F6F2D5',
+  yellow100: '#DBBC19',
+  yellow200: '#DBBC19',
+  yellow300: '#BB9F13',
+  yellow400: '#A08116',
+  yellow500: '#866311',
+  yellow600: '#5D4204',
+  yellow700: '#3E2B04',
+  yellow800: '#231902',
+  yellow900: '#180F02',
   yellowVibrant: '#FAF40A',
   // TODO: add gold 50-900
   gold200: '#EEB317',
   goldVibrant: '#FEB239',
-  green50: '#EAFAED',
-  green100: '#BDECC8',
-  green200: '#75D090',
-  green300: '#35AD63',
-  green400: '#1A9550',
-  green500: '#07773D',
+  green50: '#E3F3E6',
+  green100: '#BFEECA',
+  green200: '#76D191',
+  green300: '#40B66B',
+  green400: '#209853',
+  green500: '#0B783E',
   green600: '#0C522A',
   green700: '#053117',
-  green800: '#031C0A',
-  green900: '#020E04',
+  green800: '#091F10',
+  green900: '#09130B',
   greenVibrant: '#5CFE9D',
-  blue50: '#F4F6FF',
-  blue100: '#DBDFFF',
-  blue200: '#AABAFF',
-  blue300: '#829BFF',
-  blue400: '#407CF8',
-  blue500: '#1869D8',
+  blue50: '#EDEFF8',
+  blue100: '#DEE1FF',
+  blue200: '#ADBCFF',
+  blue300: '#869EFF',
+  blue400: '#4C82FB',
+  blue500: '#1267D6',
   blue600: '#1D4294',
   blue700: '#09265E',
-  blue800: '#06163B',
-  blue900: '#00072F',
+  blue800: '#0B193F',
+  blue900: '#040E34',
   blueVibrant: '#587BFF',
   // TODO: add magenta 50-900
   magentaVibrant: '#FC72FF',
@@ -230,11 +230,11 @@ export const colorsLight: Palette = {
   none: 'transparent',
 
   backgroundBackdrop: colors.white,
-  backgroundSurface: colors.gray50,
+  backgroundSurface: colors.white,
   backgroundContainer: opacify(8, colors.gray500),
-  backgroundAction: colors.gray100,
+  backgroundAction: opacify(8, colors.gray700),
   backgroundOutline: opacify(24, colors.gray500),
-  backgroundScrim: opacify(72, colors.white),
+  backgroundScrim: opacify(60, colors.gray900),
 
   textPrimary: colors.gray900,
   textSecondary: colors.gray500,
@@ -278,7 +278,8 @@ export const colorsLight: Palette = {
   chain_10_background: colors.red900,
   chain_42161_background: colors.blue900,
 
-  flyoutDropShadow: colors.black,
+  flyoutDropShadow:
+    '0px 24px 32px rgba(0, 0, 0, 0.04), 0px 16px 24px rgba(0, 0, 0, 0.04), 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 0px 1px rgba(0, 0, 0, 0.12);',
 }
 
 export const colorsDark: Palette = {
@@ -301,7 +302,7 @@ export const colorsDark: Palette = {
   accentWarning: colors.gold200,
   accentFailure: colors.red400,
 
-  accentActionSoft: opacify(12, colors.blue400),
+  accentActionSoft: opacify(24, colors.blue400),
   accentActiveSoft: opacify(12, colors.blue400),
   accentSuccessSoft: opacify(12, colors.green400),
   accentWarningSoft: opacify(12, colors.gold200),
@@ -334,5 +335,6 @@ export const colorsDark: Palette = {
   chain_10_background: colors.red900,
   chain_42161_background: colors.blue900,
 
-  flyoutDropShadow: colors.black,
+  flyoutDropShadow:
+    '0px 24px 32px rgba(0, 0, 0, 0.04), 0px 16px 24px rgba(0, 0, 0, 0.04), 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 0px 1px rgba(0, 0, 0, 0.12);',
 }

src/theme/components.tsx

@@ -296,8 +296,8 @@ export const SmallOnly = styled.span`
   `};
 `
 
-export const Separator = styled.div`
+export const Separator = styled.div<{ phase0Flag?: boolean }>`
   width: 100%;
   height: 1px;
-  background-color: ${({ theme }) => theme.deprecated_bg2};
+  background-color: ${({ theme, phase0Flag }) => (phase0Flag ? theme.backgroundOutline : theme.deprecated_bg2)};
 `