Make it possible to style Cell.Section

3 files changed, 6 insertions, 7 deletions

diff --git a/gui/src/renderer/components/AdvancedSettings.tsx b/gui/src/renderer/components/AdvancedSettings.tsx
index 1ff5358014..a1cb90e128 100644
--- a/gui/src/renderer/components/AdvancedSettings.tsx
+++ b/gui/src/renderer/components/AdvancedSettings.tsx
@@ -139,8 +139,6 @@ export default class AdvancedSettings extends Component<IProps, IState> {
                       onSelect={this.onSelectProtocol}
                     />
 
-                    <View style={styles.advanced_settings__cell_spacer} />
-
                     {this.props.protocol ? (
                       <Selector
                         title={sprintf(
@@ -256,7 +254,7 @@ interface ISelectorProps<T> {
 class Selector<T> extends Component<ISelectorProps<T>> {
   public render() {
     return (
-      <Cell.Section>
+      <Cell.Section style={styles.advanced_settings__selector_section}>
         <Cell.SectionTitle>{this.props.title}</Cell.SectionTitle>
         <SelectorCell
           key={'auto'}
diff --git a/gui/src/renderer/components/AdvancedSettingsStyles.tsx b/gui/src/renderer/components/AdvancedSettingsStyles.tsx
index 12d8a69002..c8eafe052f 100644
--- a/gui/src/renderer/components/AdvancedSettingsStyles.tsx
+++ b/gui/src/renderer/components/AdvancedSettingsStyles.tsx
@@ -16,15 +16,15 @@ export default {
   advanced_settings__content: Styles.createViewStyle({
     flex: 0,
   }),
+  advanced_settings__selector_section: Styles.createViewStyle({
+    marginBottom: 24,
+  }),
   advanced_settings__cell_hover: Styles.createButtonStyle({
     backgroundColor: colors.blue80,
   }),
   advanced_settings__cell_selected_hover: Styles.createButtonStyle({
     backgroundColor: colors.green,
   }),
-  advanced_settings__cell_spacer: Styles.createViewStyle({
-    height: 24,
-  }),
   advanced_settings__cell_icon_invisible: Styles.createViewStyle({
     opacity: 0,
   }),
diff --git a/gui/src/renderer/components/Cell.tsx b/gui/src/renderer/components/Cell.tsx
index 6596c8a48d..2ba4051172 100644
--- a/gui/src/renderer/components/Cell.tsx
+++ b/gui/src/renderer/components/Cell.tsx
@@ -176,12 +176,13 @@ export const SectionTitle = function CellSectionTitle(props: ISectionTitleProps)
 
 interface ISectionProps {
   children?: React.ReactNode;
+  style?: Types.StyleRuleSetRecursive<Types.ViewStyleRuleSet>;
 }
 
 export const Section = class CellSection extends Component<ISectionProps> {
   public render() {
     return (
-      <View>
+      <View style={this.props.style}>
         <CellSectionContext.Provider value={true}>
           {this.props.children}
         </CellSectionContext.Provider>