Add missing localizations and refine UI text

3 files changed, 86 insertions, 31 deletions

diff --git a/gui/locales/messages.pot b/gui/locales/messages.pot
index 9c74d992d0..f150a42d5f 100644
--- a/gui/locales/messages.pot
+++ b/gui/locales/messages.pot
@@ -189,6 +189,22 @@ msgctxt "connect-view"
 msgid "You have no more VPN time left on this account. To buy more credit on our website, you will need to access the Internet with an unsecured connection."
 msgstr ""
 
+#. The hostname line displayed below the country on the main screen
+#. Available placeholders:
+#. %(relay)s - the relay hostname
+#. %(bridge)s - the bridge hostname
+msgctxt "connection-info"
+msgid "%(relay)s via %(bridge)s"
+msgstr ""
+
+#. The tunnel type line displayed below the hostname line on the main screen
+#. Available placeholders:
+#. %(tunnelType)s - the tunnel type, i.e OpenVPN
+#. %(bridgeType)s - the bridge type, i.e Shadowsocks
+msgctxt "connection-info"
+msgid "%(tunnelType)s via %(bridgeType)s"
+msgstr ""
+
 msgctxt "connection-info"
 msgid "In"
 msgstr ""
@@ -229,10 +245,6 @@ msgid "Failed to apply firewall rules. The device might currently be unsecured"
 msgstr ""
 
 msgctxt "in-app-notifications"
-msgid "Your kernel may be outdated"
-msgstr ""
-
-msgctxt "in-app-notifications"
 msgid "Failed to set system DNS server"
 msgstr ""
 
@@ -286,6 +298,10 @@ msgctxt "in-app-notifications"
 msgid "You are running an unsupported app version. Please upgrade to %(version)s now to ensure your security"
 msgstr ""
 
+msgctxt "in-app-notifications"
+msgid "Your kernel may be outdated"
+msgstr ""
+
 msgctxt "launch-view"
 msgid "Connecting to Mullvad system service..."
 msgstr ""
diff --git a/gui/src/renderer/components/ConnectionInfo.tsx b/gui/src/renderer/components/ConnectionInfo.tsx
index 7bf5f4fed9..2c6796f7fc 100644
--- a/gui/src/renderer/components/ConnectionInfo.tsx
+++ b/gui/src/renderer/components/ConnectionInfo.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { Component, Styles, Text, Types, View } from 'reactxp';
+import { sprintf } from 'sprintf-js';
 import { proxyTypeToString, TunnelType, tunnelTypeToString } from '../../shared/daemon-rpc-types';
 import { messages } from '../../shared/gettext';
 import { default as ConnectionInfoDisclosure } from './ConnectionInfoDisclosure';
@@ -16,7 +17,6 @@ const styles = {
     fontWeight: '600',
     color: 'rgb(255, 255, 255)',
     flex: 0,
-    flexBasis: 30,
     marginRight: 8,
   }),
   value: Styles.createTextStyle({
@@ -30,14 +30,6 @@ const styles = {
     flexDirection: 'row',
     alignItems: 'center',
   }),
-  hostname: Styles.createTextStyle({
-    fontFamily: 'Open Sans',
-    fontSize: 16,
-    lineHeight: 20,
-    fontWeight: '600',
-    color: 'rgb(255, 255, 255)',
-    flex: 1,
-  }),
 };
 
 interface IInAddress {
@@ -78,28 +70,26 @@ export default class ConnectionInfo extends Component<IProps, IState> {
 
   public render() {
     const { inAddress, outAddress, bridgeInfo } = this.props;
-    const transportLine =
-      (inAddress ? tunnelTypeToString(inAddress.tunnelType) : '') +
-      (bridgeInfo && inAddress ? ' via ' + proxyTypeToString(bridgeInfo.bridgeType) : '');
-
     const entryPoint = bridgeInfo && inAddress ? bridgeInfo : inAddress;
 
     return (
       <View style={this.props.style}>
-        <View style={styles.header}>
-          <ConnectionInfoDisclosure defaultOpen={this.props.defaultOpen} onToggle={this.onToggle}>
-            <Text style={styles.hostname}>
-              {this.props.hostname || ''}{' '}
-              {this.props.bridgeHostname ? `via ${this.props.bridgeHostname}` : ''}
-            </Text>
-          </ConnectionInfoDisclosure>
-        </View>
+        {this.props.hostname && (
+          <View style={styles.header}>
+            <ConnectionInfoDisclosure defaultOpen={this.props.defaultOpen} onToggle={this.onToggle}>
+              {this.hostnameLine()}
+            </ConnectionInfoDisclosure>
+          </View>
+        )}
 
-        {this.state.isOpen && (
+        {this.state.isOpen && this.props.hostname && (
           <React.Fragment>
             {this.props.inAddress && (
-              <View style={styles.row}>{<Text style={styles.value}>{transportLine}</Text>}</View>
+              <View style={styles.row}>
+                <Text style={styles.value}>{this.transportLine()}</Text>
+              </View>
             )}
+
             {entryPoint && (
               <View style={styles.row}>
                 <Text style={styles.caption}>{messages.pgettext('connection-info', 'In')}</Text>
@@ -124,6 +114,52 @@ export default class ConnectionInfo extends Component<IProps, IState> {
     );
   }
 
+  private hostnameLine() {
+    if (this.props.hostname && this.props.bridgeHostname) {
+      return sprintf(
+        // TRANSLATORS: The hostname line displayed below the country on the main screen
+        // TRANSLATORS: Available placeholders:
+        // TRANSLATORS: %(relay)s - the relay hostname
+        // TRANSLATORS: %(bridge)s - the bridge hostname
+        messages.pgettext('connection-info', '%(relay)s via %(bridge)s'),
+        {
+          relay: this.props.hostname,
+          bridge: this.props.bridgeHostname,
+        },
+      );
+    } else {
+      return this.props.hostname || '';
+    }
+  }
+
+  private transportLine() {
+    const { inAddress, bridgeInfo } = this.props;
+
+    if (inAddress) {
+      const tunnelType = tunnelTypeToString(inAddress.tunnelType);
+
+      if (bridgeInfo) {
+        const bridgeType = proxyTypeToString(bridgeInfo.bridgeType);
+
+        return sprintf(
+          // TRANSLATORS: The tunnel type line displayed below the hostname line on the main screen
+          // TRANSLATORS: Available placeholders:
+          // TRANSLATORS: %(tunnelType)s - the tunnel type, i.e OpenVPN
+          // TRANSLATORS: %(bridgeType)s - the bridge type, i.e Shadowsocks
+          messages.pgettext('connection-info', '%(tunnelType)s via %(bridgeType)s'),
+          {
+            tunnelType,
+            bridgeType,
+          },
+        );
+      } else {
+        return tunnelType;
+      }
+    } else {
+      return '';
+    }
+  }
+
   private onToggle = (isOpen: boolean) => {
     this.setState(
       (state) => ({ ...state, isOpen }),
diff --git a/gui/src/renderer/components/ConnectionInfoDisclosure.tsx b/gui/src/renderer/components/ConnectionInfoDisclosure.tsx
index 6dc324e78f..3489a639dd 100644
--- a/gui/src/renderer/components/ConnectionInfoDisclosure.tsx
+++ b/gui/src/renderer/components/ConnectionInfoDisclosure.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Component, Styles, Types, View } from 'reactxp';
+import { Component, Styles, Text, Types, View } from 'reactxp';
 import ImageView from './ImageView';
 
 const styles = {
@@ -10,8 +10,9 @@ const styles = {
   caption: {
     base: Styles.createTextStyle({
       fontFamily: 'Open Sans',
-      fontSize: 13,
+      fontSize: 15,
       fontWeight: '600',
+      lineHeight: 20,
       color: 'rgb(255, 255, 255, 0.4)',
     }),
     hovered: Styles.createTextStyle({
@@ -23,7 +24,7 @@ const styles = {
 interface IProps {
   onToggle?: (isOpen: boolean) => void;
   defaultOpen?: boolean;
-  children: React.ReactNode;
+  children: React.ReactText;
   style?: Types.ViewStyleRuleSet | Types.ViewStyleRuleSet[];
 }
 
@@ -44,6 +45,8 @@ export default class ConnectionInfoDisclosure extends Component<IProps, IState>
 
   public render() {
     const tintColor = this.state.isHovered ? 'rgb(255, 255, 255)' : 'rgb(255, 255, 255, 0.4)';
+    const textHoverStyle =
+      this.state.isOpen || this.state.isHovered ? styles.caption.hovered : undefined;
 
     return (
       <View
@@ -51,7 +54,7 @@ export default class ConnectionInfoDisclosure extends Component<IProps, IState>
         onMouseEnter={this.onMouseEnter}
         onMouseLeave={this.onMouseLeave}
         onPress={this.onToggle}>
-        {this.props.children}
+        <Text style={[styles.caption.base, textHoverStyle]}>{this.props.children}</Text>
         <ImageView
           source={this.state.isOpen ? 'icon-chevron-up' : 'icon-chevron-down'}
           width={24}