Add Cell.FooterText and Cell.FooterBoldText UI elements

4 files changed, 87 insertions, 53 deletions

diff --git a/gui/src/renderer/components/AdvancedSettings.tsx b/gui/src/renderer/components/AdvancedSettings.tsx
index 53c0feb4bd..9f09be5340 100644
--- a/gui/src/renderer/components/AdvancedSettings.tsx
+++ b/gui/src/renderer/components/AdvancedSettings.tsx
@@ -190,10 +190,12 @@ export default class AdvancedSettings extends Component<IProps, IState> {
                     <Cell.Switch isOn={this.props.enableIpv6} onChange={this.props.setEnableIpv6} />
                   </Cell.Container>
                   <Cell.Footer>
-                    {messages.pgettext(
-                      'advanced-settings-view',
-                      'Enable IPv6 communication through the tunnel.',
-                    )}
+                    <Cell.FooterText>
+                      {messages.pgettext(
+                        'advanced-settings-view',
+                        'Enable IPv6 communication through the tunnel.',
+                      )}
+                    </Cell.FooterText>
                   </Cell.Footer>
 
                   <Cell.Container>
@@ -206,21 +208,23 @@ export default class AdvancedSettings extends Component<IProps, IState> {
                     />
                   </Cell.Container>
                   <Cell.Footer>
-                    {messages.pgettext(
-                      'advanced-settings-view',
-                      "Unless connected to Mullvad, this setting will completely block your internet, even when you've disconnected or quit the app.",
-                    )}
-                  </Cell.Footer>
-                  {this.props.blockWhenDisconnected ? (
-                    <Cell.Footer>
+                    <Cell.FooterText>
                       {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've disconnected or quit the app.",
                       )}
-                    </Cell.Footer>
-                  ) : (
-                    undefined
-                  )}
+                    </Cell.FooterText>
+
+                    {this.props.blockWhenDisconnected && (
+                      <Cell.FooterBoldText
+                        style={styles.advanced_settings__cell_footer_internet_warning_label}>
+                        {messages.pgettext(
+                          'advanced-settings-view',
+                          "Warning: Your internet won't work without a VPN connection, even when you've quit the app.",
+                        )}
+                      </Cell.FooterBoldText>
+                    )}
+                  </Cell.Footer>
 
                   {process.platform !== 'win32' ? (
                     <View style={styles.advanced_settings__content}>
@@ -315,20 +319,22 @@ export default class AdvancedSettings extends Component<IProps, IState> {
                     </Cell.InputFrame>
                   </Cell.Container>
                   <Cell.Footer>
-                    {sprintf(
-                      // TRANSLATORS: The hint displayed below the Mssfix input field.
-                      // TRANSLATORS: Available placeholders:
-                      // TRANSLATORS: %(max)d - the maximum possible mssfix value
-                      // TRANSLATORS: %(min)d - the minimum possible mssfix value
-                      messages.pgettext(
-                        'advanced-settings-view',
-                        'Set OpenVPN MSS value. Valid range: %(min)d - %(max)d.',
-                      ),
-                      {
-                        min: MIN_MSSFIX_VALUE,
-                        max: MAX_MSSFIX_VALUE,
-                      },
-                    )}
+                    <Cell.FooterText>
+                      {sprintf(
+                        // TRANSLATORS: The hint displayed below the Mssfix input field.
+                        // TRANSLATORS: Available placeholders:
+                        // TRANSLATORS: %(max)d - the maximum possible mssfix value
+                        // TRANSLATORS: %(min)d - the minimum possible mssfix value
+                        messages.pgettext(
+                          'advanced-settings-view',
+                          'Set OpenVPN MSS value. Valid range: %(min)d - %(max)d.',
+                        ),
+                        {
+                          min: MIN_MSSFIX_VALUE,
+                          max: MAX_MSSFIX_VALUE,
+                        },
+                      )}
+                    </Cell.FooterText>
                   </Cell.Footer>
                   {this.wireguardKeysButton()}
                 </NavigationScrollbars>
diff --git a/gui/src/renderer/components/AdvancedSettingsStyles.tsx b/gui/src/renderer/components/AdvancedSettingsStyles.tsx
index b5fbf82c06..53ad5c1829 100644
--- a/gui/src/renderer/components/AdvancedSettingsStyles.tsx
+++ b/gui/src/renderer/components/AdvancedSettingsStyles.tsx
@@ -40,6 +40,9 @@ export default {
     color: colors.white,
     flex: 0,
   }),
+  advanced_settings__cell_footer_internet_warning_label: Styles.createTextStyle({
+    marginTop: 4,
+  }),
   advanced_settings__mssfix_input: Styles.createTextInputStyle({
     minWidth: 80,
   }),
diff --git a/gui/src/renderer/components/Cell.tsx b/gui/src/renderer/components/Cell.tsx
index 1693f85c2b..ddd5d0ea53 100644
--- a/gui/src/renderer/components/Cell.tsx
+++ b/gui/src/renderer/components/Cell.tsx
@@ -49,6 +49,9 @@ const styles = {
       letterSpacing: -0.2,
       color: colors.white80,
     }),
+    boldText: Styles.createTextStyle({
+      fontWeight: '900',
+    }),
   },
   label: {
     container: Styles.createViewStyle({
@@ -386,9 +389,21 @@ export const UntintedIcon = function CellIcon(props: ImageView['props']) {
 };
 
 export const Footer = function CellFooter({ children }: IContainerProps) {
+  return <View style={styles.footer.container}>{children}</View>;
+};
+
+export const FooterText = function CellFooterText(props: Text['props']) {
   return (
-    <View style={styles.footer.container}>
-      <Text style={styles.footer.text}>{children}</Text>
-    </View>
+    <Text {...props} style={[styles.footer.text, props.style]}>
+      {props.children}
+    </Text>
+  );
+};
+
+export const FooterBoldText = function CellFooterText(props: Text['props']) {
+  return (
+    <Text {...props} style={[styles.footer.text, styles.footer.boldText, props.style]}>
+      {props.children}
+    </Text>
   );
 };
diff --git a/gui/src/renderer/components/Preferences.tsx b/gui/src/renderer/components/Preferences.tsx
index b295c68308..c515361c33 100644
--- a/gui/src/renderer/components/Preferences.tsx
+++ b/gui/src/renderer/components/Preferences.tsx
@@ -79,10 +79,12 @@ export default class Preferences extends Component<IProps> {
                       />
                     </Cell.Container>
                     <Cell.Footer>
-                      {messages.pgettext(
-                        'preferences-view',
-                        'Automatically connect to a server when the app launches.',
-                      )}
+                      <Cell.FooterText>
+                        {messages.pgettext(
+                          'preferences-view',
+                          'Automatically connect to a server when the app launches.',
+                        )}
+                      </Cell.FooterText>
                     </Cell.Footer>
 
                     <Cell.Container>
@@ -92,10 +94,12 @@ export default class Preferences extends Component<IProps> {
                       <Cell.Switch isOn={this.props.allowLan} onChange={this.props.setAllowLan} />
                     </Cell.Container>
                     <Cell.Footer>
-                      {messages.pgettext(
-                        'preferences-view',
-                        'Allows access to other devices on the same network for sharing, printing etc.',
-                      )}
+                      <Cell.FooterText>
+                        {messages.pgettext(
+                          'preferences-view',
+                          'Allows access to other devices on the same network for sharing, printing etc.',
+                        )}
+                      </Cell.FooterText>
                     </Cell.Footer>
 
                     <Cell.Container>
@@ -108,10 +112,12 @@ export default class Preferences extends Component<IProps> {
                       />
                     </Cell.Container>
                     <Cell.Footer>
-                      {messages.pgettext(
-                        'preferences-view',
-                        'Enable or disable system notifications. The critical notifications will always be displayed.',
-                      )}
+                      <Cell.FooterText>
+                        {messages.pgettext(
+                          'preferences-view',
+                          'Enable or disable system notifications. The critical notifications will always be displayed.',
+                        )}
+                      </Cell.FooterText>
                     </Cell.Footer>
 
                     {this.props.enableMonochromaticIconToggle ? (
@@ -126,10 +132,12 @@ export default class Preferences extends Component<IProps> {
                           />
                         </Cell.Container>
                         <Cell.Footer>
-                          {messages.pgettext(
-                            'preferences-view',
-                            'Use a monochromatic tray icon instead of a colored one.',
-                          )}
+                          <Cell.FooterText>
+                            {messages.pgettext(
+                              'preferences-view',
+                              'Use a monochromatic tray icon instead of a colored one.',
+                            )}
+                          </Cell.FooterText>
                         </Cell.Footer>
                       </React.Fragment>
                     ) : (
@@ -148,10 +156,12 @@ export default class Preferences extends Component<IProps> {
                           />
                         </Cell.Container>
                         <Cell.Footer>
-                          {messages.pgettext(
-                            'preferences-view',
-                            'Show only the tray icon when the app starts.',
-                          )}
+                          <Cell.FooterText>
+                            {messages.pgettext(
+                              'preferences-view',
+                              'Show only the tray icon when the app starts.',
+                            )}
+                          </Cell.FooterText>
                         </Cell.Footer>
                       </React.Fragment>
                     ) : (