style: added transition ease to explore (#4616)

* initial commit
* updated transition css
* added opacity constants to theme, switched to using transition duration constants

src/components/AccountDetails/index.tsx

@@ -145,7 +145,7 @@ const CloseIcon = styled.div`
   top: 14px;
   &:hover {
     cursor: pointer;
-    opacity: 0.6;
+    opacity: ${({ theme }) => theme.opacity.hover};
   }
 `
 

src/components/Icons/index.tsx

@@ -12,7 +12,7 @@ export const StyledChevronDown = styled(ChevronDown)<{ customColor?: string }>`
       theme: {
         transition: { duration, timing },
       },
-    }) => `${duration.fast}ms color ${timing.in}`};
+    }) => `${duration.fast} color ${timing.in}`};
   }
 `
 
@@ -27,6 +27,6 @@ export const StyledChevronUp = styled(ChevronUp)<{ customColor?: string }>`
       theme: {
         transition: { duration, timing },
       },
-    }) => `${duration.fast}ms color ${timing.in}`};
+    }) => `${duration.fast} color ${timing.in}`};
   }
 `

src/components/LiquidityChartRangeInput/Brush.tsx

@@ -19,7 +19,7 @@ const HandleAccent = styled.path`
 
   stroke-width: 1.5;
   stroke: ${({ theme }) => theme.deprecated_white};
-  opacity: 0.6;
+  opacity: ${({ theme }) => theme.opacity.hover};
 `
 
 const LabelGroup = styled.g<{ visible: boolean }>`

src/components/PositionList/index.tsx

@@ -50,7 +50,7 @@ const ToggleWrap = styled.div`
 `
 
 const ToggleLabel = styled.div`
-  opacity: 0.6;
+  opacity: ${({ theme }) => theme.opacity.hover};
   margin-right: 10px;
 `
 

src/components/SwitchLocaleLink/index.tsx

@@ -8,7 +8,7 @@ import { navigatorLocale, useActiveLocale } from '../../hooks/useActiveLocale'
 import { StyledInternalLink, ThemedText } from '../../theme'
 
 const Container = styled(ThemedText.DeprecatedSmall)`
-  opacity: 0.6;
+  opacity: ${({ theme }) => theme.opacity.hover};
   :hover {
     opacity: 1;
   }

src/components/TokenSafety/index.tsx

@@ -64,7 +64,7 @@ const StyledCloseButton = styled(StyledButton)`
 
   &:hover {
     background-color: ${({ theme }) => theme.backgroundInteractive};
-    opacity: 0.6;
+    opacity: ${({ theme }) => theme.opacity.hover};
     transition: opacity 250ms ease;
   }
 `
@@ -132,10 +132,10 @@ const ExplorerLinkWrapper = styled.div`
   cursor: pointer;
 
   :hover {
-    opacity: 0.6;
+    opacity: ${({ theme }) => theme.opacity.hover};
   }
   :active {
-    opacity: 0.4;
+    opacity: ${({ theme }) => theme.opacity.click};
   }
 `
 

src/components/Tokens/TokenDetails/BreadcrumbNavLink.tsx

@@ -10,6 +10,7 @@ export const BreadcrumbNavLink = styled(Link)`
   gap: 4px;
   text-decoration: none;
   margin-bottom: 16px;
+  transition-duration: ${({ theme }) => theme.transition.duration.fast};
 
   &:hover {
     color: ${({ theme }) => theme.textTertiary};

src/components/Tokens/TokenDetails/PriceChart.tsx

@@ -13,7 +13,6 @@ import { useAtom } from 'jotai'
 import { useCallback, useMemo, useState } from 'react'
 import { ArrowDownRight, ArrowUpRight } from 'react-feather'
 import styled, { useTheme } from 'styled-components/macro'
-import { OPACITY_HOVER } from 'theme'
 import {
   dayHourFormatter,
   hourFormatter,
@@ -109,8 +108,9 @@ const TimeButton = styled.button<{ active: boolean }>`
   border: none;
   cursor: pointer;
   color: ${({ theme, active }) => (active ? theme.textPrimary : theme.textSecondary)};
+  transition-duration: ${({ theme }) => theme.transition.duration.fast};
   :hover {
-    ${({ active }) => !active && `opacity: ${OPACITY_HOVER};`}
+    ${({ active, theme }) => !active && `opacity: ${theme.opacity.hover};`}
   }
 `
 

src/components/Tokens/TokenDetails/ShareButton.tsx

@@ -5,7 +5,7 @@ import { Twitter } from 'react-feather'
 import { useModalIsOpen, useToggleModal } from 'state/application/hooks'
 import { ApplicationModal } from 'state/application/reducer'
 import styled, { useTheme } from 'styled-components/macro'
-import { ClickableStyle, CopyHelperRefType, OPACITY_CLICK, Z_INDEX } from 'theme'
+import { ClickableStyle, CopyHelperRefType, Z_INDEX } from 'theme'
 import { colors } from 'theme/colors'
 import { opacify } from 'theme/utils'
 
@@ -25,7 +25,7 @@ const Share = styled(ShareIcon)<{ open: boolean }>`
   height: 24px;
   width: 24px;
   ${ClickableStyle}
-  ${({ open }) => open && `opacity: ${OPACITY_CLICK} !important`};
+  ${({ open, theme }) => open && `opacity: ${theme.opacity.click} !important`};
 `
 
 const ShareActions = styled.div`

src/components/Tokens/TokenTable/FavoriteButton.tsx

@@ -5,6 +5,7 @@ import styled, { useTheme } from 'styled-components/macro'
 
 import { SMALLEST_MOBILE_MEDIA_BREAKPOINT } from '../constants'
 import { showFavoritesAtom } from '../state'
+import FilterOption from './FilterOption'
 
 const FavoriteButtonContent = styled.div`
   display: flex;
@@ -12,21 +13,6 @@ const FavoriteButtonContent = styled.div`
   align-items: center;
   gap: 8px;
 `
-const StyledFavoriteButton = styled.button<{ active: boolean }>`
-  padding: 0px 16px;
-  border-radius: 12px;
-  background-color: ${({ theme, active }) => (active ? theme.accentActiveSoft : theme.backgroundInteractive)};
-  border: ${({ active, theme }) => (active ? `1px solid ${theme.accentActive}` : 'none')};
-  color: ${({ theme, active }) => (active ? theme.accentActive : theme.textPrimary)};
-  font-size: 16px;
-  font-weight: 600;
-  cursor: pointer;
-
-  :hover {
-    background-color: ${({ theme, active }) => !active && theme.backgroundModule};
-    opacity: ${({ active }) => (active ? '60%' : '100%')};
-  }
-`
 const FavoriteText = styled.span`
   @media only screen and (max-width: ${SMALLEST_MOBILE_MEDIA_BREAKPOINT}) {
     display: none;
@@ -37,13 +23,13 @@ export default function FavoriteButton() {
   const theme = useTheme()
   const [showFavorites, setShowFavorites] = useAtom(showFavoritesAtom)
   return (
-    <StyledFavoriteButton onClick={() => setShowFavorites(!showFavorites)} active={showFavorites}>
+    <FilterOption onClick={() => setShowFavorites(!showFavorites)} active={showFavorites} highlight>
       <FavoriteButtonContent>
-        <Heart size={17} color={showFavorites ? theme.accentActive : theme.textPrimary} />
+        <Heart size={20} color={showFavorites ? theme.accentActive : theme.textPrimary} />
         <FavoriteText>
           <Trans>Favorites</Trans>
         </FavoriteText>
       </FavoriteButtonContent>
-    </StyledFavoriteButton>
+    </FilterOption>
   )
 }

src/components/Tokens/TokenTable/FilterOption.tsx

+//import { ReactNode } from 'react'
+import styled from 'styled-components/macro'
+const FilterOption = styled.button<{ active: boolean; highlight?: boolean }>`
+  height: 100%;
+  color: ${({ theme, active }) => (active ? theme.accentActive : theme.textPrimary)};
+  background-color: ${({ theme, active }) => (active ? theme.accentActiveSoft : theme.backgroundInteractive)};
+  margin: 0;
+  padding: 6px 12px 6px 14px;
+  border-radius: 12px;
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 600;
+  transition-duration: ${({ theme }) => theme.transition.duration.fast};
+  border: none;
+  outline: ${({ theme, active, highlight }) => (active && highlight ? `1px solid ${theme.accentAction}` : 'none')};
+
+  :hover {
+    cursor: pointer;
+    background-color: ${({ theme, active }) => (active ? theme.accentActiveSoft : theme.backgroundModule)};
+    opacity: ${({ theme, active }) => (active ? theme.opacity.hover : 1)};
+  }
+  :focus {
+    background-color: ${({ theme, active }) => (active ? theme.accentActiveSoft : theme.backgroundInteractive)};
+  }
+`
+export default FilterOption

src/components/Tokens/TokenTable/NetworkFilter.tsx

@@ -10,6 +10,7 @@ import styled, { useTheme } from 'styled-components/macro'
 
 import { MEDIUM_MEDIA_BREAKPOINT } from '../constants'
 import { filterNetworkAtom } from '../state'
+import FilterOption from './FilterOption'
 
 const NETWORKS = [
   SupportedChainId.MAINNET,
@@ -28,7 +29,6 @@ const InternalMenuItem = styled.div`
     text-decoration: none;
   }
 `
-
 const InternalLinkMenuItem = styled(InternalMenuItem)`
   display: flex;
   align-items: center;
@@ -59,36 +59,6 @@ const MenuTimeFlyout = styled.span`
   z-index: 100;
   left: 0px;
 `
-
-const StyledMenuButton = styled.button<{ open: boolean }>`
-  width: 100%;
-  height: 100%;
-  color: ${({ theme, open }) => (open ? theme.accentActive : theme.textPrimary)};
-  border: none;
-  background-color: ${({ theme, open }) => (open ? theme.accentActiveSoft : theme.backgroundInteractive)};
-  margin: 0;
-  padding: 6px 12px 6px 12px;
-  border-radius: 12px;
-  font-size: 16px;
-  line-height: 24px;
-  font-weight: 400;
-
-  :hover {
-    cursor: pointer;
-    outline: none;
-    border: none;
-    background-color: ${({ theme, open }) => (open ? theme.accentActiveSoft : theme.backgroundModule)};
-  }
-  :focus {
-    background-color: ${({ theme, open }) => (open ? theme.accentActiveSoft : theme.backgroundInteractive)};
-    border: none;
-    outline: none;
-  }
-  svg {
-    margin-top: 2px;
-  }
-`
-
 const StyledMenu = styled.div`
   display: flex;
   justify-content: center;
@@ -96,23 +66,21 @@ const StyledMenu = styled.div`
   position: relative;
   border: none;
   text-align: left;
-  width: 160px;
 
   @media only screen and (max-width: ${MEDIUM_MEDIA_BREAKPOINT}) {
     flex: 1;
   }
 `
-
 const StyledMenuContent = styled.div`
   display: flex;
   justify-content: space-between;
+  gap: 8px;
   align-items: center;
   border: none;
   width: 100%;
   font-weight: 600;
   vertical-align: middle;
 `
-
 const Chevron = styled.span<{ open: boolean }>`
   padding-top: 1px;
   color: ${({ open, theme }) => (open ? theme.accentActive : theme.textSecondary)};
@@ -143,16 +111,20 @@ export default function NetworkFilter() {
 
   return (
     <StyledMenu ref={node}>
-      <StyledMenuButton onClick={toggleMenu} aria-label={`networkFilter`} open={open}>
+      <FilterOption onClick={toggleMenu} aria-label={`networkFilter`} active={open}>
         <StyledMenuContent>
           <NetworkLabel>
             <Logo src={circleLogoUrl ?? logoUrl} /> {label}
           </NetworkLabel>
           <Chevron open={open}>
-            {open ? <ChevronUp size={15} viewBox="0 0 24 20" /> : <ChevronDown size={15} viewBox="0 0 24 20" />}
+            {open ? (
+              <ChevronUp width={20} height={15} viewBox="0 0 24 20" />
+            ) : (
+              <ChevronDown width={20} height={15} viewBox="0 0 24 20" />
+            )}
           </Chevron>
         </StyledMenuContent>
-      </StyledMenuButton>
+      </FilterOption>
       {open && (
         <MenuTimeFlyout>
           {NETWORKS.map((network) => (

src/components/Tokens/TokenTable/SearchBar.tsx

@@ -27,6 +27,7 @@ const SearchInput = styled.input`
   font-size: 16px;
   padding-left: 40px;
   color: ${({ theme }) => theme.textSecondary};
+  transition-duration: ${({ theme }) => theme.transition.duration.fast};
 
   :hover {
     background-color: ${({ theme }) => theme.backgroundSurface};

src/components/Tokens/TokenTable/TimeSelector.tsx

@@ -9,6 +9,7 @@ import styled, { useTheme } from 'styled-components/macro'
 
 import { MOBILE_MEDIA_BREAKPOINT, SMALL_MEDIA_BREAKPOINT } from '../constants'
 import { filterTimeAtom } from '../state'
+import FilterOption from './FilterOption'
 
 export const DISPLAYS: Record<TimePeriod, string> = {
   [TimePeriod.HOUR]: '1H',
@@ -39,7 +40,6 @@ const InternalMenuItem = styled.div`
     text-decoration: none;
   }
 `
-
 const InternalLinkMenuItem = styled(InternalMenuItem)`
   display: flex;
   flex-direction: row;
@@ -76,36 +76,6 @@ const MenuTimeFlyout = styled.span`
     left: unset;
   }
 `
-
-const StyledMenuButton = styled.button<{ open: boolean }>`
-  width: 100%;
-  height: 100%;
-  border: none;
-  color: ${({ theme, open }) => (open ? theme.accentActive : theme.textPrimary)};
-  margin: 0;
-  background-color: ${({ theme, open }) => (open ? theme.accentActiveSoft : theme.backgroundInteractive)};
-  padding: 6px 12px 6px 12px;
-  border-radius: 12px;
-  font-size: 16px;
-  line-height: 24px;
-  font-weight: 600;
-
-  :hover {
-    cursor: pointer;
-    border: none;
-    outline: none;
-    background-color: ${({ theme, open }) => (open ? theme.accentActiveSoft : theme.backgroundModule)};
-  }
-  :focus {
-    background-color: ${({ theme, open }) => (open ? theme.accentActiveSoft : theme.backgroundInteractive)};
-    border: none;
-    outline: none;
-  }
-  svg {
-    margin-top: 2px;
-  }
-`
-
 const StyledMenu = styled.div`
   display: flex;
   justify-content: center;
@@ -113,22 +83,20 @@ const StyledMenu = styled.div`
   position: relative;
   border: none;
   text-align: left;
-  width: 80px;
 
   @media only screen and (max-width: ${MOBILE_MEDIA_BREAKPOINT}) {
     width: 72px;
   }
 `
-
 const StyledMenuContent = styled.div`
   display: flex;
   justify-content: space-between;
+  gap: 8px;
   align-items: center;
   border: none;
   width: 100%;
   vertical-align: middle;
 `
-
 const Chevron = styled.span<{ open: boolean }>`
   padding-top: 1px;
   color: ${({ open, theme }) => (open ? theme.accentActive : theme.textSecondary)};
@@ -145,14 +113,18 @@ export default function TimeSelector() {
 
   return (
     <StyledMenu ref={node}>
-      <StyledMenuButton onClick={toggleMenu} aria-label={`timeSelector`} open={open}>
+      <FilterOption onClick={toggleMenu} aria-label={`timeSelector`} active={open}>
         <StyledMenuContent>
           {DISPLAYS[activeTime]}
           <Chevron open={open}>
-            {open ? <ChevronUp size={15} viewBox="0 0 24 20" /> : <ChevronDown size={15} viewBox="0 0 24 20" />}
+            {open ? (
+              <ChevronUp width={20} height={15} viewBox="0 0 24 20" />
+            ) : (
+              <ChevronDown width={20} height={15} viewBox="0 0 24 20" />
+            )}
           </Chevron>
         </StyledMenuContent>
-      </StyledMenuButton>
+      </FilterOption>
       {open && (
         <MenuTimeFlyout>
           {ORDERED_TIMES.map((time) => (

src/components/Tokens/TokenTable/TokenRow.tsx

@@ -61,6 +61,7 @@ const StyledTokenRow = styled.div<{ first?: boolean; last?: boolean; loading?: b
     },
   }) => css`background-color ${duration.medium} ${timing.ease}`};
   width: 100%;
+  transition-duration: ${({ theme }) => theme.transition.duration.fast};
 
   &:hover {
     ${({ loading, theme }) =>
@@ -225,15 +226,12 @@ const SortArrowCell = styled(Cell)`
 `
 const HeaderCellWrapper = styled.span<{ onClick?: () => void }>`
   align-items: center;
+  ${ClickableStyle}
   cursor: ${({ onClick }) => (onClick ? 'pointer' : 'unset')};
   display: flex;
   height: 100%;
   justify-content: flex-end;
   width: 100%;
-
-  &:hover {
-    opacity: 60%;
-  }
 `
 const SparkLineCell = styled(Cell)`
   padding: 0px 24px;

src/components/Tokens/TokensBanner.tsx

@@ -32,7 +32,7 @@ const PopupContainer = styled.div<{ show: boolean }>`
     theme: {
       transition: { duration, timing },
     },
-  }) => `${duration.slow}ms opacity ${timing.in}`};
+  }) => `${duration.slow} opacity ${timing.in}`};
 `
 const Header = styled.div`
   display: flex;

src/components/WalletDropdown/DefaultMenu.tsx

@@ -55,7 +55,7 @@ const ToggleMenuItem = styled.button`
       theme: {
         transition: { duration, timing },
       },
-    }) => `${duration.fast}ms all ${timing.in}`};
+    }) => `${duration.fast} all ${timing.in}`};
   }
 `
 

src/components/WalletDropdown/IconButton.tsx

@@ -28,7 +28,7 @@ const IconStyles = css`
       theme: {
         transition: { duration, timing },
       },
-    }) => `${duration.fast}ms background-color ${timing.in}`};
+    }) => `${duration.fast} background-color ${timing.in}`};
 
     ${IconHoverText} {
       opacity: 1;

src/components/WalletDropdown/LanguageMenu.tsx

@@ -33,7 +33,7 @@ const InternalLinkMenuItem = styled(InternalMenuItem)`
       theme: {
         transition: { duration, timing },
       },
-    }) => `${duration.fast}ms background-color ${timing.in}`};
+    }) => `${duration.fast} background-color ${timing.in}`};
   }
 `
 

src/components/WalletDropdown/SlideOutMenu.tsx

@@ -42,12 +42,12 @@ const ClearAll = styled.div`
   margin-bottom: auto;
 
   :hover {
-    opacity: 0.6;
+    opacity: ${({ theme }) => theme.opacity.hover};
     transition: ${({
       theme: {
         transition: { duration, timing },
       },
-    }) => `${duration.fast}ms opacity ${timing.in}`};
+    }) => `${duration.fast} opacity ${timing.in}`};
   }
 `
 
@@ -60,7 +60,7 @@ const StyledChevron = styled(ChevronLeft)`
       theme: {
         transition: { duration, timing },
       },
-    }) => `${duration.fast}ms color ${timing.in}`};
+    }) => `${duration.fast} color ${timing.in}`};
   }
 `
 

src/components/WalletModal/index.tsx

@@ -35,7 +35,7 @@ const CloseIcon = styled.div`
   top: 14px;
   &:hover {
     cursor: pointer;
-    opacity: 0.6;
+    opacity: ${({ theme }) => theme.opacity.hover};
   }
 `
 

src/components/Web3Status/index.tsx

@@ -171,7 +171,7 @@ const StyledConnect = styled.div`
       theme: {
         transition: { duration, timing },
       },
-    }) => `${duration.fast}ms color ${timing.in}`};
+    }) => `${duration.fast} color ${timing.in}`};
   }
 `
 

src/pages/Vote/Landing.tsx

@@ -73,7 +73,7 @@ const Proposal = styled(Button)`
 `
 
 const ProposalNumber = styled.span`
-  opacity: 0.6;
+  opacity: ${({ theme }) => theme.opacity.hover};
   flex: 0 0 40px;
 `
 

src/theme/components.tsx

@@ -64,9 +64,6 @@ export const LinkStyledButton = styled.button<{ disabled?: boolean }>`
   }
 `
 
-export const OPACITY_HOVER = 0.6
-export const OPACITY_CLICK = 0.4
-
 export const ButtonText = styled.button`
   outline: none;
   border: none;
@@ -75,9 +72,10 @@ export const ButtonText = styled.button`
   margin: 0;
   background: none;
   cursor: pointer;
+  transition-duration: ${({ theme }) => theme.transition.duration.fast};
 
   :hover {
-    opacity: ${OPACITY_HOVER};
+    opacity: ${({ theme }) => theme.opacity.hover};
   }
 
   :focus {
@@ -88,12 +86,13 @@ export const ButtonText = styled.button`
 export const ClickableStyle = css`
   text-decoration: none;
   cursor: pointer;
+  transition-duration: ${({ theme }) => theme.transition.duration.fast};
 
   :hover {
-    opacity: ${OPACITY_HOVER};
+    opacity: ${({ theme }) => theme.opacity.hover};
   }
   :active {
-    opacity: ${OPACITY_CLICK};
+    opacity: ${({ theme }) => theme.opacity.click};
   }
 `
 
@@ -135,6 +134,7 @@ const CopyIcon = styled(Copy)`
 `
 
 export const TrashIcon = styled(Trash)`
+  ${ClickableStyle}
   ${IconStyle}
   stroke: ${({ theme }) => theme.deprecated_text3};
 
@@ -142,10 +142,6 @@ export const TrashIcon = styled(Trash)`
   align-items: center;
   justify-content: center;
   display: flex;
-
-  :hover {
-    opacity: ${OPACITY_HOVER};
-  }
 `
 
 const rotateImg = keyframes`
@@ -296,7 +292,7 @@ const CopyAddressRow = styled.div<{ isClicked: boolean }>`
   justify-content: center;
   display: flex;
   gap: 6px;
-  ${({ isClicked }) => isClicked && `opacity: ` + OPACITY_CLICK + ` !important`}
+  ${({ theme, isClicked }) => isClicked && `opacity: ${theme.opacity.click} !important`}
 `
 
 const CopyContractAddressWrapper = styled.div`

src/theme/index.tsx

@@ -39,9 +39,9 @@ const BREAKPOINTS = {
 
 const transitions = {
   duration: {
-    slow: 500,
-    medium: 250,
-    fast: 125,
+    slow: '500ms',
+    medium: '250ms',
+    fast: '125ms',
   },
   timing: {
     ease: 'ease',
@@ -51,6 +51,11 @@ const transitions = {
   },
 }
 
+const opacities = {
+  hover: 0.6,
+  click: 0.4,
+}
+
 // Migrating to a standard z-index system https://getbootstrap.com/docs/5.0/layout/z-index/
 // Please avoid using deprecated numbers
 export enum Z_INDEX {
@@ -288,6 +293,8 @@ function getTheme(darkMode: boolean, isNewColorsEnabled: boolean): DefaultTheme
 
     transition: transitions,
 
+    opacity: opacities,
+
     // css snippets
     flexColumnNoWrap: css`
       display: flex;

src/theme/styled.d.ts

@@ -144,9 +144,9 @@ declare module 'styled-components/macro' {
     }
     transition: {
       duration: {
-        slow: number
-        medium: number
-        fast: number
+        slow: string
+        medium: string
+        fast: string
       }
       timing: {
         ease: string
@@ -155,6 +155,10 @@ declare module 'styled-components/macro' {
         inOut: string
       }
     }
+    opacity: {
+      hover: number
+      click: number
+    }
     // css snippets
     flexColumnNoWrap: FlattenSimpleInterpolation
     flexRowNoWrap: FlattenSimpleInterpolation