Separate conditional message as separate footer

1 files changed, 10 insertions, 8 deletions

diff --git a/gui/src/renderer/components/AdvancedSettings.tsx b/gui/src/renderer/components/AdvancedSettings.tsx
index 0285f2d829..0c60a996e0 100644
--- a/gui/src/renderer/components/AdvancedSettings.tsx
+++ b/gui/src/renderer/components/AdvancedSettings.tsx
@@ -172,15 +172,17 @@ export default class AdvancedSettings extends Component<IProps, IState> {
                       'advanced-settings-view',
                       "Unless connected to Mullvad, this setting will completely block your internet, even when you have quit the app.",
                     )}
-                    {this.props.blockWhenDisconnected ? (
-                      messages.pgettext(
-                        'advanced-settings-view',
-                        "\n\nWarning: Your internet won't work without a VPN connection, even when you've quit the app. Unless connected to Mullvad, this setting will completely block your internet, even when you have quit the app.",
-                      )
-                    ) : (
-                      undefined
-                    )}
                   </Cell.Footer>
+                  {this.props.blockWhenDisconnected ? (
+                    <Cell.Footer>
+                    {messages.pgettext(
+                      'advanced-settings-view',
+                      "Warning: Your internet won't work without a VPN connection, even when you've quit the app. Unless connected to Mullvad, this setting will completely block your internet, even when you have quit the app.",
+                    )}
+                    </Cell.Footer>
+                  ) : (
+                    undefined
+                  )}
 
                   <View style={styles.advanced_settings__content}>
                     <Selector