fix: Prod has chevron (#4558 )

Remove chevron from prod Co-authored-by: Alex Ball <alexball@UNISWAP-MAC-038.local>
chore: remove theme.blue200 (#4533 )
2022-09-01 10:20:09 -04:00 · 2022-08-31 20:13:21 -04:00 · 2022-08-31 19:35:06 -04:00 · 2022-08-31 18:16:42 -04:00 · 2022-08-31 20:36:23 +03:00 · 2022-08-31 10:33:51 -07:00
20 changed files with 173 additions and 133 deletions
--- a/package.json
+++ b/package.json
@@ -145,7 +145,7 @@
    "@uniswap/v3-core": "1.0.0",
    "@uniswap/v3-periphery": "^1.1.1",
    "@uniswap/v3-sdk": "^3.9.0",
-    "@uniswap/widgets": "^2.3.1",
+    "@uniswap/widgets": "^2.5.0",
    "@vanilla-extract/css": "^1.7.2",
    "@vanilla-extract/css-utils": "^0.1.2",
    "@vanilla-extract/dynamic": "^2.0.2",
--- a/src/components/Icons/index.tsx
+++ b/src/components/Icons/index.tsx
@@ -0,0 +1,32 @@
+import { ChevronDown, ChevronUp } from 'react-feather'
+import styled from 'styled-components/macro'
+
+export const StyledChevronDown = styled(ChevronDown)<{ customColor?: string }>`
+  color: ${({ theme, customColor }) => customColor ?? theme.textSecondary};
+  height: 20px;
+  width: 20px;
+
+  &:hover {
+    color: ${({ theme }) => theme.accentActionSoft};
+    transition: ${({
+      theme: {
+        transition: { duration, timing },
+      },
+    }) => `${duration.fast}ms color ${timing.in}`};
+  }
+`
+
+export const StyledChevronUp = styled(ChevronUp)<{ customColor?: string }>`
+  color: ${({ theme, customColor }) => customColor ?? theme.textSecondary};
+  height: 20px;
+  width: 20px;
+
+  &:hover {
+    color: ${({ theme }) => theme.accentActionSoft};
+    transition: ${({
+      theme: {
+        transition: { duration, timing },
+      },
+    }) => `${duration.fast}ms color ${timing.in}`};
+  }
+`
--- a/src/components/NavBar/ChainSwitcher.tsx
+++ b/src/components/NavBar/ChainSwitcher.tsx
@@ -1,4 +1,5 @@
 import { useWeb3React } from '@web3-react/core'
+import { StyledChevronDown, StyledChevronUp } from 'components/Icons'
 import { getChainInfo } from 'constants/chainInfo'
 import { SupportedChainId } from 'constants/chains'
 import { useOnClickOutside } from 'hooks/useOnClickOutside'
@@ -7,7 +8,7 @@ import useSyncChainQuery from 'hooks/useSyncChainQuery'
 import { Box } from 'nft/components/Box'
 import { Portal } from 'nft/components/common/Portal'
 import { Column, Row } from 'nft/components/Flex'
-import { CheckMarkIcon, NewChevronDownIcon, NewChevronUpIcon, TokenWarningRedIcon } from 'nft/components/icons'
+import { CheckMarkIcon, TokenWarningRedIcon } from 'nft/components/icons'
 import { subhead } from 'nft/css/common.css'
 import { themeVars, vars } from 'nft/css/sprinkles.css'
 import { useIsMobile } from 'nft/hooks'
@@ -120,11 +121,7 @@ export const ChainSwitcher = ({ leftAlign }: ChainSwitcherProps) => {
            </Box>
          </>
        )}
-        {isOpen ? (
-          <NewChevronUpIcon width={16} height={16} color="blackBlue" />
-        ) : (
-          <NewChevronDownIcon width={16} height={16} color="blackBlue" />
-        )}
+        {isOpen ? <StyledChevronUp /> : <StyledChevronDown />}
      </Row>
      {isOpen && (isMobile ? <Portal>{dropdown}</Portal> : <>{dropdown}</>)}
    </Box>
--- a/src/components/NavBar/MenuDropdown.tsx
+++ b/src/components/NavBar/MenuDropdown.tsx
@@ -126,7 +126,7 @@ export const MenuDropdown = () => {
    <>
      <Box position="relative" ref={ref}>
        <NavIcon isActive={isOpen} onClick={toggleOpen}>
-          <EllipsisIcon width={28} height={28} />
+          <EllipsisIcon />
        </NavIcon>

        {isOpen && (
--- a/src/components/NavBar/Navbar.css.ts
+++ b/src/components/NavBar/Navbar.css.ts
@@ -81,6 +81,8 @@ const baseMenuItem = style([
    borderRadius: '12',
    transition: '250',
    height: 'min',
+    width: 'full',
+    textAlign: 'center',
  }),
  {
    lineHeight: '24px',
--- a/src/components/NavBar/Navbar.tsx
+++ b/src/components/NavBar/Navbar.tsx
@@ -101,7 +101,9 @@ const Navbar = () => {
      </nav>
      <Box className={styles.mobileBottomBar}>
        <PageTabs />
-        <MenuDropdown />
+        <Box marginY="4">
+          <MenuDropdown />
+        </Box>
      </Box>
    </>
  )
--- a/src/components/NavBar/SearchBar.tsx
+++ b/src/components/NavBar/SearchBar.tsx
@@ -90,7 +90,7 @@ interface SearchBarDropdownProps {
 }

 export const SearchBarDropdown = ({ toggleOpen, tokens, collections, hasInput }: SearchBarDropdownProps) => {
-  const [hoveredIndex, setHoveredIndex] = useState<number | undefined>(undefined)
+  const [hoveredIndex, setHoveredIndex] = useState<number | undefined>(0)
  const searchHistory = useSearchHistory(
    (state: { history: (FungibleToken | GenieCollection)[] }) => state.history
  ).slice(0, 2)
@@ -185,6 +185,7 @@ export const SearchBarDropdown = ({ toggleOpen, tokens, collections, hasInput }:
          setHoveredIndex(hoveredIndex - 1)
        }
      } else if (event.key === 'ArrowDown') {
+        event.preventDefault()
        if (hoveredIndex && hoveredIndex === totalSuggestions - 1) {
          setHoveredIndex(0)
        } else {
@@ -268,6 +269,7 @@ export const SearchBar = () => {
  const [searchValue, setSearchValue] = useState('')
  const debouncedSearchValue = useDebounce(searchValue, 300)
  const searchRef = useRef<HTMLDivElement>(null)
+  const inputRef = useRef<HTMLInputElement>(null)
  const { pathname } = useLocation()
  const phase1Flag = useNftFlag()
  const isMobile = useIsMobile()
@@ -320,64 +322,74 @@ export const SearchBar = () => {
    setSearchValue('')
  }, [pathname])

+  // auto set cursor when searchbar is opened
+  useEffect(() => {
+    if (isOpen) {
+      inputRef.current?.focus()
+    }
+  }, [isOpen])
+
  const placeholderText = phase1Flag === NftVariant.Enabled ? t`Search tokens and NFT collections` : t`Search tokens`

  return (
-    <Box position="relative">
-      <Box
-        position={isOpen ? { sm: 'fixed', md: 'absolute' } : 'static'}
-        width={{ sm: isOpen ? 'viewWidth' : 'auto', md: 'auto' }}
-        ref={searchRef}
-        className={styles.searchBarContainer}
-      >
-        <Row
-          className={clsx(`${styles.searchBar} ${!isOpen && magicalGradientOnHover}`)}
-          borderRadius={isOpen ? undefined : '12'}
-          borderTopRightRadius={isOpen && !isMobile ? '12' : undefined}
-          borderTopLeftRadius={isOpen && !isMobile ? '12' : undefined}
-          borderBottomWidth={isOpen ? '0px' : '1px'}
-          display={{ sm: isOpen ? 'flex' : 'none', xl: 'flex' }}
-          justifyContent={isOpen || phase1Flag === NftVariant.Enabled ? 'flex-start' : 'center'}
-          onFocus={() => !isOpen && toggleOpen()}
-          onClick={() => !isOpen && toggleOpen()}
-          gap="12"
+    <>
+      <Box position="relative">
+        <Box
+          position={isOpen ? { sm: 'fixed', md: 'absolute' } : 'static'}
+          width={{ sm: isOpen ? 'viewWidth' : 'auto', md: 'auto' }}
+          ref={searchRef}
+          className={styles.searchBarContainer}
        >
-          <Box display={{ sm: 'none', md: 'flex' }}>
-            <MagnifyingGlassIcon />
-          </Box>
-          <Box display={{ sm: 'flex', md: 'none' }} color="placeholder" onClick={toggleOpen}>
-            <ChevronLeftIcon />
-          </Box>
-          <Box
-            as="input"
-            placeholder={placeholderText}
-            width={isOpen || phase1Flag === NftVariant.Enabled ? 'full' : '120'}
-            onChange={(event: ChangeEvent<HTMLInputElement>) => {
-              !isOpen && toggleOpen()
-              setSearchValue(event.target.value)
-            }}
-            className={styles.searchBarInput}
-            value={searchValue}
-          />
-        </Row>
-        <Box display={{ sm: isOpen ? 'none' : 'flex', xl: 'none' }}>
-          <NavIcon onClick={toggleOpen}>
-            <NavMagnifyingGlassIcon width={28} height={28} />
-          </NavIcon>
-        </Box>
-        {isOpen &&
-          (debouncedSearchValue.length > 0 && (tokensAreLoading || collectionsAreLoading) ? (
-            <SkeletonRow />
-          ) : (
-            <SearchBarDropdown
-              toggleOpen={toggleOpen}
-              tokens={reducedTokens}
-              collections={reducedCollections}
-              hasInput={debouncedSearchValue.length > 0}
+          <Row
+            className={clsx(`${styles.searchBar} ${!isOpen && magicalGradientOnHover}`)}
+            borderRadius={isOpen ? undefined : '12'}
+            borderTopRightRadius={isOpen && !isMobile ? '12' : undefined}
+            borderTopLeftRadius={isOpen && !isMobile ? '12' : undefined}
+            borderBottomWidth={isOpen ? '0px' : '1px'}
+            display={{ sm: isOpen ? 'flex' : 'none', xl: 'flex' }}
+            justifyContent={isOpen || phase1Flag === NftVariant.Enabled ? 'flex-start' : 'center'}
+            onFocus={() => !isOpen && toggleOpen()}
+            onClick={() => !isOpen && toggleOpen()}
+            gap="12"
+          >
+            <Box display={{ sm: 'none', md: 'flex' }}>
+              <MagnifyingGlassIcon />
+            </Box>
+            <Box display={{ sm: 'flex', md: 'none' }} color="placeholder" onClick={toggleOpen}>
+              <ChevronLeftIcon />
+            </Box>
+            <Box
+              as="input"
+              placeholder={placeholderText}
+              width={isOpen || phase1Flag === NftVariant.Enabled ? 'full' : '120'}
+              onChange={(event: ChangeEvent<HTMLInputElement>) => {
+                !isOpen && toggleOpen()
+                setSearchValue(event.target.value)
+              }}
+              className={styles.searchBarInput}
+              value={searchValue}
+              ref={inputRef}
            />
-          ))}
+          </Row>
+          <Box display={{ sm: isOpen ? 'none' : 'flex', xl: 'none' }}>
+            <NavIcon onClick={toggleOpen}>
+              <NavMagnifyingGlassIcon width={28} height={28} />
+            </NavIcon>
+          </Box>
+          {isOpen &&
+            (debouncedSearchValue.length > 0 && (tokensAreLoading || collectionsAreLoading) ? (
+              <SkeletonRow />
+            ) : (
+              <SearchBarDropdown
+                toggleOpen={toggleOpen}
+                tokens={reducedTokens}
+                collections={reducedCollections}
+                hasInput={debouncedSearchValue.length > 0}
+              />
+            ))}
+        </Box>
      </Box>
      {isOpen && <Overlay />}
-    </Box>
+    </>
  )
 }
--- a/src/components/Tokens/TokenDetails/PriceChart.tsx
+++ b/src/components/Tokens/TokenDetails/PriceChart.tsx
@@ -18,7 +18,7 @@ import {
  dayHourFormatter,
  hourFormatter,
  monthDayFormatter,
-  monthFormatter,
+  monthTickFormatter,
  monthYearDayFormatter,
  monthYearFormatter,
  weekFormatter,
@@ -140,7 +140,7 @@ function tickFormat(
    case TimePeriod.MONTH:
      return [monthDayFormatter(locale), dayHourFormatter(locale), getTicks(startTimestamp, endTimestamp)]
    case TimePeriod.YEAR:
-      return [monthFormatter(locale), monthYearDayFormatter(locale), getTicks(startTimestamp, endTimestamp)]
+      return [monthTickFormatter(locale), monthYearDayFormatter(locale), getTicks(startTimestamp, endTimestamp)]
    case TimePeriod.ALL:
      return [monthYearFormatter(locale), monthYearDayFormatter(locale), getTicks(startTimestamp, endTimestamp)]
  }
--- a/src/components/Tokens/TokenTable/FavoriteButton.tsx
+++ b/src/components/Tokens/TokenTable/FavoriteButton.tsx
@@ -15,9 +15,9 @@ const FavoriteButtonContent = styled.div`
 const StyledFavoriteButton = styled.button<{ active: boolean }>`
  padding: 0px 16px;
  border-radius: 12px;
-  background-color: ${({ theme, active }) => (active ? theme.accentAction : theme.backgroundInteractive)};
+  background-color: ${({ theme, active }) => (active ? theme.accentActiveSoft : theme.backgroundInteractive)};
  border: none;
-  color: ${({ theme, active }) => (active ? theme.white : theme.textPrimary)};
+  color: ${({ theme, active }) => (active ? theme.accentActive : theme.textPrimary)};
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
@@ -38,7 +38,11 @@ export default function FavoriteButton() {
  return (
    <StyledFavoriteButton onClick={() => setShowFavorites(!showFavorites)} active={showFavorites}>
      <FavoriteButtonContent>
-        <Heart size={17} color={showFavorites ? theme.white : theme.textPrimary} fill="transparent" />
+        <Heart
+          size={17}
+          color={showFavorites ? theme.accentActive : theme.textPrimary}
+          fill={showFavorites ? theme.accentActive : 'transparent'}
+        />
        <FavoriteText>
          <Trans>Favorites</Trans>
        </FavoriteText>
--- a/src/components/Tokens/TokenTable/NetworkFilter.tsx
+++ b/src/components/Tokens/TokenTable/NetworkFilter.tsx
@@ -63,7 +63,7 @@ const MenuTimeFlyout = styled.span`
 const StyledMenuButton = styled.button<{ open: boolean }>`
  width: 100%;
  height: 100%;
-  color: ${({ theme, open }) => (open ? theme.blue200 : theme.textPrimary)};
+  color: ${({ theme, open }) => (open ? theme.accentActive : theme.textPrimary)};
  border: none;
  background-color: ${({ theme, open }) => (open ? theme.accentActiveSoft : theme.backgroundInteractive)};
  margin: 0;
@@ -115,7 +115,7 @@ const StyledMenuContent = styled.div`

 const Chevron = styled.span<{ open: boolean }>`
  padding-top: 1px;
-  color: ${({ open, theme }) => (open ? theme.blue200 : theme.textSecondary)};
+  color: ${({ open, theme }) => (open ? theme.accentActive : theme.textSecondary)};
 `
 const NetworkLabel = styled.div`
  display: flex;
--- a/src/components/Tokens/TokenTable/TimeSelector.tsx
+++ b/src/components/Tokens/TokenTable/TimeSelector.tsx
@@ -81,7 +81,7 @@ const StyledMenuButton = styled.button<{ open: boolean }>`
  width: 100%;
  height: 100%;
  border: none;
-  color: ${({ theme, open }) => (open ? theme.blue200 : theme.textPrimary)};
+  color: ${({ theme, open }) => (open ? theme.accentActive : theme.textPrimary)};
  margin: 0;
  background-color: ${({ theme, open }) => (open ? theme.accentActiveSoft : theme.backgroundInteractive)};
  padding: 6px 12px 6px 12px;
@@ -131,7 +131,7 @@ const StyledMenuContent = styled.div`

 const Chevron = styled.span<{ open: boolean }>`
  padding-top: 1px;
-  color: ${({ open, theme }) => (open ? theme.blue200 : theme.textSecondary)};
+  color: ${({ open, theme }) => (open ? theme.accentActive : theme.textSecondary)};
 `

 // TODO: change this to reflect data pipeline
--- a/src/components/Tokens/TokenTable/TokenRow.tsx
+++ b/src/components/Tokens/TokenTable/TokenRow.tsx
@@ -149,10 +149,11 @@ const StyledHeaderRow = styled(StyledTokenRow)`
    justify-content: space-between;
  }
 `
-const ListNumberCell = styled(Cell)`
+
+const ListNumberCell = styled(Cell)<{ header: boolean }>`
  color: ${({ theme }) => theme.textSecondary};
  min-width: 32px;
-  height: 48px;
+  height: ${({ header }) => (header ? '48px' : '60px')};

  @media only screen and (max-width: ${SMALL_MEDIA_BREAKPOINT}) {
    display: none;
@@ -389,7 +390,7 @@ export function TokenRow({
 }) {
  const rowCells = (
    <>
-      <ListNumberCell>{listNumber}</ListNumberCell>
+      <ListNumberCell header={header}>{listNumber}</ListNumberCell>
      <NameCell>{tokenInfo}</NameCell>
      <PriceCell sortable={header}>{price}</PriceCell>
      <PercentChangeCell sortable={header}>{percentChange}</PercentChangeCell>
--- a/src/components/WalletDropdown/DefaultMenu.tsx
+++ b/src/components/WalletDropdown/DefaultMenu.tsx
@@ -27,7 +27,7 @@ const ConnectButton = styled(ButtonPrimary)`
 `

 const Divider = styled.div`
-  border: 1px solid ${({ theme }) => theme.backgroundOutline};
+  border-bottom: 1px solid ${({ theme }) => theme.backgroundOutline};
  margin-top: 16px;
  margin-bottom: 16px;
 `
--- a/src/components/Web3Status/index.tsx
+++ b/src/components/Web3Status/index.tsx
@@ -3,6 +3,7 @@ import { t, Trans } from '@lingui/macro'
 import { useWeb3React } from '@web3-react/core'
 import { ElementName, Event, EventName } from 'components/AmplitudeAnalytics/constants'
 import { TraceEvent } from 'components/AmplitudeAnalytics/TraceEvent'
+import { StyledChevronDown, StyledChevronUp } from 'components/Icons'
 import WalletDropdown from 'components/WalletDropdown'
 import { getConnection } from 'connection/utils'
 import { NavBarVariant, useNavBarFlag } from 'featureFlags/flags/navBar'
@@ -10,10 +11,10 @@ import { Portal } from 'nft/components/common/Portal'
 import { getIsValidSwapQuote } from 'pages/Swap'
 import { darken } from 'polished'
 import { useMemo, useRef } from 'react'
-import { AlertTriangle, ChevronDown, ChevronUp } from 'react-feather'
+import { AlertTriangle } from 'react-feather'
 import { useAppSelector } from 'state/hooks'
 import { useDerivedSwapInfo } from 'state/swap/hooks'
-import styled, { css } from 'styled-components/macro'
+import styled, { css, useTheme } from 'styled-components/macro'

 import { useOnClickOutside } from '../../hooks/useOnClickOutside'
 import { useHasSocks } from '../../hooks/useSocksBalance'
@@ -67,7 +68,7 @@ const Web3StatusConnectNavbar = styled.button<{ faded?: boolean }>`
  border-radius: 12px;
  border: none;
  cursor: pointer;
-  padding: 10px 12px;
+  padding: 8px 12px;

  :hover,
  :active,
@@ -153,6 +154,7 @@ function Sock() {

 const VerticalDivider = styled.div`
  height: 20px;
+  margin: 0px 4px;
  width: 1px;
  background-color: ${({ theme }) => theme.accentAction};
 `
@@ -173,21 +175,6 @@ const StyledConnect = styled.div`
  }
 `

-const StyledChevron = styled.span`
-  color: ${({ theme }) => theme.accentAction};
-  height: 24px;
-  margin-left: 4px;
-
-  &:hover {
-    color: ${({ theme }) => theme.accentActionSoft};
-    transition: ${({
-      theme: {
-        transition: { duration, timing },
-      },
-    }) => `${duration.fast}ms color ${timing.in}`};
-  }
-`
-
 function Web3StatusInner() {
  const { account, connector, chainId, ENSName } = useWeb3React()
  const connectionType = getConnection(connector).type
@@ -196,7 +183,8 @@ function Web3StatusInner() {
    inputError: swapInputError,
  } = useDerivedSwapInfo()
  const validSwapQuote = getIsValidSwapQuote(trade, tradeState, swapInputError)
-  const navbarFlag = useNavBarFlag()
+  const navbarFlagEnabled = useNavBarFlag() === NavBarVariant.Enabled
+  const theme = useTheme()
  const toggleWalletDropdown = useToggleWalletDropdown()
  const toggleWalletModal = useToggleWalletModal()
  const walletIsOpen = useIsOpen()
@@ -214,7 +202,7 @@ function Web3StatusInner() {

  const hasPendingTransactions = !!pending.length
  const hasSocks = useHasSocks()
-  const toggleWallet = navbarFlag === NavBarVariant.Enabled ? toggleWalletDropdown : toggleWalletModal
+  const toggleWallet = navbarFlagEnabled ? toggleWalletDropdown : toggleWalletModal

  if (!chainId) {
    return null
@@ -230,6 +218,7 @@ function Web3StatusInner() {
  } else if (account) {
    return (
      <Web3StatusConnected data-testid="web3-status-connected" onClick={toggleWallet} pending={hasPendingTransactions}>
+        {navbarFlagEnabled && !hasPendingTransactions && <StatusIcon connectionType={connectionType} />}
        {hasPendingTransactions ? (
          <RowBetween>
            <Text>
@@ -241,9 +230,16 @@ function Web3StatusInner() {
          <>
            {hasSocks ? <Sock /> : null}
            <Text>{ENSName || shortenAddress(account)}</Text>
+            {navbarFlagEnabled ? (
+              walletIsOpen ? (
+                <StyledChevronUp onClick={toggleWalletDropdown} />
+              ) : (
+                <StyledChevronDown onClick={toggleWalletDropdown} />
+              )
+            ) : null}
          </>
        )}
-        {!hasPendingTransactions && <StatusIcon connectionType={connectionType} />}
+        {!navbarFlagEnabled && !hasPendingTransactions && <StatusIcon connectionType={connectionType} />}
      </Web3StatusConnected>
    )
  } else {
@@ -254,15 +250,17 @@ function Web3StatusInner() {
        properties={{ received_swap_quote: validSwapQuote }}
        element={ElementName.CONNECT_WALLET_BUTTON}
      >
-        {navbarFlag === NavBarVariant.Enabled ? (
+        {navbarFlagEnabled ? (
          <Web3StatusConnectNavbar faded={!account}>
            <StyledConnect onClick={toggleWalletModal}>
              <Trans>Connect</Trans>
            </StyledConnect>
            <VerticalDivider />
-            <StyledChevron onClick={toggleWalletDropdown}>
-              {walletIsOpen ? <ChevronUp /> : <ChevronDown />}
-            </StyledChevron>
+            {walletIsOpen ? (
+              <StyledChevronUp customColor={theme.accentAction} onClick={toggleWalletDropdown} />
+            ) : (
+              <StyledChevronDown customColor={theme.accentAction} onClick={toggleWalletDropdown} />
+            )}
          </Web3StatusConnectNavbar>
        ) : (
          <Web3StatusConnect onClick={toggleWallet} faded={!account}>
--- a/src/components/Widget/inputs.tsx
+++ b/src/components/Widget/inputs.tsx
@@ -8,7 +8,7 @@ import { useCallback, useMemo, useState } from 'react'
 */
 export function useSyncWidgetInputs(defaultToken?: Currency) {
  const [type, setType] = useState(TradeType.EXACT_INPUT)
-  const [amount, setAmount] = useState<string>()
+  const [amount, setAmount] = useState('')
  const onAmountChange = useCallback((field: Field, amount: string) => {
    setType(toTradeType(field))
    setAmount(amount)
--- a/src/nft/components/icons.tsx
+++ b/src/nft/components/icons.tsx
@@ -304,35 +304,35 @@ export const InstagramIcon = (props: SVGProps) => (
 )

 export const EllipsisIcon = (props: SVGProps) => (
-  <svg fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
    <path
-      d="M13.9974 15.1663C14.6417 15.1663 15.1641 14.644 15.1641 13.9997C15.1641 13.3553 14.6417 12.833 13.9974 12.833C13.3531 12.833 12.8307 13.3553 12.8307 13.9997C12.8307 14.644 13.3531 15.1663 13.9974 15.1663Z"
+      d="M12 13C12.5523 13 13 12.5523 13 12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12C11 12.5523 11.4477 13 12 13Z"
      fill="currentColor"
    />
    <path
-      d="M22.1641 15.1663C22.8084 15.1663 23.3307 14.644 23.3307 13.9997C23.3307 13.3553 22.8084 12.833 22.1641 12.833C21.5197 12.833 20.9974 13.3553 20.9974 13.9997C20.9974 14.644 21.5197 15.1663 22.1641 15.1663Z"
+      d="M19 13C19.5523 13 20 12.5523 20 12C20 11.4477 19.5523 11 19 11C18.4477 11 18 11.4477 18 12C18 12.5523 18.4477 13 19 13Z"
      fill="currentColor"
    />
    <path
-      d="M5.83073 15.1663C6.47506 15.1663 6.9974 14.644 6.9974 13.9997C6.9974 13.3553 6.47506 12.833 5.83073 12.833C5.1864 12.833 4.66406 13.3553 4.66406 13.9997C4.66406 14.644 5.1864 15.1663 5.83073 15.1663Z"
+      d="M5 13C5.55228 13 6 12.5523 6 12C6 11.4477 5.55228 11 5 11C4.44772 11 4 11.4477 4 12C4 12.5523 4.44772 13 5 13Z"
      fill="currentColor"
    />
    <path
-      d="M13.9974 15.1663C14.6417 15.1663 15.1641 14.644 15.1641 13.9997C15.1641 13.3553 14.6417 12.833 13.9974 12.833C13.3531 12.833 12.8307 13.3553 12.8307 13.9997C12.8307 14.644 13.3531 15.1663 13.9974 15.1663Z"
+      d="M12 13C12.5523 13 13 12.5523 13 12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12C11 12.5523 11.4477 13 12 13Z"
      stroke="currentColor"
      strokeWidth="2.5"
      strokeLinecap="round"
      strokeLinejoin="round"
    />
    <path
-      d="M22.1641 15.1663C22.8084 15.1663 23.3307 14.644 23.3307 13.9997C23.3307 13.3553 22.8084 12.833 22.1641 12.833C21.5197 12.833 20.9974 13.3553 20.9974 13.9997C20.9974 14.644 21.5197 15.1663 22.1641 15.1663Z"
+      d="M19 13C19.5523 13 20 12.5523 20 12C20 11.4477 19.5523 11 19 11C18.4477 11 18 11.4477 18 12C18 12.5523 18.4477 13 19 13Z"
      stroke="currentColor"
      strokeWidth="2.5"
      strokeLinecap="round"
      strokeLinejoin="round"
    />
    <path
-      d="M5.83073 15.1663C6.47506 15.1663 6.9974 14.644 6.9974 13.9997C6.9974 13.3553 6.47506 12.833 5.83073 12.833C5.1864 12.833 4.66406 13.3553 4.66406 13.9997C4.66406 14.644 5.1864 15.1663 5.83073 15.1663Z"
+      d="M5 13C5.55228 13 6 12.5523 6 12C6 11.4477 5.55228 11 5 11C4.44772 11 4 11.4477 4 12C4 12.5523 4.44772 13 5 13Z"
      stroke="currentColor"
      strokeWidth="2.5"
      strokeLinecap="round"
@@ -1019,18 +1019,6 @@ export const HundredsOverflowIcon = () => (
  </svg>
 )

-export const NewChevronUpIcon = (props: SVGProps) => (
-  <svg {...props} fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M12 10L8 6L4 10" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
-  </svg>
-)
-
-export const NewChevronDownIcon = (props: SVGProps) => (
-  <svg {...props} fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M4 6L8 10L12 6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
-  </svg>
-)
-
 export const TagIcon = (props: SVGProps) => (
  <svg fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
    <path
--- a/src/theme/index.tsx
+++ b/src/theme/index.tsx
@@ -131,7 +131,6 @@ function uniswapThemeColors(darkMode: boolean): ThemeColors {
    chain_421611: colorsDark.chain_421611,
    chain_80001: colorsDark.chain_80001,

-    blue200: ColorsPalette.blue200,
    shallowShadow: darkMode ? colorsDark.shallowShadow : colorsLight.shallowShadow,
    deepShadow: darkMode ? colorsDark.deepShadow : colorsLight.deepShadow,
    hoverState: opacify(24, ColorsPalette.blue200),
--- a/src/theme/styled.d.ts
+++ b/src/theme/styled.d.ts
@@ -53,7 +53,6 @@ export interface ThemeColors {
  chain_421611: Color
  chain_80001: Color

-  blue200: Color
  shallowShadow: Color
  deepShadow: Color
  hoverState: Color
--- a/src/utils/formatChartTimes.ts
+++ b/src/utils/formatChartTimes.ts
@@ -41,8 +41,19 @@ export const monthYearDayFormatter = (locale: string) => (timestamp: NumberValue
    day: 'numeric',
  })

-export const monthFormatter = (locale: string) => (timestamp: NumberValue) =>
-  createDateFormatter(timestamp, locale, { month: 'long' })
+export const monthTickFormatter = (locale: string) => (timestamp: NumberValue) => {
+  let date = new Date(timestamp.valueOf() * 1000)
+
+  // when a tick maps to a date not on the first of the month, modify the tick to the closest
+  // first of month date. For example, Dec 31 becomes Jan 1, and Dec 5 becomes Dec 1.
+  if (date.getDate() !== 1) {
+    date =
+      date.getDate() >= 15
+        ? new Date(date.getFullYear(), date.getMonth() + 1, 1)
+        : new Date(date.getFullYear(), date.getMonth(), 1)
+  }
+  return date.toLocaleDateString(locale, { month: 'long' })
+}

 export const weekFormatter = (locale: string) => (timestamp: NumberValue) =>
  createDateFormatter(timestamp, locale, { weekday: 'long' })
--- a/yarn.lock
+++ b/yarn.lock
@@ -4212,10 +4212,10 @@
    "@uniswap/v3-core" "1.0.0"
    "@uniswap/v3-periphery" "^1.0.1"

-"@uniswap/widgets@^2.3.1":
-  version "2.3.1"
-  resolved "https://registry.yarnpkg.com/@uniswap/widgets/-/widgets-2.3.1.tgz#e9973cb34d19534ccf7a7dbe79de63bc5fe7e1e9"
-  integrity sha512-b6eL/fIjAkj52dj0TVcVF5FeQ1r3dAtPNoO4Go4zABVHlj6c4m6dariY3VQBkNnd2vwt40XBELtiuYXZn3DGjA==
+"@uniswap/widgets@^2.5.0":
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/@uniswap/widgets/-/widgets-2.5.0.tgz#61d72da0ca7bf2091b339df6e3546c9066b34245"
+  integrity sha512-uGFOTf5mzJPhccBf99RRQ4ExQqmgAKn5WbNr3ZrXm1yfjT8Qf4xI3TTa5BrpMlGYr5If4v0vDA3q4WpcQ3isyg==
  dependencies:
    "@babel/runtime" "^7.17.0"
    "@fontsource/ibm-plex-mono" "^4.5.1"
@@ -7491,11 +7491,6 @@ d3-contour@4:
  dependencies:
    d3-array "^3.2.0"

-d3-curve-circlecorners@^0.1.6:
-  version "0.1.6"
-  resolved "https://registry.yarnpkg.com/d3-curve-circlecorners/-/d3-curve-circlecorners-0.1.6.tgz#da786c38b4a50024c6ae07e203a98c16e9f85202"
-  integrity sha512-FPOhAYPuEMcIuj3GZ/lp+GzJ82EpcuMjnwBXJZjCRk1NNuQail6DgCz+VjEhdMeef/VBoh1k8A8fn6XJWUlEjw==
-
 d3-delaunay@6:
  version "6.0.2"
  resolved "https://registry.yarnpkg.com/d3-delaunay/-/d3-delaunay-6.0.2.tgz#7fd3717ad0eade2fc9939f4260acfb503f984e92"
Author	SHA1	Message	Date
aballerr	bad1ce2618	fix: Prod has chevron (#4558 ) Remove chevron from prod Co-authored-by: Alex Ball <alexball@UNISWAP-MAC-038.local>	2022-09-01 10:20:09 -04:00
Vignesh Mohankumar	f194845b2b	chore: remove theme.blue200 (#4533 ) * chore: remove theme.blue200 * favorite button changes	2022-08-31 20:13:21 -04:00
Jack Short	98d4e108e6	fix: search icon bug (#4556 )	2022-08-31 19:35:06 -04:00
lynn	ab43ed1900	fix: connect wallet button chevron styling fixes (#4554 ) * fix * simplify	2022-08-31 18:16:42 -04:00
Greg Bugyis	b147e047a5	fix: Bump height on LineNumberCell and pass header boolean (#4548 )	2022-08-31 20:36:23 +03:00
Charles Bachmeier	bbb616f56c	feat: auto set cursor on searchbar opening (#4552 ) * auto set cursor on searchbar opening * comment update Co-authored-by: Charlie <charlie@uniswap.org>	2022-08-31 10:33:51 -07:00
Charles Bachmeier	35a429ea65	feat: highlight first result by default (#4551 ) highlight first result by default Co-authored-by: Charlie <charlie@uniswap.org>	2022-08-31 10:33:33 -07:00
Zach Pomerantz	bd16543c10	build: upgrade @uniswap/widgets to 2.5.0 (#4546 ) * build: rm d3-curve-circlecorners entry * build: upgrade @uniswap/widgets package * fix: widget input typing	2022-08-31 10:29:50 -07:00
Charles Bachmeier	cbdeae276e	feat: adjust bottom navbar padding (#4550 ) adjust bottom navbar padding Co-authored-by: Charlie <charlie@uniswap.org>	2022-08-31 09:57:42 -07:00
lynn	e733113963	fix: modify chart axis to to match crosshairs in year view (#4547 ) * fix * simplify * refactor * move logic to monthTickFormatter * time to date string	2022-08-31 11:31:33 -04:00
aballerr	272b030b89	fix: Fixing border overlap and reducing button size (#4537 ) * fixing styling on wallet border Co-authored-by: Alex Ball <alexball@UNISWAP-MAC-038.local>	2022-08-31 11:11:37 -04:00