Absorb the matrix-react-sdk repository (#28192)

Co-authored-by: github-merge-queue <118344674+github-merge-queue@users.noreply.github.com>
Co-authored-by: github-merge-queue <github-merge-queue@users.noreply.github.com>
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Florian Duros <florian.duros@ormaz.fr>
Co-authored-by: Kim Brose <kim.brose@nordeck.net>
Co-authored-by: Florian Duros <florianduros@element.io>
Co-authored-by: R Midhun Suresh <hi@midhun.dev>
Co-authored-by: dbkr <986903+dbkr@users.noreply.github.com>
Co-authored-by: ElementRobot <releases@riot.im>
Co-authored-by: dbkr <dbkr@users.noreply.github.com>
Co-authored-by: David Baker <dbkr@users.noreply.github.com>
Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>
Co-authored-by: David Langley <davidl@element.io>
Co-authored-by: Michael Weimann <michaelw@matrix.org>
Co-authored-by: Timshel <Timshel@users.noreply.github.com>
Co-authored-by: Sahil Silare <32628578+sahil9001@users.noreply.github.com>
Co-authored-by: Will Hunt <will@half-shot.uk>
Co-authored-by: Hubert Chathi <hubert@uhoreg.ca>
Co-authored-by: Andrew Ferrazzutti <andrewf@element.io>
Co-authored-by: Robin <robin@robin.town>
Co-authored-by: Tulir Asokan <tulir@maunium.net>

res/css/views/auth/_AuthBody.pcss

@@ -0,0 +1,277 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2020 The Matrix.org Foundation C.I.C.
+Copyright 2019 New Vector Ltd
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_AuthBody {
+    width: 500px;
+    font-size: $font-12px;
+    color: $authpage-secondary-color;
+    background-color: $background;
+    border-radius: 0 4px 4px 0;
+    padding: 25px 60px;
+    box-sizing: border-box;
+
+    strong {
+        font-weight: var(--cpd-font-weight-semibold);
+    }
+
+    &.mx_AuthBody_flex {
+        display: flex;
+        flex-direction: column;
+    }
+
+    h1 {
+        font-size: $font-24px;
+        font-weight: var(--cpd-font-weight-semibold);
+        margin-top: $spacing-8;
+        color: $authpage-primary-color;
+    }
+
+    h2 {
+        font: var(--cpd-font-body-md-semibold);
+        color: $authpage-secondary-color;
+    }
+
+    h2.mx_AuthBody_centered {
+        text-align: center;
+    }
+
+    a:link,
+    a:hover,
+    a:visited {
+        color: $accent;
+        text-decoration: none;
+    }
+
+    fieldset {
+        display: block;
+    }
+
+    .mx_AuthBody_icon {
+        width: 44px;
+        height: 44px;
+    }
+
+    .mx_AuthBody_lockIcon {
+        color: $secondary-content;
+        height: 32px;
+        width: 32px;
+    }
+
+    .mx_AuthBody_text {
+        margin-bottom: $spacing-48;
+        margin-top: 0;
+    }
+
+    input[type="text"],
+    input[type="password"] {
+        color: $authpage-primary-color;
+    }
+
+    .mx_Field label {
+        color: $authpage-secondary-color;
+    }
+
+    .mx_Field input,
+    .mx_Field select {
+        color: $authpage-primary-color;
+        background-color: $background;
+    }
+
+    .mx_Field_labelAlwaysTopLeft label,
+    .mx_Field select + label /* Always show a select's label on top to not collide with the value */,
+    .mx_Field input:focus + label,
+    .mx_Field input:not(:placeholder-shown) + label,
+    .mx_Field textarea:focus + label,
+    .mx_Field textarea:not(:placeholder-shown) + label {
+        background-color: $background;
+    }
+
+    input.error {
+        color: $alert;
+    }
+
+    .mx_Login_submit {
+        height: 32px;
+        margin-top: $spacing-16;
+    }
+
+    .mx_ErrorMessage {
+        margin-bottom: 12px;
+        margin-top: 2px;
+    }
+
+    .mx_Field input {
+        box-sizing: border-box;
+    }
+
+    .mx_Field_select::before {
+        background-color: $authpage-primary-color;
+    }
+
+    .mx_Dropdown {
+        color: $authpage-primary-color;
+    }
+
+    .mx_Dropdown_arrow {
+        background: $authpage-primary-color;
+    }
+
+    .mx_Dropdown_menu {
+        background-color: $background;
+
+        .mx_Dropdown_option_highlight {
+            background-color: $authpage-focus-bg-color;
+        }
+    }
+}
+
+/* specialisation for password reset views */
+.mx_AuthBody.mx_AuthBody_forgot-password {
+    font: var(--cpd-font-body-md-regular);
+    color: $primary-content;
+    padding: 50px 32px;
+    min-height: 600px;
+
+    h1 {
+        margin: $spacing-24 0;
+    }
+
+    .mx_AuthBody_button-container {
+        display: flex;
+        justify-content: center;
+    }
+
+    .mx_Login_submit {
+        font-weight: var(--cpd-font-weight-semibold);
+        margin: 0 0 $spacing-16;
+    }
+
+    .mx_AuthBody_text {
+        margin-bottom: $spacing-32;
+
+        p {
+            margin: 0 0 $spacing-8;
+        }
+    }
+
+    .mx_AuthBody_sign-in-instead-button {
+        font-weight: var(--cpd-font-weight-semibold);
+        padding: $spacing-4;
+    }
+
+    .mx_AuthBody_fieldRow {
+        margin-bottom: $spacing-24;
+    }
+
+    .mx_AccessibleButton.mx_AccessibleButton_hasKind {
+        background: none;
+
+        &:disabled {
+            cursor: default;
+            opacity: 0.4;
+        }
+    }
+}
+
+.mx_AuthBody_did-not-receive {
+    align-items: center;
+    color: $secondary-content;
+    display: flex;
+    gap: $spacing-8;
+}
+
+.mx_AuthBody_resend-button {
+    align-items: center;
+    border-radius: 8px;
+    color: $accent;
+    display: flex;
+    gap: $spacing-4;
+    padding: $spacing-4;
+
+    &:hover {
+        background-color: $system;
+    }
+}
+
+.mx_AuthBody_emailPromptIcon {
+    width: 57px;
+}
+
+.mx_AuthBody_emailPromptIcon--shifted {
+    margin-bottom: -17px; /* Prevent layout jump by relative positioning. */
+    position: relative;
+    top: -17px; /* This icon is higher than the other icons. Shift up to prevent icon jumping. */
+    width: 57px;
+}
+
+.mx_AuthBody_fieldRow {
+    display: flex;
+    margin-bottom: 10px;
+}
+
+.mx_AuthBody_fieldRow > .mx_Field {
+    margin: 0 5px;
+}
+
+.mx_AuthBody_fieldRow > .mx_Field:first-child {
+    margin-left: 0;
+}
+
+.mx_AuthBody_fieldRow > .mx_Field:last-child {
+    margin-right: 0;
+}
+
+.mx_AuthBody_paddedFooter {
+    height: 80px; /* height of the submit button + register link */
+    padding-top: 28px;
+    text-align: center;
+
+    .mx_AuthBody_paddedFooter_title {
+        margin-top: $spacing-16;
+        font-size: $font-15px;
+        line-height: $font-24px;
+
+        .mx_InlineSpinner img {
+            vertical-align: sub;
+            margin-right: 5px;
+        }
+    }
+
+    .mx_AuthBody_paddedFooter_subtitle {
+        margin-top: $spacing-8;
+        font-size: $font-10px;
+        line-height: $font-14px;
+    }
+}
+
+.mx_AuthBody_changeFlow {
+    display: block;
+    text-align: center;
+
+    > a {
+        font-weight: var(--cpd-font-weight-semibold);
+    }
+}
+
+.mx_SSOButtons + .mx_AuthBody_changeFlow {
+    margin-top: $spacing-24;
+}
+
+.mx_AuthBody_spinner {
+    margin: 1em 0;
+}
+
+@media only screen and (max-width: 480px) {
+    .mx_AuthBody {
+        border-radius: 4px;
+        width: auto;
+        max-width: 500px;
+        padding: 10px;
+    }
+}

res/css/views/auth/_AuthFooter.pcss

@@ -0,0 +1,22 @@
+/*
+Copyright 2019-2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_AuthFooter {
+    text-align: center;
+    width: 100%;
+    font: var(--cpd-font-body-md-regular);
+    opacity: 0.72;
+    padding: 20px 0;
+    background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
+}
+
+.mx_AuthFooter a:link,
+.mx_AuthFooter a:hover,
+.mx_AuthFooter a:visited {
+    color: $accent-fg-color;
+    margin: 0 22px;
+}

res/css/views/auth/_AuthHeader.pcss

@@ -0,0 +1,20 @@
+/*
+Copyright 2019-2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_AuthHeader {
+    display: flex;
+    flex-direction: column;
+    width: 206px;
+    padding: 25px 25px;
+    box-sizing: border-box;
+}
+
+@media only screen and (max-width: 480px) {
+    .mx_AuthHeader {
+        display: none;
+    }
+}

res/css/views/auth/_AuthHeaderLogo.pcss

@@ -0,0 +1,22 @@
+/*
+Copyright 2019-2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_AuthHeaderLogo {
+    margin-top: 15px;
+    flex: 1;
+    padding: 0 25px;
+}
+
+.mx_AuthHeaderLogo img {
+    width: 100%;
+}
+
+@media only screen and (max-width: 480px) {
+    .mx_AuthHeaderLogo {
+        display: none;
+    }
+}

res/css/views/auth/_AuthPage.pcss

@@ -0,0 +1,32 @@
+/*
+Copyright 2019-2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_AuthPage {
+    width: 100%;
+    min-height: 100%;
+    display: flex;
+    flex-direction: column;
+    background-color: $authpage-bg-color;
+    height: 100vh;
+    overflow: auto;
+}
+
+.mx_AuthPage_modal {
+    display: flex;
+    margin: 100px auto auto;
+    border-radius: 4px;
+    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.33);
+    background-color: $authpage-modal-bg-color;
+
+    @media only screen and (max-height: 768px) {
+        margin-top: 50px;
+    }
+
+    @media only screen and (max-width: 480px) {
+        margin-top: 0;
+    }
+}

res/css/views/auth/_CompleteSecurityBody.pcss

@@ -0,0 +1,34 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2020 The Matrix.org Foundation C.I.C.
+Copyright 2019 New Vector Ltd
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_CompleteSecurityBody {
+    width: 600px;
+    color: $authpage-primary-color;
+    background-color: $background;
+    border-radius: 4px;
+    padding: 20px;
+    box-sizing: border-box;
+
+    h2 {
+        font-size: $font-24px;
+        font-weight: var(--cpd-font-weight-semibold);
+        margin-top: 0;
+    }
+
+    h3 {
+        font: var(--cpd-font-body-md-semibold);
+    }
+
+    a:link,
+    a:hover,
+    a:visited {
+        color: $accent;
+        text-decoration: none;
+    }
+}

res/css/views/auth/_CountryDropdown.pcss

@@ -0,0 +1,25 @@
+/*
+Copyright 2019-2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_CountryDropdown .mx_Dropdown_input .mx_Dropdown_option {
+    padding: 0 3px;
+}
+
+.mx_CountryDropdown .mx_Dropdown_arrow {
+    padding-right: 3px;
+}
+
+.mx_CountryDropdown_shortOption {
+    display: inline-flex;
+    align-items: center;
+    height: 100%;
+}
+
+.mx_CountryDropdown_option {
+    display: flex;
+    align-items: center;
+}

res/css/views/auth/_InteractiveAuthEntryComponents.pcss

@@ -0,0 +1,84 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2023 The Matrix.org Foundation C.I.C.
+Copyright 2017 Vector Creations Ltd
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_InteractiveAuthEntryComponents {
+    .mx_InteractiveAuthEntryComponents_termsSubmit {
+        margin-top: 20px;
+        margin-bottom: 5px;
+        width: 100%;
+        box-sizing: border-box; /* prevent overflowing */
+    }
+}
+
+.mx_InteractiveAuthEntryComponents_msisdnWrapper {
+    text-align: center;
+}
+
+.mx_InteractiveAuthEntryComponents_msisdnEntry {
+    font-size: 200%;
+    font-weight: bold;
+    border: 1px solid $strong-input-border-color;
+    border-radius: 3px;
+    width: 6em;
+}
+
+.mx_InteractiveAuthEntryComponents_msisdnEntry:focus {
+    border: 1px solid $accent;
+}
+
+.mx_InteractiveAuthEntryComponents_msisdnSubmit {
+    margin-top: 4px;
+    margin-bottom: 5px;
+}
+
+/* XXX: This should be a common button class */
+.mx_InteractiveAuthEntryComponents_msisdnSubmit:disabled {
+    background-color: $light-fg-color;
+    cursor: default;
+}
+
+.mx_InteractiveAuthEntryComponents_termsPolicy {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+}
+
+.mx_InteractiveAuthEntryComponents_passwordSection {
+    width: 300px;
+}
+
+.mx_InteractiveAuthEntryComponents_sso_buttons {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    margin-top: 20px;
+
+    .mx_AccessibleButton {
+        margin-left: 5px;
+    }
+}
+
+.mx_InteractiveAuthEntryComponents_emailWrapper {
+    /* "Resend" button/link */
+    .mx_AccessibleButton_kind_link_inline {
+        /* We need this to be an inline-block so positioning works correctly */
+        display: inline-block !important;
+
+        /* Spinner as end adornment of the "resend" button/link */
+        .mx_Spinner {
+            /* Spinners are usually block elements, but we need it as inline element */
+            display: inline-flex !important;
+            /* Spinners by default fill all available width, but we don't want that */
+            width: auto !important;
+            /* We need to center the spinner relative to the button/link */
+            vertical-align: middle !important;
+        }
+    }
+}

res/css/views/auth/_LanguageSelector.pcss

@@ -0,0 +1,21 @@
+/*
+Copyright 2019-2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_AuthBody_language {
+    width: 100%;
+}
+
+.mx_AuthBody_language .mx_Dropdown_input {
+    border: none;
+    font: var(--cpd-font-body-md-semibold);
+    color: $authpage-lang-color;
+    width: auto;
+}
+
+.mx_AuthBody_language .mx_Dropdown_arrow {
+    background: $authpage-lang-color;
+}

res/css/views/auth/_LoginWithQR.pcss

@@ -0,0 +1,243 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_LoginWithQRSection p {
+    margin-top: 0;
+    margin-bottom: $spacing-16;
+}
+
+.mx_LoginWithQRSection {
+    .mx_AccessibleButton_kind_primary + p {
+        color: var(--cpd-color-text-secondary);
+        margin-top: var(--cpd-space-2x);
+    }
+}
+
+.mx_LoginWithQRSection .mx_AccessibleButton svg {
+    margin-right: $spacing-12;
+}
+
+.mx_AuthPage .mx_LoginWithQR {
+    .mx_AccessibleButton {
+        display: block !important;
+    }
+
+    .mx_AccessibleButton + .mx_AccessibleButton {
+        margin-top: $spacing-8;
+    }
+
+    font-size: $font-15px;
+}
+
+.mx_UserSettingsDialog .mx_LoginWithQR {
+    font: var(--cpd-font-body-md-regular);
+
+    h1 {
+        font-size: $font-24px;
+        margin-bottom: 0;
+    }
+
+    h2 {
+        margin-top: $spacing-24;
+    }
+
+    .mx_QRCode {
+        margin: $spacing-28 0;
+    }
+
+    .mx_LoginWithQR_qrWrapper {
+        display: flex;
+    }
+}
+
+.mx_LoginWithQR {
+    min-height: 350px;
+    display: flex;
+    flex-direction: column;
+
+    h1 > svg {
+        &.normal {
+            color: $secondary-content;
+        }
+        &.error {
+            color: $alert;
+        }
+        &.success {
+            color: $accent;
+        }
+        height: 1.3em;
+        margin-right: $spacing-8;
+        vertical-align: middle;
+    }
+
+    .mx_LoginWithQR_confirmationDigits {
+        text-align: center;
+        margin: $spacing-48 auto;
+        font-weight: var(--cpd-font-weight-semibold);
+        font-size: $font-24px;
+        color: $primary-content;
+    }
+
+    .mx_LoginWithQR_confirmationAlert {
+        border: 1px solid $quaternary-content;
+        border-radius: $spacing-8;
+        padding: $spacing-8;
+        line-height: 1.5em;
+        display: flex;
+
+        svg {
+            height: 30px;
+        }
+    }
+
+    .mx_LoginWithQR_separator {
+        margin: 1em 0;
+    }
+
+    ol {
+        padding-inline-start: 0;
+        list-style: none; /* list markers do not support the outlined number styling we need */
+
+        li {
+            position: relative;
+            padding-left: var(--cpd-space-7x);
+            color: 1px solid $input-placeholder;
+            margin-bottom: var(--cpd-space-4x);
+            line-height: 20px;
+            text-align: initial;
+        }
+
+        /* Circled number list item marker */
+        li::before {
+            content: counter(list-item);
+            position: absolute;
+            left: 0;
+            display: inline-block;
+            width: 20px;
+            height: 20px;
+            line-height: 20px;
+            border-radius: 50%;
+            border: 1px solid $input-placeholder;
+            box-sizing: border-box;
+            text-align: center;
+        }
+    }
+
+    label[for="mx_LoginWithQR_checkCode"] {
+        margin-top: var(--cpd-space-6x);
+        color: var(--cpd-color-text-primary);
+        margin-bottom: var(--cpd-space-1x);
+    }
+
+    .mx_LoginWithQR_icon {
+        width: 56px;
+        height: 56px;
+        border-radius: 8px;
+        box-sizing: border-box;
+        padding: var(--cpd-space-3x);
+        gap: 10px;
+
+        background-color: var(--cpd-color-bg-subtle-secondary);
+        svg {
+            color: var(--cpd-color-icon-secondary);
+        }
+
+        &.mx_LoginWithQR_icon--success {
+            background-color: var(--cpd-color-bg-success-subtle);
+            svg {
+                color: var(--cpd-color-icon-success-primary);
+            }
+        }
+
+        &.mx_LoginWithQR_icon--critical {
+            background-color: var(--cpd-color-bg-critical-subtle);
+            svg {
+                color: var(--cpd-color-icon-critical-primary);
+            }
+        }
+    }
+
+    .mx_LoginWithQR_checkCode_input {
+        margin-bottom: var(--cpd-space-1x);
+        text-align: initial;
+
+        input {
+            /* Workaround for one of the input rules in _common.pcss being not specific enough */
+            padding: 0;
+            padding-inline-start: calc(40px / 2 - (1ch / 2));
+        }
+    }
+
+    .mx_LoginWithQR_heading {
+        display: flex;
+        gap: $spacing-12;
+        align-items: center;
+    }
+
+    .mx_LoginWithQR_BackButton {
+        height: $spacing-28;
+        border-radius: $spacing-28;
+        padding: $spacing-4;
+        box-sizing: border-box;
+        background-color: var(--cpd-color-bg-subtle-secondary);
+        svg {
+            height: 100%;
+        }
+    }
+
+    .mx_LoginWithQR_breadcrumbs {
+        font-size: $font-13px;
+        color: $secondary-content;
+    }
+
+    .mx_LoginWithQR_main {
+        display: flex;
+        flex-direction: column;
+        flex-grow: 1;
+        align-items: center;
+        color: $primary-content;
+        text-align: center;
+
+        p {
+            color: $secondary-content;
+        }
+    }
+
+    &.mx_LoginWithQR_error .mx_LoginWithQR_main {
+        max-width: 400px;
+        margin: 0 auto;
+    }
+
+    .mx_LoginWithQR_buttons {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: $spacing-16;
+        margin-top: var(--cpd-space-6x);
+
+        .mx_AccessibleButton {
+            width: 300px;
+            height: 48px;
+            box-sizing: border-box;
+        }
+    }
+
+    .mx_QRCode {
+        border-radius: $spacing-8;
+        display: flex;
+        justify-content: center;
+    }
+
+    .mx_LoginWithQR_spinner {
+        flex-grow: 1;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 100%;
+    }
+}

res/css/views/auth/_PassphraseField.pcss

@@ -0,0 +1,30 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+$PassphraseStrengthHigh: $accent;
+$PassphraseStrengthMedium: $username-variant5-color;
+$PassphraseStrengthLow: $alert;
+
+progress.mx_PassphraseField_progress {
+    appearance: none;
+    width: 100%;
+    border: 0;
+    height: 4px;
+    position: absolute;
+    top: -12px;
+
+    @mixin ProgressBarBorderRadius "2px";
+    @mixin ProgressBarColour $PassphraseStrengthLow;
+    &[value="2"],
+    &[value="3"] {
+        @mixin ProgressBarColour $PassphraseStrengthMedium;
+    }
+    &[value="4"] {
+        @mixin ProgressBarColour $PassphraseStrengthHigh;
+    }
+}

res/css/views/auth/_Welcome.pcss

@@ -0,0 +1,22 @@
+/*
+Copyright 2019-2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_Welcome {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    &.mx_WelcomePage_registrationDisabled {
+        .mx_ButtonCreateAccount {
+            display: none;
+        }
+    }
+}
+
+.mx_Welcome .mx_AuthBody_language {
+    width: 160px;
+    margin-bottom: 10px;
+}