Files
element-web/test/unit-tests/components/structures/__snapshots__/MatrixChat-test.tsx.snap
Richard van der Hoff 5f07fbbc1b Allow the Login screen to use the dark theme (#31293)
* Allow the Login screen to use the dark theme

There is a whole bunch of code dedicated to attempting to force a "light" theme
onto the login view, even if the deployment is configured to prioritise the
dark theme.

Apparently this was done because, in the old days, the
login view looked rubbish with the dark theme, but now it looks fine.

Fixes https://github.com/element-hq/element-web/issues/31292

* Fix up background colour of auth screen in dark theme

In dark theme, the background of the login/register/welcome box needs to be
translucent black rather than translucent white.

To make this work, I've moved the style from inline to CSS, and used a PostCSS
variable to define the colour.

* Fix up Welcome page colours in dark theme

Make the text and image white, not black, in short.

* Fix incorrect merge

that will teach me to use the Github UI to address merge conflicts.
2025-11-26 07:54:40 +00:00

501 lines
12 KiB
Plaintext

// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
exports[`<MatrixChat /> Multi-tab lockout shows the lockout page when a second tab opens after a session is restored 1`] = `
<div>
<main
class="mx_SessionLockStolenView mx_SplashPage"
>
<h1>
Test is connected in another tab
</h1>
<h2>
Switch to the other tab to connect to Test. This tab can now be closed.
</h2>
</main>
</div>
`;
exports[`<MatrixChat /> Multi-tab lockout shows the lockout page when a second tab opens during crypto init 1`] = `
<body
style="--emoji-font-family: Twemoji;"
>
<div>
<main
class="mx_SessionLockStolenView mx_SplashPage"
>
<h1>
Test is connected in another tab
</h1>
<h2>
Switch to the other tab to connect to Test. This tab can now be closed.
</h2>
</main>
</div>
</body>
`;
exports[`<MatrixChat /> Multi-tab lockout shows the lockout page when a second tab opens while we are checking the sync store 1`] = `
<div>
<main
class="mx_SessionLockStolenView mx_SplashPage"
>
<h1>
Test is connected in another tab
</h1>
<h2>
Switch to the other tab to connect to Test. This tab can now be closed.
</h2>
</main>
</div>
`;
exports[`<MatrixChat /> Multi-tab lockout shows the lockout page when a second tab opens while we were waiting for the lock ourselves 1`] = `
<div>
<main
class="mx_SessionLockStolenView mx_SplashPage"
>
<h1>
Test is connected in another tab
</h1>
<h2>
Switch to the other tab to connect to Test. This tab can now be closed.
</h2>
</main>
</div>
`;
exports[`<MatrixChat /> Multi-tab lockout waits for other tab to stop during startup 1`] = `
<div>
<div
class="mx_ConfirmSessionLockTheftView"
>
<div
class="mx_ConfirmSessionLockTheftView_body"
>
<p>
Test is open in another window. Click "Continue" to use Test here and disconnect the other window.
</p>
<div
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary"
role="button"
tabindex="0"
>
Continue
</div>
</div>
</div>
</div>
`;
exports[`<MatrixChat /> Multi-tab lockout waits for other tab to stop during startup 2`] = `
<div>
<div
class="mx_MatrixChat_splash"
>
<div
class="mx_Spinner"
>
<div
aria-label="Loading…"
class="mx_Spinner_icon"
data-testid="spinner"
role="progressbar"
style="width: 32px; height: 32px;"
/>
</div>
</div>
</div>
`;
exports[`<MatrixChat /> Multi-tab lockout waits for other tab to stop during startup 3`] = `
<div>
<div
class="mx_AuthPage"
>
<div
class="mx_AuthPage_modal mx_AuthPage_modal_withBlur"
style="position: relative;"
>
<div
class="mx_AuthPage_modalBlur"
style="position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; filter: blur(40px);"
/>
<main
aria-live="polite"
class="mx_AuthPage_modalContent"
style="display: flex; z-index: 1; border-radius: inherit;"
tabindex="-1"
>
<div
class="mx_Welcome"
data-testid="mx_welcome_screen"
>
<div
class="mx_WelcomePage mx_WelcomePage_loggedIn"
>
<div
class="mx_WelcomePage_body"
>
<h1>
Hello
</h1>
</div>
</div>
<div
class="mx_Dropdown mx_LanguageDropdown mx_AuthBody_language"
>
<div
aria-describedby="mx_LanguageDropdown_value"
aria-expanded="false"
aria-haspopup="listbox"
aria-label="Language Dropdown"
aria-owns="mx_LanguageDropdown_input"
class="mx_AccessibleButton mx_Dropdown_input mx_no_textinput"
role="button"
tabindex="0"
>
<div
class="mx_Dropdown_option"
id="mx_LanguageDropdown_value"
>
<div>
English
</div>
</div>
<span
class="mx_Dropdown_arrow"
/>
</div>
</div>
</div>
</main>
</div>
<footer
class="mx_AuthFooter"
role="contentinfo"
>
<a
href="https://element.io/blog"
rel="noreferrer noopener"
target="_blank"
>
Blog
</a>
<a
href="https://mastodon.matrix.org/@Element"
rel="noreferrer noopener"
target="_blank"
>
Mastodon
</a>
<a
href="https://github.com/element-hq/element-web"
rel="noreferrer noopener"
target="_blank"
>
GitHub
</a>
<a
href="https://matrix.org"
rel="noreferrer noopener"
target="_blank"
>
Powered by Matrix
</a>
</footer>
</div>
</div>
`;
exports[`<MatrixChat /> should render spinner while app is loading 1`] = `
<div>
<div
class="mx_MatrixChat_splash"
>
<div
class="mx_Spinner"
>
<div
aria-label="Loading…"
class="mx_Spinner_icon"
data-testid="spinner"
role="progressbar"
style="width: 32px; height: 32px;"
/>
</div>
</div>
</div>
`;
exports[`<MatrixChat /> with a soft-logged-out session should show the soft-logout page 1`] = `
<div>
<div
class="mx_AuthPage"
>
<div
class="mx_AuthPage_modal mx_AuthPage_modal_withBlur"
style="position: relative;"
>
<div
class="mx_AuthPage_modalBlur"
style="position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; filter: blur(40px);"
/>
<main
aria-live="polite"
class="mx_AuthPage_modalContent"
style="display: flex; z-index: 1; border-radius: inherit;"
tabindex="-1"
>
<div
class="mx_AuthHeader"
>
<aside
class="mx_AuthHeaderLogo"
>
<img
alt="Element"
src="themes/element/img/logos/element-logo.svg"
/>
</aside>
<div
class="mx_Dropdown mx_LanguageDropdown mx_AuthBody_language"
>
<div
aria-describedby="mx_LanguageDropdown_value"
aria-expanded="false"
aria-haspopup="listbox"
aria-label="Language Dropdown"
aria-owns="mx_LanguageDropdown_input"
class="mx_AccessibleButton mx_Dropdown_input mx_no_textinput"
role="button"
tabindex="0"
>
<div
class="mx_Dropdown_option"
id="mx_LanguageDropdown_value"
>
<div>
English
</div>
</div>
<span
class="mx_Dropdown_arrow"
/>
</div>
</div>
</div>
<div
class="mx_AuthBody"
>
<h1>
You're signed out
</h1>
<h2>
Sign in
</h2>
<div>
<form>
<p>
Enter your password to sign in and regain access to your account.
</p>
<div
class="mx_Field mx_Field_input"
>
<input
id="mx_Field_1"
label="Password"
placeholder="Password"
type="password"
value=""
/>
<label
for="mx_Field_1"
>
Password
</label>
</div>
<div
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary"
role="button"
tabindex="0"
>
Sign in
</div>
<div
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link"
role="button"
tabindex="0"
>
Forgotten your password?
</div>
</form>
</div>
<h2>
Clear personal data
</h2>
<p>
Warning: your personal data (including encryption keys) is still stored in this session. Clear it if you're finished using this session, or want to sign in to another account.
</p>
<div>
<div
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_danger"
role="button"
tabindex="0"
>
Clear all data
</div>
</div>
</div>
</main>
</div>
<footer
class="mx_AuthFooter"
role="contentinfo"
>
<a
href="https://element.io/blog"
rel="noreferrer noopener"
target="_blank"
>
Blog
</a>
<a
href="https://mastodon.matrix.org/@Element"
rel="noreferrer noopener"
target="_blank"
>
Mastodon
</a>
<a
href="https://github.com/element-hq/element-web"
rel="noreferrer noopener"
target="_blank"
>
GitHub
</a>
<a
href="https://matrix.org"
rel="noreferrer noopener"
target="_blank"
>
Powered by Matrix
</a>
</footer>
</div>
</div>
`;
exports[`<MatrixChat /> with an existing session onAction() room actions leave_room for a room should launch a confirmation modal 1`] = `
<div
aria-describedby="mx_Dialog_content"
aria-labelledby="mx_BaseDialog_title"
class="mx_QuestionDialog mx_Dialog_fixedWidth"
data-focus-lock-disabled="false"
role="dialog"
tabindex="-1"
>
<div
class="mx_Dialog_header"
>
<h1
class="mx_Heading_h3 mx_Dialog_title"
id="mx_BaseDialog_title"
>
Leave room
</h1>
</div>
<div
class="mx_Dialog_content"
id="mx_Dialog_content"
>
<span>
Are you sure you want to leave the room '!room:server.org'?
</span>
</div>
<div
class="mx_Dialog_buttons"
>
<span
class="mx_Dialog_buttons_row"
>
<button
data-testid="dialog-cancel-button"
type="button"
>
Cancel
</button>
<button
class="mx_Dialog_primary"
data-testid="dialog-primary-button"
type="button"
>
Leave
</button>
</span>
</div>
<div
aria-label="Close dialog"
class="mx_AccessibleButton mx_Dialog_cancelButton"
role="button"
tabindex="0"
/>
</div>
`;
exports[`<MatrixChat /> with an existing session onAction() room actions leave_room for a space should launch a confirmation modal 1`] = `
<div
aria-describedby="mx_Dialog_content"
aria-labelledby="mx_BaseDialog_title"
class="mx_QuestionDialog mx_Dialog_fixedWidth"
data-focus-lock-disabled="false"
role="dialog"
tabindex="-1"
>
<div
class="mx_Dialog_header"
>
<h1
class="mx_Heading_h3 mx_Dialog_title"
id="mx_BaseDialog_title"
>
Leave space
</h1>
</div>
<div
class="mx_Dialog_content"
id="mx_Dialog_content"
>
<span>
Are you sure you want to leave the space '!spaceRoom:server.org'?
</span>
</div>
<div
class="mx_Dialog_buttons"
>
<span
class="mx_Dialog_buttons_row"
>
<button
data-testid="dialog-cancel-button"
type="button"
>
Cancel
</button>
<button
class="mx_Dialog_primary"
data-testid="dialog-primary-button"
type="button"
>
Leave
</button>
</span>
</div>
<div
aria-label="Close dialog"
class="mx_AccessibleButton mx_Dialog_cancelButton"
role="button"
tabindex="0"
/>
</div>
`;