Improve Switch component

Altalogy · Apr 22, 2022 · e352018 · e352018
1 parent 62fd8f8
commit e352018
Show file tree

Hide file tree

Showing 8 changed files with 77 additions and 22 deletions.
diff --git a/applications/launchpad_v2/src/components/Inputs/Switch/types.ts b/applications/launchpad_v2/src/components/Inputs/Switch/types.ts
diff --git a/.../components/Inputs/Switch/Switch.test.tsx → ..._v2/src/components/Switch/Switch.test.tsx b/.../components/Inputs/Switch/Switch.test.tsx → ..._v2/src/components/Switch/Switch.test.tsx
@@ -2,7 +2,7 @@ import { fireEvent, render, screen } from '@testing-library/react'
 import { ThemeProvider } from 'styled-components'
 
 import Switch from '.'
-import themes from '../../../styles/themes'
+import themes from '../../styles/themes'
 
 describe('Switch', () => {
   it('should render without crash', () => {
@@ -11,7 +11,7 @@ describe('Switch', () => {
     const val = false
     render(
       <ThemeProvider theme={themes.light}>
-        <Switch value={val} label={testLabel} onClick={onClick} />
+        <Switch value={val} rightLabel={testLabel} onClick={onClick} />
       </ThemeProvider>,
     )
 

diff --git a/...v2/src/components/Inputs/Switch/index.tsx → ...nchpad_v2/src/components/Switch/index.tsx b/...v2/src/components/Inputs/Switch/index.tsx → ...nchpad_v2/src/components/Switch/index.tsx
@@ -2,6 +2,8 @@ import { useContext } from 'react'
 import { useSpring } from 'react-spring'
 import { ThemeContext } from 'styled-components'
 
+import Text from '../Text'
+
 import {
   LabelText,
   SwitchContainer,
@@ -16,14 +18,15 @@ import { SwitchProps } from './types'
  */
 const Switch = ({
   value,
-  label,
+  leftLabel,
+  rightLabel,
   onClick,
-  invertedStyle,
+  inverted,
   testId,
 }: SwitchProps) => {
   const theme = useContext(ThemeContext)
 
-  const themeStyle = invertedStyle ? theme.inverted : theme
+  const themeStyle = inverted ? theme.inverted : theme
 
   const circleAnim = useSpring({
     left: value ? 10 : -1,
@@ -37,22 +40,47 @@ const Switch = ({
     background: value ? themeStyle.accent : 'transparent',
   })
 
+  const leftLabelEl =
+    leftLabel && typeof leftLabel === 'string' ? (
+      <Text>{leftLabel}</Text>
+    ) : (
+      leftLabel
+    )
+  const rightLabelEl =
+    rightLabel && typeof rightLabel === 'string' ? (
+      <Text>{rightLabel}</Text>
+    ) : (
+      rightLabel
+    )
+
   return (
     <SwitchContainer
       onClick={() => onClick && onClick(!value)}
       data-testid={testId || 'switch-input-cmp'}
     >
+      {leftLabelEl ? (
+        <LabelText
+          style={{
+            marginRight: 12,
+            ...labelColorAnim,
+          }}
+        >
+          {leftLabelEl}
+        </LabelText>
+      ) : null}
+
       <SwitchController style={{ ...controllerAnim }}>
         <SwitchCircle style={{ ...circleAnim }} />
       </SwitchController>
 
-      {label ? (
+      {rightLabelEl ? (
         <LabelText
           style={{
+            marginLeft: 12,
             ...labelColorAnim,
           }}
         >
-          {label}
+          {rightLabelEl}
         </LabelText>
       ) : null}
     </SwitchContainer>

diff --git a/...v2/src/components/Inputs/Switch/styles.ts → ...nchpad_v2/src/components/Switch/styles.ts b/...v2/src/components/Inputs/Switch/styles.ts → ...nchpad_v2/src/components/Switch/styles.ts
@@ -1,6 +1,6 @@
 import { animated } from 'react-spring'
 import styled from 'styled-components'
-import colors from '../../../styles/styles/colors'
+import colors from '../../styles/styles/colors'
 
 export const SwitchContainer = styled.label`
   display: flex;
@@ -12,7 +12,6 @@ export const SwitchController = styled(animated.div)`
   width: 24px;
   border: 1.5px solid ${colors.dark.primary};
   border-radius: 6px;
-  margin-right: 12px;
   position: relative;
   box-sizing: border-box;
   box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.08);
@@ -22,8 +21,8 @@ export const SwitchCircle = styled(animated.div)`
   position: absolute;
   width: 14px;
   height: 14px;
-  top: -1.5px;
-  bottom: 0;
+  top: 0;
+  margin-top: -1px;
   border-radius: 6px;
   box-sizing: border-box;
   background: #fff;
@@ -34,4 +33,7 @@ export const LabelText = styled(animated.span)`
   font-weight: 500;
   font-size: 14px;
   line-height: 160%;
+  display: flex;
+  align-items: center;
+  margin: 0;
 `
diff --git a/applications/launchpad_v2/src/components/Switch/types.ts b/applications/launchpad_v2/src/components/Switch/types.ts
@@ -0,0 +1,10 @@
+import { ReactNode } from 'react'
+
+export interface SwitchProps {
+  value: boolean
+  leftLabel?: string | ReactNode
+  rightLabel?: string | ReactNode
+  onClick: (val: boolean) => void
+  inverted?: boolean
+  testId?: string
+}
diff --git a/applications/launchpad_v2/src/components/TitleBar/index.tsx b/applications/launchpad_v2/src/components/TitleBar/index.tsx
@@ -6,7 +6,7 @@ import { appWindow } from '@tauri-apps/api/window'
 
 import Button from '../Button'
 import Logo from '../Logo'
-import Switch from '../Inputs/Switch'
+import Switch from '../Switch'
 
 import { selectExpertView } from '../../store/app/selectors'
 import { setExpertView } from '../../store/app'
@@ -196,10 +196,10 @@ const TitleBar = ({ drawerViewWidth = '50%' }: TitleBarProps) => {
         </Button>
         <Switch
           value={expertView !== 'hidden'}
-          label='Expert view'
+          rightLabel='Expert view'
           onClick={onExpertViewClick}
           testId={'titlebar-expert-view-btn'}
-          invertedStyle={expertView !== 'hidden'}
+          inverted={expertView !== 'hidden'}
         />
       </animated.div>
     </StyledTitleBar>

diff --git a/applications/launchpad_v2/src/containers/MiningContainer/index.tsx b/applications/launchpad_v2/src/containers/MiningContainer/index.tsx
@@ -1,20 +1,37 @@
-import { useDispatch } from 'react-redux'
+import { useDispatch, useSelector } from 'react-redux'
+import Switch from '../../components/Switch'
+
+import Text from '../../components/Text'
+import SvgSun from '../../styles/Icons/Sun'
+import SvgMoon from '../../styles/Icons/Moon'
 
 import { setTheme } from '../../store/app'
+import { selectTheme } from '../../store/app/selectors'
 
 /**
  * @TODO move user-facing text to i18n file when implementing
  */
 
 const MiningContainer = () => {
   const dispatch = useDispatch()
+  const currentTheme = useSelector(selectTheme)
+
   return (
     <div>
       <h2>Mining</h2>
       <button onClick={() => dispatch(setTheme('light'))}>
         Set light theme
       </button>
       <button onClick={() => dispatch(setTheme('dark'))}>Set dark theme</button>
+      <div>
+        <Text>Select theme</Text>
+        <Switch
+          leftLabel={<SvgSun width='1.4em' height='1.4em' />}
+          rightLabel={'Some text asd'}
+          value={currentTheme === 'dark'}
+          onClick={v => dispatch(setTheme(v ? 'dark' : 'light'))}
+        />
+      </div>
     </div>
   )
 }

diff --git a/applications/launchpad_v2/yarn.lock b/applications/launchpad_v2/yarn.lock
@@ -1163,6 +1163,11 @@
     minimatch "^3.0.4"
     strip-json-comments "^3.1.1"
 
+"@headlessui/react@^1.5.0":
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/@headlessui/react/-/react-1.5.0.tgz#483b44ba2c8b8d4391e1d2c863898d7dd0cc0296"
+  integrity sha512-aaRnYxBb3MU2FNJf3Ut9RMTUqqU3as0aI1lQhgo2n9Fa67wRu14iOGqx93xB+uMNVfNwZ5B3y/Ndm7qZGuFeMQ==
+
 "@humanwhocodes/config-array@^0.9.2":
   version "0.9.5"
   resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.9.5.tgz#2cbaf9a89460da24b5ca6531b8bbfc23e1df50c7"