Merge pull request #2526 from matrix-org/travis/settings/fixes-1

Round 1 of misc fixes for settings

res/css/_components.scss

@@ -142,6 +142,7 @@
 @import "./views/settings/tabs/_GeneralRoomSettingsTab.scss";
 @import "./views/settings/tabs/_GeneralUserSettingsTab.scss";
 @import "./views/settings/tabs/_HelpSettingsTab.scss";
+@import "./views/settings/tabs/_NotificationSettingsTab.scss";
 @import "./views/settings/tabs/_PreferencesSettingsTab.scss";
 @import "./views/settings/tabs/_RolesRoomSettingsTab.scss";
 @import "./views/settings/tabs/_SecurityRoomSettingsTab.scss";

res/css/views/settings/_Notifications.scss

@@ -44,12 +44,10 @@ limitations under the License.
 
 .mx_UserNotifSettings_pushRulesTable thead {
     font-weight: bold;
-    font-size: 15px;
 }
 
 .mx_UserNotifSettings_pushRulesTable tbody th {
     font-weight: 400;
-    font-size: 15px;
 }
 
 .mx_UserNotifSettings_pushRulesTable tbody th:first-child {

res/css/views/settings/tabs/_NotificationSettingsTab.scss

@@ -0,0 +1,19 @@
+/*
+Copyright 2019 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_NotificationSettingsTab .mx_SettingsTab_heading {
+  margin-bottom: 10px; // Give some spacing between the title and the first elements
+}

res/css/views/settings/tabs/_SettingsTab.scss

@@ -23,7 +23,8 @@ limitations under the License.
 .mx_SettingsTab_subheading {
   font-size: 14px;
   display: block;
-  font-family: $font-family-semibold;
+  font-family: $font-family;
+  font-weight: 600;
   color: $primary-fg-color;
   margin-bottom: 10px;
   margin-top: 12px;
@@ -59,4 +60,10 @@ limitations under the License.
   cursor: pointer;
   color: $accent-color;
   word-break: break-all;
-}
+}
+
+.mx_SettingsTab .mx_SettingsTab_subheading:nth-child(n + 2) {
+  // These views have a lot of the same repetitive information on it, so
+  // give them more visual distinction between the sections.
+  margin-top: 30px;
+}

res/themes/dharma/css/_dharma.scss

@@ -5,7 +5,6 @@
    horizontal mess.  Arial empirically gets it right, hence prioritising
    Arial here. */
 $font-family: 'Nunito', Arial, Helvetica, Sans-Serif;
-$font-family-semibold: 'Nunito SemiBold', Arial, Helvetica, Sans-Serif;
 
 // typical text (dark-on-white in light skin)
 $primary-fg-color: #454545;

res/themes/light/css/_base.scss

@@ -4,7 +4,6 @@
    horizontal mess.  Arial empirically gets it right, hence prioritising
    Arial here. */
 $font-family: 'Open Sans', Arial, Helvetica, Sans-Serif;
-$font-family-semibold: 'Open Sans', Arial, Helvetica, Sans-Serif;
 
 // typical text (dark-on-white in light skin)
 $primary-fg-color: #454545;

src/components/views/settings/tabs/HelpSettingsTab.js

@@ -140,9 +140,11 @@ export default class HelpSettingsTab extends React.Component {
                                              target='_blank'>{sub}</a>,
                         })
                     }
-                    <AccessibleButton onClick={this._onStartBotChat} kind='primary'>
+                    <div>
-                        {_t("Start a chat with Riot Bot")}
+                        <AccessibleButton onClick={this._onStartBotChat} kind='primary'>
-                    </AccessibleButton>
+                            {_t("Chat with Riot Bot")}
+                        </AccessibleButton>
+                    </div>
                 </div>
             );
         }

src/components/views/settings/tabs/NotificationSettingsTab.js

@@ -26,9 +26,9 @@ export default class NotificationSettingsTab extends React.Component {
     render() {
         const Notifications = sdk.getComponent("views.settings.Notifications");
         return (
-            <div className="mx_SettingsTab">
+            <div className="mx_SettingsTab mx_NotificationSettingsTab">
                 <div className="mx_SettingsTab_heading">{_t("Notifications")}</div>
-                <div className="mx_SettingsTab_section">
+                <div className="mx_SettingsTab_section mx_SettingsTab_subsectionText">
                     <Notifications />
                 </div>
             </div>