Implement Use Case Selection screen

cypress/e2e/1-register/register.spec.ts

@@ -65,6 +65,8 @@ describe("Registration", () => {
         cy.startMeasuring("from-submit-to-home");
         cy.get(".mx_InteractiveAuthEntryComponents_termsSubmit").click();
 
+        cy.get(".mx_UseCaseSelection_skip .mx_AccessibleButton").click();
+
         cy.url().should('contain', '/#/home');
         cy.stopMeasuring("from-submit-to-home");
 

cypress/e2e/12-spotlight/spotlight.spec.ts

@@ -357,7 +357,7 @@ describe("Spotlight", () => {
             cy.spotlightSearch().clear().type("b");
             // our debouncing logic only starts the search after a short timeout,
             // so we wait a few milliseconds.
-            cy.wait(300);
+            cy.wait(1000);
             cy.get(".mx_Spinner").should("not.exist").then(() => {
                 cy.spotlightResults().should("have.length", 2).then(() => {
                     cy.spotlightResults().eq(0)

package.json

@@ -56,7 +56,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.12.5",
-    "@matrix-org/analytics-events": "^0.1.1",
+    "@matrix-org/analytics-events": "^0.1.2",
     "@matrix-org/react-sdk-module-api": "^0.0.3",
     "@sentry/browser": "^6.11.0",
     "@sentry/tracing": "^6.11.0",

res/css/_components.scss

@@ -54,6 +54,7 @@
 @import "./structures/_SpaceHierarchy.scss";
 @import "./structures/_SpacePanel.scss";
 @import "./structures/_SpaceRoomView.scss";
+@import "./structures/_SplashPage.scss";
 @import "./structures/_TabbedView.scss";
 @import "./structures/_ToastContainer.scss";
 @import "./structures/_UploadBar.scss";
@@ -189,6 +190,8 @@
 @import "./views/elements/_ToggleSwitch.scss";
 @import "./views/elements/_Tooltip.scss";
 @import "./views/elements/_TooltipButton.scss";
+@import "./views/elements/_UseCaseSelection.scss";
+@import "./views/elements/_UseCaseSelectionButton.scss";
 @import "./views/elements/_Validation.scss";
 @import "./views/emojipicker/_EmojiPicker.scss";
 @import "./views/location/_LocationPicker.scss";

res/css/structures/_SplashPage.scss

@@ -0,0 +1,63 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_SplashPage {
+    position: relative;
+    height: 100%;
+
+    &::before {
+        content: "";
+        display: block;
+        position: absolute;
+        z-index: -1;
+        opacity: 0.6;
+        background-image:
+            radial-gradient(
+                53.85% 66.75% at 87.55% 0%,
+                hsla(250, 76%, 71%, 0.261) 0%,
+                hsla(250, 100%, 88%, 0) 100%
+            ),
+            radial-gradient(
+                41.93% 41.93% at 0% 0%,
+                hsla(222, 29%, 20%, 0.28) 0%,
+                hsla(250, 100%, 88%, 0) 100%
+            ),
+            radial-gradient(
+                100% 100% at 0% 0%,
+                hsla(250, 100%, 88%, 0.174) 0%,
+                hsla(0, 100%, 86%, 0) 100%
+            ),
+            radial-gradient(
+                106.35% 96.26% at 100% 0%,
+                hsla(250, 100%, 88%, 0.4) 0%,
+                hsla(167, 76%, 82%, 0) 100%
+            );
+        /* blur to reduce color banding issues due to alpha-blending multiple gradients */
+        filter: blur(8px);
+        inset: -9px;
+        mask:
+            /* mask to dither resulting combined gradient */
+            url("$(res)/img/noise.png"),
+            /* gradient to apply different amounts of dithering to different parts of the gradient */
+            linear-gradient(
+                to bottom,
+                /* 10% dithering at the top */
+                rgba(0, 0, 0, 0.9) 20%,
+                /* 80% dithering at the bottom */
+                rgba(0, 0, 0, 0.2) 100%
+            );
+    }
+}

res/css/views/elements/_UseCaseSelection.scss

@@ -0,0 +1,129 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.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: end;
+
+        h1 {
+            font-weight: 600;
+            font-size: $font-32px;
+            text-align: center;
+        }
+    }
+
+    .mx_UseCaseSelection_info {
+        display: flex;
+        flex-direction: column;
+        gap: $spacing-8;
+        align-self: end;
+
+        h2 {
+            margin: 0;
+            font-weight: 500;
+            font-size: $font-24px;
+            text-align: center;
+        }
+
+        h4 {
+            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: 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.scss

@@ -0,0 +1,104 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.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('$(res)/img/globe.svg');
+        }
+    }
+
+    &: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('$(res)/img/element-icons/check-white.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);
+        }
+    }
+}