Merge pull request #1828 from vector-im/wmwragg/button-updates

Wmwragg/button updates

src/skins/vector/css/matrix-react-sdk/structures/SearchBox.css

@@ -28,11 +28,13 @@ limitations under the License.
 
 .mx_SearchBox_searchButton {
     margin-right: 10px;
+    margin-top: 5px;
     pointer-events: none;
 }
 
 .mx_SearchBox_closeButton {
     cursor: pointer;
+    margin-top: -5px;
 }
 
 .mx_SearchBox_search {
@@ -65,4 +67,4 @@ limitations under the License.
 
 .mx_SearchBox object {
     pointer-events: none;
-}
+}

src/skins/vector/css/matrix-react-sdk/views/rooms/RoomHeader.css

@@ -103,7 +103,8 @@ limitations under the License.
 .mx_RoomHeader_rightRow {
     margin-top: 4px;
     background-color: #fff;
-
+    display: flex;
+    align-items: center;
     -webkit-box-ordinal-group: 3;
     -moz-box-ordinal-group: 3;
     -ms-flex-order: 3;
@@ -161,13 +162,6 @@ limitations under the License.
     opacity: 0.6;
 }
 
-.mx_RoomHeader_settingsButton {
-    display: inline-block;
-    position: relative;
-    bottom: 10px;
-    left: 4px;
-}
-
 .mx_RoomHeader_settingsButton object {
     pointer-events: none;
 }
@@ -183,10 +177,6 @@ limitations under the License.
     color: #76cfa6;
 }
 
-.mx_RoomHeader_leaveButton {
-    margin-top: -1px;
-}
-
 .mx_RoomHeader_placeholder {
     color: #a2a2a2 ! important;
 }
@@ -243,10 +233,7 @@ limitations under the License.
 }
 
 .mx_RoomHeader_button {
-    display: table-cell;
-    vertical-align: top;
-    padding-left: 8px;
-    padding-right: 8px;
+    margin-left: 8px;
     cursor: pointer;
 }
 

src/skins/vector/css/vector-web/structures/RightPanel.css

@@ -43,7 +43,7 @@ limitations under the License.
 /** Fixme - factor this out with the main header **/
 
 .mx_RightPanel_headerButtonGroup {
-    margin-top: 25px;
+    margin-top: 6px;
     float: left;
     background-color: #fff;
     margin-left: -4px;
@@ -55,34 +55,27 @@ limitations under the License.
     vertical-align: middle;
     padding-left: 15px;
     padding-right: 15px;
+    text-align: center;
     position: relative;
 }
 
 .mx_RightPanel_headerButton object {
     pointer-events: none;
+    padding-bottom: 3px;
 }
 
 .mx_RightPanel_headerButton_highlight {
-    position: absolute;
-    bottom: -2px;
-    left: 10px;
     width: 25px;
-    height: 4px;
-    background-color: #76cfa6;
+    height: 5px;
+    border-radius: 5px;
+    background-color: rgba(118, 207, 166, 0.2);
 }
 
 .mx_RightPanel_headerButton_badge {
-    position: absolute;
-    top: 4px;
-    left: 28px;
-    font-size: 12px;
-    background-color: #76cfa6;
-    color: #fff;
+    font-size: 11px;
+    color: #76cfa6;
     font-weight: bold;
-    border-radius: 20px;
-    padding-left: 4px;
-    padding-right: 4px;
-    padding-top: 0px;
+    padding-bottom: 2px;
 }
 
 .mx_RightPanel .mx_MemberList,