Update unsupported browser react component to new designs

Signed-off-by: Michael Telatynski <[email protected]>

package.json

@@ -73,6 +73,8 @@
     "dependencies": {
         "@formatjs/intl-segmenter": "^11.5.7",
         "@matrix-org/react-sdk-module-api": "^2.3.0",
+        "@vector-im/compound-design-tokens": "^1.6.1",
+        "@vector-im/compound-web": "^5.4.0",
         "jsrsasign": "^11.0.0",
         "katex": "^0.16.0",
         "lodash": "^4.17.21",

res/css/structures/ErrorView.pcss

@@ -14,94 +14,51 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-/* import font-size variables manually,
-   ideally this file would get loaded by the theme which has all variables in context */
-@import "../../../node_modules/matrix-react-sdk/res/css/_font-sizes.pcss";
-
 .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%);
-    /* stylelint-disable-next-line function-no-unknown */
-    filter: progid:dximagetransform.microsoft.gradient(startColorstr='#c5e0f7', endColorstr='#ffffff', GradientType=0);
+    --width: 520px;
+    --cpd-separator-inset: calc(50% - (var(--width) / 2));
+    --cpd-separator-spacing: var(--cpd-space-8x);
+
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
         "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-    color: #000;
+    text-align: center;
+    color: var(--cpd-color-text-primary);
     width: 100%;
     height: 100%;
-    overflow: auto;
-    padding: 0 20px;
     box-sizing: border-box;
+    overflow: auto;
+    padding: var(--cpd-space-20x);
 
-    .mx_ErrorView_container {
-        max-width: 680px;
-        margin: auto;
-    }
-
-    .mx_Button {
-        border: 0;
-        border-radius: 4px;
-        font-size: $font-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;
-    }
+    background-color: var(--cpd-color-theme-bg);
+    background-image: url("../../themes/element/img/backgrounds/compound-fade-arc-light.png");
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
 
-    .mx_Center {
-        justify-content: center;
+    .mx_ErrorView_logo {
+        display: block;
+        margin: 0 auto;
     }
 
-    .mx_HomePage_header {
-        color: #2e2f32;
-        display: flex;
-        align-items: center;
-        justify-content: center;
+    .mx_ErrorView_container {
+        max-width: var(--width);
+        margin: 0 auto var(--cpd-space-8x);
     }
 
-    font-size: $font-16px;
-    h1 {
-        font-size: $font-32px;
-    }
+    h1,
     h2 {
-        font-size: $font-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;
+        color: var(--cpd-color-text-primary);
     }
 
-    .mx_HomePage_logo {
-        margin: auto 20px auto 0;
-    }
-
-    h1,
-    h2 {
-        font-weight: 600;
-        margin-bottom: 32px;
+    p {
+        color: var(--cpd-color-text-secondary);
     }
 
-    .mx_Spacer {
-        margin-top: 24px;
+    .mx_Flex {
+        margin: 0 auto;
+        width: max-content;
     }
 
-    .mx_FooterLink {
-        color: #368bd6;
-        text-decoration: none;
+    .mx_ErrorView_buttons {
+        margin-top: var(--cpd-space-6x);
     }
 }