The Welcome Home Screen: Dedicated Download Apps Dialog (#9120)

* Implement new download apps dialog
* Added screenshot test for app download dialog

Author: justjanne

cypress/e2e/user-onboarding/user-onboarding-new.ts

@@ -52,6 +52,15 @@ describe("User Onboarding (new user)", () => {
         cy.percySnapshot("User onboarding page");
     });
 
+    it("app download dialog", () => {
+        cy.get('.mx_UserOnboardingPage').should('exist');
+        cy.contains(".mx_UserOnboardingTask_action", "Download apps").click();
+        cy.get('[role=dialog]')
+            .contains("#mx_BaseDialog_title", "Download Element")
+            .should("exist");
+        cy.percySnapshot("App download dialog");
+    });
+
     it("using find friends action should increase progress", () => {
         cy.get(".mx_ProgressBar").invoke("val").then((oldProgress) => {
             const findPeopleAction = cy.contains(".mx_UserOnboardingTask_action", "Find friends");

res/css/_components.pcss

@@ -94,6 +94,7 @@
 @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";

res/css/views/dialogs/_AppDownloadDialog.pcss

@@ -0,0 +1,70 @@
+.mx_AppDownloadDialog {
+    display: flex;
+    flex-direction: column;
+    gap: $spacing-32;
+    color: $primary-content;
+
+    .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 {
+                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;
+        }
+    }
+}