Update unsupported browser react component to new designs (#27857)
This commit is contained in:
Michael Telatynski
GitHub
parent
31345ddd36
commit
59e526e318
16 changed files with 564 additions and 466 deletions
|
|
@ -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();
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue