Merge pull request #2233 from matrix-org/bwindels/roomlistvisuals

Redesign: Align visuals of room list with design

res/css/structures/_RoomSubList.scss

@@ -24,12 +24,14 @@ limitations under the License.
 .mx_RoomSubList_nonEmpty {
     min-height: 80px;
     flex: 1;
+    margin-bottom: 8px;
 }
 
 .mx_RoomSubList_labelContainer {
     display: flex;
     flex-direction: row;
     flex: 0 0 auto;
+    margin: 8px 19px 0 0;
 }
 
 .mx_RoomSubList_label {
@@ -56,20 +58,14 @@ limitations under the License.
 }
 
 .mx_RoomSubList_badge {
-    display: inline-block;
-    min-width: 15px;
-    height: 15px;
-    position: absolute;
-    right: 8px; /*gutter */
-    top: 7px;
-    border-radius: 8px;
+    height: 18px;
+    border-radius: 9px;
     color: $accent-fg-color;
     font-weight: 600;
-    font-size: 10px;
-    text-align: center;
-    padding-top: 1px;
-    padding-left: 4px;
-    padding-right: 4px;
+    font-size: 12px;
+    vertical-align: middle;
+    line-height: 18px;
+    padding: 0 4px;
     background-color: $accent-color;
 }
 
@@ -77,10 +73,13 @@ limitations under the License.
     filter: brightness($focus-brightness);
 }
 
+.mx_RoomSubList_addRoom, .mx_RoomSubList_badge {
+    margin: 5px;
+}
+
 .mx_RoomSubList_addRoom {
     background-color: $roomheader-addroom-color;
     color: $roomsublist-background;
-    margin: 5px 10px;
     border-radius: 9px;
     text-align: center;
     vertical-align: middle;

res/css/views/elements/_ResizeHandle.scss

@@ -18,7 +18,7 @@ limitations under the License.
     cursor: row-resize;
     flex: 0 0 auto;
     background: $panel-divider-color;
-    padding: 1px
+    background-clip: content-box;
 }
 
 .mx_ResizeHandle.mx_ResizeHandle_horizontal {

res/css/views/rooms/_RoomList.scss

@@ -62,3 +62,6 @@ limitations under the License.
     right: 60px;
 }
 
+.mx_RoomList .mx_ResizeHandle {
+    padding: 4px 0;
+}

res/css/views/rooms/_RoomTile.scss

@@ -20,7 +20,8 @@ limitations under the License.
     align-items: center;
     cursor: pointer;
     height: 40px;
-    margin: 0px 3px;
+    margin: 0 12px;
+    padding: 2px 12px;
     position: relative;
     background-color: $secondary-accent-color;
 }
@@ -34,10 +35,7 @@ limitations under the License.
 
 .mx_RoomTile_avatar {
     flex: 0;
-    padding-top: 4px;
-    padding-bottom: 4px;
-    padding-left: 14px;
-    padding-right: 12px;
+    padding: 4px;
     width: 32px;
     height: 32px;
 }
@@ -56,7 +54,7 @@ limitations under the License.
 
 .mx_RoomTile_name {
     flex: 1 5 auto;
-    font-size: 14px;
+    font-size: 16px;
     font-weight: 600;
     padding: 6px;
     color: $roomtile-name-color;
@@ -70,11 +68,21 @@ limitations under the License.
 }
 
 .collapsed {
+    .mx_RoomTile {
+        margin: 2px;
+        padding: 2px 0 2px 12px;
+    }
+
     .mx_RoomTile_name {
         display: none;
     }
 
     .mx_RoomTile_badge {
+        display: block;
+        position: absolute;
+        height: 15px;
+        right: 8px;
+        top: 2px;
         min-width: 12px;
         border-radius: 16px;
         padding: 0px 4px 0px 4px;
@@ -85,14 +93,6 @@ limitations under the License.
     .mx_RoomTile_highlight .mx_RoomTile_badge:after {
         display: none;
     }
-
-    .mx_RoomTile_badge {
-        display: block;
-        position: absolute;
-        height: 15px;
-        right: 5px;
-        top: 2px;
-    }
 }
 
 /* This is the bottom of the speech bubble */
@@ -113,7 +113,7 @@ limitations under the License.
     border-radius: 8px;
     color: $accent-fg-color;
     font-weight: 600;
-    font-size: 10px;
+    font-size: 12px;
     text-align: center;
     padding-top: 1px;
     padding-left: 4px;
@@ -141,15 +141,19 @@ limitations under the License.
 
 .mx_RoomTile_unread, .mx_RoomTile_highlight {
     font-weight: 800;
+
+    .mx_RoomTile_name {
+        color: $roomtile-selected-color;
+    }
 }
 
 .mx_RoomTile_selected {
     border-radius: 4px;
     background-color: $roomtile-selected-bg-color;
-}
 
-.mx_RoomTile_selected .mx_RoomTile_name {
-    color: $roomtile-selected-color;
+    .mx_RoomTile_name {
+        color: $roomtile-selected-color;
+    }
 }
 
 .mx_DNDRoomTile {

res/themes/dharma/css/_dharma.scss

@@ -20,7 +20,7 @@ $focus-bg-color: #dddddd;
 
 // button UI (white-on-green in light skin)
 $accent-fg-color: #ffffff;
-$accent-color: #76CFA6;
+$accent-color: #f56679;
 
 $selection-fg-color: $primary-bg-color;
 
@@ -127,7 +127,7 @@ $roomsublist-label-fg-color: $roomtile-name-color;
 $roomsublist-label-bg-color: $tertiary-accent-color;
 $roomsublist-chevron-color: $accent-color;
 
-$panel-divider-color: #ebedf8;
+$panel-divider-color: #dee1f3;
 
 // ********************
 

src/components/structures/RoomSubList.js

@@ -328,9 +328,9 @@ const RoomSubList = React.createClass({
                 <AccessibleButton onClick={ this.onClick } className="mx_RoomSubList_label" tabIndex={tabindex}>
                     { chevron }
                     { this.props.collapsed ? '' : this.props.label }
-                    { badge }
                     { incomingCall }
                 </AccessibleButton>
+                { badge }
                 { addRoomButton }
             </div>
         );
@@ -348,7 +348,7 @@ const RoomSubList = React.createClass({
                     {this._getHeaderJsx()}
                 </div>;
             } else {
-                const heightEstimation = (len * 40) + 31;
+                const heightEstimation = (len * 40) + 31 + (8 + 8);
                 const style = {
                     flexGrow: `${heightEstimation}`,
                     maxHeight: `${heightEstimation}px`,

src/settings/handlers/ConfigSettingsHandler.js

@@ -27,7 +27,7 @@ export default class ConfigSettingsHandler extends SettingsHandler {
 
         // Special case themes
         if (settingName === "theme") {
-            return config["default_theme"];
+            return "dharma"; // config["default_theme"];
         }
 
         const settingsConfig = config["settingDefaults"];