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

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) => {

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

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

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%;
 `

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

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