fix: use simple toggle instead of toggle with text init commit (#3884)

* fix: use simple toggle instead of toggle with text init commit

* fix: also change toggle in voting page and list toggle used in manage token list

* fix: simplify all toggle components into one configurable toggle

* fix: add ease-in animations for toggle
Co-authored-by: Lynn Yu <lynn.yu@UNISWAP-MAC-015.local>
Co-authored-by: Lynn Yu <lynn.yu@uniswap.org>

src/components/PositionList/index.tsx

 import { Trans } from '@lingui/macro'
 import PositionListItem from 'components/PositionListItem'
-import SimpleToggle from 'components/Toggle/SimpleToggle'
+import Toggle from 'components/Toggle'
 import React from 'react'
 import styled from 'styled-components/macro'
 import { MEDIA_WIDTHS } from 'theme'
@@ -83,7 +83,7 @@ export default function PositionList({
           <ToggleLabel>
             <Trans>Show closed positions</Trans>
           </ToggleLabel>
-          <SimpleToggle
+          <Toggle
             id="desktop-hide-closed-positions"
             isActive={!userHideClosedPositions}
             toggle={() => {
@@ -99,7 +99,7 @@ export default function PositionList({
             <Trans>Show closed positions</Trans>
           </ToggleLabel>
           <MobileTogglePosition>
-            <SimpleToggle
+            <Toggle
               id="mobile-hide-closed-positions"
               isActive={!userHideClosedPositions}
               toggle={() => {

src/components/SearchModal/ManageLists.tsx

@@ -26,7 +26,7 @@ import { ButtonEmpty, ButtonPrimary } from '../Button'
 import Column, { AutoColumn } from '../Column'
 import ListLogo from '../ListLogo'
 import Row, { RowBetween, RowFixed } from '../Row'
-import ListToggle from '../Toggle/ListToggle'
+import Toggle from '../Toggle'
 import { CurrencyModalView } from './CurrencySearchModal'
 import { PaddedColumn, SearchInput, Separator, SeparatorDark } from './styleds'
 
@@ -215,7 +215,7 @@ const ListRow = memo(function ListRow({ listUrl }: { listUrl: string }) {
           </StyledMenu>
         </RowFixed>
       </Column>
-      <ListToggle
+      <Toggle
         isActive={isActive}
         bgColor={listColor}
         toggle={() => {

src/components/Toggle/ListToggle.tsx

-import { Trans } from '@lingui/macro'
-import styled from 'styled-components/macro'
-
-import { ThemedText } from '../../theme'
-
-const Wrapper = styled.button<{ isActive?: boolean; activeElement?: boolean }>`
-  border-radius: 20px;
-  border: none;
-  background: ${({ theme }) => theme.bg1};
-  display: flex;
-  width: fit-content;
-  cursor: pointer;
-  outline: none;
-  padding: 0.4rem 0.4rem;
-  align-items: center;
-`
-
-const ToggleElement = styled.span<{ isActive?: boolean; bgColor?: string }>`
-  border-radius: 50%;
-  height: 24px;
-  width: 24px;
-  background-color: ${({ isActive, bgColor, theme }) => (isActive ? bgColor : theme.bg4)};
-  :hover {
-    opacity: 0.8;
-  }
-`
-
-const StatusText = styled(ThemedText.Main)<{ isActive?: boolean }>`
-  margin: 0 10px;
-  width: 24px;
-  color: ${({ theme, isActive }) => (isActive ? theme.text1 : theme.text3)};
-`
-
-interface ToggleProps {
-  id?: string
-  isActive: boolean
-  bgColor: string
-  toggle: () => void
-}
-
-export default function ListToggle({ id, isActive, bgColor, toggle }: ToggleProps) {
-  return (
-    <Wrapper id={id} isActive={isActive} onClick={toggle}>
-      {isActive && (
-        <StatusText fontWeight="600" margin="0 6px" isActive={true}>
-          <Trans>ON</Trans>
-        </StatusText>
-      )}
-      <ToggleElement isActive={isActive} bgColor={bgColor} />
-      {!isActive && (
-        <StatusText fontWeight="600" margin="0 6px" isActive={false}>
-          <Trans>OFF</Trans>
-        </StatusText>
-      )}
-    </Wrapper>
-  )
-}

src/components/Toggle/SimpleToggle.tsx

-import { darken } from 'polished'
-import styled from 'styled-components/macro'
-
-const Wrapper = styled.button<{ isActive?: boolean; activeElement?: boolean }>`
-  border-radius: 20px;
-  border: none;
-  background: ${({ theme }) => theme.bg1};
-  display: flex;
-  cursor: pointer;
-  outline: none;
-  padding: 0.4rem 0.4rem;
-  align-items: center;
-  height: 32px;
-  width: 56px;
-  position: relative;
-`
-
-const ToggleElement = styled.span<{ isActive?: boolean; isOnSwitch?: boolean }>`
-  border-radius: 50%;
-  height: 24px;
-  width: 24px;
-  position: absolute;
-  background: ${({ theme, isActive, isOnSwitch }) => (isActive ? (isOnSwitch ? theme.primary1 : theme.text3) : 'none')};
-  :hover {
-    user-select: ${({ isOnSwitch }) => (isOnSwitch ? 'none' : 'initial')};
-    background: ${({ theme, isActive, isOnSwitch }) =>
-      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)};
-  }
-`
-
-interface ToggleProps {
-  id?: string
-  isActive: boolean
-  toggle: () => void
-}
-
-export default function SimpleToggle({ id, isActive, toggle }: ToggleProps) {
-  return (
-    <Wrapper id={id} isActive={isActive} onClick={toggle}>
-      <ToggleElement isActive={!isActive} isOnSwitch={false} style={{ left: '4px' }} />
-      <ToggleElement isActive={isActive} isOnSwitch={true} style={{ right: '4px' }} />
-    </Wrapper>
-  )
-}

src/components/Toggle/index.tsx

-import { Trans } from '@lingui/macro'
 import { darken } from 'polished'
-import { ReactNode } from 'react'
-import styled from 'styled-components/macro'
+import styled, { keyframes } from 'styled-components/macro'
 
-const ToggleElement = styled.span<{ isActive?: boolean; isOnSwitch?: boolean }>`
-  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: 14px;
-  font-weight: ${({ isOnSwitch }) => (isOnSwitch ? '500' : '400')};
-  :hover {
-    user-select: ${({ isOnSwitch }) => (isOnSwitch ? 'none' : 'initial')};
-    background: ${({ theme, isActive, isOnSwitch }) =>
-      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;
+const Wrapper = styled.button<{ isActive?: boolean; activeElement?: boolean }>`
+  align-items: center;
+  background: ${({ theme }) => theme.bg1};
   border: none;
-  background: ${({ theme }) => theme.bg0};
-  display: flex;
-  width: fit-content;
+  border-radius: 20px;
   cursor: pointer;
+  display: flex;
   outline: none;
-  padding: 2px;
+  padding: 0.4rem 0.4rem;
+  width: fit-content;
+`
+
+const turnOnToggle = keyframes`
+  from {
+    margin-left: 0em;
+    margin-right: 2.2em;
+  }
+  to {
+    margin-left: 2.2em;
+    margin-right: 0em;
+  }
+`
+
+const turnOffToggle = keyframes`
+  from {
+    margin-left: 2.2em;
+    margin-right: 0em;
+  }
+  to {
+    margin-left: 0em;
+    margin-right: 2.2em;
+  }
+`
+
+const ToggleElementHoverStyle = (hasBgColor: boolean, theme: any, isActive?: boolean) =>
+  hasBgColor
+    ? {
+        opacity: '0.8',
+      }
+    : {
+        background: isActive ? darken(0.05, theme.primary1) : darken(0.05, theme.bg4),
+        color: isActive ? theme.white : theme.text3,
+      }
+
+const ToggleElement = styled.span<{ isActive?: boolean; bgColor?: string }>`
+  animation: 0.1s ${({ isActive }) => (isActive ? turnOnToggle : turnOffToggle)} ease-in;
+  background: ${({ theme, bgColor, isActive }) =>
+    isActive ? bgColor ?? theme.primary1 : !!bgColor ? theme.bg4 : theme.text3};
+  border-radius: 50%;
+  height: 24px;
+  :hover {
+    ${({ bgColor, theme, isActive }) => ToggleElementHoverStyle(!!bgColor, theme, isActive)}
+  }
+  margin-left: ${({ isActive }) => (isActive ? '2.2em' : '0em')};
+  margin-right: ${({ isActive }) => (!isActive ? '2.2em' : '0em')};
+  width: 24px;
 `
 
 interface ToggleProps {
   id?: string
+  bgColor?: string
   isActive: boolean
   toggle: () => void
-  checked?: ReactNode
-  unchecked?: ReactNode
 }
 
-export default function Toggle({
-  id,
-  isActive,
-  toggle,
-  checked = <Trans>On</Trans>,
-  unchecked = <Trans>Off</Trans>,
-}: ToggleProps) {
+export default function Toggle({ id, bgColor, isActive, toggle }: ToggleProps) {
   return (
-    <StyledToggle id={id} isActive={isActive} onClick={toggle}>
-      <ToggleElement isActive={isActive} isOnSwitch={true}>
-        {checked}
-      </ToggleElement>
-      <ToggleElement isActive={!isActive} isOnSwitch={false}>
-        {unchecked}
-      </ToggleElement>
-    </StyledToggle>
+    <Wrapper id={id} isActive={isActive} onClick={toggle}>
+      <ToggleElement isActive={isActive} bgColor={bgColor} />
+    </Wrapper>
   )
 }