messages for landing screen

src/views/Landing/components/ConnectDevice/index.js

@@ -12,6 +12,9 @@ import { FONT_SIZE, FONT_WEIGHT, SCREEN_SIZE } from 'config/variables';
 import CaseImage from 'images/macbook.png';
 import Link from 'components/Link';
 
+import { FormattedMessage } from 'react-intl';
+import l10nMessages from './index.messages';
+
 type Props = {
     deviceLabel: string,
     showWebUsb: boolean,
@@ -24,6 +27,8 @@ const StyledConnectDevice = styled.div`
 
 const Title = styled.div`
     margin-top: 60px;
+    max-width: 800px;
+    text-align: center;
 `;
 
 const Wrapper = styled.div`
@@ -60,7 +65,7 @@ const StyledButton = styled(Button)`
 
 const Image = styled.img`
     width: 100%;
-    max-width: 777px;
+    max-width: 850px;
     height: auto;
     margin: auto;
     background-repeat: no-repeat;
@@ -126,9 +131,8 @@ class ConnectDevice extends PureComponent<Props> {
         return (
             <StyledConnectDevice>
                 <Title>
-                    <H2 claim>The private bank in your hands.</H2>
-                    <P>Trezor Wallet is an easy-to-use interface for your Trezor.</P>
-                    <P>Trezor Wallet allows you to easily control your funds, manage your balance and initiate transfers.</P>
+                    <H2 claim><FormattedMessage {...l10nMessages.TR_THE_PRIVATE_BANK_IN_YOUR_HANDS} /></H2>
+                    <P><FormattedMessage {...l10nMessages.TR_TREZOR_WALLET_IS_AN_EASY_DASH} /></P>
                 </Title>
 
                 <Wrapper>
@@ -137,15 +141,15 @@ class ConnectDevice extends PureComponent<Props> {
                         {!this.props.showDisconnect && (
                             <React.Fragment>
                                 {this.getTrezorDeviceImage()}
-                                Connect Trezor
+                                <FormattedMessage {...l10nMessages.TR_CONNECT_TREZOR_TO_CONTINUE} />
                             </React.Fragment>
                         )}
                     </ConnectTrezorWrapper>
                     {this.props.showWebUsb && !this.props.showDisconnect && (
                         <React.Fragment>
-                            <StyledP>and</StyledP>
+                            <StyledP><FormattedMessage {...l10nMessages.TR_AND} /></StyledP>
                             <StyledButton isWebUsb>
-                                Check for devices
+                                <FormattedMessage {...l10nMessages.TR_CHECK_FOR_DEVICES} />
                             </StyledButton>
                         </React.Fragment>
                     )}
@@ -156,23 +160,37 @@ class ConnectDevice extends PureComponent<Props> {
                 <Footer>
                     {this.props.showWebUsb && (
                         <P>
-                            <FooterText>Device not recognized?</FooterText>
-                            <StyledLink
-                                to="/bridge"
-                                isGreen
-                            >Try installing the Trezor Bridge.
-                            </StyledLink>
+                            <FooterText>
+                                <FormattedMessage
+                                    {...l10nMessages.TR_DEVICE_NOT_RECOGNIZED_TRY_INSTALLING}
+                                    values={{
+                                        link: (
+                                            <StyledLink
+                                                to="/bridge"
+                                                isGreen
+                                            >Trezor Bridge
+                                            </StyledLink>
+                                        ),
+                                    }}
+                                />
+                            </FooterText>
                         </P>
                     )}
                     <P>
                         <FooterText>
-                            Don&apos;t have Trezor?
+                            <FormattedMessage
+                                {...l10nMessages.TR_DONT_HAVE_A_TREZOR}
+                                values={{
+                                    getOne: (
+                                        <StyledLink
+                                            href="https://trezor.io/"
+                                            isGreen
+                                        ><FormattedMessage {...l10nMessages.TR_GET_ONE} />
+                                        </StyledLink>
+                                    ),
+                                }}
+                            />
                         </FooterText>
-                        <StyledLink
-                            href="https://trezor.io/"
-                            isGreen
-                        >Get one
-                        </StyledLink>
                     </P>
                 </Footer>
             </StyledConnectDevice>

src/views/Landing/components/ConnectDevice/index.messages.js

@@ -0,0 +1,41 @@
+/* @flow */
+import { defineMessages } from 'react-intl';
+import type { Messages } from 'flowtype/npm/react-intl';
+
+const definedMessages: Messages = defineMessages({
+    TR_TREZOR_WALLET_IS_AN_EASY_DASH: {
+        id: 'TR_TREZOR_WALLET_IS_AN_EASY_DASH',
+        defaultMessage: 'Trezor Wallet is an easy-to-use interface for your Trezor. Trezor Wallet allows you to easily control your funds, manage your balance and initiate transfers.',
+    },
+    TR_THE_PRIVATE_BANK_IN_YOUR_HANDS: {
+        id: 'TR_THE_PRIVATE_BANK_IN_YOUR_HANDS',
+        defaultMessage: 'The private bank in your hands.',
+    },
+    TR_CONNECT_TREZOR_TO_CONTINUE: {
+        id: 'TR_CONNECT_TREZOR_TO_CONTINUE',
+        defaultMessage: 'Connect Trezor to continue',
+    },
+    TR_AND: {
+        id: 'TR_AND',
+        defaultMessage: 'and',
+    },
+    TR_CHECK_FOR_DEVICES: {
+        id: 'TR_CHECK_FOR_DEVICES',
+        defaultMessage: 'Check for devices',
+    },
+    TR_DEVICE_NOT_RECOGNIZED_TRY_INSTALLING: {
+        id: 'TR_DEVICE_NOT_RECOGNIZED_TRY_INSTALLING',
+        defaultMessage: 'Device not recognized? Try installing the {link}.',
+    },
+    TR_DONT_HAVE_A_TREZOR: {
+        id: 'TR_DONT_HAVE_A_TREZOR_GET',
+        defaultMessage: 'Don\'t have a Trezor? {getOne}',
+    },
+    TR_GET_ONE: {
+        id: 'TR_GET_ONE',
+        description: 'Part of the sentence: Dont have a Trezor? Get one',
+        defaultMessage: 'Get one',
+    },
+});
+
+export default definedMessages;

translations/extractedMessages/src/views/Landing/components/ConnectDevice/index.messages.json

@@ -0,0 +1,107 @@
+[
+  {
+    "id": "TR_TREZOR_WALLET_IS_AN_EASY_DASH",
+    "defaultMessage": "Trezor Wallet is an easy-to-use interface for your Trezor. Trezor Wallet allows you to easily control your funds, manage your balance and initiate transfers.",
+    "file": "src/views/Landing/components/ConnectDevice/index.messages.js",
+    "start": {
+      "line": 6,
+      "column": 38
+    },
+    "end": {
+      "line": 9,
+      "column": 5
+    }
+  },
+  {
+    "id": "TR_THE_PRIVATE_BANK_IN_YOUR_HANDS",
+    "defaultMessage": "The private bank in your hands.",
+    "file": "src/views/Landing/components/ConnectDevice/index.messages.js",
+    "start": {
+      "line": 10,
+      "column": 39
+    },
+    "end": {
+      "line": 13,
+      "column": 5
+    }
+  },
+  {
+    "id": "TR_CONNECT_TREZOR_TO_CONTINUE",
+    "defaultMessage": "Connect Trezor to continue",
+    "file": "src/views/Landing/components/ConnectDevice/index.messages.js",
+    "start": {
+      "line": 14,
+      "column": 35
+    },
+    "end": {
+      "line": 17,
+      "column": 5
+    }
+  },
+  {
+    "id": "TR_AND",
+    "defaultMessage": "and",
+    "file": "src/views/Landing/components/ConnectDevice/index.messages.js",
+    "start": {
+      "line": 18,
+      "column": 12
+    },
+    "end": {
+      "line": 21,
+      "column": 5
+    }
+  },
+  {
+    "id": "TR_CHECK_FOR_DEVICES",
+    "defaultMessage": "Check for devices",
+    "file": "src/views/Landing/components/ConnectDevice/index.messages.js",
+    "start": {
+      "line": 22,
+      "column": 26
+    },
+    "end": {
+      "line": 25,
+      "column": 5
+    }
+  },
+  {
+    "id": "TR_DEVICE_NOT_RECOGNIZED_TRY_INSTALLING",
+    "defaultMessage": "Device not recognized? Try installing the {link}.",
+    "file": "src/views/Landing/components/ConnectDevice/index.messages.js",
+    "start": {
+      "line": 26,
+      "column": 45
+    },
+    "end": {
+      "line": 29,
+      "column": 5
+    }
+  },
+  {
+    "id": "TR_DONT_HAVE_A_TREZOR_GET",
+    "defaultMessage": "Don't have a Trezor? {getOne}",
+    "file": "src/views/Landing/components/ConnectDevice/index.messages.js",
+    "start": {
+      "line": 30,
+      "column": 27
+    },
+    "end": {
+      "line": 33,
+      "column": 5
+    }
+  },
+  {
+    "id": "TR_GET_ONE",
+    "description": "Part of the sentence: Dont have a Trezor? Get one",
+    "defaultMessage": "Get one",
+    "file": "src/views/Landing/components/ConnectDevice/index.messages.js",
+    "start": {
+      "line": 34,
+      "column": 16
+    },
+    "end": {
+      "line": 38,
+      "column": 5
+    }
+  }
+]