update switch and separator

apps/wallet-mobile/src/features/Settings/ApplicationSettings/ApplicationSettingsScreen.tsx

@@ -2,7 +2,7 @@ import {isBoolean} from '@yoroi/common'
 import {SupportedThemes, useTheme} from '@yoroi/theme'
 import React from 'react'
 import {defineMessages, useIntl} from 'react-intl'
-import {Platform, ScrollView, StyleSheet, Switch} from 'react-native'
+import {Platform, ScrollView, StyleSheet} from 'react-native'
 import {SafeAreaView} from 'react-native-safe-area-context'
 
 import {Icon, Spacer} from '../../../components'
@@ -15,6 +15,7 @@ import {useAuthSetting, useAuthWithOs, useIsAuthOsSupported} from '../../../yoro
 import {useCrashReports} from '../../../yoroi-wallets/hooks'
 import {usePrivacyMode} from '../../Settings/PrivacyMode/PrivacyMode'
 import {useNavigateTo} from '../common/navigation'
+import {SettingsSwitch} from '../common/SettingsSwitch'
 import {useCurrencyContext} from '../Currency'
 import {useChangeScreenShareSetting, useScreenShareSettingEnabled} from '../ScreenShare'
 import {NavigatedSettingsItem, SettingsItem, SettingsSection} from '../SettingsItems'
@@ -128,7 +129,7 @@ export const ApplicationSettingsScreen = () => {
             info={strings.biometricsSignInInfo}
             disabled={!isAuthOsSupported}
           >
-            <Switch
+            <SettingsSwitch
               value={authSetting === 'os'}
               onValueChange={onToggleAuthWithOs}
               disabled={!isAuthOsSupported || isTogglePrivacyModeLoading}
@@ -180,7 +181,13 @@ const PrivacyModeSwitch = ({isPrivacyOff}: {isPrivacyOff: boolean}) => {
     })
   }
 
-  return <Switch value={isLocalPrivacyOff} onValueChange={onTogglePrivacyMode} disabled={isTogglePrivacyModeLoading} />
+  return (
+    <SettingsSwitch
+      value={isLocalPrivacyOff}
+      onValueChange={onTogglePrivacyMode}
+      disabled={isTogglePrivacyModeLoading}
+    />
+  )
 }
 
 // to avoid switch jumps
@@ -200,7 +207,9 @@ const CrashReportsSwitch = ({crashReportEnabled}: {crashReportEnabled: boolean})
     })
   }
 
-  return <Switch value={isLocalEnabled} onValueChange={onToggleCrashReports} disabled={CONFIG.FORCE_CRASH_REPORTS} />
+  return (
+    <SettingsSwitch value={isLocalEnabled} onValueChange={onToggleCrashReports} disabled={CONFIG.FORCE_CRASH_REPORTS} />
+  )
 }
 
 // to avoid switch jumps
@@ -213,7 +222,7 @@ const ScreenSharingSwitch = ({screenSharingEnabled, disabled}: {screenSharingEna
     setIsLocalEnabled(enabled)
   }
 
-  return <Switch value={isLocalEnabled} onValueChange={onToggle} disabled={disabled} />
+  return <SettingsSwitch value={isLocalEnabled} onValueChange={onToggle} disabled={disabled} />
 }
 
 const useStrings = () => {

apps/wallet-mobile/src/features/Settings/SettingsItems.tsx

@@ -5,7 +5,6 @@ import {StyleSheet, TouchableOpacity, TouchableOpacityProps, View} from 'react-n
 
 import {Hr, Icon, Spacer, Text} from '../../components'
 import {formatTokenWithSymbol} from '../../legacy/format'
-import {lightPalette} from '../../theme'
 import {useCollateralInfo} from '../../yoroi-wallets/cardano/utxoManager/useCollateralInfo'
 import {useSelectedWallet} from '../WalletManager/Context'
 
@@ -26,7 +25,7 @@ export const SettingsSection = ({title, children}: SettingsSectionProps) => {
 
           <Spacer height={5} />
 
-          <Hr />
+          <Hr style={styles.separator} />
         </>
       )}
 
@@ -68,7 +67,7 @@ export const SettingsItem = ({label, children, disabled, icon, info}: SettingsIt
         )}
       </View>
 
-      <Hr />
+      <Hr style={styles.separator} />
     </View>
   )
 }
@@ -81,7 +80,7 @@ type NavigatedSettingsItemProps = {
 }
 
 export const NavigatedSettingsItem = ({label, onNavigate, icon, disabled, selected}: NavigatedSettingsItemProps) => {
-  const {styles} = useStyles()
+  const {styles, color} = useStyles()
   return (
     <Touchable onPress={onNavigate} disabled={disabled}>
       <SettingsItem icon={icon} label={label} disabled={disabled}>
@@ -90,7 +89,7 @@ export const NavigatedSettingsItem = ({label, onNavigate, icon, disabled, select
 
           <Spacer width={16} />
 
-          <Icon.Chevron direction="right" size={28} color={lightPalette.gray['600']} />
+          <Icon.Chevron direction="right" size={28} color={color.gray_c600} />
         </View>
       </SettingsItem>
     </Touchable>
@@ -162,11 +161,15 @@ const useStyles = () => {
       color: color.gray_c500,
       ...atoms.body_1_lg_regular,
     },
+    separator: {
+      backgroundColor: color.gray_c200,
+      height: 1,
+    },
     row: {flexDirection: 'row', alignItems: 'center'},
   })
 
   const colors = {
     iconColor: color.gray_c600,
   }
-  return {styles, colors}
+  return {styles, colors, color}
 }

apps/wallet-mobile/src/features/Settings/WalletSettings/WalletSettingsScreen.tsx

@@ -3,7 +3,7 @@ import {useTheme} from '@yoroi/theme'
 import React from 'react'
 import type {MessageDescriptor} from 'react-intl'
 import {defineMessages, useIntl} from 'react-intl'
-import {InteractionManager, ScrollView, StyleSheet, Switch} from 'react-native'
+import {InteractionManager, ScrollView, StyleSheet} from 'react-native'
 import {SafeAreaView} from 'react-native-safe-area-context'
 
 import {useAuth} from '../../../auth/AuthProvider'
@@ -20,6 +20,7 @@ import {useEasyConfirmationEnabled, useResync} from '../../../yoroi-wallets/hook
 import {NetworkId, WalletImplementationId} from '../../../yoroi-wallets/types'
 import {useSelectedWallet, useSetSelectedWallet, useSetSelectedWalletMeta} from '../../WalletManager/Context'
 import {useNavigateTo} from '../common/navigation'
+import {SettingsSwitch} from '../common/SettingsSwitch'
 import {
   NavigatedSettingsItem,
   SettingsBuildItem,
@@ -36,7 +37,7 @@ const iconProps = {
 export const WalletSettingsScreen = () => {
   const intl = useIntl()
   const strings = useStrings()
-  const styles = useStyles()
+  const {styles} = useStyles()
   const {resetToWalletSelection} = useWalletNavigation()
   const wallet = useSelectedWallet()
   const authSetting = useAuthSetting()
@@ -93,7 +94,7 @@ export const WalletSettingsScreen = () => {
             label={strings.easyConfirmation}
             disabled={authSetting === 'pin' || wallet.isHW || wallet.isReadOnly}
           >
-            <Switch
+            <SettingsSwitch
               value={easyConfirmationEnabled}
               onValueChange={onToggleEasyConfirmation}
               disabled={authSetting === 'pin' || wallet.isHW || wallet.isReadOnly}
@@ -205,7 +206,11 @@ const AddressModeSwitcher = (props: {isSingle: boolean}) => {
   }
 
   return (
-    <Switch value={!isSingleLocal} onValueChange={handleOnSwitchAddressMode} disabled={addressMode.isToggleLoading} />
+    <SettingsSwitch
+      value={!isSingleLocal}
+      onValueChange={handleOnSwitchAddressMode}
+      disabled={addressMode.isToggleLoading}
+    />
   )
 }
 
@@ -351,5 +356,5 @@ const useStyles = () => {
       padding: 16,
     },
   })
-  return styles
+  return {styles}
 }

apps/wallet-mobile/src/features/Settings/common/SettingsSwitch.tsx

@@ -0,0 +1,23 @@
+import {useTheme} from '@yoroi/theme'
+import React from 'react'
+import {Switch} from 'react-native'
+
+export const SettingsSwitch = ({
+  value,
+  onValueChange,
+  disabled,
+}: {
+  value: boolean
+  onValueChange: (value: boolean) => void
+  disabled?: boolean
+}) => {
+  const {color} = useTheme()
+  return (
+    <Switch
+      value={value}
+      onValueChange={onValueChange}
+      disabled={disabled}
+      trackColor={{false: color.gray_c300, true: color.primary_c500}}
+    />
+  )
+}