Initial attempt at building a use case selection screen

res/css/_components.scss

@@ -133,6 +133,7 @@
 @import "./views/dialogs/_TermsDialog.scss";
 @import "./views/dialogs/_UntrustedDeviceDialog.scss";
 @import "./views/dialogs/_UploadConfirmDialog.scss";
+@import "./views/dialogs/_UseCaseDialog.scss";
 @import "./views/dialogs/_UserSettingsDialog.scss";
 @import "./views/dialogs/_WidgetCapabilitiesPromptDialog.scss";
 @import "./views/dialogs/security/_AccessSecretStorageDialog.scss";

res/css/views/dialogs/_UseCaseDialog.scss

@@ -0,0 +1,179 @@
+.mx_UseCaseDialog {
+    display: grid;
+    grid-template-rows: 1fr 1fr max-content 2fr;
+    height: 100%;
+    position: relative;
+    grid-gap: $spacing-40;
+
+    &::before {
+        /* Once we drop support for Firefox 102, remove this entire pseudo-element, move the background to the
+           .mx_UseCaseDialog, and use backdrop-filter for the blur instead. */
+        content: "";
+        display: block;
+        position: absolute;
+        z-index: -1;
+        opacity: 0.6;
+        background-color: #ffffff;
+        /* Intermediate values generated compared to the original figma design to compensate for issues with
+           gamma-incorrect gradient blending in browsers */
+        background-image:
+            radial-gradient(53.85% 66.75% at 87.55% 0%,
+                hsla(250, 76%, 71%, 0.261) 0%,
+                hsla(251, 83%, 79%, 0.1305) 50%,
+                hsla(250, 100%, 88%, 0) 100%),
+            radial-gradient(41.93% 41.93% at 0% 0%,
+                hsla(222, 29%, 20%, 0.28) 0%,
+                hsla(240, 17%, 53%, 0.14) 50%,
+                hsla(250, 100%, 88%, 0) 100%),
+            radial-gradient(100% 100% at 0% 0%,
+                hsla(250, 100%, 88%, 0.2436) 0%,
+                hsla(318, 50%, 82%, 0.1218) 50%,
+                hsla(0, 100%, 86%, 0) 100%),
+            radial-gradient(106.35% 96.26% at 100% 0%,
+                hsla(250, 100%, 88%, 0.4) 0%,
+                hsla(208, 67%, 85%, 0.2) 50%,
+                hsla(167, 76%, 82%, 0) 100%);
+        /* Ugly hack to allow us to get rid of the color banding of the gradients */
+        /* Can be replaced with backdrop-filter, replacing the hack below, after we stop supporting Firefox 102 */
+        filter: blur(8px);
+        /* Even uglier hack to prevent the blur filter from causing white fringing at the edges */
+        left: -9px;
+        right: -9px;
+        top: -9px;
+        bottom: -9px;
+    }
+
+    .mx_UseCaseDialog_title {
+        display: flex;
+        flex-direction: column;
+        justify-content: end;
+
+        h1 {
+            /* Values from design, not yet replaced with variables */
+            font-weight: 600;
+            font-size: 32px;
+            line-height: 39px;
+            text-align: center;
+        }
+    }
+
+    .mx_UseCaseDialog_info {
+        display: flex;
+        flex-direction: column;
+        gap: $spacing-8;
+        align-self: end;
+
+        h2 {
+            /* Values from design, not yet replaced with variables */
+            margin: 0;
+            font-weight: 500;
+            font-size: 24px;
+            line-height: 32px;
+            text-align: center;
+        }
+
+        h4 {
+            /* Values from design, not yet replaced with variables */
+            margin: 0;
+            font-weight: 400;
+            font-size: 16px;
+            line-height: 19px;
+            color: $secondary-content;
+            text-align: center;
+        }
+    }
+
+    .mx_UseCaseDialog_options {
+        display: grid;
+        /* Values from design, not yet replaced with variables */
+        grid-template-columns: repeat(auto-fit, 230px);
+        gap: $spacing-32;
+        align-self: stretch;
+        justify-content: center;
+
+        .mx_UseCaseDialog_option {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            padding: $spacing-24 $spacing-16;
+            background: $background;
+            border: 1px solid $quinary-content;
+            border-radius: 8px;
+
+            .mx_UseCaseDialog_icon {
+                /* Values from design, not yet replaced with variables */
+                background: rgba(171, 59, 167, 0.15);
+                border-radius: 14px;
+                padding: $spacing-8;
+                margin-bottom: $spacing-16;
+
+                &::before {
+                    /* Values from design, not yet replaced with variables */
+                    content: "";
+                    display: block;
+                    background: #1E1E1E;
+                    mask-position: center;
+                    mask-repeat: no-repeat;
+                    mask-size: contain;
+                    width: 22px;
+                    height: 22px;
+                }
+
+                &.mx_UseCaseDialog_icon_messaging::before {
+                    mask-image: url('$(res)/img/element-icons/chat-bubble.svg');
+                }
+
+                &.mx_UseCaseDialog_icon_work::before {
+                    mask-image: url('$(res)/img/element-icons/view-community.svg');
+                }
+
+                &.mx_UseCaseDialog_icon_community::before {
+                    mask-image: url('$(res)/img/globe.svg');
+                }
+            }
+        }
+    }
+
+    .mx_UseCaseDialog_skip {
+        display: flex;
+        flex-direction: column;
+        align-self: start;
+    }
+}
+
+/* Animation duration, delay, and positioning not yet final */
+.mx_UseCaseDialog_fadeIn {
+    animation-delay: 100ms;
+    animation-duration: 1s;
+    animation-name: mx_UseCaseDialog_fadeIn;
+    animation-fill-mode: backwards;
+    will-change: opacity;
+}
+
+.mx_UseCaseDialog_slideIn {
+    animation-delay: 100ms;
+    animation-duration: 1s;
+    animation-name: mx_UseCaseDialog_slideIn;
+    animation-fill-mode: backwards;
+    will-change: transform, opacity;
+}
+
+@keyframes mx_UseCaseDialog_fadeIn {
+    0% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 1;
+    }
+}
+
+@keyframes mx_UseCaseDialog_slideIn {
+    0% {
+        transform: translate(0, 16px);
+        opacity: 0;
+    }
+    100% {
+        transform: translate(0, 0);
+        opacity: 1;
+    }
+}