Merge branch 'add-new-languages'

4 files changed, 25 insertions, 11 deletions

diff --git a/gui/src/renderer/components/Account.tsx b/gui/src/renderer/components/Account.tsx
index abde15b818..efe8ff2d13 100644
--- a/gui/src/renderer/components/Account.tsx
+++ b/gui/src/renderer/components/Account.tsx
@@ -43,7 +43,7 @@ export default class Account extends Component<IProps> {
                 <View style={styles.account__main}>
                   <View style={styles.account__row}>
                     <Text style={styles.account__row_label}>
-                      {messages.pgettext('account-view', 'Account ID')}
+                      {messages.pgettext('account-view', 'Account number')}
                     </Text>
                     <ClipboardLabel
                       style={styles.account__row_value}
diff --git a/gui/src/renderer/components/ConnectionInfo.tsx b/gui/src/renderer/components/ConnectionInfo.tsx
index 5306ec97a3..7ab8d9907f 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 { messages } from '../../shared/gettext';
 import { default as ConnectionInfoDisclosure } from './ConnectionInfoDisclosure';
 
 const styles = {
@@ -78,7 +79,7 @@ export default class ConnectionInfo extends Component<IProps, IState> {
         <View style={styles.header}>
           <Text style={styles.hostname}>{this.props.hostname || ''}</Text>
           <ConnectionInfoDisclosure defaultOpen={this.props.defaultOpen} onToggle={this.onToggle}>
-            {'Connection details'}
+            {messages.pgettext('connection-info', 'Connection details')}
           </ConnectionInfoDisclosure>
         </View>
 
@@ -86,7 +87,7 @@ export default class ConnectionInfo extends Component<IProps, IState> {
           <React.Fragment>
             {inAddress && (
               <View style={styles.row}>
-                <Text style={styles.caption}>{'In'}</Text>
+                <Text style={styles.caption}>{messages.pgettext('connection-info', 'In')}</Text>
                 <Text style={styles.value}>
                   {`${inAddress.ip}:${inAddress.port} ${inAddress.protocol.toUpperCase()}`}
                 </Text>
@@ -95,7 +96,7 @@ export default class ConnectionInfo extends Component<IProps, IState> {
 
             {outAddress && (outAddress.ipv4 || outAddress.ipv6) && (
               <View style={styles.row}>
-                <Text style={styles.caption}>{'Out'}</Text>
+                <Text style={styles.caption}>{messages.pgettext('connection-info', 'Out')}</Text>
                 <View>
                   {outAddress.ipv4 && <Text style={styles.value}>{outAddress.ipv4}</Text>}
                   {outAddress.ipv6 && <Text style={styles.value}>{outAddress.ipv6}</Text>}
diff --git a/gui/src/renderer/components/HeaderBar.tsx b/gui/src/renderer/components/HeaderBar.tsx
index 87b9747449..71ef37186b 100644
--- a/gui/src/renderer/components/HeaderBar.tsx
+++ b/gui/src/renderer/components/HeaderBar.tsx
@@ -1,6 +1,6 @@
-import { remote } from 'electron';
 import * as React from 'react';
 import { Button, Component, Styles, Text, Types, View } from 'reactxp';
+import { messages } from '../../shared/gettext';
 import ImageView from './ImageView';
 
 export enum HeaderBarStyle {
@@ -93,7 +93,7 @@ export class Brand extends Component {
     return (
       <View style={brandStyles.container}>
         <ImageView width={50} height={50} source="logo-icon" />
-        <Text style={brandStyles.title}>{remote.app.getName().toUpperCase()}</Text>
+        <Text style={brandStyles.title}>{messages.pgettext('headerbar', 'MULLVAD VPN')}</Text>
       </View>
     );
   }
diff --git a/gui/src/renderer/components/TunnelControl.tsx b/gui/src/renderer/components/TunnelControl.tsx
index 0a8751e797..ccad62cb51 100644
--- a/gui/src/renderer/components/TunnelControl.tsx
+++ b/gui/src/renderer/components/TunnelControl.tsx
@@ -1,13 +1,12 @@
 import * as React from 'react';
 import { Component, Styles, Text, Types, View } from 'reactxp';
 import { colors } from '../../config.json';
-import { messages } from '../../shared/gettext';
+import { RelayProtocol, TunnelStateTransition } from '../../shared/daemon-rpc-types';
+import { cities, countries, messages, relayLocations } from '../../shared/gettext';
 import * as AppButton from './AppButton';
 import ConnectionInfo from './ConnectionInfo';
 import SecuredLabel, { SecuredDisplayStyle } from './SecuredLabel';
 
-import { RelayProtocol, TunnelStateTransition } from '../../shared/daemon-rpc-types';
-
 export interface IRelayInAddress {
   ip: string;
   port: number;
@@ -82,8 +81,22 @@ export default class TunnelControl extends Component<ITunnelControlProps> {
     const Location = ({ children }: { children?: React.ReactNode }) => (
       <View style={styles.status_location}>{children}</View>
     );
-    const City = () => <Text style={styles.status_location_text}>{this.props.city}</Text>;
-    const Country = () => <Text style={styles.status_location_text}>{this.props.country}</Text>;
+    const City = () => (
+      <Text style={styles.status_location_text}>
+        {this.props.city
+          ? relayLocations.gettext(this.props.city) ||
+            cities.gettext(this.props.city) ||
+            this.props.city
+          : undefined}
+      </Text>
+    );
+    const Country = () => (
+      <Text style={styles.status_location_text}>
+        {this.props.country
+          ? countries.gettext(this.props.country) || this.props.country
+          : undefined}
+      </Text>
+    );
 
     const SwitchLocation = () => {
       return (