Use `Cell` components in `AdvancedSettings`

2 files changed, 6 insertions, 42 deletions

diff --git a/gui/packages/desktop/src/renderer/components/AdvancedSettings.js b/gui/packages/desktop/src/renderer/components/AdvancedSettings.js
index e0c28a40c2..8602b48b75 100644
--- a/gui/packages/desktop/src/renderer/components/AdvancedSettings.js
+++ b/gui/packages/desktop/src/renderer/components/AdvancedSettings.js
@@ -2,6 +2,7 @@
 
 import * as React from 'react';
 import { Button, Component, Text, View } from 'reactxp';
+import * as Cell from './Cell';
 import { Layout, Container } from './Layout';
 import NavigationBar, { BackBarItem } from './NavigationBar';
 import SettingsHeader, { HeaderTitle } from './SettingsHeader';
@@ -43,19 +44,11 @@ export class AdvancedSettings extends Component<Props> {
                 <HeaderTitle>Advanced</HeaderTitle>
               </SettingsHeader>
               <CustomScrollbars style={styles.advanced_settings__scrollview} autoHide={true}>
-                <View style={styles.advanced_settings__ipv6}>
-                  <View style={styles.advanced_settings__cell_label_container}>
-                    <Text style={styles.advanced_settings__cell_label}>Enable IPv6</Text>
-                  </View>
-                  <View style={styles.advanced_settings__ipv6_accessory}>
-                    <Switch isOn={this.props.enableIpv6} onChange={this.props.setEnableIpv6} />
-                  </View>
-                </View>
-                <View style={styles.advanced_settings__cell_footer}>
-                  <Text style={styles.advanced_settings__cell_footer_label}>
-                    {'Enable IPv6 communication through the tunnel.'}
-                  </Text>
-                </View>
+                <Cell.Container>
+                  <Cell.Label>Enable IPv6</Cell.Label>
+                  <Switch isOn={this.props.enableIpv6} onChange={this.props.setEnableIpv6} />
+                </Cell.Container>
+                <Cell.Footer>Enable IPv6 communication through the tunnel.</Cell.Footer>
 
                 <View style={styles.advanced_settings__content}>
                   <Selector
diff --git a/gui/packages/desktop/src/renderer/components/AdvancedSettingsStyles.js b/gui/packages/desktop/src/renderer/components/AdvancedSettingsStyles.js
index 30528ae4c7..d1f0b6d4d7 100644
--- a/gui/packages/desktop/src/renderer/components/AdvancedSettingsStyles.js
+++ b/gui/packages/desktop/src/renderer/components/AdvancedSettingsStyles.js
@@ -24,14 +24,6 @@ export default {
     flexBasis: 'auto',
     overflow: 'visible',
   }),
-  advanced_settings__ipv6: Styles.createViewStyle({
-    backgroundColor: colors.blue,
-    flexDirection: 'row',
-    alignItems: 'center',
-  }),
-  advanced_settings__ipv6_accessory: Styles.createViewStyle({
-    marginRight: 12,
-  }),
   advanced_settings__cell: Styles.createViewStyle({
     cursor: 'default',
     backgroundColor: colors.green,
@@ -70,19 +62,6 @@ export default {
     flexDirection: 'row',
     justifyContent: 'flex-start',
   }),
-  advanced_settings__cell_footer: Styles.createViewStyle({
-    paddingTop: 8,
-    paddingRight: 24,
-    paddingBottom: 24,
-    paddingLeft: 24,
-  }),
-  advanced_settings__cell_label_container: Styles.createViewStyle({
-    paddingTop: 14,
-    paddingRight: 12,
-    paddingBottom: 14,
-    paddingLeft: 24,
-    flexGrow: 1,
-  }),
 
   advanced_settings__section_title: Styles.createTextStyle({
     backgroundColor: colors.blue,
@@ -106,12 +85,4 @@ export default {
     color: colors.white,
     flex: 0,
   }),
-  advanced_settings__cell_footer_label: Styles.createTextStyle({
-    fontFamily: 'Open Sans',
-    fontSize: 13,
-    fontWeight: '600',
-    lineHeight: 20,
-    letterSpacing: -0.2,
-    color: colors.white80,
-  }),
 };