fix: new toggle theme (#1782)

* new toggle theme

* moved trans to default

* update radius

* fianlize styles

src/components/Toggle/index.tsx

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

src/pages/Pool/index.tsx

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