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>
2024-10-16 13:31:55 +01:00
parent 2b99496025
commit c05c429803
3280 changed files with 586617 additions and 905 deletions
--- a/res/css/views/dialogs/security/_AccessSecretStorageDialog.pcss
+++ b/res/css/views/dialogs/security/_AccessSecretStorageDialog.pcss
@@ -0,0 +1,139 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2018, 2019 , 2021 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_AccessSecretStorageDialog {
+    .mx_AccessSecretStorageDialog_titleWithIcon {
+        &::before {
+            content: "";
+            display: inline-block;
+            width: 24px;
+            height: 24px;
+            margin-inline-end: $spacing-8;
+            position: relative;
+            top: 5px;
+            background-color: $primary-content;
+        }
+
+        &.mx_AccessSecretStorageDialog_resetBadge::before {
+            /* The image isn't capable of masking, so we use a background instead. */
+            background-image: url("$(res)/img/element-icons/warning-badge.svg");
+            background-size: 24px;
+            background-color: transparent;
+        }
+
+        &.mx_AccessSecretStorageDialog_secureBackupTitle::before {
+            mask-image: url("$(res)/img/feather-customised/secure-backup.svg");
+        }
+
+        &.mx_AccessSecretStorageDialog_securePhraseTitle::before {
+            mask-image: url("$(res)/img/feather-customised/secure-phrase.svg");
+        }
+    }
+
+    .mx_AccessSecretStorageDialog_primaryContainer {
+        .mx_AccessSecretStorageDialog_passPhraseInput {
+            width: 300px;
+            border: 1px solid $accent;
+            border-radius: 5px;
+        }
+
+        .mx_AccessSecretStorageDialog_keyStatus {
+            height: 30px;
+        }
+
+        .mx_AccessSecretStorageDialog_recoveryKeyEntry {
+            display: flex;
+            align-items: center;
+
+            .mx_AccessSecretStorageDialog_recoveryKeyEntry_textInput {
+                flex-grow: 1;
+            }
+
+            .mx_AccessSecretStorageDialog_recoveryKeyEntry_entryControlSeparatorText {
+                margin: $spacing-16;
+            }
+
+            .mx_AccessSecretStorageDialog_recoveryKeyEntry_fileInput {
+                display: none;
+            }
+        }
+
+        .mx_AccessSecretStorageDialog_recoveryKeyFeedback {
+            &::before {
+                content: "";
+                display: inline-block;
+                vertical-align: bottom;
+                width: 20px;
+                height: 20px;
+                mask-repeat: no-repeat;
+                mask-position: center;
+                mask-size: 20px;
+                margin-inline-end: 5px;
+            }
+
+            &.mx_AccessSecretStorageDialog_recoveryKeyFeedback--valid {
+                color: $accent;
+
+                &::before {
+                    mask-image: url("$(res)/img/feather-customised/check.svg");
+                    background-color: $accent;
+                }
+            }
+
+            &.mx_AccessSecretStorageDialog_recoveryKeyFeedback--invalid {
+                color: $alert;
+
+                &::before {
+                    mask-image: url("@vector-im/compound-design-tokens/icons/close.svg");
+                    background-color: $alert;
+                }
+            }
+        }
+
+        .mx_Dialog_buttons {
+            $spacingStart: $spacing-24; /* 16px icon + 8px padding */
+
+            text-align: initial;
+            display: flex;
+            flex-flow: column;
+            gap: 14px;
+
+            .mx_Dialog_buttons_additive {
+                float: none;
+
+                .mx_AccessSecretStorageDialog_reset {
+                    position: relative;
+                    padding-inline-start: $spacingStart;
+                    /* To avoid bold styling inherent with <strong> elements */
+                    font-weight: inherit;
+
+                    &::before {
+                        content: "";
+                        display: inline-block;
+                        position: absolute;
+                        height: 16px;
+                        width: 16px;
+                        left: 0;
+                        top: 2px; /* alignment */
+                        background-image: url("$(res)/img/element-icons/warning-badge.svg");
+                        background-size: contain;
+                    }
+
+                    .mx_AccessSecretStorageDialog_reset_link {
+                        color: $alert;
+                    }
+                }
+            }
+
+            .mx_Dialog_buttons_row {
+                gap: $spacing-16; /* TODO: needs normalization */
+                padding-inline-start: $spacingStart;
+            }
+        }
+    }
+}
--- a/res/css/views/dialogs/security/_CreateCrossSigningDialog.pcss
+++ b/res/css/views/dialogs/security/_CreateCrossSigningDialog.pcss
@@ -0,0 +1,25 @@
+/*
+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.
+*/
+
+.mx_CreateCrossSigningDialog {
+    /* Why you ask? Because CompleteSecurityBody is 600px so this is the width */
+    /* we end up when in there, but when in our own dialog we set our own width */
+    /* so need to fix it to something sensible as otherwise we'd end up either */
+    /* really wide or really narrow depending on the phase. I bet you wish you */
+    /* never asked. */
+    width: 560px;
+
+    details .mx_AccessibleButton {
+        margin: 1em 0; /* emulate paragraph spacing because we can't put this button in a paragraph due to HTML rules */
+    }
+}
+
+.mx_CreateCrossSigningDialog .mx_Dialog_title {
+    /* TODO: Consider setting this for all dialog titles. */
+    margin-bottom: 1em;
+}
--- a/res/css/views/dialogs/security/_CreateKeyBackupDialog.pcss
+++ b/res/css/views/dialogs/security/_CreateKeyBackupDialog.pcss
@@ -0,0 +1,73 @@
+/*
+Copyright 2018-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_CreateKeyBackupDialog .mx_Dialog_title {
+    /* TODO: Consider setting this for all dialog titles. */
+    margin-bottom: 1em;
+}
+
+.mx_CreateKeyBackupDialog_primaryContainer {
+    /* FIXME: plinth colour in new theme(s). background-color: $accent; */
+    padding: 20px;
+}
+
+.mx_CreateKeyBackupDialog_primaryContainer::after {
+    content: "";
+    clear: both;
+    display: block;
+}
+
+.mx_CreateKeyBackupDialog_passPhraseContainer {
+    display: flex;
+    align-items: flex-start;
+}
+
+.mx_CreateKeyBackupDialog_passPhraseInput {
+    flex: none;
+    width: 250px;
+    border: 1px solid $accent;
+    border-radius: 5px;
+    padding: 10px;
+    margin-bottom: 1em;
+}
+
+.mx_CreateKeyBackupDialog_passPhraseMatch {
+    margin-left: 20px;
+}
+
+.mx_CreateKeyBackupDialog_recoveryKeyHeader {
+    margin-bottom: 1em;
+}
+
+.mx_CreateKeyBackupDialog_recoveryKeyContainer {
+    display: flex;
+}
+
+.mx_CreateKeyBackupDialog_recoveryKey {
+    width: 262px;
+    padding: 20px;
+    color: $info-plinth-fg-color;
+    background-color: $info-plinth-bg-color;
+    margin-right: 12px;
+}
+
+.mx_CreateKeyBackupDialog_recoveryKeyButtons {
+    flex: 1;
+    display: flex;
+    align-items: center;
+}
+
+.mx_CreateKeyBackupDialog_recoveryKeyButtons button {
+    flex: 1;
+    white-space: nowrap;
+}
+
+.mx_CreateKeyBackupDialog {
+    details .mx_AccessibleButton {
+        margin: 1em 0; /* emulate paragraph spacing because we can't put this button in a paragraph due to HTML rules */
+    }
+}
--- a/res/css/views/dialogs/security/_CreateSecretStorageDialog.pcss
+++ b/res/css/views/dialogs/security/_CreateSecretStorageDialog.pcss
@@ -0,0 +1,178 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2019, 2020 The Matrix.org Foundation C.I.C.
+Copyright 2018 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_CreateSecretStorageDialog {
+    /* Why you ask? Because CompleteSecurityBody is 600px so this is the width */
+    /* we end up when in there, but when in our own dialog we set our own width */
+    /* so need to fix it to something sensible as otherwise we'd end up either */
+    /* really wide or really narrow depending on the phase. I bet you wish you */
+    /* never asked. */
+    width: 560px;
+
+    &.mx_SuccessDialog {
+        padding: 56px; /* 80px from design - 24px wrapper padding */
+
+        .mx_Dialog_title {
+            margin-bottom: $spacing-16;
+        }
+    }
+
+    .mx_SettingsFlag {
+        display: flex;
+    }
+
+    .mx_SettingsFlag_label {
+        flex: 1 1 0;
+        min-width: 0;
+        font-weight: var(--cpd-font-weight-semibold);
+    }
+
+    .mx_ToggleSwitch {
+        flex: 0 0 auto;
+        margin-left: 30px;
+    }
+
+    details .mx_AccessibleButton {
+        margin: 1em 0; /* emulate paragraph spacing because we can't put this button in a paragraph due to HTML rules */
+    }
+}
+
+.mx_CreateSecretStorageDialog .mx_Dialog_title {
+    /* TODO: Consider setting this for all dialog titles. */
+    margin-bottom: 1em;
+}
+
+.mx_CreateSecretStorageDialog_titleWithIcon::before {
+    content: "";
+    display: inline-block;
+    width: 24px;
+    height: 24px;
+    margin-right: 8px;
+    position: relative;
+    top: 5px;
+    background-color: $primary-content;
+}
+
+.mx_CreateSecretStorageDialog_secureBackupTitle::before {
+    mask-image: url("$(res)/img/feather-customised/secure-backup.svg");
+}
+
+.mx_CreateSecretStorageDialog_securePhraseTitle::before {
+    mask-image: url("$(res)/img/feather-customised/secure-phrase.svg");
+}
+
+.mx_CreateSecretStorageDialog_centeredTitle,
+.mx_CreateSecretStorageDialog_centeredBody {
+    text-align: center;
+}
+
+.mx_CreateSecretStorageDialog_primaryContainer {
+    /* FIXME: plinth colour in new theme(s). background-color: $accent; */
+    padding-top: 20px;
+
+    &.mx_CreateSecretStorageDialog_recoveryKeyPrimarycontainer {
+        display: flex;
+        justify-content: center;
+    }
+}
+
+.mx_CreateSecretStorageDialog_primaryContainer::after {
+    content: "";
+    clear: both;
+    display: block;
+}
+
+.mx_CreateSecretStorageDialog_primaryContainer .mx_StyledRadioButton {
+    margin-bottom: 16px;
+    padding: 11px;
+}
+
+.mx_CreateSecretStorageDialog_optionTitle {
+    color: $dialog-title-fg-color;
+    font-weight: var(--cpd-font-weight-semibold);
+    font-size: $font-18px;
+    padding-bottom: 10px;
+}
+
+.mx_CreateSecretStorageDialog_optionIcon {
+    display: inline-block;
+    width: 24px;
+    height: 24px;
+    margin-right: 8px;
+    position: relative;
+    top: 5px;
+    background-color: $primary-content;
+}
+
+.mx_CreateSecretStorageDialog_optionIcon_securePhrase {
+    mask-image: url("$(res)/img/feather-customised/secure-phrase.svg");
+}
+
+.mx_CreateSecretStorageDialog_optionIcon_secureBackup {
+    mask-image: url("$(res)/img/feather-customised/secure-backup.svg");
+}
+
+.mx_CreateSecretStorageDialog_passPhraseContainer {
+    display: flex;
+    align-items: flex-start;
+}
+
+.mx_Field.mx_CreateSecretStorageDialog_passPhraseField {
+    margin-top: 0px;
+}
+
+.mx_CreateSecretStorageDialog_passPhraseMatch {
+    width: 200px;
+    margin-left: 20px;
+}
+
+.mx_CreateSecretStorageDialog_recoveryKeyContainer {
+    display: inline-block;
+}
+
+.mx_CreateSecretStorageDialog_recoveryKey {
+    font-weight: bold;
+    text-align: center;
+    padding: 20px;
+    color: $info-plinth-fg-color;
+    background-color: $info-plinth-bg-color;
+    border-radius: 6px;
+    word-spacing: 1em;
+    margin-bottom: 20px;
+
+    code {
+        display: inline-block;
+        width: 30rem;
+    }
+}
+
+.mx_CreateSecretStorageDialog_recoveryKeyButtons {
+    align-items: center;
+    display: flex;
+    gap: 16px;
+}
+
+.mx_CreateSecretStorageDialog_recoveryKeyButtons_copyBtn {
+    flex-direction: column;
+}
+
+.mx_CreateSecretStorageDialog_recoveryKeyButtons .mx_AccessibleButton {
+    flex-grow: 1;
+    white-space: nowrap;
+}
+
+.mx_CreateSecretStorageDialog_continueSpinner {
+    margin-top: 33px;
+    text-align: right;
+}
+
+.mx_CreateSecretStorageDialog_continueSpinner img {
+    width: 20px;
+    height: 20px;
+}
--- a/res/css/views/dialogs/security/_KeyBackupFailedDialog.pcss
+++ b/res/css/views/dialogs/security/_KeyBackupFailedDialog.pcss
@@ -0,0 +1,32 @@
+/*
+Copyright 2018-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_KeyBackupFailedDialog .mx_Dialog_title {
+    margin-bottom: 32px;
+}
+
+.mx_KeyBackupFailedDialog_title {
+    position: relative;
+    padding-left: 45px;
+    padding-bottom: 10px;
+
+    &::before {
+        mask: url("$(res)/img/e2e/lock-warning-filled.svg");
+        mask-repeat: no-repeat;
+        background-color: $primary-content;
+        content: "";
+        position: absolute;
+        top: -6px;
+        right: 0;
+        bottom: 0;
+        left: 0;
+    }
+}
+
+.mx_KeyBackupFailedDialog .mx_Dialog_buttons {
+    margin-top: 36px;
+}
--- a/res/css/views/dialogs/security/_RestoreKeyBackupDialog.pcss
+++ b/res/css/views/dialogs/security/_RestoreKeyBackupDialog.pcss
@@ -0,0 +1,32 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2019 The Matrix.org Foundation C.I.C.
+Copyright 2018 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_RestoreKeyBackupDialog_keyStatus {
+    height: 30px;
+}
+
+.mx_RestoreKeyBackupDialog_primaryContainer {
+    /* FIXME: plinth colour in new theme(s). background-color: $accent; */
+    padding: 20px;
+}
+
+.mx_RestoreKeyBackupDialog_passPhraseInput,
+.mx_RestoreKeyBackupDialog_recoveryKeyInput {
+    width: 300px;
+    border: 1px solid $accent;
+    border-radius: 5px;
+    padding: 10px;
+}
+
+.mx_RestoreKeyBackupDialog_content > div {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    min-height: 110px; /* Empirically measured */
+}