Adjust Settings styles

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;
     }
 }