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>
This commit is contained in:
Michael Telatynski
2024-10-16 13:31:55 +01:00
committed by GitHub
parent 2b99496025
commit c05c429803
3280 changed files with 586617 additions and 905 deletions
@@ -0,0 +1,75 @@
/*
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_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;
}
}
@@ -0,0 +1,93 @@
/*
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_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);
}
}
@@ -0,0 +1,67 @@
/*
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_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;
}
}
@@ -0,0 +1,27 @@
/*
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_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;
}
}
@@ -0,0 +1,112 @@
/*
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_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);
}
}