Merge pull request #5383 from matrix-org/t3chguy/fix/15604

Tweaks to toasts and post-registration landing

Author: t3chguy

res/css/structures/_HomePage.scss

@@ -50,56 +50,88 @@ limitations under the License.
         color: $muted-fg-color;
     }
 
+    .mx_HomePage_userAvatar {
+        position: relative;
+        width: min-content;
+        margin: 0 auto;
+
+        &::before, &::after {
+            content: '';
+            position: absolute;
+
+            height: 26px;
+            width: 26px;
+
+            right: -6px;
+            bottom: -6px;
+        }
+
+        &::before {
+            background-color: $primary-bg-color;
+            border-radius: 50%;
+            z-index: 1;
+        }
+
+        &::after {
+            background-color: $secondary-fg-color;
+            mask-position: center;
+            mask-repeat: no-repeat;
+            mask-image: url('$(res)/img/element-icons/camera.svg');
+            mask-size: 16px;
+            z-index: 2;
+        }
+
+        &.mx_HomePage_userAvatar_busy::after {
+            background: url("$(res)/img/spinner.gif") no-repeat center;
+            background-size: 80%;
+            mask: unset;
+        }
+    }
+
     .mx_HomePage_default_buttons {
         margin: 80px auto 0;
         width: fit-content;
 
         .mx_AccessibleButton {
             padding: 73px 8px 15px; // top: 20px top padding + 40px icon + 13px margin
 
-            width: 104px; // 120px - 2* 8px
-            margin: 0 39px; // 55px - 2* 8px
+            width: 160px;
+            height: 132px;
+            margin: 0 20px;
             position: relative;
             display: inline-block;
             border-radius: 8px;
             vertical-align: top;
             word-break: break-word;
+            box-sizing: border-box;
 
             font-weight: 600;
             font-size: $font-15px;
             line-height: $font-20px;
-            color: $muted-fg-color;
-
-            &:hover {
-                color: $accent-color;
-                background: rgba($accent-color, 0.06);
-
-                &::before {
-                    background-color: $accent-color;
-                }
-            }
+            color: #fff; // on all themes
+            background-color: $accent-color;
 
             &::before {
                 top: 20px;
-                left: 40px; // (120px-40px)/2
+                left: 60px; // (160px-40px)/2
                 width: 40px;
                 height: 40px;
 
                 content: '';
                 position: absolute;
-                background-color: $muted-fg-color;
+                background-color: #fff; // on all themes
                 mask-repeat: no-repeat;
                 mask-size: contain;
             }
 
             &.mx_HomePage_button_sendDm::before {
-                mask-image: url('$(res)/img/feather-customised/message-circle.svg');
+                mask-image: url('$(res)/img/element-icons/feedback.svg');
             }
             &.mx_HomePage_button_explore::before {
-                mask-image: url('$(res)/img/feather-customised/explore.svg');
+                mask-image: url('$(res)/img/element-icons/roomlist/explore.svg');
             }
             &.mx_HomePage_button_createGroup::before {
-                mask-image: url('$(res)/img/feather-customised/group.svg');
+                mask-image: url('$(res)/img/element-icons/community-members.svg');
             }
         }
     }

res/css/views/rooms/_RoomSublist.scss

@@ -383,3 +383,22 @@ limitations under the License.
 .mx_RoomSublist_addRoomTooltip {
     margin-top: -3px;
 }
+
+.mx_RoomSublist_skeletonUI {
+    position: relative;
+    margin-left: 4px;
+    height: 288px;
+
+    &::before {
+        background: $roomsublist-skeleton-ui-bg;
+
+        width: 100%;
+        height: 100%;
+
+        content: '';
+        position: absolute;
+        mask-repeat: repeat-y;
+        mask-size: auto 48px;
+        mask-image: url('$(res)/img/element-icons/roomlist/skeleton-ui.svg');
+    }
+}

res/img/element-icons/camera.svg

@@ -117,6 +117,7 @@ $roomlist-filter-active-bg-color: $bg-color;
 $roomlist-bg-color: rgba(33, 38, 44, 0.90);
 $roomlist-header-color: $tertiary-fg-color;
 $roomsublist-divider-color: $primary-fg-color;
+$roomsublist-skeleton-ui-bg: linear-gradient(180deg, #3e444c 0%, #3e444c00 100%);
 
 $groupFilterPanel-divider-color: $roomlist-header-color;
 

res/img/element-icons/roomlist/skeleton-ui.svg

@@ -114,6 +114,7 @@ $roomlist-filter-active-bg-color: $roomlist-button-bg-color;
 $roomlist-bg-color: $header-panel-bg-color;
 
 $roomsublist-divider-color: $primary-fg-color;
+$roomsublist-skeleton-ui-bg: linear-gradient(180deg, #3e444c 0%, #3e444c00 100%);
 
 $groupFilterPanel-divider-color: $roomlist-header-color;
 

res/themes/dark/css/_dark.scss

@@ -181,6 +181,7 @@ $roomlist-filter-active-bg-color: $roomlist-button-bg-color;
 $roomlist-bg-color: $header-panel-bg-color;
 $roomlist-header-color: $primary-fg-color;
 $roomsublist-divider-color: $primary-fg-color;
+$roomsublist-skeleton-ui-bg: linear-gradient(180deg, #ffffff 0%, #ffffff00 100%);
 
 $groupFilterPanel-divider-color: $roomlist-header-color;
 

res/themes/legacy-dark/css/_legacy-dark.scss

@@ -175,6 +175,7 @@ $roomlist-filter-active-bg-color: #ffffff;
 $roomlist-bg-color: rgba(245, 245, 245, 0.90);
 $roomlist-header-color: $tertiary-fg-color;
 $roomsublist-divider-color: $primary-fg-color;
+$roomsublist-skeleton-ui-bg: linear-gradient(180deg, #ffffff 0%, #ffffff00 100%);
 
 $groupFilterPanel-divider-color: $roomlist-header-color;
 

res/themes/legacy-light/css/_legacy-light.scss

@@ -24,6 +24,7 @@ import {ActionPayload} from "./dispatcher/payloads";
 import {CheckUpdatesPayload} from "./dispatcher/payloads/CheckUpdatesPayload";
 import {Action} from "./dispatcher/actions";
 import {hideToast as hideUpdateToast} from "./toasts/UpdateToast";
+import {MatrixClientPeg} from "./MatrixClientPeg";
 
 export const SSO_HOMESERVER_URL_KEY = "mx_sso_hs_url";
 export const SSO_ID_SERVER_URL_KEY = "mx_sso_is_url";
@@ -105,6 +106,9 @@ export default abstract class BasePlatform {
      * @param newVersion the version string to check
      */
     protected shouldShowUpdate(newVersion: string): boolean {
+        // If the user registered on this client in the last 24 hours then do not show them the update toast
+        if (MatrixClientPeg.userRegisteredWithinLastHours(24)) return false;
+
         try {
             const [version, deferUntil] = JSON.parse(localStorage.getItem(UPDATE_DEFER_KEY));
             return newVersion !== version || Date.now() > deferUntil;

res/themes/light/css/_light.scss

@@ -100,6 +100,12 @@ export interface IMatrixClientPeg {
      */
     currentUserIsJustRegistered(): boolean;
 
+    /**
+     * If the current user has been registered by this device then this
+     * returns a boolean of whether it was within the last N hours given.
+     */
+    userRegisteredWithinLastHours(hours: number): boolean;
+
     /**
      * Replace this MatrixClientPeg's client with a client instance that has
      * homeserver / identity server URLs and active credentials
@@ -150,6 +156,9 @@ class _MatrixClientPeg implements IMatrixClientPeg {
 
     public setJustRegisteredUserId(uid: string): void {
         this.justRegisteredUserId = uid;
+        if (uid) {
+            window.localStorage.setItem("mx_registration_time", String(new Date().getTime()));
+        }
     }
 
     public currentUserIsJustRegistered(): boolean {
@@ -159,6 +168,15 @@ class _MatrixClientPeg implements IMatrixClientPeg {
         );
     }
 
+    public userRegisteredWithinLastHours(hours: number): boolean {
+        try {
+            const date = new Date(window.localStorage.getItem("mx_registration_time"));
+            return ((new Date().getTime() - date.getTime()) / 36e5) <= hours;
+        } catch (e) {
+            return false;
+        }
+    }
+
     public replaceUsingCreds(creds: IMatrixClientCreds): void {
         this.currentClientCreds = creds;
         this.createClient(creds);