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>
This commit is contained in:
Michael Telatynski
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user