ButterflyEffect/uniswap-interface-uncensored
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: added transition ease to explore (#4616)

Browse Source 
* initial commit
* updated transition css
* added opacity constants to theme, switched to using transition duration constants
This commit is contained in:
cartcrom 2022-09-14 17:03:19 -04:00 committed by GitHub
parent 0a6906b23e
commit ff6fd8a6e9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
26 changed files with 99 additions and 136 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/AccountDetails/index.tsx
View File

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

4
src/components/Icons/index.tsx
View File

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

2
src/components/LiquidityChartRangeInput/Brush.tsx
View File

@ -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 }>`

2
src/components/PositionList/index.tsx
View File

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

2
src/components/SwitchLocaleLink/index.tsx
View File

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

6
src/components/TokenSafety/index.tsx
View File

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

1
src/components/Tokens/TokenDetails/BreadcrumbNavLink.tsx
View File

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

4
src/components/Tokens/TokenDetails/PriceChart.tsx
View File

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

4
src/components/Tokens/TokenDetails/ShareButton.tsx
View File

@ -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`

22
src/components/Tokens/TokenTable/FavoriteButton.tsx
View File

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

26
src/components/Tokens/TokenTable/FilterOption.tsx Normal file
View File

@ -0,0 +1,26 @@
//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

46
src/components/Tokens/TokenTable/NetworkFilter.tsx
View File

@ -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) => (

1
src/components/Tokens/TokenTable/SearchBar.tsx
View File

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

46
src/components/Tokens/TokenTable/TimeSelector.tsx
View File

@ -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) => (

6
src/components/Tokens/TokenTable/TokenRow.tsx
View File

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

2
src/components/Tokens/TokensBanner.tsx
View File

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

2
src/components/WalletDropdown/DefaultMenu.tsx
View File

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

2
src/components/WalletDropdown/IconButton.tsx
View File

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

2
src/components/WalletDropdown/LanguageMenu.tsx
View File

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

6
src/components/WalletDropdown/SlideOutMenu.tsx
View File

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

2
src/components/WalletModal/index.tsx
View File

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

2
src/components/Web3Status/index.tsx
View File

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

2
src/pages/Vote/Landing.tsx
View File

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

18
src/theme/components.tsx
View File

@ -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`

13
src/theme/index.tsx
View File

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

10
src/theme/styled.d.ts vendored
View File

@ -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