style: updating explore language and css (#4772)

* finished updating explore language and css * implemented feedback from fred * refactored css for row height * extended filter option
2022-10-03 10:49:17 -04:00 · 2022-10-03 10:49:17 -04:00 · 1839e145ec
commit 1839e145ec
parent 8c1e41a3a8
6 changed files with 32 additions and 39 deletions
--- a/src/components/Tokens/TokenTable/NetworkFilter.tsx
+++ b/src/components/Tokens/TokenTable/NetworkFilter.tsx
@ -64,7 +64,6 @@ const StyledMenuContent = styled.div`
  gap: 8px;
  align-items: center;
  border: none;
-  width: 100%;
  font-weight: 600;
  vertical-align: middle;
 `
@ -85,6 +84,9 @@ const CheckContainer = styled.div`
  display: flex;
  flex-direction: flex-end;
 `
+const NetworkFilterOption = styled(FilterOption)`
+  width: 156px;
+`

 export default function NetworkFilter() {
  const theme = useTheme()
@ -101,7 +103,7 @@ export default function NetworkFilter() {

  return (
    <StyledMenu ref={node}>
-      <FilterOption onClick={toggleMenu} aria-label={`networkFilter`} active={open}>
+      <NetworkFilterOption onClick={toggleMenu} aria-label={`networkFilter`} active={open}>
        <StyledMenuContent>
          <NetworkLabel>
            <Logo src={circleLogoUrl ?? logoUrl} /> {label}
@ -114,7 +116,7 @@ export default function NetworkFilter() {
            )}
          </Chevron>
        </StyledMenuContent>
-      </FilterOption>
+      </NetworkFilterOption>
      {open && (
        <MenuTimeFlyout>
          {BACKEND_CHAIN_NAMES.map((network) => {
--- a/src/components/Tokens/TokenTable/SearchBar.tsx
+++ b/src/components/Tokens/TokenTable/SearchBar.tsx
@ -23,10 +23,10 @@ const SearchInput = styled.input`
  background-position: 12px center;
  background-color: ${({ theme }) => theme.backgroundModule};
  border-radius: 12px;
-  border: 1px solid ${({ theme }) => theme.backgroundOutline};
+  border: 1.5px solid ${({ theme }) => theme.backgroundOutline};
  height: 100%;
  width: min(200px, 100%);
-  font-size: 16px;
+  font-size: 14px;
  padding-left: 40px;
  color: ${({ theme }) => theme.textSecondary};
  transition-duration: ${({ theme }) => theme.transition.duration.fast};
--- a/src/components/Tokens/TokenTable/TokenRow.tsx
+++ b/src/components/Tokens/TokenTable/TokenRow.tsx
@ -7,7 +7,7 @@ import CurrencyLogo from 'components/CurrencyLogo'
 import { getChainInfo } from 'constants/chainInfo'
 import { FavoriteTokensVariant, useFavoriteTokensFlag } from 'featureFlags/flags/favoriteTokens'
 import { TokenSortMethod, TopToken } from 'graphql/data/TopTokens'
-import { CHAIN_NAME_TO_CHAIN_ID, getTokenDetailsURL, TimePeriod } from 'graphql/data/util'
+import { CHAIN_NAME_TO_CHAIN_ID, getTokenDetailsURL } from 'graphql/data/util'
 import { useAtomValue } from 'jotai/utils'
 import { ForwardedRef, forwardRef } from 'react'
 import { CSSProperties, ReactNode } from 'react'
@ -35,7 +35,6 @@ import {
 } from '../state'
 import { useTokenLogoURI } from '../TokenDetails/ChartSection'
 import { formatDelta, getDeltaArrow } from '../TokenDetails/PriceChart'
-import { DISPLAYS } from './TimeSelector'

 const Cell = styled.div`
  display: flex;
@ -50,15 +49,17 @@ const StyledTokenRow = styled.div<{
 }>`
  background-color: transparent;
  display: grid;
-  font-size: 15px;
+  font-size: 16px;
  grid-template-columns: ${({ favoriteTokensEnabled }) =>
    favoriteTokensEnabled ? '1fr 7fr 4fr 4fr 4fr 4fr 5fr 1.2fr' : '1fr 7fr 4fr 4fr 4fr 4fr 5fr'};
-  height: 60px;
  line-height: 24px;
  max-width: ${MAX_WIDTH_MEDIA_BREAKPOINT};
  min-width: 390px;
-  padding-top: ${({ first }) => (first ? '4px' : '0px')};
-  padding-bottom: ${({ last }) => (last ? '4px' : '0px')};
+  ${({ first, last }) => css`
+    height: ${first || last ? '72px' : '64px'};
+    padding-top: ${first ? '8px' : '0px'};
+    padding-bottom: ${last ? '8px' : '0px'};
+  `}
  padding-left: 12px;
  padding-right: 12px;
  transition: ${({
@ -150,7 +151,7 @@ const StyledHeaderRow = styled(StyledTokenRow)`
  border-color: ${({ theme }) => theme.backgroundOutline};
  border-radius: 8px 8px 0px 0px;
  color: ${({ theme }) => theme.textSecondary};
-  font-size: 12px;
+  font-size: 14px;
  height: 48px;
  line-height: 16px;
  padding: 0px 12px;
@ -169,6 +170,7 @@ const StyledHeaderRow = styled(StyledTokenRow)`
 const ListNumberCell = styled(Cell)<{ header: boolean }>`
  color: ${({ theme }) => theme.textSecondary};
  min-width: 32px;
+  font-size: 14px;
  height: ${({ header }) => (header ? '48px' : '60px')};

  @media only screen and (max-width: ${SMALL_MEDIA_BREAKPOINT}) {
@ -328,13 +330,6 @@ export const LogoContainer = styled.div`
  display: flex;
 `

-/* formatting for volume with timeframe header display */
-function getHeaderDisplay(method: string, timeframe: TimePeriod): string {
-  if (method === TokenSortMethod.VOLUME || method === TokenSortMethod.PERCENT_CHANGE)
-    return `${DISPLAYS[timeframe]} ${method}`
-  return method
-}
-
 /* Get singular header cell for header row */
 function HeaderCell({
  category,
@ -347,19 +342,18 @@ function HeaderCell({
  const sortAscending = useAtomValue(sortAscendingAtom)
  const handleSortCategory = useSetSortMethod(category)
  const sortMethod = useAtomValue(sortMethodAtom)
-  const timeframe = useAtomValue(filterTimeAtom)

  if (sortMethod === category) {
    return (
      <HeaderCellWrapper onClick={handleSortCategory}>
        <SortArrowCell>
          {sortAscending ? (
-            <ArrowUp size={14} color={theme.accentActive} />
+            <ArrowUp size={20} strokeWidth={1.8} color={theme.accentActive} />
          ) : (
-            <ArrowDown size={14} color={theme.accentActive} />
+            <ArrowDown size={20} strokeWidth={1.8} color={theme.accentActive} />
          )}
        </SortArrowCell>
-        {getHeaderDisplay(category, timeframe)}
+        {category}
      </HeaderCellWrapper>
    )
  }
@ -369,11 +363,11 @@ function HeaderCell({
        <SortArrowCell>
          <ArrowUp size={14} visibility="hidden" />
        </SortArrowCell>
-        {getHeaderDisplay(category, timeframe)}
+        {category}
      </HeaderCellWrapper>
    )
  }
-  return <HeaderCellWrapper>{getHeaderDisplay(category, timeframe)}</HeaderCellWrapper>
+  return <HeaderCellWrapper>{category}</HeaderCellWrapper>
 }

 /* Token Row: skeleton row component */
--- a/src/components/Tokens/TokenTable/TokenTable.tsx
+++ b/src/components/Tokens/TokenTable/TokenTable.tsx
@ -22,13 +22,16 @@ const GridContainer = styled.div`
    0px 24px 32px rgba(0, 0, 0, 0.01);
  margin-left: auto;
  margin-right: auto;
-  border-radius: 8px;
+  border-radius: 12px;
  justify-content: center;
  align-items: center;
  border: 1px solid ${({ theme }) => theme.backgroundOutline};
 `

 const TokenDataContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
  height: 100%;
  width: 100%;
 `
--- a/src/components/Tokens/state.ts
+++ b/src/components/Tokens/state.ts
@ -8,7 +8,7 @@ export const favoritesAtom = atomWithStorage<string[]>('favorites', [])
 export const showFavoritesAtom = atomWithStorage<boolean>('showFavorites', false)
 export const filterStringAtom = atomWithReset<string>('')
 export const filterTimeAtom = atom<TimePeriod>(TimePeriod.DAY)
-export const sortMethodAtom = atom<TokenSortMethod>(TokenSortMethod.TOTAL_VALUE_LOCKED)
+export const sortMethodAtom = atom<TokenSortMethod>(TokenSortMethod.VOLUME)
 export const sortAscendingAtom = atom<boolean>(false)

 /* for favoriting tokens */
--- a/src/pages/Tokens/index.tsx
+++ b/src/pages/Tokens/index.tsx
@ -30,11 +30,8 @@ const ExploreContainer = styled.div`
    padding-top: 20px;
  }
 `
-const TokenTableContainer = styled.div`
-  padding: 16px 0px;
-`
 export const TitleContainer = styled.div`
-  margin-bottom: 16px;
+  margin-bottom: 32px;
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
@ -62,6 +59,7 @@ const FiltersWrapper = styled.div`
  display: flex;
  max-width: ${MAX_WIDTH_MEDIA_BREAKPOINT};
  margin: 0 auto;
+  margin-bottom: 20px;

  @media only screen and (max-width: ${MEDIUM_MEDIA_BREAKPOINT}) {
    flex-direction: column;
@ -86,7 +84,7 @@ const Tokens = () => {
      <ExploreContainer>
        <TitleContainer>
          <ThemedText.LargeHeader>
-            <Trans>Explore Tokens</Trans>
+            <Trans>Top tokens on Uniswap</Trans>
          </ThemedText.LargeHeader>
        </TitleContainer>
        <FiltersWrapper>
@ -99,9 +97,7 @@ const Tokens = () => {
            <SearchBar />
          </SearchContainer>
        </FiltersWrapper>
-        <TokenTableContainer>
-          <TokenTable />
-        </TokenTableContainer>
+        <TokenTable />
      </ExploreContainer>
    </Trace>
  )
@ -112,7 +108,7 @@ export const LoadingTokens = () => {
    <ExploreContainer>
      <TitleContainer>
        <ThemedText.LargeHeader>
-          <Trans>Explore Tokens</Trans>
+          <Trans>Top tokens on Uniswap</Trans>
        </ThemedText.LargeHeader>
      </TitleContainer>
      <FiltersWrapper>
@ -125,9 +121,7 @@ export const LoadingTokens = () => {
          <SearchBar />
        </SearchContainer>
      </FiltersWrapper>
-      <TokenTableContainer>
-        <LoadingTokenTable />
-      </TokenTableContainer>
+      <LoadingTokenTable />
    </ExploreContainer>
  )
 }