Implement new unsupported browser page

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

res/css/structures/ErrorView.scss

@@ -25,7 +25,7 @@ limitations under the License.
     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%;
+    height: auto;
     color: #000;
 
     .mx_ErrorView_container {

src/components/structures/ErrorView.tsx

@@ -17,6 +17,8 @@ limitations under the License.
 import * as React from "react";
 import * as PropTypes from "prop-types";
 
+import {_t} from "../../vector/init";
+
 // 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";
@@ -32,9 +34,9 @@ const ErrorView: React.FC<IProps> = ({title, messages}) => {
         <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" />
+                    <img height="42" src="themes/riot/img/logos/riot-logo.svg" alt="Riot" />
                 </span>
-                <h1>Failed to start</h1>
+                <h1>{ _t("Failed to start") }</h1>
             </div>
             <div className="mx_HomePage_col">
                 <div className="mx_HomePage_row">

src/i18n/strings/en_EN.json

@@ -19,6 +19,14 @@
     "Custom Server Options": "Custom Server Options",
     "You can use the custom server options to sign into other Matrix servers by specifying a different homeserver URL. This allows you to use Riot with an existing Matrix account on a different homeserver.": "You can use the custom server options to sign into other Matrix servers by specifying a different homeserver URL. This allows you to use Riot with an existing Matrix account on a different homeserver.",
     "Dismiss": "Dismiss",
+    "Unsupported browser": "Unsupported browser",
+    "Use Riot in a browser": "Use Riot in a browser",
+    "Sorry, your browser is <b>not</b> able to run Riot.": "Sorry, your browser is <b>not</b> able to run Riot.",
+    "Riot uses many advanced browser features, some of which are not available or experimental in your current browser.": "Riot uses many advanced browser features, some of which are not available or experimental in your current browser.",
+    "Please install <chromeLink>Chrome</chromeLink>, <firefoxLink>Firefox</firefoxLink>, or <safariLink>Safari</safariLink> for the best experience.": "Please install <chromeLink>Chrome</chromeLink>, <firefoxLink>Firefox</firefoxLink>, or <safariLink>Safari</safariLink> for the best experience.",
+    "With your current browser, the look and feel of the application may be completely incorrect, and some or all features may not function. If you want to try it anyway you can continue, but you are on your own in terms of any issues you may encounter!": "With your current browser, the look and feel of the application may be completely incorrect, and some or all features may not function. If you want to try it anyway you can continue, but you are on your own in terms of any issues you may encounter!",
+    "I understand the risks and wish to continue": "I understand the risks and wish to continue",
+    "Failed to start": "Failed to start",
     "Welcome to Riot.im": "Welcome to Riot.im",
     "Decentralised, encrypted chat &amp; collaboration powered by [matrix]": "Decentralised, encrypted chat &amp; collaboration powered by [matrix]",
     "Sign In": "Sign In",

src/vector/init.tsx

@@ -156,8 +156,7 @@ export async function showError(title: string, messages?: string[]) {
 export async function showIncompatibleBrowser(onAccept) {
     const CompatibilityPage = (await import(
         /* webpackChunkName: "compatibility-page" */
-        /* webpackPreload: true */
+        "../components/structures/CompatibilityPage")).default;
-        "matrix-react-sdk/src/components/structures/CompatibilityPage")).default;
     window.matrixChat = ReactDOM.render(<CompatibilityPage onAccept={onAccept} />,
         document.getElementById('matrixchat'));
 }

src/vector/static/incompatible-browser.html

@@ -169,8 +169,10 @@
         <div class="mx_HomePage_row">
             <div>
                 <h2 id="step1_heading">Use Riot in a browser</h2>
-                <p>It looks like you're using an unsupported browser.
+                <p>Sorry, your browser is <b>not</b> able to run Riot.</p>
-                    To use Riot on the web, please use a modern version ofChrome, Safari, or Firefox.</p>
+                <p>Riot uses many advanced browser features, some of which are not available or experimental in your current browser.</p>
+                <p>Please install <a href="https://www.google.com/chrome">Chrome</a>, <a href="https://firefox.com">Firefox</a>,
+                    or <a href="https://apple.com/safari">Safari</a> for the best experience.</p>
             </div>
         </div>
     </div>
@@ -354,6 +356,7 @@
                             </g>
                         </g>
                     </svg>
+                </a>
                 <a href="https://f-droid.org/repository/browse/?fdid=im.vector.alpha" target="_blank"
                    class="mx_ClearDecoration">
                     <svg width="164px" height="48px" viewBox="0 0 157 46" version="1.1"