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

fix: new toggle theme (#1782)

Browse Source 
* new toggle theme

* moved trans to default

* update radius

* fianlize styles
This commit is contained in:
Justin Domingue 2021-06-18 12:44:14 -07:00 committed by GitHub
parent 4079d8a517
commit 31da6cdb9d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 27 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
src/components/Toggle/index.tsx
View File

@ -1,54 +1,57 @@
import { Trans } from '@lingui/macro'
import React from 'react'
import { darken } from 'polished'
import React, { ReactNode } from 'react'
import styled from 'styled-components/macro'
const ToggleElement = styled.span<{ isActive?: boolean; isOnSwitch?: boolean }>`
padding: 0.25rem 0.5rem;
border-radius: 14px;
background: ${({ theme, isActive, isOnSwitch }) => (isActive ? (isOnSwitch ? theme.primary1 : theme.text4) : 'none')};
color: ${({ theme, isActive, isOnSwitch }) => (isActive ? (isOnSwitch ? theme.white : theme.text2) : theme.text3)};
font-size: 1rem;
font-weight: 400;
padding: 0.35rem 0.6rem;
border-radius: 12px;
background: ${({ theme, isActive, isOnSwitch }) => (isActive ? (isOnSwitch ? theme.primary1 : theme.text5) : 'none')};
color: ${({ theme, isActive, isOnSwitch }) => (isActive ? (isOnSwitch ? theme.white : theme.text2) : theme.text2)};
padding: 0.25rem 0.6rem;
border-radius: 9px;
background: ${({ theme, isActive, isOnSwitch }) => (isActive ? (isOnSwitch ? theme.primary1 : theme.bg4) : 'none')};
color: ${({ theme, isActive }) => (isActive ? theme.white : theme.text2)};
font-size: 1rem;
font-weight: ${({ isOnSwitch }) => (isOnSwitch ? '500' : '400')};
:hover {
user-select: ${({ isOnSwitch }) => (isOnSwitch ? 'none' : 'initial')};
background: ${({ theme, isActive, isOnSwitch }) =>
isActive ? (isOnSwitch ? theme.primary1 : theme.text5) : 'none'};
color: ${({ theme, isActive, isOnSwitch }) => (isActive ? (isOnSwitch ? theme.white : theme.text3) : theme.text3)};
isActive ? (isOnSwitch ? darken(0.05, theme.primary1) : darken(0.05, theme.bg4)) : 'none'};
color: ${({ theme, isActive, isOnSwitch }) => (isActive ? (isOnSwitch ? theme.white : theme.white) : theme.text3)};
}
`
const StyledToggle = styled.button<{ isActive?: boolean; activeElement?: boolean }>`
border-radius: 12px;
border: none;
background: ${({ theme }) => theme.bg3};
border: 2px solid;
border-color: ${({ theme, isActive }) => (isActive ? theme.primary1 : theme.bg3)};
background: ${({ theme }) => theme.bg1};
display: flex;
width: fit-content;
cursor: pointer;
outline: none;
padding: 0;
padding: 2px;
`
export interface ToggleProps {
id?: string
isActive: boolean
toggle: () => void
checked?: ReactNode
unchecked?: ReactNode
}
export default function Toggle({ id, isActive, toggle }: ToggleProps) {
export default function Toggle({
id,
isActive,
toggle,
checked = <Trans>On</Trans>,
unchecked = <Trans>Off</Trans>,
}: ToggleProps) {
return (
<StyledToggle id={id} isActive={isActive} onClick={toggle}>
<ToggleElement isActive={isActive} isOnSwitch={true}>
<Trans>On</Trans>
{checked}
</ToggleElement>
<ToggleElement isActive={!isActive} isOnSwitch={false}>
<Trans>Off</Trans>
{unchecked}
</ToggleElement>
</StyledToggle>
)

6
src/pages/Pool/index.tsx
View File

@ -204,11 +204,13 @@ export default function Pool() {
{closedPositions.length > 0 ? (
<ShowInactiveToggle>
<TYPE.darkGray>
<Trans>Hide closed positions</Trans>
<Trans>Closed positions</Trans>
</TYPE.darkGray>
<Toggle
isActive={userHideClosedPositions}
isActive={!userHideClosedPositions}
toggle={() => setUserHideClosedPositions(!userHideClosedPositions)}
checked={<Trans>Show</Trans>}
unchecked={<Trans>Hide</Trans>}
/>
</ShowInactiveToggle>
) : null}