New UX for ShareDialog

element-hq · Nov 29, 2024 · ccded1f · ccded1f
1 parent 2b4ce62
commit ccded1f
Show file tree

Hide file tree

Showing 4 changed files with 207 additions and 197 deletions.
diff --git a/res/css/_common.pcss b/res/css/_common.pcss
@@ -596,7 +596,7 @@ legend {
 .mx_Dialog
     button:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]):not(.mx_AccessibleButton):not(
         .mx_UserProfileSettings button
-    ):not(.mx_ThemeChoicePanel_CustomTheme button):not(.mx_UnpinAllDialog button),
+    ):not(.mx_ThemeChoicePanel_CustomTheme button):not(.mx_UnpinAllDialog button):not(.mx_ShareDialog button),
 .mx_Dialog input[type="submit"],
 .mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton),
 .mx_Dialog_buttons input[type="submit"] {
@@ -616,14 +616,16 @@ legend {
 .mx_Dialog
     button:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]):not(.mx_AccessibleButton):not(
         .mx_UserProfileSettings button
-    ):not(.mx_ThemeChoicePanel_CustomTheme button):not(.mx_UnpinAllDialog button):last-child {
+    ):not(.mx_ThemeChoicePanel_CustomTheme button):not(.mx_UnpinAllDialog button):not(
+        .mx_ShareDialog button
+    ):last-child {
     margin-right: 0px;
 }
 
 .mx_Dialog
     button:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]):not(.mx_AccessibleButton):not(
         .mx_UserProfileSettings button
-    ):not(.mx_ThemeChoicePanel_CustomTheme button):not(.mx_UnpinAllDialog button):focus,
+    ):not(.mx_ThemeChoicePanel_CustomTheme button):not(.mx_UnpinAllDialog button):not(.mx_ShareDialog button):focus,
 .mx_Dialog input[type="submit"]:focus,
 .mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton):focus,
 .mx_Dialog_buttons input[type="submit"]:focus {
@@ -635,7 +637,7 @@ legend {
 .mx_Dialog_buttons
     button.mx_Dialog_primary:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton):not(
         .mx_UserProfileSettings button
-    ):not(.mx_ThemeChoicePanel_CustomTheme button):not(.mx_UnpinAllDialog button),
+    ):not(.mx_ThemeChoicePanel_CustomTheme button):not(.mx_UnpinAllDialog button):not(.mx_ShareDialog button),
 .mx_Dialog_buttons input[type="submit"].mx_Dialog_primary {
     color: var(--cpd-color-text-on-solid-primary);
     background-color: var(--cpd-color-bg-action-primary-rest);
@@ -648,7 +650,7 @@ legend {
 .mx_Dialog_buttons
     button.danger:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton):not(.mx_UserProfileSettings button):not(
         .mx_ThemeChoicePanel_CustomTheme button
-    ):not(.mx_UnpinAllDialog button),
+    ):not(.mx_UnpinAllDialog button):not(.mx_ShareDialog button),
 .mx_Dialog_buttons input[type="submit"].danger {
     background-color: var(--cpd-color-bg-critical-primary);
     border: solid 1px var(--cpd-color-bg-critical-primary);
@@ -664,7 +666,7 @@ legend {
 .mx_Dialog
     button:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]):not(.mx_AccessibleButton):not(
         .mx_UserProfileSettings button
-    ):not(.mx_ThemeChoicePanel_CustomTheme button):not(.mx_UnpinAllDialog button):disabled,
+    ):not(.mx_ThemeChoicePanel_CustomTheme button):not(.mx_UnpinAllDialog button):not(.mx_ShareDialog button):disabled,
 .mx_Dialog input[type="submit"]:disabled,
 .mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton):disabled,
 .mx_Dialog_buttons input[type="submit"]:disabled {

diff --git a/res/css/views/dialogs/_ShareDialog.pcss b/res/css/views/dialogs/_ShareDialog.pcss
@@ -5,50 +5,73 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
 Please see LICENSE files in the repository root for full details.
 */
 
-.mx_ShareDialog hr {
-    margin-top: 25px;
-    margin-bottom: 25px;
-    border-color: $light-fg-color;
-}
+.mx_ShareDialog {
+    /* Value from figma design */
+    width: 416px;
+
+    .mx_Dialog_header {
+        text-align: center;
+        margin-bottom: var(--cpd-space-6x);
+        /* Override dialog header padding to able to center it */
+        padding-inline-end: 0;
+    }
 
-.mx_ShareDialog .mx_ShareDialog_content {
-    margin: 10px 0;
+    .mx_ShareDialog_content {
+        display: flex;
+        flex-direction: column;
+        gap: var(--cpd-space-6x);
+        align-items: center;
 
-    .mx_CopyableText {
-        width: unset; /* full width */
+        .mx_ShareDialog_top {
+            display: flex;
+            flex-direction: column;
+            gap: var(--cpd-space-4x);
+            align-items: center;
+            width: 100%;
 
-        > a {
-            text-decoration: none;
-            flex-shrink: 1;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
+            span {
+                text-align: center;
+                font: var(--cpd-font-body-sm-semibold);
+                color: var(--cpd-color-text-secondary);
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                overflow: hidden;
+                width: 100%;
+            }
         }
-    }
-}
 
-.mx_ShareDialog_split {
-    display: flex;
-    flex-wrap: wrap;
-}
+        label {
+            display: inline-flex;
+            gap: var(--cpd-space-3x);
+            justify-content: center;
+            align-items: center;
+            font: var(--cpd-font-body-md-medium);
+        }
 
-.mx_ShareDialog_qrcode_container {
-    float: left;
-    height: 256px;
-    width: 256px;
-    margin-right: 64px;
-}
+        button {
+            width: 100%;
+        }
 
-.mx_ShareDialog_qrcode_container + .mx_ShareDialog_social_container {
-    width: 299px;
-}
+        .mx_ShareDialog_social {
+            display: flex;
+            gap: var(--cpd-space-3x);
+            justify-content: center;
 
-.mx_ShareDialog_social_container {
-    display: inline-block;
-}
+            a {
+                /* 48px on figma but we need to add the border size */
+                width: 46px;
+                height: 46px;
+                border-radius: 99px;
+                border: 1px solid var(--cpd-color-border-interactive-secondary);
+                display: flex;
+                justify-content: center;
+                align-items: center;
 
-.mx_ShareDialog_social_icon {
-    display: inline-grid;
-    margin-right: 10px;
-    margin-bottom: 10px;
+                img {
+                    width: 24px;
+                    height: 24px;
+                }
+            }
+        }
+    }
 }