REF: Use builtin subtitle prop for ListItem (#7115)

components/ListItem.tsx

@@ -98,6 +98,8 @@ const ListItem: React.FC<ListItemProps> = React.memo(
         writingDirection: I18nManager.isRTL ? 'rtl' : 'ltr',
         color: colors.alternativeTextColor,
         fontWeight: '400',
+        paddingVertical: switchProps ? 8 : 0,
+        lineHeight: 20,
         fontSize: 14,
       },
 
@@ -130,7 +132,7 @@ const ListItem: React.FC<ListItemProps> = React.memo(
           </RNElementsListItem.Title>
           {subtitle && (
             <RNElementsListItem.Subtitle
-              numberOfLines={subtitleNumberOfLines ?? 1}
+              numberOfLines={switchProps ? 0 : (subtitleNumberOfLines ?? 1)}
               accessible={switchProps === undefined}
               style={stylesHook.subtitle}
             >
@@ -152,7 +154,9 @@ const ListItem: React.FC<ListItemProps> = React.memo(
           <>
             {chevron && <RNElementsListItem.Chevron iconStyle={{ transform: [{ scaleX: I18nManager.isRTL ? -1 : 1 }] }} />}
             {rightIcon && <Avatar icon={rightIcon} />}
-            {switchProps && <Switch {...memoizedSwitchProps} accessibilityLabel={title} accessible accessibilityRole="switch" />}
+            {switchProps && (
+              <Switch {...memoizedSwitchProps} accessibilityLabel={title} style={styles.margin16} accessible accessibilityRole="switch" />
+            )}
             {checkmark && (
               <RNElementsListItem.CheckBox
                 iconRight
@@ -216,5 +220,8 @@ const styles = StyleSheet.create({
   margin8: {
     margin: 8,
   },
+  margin16: {
+    marginLeft: 16,
+  },
   width16: { width: 16 },
 });

screen/settings/DefaultView.tsx

@@ -2,7 +2,6 @@ import { useNavigation } from '@react-navigation/native';
 import { NativeStackNavigationProp } from '@react-navigation/native-stack';
 import React, { useEffect, useReducer } from 'react';
 import { ScrollView, TouchableWithoutFeedback, View } from 'react-native';
-import { BlueCard, BlueText } from '../../BlueComponents';
 import { TWallet } from '../../class/wallets/types';
 import ListItem from '../../components/ListItem';
 import useOnAppLaunch from '../../hooks/useOnAppLaunch';
@@ -105,10 +104,9 @@ const DefaultView: React.FC = () => {
             value: state.isViewAllWalletsSwitchEnabled,
             disabled: wallets.length <= 0,
           }}
+          subtitle={loc.settings.default_desc}
         />
-        <BlueCard>
+
-          <BlueText>{loc.settings.default_desc}</BlueText>
-        </BlueCard>
         {!state.isViewAllWalletsSwitchEnabled && (
           <ListItem
             title={loc.settings.default_info}

screen/settings/EncryptStorage.tsx

@@ -1,7 +1,5 @@
 import React, { useCallback, useEffect, useReducer, useRef } from 'react';
 import { Alert, Platform, ScrollView, StyleSheet, Text, TouchableWithoutFeedback, View } from 'react-native';
-import { BlueCard, BlueSpacing20, BlueText } from '../../BlueComponents';
-import presentAlert from '../../components/Alert';
 import ListItem, { TouchableOpacityWrapper } from '../../components/ListItem';
 import { useTheme } from '../../components/themes';
 import { unlockWithBiometrics, useBiometrics } from '../../hooks/useBiometrics';
@@ -13,6 +11,9 @@ import PromptPasswordConfirmationModal, {
   PromptPasswordConfirmationModalHandle,
 } from '../../components/PromptPasswordConfirmationModal';
 import { popToTop } from '../../NavigationService';
+import presentAlert from '../../components/Alert';
+import { Header } from '../../components/Header';
+import { BlueSpacing20 } from '../../BlueComponents';
 
 enum ActionType {
   SetLoading = 'SET_LOADING',
@@ -72,9 +73,6 @@ const EncryptStorage = () => {
     root: {
       backgroundColor: colors.background,
     },
-    headerText: {
-      color: colors.foregroundColor,
-    },
   });
 
   const initializeState = useCallback(async () => {
@@ -139,15 +137,6 @@ const EncryptStorage = () => {
     navigate('PlausibleDeniability');
   };
 
-  const renderPasscodeExplanation = () => {
-    return Platform.OS === 'android' && Platform.Version >= 30 ? (
-      <>
-        <BlueText />
-        <BlueText>{loc.formatString(loc.settings.biometrics_fail, { type: deviceBiometricType! })}</BlueText>
-      </>
-    ) : null;
-  };
-
   return (
     <ScrollView
       contentContainerStyle={[styles.root, styleHooks.root]}
@@ -157,26 +146,30 @@ const EncryptStorage = () => {
       <View style={styles.paddingTop} />
       {state.deviceBiometricCapable && (
         <>
-          <Text adjustsFontSizeToFit style={[styles.headerText, styleHooks.headerText]}>
+          <Header leftText={loc.settings.biometrics} />
-            {loc.settings.biometrics}
-          </Text>
           <ListItem
             title={loc.formatString(loc.settings.encrypt_use, { type: deviceBiometricType! })}
             Component={TouchableWithoutFeedback}
-            switch={{ value: biometricEnabled, onValueChange: onUseBiometricSwitch, disabled: state.currentLoadingSwitch !== null }}
+            switch={{
+              value: biometricEnabled,
+              onValueChange: onUseBiometricSwitch,
+              disabled: state.currentLoadingSwitch !== null,
+            }}
             isLoading={state.currentLoadingSwitch === 'biometric' && state.isLoading}
             containerStyle={[styles.row, styleHooks.root]}
+            subtitle={
+              <>
+                <Text style={styles.subtitleText}>{loc.formatString(loc.settings.encrypt_use_expl, { type: deviceBiometricType! })}</Text>
+                {Platform.OS === 'android' && Platform.Version >= 30 && (
+                  <Text style={styles.subtitleText}>{loc.formatString(loc.settings.biometrics_fail, { type: deviceBiometricType! })}</Text>
+                )}
+              </>
+            }
           />
-          <BlueCard>
-            <BlueText>{loc.formatString(loc.settings.encrypt_use_expl, { type: deviceBiometricType! })}</BlueText>
-            {renderPasscodeExplanation()}
-          </BlueCard>
-          <BlueSpacing20 />
         </>
       )}
-      <Text adjustsFontSizeToFit style={[styles.headerText, styleHooks.headerText]}>
+      <BlueSpacing20 />
-        {loc.settings.encrypt_tstorage}
+      <Header leftText={loc.settings.encrypt_tstorage} />
-      </Text>
       <ListItem
         testID="EncyptedAndPasswordProtected"
         title={loc.settings.encrypt_enc_and_pass}
@@ -211,7 +204,7 @@ const EncryptStorage = () => {
               dispatch({ type: ActionType.SetModalType, payload: MODAL_TYPES.SUCCESS });
               success = true;
             } catch (error) {
-              presentAlert({ title: loc.errors.error, message: (error as Error).message });
+              presentAlert({ message: (error as Error).message });
               success = false;
             }
           } else if (state.modalType === MODAL_TYPES.ENTER_PASSWORD) {
@@ -243,12 +236,11 @@ const styles = StyleSheet.create({
     flex: 1,
   },
   paddingTop: { paddingTop: 19 },
-  headerText: {
-    fontWeight: 'bold',
-    fontSize: 30,
-    marginLeft: 17,
-  },
   row: { minHeight: 60 },
+  subtitleText: {
+    fontSize: 14,
+    marginTop: 5,
+  },
 });
 
 export default EncryptStorage;

screen/settings/GeneralSettings.tsx

@@ -1,7 +1,7 @@
 import { useNavigation } from '@react-navigation/native';
 import React from 'react';
 import { Platform, ScrollView, StyleSheet } from 'react-native';
-import { BlueCard, BlueSpacing20, BlueText } from '../../BlueComponents';
+import { BlueSpacing20 } from '../../BlueComponents';
 import ListItem, { PressableWrapper } from '../../components/ListItem';
 import { useTheme } from '../../components/themes';
 import loc from '../../loc';
@@ -50,14 +50,10 @@ const GeneralSettings: React.FC = () => {
             title={loc.settings.general_continuity}
             Component={PressableWrapper}
             switch={{ onValueChange: onHandOffUseEnabledChange, value: isHandOffUseEnabled }}
+            subtitle={loc.settings.general_continuity_e}
           />
-          <BlueCard>
-            <BlueText>{loc.settings.general_continuity_e}</BlueText>
-          </BlueCard>
-          <BlueSpacing20 />
         </>
       ) : null}
-      <BlueSpacing20 />
       <ListItem
         Component={PressableWrapper}
         title="Legacy URv1 QR"

screen/settings/SettingsPrivacy.tsx

@@ -2,7 +2,6 @@ import React, { useEffect, useState } from 'react';
 import { Platform, Pressable, ScrollView, StyleSheet, Text, TouchableWithoutFeedback, View } from 'react-native';
 import { openSettings } from 'react-native-permissions';
 import A from '../../blue_modules/analytics';
-import { BlueCard, BlueSpacing20, BlueSpacing40, BlueText } from '../../BlueComponents';
 import { Header } from '../../components/Header';
 import ListItem, { PressableWrapper } from '../../components/ListItem';
 import { useTheme } from '../../components/themes';
@@ -10,6 +9,7 @@ import { setBalanceDisplayAllowed } from '../../components/WidgetCommunication';
 import loc from '../../loc';
 import { useStorage } from '../../hooks/context/useStorage';
 import { useSettings } from '../../hooks/context/useSettings';
+import { BlueSpacing20 } from '../../BlueComponents';
 
 enum SettingsPrivacySection {
   None,
@@ -45,9 +45,6 @@ const SettingsPrivacy: React.FC = () => {
     root: {
       backgroundColor: colors.background,
     },
-    widgetsHeader: {
-      color: colors.foregroundColor,
-    },
   });
 
   useEffect(() => {
@@ -130,13 +127,13 @@ const SettingsPrivacy: React.FC = () => {
           disabled: isLoading === SettingsPrivacySection.All,
           testID: 'ClipboardSwitch',
         }}
+        subtitle={
+          <Pressable accessibilityRole="button">
+            <Text style={styles.subtitleText}>{loc.settings.privacy_clipboard_explanation}</Text>
+          </Pressable>
+        }
       />
-      <BlueCard>
+
-        <Pressable accessibilityRole="button">
-          <BlueText>{loc.settings.privacy_clipboard_explanation}</BlueText>
-        </Pressable>
-      </BlueCard>
-      <BlueSpacing20 />
       <ListItem
         title={loc.settings.privacy_quickactions}
         Component={TouchableWithoutFeedback}
@@ -146,12 +143,14 @@ const SettingsPrivacy: React.FC = () => {
           disabled: isLoading === SettingsPrivacySection.All || storageIsEncrypted,
           testID: 'QuickActionsSwitch',
         }}
+        subtitle={
+          <>
+            <Text style={styles.subtitleText}>{loc.settings.privacy_quickactions_explanation}</Text>
+            {storageIsEncrypted && <Text style={styles.subtitleText}>{loc.settings.encrypted_feature_disabled}</Text>}
+          </>
+        }
       />
-      <BlueCard>
+
-        <BlueText>{loc.settings.privacy_quickactions_explanation}</BlueText>
-        <BlueSpacing20 />
-        {storageIsEncrypted && <BlueText>{loc.settings.encrypted_feature_disabled}</BlueText>}
-      </BlueCard>
       <ListItem
         title={loc.total_balance_view.title}
         Component={PressableWrapper}
@@ -161,11 +160,9 @@ const SettingsPrivacy: React.FC = () => {
           disabled: isLoading === SettingsPrivacySection.All || wallets.length < 2,
           testID: 'TotalBalanceSwitch',
         }}
+        subtitle={<Text style={styles.subtitleText}>{loc.total_balance_view.explanation}</Text>}
       />
-      <BlueCard>
+
-        <BlueText>{loc.total_balance_view.explanation}</BlueText>
-        <BlueSpacing20 />
-      </BlueCard>
       <ListItem
         title={loc.settings.privacy_temporary_screenshots}
         Component={TouchableWithoutFeedback}
@@ -174,24 +171,24 @@ const SettingsPrivacy: React.FC = () => {
           value: !isPrivacyBlurEnabled,
           disabled: isLoading === SettingsPrivacySection.All,
         }}
+        subtitle={<Text style={styles.subtitleText}>{loc.settings.privacy_temporary_screenshots_instructions}</Text>}
       />
-      <BlueCard>
+
-        <BlueText>{loc.settings.privacy_temporary_screenshots_instructions}</BlueText>
-      </BlueCard>
       <ListItem
         title={loc.settings.privacy_do_not_track}
         Component={TouchableWithoutFeedback}
-        switch={{ onValueChange: onDoNotTrackValueChange, value: isDoNotTrackEnabled, disabled: isLoading === SettingsPrivacySection.All }}
+        switch={{
+          onValueChange: onDoNotTrackValueChange,
+          value: isDoNotTrackEnabled,
+          disabled: isLoading === SettingsPrivacySection.All,
+        }}
+        subtitle={<Text style={styles.subtitleText}>{loc.settings.privacy_do_not_track_explanation}</Text>}
       />
-      <BlueCard>
+
-        <BlueText>{loc.settings.privacy_do_not_track_explanation}</BlueText>
-      </BlueCard>
       {Platform.OS === 'ios' && (
         <>
-          <BlueSpacing40 />
+          <BlueSpacing20 />
-          <Text adjustsFontSizeToFit style={[styles.widgetsHeader, styleHooks.widgetsHeader]}>
+          <Header leftText={loc.settings.widgets} />
-            {loc.settings.widgets}
-          </Text>
           <ListItem
             title={loc.settings.total_balance}
             Component={TouchableWithoutFeedback}
@@ -200,18 +197,17 @@ const SettingsPrivacy: React.FC = () => {
               value: storageIsEncrypted ? false : isWidgetBalanceDisplayAllowed,
               disabled: isLoading === SettingsPrivacySection.All || storageIsEncrypted,
             }}
+            subtitle={
+              <>
+                <Text style={styles.subtitleText}>{loc.settings.total_balance_explanation}</Text>
+                {storageIsEncrypted && <Text style={styles.subtitleText}>{loc.settings.encrypted_feature_disabled}</Text>}
+              </>
+            }
           />
-          <BlueCard>
-            <BlueText>{loc.settings.total_balance_explanation}</BlueText>
-            <BlueSpacing20 />
-            {storageIsEncrypted && <BlueText>{loc.settings.encrypted_feature_disabled}</BlueText>}
-          </BlueCard>
         </>
       )}
 
-      <BlueSpacing20 />
       <ListItem title={loc.settings.privacy_system_settings} chevron onPress={openApplicationSettings} testID="PrivacySystemSettings" />
-      <BlueSpacing20 />
     </ScrollView>
   );
 };
@@ -220,14 +216,14 @@ const styles = StyleSheet.create({
   root: {
     flex: 1,
   },
-  widgetsHeader: {
+
-    fontWeight: 'bold',
-    fontSize: 30,
-    marginLeft: 17,
-  },
   headerContainer: {
     paddingVertical: 16,
   },
+  subtitleText: {
+    fontSize: 14,
+    marginTop: 5,
+  },
 });
 
 export default SettingsPrivacy;

screen/settings/electrumSettings.js

@@ -416,10 +416,9 @@ export default class ElectrumSettings extends Component {
             value: this.state.isOfflineMode,
             testID: 'ElectrumConnectionEnabledSwitch',
           }}
+          subtitle={loc.settings.electrum_offline_description}
         />
-        <BlueCard>
+
-          <BlueText>{loc.settings.electrum_offline_description}</BlueText>
-        </BlueCard>
         {!this.state.isOfflineMode && this.renderElectrumSettings()}
       </ScrollView>
     );

screen/settings/notificationSettings.js

@@ -105,14 +105,11 @@ const NotificationSettings = () => {
       <ListItem
         Component={TouchableWithoutFeedback}
         title={loc.settings.push_notifications}
+        subtitle={loc.settings.groundcontrol_explanation}
         switch={{ onValueChange: onNotificationsSwitch, value: isNotificationsEnabled, testID: 'NotificationsSwitch' }}
       />
       <BlueSpacing20 />
 
-      <BlueCard>
-        <BlueText>{loc.settings.groundcontrol_explanation}</BlueText>
-      </BlueCard>
-
       <ButtonRNElements
         icon={{
           name: 'github',