Merge pull request element-hq#6160 from vector-im/luke/fix-room-list-drop-target-bg

ara4n · web-flow · commit 93c246208907 · 2018-02-23T16:36:14.000Z
Fix RoomDropTarget and emptySubListTip to have containers
diff --git a/src/components/views/rooms/RoomDropTarget.js b/src/components/views/rooms/RoomDropTarget.js
@@ -23,9 +23,11 @@ module.exports = React.createClass({
 
     render: function() {
         return (
-            <div className="mx_RoomDropTarget">
-                <div className="mx_RoomDropTarget_label">
-                    { this.props.label }
+            <div className="mx_RoomDropTarget_container">
+                <div className="mx_RoomDropTarget">
+                    <div className="mx_RoomDropTarget_label">
+                        { this.props.label }
+                    </div>
                 </div>
             </div>
         );
diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomList.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomList.scss
@@ -39,12 +39,16 @@ limitations under the License.
     z-index: 6;
 }
 
+.mx_RoomList_emptySubListTip_container {
+    background-color: $secondary-accent-color;
+    padding-left: 18px;
+    padding-right: 18px;
+    padding-top: 8px;
+    padding-bottom: 7px;
+}
+
 .mx_RoomList_emptySubListTip {
     font-size: 13px;
-    margin-left: 18px;
-    margin-right: 18px;
-    margin-top: 8px;
-    margin-bottom: 7px;
     padding: 5px;
     border: 1px dashed $accent-color;
     color: $primary-fg-color;
diff --git a/src/skins/vector/css/vector-web/views/rooms/_RoomDropTarget.scss b/src/skins/vector/css/vector-web/views/rooms/_RoomDropTarget.scss
@@ -14,12 +14,21 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+.mx_RoomDropTarget_container {
+    background-color: $secondary-accent-color;
+    padding-left: 18px;
+    padding-right: 18px;
+    padding-top: 8px;
+    padding-bottom: 7px;
+}
+
+.collapsed .mx_RoomDropTarget_container {
+    padding-right: 10px;
+    padding-left: 10px;
+}
+
 .mx_RoomDropTarget {
     font-size: 13px;
-    margin-left: 18px;
-    margin-right: 18px;
-    margin-top: 8px;
-    margin-bottom: 7px;
     padding-top: 5px;
     padding-bottom: 5px;
     border: 1px dashed $accent-color;
@@ -28,10 +37,6 @@ limitations under the License.
     border-radius: 4px;
 }
 
-.collapsed .mx_RoomDropTarget {
-    margin-right: 10px;
-    margin-left: 10px;
-}
 
 .mx_RoomDropTarget_label {
     position: relative;
