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
committed by
GitHub
GitHub
parent
7b89d84acb
commit
4b4289e211
@@ -105,6 +105,7 @@
|
||||
@import "./views/auth/_AuthPage.pcss";
|
||||
@import "./views/auth/_CompleteSecurityBody.pcss";
|
||||
@import "./views/auth/_CountryDropdown.pcss";
|
||||
@import "./views/auth/_DefaultWelcome.pcss";
|
||||
@import "./views/auth/_InteractiveAuthEntryComponents.pcss";
|
||||
@import "./views/auth/_LanguageSelector.pcss";
|
||||
@import "./views/auth/_LoginWithQR.pcss";
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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. */
|
||||
|
||||
@@ -1,191 +0,0 @@
|
||||
<style type="text/css">
|
||||
/* we deliberately inline style here to avoid flash-of-CSS problems, and to avoid
|
||||
* voodoo where we have to set display: none by default
|
||||
*/
|
||||
|
||||
.mx_Header_title::after {
|
||||
content: "!";
|
||||
}
|
||||
|
||||
.mx_Parent {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-webkit-flex-direction: column;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
-webkit-box-pack: center;
|
||||
-webkit-justify-content: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
-webkit-box-align: center;
|
||||
-webkit-align-items: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
padding: 25px 35px;
|
||||
}
|
||||
|
||||
.mx_Logo {
|
||||
height: 54px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.mx_ButtonGroup {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.mx_ButtonRow {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-justify-content: space-around;
|
||||
-ms-flex-pack: distribute;
|
||||
-webkit-box-align: center;
|
||||
-webkit-align-items: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
box-sizing: border-box;
|
||||
margin: 12px 0 0;
|
||||
}
|
||||
|
||||
.mx_ButtonRow > * {
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
.mx_ButtonRow > *:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.mx_ButtonRow > *:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.mx_ButtonParent {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
padding: 10px 20px;
|
||||
-webkit-box-orient: horizontal;
|
||||
-webkit-box-direction: normal;
|
||||
-webkit-flex-direction: row;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
-webkit-box-pack: center;
|
||||
-webkit-justify-content: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
-webkit-box-align: center;
|
||||
-webkit-align-items: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
border-radius: 4px;
|
||||
width: 150px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: 10px center;
|
||||
text-decoration: none;
|
||||
color: #2e2f32 !important;
|
||||
}
|
||||
|
||||
.mx_ButtonLabel {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.mx_Header_title {
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
margin: 20px 0 0;
|
||||
}
|
||||
|
||||
.mx_Header_subtitle {
|
||||
font-size: 12px;
|
||||
font-weight: normal;
|
||||
margin: 8px 0 0;
|
||||
}
|
||||
|
||||
.mx_ButtonSignIn {
|
||||
background-color: #368bd6;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
.mx_ButtonCreateAccount {
|
||||
background-color: #0dbd8b;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
.mx_SecondaryButton {
|
||||
background-color: #ffffff;
|
||||
color: #2e2f32;
|
||||
}
|
||||
|
||||
.mx_Button_iconSignIn {
|
||||
background-image: url("welcome/images/icon-sign-in.svg");
|
||||
}
|
||||
.mx_Button_iconCreateAccount {
|
||||
background-image: url("welcome/images/icon-create-account.svg");
|
||||
}
|
||||
.mx_Button_iconHelp {
|
||||
background-image: url("welcome/images/icon-help.svg");
|
||||
}
|
||||
.mx_Button_iconRoomDirectory {
|
||||
background-image: url("welcome/images/icon-room-directory.svg");
|
||||
}
|
||||
|
||||
/*
|
||||
.mx_WelcomePage_loggedIn is applied by EmbeddedPage from the Welcome component
|
||||
If it is set on the page, we should show the buttons. Otherwise, we have to assume
|
||||
we don't have an account and should hide them. No account == no guest account either.
|
||||
*/
|
||||
.mx_WelcomePage:not(.mx_WelcomePage_loggedIn) .mx_WelcomePage_guestFunctions {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mx_ButtonRow.mx_WelcomePage_guestFunctions {
|
||||
margin-top: 20px;
|
||||
}
|
||||
.mx_ButtonRow.mx_WelcomePage_guestFunctions > div {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 480px) {
|
||||
.mx_ButtonRow {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.mx_ButtonRow > * {
|
||||
margin: 0 0 10px 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="mx_Parent">
|
||||
<a href="https://element.io" target="_blank" rel="noopener">
|
||||
<img src="$logoUrl" alt="$brand" class="mx_Logo" />
|
||||
</a>
|
||||
<h1 class="mx_Header_title">_t("welcome_to_element")</h1>
|
||||
<!-- XXX: Our translations system isn't smart enough to recognize variables in the HTML, so we manually do it -->
|
||||
<h2 class="mx_Header_subtitle">_t("powered_by_matrix_with_logo")</h2>
|
||||
<div class="mx_ButtonGroup">
|
||||
<div class="mx_ButtonRow">
|
||||
<a href="#/login" class="mx_ButtonParent mx_ButtonSignIn mx_Button_iconSignIn">
|
||||
<div class="mx_ButtonLabel">_t("action|sign_in")</div>
|
||||
</a>
|
||||
<a href="#/register" class="mx_ButtonParent mx_ButtonCreateAccount mx_Button_iconCreateAccount">
|
||||
<div class="mx_ButtonLabel">_t("action|create_account")</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="mx_ButtonRow mx_WelcomePage_guestFunctions">
|
||||
<div>
|
||||
<a href="#/directory" class="mx_ButtonParent mx_SecondaryButton mx_Button_iconRoomDirectory">
|
||||
<div class="mx_ButtonLabel">_t("action|explore_rooms")</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,3 +0,0 @@
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M17 9C17 13.4183 13.4183 17 9 17C4.58172 17 1 13.4183 1 9C1 4.58172 4.58172 1 9 1C13.4183 1 17 4.58172 17 9ZM5.25 9C5.25 8.58579 5.58579 8.25 6 8.25H8.25V6C8.25 5.58579 8.58579 5.25 9 5.25C9.41421 5.25 9.75 5.58579 9.75 6V8.25H12C12.4142 8.25 12.75 8.58579 12.75 9C12.75 9.41421 12.4142 9.75 12 9.75H9.75V12C9.75 12.4142 9.41421 12.75 9 12.75C8.58579 12.75 8.25 12.4142 8.25 12V9.75H6C5.58579 9.75 5.25 9.41421 5.25 9Z" fill="white"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 587 B |
@@ -1,16 +0,0 @@
|
||||
|
||||
<svg width="22px" height="22px" viewBox="0 0 22 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<g id="Experiments" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
|
||||
<g id="Home" transform="translate(-672.000000, -577.000000)" stroke="#000000" stroke-width="1.6">
|
||||
<g id="Group-11" transform="translate(621.000000, 176.000000)">
|
||||
<g id="Group-10" transform="translate(39.000000, 391.000000)">
|
||||
<g id="help-circle" transform="translate(13.000000, 11.000000)">
|
||||
<circle id="Oval" cx="10" cy="10" r="10"></circle>
|
||||
<path d="M7.09,7 C7.57543688,5.62004444 8.98538362,4.79140632 10.4271763,5.0387121 C11.868969,5.28601788 12.9221794,6.53715293 12.92,8 C12.92,10 9.92,11 9.92,11" id="Path"></path>
|
||||
<path d="M10,15 L10.0050017,15.0050017" id="Path"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.1 KiB |
@@ -1,4 +0,0 @@
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M17 9C17 13.4183 13.4183 17 9 17C4.58172 17 1 13.4183 1 9C1 4.58172 4.58172 1 9 1C13.4183 1 17 4.58172 17 9ZM13.375 5.3266C13.5583 4.92826 13.0716 4.44152 12.6733 4.62491L7.66968 6.9285C7.33893 7.08077 7.08014 7.33956 6.92787 7.67031L4.62428 12.6739C4.44089 13.0722 4.92763 13.559 5.32597 13.3756L10.3295 11.072C10.6603 10.9197 10.9191 10.6609 11.0714 10.3302L13.375 5.3266Z" fill="black"/>
|
||||
<path d="M9.8835 9.88413C9.39534 10.3723 8.60389 10.3723 8.11573 9.88413C7.62757 9.39597 7.62757 8.60452 8.11573 8.11636C8.60389 7.62821 9.39534 7.62821 9.8835 8.11636C10.3717 8.60452 10.3717 9.39597 9.8835 9.88413Z" fill="black"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 775 B |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 53 KiB |
Reference in New Issue
Block a user