fix: Mobile layout: hide closed positions disappears #3344 (#3858)

* Add 'hide closed positions' to mobile pool view

* Update 'Hide closed positions' mobile font size

* add new toggle from design spec

* change off toggle button color

* Update SimpleToggle.tsx

* update wrapping position for toggle, improve component naming

src/components/PositionList/index.tsx

@@ -1,6 +1,6 @@
 import { Trans } from '@lingui/macro'
-import { ButtonText } from 'components/Button'
 import PositionListItem from 'components/PositionListItem'
+import SimpleToggle from 'components/Toggle/SimpleToggle'
 import React from 'react'
 import styled from 'styled-components/macro'
 import { MEDIA_WIDTHS } from 'theme'
@@ -28,9 +28,37 @@ const MobileHeader = styled.div`
   font-size: 16px;
   font-weight: 500;
   padding: 8px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
   @media screen and (min-width: ${MEDIA_WIDTHS.upToSmall}px) {
     display: none;
   }
+
+  @media screen and (max-width: ${MEDIA_WIDTHS.upToExtraSmall}px) {
+    display: flex;
+    flex-direction: column;
+    align-items: start;
+  }
+`
+
+const ToggleWrap = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+`
+
+const ToggleLabel = styled.div`
+  opacity: 0.6;
+  margin-right: 10px;
+`
+
+const MobileTogglePosition = styled.div`
+  @media screen and (max-width: ${MEDIA_WIDTHS.upToExtraSmall}px) {
+    position: absolute;
+    right: 20px;
+  }
 `
 
 type PositionListProps = React.PropsWithChildren<{
@@ -51,12 +79,35 @@ export default function PositionList({
           <Trans>Your positions</Trans>
           {positions && ' (' + positions.length + ')'}
         </div>
-        <ButtonText style={{ opacity: 0.6 }} onClick={() => setUserHideClosedPositions(!userHideClosedPositions)}>
+        <ToggleWrap>
-          <Trans>Hide closed positions</Trans>
+          <ToggleLabel>
-        </ButtonText>
+            <Trans>Show closed positions</Trans>
+          </ToggleLabel>
+          <SimpleToggle
+            id="desktop-hide-closed-positions"
+            isActive={!userHideClosedPositions}
+            toggle={() => {
+              setUserHideClosedPositions(!userHideClosedPositions)
+            }}
+          />
+        </ToggleWrap>
       </DesktopHeader>
       <MobileHeader>
         <Trans>Your positions</Trans>
+        <ToggleWrap>
+          <ToggleLabel>
+            <Trans>Show closed positions</Trans>
+          </ToggleLabel>
+          <MobileTogglePosition>
+            <SimpleToggle
+              id="mobile-hide-closed-positions"
+              isActive={!userHideClosedPositions}
+              toggle={() => {
+                setUserHideClosedPositions(!userHideClosedPositions)
+              }}
+            />
+          </MobileTogglePosition>
+        </ToggleWrap>
       </MobileHeader>
       {positions.map((p) => {
         return <PositionListItem key={p.tokenId.toString()} positionDetails={p} />

src/components/Toggle/SimpleToggle.tsx

@@ -0,0 +1,45 @@
+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>
+  )
+}