Remove FTUE onboarding as it is incompatible with SSO/OIDC (#28943)

* Remove FTUE onboarding as it is incompatible with SSO/OIDC

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update tests

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Remove stale screenshots

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

res/css/_components.pcss

@@ -126,7 +126,6 @@
 @import "./views/context_menus/_RoomNotificationContextMenu.pcss";
 @import "./views/dialogs/_AddExistingToSpaceDialog.pcss";
 @import "./views/dialogs/_AnalyticsLearnMoreDialog.pcss";
-@import "./views/dialogs/_AppDownloadDialog.pcss";
 @import "./views/dialogs/_BugReportDialog.pcss";
 @import "./views/dialogs/_BulkRedactDialog.pcss";
 @import "./views/dialogs/_ChangelogDialog.pcss";
@@ -217,8 +216,6 @@
 @import "./views/elements/_TagComposer.pcss";
 @import "./views/elements/_TextWithTooltip.pcss";
 @import "./views/elements/_ToggleSwitch.pcss";
-@import "./views/elements/_UseCaseSelection.pcss";
-@import "./views/elements/_UseCaseSelectionButton.pcss";
 @import "./views/elements/_Validation.pcss";
 @import "./views/emojipicker/_EmojiPicker.pcss";
 @import "./views/location/_LocationPicker.pcss";
@@ -379,11 +376,6 @@
 @import "./views/toasts/_IncomingLegacyCallToast.pcss";
 @import "./views/toasts/_NonUrgentEchoFailureToast.pcss";
 @import "./views/typography/_Heading.pcss";
-@import "./views/user-onboarding/_UserOnboardingButton.pcss";
-@import "./views/user-onboarding/_UserOnboardingHeader.pcss";
-@import "./views/user-onboarding/_UserOnboardingList.pcss";
-@import "./views/user-onboarding/_UserOnboardingPage.pcss";
-@import "./views/user-onboarding/_UserOnboardingTask.pcss";
 @import "./views/verification/_VerificationShowSas.pcss";
 @import "./views/voip/LegacyCallView/_LegacyCallViewButtons.pcss";
 @import "./views/voip/_CallDuration.pcss";

res/css/views/dialogs/_AppDownloadDialog.pcss

@@ -1,77 +0,0 @@
-.mx_AppDownloadDialog {
-    display: flex;
-    flex-direction: column;
-    gap: $spacing-32;
-    color: $primary-content;
-
-    &.mx_Dialog_fixedWidth {
-        width: 640px;
-    }
-
-    .mx_AppDownloadDialog_desktop {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        gap: $spacing-16;
-    }
-
-    .mx_AppDownloadDialog_mobile {
-        display: flex;
-        flex-direction: row;
-        gap: $spacing-24;
-
-        .mx_AppDownloadDialog_app {
-            display: flex;
-            flex-direction: column;
-            flex-grow: 1;
-            flex-basis: 50%;
-            align-items: center;
-            gap: $spacing-16;
-
-            .mx_QRCode {
-                /* intentionally hardcoded color to ensure the QR code is readable in any situation */
-                background: #ffffff;
-
-                padding: $spacing-24;
-                border: 1px solid $quinary-content;
-                border-radius: 4px;
-                align-self: stretch;
-                display: flex;
-                align-items: center;
-                flex-direction: column;
-
-                .mx_VerificationQRCode {
-                    height: 144px;
-                    width: 144px;
-                    image-rendering: pixelated;
-                    border-radius: 0;
-                }
-            }
-
-            .mx_AppDownloadDialog_info {
-                font-size: $font-12px;
-                color: $tertiary-content;
-            }
-
-            .mx_AppDownloadDialog_links {
-                display: flex;
-                flex-direction: row;
-                gap: $spacing-8;
-
-                .mx_AccessibleButton {
-                    svg {
-                        height: 40px;
-                    }
-                }
-            }
-        }
-    }
-
-    .mx_AppDownloadDialog_legal {
-        p {
-            margin: 0;
-            font-size: $font-12px;
-            color: $tertiary-content;
-        }
-    }
-}

res/css/views/elements/_UseCaseSelection.pcss

@@ -1,122 +0,0 @@
-/*
-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 OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-.mx_UseCaseSelection {
-    display: grid;
-    grid-template-rows: 1fr 1fr max-content 2fr;
-    height: 100%;
-    grid-gap: $spacing-40;
-
-    .mx_UseCaseSelection_title {
-        display: flex;
-        flex-direction: column;
-        justify-content: flex-end;
-
-        h1 {
-            font-weight: var(--cpd-font-weight-semibold);
-            font-size: $font-32px;
-            text-align: center;
-        }
-    }
-
-    .mx_UseCaseSelection_info {
-        display: flex;
-        flex-direction: column;
-        gap: $spacing-8;
-        align-self: flex-end;
-
-        h2 {
-            margin: 0;
-            font-weight: 500;
-            font-size: $font-24px;
-            text-align: center;
-        }
-
-        h3 {
-            margin: 0;
-            font-weight: 400;
-            font-size: $font-16px;
-            color: $secondary-content;
-            text-align: center;
-        }
-    }
-
-    .mx_UseCaseSelection_options {
-        display: grid;
-        grid-template-columns: repeat(auto-fit, 232px);
-        gap: $spacing-32;
-        align-self: stretch;
-        justify-content: center;
-    }
-
-    .mx_UseCaseSelection_skip {
-        display: flex;
-        flex-direction: column;
-        align-self: flex-start;
-    }
-}
-
-.mx_UseCaseSelection_slideIn {
-    animation-delay: 800ms;
-    animation-duration: 300ms;
-    animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
-    animation-name: mx_UseCaseSelection_slideInLong;
-    animation-fill-mode: backwards;
-    will-change: opacity;
-}
-
-.mx_UseCaseSelection_slideInDelayed {
-    animation-delay: 1500ms;
-    animation-duration: 300ms;
-    animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
-    animation-name: mx_UseCaseSelection_slideInShort;
-    animation-fill-mode: backwards;
-    will-change: transform, opacity;
-}
-
-.mx_UseCaseSelection_selected {
-    .mx_UseCaseSelection_slideIn,
-    .mx_UseCaseSelection_slideInDelayed {
-        animation-delay: 800ms;
-        animation-duration: 300ms;
-        animation-fill-mode: forwards;
-        animation-name: mx_UseCaseSelection_fadeOut;
-        will-change: opacity;
-    }
-}
-
-@keyframes mx_UseCaseSelection_slideInLong {
-    0% {
-        transform: translate(0, 20px);
-        opacity: 0;
-    }
-    100% {
-        transform: translate(0, 0);
-        opacity: 1;
-    }
-}
-
-@keyframes mx_UseCaseSelection_slideInShort {
-    0% {
-        transform: translate(0, 8px);
-        opacity: 0;
-    }
-    100% {
-        transform: translate(0, 0);
-        opacity: 1;
-    }
-}
-
-@keyframes mx_UseCaseSelection_fadeOut {
-    0% {
-        opacity: 1;
-    }
-    100% {
-        opacity: 0;
-    }
-}

res/css/views/elements/_UseCaseSelectionButton.pcss

@@ -1,98 +0,0 @@
-/*
-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 OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-.mx_UseCaseSelectionButton {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    padding: $spacing-24 $spacing-16;
-    background: $background;
-    border: 1px solid $quinary-content;
-    border-radius: 8px;
-    text-align: center;
-    position: relative;
-    transition-property: box-shadow, transform;
-    transition-duration: 300ms;
-
-    .mx_UseCaseSelectionButton_icon {
-        /* workaround: design expects a layering of two colors */
-        background: linear-gradient(0deg, rgba(172, 59, 168, 0.15), rgba(172, 59, 168, 0.15)), #ffffff;
-        border-radius: 14px;
-        padding: $spacing-8;
-        margin-bottom: $spacing-16;
-
-        &::before {
-            content: "";
-            display: block;
-            /* this has to remain the same color across all themes,
-               as its background has a fixed color as well */
-            background: #1e1e1e;
-            mask-position: center;
-            mask-repeat: no-repeat;
-            mask-size: contain;
-            width: 22px;
-            height: 22px;
-        }
-
-        &.mx_UseCaseSelectionButton_messaging::before {
-            mask-image: url("$(res)/img/element-icons/chat-bubble.svg");
-        }
-
-        &.mx_UseCaseSelectionButton_work::before {
-            mask-image: url("$(res)/img/element-icons/view-community.svg");
-        }
-
-        &.mx_UseCaseSelectionButton_community::before {
-            mask-image: url("@vector-im/compound-design-tokens/icons/public.svg");
-            mask-size: 24px;
-        }
-    }
-
-    &:hover,
-    &:focus {
-        box-shadow: 0 $spacing-4 $spacing-8 rgba(0, 0, 0, 0.08);
-        transform: translate(0, -$spacing-8);
-    }
-
-    .mx_UseCaseSelectionButton_selectedIcon {
-        right: -12px;
-        top: -12px;
-        position: absolute;
-        border-radius: 24px;
-        background: $accent;
-        padding: 6px;
-        transition-property: opacity, transform;
-        transition-duration: 150ms;
-        opacity: 0;
-        transform: scale(0.6);
-
-        &::before {
-            content: "";
-            display: block;
-            background: $background;
-            mask-position: center;
-            mask-repeat: no-repeat;
-            mask-size: contain;
-            width: 12px;
-            height: 12px;
-
-            mask-image: url("@vector-im/compound-design-tokens/icons/check.svg");
-        }
-    }
-
-    &.mx_UseCaseSelectionButton_selected {
-        border: 2px solid $accent;
-        padding: calc($spacing-24 - 1px) calc($spacing-16 - 1px);
-        box-shadow: 0 $spacing-4 $spacing-8 rgba(0, 0, 0, 0.08);
-
-        .mx_UseCaseSelectionButton_selectedIcon {
-            opacity: 1;
-            transform: scale(1);
-        }
-    }
-}

res/css/views/user-onboarding/_UserOnboardingButton.pcss

@@ -1,75 +0,0 @@
-/*
-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 OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-.mx_UserOnboardingButton {
-    display: flex;
-    flex-direction: column;
-    align-content: stretch;
-    align-items: stretch;
-    border-radius: 8px;
-    margin: $spacing-8 $spacing-8 0;
-    padding: $spacing-12;
-
-    &.mx_UserOnboardingButton_selected,
-    &:hover,
-    &:focus-within {
-        background-color: $panel-actions;
-    }
-
-    .mx_UserOnboardingButton_content {
-        display: flex;
-        flex-direction: row;
-        gap: 5px;
-        align-items: center;
-
-        .mx_Heading_h4 {
-            margin-right: auto;
-            font: var(--cpd-font-body-md-regular);
-            color: $primary-content;
-        }
-
-        .mx_UserOnboardingButton_percentage {
-            font-size: $font-12px;
-            color: $secondary-content;
-        }
-
-        .mx_UserOnboardingButton_close {
-            position: relative;
-            box-sizing: border-box;
-            width: 14px;
-            height: 14px;
-            border-radius: 7px;
-            border: 1px solid $secondary-content;
-            flex-shrink: 0;
-
-            &::before {
-                background-color: $secondary-content;
-                content: "";
-                mask-repeat: no-repeat;
-                mask-position: center;
-                mask-size: 12px;
-                width: inherit;
-                height: inherit;
-                position: absolute;
-                left: -1px;
-                top: -1px;
-                mask-image: url("@vector-im/compound-design-tokens/icons/close.svg");
-            }
-        }
-    }
-
-    .mx_ProgressBar {
-        width: auto;
-        margin-top: $spacing-8;
-        background: $background;
-    }
-
-    &.mx_UserOnboardingButton_completed .mx_ProgressBar {
-        display: none;
-    }
-}

res/css/views/user-onboarding/_UserOnboardingHeader.pcss

@@ -1,93 +0,0 @@
-/*
-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 OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-.mx_UserOnboardingHeader {
-    display: flex;
-    flex-direction: row;
-    padding: $spacing-32;
-    border-radius: 16px;
-    background: $system;
-    gap: $spacing-64;
-
-    animation-delay: 1500ms;
-    animation-duration: 300ms;
-    animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
-    animation-name: mx_UserOnboardingHeader_slideIn;
-    animation-fill-mode: backwards;
-    will-change: opacity, transform;
-
-    @media (max-width: 1280px) {
-        margin: $spacing-32;
-    }
-
-    .mx_UserOnboardingHeader_dot {
-        color: $accent;
-    }
-
-    .mx_UserOnboardingHeader_content {
-        display: flex;
-        flex-direction: column;
-        flex-basis: 50%;
-        flex-shrink: 1;
-        flex-grow: 1;
-        min-width: 0;
-        gap: $spacing-24;
-        margin-right: auto;
-
-        p {
-            margin: 0;
-        }
-
-        .mx_AccessibleButton {
-            margin-top: auto;
-            align-self: flex-start;
-            padding: $spacing-12 $spacing-24;
-        }
-    }
-
-    .mx_UserOnboardingHeader_image {
-        flex-basis: 30%;
-        flex-shrink: 1;
-        flex-grow: 1;
-        align-self: center;
-        height: calc(100% + $spacing-64 + $spacing-64);
-        aspect-ratio: 4 / 3;
-        object-fit: contain;
-        min-width: 0;
-        min-height: 0;
-        margin-top: -$spacing-64;
-        margin-bottom: -$spacing-64;
-
-        animation-delay: 1500ms;
-        animation-duration: 300ms;
-        animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
-        animation-name: mx_UserOnboardingHeader_slideInLong;
-        animation-fill-mode: backwards;
-        will-change: opacity, transform;
-    }
-}
-
-@keyframes mx_UserOnboardingHeader_slideIn {
-    0% {
-        transform: translate(0, 8px);
-        opacity: 0;
-    }
-    100% {
-        transform: translate(0, 0);
-        opacity: 1;
-    }
-}
-
-@keyframes mx_UserOnboardingHeader_slideInLong {
-    0% {
-        transform: translate(0, 32px);
-    }
-    100% {
-        transform: translate(0, 0);
-    }
-}

res/css/views/user-onboarding/_UserOnboardingList.pcss

@@ -1,67 +0,0 @@
-/*
-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 OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-.mx_UserOnboardingList {
-    display: flex;
-    flex-direction: column;
-    margin: 0 $spacing-32;
-
-    animation-duration: 300ms;
-    animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
-    animation-name: mx_UserOnboardingList_slideIn;
-    animation-fill-mode: backwards;
-    will-change: opacity;
-
-    .mx_UserOnboardingList_header {
-        display: flex;
-        flex-direction: row;
-        gap: 12px;
-        align-items: center;
-
-        .mx_UserOnboardingList_hint {
-            color: $secondary-content;
-        }
-    }
-
-    .mx_UserOnboardingList_progress {
-        display: flex;
-        flex-direction: column;
-        counter-reset: user-onboarding;
-
-        .mx_ProgressBar {
-            width: auto;
-            margin-top: $spacing-16;
-            height: 16px;
-
-            @mixin ProgressBarBorderRadius 16px;
-        }
-    }
-
-    .mx_UserOnboardingList_list {
-        display: grid;
-        grid-template-columns: max-content 1fr max-content;
-
-        appearance: none;
-        list-style: none;
-        margin: $spacing-32 0 0;
-        padding: 0;
-
-        grid-gap: $spacing-24;
-    }
-}
-
-@keyframes mx_UserOnboardingList_slideIn {
-    0% {
-        transform: translate(0, 8px);
-        opacity: 0;
-    }
-    100% {
-        transform: translate(0, 0);
-        opacity: 1;
-    }
-}

res/css/views/user-onboarding/_UserOnboardingPage.pcss

@@ -1,27 +0,0 @@
-/*
-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 OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-.mx_UserOnboardingPage {
-    width: 100%;
-    height: 100%;
-
-    align-self: stretch;
-    max-width: 1200px;
-    margin: 0 auto auto;
-
-    display: flex;
-    flex-direction: column;
-    box-sizing: border-box;
-
-    gap: $spacing-64;
-    padding: $spacing-64 100px;
-
-    @media (max-width: 1280px) {
-        padding: $spacing-48 $spacing-32;
-    }
-}

res/css/views/user-onboarding/_UserOnboardingTask.pcss

@@ -1,112 +0,0 @@
-/*
-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 OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-.mx_UserOnboardingTask {
-    display: contents;
-
-    .mx_UserOnboardingTask_number {
-        counter-increment: user-onboarding;
-        grid-column: 1;
-        color: $secondary-content;
-        width: 32px;
-        height: 32px;
-        text-align: center;
-        border: 2px solid $quinary-content;
-        border-radius: 32px;
-        line-height: 32px;
-        align-self: center;
-        position: relative;
-
-        &::before {
-            content: counter(user-onboarding);
-        }
-    }
-
-    .mx_UserOnboardingTask_content {
-        grid-column: 2;
-        display: flex;
-        flex-direction: column;
-        flex-grow: 1;
-        flex-shrink: 1;
-
-        transition: all 500ms;
-
-        .mx_UserOnboardingTask_title {
-            font: var(--cpd-font-body-md-medium);
-        }
-
-        .mx_UserOnboardingTask_description {
-            font-size: $font-12px;
-        }
-    }
-
-    .mx_UserOnboardingTask_action.mx_AccessibleButton {
-        grid-column: 3;
-        min-width: 180px;
-
-        @media (max-width: 800px) {
-            grid-column: 2;
-            margin-top: -16px;
-        }
-    }
-
-    &.mx_UserOnboardingTask_completed {
-        .mx_UserOnboardingTask_number {
-            &::before {
-                content: "";
-                position: absolute;
-                inset: -2px;
-                background: var(--cpd-color-icon-accent-tertiary);
-                border-radius: 32px;
-
-                animation-duration: 300ms;
-                animation-fill-mode: both;
-                animation-name: mx_UserOnboardingTask_spring;
-                will-change: opacity, transform;
-            }
-
-            &::after {
-                background-color: var(--cpd-color-icon-on-solid-primary);
-                content: "";
-                mask-repeat: no-repeat;
-                mask-position: center;
-                mask-size: 24px;
-                width: inherit;
-                height: inherit;
-                position: absolute;
-                left: 0;
-                top: 0;
-                mask-image: url("@vector-im/compound-design-tokens/icons/check.svg");
-
-                animation-duration: 300ms;
-                animation-fill-mode: both;
-                animation-name: mx_UserOnboardingTask_spring;
-                will-change: opacity, transform;
-            }
-        }
-
-        .mx_UserOnboardingTask_content {
-            opacity: 0.6;
-        }
-    }
-}
-
-@keyframes mx_UserOnboardingTask_spring {
-    0% {
-        opacity: 0;
-        transform: scale(0.6);
-    }
-    50% {
-        opacity: 1;
-        transform: scale(1.2);
-    }
-    100% {
-        opacity: 1;
-        transform: scale(1);
-    }
-}