settings screen [nfc]: Simplify comparing *Row layouts on this screen

Now, there's less clicking required to check, by reading code, that
the three components NestedNavRow, SwitchRow, and
InputRowRadioButtons will look reasonably uniform. That's nice when
they're all seen together, as they are when they make a list of
settings on the settings screen (with the last of these being a
newcomer there; see recent commits).

This also continues our progress toward removing the constants in
miscStyles.

Author: chrisbobbe

src/common/NestedNavRow.js

@@ -37,6 +37,11 @@ export default function NestedNavRow(props: Props): Node {
     () =>
       createStyleSheet({
         container: {
+          flexDirection: 'row',
+          alignItems: 'center',
+          paddingVertical: 8,
+          paddingHorizontal: 16,
+
           // Minimum touch target height (and width):
           //   https://material.io/design/usability/accessibility.html#layout-and-typography
           minHeight: 48,
@@ -60,7 +65,7 @@ export default function NestedNavRow(props: Props): Node {
 
   return (
     <Touchable onPress={onPress}>
-      <View style={[styles.container, globalStyles.listItem]}>
+      <View style={styles.container}>
         {!!Icon && <Icon size={24} style={styles.iconFromProps} />}
         <ZulipTextIntl style={styles.label} text={label} />
         <View style={globalStyles.rightItem}>

src/common/SwitchRow.js

@@ -17,6 +17,11 @@ type Props = $ReadOnly<{|
 
 const componentStyles = createStyleSheet({
   container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingVertical: 8,
+    paddingHorizontal: 16,
+
     // For uniformity with other rows this might share a screen with, e.g.,
     // NestedNavRow and InputRowRadioButtons on the settings screen. See
     // height-related attributes on those rows.
@@ -37,7 +42,7 @@ export default function SwitchRow(props: Props): Node {
   const themeContext = useContext(ThemeContext);
 
   return (
-    <View style={[componentStyles.container, styles.listItem]}>
+    <View style={componentStyles.container}>
       {!!Icon && <Icon size={24} style={[componentStyles.icon, { color: themeContext.color }]} />}
       <ZulipTextIntl text={label} style={styles.flexed} />
       <View style={styles.rightItem}>