Improve ErrorView to match design

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

res/css/structures/ErrorView.scss

@@ -0,0 +1,97 @@
+/*
+Copyright 2020 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_ErrorView {
+    background: #c5e0f7;
+    background: -moz-linear-gradient(top, #c5e0f7 0%, #ffffff 100%);
+    background: -webkit-linear-gradient(top, #c5e0f7 0%, #ffffff 100%);
+    background: linear-gradient(to bottom, #c5e0f7 0%, #ffffff 100%);
+    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c5e0f7', endColorstr='#ffffff',GradientType=0 );
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+    width: 100%;
+    height: 100%;
+    color: #000;
+
+    .mx_ErrorView_container {
+        max-width: 680px;
+        margin: auto;
+    }
+
+    .mx_Button {
+        border: 0;
+        border-radius: 4px;
+        font-size: 18px;
+        margin-left: 4px;
+        margin-right: 4px;
+        min-width: 80px;
+        background-color: #03B381;
+        color: #fff;
+        cursor: pointer;
+        padding: 12px 22px;
+        word-break: break-word;
+        text-decoration: none;
+    }
+
+    .mx_Center {
+        justify-content: center;
+    }
+
+    .mx_HomePage_header {
+        color: #2E2F32;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    font-size: 1.067rem; // 16px
+    h1 {
+        font-size: 2.133rem; // 32px
+    }
+    h2 {
+        font-size: 1.600rem; // 24px
+        color: #000;
+    }
+
+    .mx_HomePage_col {
+        display: flex;
+        flex-direction: row;
+    }
+
+    .mx_HomePage_row {
+        flex: 1 1 0;
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+    }
+
+    .mx_HomePage_logo {
+        margin: auto 20px auto 0;
+    }
+
+    h1, h2 {
+        font-weight: 600;
+        margin-bottom: 32px;
+    }
+
+    .mx_Spacer {
+        margin-top: 24px;
+    }
+
+    .mx_FooterLink {
+        color: #368BD6;
+        text-decoration: none;
+    }
+}

src/components/structures/ErrorView.tsx

@@ -17,21 +17,41 @@ limitations under the License.
 import * as React from "react";
 import * as PropTypes from "prop-types";
 
-import { _t } from "matrix-react-sdk/src/languageHandler";
+// directly import the style here as this layer does not support rethemedex at this time so no matrix-react-sdk
+// scss variables will be accessible.
+import "../../../res/css/structures/ErrorView.scss";
 
 interface IProps {
+    // both of these should already be internationalised
     title: string;
     messages?: string[];
 }
 
 const ErrorView: React.FC<IProps> = ({title, messages}) => {
-    return <div className="mx_GenericErrorPage">
-        <div className="mx_GenericErrorPage_box">
-            <h1>{title}</h1>
-            <div>
-                {messages && messages.map(msg => <p key={msg}>
-                    { _t(msg) }
-                </p>)}
+    return <div className="mx_ErrorView">
+        <div className="mx_ErrorView_container">
+            <div className="mx_HomePage_header">
+              <span className="mx_HomePage_logo">
+                  <img height="42" src={"themes/riot/img/logos/riot-logo.svg"} alt="Riot" />
+              </span>
+                <h1>Failed to start</h1>
+            </div>
+            <div className="mx_HomePage_col">
+                <div className="mx_HomePage_row">
+                    <div>
+                        <h2 id="step1_heading">{ title }</h2>
+                        {messages && messages.map(msg => <p key={msg}>
+                            { msg }
+                        </p>)}
+                    </div>
+                </div>
+            </div>
+            <div className="mx_HomePage_row mx_Center mx_Spacer">
+                <p className="mx_Spacer">
+                    <a href="https://riot.im" target="_blank" className="mx_FooterLink">
+                        Go to Riot.im
+                    </a>
+                </p>
             </div>
         </div>
     </div>;