Matrix/element-web
Matrix/element-web
1
0
Fork 0
mirror of https://github.com/vector-im/element-web.git synced 2024-09-10 07:05:14 +00:00
Code Issues Projects Releases Packages Wiki Activity

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

Browse source
This commit is contained in:
Michael Telatynski 2024-07-30 14:16:19 +01:00 committed by GitHub
parent 31345ddd36
commit 59e526e318
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
16 changed files with 564 additions and 466 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
docs/config.md
View file

@ -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

8
package.json
View file

@ -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",

113
res/css/structures/ErrorView.pcss
View file

@ -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);
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_ErrorView_logo {
display: block;
margin: 0 auto;
}
.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;
}
.mx_Center {
justify-content: center;
}
.mx_HomePage_header {
color: #2e2f32;
display: flex;
align-items: center;
justify-content: center;
}
font-size: $font-16px;
h1 {
font-size: $font-32px;
}
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;
}
.mx_HomePage_logo {
margin: auto 20px auto 0;
max-width: var(--width);
margin: 0 auto var(--cpd-space-8x);
}
h1,
h2 {
font-weight: 600;
margin-bottom: 32px;
color: var(--cpd-color-text-primary);
}
.mx_Spacer {
margin-top: 24px;
h2 {
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_FooterLink {
color: #368bd6;
text-decoration: none;
p {
color: var(--cpd-color-text-secondary);
}
.mx_Flex {
margin: 0 auto;
max-width: max-content;
flex-wrap: wrap;
justify-content: space-evenly;
}
.mx_ErrorView_buttons {
margin-top: var(--cpd-space-6x);
}
}

3
res/themes/element/img/compound/apple.svg Normal file
View file

@ -0,0 +1,3 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M13.4157 2C13.4922 2.92763 13.1763 3.84642 12.535 4.56125C11.9129 5.27979 10.9701 5.69366 9.97726 5.68417C9.91411 4.78324 10.2392 3.89596 10.881 3.21774C11.531 2.53034 12.436 2.09555 13.4157 2ZM16.5554 7.45058C15.4132 8.10257 14.7104 9.25238 14.6932 10.4972C14.6948 11.9055 15.6031 13.1765 17 13.7251C16.7313 14.5354 16.3264 15.3013 15.8001 15.9942C15.0934 16.9759 14.3523 17.935 13.1762 17.9527C12.6168 17.9647 12.2392 17.8153 11.8458 17.6597C11.4354 17.4974 11.0077 17.3282 10.3385 17.3282C9.62875 17.3282 9.18194 17.5028 8.75102 17.6712C8.37862 17.8167 8.01808 17.9576 7.50997 17.9772C6.38987 18.0157 5.53384 16.9294 4.80138 15.9569C3.33741 13.971 2.19745 10.3601 3.72573 7.90322C4.44339 6.70576 5.78524 5.94589 7.26033 5.90164C7.89561 5.8895 8.5052 6.11686 9.03964 6.31619C9.44837 6.46863 9.81314 6.60468 10.1118 6.60468C10.3744 6.60468 10.729 6.474 11.1423 6.32171C11.7932 6.08181 12.5898 5.78827 13.4015 5.86738C14.6627 5.90402 15.8316 6.49076 16.5554 7.45058Z" fill="#1B1D22"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
res/themes/element/img/compound/fade-arc-light.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 6 KiB

15
res/themes/element/img/compound/linux.svg Normal file
View file

@ -0,0 +1,15 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_4244_203)">
<path d="M11.0054 17.2033C10.7192 17.3348 10.4074 17.405 10.0911 17.4096C9.62287 17.4048 9.1673 17.2609 8.78524 16.9971C8.65787 17.3144 8.45841 17.5995 8.20182 17.831C7.94524 18.0626 7.63819 18.2344 7.30371 18.3337C7.34816 18.3337 7.39049 18.3337 7.43494 18.3337H12.4213C12.1196 18.2476 11.8387 18.103 11.5954 17.9088C11.3522 17.7147 11.1515 17.4747 11.0054 17.2033Z" fill="black"/>
<path d="M5.59233 13.8942C5.61193 13.8889 5.63053 13.8805 5.64735 13.8694C5.6791 13.5971 5.71508 13.3352 5.7553 13.0856C5.74691 12.9449 5.77002 12.8041 5.82302 12.6731C6.11298 11.0868 6.51722 9.97294 7.07596 9.29637C7.09365 9.27503 7.1193 9.26142 7.14728 9.25851C7.17526 9.25561 7.20328 9.26367 7.22518 9.2809C7.24707 9.29813 7.26104 9.32313 7.26401 9.35041C7.26699 9.37768 7.25873 9.40498 7.24105 9.42631C7.18391 9.49645 7.12676 9.57277 7.07173 9.65322C6.64844 10.272 6.31404 11.2126 6.07277 12.477H6.09816C6.14375 12.4702 6.19014 12.4702 6.23573 12.477C6.40082 12.5121 6.65902 12.6462 7.05692 13.036C7.10771 10.7691 8.44108 8.94158 10.0919 8.94158C11.548 8.94158 12.765 10.371 13.0549 12.2729C13.1926 12.0053 13.4153 11.7882 13.6899 11.654C13.7577 11.6293 13.8293 11.6161 13.9016 11.6149C13.7518 10.9261 13.485 10.2666 13.1121 9.66353C13.0571 9.58308 13.002 9.50676 12.9449 9.43663C12.9357 9.42642 12.9287 9.41445 12.9244 9.40149C12.9201 9.38852 12.9186 9.37484 12.92 9.36128C12.9214 9.34774 12.9256 9.33461 12.9325 9.32273C12.9393 9.31085 12.9486 9.30047 12.9597 9.29224C12.9703 9.28351 12.9826 9.27695 12.9959 9.27294C13.0091 9.26893 13.0232 9.26756 13.0369 9.26891C13.0507 9.27025 13.0641 9.2743 13.0763 9.28078C13.0885 9.28727 13.0992 9.29608 13.1079 9.30668C13.5312 9.82648 13.8825 10.6041 14.145 11.6582C14.7101 11.8644 14.7248 12.7927 14.7375 13.5476C14.7375 13.9065 14.7375 14.2779 14.8243 14.3727C14.9111 14.4676 15.0952 14.447 15.3535 14.3397C15.3831 14.0118 15.3978 13.7209 15.4063 13.4755C15.4063 13.0856 15.4063 12.836 15.4063 12.836V12.574C15.4063 10.5113 12.6846 6.94487 12.6846 6.94487L12.3692 4.26334C12.3692 1.80251 10.0919 1.8252 10.0919 1.8252C10.0919 1.8252 7.80615 1.80251 7.80615 4.25302L7.50138 6.94487C7.50138 6.94487 4.77961 10.5092 4.77961 12.574V12.8319C4.77961 12.8319 4.76902 13.0814 4.77961 13.4713C4.77961 13.5311 4.77961 13.5951 4.77961 13.6611C5.1246 13.7889 5.47804 13.923 5.59233 13.8942ZM10.0813 5.21837C10.7163 5.27613 11.7279 5.42465 11.7745 5.72993C11.8084 5.96507 11.4168 6.41475 11.3385 6.50138C11.1755 6.68084 10.6083 7.26872 10.0962 7.26872C9.58397 7.26872 9.01676 6.68084 8.85591 6.50138C8.7776 6.41475 8.38606 5.96507 8.4178 5.72993C8.4559 5.41846 9.47815 5.27613 10.0813 5.21837Z" fill="black"/>
<path d="M10.0925 7.0621C10.3698 7.0621 10.7952 6.78776 11.174 6.3649C11.464 6.04518 11.5698 5.81003 11.5613 5.7564C11.5084 5.6512 10.8164 5.49237 10.0798 5.42224C9.36657 5.49237 8.67449 5.6512 8.62158 5.76052C8.69778 5.98983 8.83166 6.19689 9.01101 6.36284C9.39197 6.78776 9.81526 7.0621 10.0925 7.0621Z" fill="black"/>
<path d="M10.6623 15.9489C10.4189 13.7769 10.6432 13.3273 10.8337 13.1788C10.8804 13.1432 10.9358 13.1201 10.9945 13.1117C11.0531 13.1035 11.113 13.1102 11.1681 13.1313C11.3598 13.2237 11.5271 13.3577 11.657 13.5232C11.8962 13.7769 12.0634 13.9358 12.2179 13.8491C12.328 13.7852 12.4846 13.4366 12.6412 13.1169C12.7216 12.9456 12.8042 12.7621 12.8952 12.5868C12.6835 10.6457 11.5195 9.14819 10.0993 9.14819C8.53949 9.14819 7.27173 10.9531 7.27173 13.1705C7.27173 13.1973 7.27173 13.2241 7.27173 13.2509C7.52995 13.5149 7.83895 13.8698 8.21567 14.3338C8.36367 14.5155 8.4994 14.7064 8.62204 14.9052C8.79699 15.1841 8.909 15.4961 8.9506 15.8205C8.9922 16.1449 8.96245 16.4741 8.86331 16.7864C9.21862 17.0463 9.64882 17.1907 10.093 17.199C10.3777 17.1979 10.659 17.1382 10.9184 17.0236C10.862 16.9 10.8173 16.7716 10.7851 16.64C10.7302 16.4122 10.6892 16.1815 10.6623 15.9489Z" fill="black"/>
<path d="M8.04303 14.459C7.74673 14.0918 7.49487 13.8009 7.279 13.5658L7.17105 13.4503L7.061 13.3348C6.5721 12.8397 6.31389 12.7037 6.17843 12.681C6.15951 12.678 6.14023 12.678 6.12129 12.681C6.10076 12.6833 6.08122 12.6909 6.06454 12.7028C6.04786 12.7147 6.03461 12.7307 6.02605 12.7489C6.02565 12.7538 6.02565 12.7586 6.02605 12.7634C5.98416 12.8712 5.96753 12.9869 5.97738 13.1017C5.97738 13.1595 5.97738 13.2173 5.97738 13.2749C5.97738 13.3327 5.97738 13.341 5.97738 13.374C6.00594 13.5827 5.96198 13.7947 5.8525 13.9763C5.83155 13.9994 5.80732 14.0196 5.78055 14.0362L5.7361 14.0629C5.70773 14.0774 5.67795 14.0892 5.6472 14.098H5.62393C5.44826 14.1289 5.16254 14.0279 4.80063 13.8917L4.6948 13.8505C4.24188 13.6752 3.71276 13.473 3.32545 13.473C3.23797 13.4644 3.14967 13.4777 3.06893 13.5116C2.98819 13.5455 2.91767 13.599 2.86406 13.6669C2.58046 14.0794 3.2154 14.7271 3.72758 15.2511C4.04294 15.5749 4.29056 15.8286 4.31808 16.0184C4.36675 16.3691 3.99002 16.5031 3.65774 16.6228C3.48628 16.6669 3.32623 16.7457 3.18788 16.8538C3.13709 16.9116 3.1392 16.9508 3.14979 16.9797C3.19635 17.1384 3.57308 17.4871 5.56466 18.0502C5.78512 18.1124 6.00914 18.1621 6.23558 18.1987C6.64453 18.2591 7.06268 18.2065 7.44245 18.0468C7.82223 17.8871 8.14838 17.6267 8.38379 17.2952C8.47591 17.159 8.55187 17.0129 8.61025 16.86L8.65257 16.7589C8.65257 16.7239 8.67163 16.6847 8.68221 16.6496C8.75827 16.3728 8.77591 16.0838 8.73407 15.8002C8.69223 15.5165 8.59179 15.2441 8.43881 14.9994C8.31764 14.812 8.18549 14.6316 8.04303 14.459Z" fill="black"/>
<path d="M16.0589 14.3171C15.8816 14.3336 15.71 14.3863 15.5552 14.4717L15.3245 14.5687C15.0704 14.6635 14.8164 14.7089 14.6513 14.4903C14.6122 14.4329 14.5856 14.3683 14.573 14.3006C14.5437 14.1377 14.5282 13.9728 14.5265 13.8075C14.5265 13.723 14.5265 13.6342 14.5265 13.5393C14.5265 12.9391 14.5054 12.2171 14.2154 11.9346C14.1785 11.8974 14.1346 11.8673 14.0863 11.8459C14.0596 11.8345 14.0321 11.8255 14.0037 11.8191H13.972C13.9001 11.8109 13.8272 11.8208 13.7603 11.8479C13.5106 11.947 13.2926 12.2605 13.1022 12.6277L13.0112 12.8071C12.9772 12.8772 12.9455 12.9453 12.9138 13.0133C12.882 13.0814 12.8545 13.1392 12.827 13.2011C12.6408 13.6136 12.4947 13.9292 12.3254 14.0262C12.0122 14.2056 11.7391 13.9168 11.5 13.6611C11.3921 13.5236 11.2558 13.4098 11.1 13.3269C11.0796 13.3194 11.0582 13.3152 11.0365 13.3145C11.0108 13.3139 10.9859 13.3228 10.9666 13.3393C10.8354 13.4424 10.647 13.9148 10.8735 15.926C10.8978 16.148 10.936 16.3684 10.9878 16.586C11.0166 16.7008 11.0548 16.8133 11.1021 16.9222C11.1169 16.9532 11.1317 16.9841 11.1486 17.015C11.1656 17.0459 11.1762 17.0769 11.1931 17.1079C11.3664 17.4217 11.6184 17.6878 11.9256 17.8813C12.2328 18.0746 12.5853 18.1891 12.9501 18.214C13.3149 18.239 13.6804 18.1735 14.0122 18.0237C14.3441 17.8739 14.6317 17.6448 14.8482 17.3574C14.9843 17.1771 15.1093 16.989 15.2228 16.7943C16.2387 15.0307 16.2578 14.5254 16.1795 14.3809C16.1676 14.3603 16.15 14.3434 16.1286 14.332C16.1073 14.3208 16.0831 14.3155 16.0589 14.3171Z" fill="black"/>
</g>
<defs>
<clipPath id="clip0_4244_203">
<rect width="14.4446" height="16.5081" fill="white" transform="translate(2.63892 1.8252)"/>
</clipPath>
</defs>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 7 KiB

6
res/themes/element/img/compound/microsoft.svg Normal file
View file

@ -0,0 +1,6 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="10.4908" y="2" width="7.50926" height="7.50926" fill="#1B1D22"/>
<rect x="2" y="10.4904" width="7.50926" height="7.50926" fill="#1B1D22"/>
<rect x="2" y="2" width="7.50926" height="7.50926" fill="#1B1D22"/>
<rect x="10.4908" y="10.4904" width="7.50926" height="7.50926" fill="#1B1D22"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 399 B

BIN
res/themes/element/img/logos/element-app-logo.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 132 KiB

149
src/async-components/structures/CompatibilityView.tsx
View file

@ -1,149 +0,0 @@
/*
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.
*/
import React, { ReactNode } from "react";
import SdkConfig from "matrix-react-sdk/src/SdkConfig";
import { _t } from "../../languageHandler";
// directly import the style here as this layer does not support rethemedex at this time so no matrix-react-sdk
// PostCSS variables will be accessible.
import "../../../res/css/structures/ErrorView.pcss";
interface IProps {
onAccept(): void;
}
const CompatibilityView: React.FC<IProps> = ({ onAccept }) => {
const brand = SdkConfig.get("brand");
const mobileBuilds = SdkConfig.get("mobile_builds");
let ios: JSX.Element | undefined;
const iosCustomUrl = mobileBuilds?.ios;
if (iosCustomUrl !== null) {
// could be undefined or a string
ios = (
<>
<p>
<strong>iOS</strong> (iPhone or iPad)
</p>
<a href={iosCustomUrl} target="_blank" rel="noreferrer noopener" className="mx_ClearDecoration">
<img height="48" src="themes/element/img/download/apple.svg" alt="Apple App Store" />
</a>
</>
);
}
let android = [
<p className="mx_Spacer" key="header">
<strong>Android</strong>
</p>,
];
const andCustomUrl = mobileBuilds?.android;
const fdroidCustomUrl = mobileBuilds?.fdroid;
if (andCustomUrl !== null) {
// undefined or string
android.push(
<a
href={andCustomUrl}
target="_blank"
rel="noreferrer noopener"
className="mx_ClearDecoration"
key="android"
>
<img height="48" src="themes/element/img/download/google.svg" alt="Google Play Store" />
</a>,
);
}
if (fdroidCustomUrl !== null) {
// undefined or string
android.push(
<a
href={fdroidCustomUrl}
target="_blank"
rel="noreferrer noopener"
className="mx_ClearDecoration"
key="fdroid"
>
<img height="48" src="themes/element/img/download/fdroid.svg" alt="F-Droid" />
</a>,
);
}
if (android.length === 1) {
// just a header, meaning no links
android = [];
}
let mobileHeader: ReactNode = <h2 id="step2_heading">{_t("use_brand_on_mobile", { brand })}</h2>;
if (!android.length && !ios) {
mobileHeader = null;
}
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/element/img/logos/element-logo.svg" alt="Element" />
</span>
<h1>{_t("incompatible_browser|title")}</h1>
</div>
<div className="mx_HomePage_col">
<div className="mx_HomePage_row">
<div>
<h2 id="step1_heading">{_t("incompatible_browser|summary", { brand })}</h2>
<p>{_t("incompatible_browser|features", { brand })}</p>
<p>
{_t(
"incompatible_browser|browser_links",
{},
{
chromeLink: (sub) => <a href="https://www.google.com/chrome">{sub}</a>,
firefoxLink: (sub) => <a href="https://firefox.com">{sub}</a>,
safariLink: (sub) => <a href="https://apple.com/safari">{sub}</a>,
},
)}
</p>
<p>{_t("incompatible_browser|feature_warning")}</p>
<button onClick={onAccept}>{_t("incompatible_browser|continue_warning")}</button>
</div>
</div>
</div>
<div className="mx_HomePage_col">
<div className="mx_HomePage_row">
<div>
{mobileHeader}
{ios}
{android}
</div>
</div>
</div>
<div className="mx_HomePage_row mx_Center mx_Spacer">
<p className="mx_Spacer">
<a href="https://element.io" target="_blank" className="mx_FooterLink">
{_t("go_to_element_io")}
</a>
</p>
</div>
</div>
</div>
);
};
export default CompatibilityView;

205
src/async-components/structures/ErrorView.tsx
View file

@ -14,9 +14,16 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import * as React from "react";
import React, { ReactNode } from "react";
import { Text, Heading, Button, Separator } from "@vector-im/compound-web";
import SdkConfig from "matrix-react-sdk/src/SdkConfig";
import { Flex } from "matrix-react-sdk/src/components/utils/Flex";
import PopOutIcon from "@vector-im/compound-design-tokens/assets/web/icons/pop-out";
import { _t } from "../../languageHandler";
import { Icon as AppleIcon } from "../../../res/themes/element/img/compound/apple.svg";
import { Icon as MicrosoftIcon } from "../../../res/themes/element/img/compound/microsoft.svg";
import { Icon as LinuxIcon } from "../../../res/themes/element/img/compound/linux.svg";
// directly import the style here as this layer does not support rethemedex at this time so no matrix-react-sdk
// PostCSS variables will be accessible.
@ -26,36 +33,184 @@ interface IProps {
// both of these should already be internationalised
title: string;
messages?: string[];
footer?: ReactNode;
}
const ErrorView: React.FC<IProps> = ({ title, messages }) => {
export const ErrorView: React.FC<IProps> = ({ title, messages, footer, children }) => {
return (
<div className="mx_ErrorView">
<div className="mx_ErrorView cpd-theme-light">
<img
className="mx_ErrorView_logo"
height="160"
src="themes/element/img/logos/element-app-logo.png"
alt="Element"
/>
<div className="mx_ErrorView_container">
<div className="mx_HomePage_header">
<span className="mx_HomePage_logo">
<img height="42" src="themes/element/img/logos/element-logo.svg" alt="Element" />
</span>
<h1>{_t("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://element.io" target="_blank" className="mx_FooterLink">
{_t("go_to_element_io")}
</a>
</p>
</div>
<Heading size="md" weight="semibold">
{title}
</Heading>
{messages?.map((message) => (
<Text key={message} size="lg">
{message}
</Text>
))}
{children}
</div>
{footer}
</div>
);
};
export default ErrorView;
const MobileAppLinks: React.FC<{
appleAppStoreUrl?: string;
googlePlayUrl?: string;
fdroidUrl?: string;
}> = ({ appleAppStoreUrl, googlePlayUrl, fdroidUrl }) => (
<Flex gap="var(--cpd-space-6x)">
{appleAppStoreUrl && (
<a href={appleAppStoreUrl} target="_blank" rel="noreferrer noopener">
<img height="64" src="themes/element/img/download/apple.svg" alt="Apple App Store" />
</a>
)}
{googlePlayUrl && (
<a href={googlePlayUrl} target="_blank" rel="noreferrer noopener" key="android">
<img height="64" src="themes/element/img/download/google.svg" alt="Google Play Store" />
</a>
)}
{fdroidUrl && (
<a href={fdroidUrl} target="_blank" rel="noreferrer noopener" key="fdroid">
<img height="64" src="themes/element/img/download/fdroid.svg" alt="F-Droid" />
</a>
)}
</Flex>
);
const DesktopAppLinks: React.FC<{
macOsUrl?: string;
win64Url?: string;
win32Url?: string;
linuxUrl?: string;
}> = ({ macOsUrl, win64Url, win32Url, linuxUrl }) => {
return (
<Flex gap="var(--cpd-space-4x)">
{macOsUrl && (
<Button as="a" href={macOsUrl} kind="secondary" Icon={AppleIcon}>
{_t("incompatible_browser|macos")}
</Button>
)}
{win64Url && (
<Button as="a" href={win64Url} kind="secondary" Icon={MicrosoftIcon}>
{_t("incompatible_browser|windows", { bits: "64" })}
</Button>
)}
{win32Url && (
<Button as="a" href={win32Url} kind="secondary" Icon={MicrosoftIcon}>
{_t("incompatible_browser|windows", { bits: "32" })}
</Button>
)}
{linuxUrl && (
<Button as="a" href={linuxUrl} kind="secondary" Icon={LinuxIcon}>
{_t("incompatible_browser|linux")}
</Button>
)}
</Flex>
);
};
const linkFactory =
(link: string) =>
(text: string): JSX.Element => (
<a href={link} target="_blank" rel="noreferrer noopener">
{text}
</a>
);
export const UnsupportedBrowserView: React.FC<{
onAccept?(): void;
}> = ({ onAccept }) => {
const config = SdkConfig.get();
const brand = config.brand ?? "Element";
const hasDesktopBuilds =
config.desktop_builds?.available &&
(config.desktop_builds?.url_macos ||
config.desktop_builds?.url_win64 ||
config.desktop_builds?.url_win32 ||
config.desktop_builds?.url_linux);
const hasMobileBuilds = Boolean(
config.mobile_builds?.ios || config.mobile_builds?.android || config.mobile_builds?.fdroid,
);
return (
<ErrorView
title={_t("incompatible_browser|title", { brand })}
messages={[
_t("incompatible_browser|description", {
brand,
detail: onAccept
? _t("incompatible_browser|detail_can_continue")
: _t("incompatible_browser|detail_no_continue"),
}),
]}
footer={
<>
{/* We render the apps in the footer as they are wider than the 520px container */}
{(hasDesktopBuilds || hasMobileBuilds) && <Separator />}
{hasDesktopBuilds && (
<>
<Heading as="h2" size="sm" weight="semibold">
{_t("incompatible_browser|use_desktop_heading", { brand })}
</Heading>
<DesktopAppLinks
macOsUrl={config.desktop_builds?.url_macos}
win64Url={config.desktop_builds?.url_win64}
win32Url={config.desktop_builds?.url_win32}
linuxUrl={config.desktop_builds?.url_linux}
/>
</>
)}
{hasMobileBuilds && (
<>
<Heading as="h2" size="sm" weight="semibold">
{hasDesktopBuilds
? _t("incompatible_browser|use_mobile_heading_after_desktop")
: _t("incompatible_browser|use_mobile_heading", { brand })}
</Heading>
<MobileAppLinks
appleAppStoreUrl={config.mobile_builds?.ios ?? undefined}
googlePlayUrl={config.mobile_builds?.android ?? undefined}
fdroidUrl={config.mobile_builds?.fdroid ?? undefined}
/>
</>
)}
</>
}
>
<Text size="lg">
{_t(
"incompatible_browser|supported_browsers",
{},
{
Chrome: linkFactory("https://google.com/chrome"),
Firefox: linkFactory("https://firefox.com"),
Edge: linkFactory("https://microsoft.com/edge"),
Safari: linkFactory("https://apple.com/safari"),
},
)}
</Text>
<Flex gap="var(--cpd-space-4x)" className="mx_ErrorView_buttons">
<Button Icon={PopOutIcon} kind="secondary" size="sm">
{_t("incompatible_browser|learn_more")}
</Button>
{onAccept && (
<Button kind="primary" size="sm" onClick={onAccept}>
{_t("incompatible_browser|continue")}
</Button>
)}
</Flex>
</ErrorView>
);
};

22
src/i18n/strings/en_EN.json
View file

@ -21,20 +21,24 @@
"invalid_json_generic": "Invalid JSON",
"misconfigured": "Your Element is misconfigured"
},
"failed_to_start": "Failed to start",
"go_to_element_io": "Go to element.io",
"incompatible_browser": {
"browser_links": "Please install <chromeLink>Chrome</chromeLink>, <firefoxLink>Firefox</firefoxLink>, or <safariLink>Safari</safariLink> for the best experience.",
"continue_warning": "I understand the risks and wish to continue",
"feature_warning": "You can continue using your current browser, but some or all features may not work and the look and feel of the application may be incorrect.",
"features": "%(brand)s uses advanced browser features which aren't supported by your current browser.",
"summary": "Your browser can't run %(brand)s",
"title": "Unsupported browser"
"continue": "Continue anyway",
"description": "%(brand)s uses some browser features which are not available in your current browser. %(detail)s",
"detail_can_continue": "If you continue, some features may stop working and there is a risk that you may lose data in the future.",
"detail_no_continue": "Try updating this browser if you're not using the latest version and try again.",
"learn_more": "Learn more",
"linux": "Linux",
"macos": "Mac",
"supported_browsers": "For the best experience, use <Chrome>Chrome</Chrome>, <Firefox>Firefox</Firefox>, <Edge>Edge</Edge>, or <Safari>Safari</Safari>.",
"title": "%(brand)s does not support this browser",
"use_desktop_heading": "Use %(brand)s Desktop instead",
"use_mobile_heading": "Use %(brand)s on mobile instead",
"use_mobile_heading_after_desktop": "Or use our mobile app",
"windows": "Windows (%(bits)s-bit)"
},
"powered_by_matrix": "Powered by Matrix",
"powered_by_matrix_with_logo": "Decentralised, encrypted chat &amp; collaboration powered by $matrixLogo",
"unknown_device": "Unknown device",
"use_brand_on_mobile": "Use %(brand)s on mobile",
"web_default_device_name": "%(appName)s: %(browserName)s on %(osName)s",
"welcome_to_element": "Welcome to Element"
}

22
src/vector/init.tsx
View file

@ -109,12 +109,10 @@ export async function loadApp(fragParams: {}): Promise<void> {
}
export async function showError(title: string, messages?: string[]): Promise<void> {
const ErrorView = (
await import(
/* webpackChunkName: "error-view" */
"../async-components/structures/ErrorView"
)
).default;
const { ErrorView } = await import(
/* webpackChunkName: "error-view" */
"../async-components/structures/ErrorView"
);
window.matrixChat = ReactDOM.render(
<ErrorView title={title} messages={messages} />,
document.getElementById("matrixchat"),
@ -122,14 +120,12 @@ export async function showError(title: string, messages?: string[]): Promise<voi
}
export async function showIncompatibleBrowser(onAccept: () => void): Promise<void> {
const CompatibilityView = (
await import(
/* webpackChunkName: "compatibility-view" */
"../async-components/structures/CompatibilityView"
)
).default;
const { UnsupportedBrowserView } = await import(
/* webpackChunkName: "error-view" */
"../async-components/structures/ErrorView"
);
window.matrixChat = ReactDOM.render(
<CompatibilityView onAccept={onAccept} />,
<UnsupportedBrowserView onAccept={onAccept} />,
document.getElementById("matrixchat"),
);
}

15
test/unit-tests/async-components/structures/ErrorView-test.tsx
View file

@ -16,8 +16,9 @@ limitations under the License.
import * as React from "react";
import { render } from "@testing-library/react";
import SdkConfig from "matrix-react-sdk/src/SdkConfig";
import ErrorView from "../../../../src/async-components/structures/ErrorView";
import { ErrorView, UnsupportedBrowserView } from "../../../../src/async-components/structures/ErrorView";
import { setupLanguageMock } from "../../../setup/setupLanguage";
describe("<ErrorView />", () => {
@ -30,3 +31,15 @@ describe("<ErrorView />", () => {
expect(asFragment()).toMatchSnapshot();
});
});
describe("<UnsupportedBrowserView />", () => {
beforeEach(() => {
setupLanguageMock();
SdkConfig.put({});
});
it("should match snapshot", () => {
const { asFragment } = render(<UnsupportedBrowserView />);
expect(asFragment()).toMatchSnapshot();
});
});

285
test/unit-tests/async-components/structures/__snapshots__/ErrorView-test.tsx.snap
View file

@ -3,63 +3,248 @@
exports[`<ErrorView /> should match snapshot 1`] = `
<DocumentFragment>
<div
class="mx_ErrorView"
class="mx_ErrorView cpd-theme-light"
>
<img
alt="Element"
class="mx_ErrorView_logo"
height="160"
src="themes/element/img/logos/element-app-logo.png"
/>
<div
class="mx_ErrorView_container"
>
<div
class="mx_HomePage_header"
<h1
class="_typography_yh5dq_162 _font-heading-md-semibold_yh5dq_121"
>
<span
class="mx_HomePage_logo"
>
<img
alt="Element"
height="42"
src="themes/element/img/logos/element-logo.svg"
/>
</span>
<h1>
Failed to start
</h1>
</div>
<div
class="mx_HomePage_col"
TITLE
</h1>
<p
class="_typography_yh5dq_162 _font-body-lg-regular_yh5dq_78"
>
<div
class="mx_HomePage_row"
>
<div>
<h2
id="step1_heading"
>
TITLE
</h2>
<p>
MSG1
</p>
<p>
MSG2
</p>
</div>
</div>
</div>
<div
class="mx_HomePage_row mx_Center mx_Spacer"
MSG1
</p>
<p
class="_typography_yh5dq_162 _font-body-lg-regular_yh5dq_78"
>
<p
class="mx_Spacer"
>
<a
class="mx_FooterLink"
href="https://element.io"
target="_blank"
>
Go to element.io
</a>
</p>
</div>
MSG2
</p>
</div>
</div>
</DocumentFragment>
`;
exports[`<UnsupportedBrowserView /> should match snapshot 1`] = `
<DocumentFragment>
<div
class="mx_ErrorView cpd-theme-light"
>
<img
alt="Element"
class="mx_ErrorView_logo"
height="160"
src="themes/element/img/logos/element-app-logo.png"
/>
<div
class="mx_ErrorView_container"
>
<h1
class="_typography_yh5dq_162 _font-heading-md-semibold_yh5dq_121"
>
Element does not support this browser
</h1>
<p
class="_typography_yh5dq_162 _font-body-lg-regular_yh5dq_78"
>
Element uses some browser features which are not available in your current browser. Try updating this browser if you're not using the latest version and try again.
</p>
<p
class="_typography_yh5dq_162 _font-body-lg-regular_yh5dq_78"
>
<span>
For the best experience, use
<a
href="https://google.com/chrome"
rel="noreferrer noopener"
target="_blank"
>
Chrome
</a>
,
<a
href="https://firefox.com"
rel="noreferrer noopener"
target="_blank"
>
Firefox
</a>
,
<a
href="https://microsoft.com/edge"
rel="noreferrer noopener"
target="_blank"
>
Edge
</a>
, or
<a
href="https://apple.com/safari"
rel="noreferrer noopener"
target="_blank"
>
Safari
</a>
.
</span>
</p>
<div
class="mx_Flex mx_ErrorView_buttons"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-4x);"
>
<button
class="_button_zt6rp_17 _has-icon_zt6rp_61"
data-kind="secondary"
data-size="sm"
role="button"
tabindex="0"
>
<svg
aria-hidden="true"
fill="currentColor"
height="20"
viewBox="0 0 24 24"
width="20"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M5 3h6a1 1 0 1 1 0 2H5v14h14v-6a1 1 0 1 1 2 0v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2Z"
/>
<path
d="M15 3h5a1 1 0 0 1 1 1v5a1 1 0 1 1-2 0V6.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L17.586 5H15a1 1 0 1 1 0-2Z"
/>
</svg>
Learn more
</button>
</div>
</div>
<div
class="_separator_144s5_17"
data-kind="primary"
data-orientation="horizontal"
role="separator"
/>
<h2
class="_typography_yh5dq_162 _font-heading-sm-semibold_yh5dq_102"
>
Use Element Desktop instead
</h2>
<div
class="mx_Flex"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-4x);"
>
<a
class="_button_zt6rp_17 _has-icon_zt6rp_61"
data-kind="secondary"
data-size="lg"
href="https://packages.element.io/desktop/install/macos/Element.dmg"
role="link"
tabindex="0"
>
<div
aria-hidden="true"
height="20"
width="20"
/>
Mac
</a>
<a
class="_button_zt6rp_17 _has-icon_zt6rp_61"
data-kind="secondary"
data-size="lg"
href="https://packages.element.io/desktop/install/win32/x64/Element%20Setup.exe"
role="link"
tabindex="0"
>
<div
aria-hidden="true"
height="20"
width="20"
/>
Windows (64-bit)
</a>
<a
class="_button_zt6rp_17 _has-icon_zt6rp_61"
data-kind="secondary"
data-size="lg"
href="https://packages.element.io/desktop/install/win32/ia32/Element%20Setup.exe"
role="link"
tabindex="0"
>
<div
aria-hidden="true"
height="20"
width="20"
/>
Windows (32-bit)
</a>
<a
class="_button_zt6rp_17 _has-icon_zt6rp_61"
data-kind="secondary"
data-size="lg"
href="https://element.io/download#linux"
role="link"
tabindex="0"
>
<div
aria-hidden="true"
height="20"
width="20"
/>
Linux
</a>
</div>
<h2
class="_typography_yh5dq_162 _font-heading-sm-semibold_yh5dq_102"
>
Or use our mobile app
</h2>
<div
class="mx_Flex"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-6x);"
>
<a
href="https://apps.apple.com/app/vector/id1083446067"
rel="noreferrer noopener"
target="_blank"
>
<img
alt="Apple App Store"
height="64"
src="themes/element/img/download/apple.svg"
/>
</a>
<a
href="https://play.google.com/store/apps/details?id=im.vector.app"
rel="noreferrer noopener"
target="_blank"
>
<img
alt="Google Play Store"
height="64"
src="themes/element/img/download/google.svg"
/>
</a>
<a
href="https://f-droid.org/repository/browse/?fdid=im.vector.app"
rel="noreferrer noopener"
target="_blank"
>
<img
alt="F-Droid"
height="64"
src="themes/element/img/download/fdroid.svg"
/>
</a>
</div>
</div>
</DocumentFragment>

1
tsconfig.json
View file

@ -23,6 +23,7 @@
"./node_modules/matrix-react-sdk/src/@types/png-chunks-extract.d.ts",
"./node_modules/matrix-react-sdk/src/@types/sanitize-html.d.ts",
"./node_modules/matrix-react-sdk/src/@types/matrix-js-sdk.d.ts",
"./node_modules/matrix-react-sdk/src/@types/electron-to-chromium.d.ts",
"./src/**/*.ts",
"./src/**/*.tsx",
"./test/**/*.ts",

182
yarn.lock
View file

@ -1564,22 +1564,27 @@
"@floating-ui/core" "^1.6.0"
"@floating-ui/utils" "^0.2.4"
"@floating-ui/react-dom@^2.0.0", "@floating-ui/react-dom@^2.0.8", "@floating-ui/react-dom@^2.1.1":
"@floating-ui/react-dom@^2.0.0":
version "2.1.1"
resolved "https://registry.yarnpkg.com/@floating-ui/react-dom/-/react-dom-2.1.1.tgz#cca58b6b04fc92b4c39288252e285e0422291fb0"
integrity sha512-4h84MJt3CHrtG18mGsXuLCHMrug49d7DFkU0RMIyshRveBeyV2hmV/pDaF2Uxtu8kgq5r46llp5E5FQiR0K2Yg==
dependencies:
"@floating-ui/dom" "^1.0.0"
"@floating-ui/react@^0.26.9":
version "0.26.19"
resolved "https://registry.yarnpkg.com/@floating-ui/react/-/react-0.26.19.tgz#e3c713bec8a7264caa6f8195e0865f9210f483a1"
integrity sha512-Jk6zITdjjIvjO/VdQFvpRaD3qPwOHH6AoDHxjhpy+oK4KFgaSP871HYWUAPdnLmx1gQ+w/pB312co3tVml+BXA==
"@floating-ui/react@0.26.11", "@floating-ui/react@^0.26.9":
version "0.26.11"
resolved "https://registry.yarnpkg.com/@floating-ui/react/-/react-0.26.11.tgz#226d3fec890de439443b62f3138ef7de052b0998"
integrity sha512-fo01Cu+jzLDVG/AYAV2OtV6flhXvxP5rDaR1Fk8WWhtsFqwk478Dr2HGtB8s0HqQCsFWVbdHYpPjMiQiR/A9VA==
dependencies:
"@floating-ui/react-dom" "^2.1.1"
"@floating-ui/utils" "^0.2.4"
"@floating-ui/react-dom" "^2.0.0"
"@floating-ui/utils" "^0.2.0"
tabbable "^6.0.0"
"@floating-ui/utils@^0.2.0":
version "0.2.5"
resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.2.5.tgz#105c37d9d9620ce69b7f692a20c821bf1ad2cbf9"
integrity sha512-sTcG+QZ6fdEUObICavU+aB3Mp8HY4n14wYHdxK4fXjPmv3PXZZeY5RaguJmGyeH/CJQhX3fqKUtS4qc1LoHwhQ==
"@floating-ui/utils@^0.2.4":
version "0.2.4"
resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.2.4.tgz#1d459cee5031893a08a0e064c406ad2130cced7c"
@ -2216,15 +2221,7 @@
"@radix-ui/react-label" "2.0.2"
"@radix-ui/react-primitive" "1.0.3"
"@radix-ui/react-id@1.0.1":
version "1.0.1"
resolved "https://registry.yarnpkg.com/@radix-ui/react-id/-/react-id-1.0.1.tgz#73cdc181f650e4df24f0b6a5b7aa426b912c88c0"
integrity sha512-tI7sT/kqYp8p96yGWY1OAnLHrqDgzHefRBKQ2YAkBS5ja7QLcZ9Z/uY7bEjPUatf8RomoXM8/1sMj1IJaE5UzQ==
dependencies:
"@babel/runtime" "^7.13.10"
"@radix-ui/react-use-layout-effect" "1.0.1"
"@radix-ui/react-id@1.1.0":
"@radix-ui/react-id@1.0.1", "@radix-ui/react-id@1.1.0":
version "1.1.0"
resolved "https://registry.yarnpkg.com/@radix-ui/react-id/-/react-id-1.1.0.tgz#de47339656594ad722eb87f94a6b25f9cffae0ed"
integrity sha512-EJUrI8yYh7WOjNOqpoJaf1jlFIH2LvtgAl+YcFqNCa+4hj64ZXmPkAKOFs/ukjz3byN6bdb/AVUqHkI8/uWWMA==
@ -2310,6 +2307,14 @@
dependencies:
"@radix-ui/react-slot" "1.1.0"
"@radix-ui/react-progress@^1.0.3":
version "1.1.0"
resolved "https://registry.yarnpkg.com/@radix-ui/react-progress/-/react-progress-1.1.0.tgz#28c267885ec154fc557ec7a66cb462787312f7e2"
integrity sha512-aSzvnYpP725CROcxAOEBVZZSIQVQdHgBr2QQFKySsaD14u8dNT0batuXI+AAGDdAHfXH8rbnHmjYFqVJ21KkRg==
dependencies:
"@radix-ui/react-context" "1.1.0"
"@radix-ui/react-primitive" "2.0.0"
"@radix-ui/react-roving-focus@1.1.0":
version "1.1.0"
resolved "https://registry.yarnpkg.com/@radix-ui/react-roving-focus/-/react-roving-focus-1.1.0.tgz#b30c59daf7e714c748805bfe11c76f96caaac35e"
@ -2384,13 +2389,6 @@
dependencies:
"@radix-ui/react-use-callback-ref" "1.1.0"
"@radix-ui/react-use-layout-effect@1.0.1":
version "1.0.1"
resolved "https://registry.yarnpkg.com/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.0.1.tgz#be8c7bc809b0c8934acf6657b577daf948a75399"
integrity sha512-v/5RegiJWYdoCvMnITBkNNx6bCj20fiaJnWtRkU18yITptraXjffz5Qbn05uOiQnOvi+dbkznkoaMltz1GnszQ==
dependencies:
"@babel/runtime" "^7.13.10"
"@radix-ui/react-use-layout-effect@1.1.0":
version "1.1.0"
resolved "https://registry.yarnpkg.com/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.0.tgz#3c2c8ce04827b26a39e442ff4888d9212268bd27"
@ -3114,11 +3112,6 @@
resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.12.tgz#12bb1e2be27293c1406acb6af1c3f3a1481d98c6"
integrity sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q==
"@types/q@^1.5.1":
version "1.5.8"
resolved "https://registry.yarnpkg.com/@types/q/-/q-1.5.8.tgz#95f6c6a08f2ad868ba230ead1d2d7f7be3db3837"
integrity sha512-hroOstUScF6zhIi+5+x0dzqrHA1EJi+Irri6b1fxolMTqqHIV/Cg77EtnQcZqZCu8hR3mX2BzIxN4/GzI68Kfw==
"@types/qrcode@^1.5.5":
version "1.5.5"
resolved "https://registry.yarnpkg.com/@types/qrcode/-/qrcode-1.5.5.tgz#993ff7c6b584277eee7aac0a20861eab682f9dac"
@ -3369,27 +3362,26 @@
resolved "https://registry.yarnpkg.com/@ungap/structured-clone/-/structured-clone-1.2.0.tgz#756641adb587851b5ccb3e095daf27ae581c8406"
integrity sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==
"@vector-im/compound-design-tokens@^1.2.0":
version "1.5.0"
resolved "https://registry.yarnpkg.com/@vector-im/compound-design-tokens/-/compound-design-tokens-1.5.0.tgz#6c8ed8eb0ddbb1fd8f8e6025d66b856dee8b5677"
integrity sha512-G1EvLJ2lyWjd2esKqlJjQl7KXrCfQNKZUdtW68y2aQi8EvVMOpVvCNXGf0HwRmdXGGy2FhBIOufVTgx39I7juw==
dependencies:
svg2vectordrawable "^2.9.1"
"@vector-im/compound-design-tokens@1.7.0", "@vector-im/compound-design-tokens@^1.2.0", "@vector-im/compound-design-tokens@^1.6.1":
version "1.7.0"
resolved "https://registry.yarnpkg.com/@vector-im/compound-design-tokens/-/compound-design-tokens-1.7.0.tgz#508b41cd8464c72d73725030f5c84b627a41167c"
integrity sha512-cXb2QiwEwtEZiC+7IRvYIf7tBD1KoFcL4YsrFlWapD689Wi3qrmmhFRLFoijHUM3d8Ni6B+7p5SdACRrWb6xBQ==
"@vector-im/compound-web@^4.6.0":
version "4.10.0"
resolved "https://registry.yarnpkg.com/@vector-im/compound-web/-/compound-web-4.10.0.tgz#5403c9933af91d432b5fb5f92a305acadc810893"
integrity sha512-SPeol6FK/h/q8ChHyuCCncUIVoIGNdPODBf7UqvaohRjt8EzyAAHKP89l1YhWKqEaOtG67+28IXoFvdS46tbUA==
"@vector-im/compound-web@5.5.0", "@vector-im/compound-web@^4.6.0", "@vector-im/compound-web@^5.5.0":
version "5.5.0"
resolved "https://registry.yarnpkg.com/@vector-im/compound-web/-/compound-web-5.5.0.tgz#c646cd8c59aa7e5df527d843ad3b7b7c064d5224"
integrity sha512-Z+QSXOkJE4/LYk9j9FMVE2m5noz3gEA4yRxetjSJyXB5mDpyIJ1OYAweuZJXS3foxqygVDeB82YgTw1JgDtUvg==
dependencies:
"@floating-ui/react" "^0.26.9"
"@floating-ui/react-dom" "^2.0.8"
"@radix-ui/react-context-menu" "^2.1.5"
"@radix-ui/react-dropdown-menu" "^2.0.6"
"@radix-ui/react-form" "^0.0.3"
"@radix-ui/react-progress" "^1.0.3"
"@radix-ui/react-separator" "^1.0.3"
"@radix-ui/react-slot" "^1.0.2"
"@radix-ui/react-tooltip" "^1.0.6"
classnames "^2.3.2"
ts-xor "^1.3.0"
vaul "^0.7.0"
"@webassemblyjs/ast@1.12.1", "@webassemblyjs/ast@^1.12.1":
@ -3560,11 +3552,6 @@ abab@^2.0.6:
resolved "https://registry.yarnpkg.com/abab/-/abab-2.0.6.tgz#41b80f2c871d19686216b82309231cfd3cb3d291"
integrity sha512-j2afSsaIENvHZN2B8GOpF566vZ5WVk5opAiMTvWgaQT8DkbOqsTfvNAvHoRGU2zzP8cPoqys+xHTRDWW8L+/BA==
abs-svg-path@^0.1.1:
version "0.1.1"
resolved "https://registry.yarnpkg.com/abs-svg-path/-/abs-svg-path-0.1.1.tgz#df601c8e8d2ba10d4a76d625e236a9a39c2723bf"
integrity sha512-d8XPSGjfyzlXC3Xx891DJRyZfqk5JU0BJrDQcsWomFIV1/BIzPW5HDH5iDdWpqWaav0YVIEzT1RHTwWr0FFshA==
accepts@~1.3.4, accepts@~1.3.5, accepts@~1.3.8:
version "1.3.8"
resolved "https://registry.yarnpkg.com/accepts/-/accepts-1.3.8.tgz#0bf0be125b67014adcb0b0921e62db7bffe16b2e"
@ -4220,7 +4207,7 @@ chalk@5.2.0:
resolved "https://registry.yarnpkg.com/chalk/-/chalk-5.2.0.tgz#249623b7d66869c673699fb66d65723e54dfcfb3"
integrity sha512-ree3Gqw/nazQAPuJJEy+avdl7QfZMcUvmHIKgEZkGL+xOBzRvup5Hxo6LHuMceSxOabuJLJm5Yp/92R9eMmMvA==
chalk@^2.4.1, chalk@^2.4.2:
chalk@^2.4.2:
version "2.4.2"
resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
integrity sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==
@ -4328,15 +4315,6 @@ co@^4.6.0:
resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184"
integrity sha512-QVb0dM5HvG+uaxitm8wONl7jltx8dqhfU33DcqtOZcLSVIKSDDLDi7+0LbAKiyI8hD9u42m2YxXSkMGWThaecQ==
coa@^2.0.2:
version "2.0.2"
resolved "https://registry.yarnpkg.com/coa/-/coa-2.0.2.tgz#43f6c21151b4ef2bf57187db0d73de229e3e7ec3"
integrity sha512-q5/jG+YQnSy4nRTV4F7lPepBJZ8qBNJJDBuJdoejDyLXgmL7IEo+Le2JDZudFTFt7mrCqIRaSjws4ygRCTCAXA==
dependencies:
"@types/q" "^1.5.1"
chalk "^2.4.1"
q "^1.1.2"
code-block-writer@^11.0.0:
version "11.0.3"
resolved "https://registry.yarnpkg.com/code-block-writer/-/code-block-writer-11.0.3.tgz#9eec2993edfb79bfae845fbc093758c0a0b73b76"
@ -4699,14 +4677,6 @@ css-select@^5.1.0:
domutils "^3.0.1"
nth-check "^2.0.1"
css-tree@^1.1.2, css-tree@^1.1.3:
version "1.1.3"
resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-1.1.3.tgz#eb4870fb6fd7707327ec95c2ff2ab09b5e8db91d"
integrity sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==
dependencies:
mdn-data "2.0.14"
source-map "^0.6.1"
css-tree@^2.3.1:
version "2.3.1"
resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-2.3.1.tgz#10264ce1e5442e8572fc82fbe490644ff54b5c20"
@ -4797,13 +4767,6 @@ cssnano@^7.0.1:
cssnano-preset-default "^7.0.4"
lilconfig "^3.1.2"
csso@^4.2.0:
version "4.2.0"
resolved "https://registry.yarnpkg.com/csso/-/csso-4.2.0.tgz#ea3a561346e8dc9f546d6febedd50187cf389529"
integrity sha512-wvlcdIbf6pwKEk7vHj8/Bkc0B4ylXZruLvOgs9doS5eOsOpuodOV2zJChSpkp+pRpYQLQMeF04nr3Z68Sta9jA==
dependencies:
css-tree "^1.1.2"
csso@^5.0.5:
version "5.0.5"
resolved "https://registry.yarnpkg.com/csso/-/csso-5.0.5.tgz#f9b7fe6cc6ac0b7d90781bb16d5e9874303e2ca6"
@ -6941,11 +6904,6 @@ is-subset@^0.1.1:
resolved "https://registry.yarnpkg.com/is-subset/-/is-subset-0.1.1.tgz#8a59117d932de1de00f245fcdd39ce43f1e939a6"
integrity sha512-6Ybun0IkarhmEqxXCNw/C0bna6Zb/TkfUX9UbwJtK6ObwAVCxmAP308WWTHviM/zAqXk05cdhYsUsZeGQh99iw==
is-svg-path@^1.0.1:
version "1.0.2"
resolved "https://registry.yarnpkg.com/is-svg-path/-/is-svg-path-1.0.2.tgz#77ab590c12b3d20348e5c7a13d0040c87784dda0"
integrity sha512-Lj4vePmqpPR1ZnRctHv8ltSh1OrSxHkhUkd7wi+VQdcdP15/KvQFyk7LhNuM7ZW0EVbJz8kZLVmL9quLrfq4Kg==
is-symbol@^1.0.2, is-symbol@^1.0.3:
version "1.0.4"
resolved "https://registry.yarnpkg.com/is-symbol/-/is-symbol-1.0.4.tgz#a6dac93b635b063ca6872236de88910a57af139c"
@ -8125,11 +8083,6 @@ matrix-widget-api@^1.3.1, matrix-widget-api@^1.5.0, matrix-widget-api@^1.6.0:
"@types/events" "^3.0.0"
events "^3.2.0"
mdn-data@2.0.14:
version "2.0.14"
resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.14.tgz#7113fc4281917d63ce29b43446f701e68c25ba50"
integrity sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==
mdn-data@2.0.28:
version "2.0.28"
resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.28.tgz#5ec48e7bef120654539069e1ae4ddc81ca490eba"
@ -8426,13 +8379,6 @@ normalize-range@^0.1.2:
resolved "https://registry.yarnpkg.com/normalize-range/-/normalize-range-0.1.2.tgz#2d10c06bdfd312ea9777695a4d28439456b75942"
integrity sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==
normalize-svg-path@^1.0.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/normalize-svg-path/-/normalize-svg-path-1.1.0.tgz#0e614eca23c39f0cffe821d6be6cd17e569a766c"
integrity sha512-r9KHKG2UUeB5LoTouwDzBy2VxXlHsiM6fyLQvnJa0S5hrhzqElH/CH7TUGhT1fVvIYBIKf3OpY4YJ4CK+iaqHg==
dependencies:
svg-arc-to-cubic-bezier "^3.0.0"
npm-run-path@^4.0.1:
version "4.0.1"
resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-4.0.1.tgz#b7ecd1e5ed53da8e37a55e1c2269e0b97ed748ea"
@ -8708,11 +8654,6 @@ parse-srcset@^1.0.2:
resolved "https://registry.yarnpkg.com/parse-srcset/-/parse-srcset-1.0.2.tgz#f2bd221f6cc970a938d88556abc589caaaa2bde1"
integrity sha512-/2qh0lav6CmI15FzA3i/2Bzk2zCgQhGMkvhOhKNcBVQ1ldgpbfiNTVslmooUmWJcADi1f1kIeynbDRVzNlfR6Q==
parse-svg-path@^0.1.2:
version "0.1.2"
resolved "https://registry.yarnpkg.com/parse-svg-path/-/parse-svg-path-0.1.2.tgz#7a7ec0d1eb06fa5325c7d3e009b859a09b5d49eb"
integrity sha512-JyPSBnkTJ0AI8GGJLfMXvKq42cj5c006fnLz6fXy6zfoVjJizi8BNTpu8on8ziI1cKy9d9DGNuY17Ce7wuejpQ==
parse5@^7.0.0, parse5@^7.1.1:
version "7.1.2"
resolved "https://registry.yarnpkg.com/parse5/-/parse5-7.1.2.tgz#0736bebbfd77793823240a23b7fc5e010b7f8e32"
@ -9626,11 +9567,6 @@ pure-rand@^6.0.0:
resolved "https://registry.yarnpkg.com/pure-rand/-/pure-rand-6.1.0.tgz#d173cf23258231976ccbdb05247c9787957604f2"
integrity sha512-bVWawvoZoBYpp6yIoQtQXHZjmz35RSVHnUOTefl8Vcjr8snTPY1wnpSPMWekcFwbxI6gtmT7rSYPFvz71ldiOA==
q@^1.1.2:
version "1.5.1"
resolved "https://registry.yarnpkg.com/q/-/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7"
integrity sha512-kV/CThkXo6xyFEZUugw/+pIOywXcDbFYgSct5cT3gqlbkBE1SJdwy6UQoZvodiWF/ckQLZyDE/Bu1M6gVu5lVw==
qrcode@1.5.3:
version "1.5.3"
resolved "https://registry.yarnpkg.com/qrcode/-/qrcode-1.5.3.tgz#03afa80912c0dccf12bc93f615a535aad1066170"
@ -10530,11 +10466,6 @@ sprintf-js@~1.0.2:
resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"
integrity sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==
stable@^0.1.8:
version "0.1.8"
resolved "https://registry.yarnpkg.com/stable/-/stable-0.1.8.tgz#836eb3c8382fe2936feaf544631017ce7d47a3cf"
integrity sha512-ji9qxRnOVfcuLDySj9qzhGSEFVobyt1kIOSkj1qZzYLzq7Tos/oUUWvotUPQLlrsidqsK6tBH89Bc9kL5zHA6w==
stack-utils@^2.0.3:
version "2.0.6"
resolved "https://registry.yarnpkg.com/stack-utils/-/stack-utils-2.0.6.tgz#aaf0748169c02fc33c8232abccf933f54a1cc34f"
@ -10845,55 +10776,16 @@ supports-preserve-symlinks-flag@^1.0.0:
resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09"
integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
svg-arc-to-cubic-bezier@^3.0.0:
version "3.2.0"
resolved "https://registry.yarnpkg.com/svg-arc-to-cubic-bezier/-/svg-arc-to-cubic-bezier-3.2.0.tgz#390c450035ae1c4a0104d90650304c3bc814abe6"
integrity sha512-djbJ/vZKZO+gPoSDThGNpKDO+o+bAeA4XQKovvkNCqnIS2t+S4qnLAGQhyyrulhCFRl1WWzAp0wUDV8PpTVU3g==
svg-parser@^2.0.4:
version "2.0.4"
resolved "https://registry.yarnpkg.com/svg-parser/-/svg-parser-2.0.4.tgz#fdc2e29e13951736140b76cb122c8ee6630eb6b5"
integrity sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ==
svg-path-bounds@^1.0.1:
version "1.0.2"
resolved "https://registry.yarnpkg.com/svg-path-bounds/-/svg-path-bounds-1.0.2.tgz#00312f672b08afc432a66ddfbd06db40cec8d0d0"
integrity sha512-H4/uAgLWrppIC0kHsb2/dWUYSmb4GE5UqH06uqWBcg6LBjX2fu0A8+JrO2/FJPZiSsNOKZAhyFFgsLTdYUvSqQ==
dependencies:
abs-svg-path "^0.1.1"
is-svg-path "^1.0.1"
normalize-svg-path "^1.0.0"
parse-svg-path "^0.1.2"
svg-tags@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/svg-tags/-/svg-tags-1.0.0.tgz#58f71cee3bd519b59d4b2a843b6c7de64ac04764"
integrity sha512-ovssysQTa+luh7A5Weu3Rta6FJlFBBbInjOh722LIt6klpU2/HtdUbszju/G4devcvk8PGt7FCLv5wftu3THUA==
svg2vectordrawable@^2.9.1:
version "2.9.1"
resolved "https://registry.yarnpkg.com/svg2vectordrawable/-/svg2vectordrawable-2.9.1.tgz#23186ff7ace7038d09c031176dbca04063a97e5d"
integrity sha512-7WJIh4SzZLyEJtn45y+f8rREkgBiQMWfb0FoYkXuioywESjDWfbSuP0FQEmIiHP2zOi0oOO8pTG4VkeWJyidWw==
dependencies:
coa "^2.0.2"
mkdirp "^1.0.4"
svg-path-bounds "^1.0.1"
svgo "^2.8.0"
svgpath "^2.5.0"
svgo@^2.8.0:
version "2.8.0"
resolved "https://registry.yarnpkg.com/svgo/-/svgo-2.8.0.tgz#4ff80cce6710dc2795f0c7c74101e6764cfccd24"
integrity sha512-+N/Q9kV1+F+UeWYoSiULYo4xYSDQlTgb+ayMobAXPwMnLvop7oxKMo9OzIrX5x3eS4L4f2UHhc9axXwY8DpChg==
dependencies:
"@trysound/sax" "0.2.0"
commander "^7.2.0"
css-select "^4.1.3"
css-tree "^1.1.3"
csso "^4.2.0"
picocolors "^1.0.0"
stable "^0.1.8"
svgo@^3.0.2, svgo@^3.3.2:
version "3.3.2"
resolved "https://registry.yarnpkg.com/svgo/-/svgo-3.3.2.tgz#ad58002652dffbb5986fc9716afe52d869ecbda8"
@ -10907,11 +10799,6 @@ svgo@^3.0.2, svgo@^3.3.2:
csso "^5.0.5"
picocolors "^1.0.0"
svgpath@^2.5.0:
version "2.6.0"
resolved "https://registry.yarnpkg.com/svgpath/-/svgpath-2.6.0.tgz#5b160ef3d742b7dfd2d721bf90588d3450d7a90d"
integrity sha512-OIWR6bKzXvdXYyO4DK/UWa1VA1JeKq8E+0ug2DG98Y/vOmMpfZNj+TIG988HjfYSqtcy/hFOtZq/n/j5GSESNg==
symbol-tree@^3.2.4:
version "3.2.4"
resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.4.tgz#430637d248ba77e078883951fb9aa0eed7c63fa2"
@ -11130,6 +11017,11 @@ ts-prune@^0.10.3:
"true-myth" "^4.1.0"
ts-morph "^13.0.1"
ts-xor@^1.3.0:
version "1.3.0"
resolved "https://registry.yarnpkg.com/ts-xor/-/ts-xor-1.3.0.tgz#3e59f24f0321f9f10f350e0cee3b534b89a2c70b"
integrity sha512-RLXVjliCzc1gfKQFLRpfeD0rrWmjnSTgj7+RFhoq3KRkUYa8LE/TIidYOzM5h+IdFBDSjjSgk9Lto9sdMfDFEA==
tsconfig-paths@^3.15.0:
version "3.15.0"
resolved "https://registry.yarnpkg.com/tsconfig-paths/-/tsconfig-paths-3.15.0.tgz#5299ec605e55b1abb23ec939ef15edaf483070d4"