Apply tweaks to Thread list as per design spec (#8149)

Co-authored-by: Germain Souquet <[email protected]>

res/css/views/right_panel/_ThreadPanel.scss

@@ -20,14 +20,17 @@ limitations under the License.
 
     .mx_BaseCard_header {
         margin-bottom: 12px;
+
         .mx_BaseCard_close,
         .mx_BaseCard_back {
             width: 24px;
             height: 24px;
         }
+
         .mx_BaseCard_back {
             left: -4px;
         }
+
         .mx_BaseCard_close {
             right: -4px;
         }
@@ -66,6 +69,7 @@ limitations under the License.
             --size: 24px;
             width: var(--size);
             height: var(--size);
+
             &::after {
                 mask-size: var(--size);
                 mask-image: url("$(res)/img/element-icons/message/overflow-large.svg");
@@ -99,11 +103,10 @@ limitations under the License.
     }
 
     .mx_AutoHideScrollbar {
-        background: #fff;
         background-color: $background;
         border-radius: 8px;
-        width: calc(100% - 16px);
-        padding-right: 16px;
+        width: calc(100% - 24px);
+        padding-right: 18px;
     }
 
     &.mx_ThreadView .mx_ThreadView_timelinePanelWrapper {
@@ -125,13 +128,15 @@ limitations under the License.
         padding-right: 0;
     }
 
-    .mx_EventTile, .mx_GenericEventListSummary {
+    .mx_EventTile,
+    .mx_GenericEventListSummary {
         // Account for scrollbar when hovering
         padding-top: 0;
 
         .mx_ThreadInfo {
             position: relative;
             padding-right: 11px;
+
             &::after {
                 content: '';
                 display: block;
@@ -157,6 +162,10 @@ limitations under the License.
         .mx_EventTile_e2eIcon {
             left: 8px;
         }
+
+        &:hover .mx_EventTile_line {
+            box-shadow: unset !important; // don't show the verification left stroke in the thread list
+        }
     }
 
     .mx_MessageComposer {
@@ -190,10 +199,6 @@ limitations under the License.
         float: right;
     }
 
-    .mx_ThreadPanel_dropdown[aria-expanded=true]::before {
-        transform: rotate(180deg);
-    }
-
     .mx_MessageTimestamp {
         font-size: $font-12px;
         color: $secondary-content;
@@ -272,26 +277,39 @@ limitations under the License.
 
     h2 {
         color: $primary-content;
-        font-weight: 600;
+        font-weight: $font-semi-bold;
         font-size: $font-18px;
+        margin-top: 24px;
+        margin-bottom: 10px;
     }
 
     p {
         font-size: $font-15px;
         color: $secondary-content;
+        margin: 10px 0;
     }
 
     button {
         border: none;
         background: none;
         color: $accent;
+        font-size: $font-15px;
 
         &:hover,
         &:active {
             text-decoration: underline;
             cursor: pointer;
         }
     }
+
+    .mx_ThreadPanel_empty_tip {
+        font-size: $font-12px;
+        line-height: $font-15px;
+
+        >b {
+            font-weight: $font-semi-bold;
+        }
+    }
 }
 
 .mx_ThreadPanel_largeIcon {
@@ -317,6 +335,7 @@ limitations under the License.
 .mx_ContextualMenu_wrapper.mx_ThreadPanel__header {
     .mx_ContextualMenu {
         position: initial;
+
         span:first-of-type {
             font-weight: $font-semi-bold;
             font-size: inherit;
@@ -336,6 +355,7 @@ limitations under the License.
         left: auto;
         right: 22px;
         border-bottom-color: $quinary-content;
+
         &::after {
             content: "";
             border: inherit;
@@ -357,10 +377,12 @@ limitations under the License.
         &:hover {
             background-color: $event-selected-color;
         }
+
         &[aria-checked="true"] {
             :first-child {
                 margin-left: -20px;
             }
+
             :first-child::before {
                 content: "";
                 width: 12px;