Merge pull request #5298 from matrix-org/jryans/2020-10-polishing

Visual tweaks from 2020-10-06 polishing

Author: jryans

res/css/_common.scss

@@ -262,7 +262,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
     font-weight: 300;
     font-size: $font-15px;
     position: relative;
-    padding: 25px 30px 30px 30px;
+    padding: 24px;
     max-height: 80%;
     box-shadow: 2px 15px 30px 0 $dialog-shadow-color;
     border-radius: 8px;

res/css/structures/_TabbedView.scss

@@ -17,14 +17,15 @@ limitations under the License.
 
 .mx_TabbedView {
     margin: 0;
-    padding: 0 0 0 58px;
+    padding: 0 0 0 16px;
     display: flex;
     flex-direction: column;
     position: absolute;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
+    margin-top: 8px;
 }
 
 .mx_TabbedView_tabLabels {
@@ -35,13 +36,13 @@ limitations under the License.
 }
 
 .mx_TabbedView_tabLabel {
+    display: flex;
+    align-items: center;
     vertical-align: text-top;
     cursor: pointer;
-    display: block;
-    border-radius: 3px;
-    font-size: $font-14px;
-    min-height: 24px; // use min-height instead of height to allow the label to overflow a bit
-    margin-bottom: 6px;
+    padding: 8px 0;
+    border-radius: 8px;
+    font-size: $font-13px;
     position: relative;
 }
 
@@ -51,9 +52,8 @@ limitations under the License.
 }
 
 .mx_TabbedView_maskedIcon {
-    margin-left: 6px;
-    margin-right: 9px;
-    margin-top: 1px;
+    margin-left: 8px;
+    margin-right: 16px;
     width: 16px;
     height: 16px;
     display: inline-block;
@@ -65,10 +65,9 @@ limitations under the License.
     mask-repeat: no-repeat;
     mask-size: 16px;
     width: 16px;
-    height: 22px;
+    height: 16px;
     mask-position: center;
     content: '';
-    vertical-align: middle;
 }
 
 .mx_TabbedView_tabLabel_active .mx_TabbedView_maskedIcon::before {

res/css/views/dialogs/_RoomSettingsDialog.scss

@@ -48,7 +48,6 @@ limitations under the License.
     white-space: nowrap;
     overflow: hidden;
     margin: 0 auto;
-    padding-left: 40px;
     padding-right: 80px;
 }
 

res/css/views/dialogs/_SettingsDialog.scss

@@ -36,7 +36,6 @@ limitations under the License.
     }
 
     .mx_Dialog_title {
-        text-align: center;
         margin-bottom: 24px;
     }
 }

res/css/views/right_panel/_BaseCard.scss

@@ -40,6 +40,7 @@ limitations under the License.
             width: 20px;
             margin: 12px;
             top: 0;
+            border-radius: 10px;
 
             &::before {
                 content: "";
@@ -55,7 +56,6 @@ limitations under the License.
         }
 
         .mx_BaseCard_back {
-            border-radius: 4px;
             left: 0;
 
             &::before {
@@ -66,7 +66,6 @@ limitations under the License.
         }
 
         .mx_BaseCard_close {
-            border-radius: 10px;
             right: 0;
 
             &::before {

res/css/views/rooms/_MemberList.scss

@@ -96,11 +96,21 @@ limitations under the License.
 }
 
 .mx_MemberList_invite span {
-    background-image: url('$(res)/img/element-icons/room/invite.svg');
-    background-repeat: no-repeat;
-    background-position: center left;
-    background-size: 20px;
-    padding: 8px 0 8px 25px;
+    padding: 8px 0;
+    display: inline-flex;
+
+    &::before {
+        content: '';
+        display: inline-block;
+        background-color: $button-fg-color;
+        mask-image: url('$(res)/img/element-icons/room/invite.svg');
+        mask-position: center;
+        mask-repeat: no-repeat;
+        mask-size: 20px;
+        width: 20px;
+        height: 20px;
+        margin-right: 5px;
+    }
 }
 
 .mx_MemberList_inviteCommunity span {