Merge pull request #4839 from matrix-org/travis/room-list/pixels

Tweak parts of the new room list design

res/css/_common.scss

@@ -596,14 +596,14 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
         }
 
         &:last-child {
-            padding-bottom: 20px;
+            padding-bottom: 16px;
         }
     }
 
     .mx_IconizedContextMenu_optionList {
         // the notFirst class is for cases where the optionList might be under a header of sorts.
         &:nth-child(n + 2), .mx_IconizedContextMenu_optionList_notFirst {
-            margin-top: 20px;
+            margin-top: 12px;
 
             // This is a bit of a hack when we could just use a simple border-top property,
             // however we have a (kinda) good reason for doing it this way: we need opacity.
@@ -634,7 +634,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
 
             li {
                 margin: 0;
-                padding: 20px 0 0;
+                padding: 12px 0 0;
 
                 .mx_AccessibleButton {
                     text-decoration: none;

res/css/structures/_LeftPanel2.scss

@@ -48,7 +48,7 @@ $tagPanelWidth: 70px; // only applies in this file, used for calculations
         flex-direction: column;
 
         .mx_LeftPanel2_userHeader {
-            padding: 14px 12px 20px; // 14px top, 12px sides, 20px bottom
+            padding: 12px 12px 20px; // 12px top, 12px sides, 20px bottom
 
             // Create another flexbox column for the rows to stack within
             display: flex;
@@ -65,6 +65,7 @@ $tagPanelWidth: 70px; // only applies in this file, used for calculations
             .mx_LeftPanel2_userAvatarContainer {
                 position: relative; // to make default avatars work
                 margin-right: 8px;
+                height: 32px; // to remove the unknown 4px gap the browser puts below it
 
                 .mx_LeftPanel2_userAvatar {
                     border-radius: 32px; // should match avatar size

res/css/structures/_UserMenuButton.scss

@@ -40,16 +40,21 @@ limitations under the License.
 .mx_UserMenuButton_contextMenu {
     width: 247px;
 
+    .mx_UserMenuButton_contextMenu_redRow {
+        .mx_AccessibleButton {
+            color: $warning-color !important; // !important to override styles from context menu
+        }
+
+        .mx_IconizedContextMenu_icon::before {
+            background-color: $warning-color;
+        }
+    }
+
     .mx_UserMenuButton_contextMenu_header {
         // Create a flexbox to organize the header a bit easier
         display: flex;
         align-items: center;
 
-        &:nth-child(n + 1) {
-            // The first header will have appropriate padding, subsequent ones need a margin.
-            margin-top: 10px;
-        }
-
         .mx_UserMenuButton_contextMenu_name {
             // Create another flexbox of columns to handle large user IDs
             display: flex;

res/css/views/rooms/_RoomSublist2.scss

@@ -130,9 +130,9 @@ limitations under the License.
             flex: 1;
             max-width: calc(100% - 16px); // 16px is the badge width
             text-transform: uppercase;
-            opacity: 0.5;
             line-height: $font-16px;
             font-size: $font-12px;
+            font-weight: 600;
 
             // Ellipsize any text overflow
             text-overflow: ellipsis;
@@ -414,6 +414,7 @@ limitations under the License.
         margin-bottom: 16px;
         margin-right: 16px; // additional 16px
         border: 1px solid $roomsublist2-divider-color;
+        opacity: 0.1;
     }
 
     .mx_RoomSublist2_contextMenu_title {

res/themes/dark/css/_dark.scss

@@ -113,7 +113,7 @@ $theme-button-bg-color: #e3e8f0;
 $roomlist2-button-bg-color: #1A1D23; // Buttons include the filter box, explore button, and sublist buttons
 $roomlist2-bg-color: $header-panel-bg-color;
 
-$roomsublist2-divider-color: #e9eaeb;
+$roomsublist2-divider-color: $primary-fg-color;
 
 $roomtile2-preview-color: #9e9e9e;
 $roomtile2-default-badge-bg-color: #61708b;

res/themes/light/css/_light.scss

@@ -180,7 +180,7 @@ $theme-button-bg-color: #e3e8f0;
 $roomlist2-button-bg-color: #fff; // Buttons include the filter box, explore button, and sublist buttons
 $roomlist2-bg-color: $header-panel-bg-color;
 
-$roomsublist2-divider-color: #e9eaeb;
+$roomsublist2-divider-color: $primary-fg-color;
 
 $roomtile2-preview-color: #9e9e9e;
 $roomtile2-default-badge-bg-color: #61708b;

src/components/structures/UserMenuButton.tsx

@@ -263,7 +263,7 @@ export default class UserMenuButton extends React.Component<IProps, IState> {
                         </div>
                         <div className="mx_IconizedContextMenu_optionList">
                             <ul>
-                                <li>
+                                <li className="mx_UserMenuButton_contextMenu_redRow">
                                     <AccessibleButton onClick={this.onSignOutClick}>
                                         <span className="mx_IconizedContextMenu_icon mx_UserMenuButton_iconSignOut" />
                                         <span>{_t("Sign out")}</span>