Implement new design for Welcome page (#33211)

* Convert welcome.html to React component

In advance of changes to use Compound

* Fix types

* Fix tests

* Update styling to match Figma

* Fix random capitalisation

* Tweak styling

* Regenerate i18n

* Update tests

* Make linter happy

* Iterate
This commit is contained in:
Michael Telatynski
2026-04-22 15:32:05 +00:00
committed by GitHub
parent 7b89d84acb
commit 4b4289e211
24 changed files with 263 additions and 308 deletions
@@ -0,0 +1,43 @@
/*
Copyright 2026 Element Creations Ltd.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/
.mx_DefaultWelcome {
text-align: center;
.mx_DefaultWelcome_logo img {
height: 48px;
aspect-ratio: auto;
display: block;
margin: 0 auto;
}
h1 {
margin: var(--cpd-space-4x) 0 var(--cpd-space-2x);
}
p {
color: var(--cpd-color-text-secondary);
margin-top: var(--cpd-space-2x);
}
.mx_DefaultWelcome_buttons {
margin: var(--cpd-space-6x) 0 var(--cpd-space-1x);
padding-bottom: var(--cpd-space-4x);
border-bottom: 1px solid var(--cpd-color-separator-primary);
a {
width: 380px;
margin-bottom: var(--cpd-space-4x);
}
}
}
.mx_WelcomePage_registrationDisabled {
.mx_DefaultWelcome_buttons_register {
display: none;
}
}
+5 -1
View File
@@ -9,6 +9,10 @@ Please see LICENSE files in the repository root for full details.
display: flex;
flex-direction: column;
align-items: center;
background-color: var(--cpd-color-bg-canvas-default);
box-sizing: border-box;
padding: var(--cpd-space-11x) var(--cpd-space-12x) var(--cpd-space-4x);
&.mx_WelcomePage_registrationDisabled {
.mx_ButtonCreateAccount {
display: none;
@@ -18,7 +22,7 @@ Please see LICENSE files in the repository root for full details.
.mx_Welcome .mx_AuthBody_language {
width: 160px;
margin-bottom: 10px;
margin: var(--cpd-space-1x) 0;
}
/* Invert image colours in dark mode. */