Merge branch 'refine-visual-styles'

6 files changed, 111 insertions, 72 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>
                     ) : (
diff --git a/gui/src/renderer/components/WireguardKeys.tsx b/gui/src/renderer/components/WireguardKeys.tsx
index 053b8567c7..966d751b4f 100644
--- a/gui/src/renderer/components/WireguardKeys.tsx
+++ b/gui/src/renderer/components/WireguardKeys.tsx
@@ -48,17 +48,30 @@ export default class WireguardKeys extends Component<IProps> {
                 </HeaderTitle>
               </SettingsHeader>
 
-              <View style={styles.wgkeys__row}>{this.blockedStateLabel()}</View>
-              <View style={styles.wgkeys__row}>
-                <Text style={styles.wgkeys__row_label}>
-                  {messages.pgettext('wireguard-keys', 'Public key')}
+              {this.props.isOffline && (
+                <Text style={[styles.wgkeys__row, styles.wgkeys__invalid_key]}>
+                  {messages.pgettext(
+                    'wireguard-key-view',
+                    "Can't manage keys whilst in a blocked state",
+                  )}
                 </Text>
+              )}
+
+              <View style={styles.wgkeys__row}>
+                <View style={styles.wgkeys__validity_row}>
+                  <Text style={styles.wgkeys__row_label}>
+                    {messages.pgettext('wireguard-keys', 'Public key')}
+                  </Text>
+                  {this.keyValidityLabel()}
+                </View>
+
                 <View style={styles.wgkeys__row_value}>{this.getKeyText()}</View>
+              </View>
+              <View style={styles.wgkeys__row}>
                 <Text style={styles.wgkeys__row_label}>
                   {messages.pgettext('wireguard-keys', 'Key generated')}
                 </Text>
                 <Text style={styles.wgkeys__row_value}>{this.ageOfKeyString()}</Text>
-                <View style={styles.wgkeys__validity_row}>{this.keyValidityLabel()}</View>
               </View>
 
               <View style={styles.wgkeys__row}>{this.getGenerateButton()}</View>
@@ -250,15 +263,4 @@ export default class WireguardKeys extends Component<IProps> {
         return failure;
     }
   }
-
-  private blockedStateLabel() {
-    if (!this.props.isOffline) {
-      return undefined;
-    }
-    return (
-      <Text style={styles.wgkeys__invalid_key}>
-        {messages.pgettext('wireguard-key-view', "Can't manage keys whilst in a blocked state")}
-      </Text>
-    );
-  }
 }
diff --git a/gui/src/renderer/components/WireguardKeysStyles.tsx b/gui/src/renderer/components/WireguardKeysStyles.tsx
index ec3fd6cf2f..a1aebdedf2 100644
--- a/gui/src/renderer/components/WireguardKeysStyles.tsx
+++ b/gui/src/renderer/components/WireguardKeysStyles.tsx
@@ -18,15 +18,17 @@ export default {
     marginBottom: 24,
   }),
   wgkeys__row_label: Styles.createTextStyle({
+    flex: 1,
     fontFamily: 'Open Sans',
     fontSize: 13,
     fontWeight: '600',
     lineHeight: 20,
     letterSpacing: -0.2,
     color: colors.white60,
+    marginBottom: 9,
   }),
   wgkeys__validity_row: Styles.createViewStyle({
-    paddingTop: 5,
+    flexDirection: 'row',
   }),
   wgkeys__row_value: Styles.createTextStyle({
     fontFamily: 'Open Sans',
@@ -37,13 +39,14 @@ export default {
   }),
   wgkeys__invalid_key: Styles.createTextStyle({
     fontFamily: 'Open Sans',
-    fontSize: 16,
+    fontSize: 13,
     fontWeight: '800',
+    lineHeight: 20,
     color: colors.red,
   }),
   wgkeys__valid_key: Styles.createTextStyle({
     fontFamily: 'Open Sans',
-    fontSize: 16,
+    fontSize: 13,
     fontWeight: '600',
     lineHeight: 20,
     color: colors.green,