From f11273b7752a31cb56a3b614f9b3d7ed234636fa Mon Sep 17 00:00:00 2001
From: Kristie Huang <kristiehuang01@gmail.com>
Date: Tue, 10 Oct 2023 18:48:33 -0400
Subject: [PATCH] breakpoints

---
 .../Tokens/TokenTable/NetworkFilter.tsx       | 18 +++++++----
 .../Tokens/TokenTable/SearchBar.tsx           |  2 +-
 .../Tokens/TokenTable/TimeSelector.tsx        | 30 +++++++++++--------
 src/pages/Explore/index.tsx                   |  9 ++----
 4 files changed, 33 insertions(+), 26 deletions(-)

diff --git a/src/components/Tokens/TokenTable/NetworkFilter.tsx b/src/components/Tokens/TokenTable/NetworkFilter.tsx
index 668cc6818c6..13f9fbfab40 100644
--- a/src/components/Tokens/TokenTable/NetworkFilter.tsx
+++ b/src/components/Tokens/TokenTable/NetworkFilter.tsx
@@ -16,7 +16,6 @@ import { ApplicationModal } from 'state/application/reducer'
 import styled, { css, useTheme } from 'styled-components'
 import { EllipsisStyle } from 'theme/components'
 
-import { LARGE_MEDIA_BREAKPOINT } from '../constants'
 import FilterOption from './FilterOption'
 
 const InternalMenuItem = styled.div`
@@ -50,7 +49,7 @@ const InternalLinkMenuItem = styled(InternalMenuItem)<{ disabled?: boolean }>`
     `}
 `
 const MenuTimeFlyout = styled.span<{ isInfoExplorePageEnabled: boolean }>`
-  min-width: 150px;
+  min-width: ${({ isInfoExplorePageEnabled }) => (isInfoExplorePageEnabled ? '150px' : '240px')};
   max-height: 350px;
   overflow: auto;
   background-color: ${({ theme }) => theme.surface1};
@@ -64,11 +63,18 @@ const MenuTimeFlyout = styled.span<{ isInfoExplorePageEnabled: boolean }>`
   position: absolute;
   top: 48px;
   z-index: 100;
-  ${({ isInfoExplorePageEnabled }) => (isInfoExplorePageEnabled ? 'right: 0px;' : 'left: 0px;')}
 
-  @media screen and (max-width: ${LARGE_MEDIA_BREAKPOINT}) {
-    left: 0px;
-  }
+  ${({ isInfoExplorePageEnabled }) =>
+    isInfoExplorePageEnabled
+      ? css`
+          right: 0px;
+          @media screen and (max-width: ${({ theme }) => `${theme.breakpoint.lg}px`}) {
+            left: 0px;
+          }
+        `
+      : css`
+          left: 0px;
+        `}
 `
 const StyledMenu = styled.div`
   display: flex;
diff --git a/src/components/Tokens/TokenTable/SearchBar.tsx b/src/components/Tokens/TokenTable/SearchBar.tsx
index 0b99fdec1df..fb9e5358720 100644
--- a/src/components/Tokens/TokenTable/SearchBar.tsx
+++ b/src/components/Tokens/TokenTable/SearchBar.tsx
@@ -34,7 +34,7 @@ const SearchInput = styled.input<{ isInfoExplorePageEnabled: boolean; isOpen?: b
   padding-left: 40px;
   color: ${({ theme }) => theme.neutral2};
   transition-duration: ${({ theme }) => theme.transition.duration.fast};
-  ${({ isInfoExplorePageEnabled }) => isInfoExplorePageEnabled && 'text-overflow: ellipsis;'}
+  ${(isInfoExplorePageEnabled) => isInfoExplorePageEnabled && 'text-overflow: ellipsis;'}
 
   :hover {
     background-color: ${({ theme }) => theme.surface1};
diff --git a/src/components/Tokens/TokenTable/TimeSelector.tsx b/src/components/Tokens/TokenTable/TimeSelector.tsx
index 10f597e292e..a9bdc6e6613 100644
--- a/src/components/Tokens/TokenTable/TimeSelector.tsx
+++ b/src/components/Tokens/TokenTable/TimeSelector.tsx
@@ -7,7 +7,7 @@ import { useRef } from 'react'
 import { Check, ChevronDown, ChevronUp } from 'react-feather'
 import { useModalIsOpen, useToggleModal } from 'state/application/hooks'
 import { ApplicationModal } from 'state/application/reducer'
-import styled, { useTheme } from 'styled-components'
+import styled, { css, useTheme } from 'styled-components'
 
 import { MOBILE_MEDIA_BREAKPOINT, SMALL_MEDIA_BREAKPOINT } from '../constants'
 import { filterTimeAtom } from '../state'
@@ -71,9 +71,14 @@ const MenuTimeFlyout = styled.span<{ isInfoExplorePageEnabled: boolean }>`
   z-index: 100;
   left: 0px;
 
-  @media only screen and (max-width: ${SMALL_MEDIA_BREAKPOINT}) {
-    ${({ isInfoExplorePageEnabled }) => !isInfoExplorePageEnabled && 'left: unset; right: 0px;'}
-  }
+  ${({ isInfoExplorePageEnabled }) =>
+    !isInfoExplorePageEnabled &&
+    css`
+      @media only screen and (max-width: ${SMALL_MEDIA_BREAKPOINT}) {
+        left: unset;
+        right: 0px;
+      }
+    `}
 `
 const StyledMenu = styled.div<{ isInfoExplorePageEnabled: boolean }>`
   display: flex;
@@ -83,9 +88,13 @@ const StyledMenu = styled.div<{ isInfoExplorePageEnabled: boolean }>`
   border: none;
   text-align: left;
 
-  @media only screen and (max-width: ${MOBILE_MEDIA_BREAKPOINT}) {
-    ${({ isInfoExplorePageEnabled }) => !isInfoExplorePageEnabled && 'width: 72px;'}
-  }
+  ${({ isInfoExplorePageEnabled }) =>
+    !isInfoExplorePageEnabled &&
+    css`
+      @media only screen and (max-width: ${MOBILE_MEDIA_BREAKPOINT}) {
+        width: 72px;
+      }
+    `}
 `
 const StyledMenuContent = styled.div<{ isInfoExplorePageEnabled: boolean }>`
   display: flex;
@@ -144,15 +153,12 @@ export default function TimeSelector() {
                 toggleMenu()
               }}
             >
-              {/* <div>
-                {DISPLAYS[time]} <Trans>volume</Trans>
-              </div> */}
               {isInfoExplorePageEnabled ? (
                 <div>
-                  {DISPLAYS[activeTime]} <Trans>volume</Trans>
+                  {DISPLAYS[time]} <Trans>volume</Trans>
                 </div>
               ) : (
-                <div>{DISPLAYS[activeTime]}</div>
+                <div>{DISPLAYS[time]}</div>
               )}
               {time === activeTime && <Check color={theme.accent1} size={16} />}
             </InternalLinkMenuItem>
diff --git a/src/pages/Explore/index.tsx b/src/pages/Explore/index.tsx
index 402a80bd6d0..31961ce252d 100644
--- a/src/pages/Explore/index.tsx
+++ b/src/pages/Explore/index.tsx
@@ -3,11 +3,7 @@ import { BrowserEvent, InterfaceElementName, InterfacePageName, SharedEventName
 import { TraceEvent } from 'analytics'
 import { Trace } from 'analytics'
 import { AutoRow } from 'components/Row'
-import {
-  LARGE_MEDIA_BREAKPOINT,
-  MAX_WIDTH_MEDIA_BREAKPOINT,
-  MEDIUM_MEDIA_BREAKPOINT,
-} from 'components/Tokens/constants'
+import { MAX_WIDTH_MEDIA_BREAKPOINT, MEDIUM_MEDIA_BREAKPOINT } from 'components/Tokens/constants'
 import { filterStringAtom } from 'components/Tokens/state'
 import NetworkFilter from 'components/Tokens/TokenTable/NetworkFilter'
 import SearchBar from 'components/Tokens/TokenTable/SearchBar'
@@ -57,8 +53,7 @@ const NavWrapper = styled.div<{ isInfoExplorePageEnabled: boolean }>`
   ${({ isInfoExplorePageEnabled }) =>
     isInfoExplorePageEnabled &&
     css`
-      /* Use large media breakpoint so expanded search bar doesn't push tabs to next line */
-      @media screen and (max-width: ${LARGE_MEDIA_BREAKPOINT}) {
+      @media screen and (max-width: ${({ theme }) => `${theme.breakpoint.lg}px`}) {
         flex-direction: column;
         gap: 16px;
       }