Updated error page to look nicer and read better

src/browser/index.jsx

@@ -466,29 +466,67 @@ var MattermostView = React.createClass({
 });
 
 // ErrorCode: https://code.google.com/p/chromium/codesearch#chromium/src/net/base/net_error_list.h
-// FIXME: need better wording in English
+const errorPage = {
+  tableStyle: {
+    display: 'table',
+    width: '100%',
+    height: '100%',
+    position: 'absolute',
+    top: '0',
+    left: '0'
+  },
+
+  cellStyle: {
+    display: 'table-cell',
+    verticalAlign: 'middle'
+  },
+
+  bullets: {
+    paddingLeft: '15px',
+    lineHeight: '1.7'
+  },
+
+  techInfo: {
+    fontSize: '12px',
+    color: '#aaa'
+  },
+};
+
 var ErrorView = React.createClass({
   render: function() {
     return (
       <Grid id={ this.props.id } style={ this.props.style }>
-        <h1>Failed to load the URL</h1>
+        <div style={ errorPage.tableStyle }>
-        <p>
+          <div style={ errorPage.cellStyle }>
-          { 'URL: ' }
+            <Row>
-          { this.props.errorInfo.validatedURL }
+              <Col xs={ 0 } sm={ 1 } md={ 1 } lg={ 2 } />
-        </p>
+              <Col xs={ 12 } sm={ 10 } md={ 10 } lg={ 8 }>
-        <p>
+              <h2>Cannot connect to Mattermost</h2>
-          { 'Error code: ' }
+              <hr />
-          { this.props.errorInfo.errorCode }
+              <p>We're having trouble connecting to Mattermost. If refreshing this page (Ctrl+R or Command+R) does not work please verify that:</p>
-        </p>
+              <br />
-        <p>
+              <ul style={ errorPage.bullets }>
-          { this.props.errorInfo.errorDescription }
+                <li>Your computer is connected to the internet.</li>
-        </p>
+                <li>The Mattermost URL
-        <p>Please check below. Then, reload this window. (Ctrl+R or Command+R)</p>
+                  { ' ' }
-        <ListGroup>
+                  <a href={ this.props.errorInfo.validatedURL }>
-          <ListGroupItem>Is your computer online?</ListGroupItem>
+                    { this.props.errorInfo.validatedURL }
-          <ListGroupItem>Is the server alive?</ListGroupItem>
+                  </a> is correct.</li>
-          <ListGroupItem>Is the URL correct?</ListGroupItem>
+                <li>You can reach
-        </ListGroup>
+                  { ' ' }
+                  <a href={ this.props.errorInfo.validatedURL }>
+                    { this.props.errorInfo.validatedURL }
+                  </a> from a browser window.</li>
+              </ul>
+              <br />
+              <div style={ errorPage.techInfo }>
+                { this.props.errorInfo.errorDescription } (
+                { this.props.errorInfo.errorCode })</div>
+              </Col>
+              <Col xs={ 0 } sm={ 1 } md={ 1 } lg={ 2 } />
+            </Row>
+          </div>
+        </div>
       </Grid>
       );
   }