Merge branch 'develop' into gsouquet/switch-rooms

res/css/views/elements/_InlineSpinner.scss

@@ -18,7 +18,11 @@ limitations under the License.
     display: inline;
 }
 
-.mx_InlineSpinner_spin img {
+.mx_InlineSpinner img, .mx_InlineSpinner_icon {
     margin: 0px 6px;
     vertical-align: -3px;
 }
+
+.mx_InlineSpinner_icon {
+    display: inline-block;
+}

res/css/views/elements/_MiniAvatarUploader.scss

@@ -28,8 +28,7 @@ limitations under the License.
         top: 0;
     }
 
-    &::before, &::after {
-        content: '';
+    .mx_MiniAvatarUploader_indicator {
         position: absolute;
 
         height: 26px;
@@ -37,27 +36,22 @@ limitations under the License.
 
         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_MiniAvatarUploader_cameraIcon {
+            height: 100%;
+            width: 100%;
 
-    &.mx_MiniAvatarUploader_busy::after {
-        background: url("$(res)/img/spinner.gif") no-repeat center;
-        background-size: 80%;
-        mask: unset;
+            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;
+        }
     }
 }
 

res/css/views/elements/_Spinner.scss

@@ -26,3 +26,19 @@ limitations under the License.
 .mx_MatrixChat_middlePanel .mx_Spinner {
     height: auto;
 }
+
+@keyframes spin {
+    from {
+        transform: rotateZ(0deg);
+    }
+    to {
+        transform: rotateZ(360deg);
+    }
+}
+
+.mx_Spinner_icon {
+    background-color: $primary-fg-color;
+    mask: url('$(res)/img/spinner.svg');
+    mask-size: contain;
+    animation: 1.1s steps(12, end) infinite spin;
+}

res/css/views/messages/_MessageActionBar.scss

@@ -20,11 +20,12 @@ limitations under the License.
     visibility: hidden;
     cursor: pointer;
     display: flex;
-    height: 24px;
+    height: 32px;
     line-height: $font-24px;
-    border-radius: 4px;
-    background: $message-action-bar-bg-color;
-    top: -26px;
+    border-radius: 8px;
+    background: $primary-bg-color;
+    border: 1px solid $input-border-color;
+    top: -32px;
     right: 8px;
     user-select: none;
     // Ensure the action bar appears above over things, like the read marker.
@@ -51,31 +52,19 @@ limitations under the License.
         white-space: nowrap;
         display: inline-block;
         position: relative;
-        border: 1px solid $message-action-bar-border-color;
-        margin-left: -1px;
+        margin: 2px;
 
         &:hover {
-            border-color: $message-action-bar-hover-border-color;
+            background: $roomlist-button-bg-color;
+            border-radius: 6px;
             z-index: 1;
         }
-
-        &:first-child {
-            border-radius: 3px 0 0 3px;
-        }
-
-        &:last-child {
-            border-radius: 0 3px 3px 0;
-        }
-
-        &:only-child {
-            border-radius: 3px;
-        }
     }
 }
 
-
 .mx_MessageActionBar_maskButton {
-    width: 27px;
+    width: 28px;
+    height: 28px;
 }
 
 .mx_MessageActionBar_maskButton::after {
@@ -88,7 +77,11 @@ limitations under the License.
     mask-size: 18px;
     mask-repeat: no-repeat;
     mask-position: center;
-    background-color: $message-action-bar-fg-color;
+    background-color: $secondary-fg-color;
+}
+
+.mx_MessageActionBar_maskButton:hover::after {
+    background-color: $primary-fg-color;
 }
 
 .mx_MessageActionBar_reactButton::after {

res/css/views/right_panel/_RoomSummaryCard.scss

@@ -36,6 +36,7 @@ limitations under the License.
             -webkit-box-orient: vertical;
             overflow: hidden;
             text-overflow: ellipsis;
+            white-space: pre-wrap;
         }
 
         .mx_RoomSummaryCard_avatar {

res/css/views/rooms/_NewRoomIntro.scss

@@ -18,8 +18,8 @@ limitations under the License.
     margin: 40px 0 48px 64px;
 
     .mx_MiniAvatarUploader_hasAvatar:not(.mx_MiniAvatarUploader_busy):not(:hover) {
-        &::before, &::after {
-            content: unset;
+        .mx_MiniAvatarUploader_indicator {
+            display: none;
         }
     }
 

res/css/views/rooms/_RoomSublist.scss

@@ -61,8 +61,7 @@ limitations under the License.
             &.mx_RoomSublist_headerContainer_sticky {
                 position: fixed;
                 height: 32px; // to match the header container
-                // width set by JS
-                width: calc(100% - 22px);
+                width: calc(100% - 15px);
             }
 
             // We don't have a top style because the top is dependent on the room list header's