Update unsupported browser react component to new designs (#27857)

docs/config.md

@@ -167,6 +167,10 @@ Starting with `desktop_builds`, the following subproperties are available:
 1. `available`: Required. When `true`, the desktop app can be downloaded from somewhere.
 2. `logo`: Required. A URL to a logo (SVG), intended to be shown at 24x24 pixels.
 3. `url`: Required. The download URL for the app. This is used as a hyperlink.
+4. `url_macos`: Optional. Direct link to download macOS desktop app.
+5. `url_win32`: Optional. Direct link to download Windows 32-bit desktop app.
+6. `url_win64`: Optional. Direct link to download Windows 64-bit desktop app.
+7. `url_linux`: Optional. Direct link to download Linux desktop app.
 
 When `desktop_builds` is not specified at all, the app will assume desktop downloads are available from https://element.io
 

package.json

@@ -68,11 +68,17 @@
     },
     "resolutions": {
         "@types/react-dom": "17.0.25",
-        "@types/react": "17.0.80"
+        "@types/react": "17.0.80",
+        "@vector-im/compound-design-tokens": "1.7.0",
+        "@vector-im/compound-web": "5.5.0",
+        "@floating-ui/react": "0.26.11",
+        "@radix-ui/react-id": "1.1.0"
     },
     "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.5.0",
         "jsrsasign": "^11.0.0",
         "katex": "^0.16.0",
         "lodash": "^4.17.21",

res/css/structures/ErrorView.pcss

@@ -14,94 +14,61 @@ 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;
-    }
+    background-color: var(--cpd-color-theme-bg);
+    background-image: url("../../themes/element/img/compound/fade-arc-light.png");
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
 
-    .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;
+    .mx_ErrorView_logo {
+        display: block;
+        margin: 0 auto;
     }
 
-    .mx_Center {
-        justify-content: center;
+    .mx_ErrorView_container {
+        max-width: var(--width);
+        margin: 0 auto var(--cpd-space-8x);
     }
 
-    .mx_HomePage_header {
-        color: #2e2f32;
-        display: flex;
-        align-items: center;
-        justify-content: center;
+    h1,
+    h2 {
+        color: var(--cpd-color-text-primary);
     }
 
-    font-size: $font-16px;
-    h1 {
-        font-size: $font-32px;
-    }
     h2 {
-        font-size: $font-24px;
-        color: #000;
+        margin: var(--cpd-space-8x) 0;
+        /* Workaround for heading sm being broken in Compound design tokens */
+        font-size: var(--cpd-font-size-heading-sm);
+        line-height: var(--cpd-font-line-height-tight);
+        font-weight: var(--cpd-font-weight-semibold);
     }
 
-    .mx_HomePage_col {
-        display: flex;
-        flex-direction: row;
+    p {
+        color: var(--cpd-color-text-secondary);
     }
 
-    .mx_HomePage_row {
-        flex: 1 1 0;
-        display: flex;
-        flex-direction: row;
+    .mx_Flex {
+        margin: 0 auto;
+        max-width: max-content;
         flex-wrap: wrap;
+        justify-content: space-evenly;
     }
 
-    .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;
+    .mx_ErrorView_buttons {
+        margin-top: var(--cpd-space-6x);
     }
 }