From 0591c3a2bb9c999e98f198ecd0e095c44e580ef7 Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Tue, 29 Jan 2019 19:07:02 -0700 Subject: [PATCH 1/4] Change Riot Bot button text and make it a block element Fixes https://github.com/vector-im/riot-web/issues/8265 --- src/components/views/settings/tabs/HelpSettingsTab.js | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/components/views/settings/tabs/HelpSettingsTab.js b/src/components/views/settings/tabs/HelpSettingsTab.js index c0892cf448..524bddf3b1 100644 --- a/src/components/views/settings/tabs/HelpSettingsTab.js +++ b/src/components/views/settings/tabs/HelpSettingsTab.js @@ -140,9 +140,11 @@ export default class HelpSettingsTab extends React.Component { target='_blank'>{sub}, }) } - - {_t("Start a chat with Riot Bot")} - +
+ + {_t("Chat with Riot Bot")} + +
); } From 2aee2df6e9e8fee1ace395480c259cb84da59d77 Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Tue, 29 Jan 2019 19:11:04 -0700 Subject: [PATCH 2/4] Fix usage of semibold fonts Fixes https://github.com/vector-im/riot-web/issues/8275 --- res/css/views/settings/tabs/_SettingsTab.scss | 3 ++- res/themes/dharma/css/_dharma.scss | 1 - res/themes/light/css/_base.scss | 1 - 3 files changed, 2 insertions(+), 3 deletions(-) diff --git a/res/css/views/settings/tabs/_SettingsTab.scss b/res/css/views/settings/tabs/_SettingsTab.scss index 17f869b5b0..de4baca892 100644 --- a/res/css/views/settings/tabs/_SettingsTab.scss +++ b/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; diff --git a/res/themes/dharma/css/_dharma.scss b/res/themes/dharma/css/_dharma.scss index a02efb3f89..f976180144 100644 --- a/res/themes/dharma/css/_dharma.scss +++ b/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; diff --git a/res/themes/light/css/_base.scss b/res/themes/light/css/_base.scss index 7136b8834a..998325e1b7 100644 --- a/res/themes/light/css/_base.scss +++ b/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; From f050323f980cbf8d30c770c3be84a406436b9851 Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Tue, 29 Jan 2019 19:18:13 -0700 Subject: [PATCH 3/4] Inherit font size from other elements for push notifications table --- res/css/views/settings/_Notifications.scss | 2 -- src/components/views/settings/tabs/NotificationSettingsTab.js | 2 +- 2 files changed, 1 insertion(+), 3 deletions(-) diff --git a/res/css/views/settings/_Notifications.scss b/res/css/views/settings/_Notifications.scss index 4c88e44952..171b4c2e05 100644 --- a/res/css/views/settings/_Notifications.scss +++ b/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 { diff --git a/src/components/views/settings/tabs/NotificationSettingsTab.js b/src/components/views/settings/tabs/NotificationSettingsTab.js index 3a4e79f34c..a5d416cba2 100644 --- a/src/components/views/settings/tabs/NotificationSettingsTab.js +++ b/src/components/views/settings/tabs/NotificationSettingsTab.js @@ -28,7 +28,7 @@ export default class NotificationSettingsTab extends React.Component { return (
{_t("Notifications")}
-
+
From 4d0a2466297991d239865096f753ad12569963cd Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Tue, 29 Jan 2019 19:28:30 -0700 Subject: [PATCH 4/4] Put a little padding between section headings --- res/css/_components.scss | 1 + .../tabs/_NotificationSettingsTab.scss | 19 +++++++++++++++++++ res/css/views/settings/tabs/_SettingsTab.scss | 8 +++++++- .../settings/tabs/NotificationSettingsTab.js | 2 +- 4 files changed, 28 insertions(+), 2 deletions(-) create mode 100644 res/css/views/settings/tabs/_NotificationSettingsTab.scss diff --git a/res/css/_components.scss b/res/css/_components.scss index 5e7e9abd05..703e05bbaf 100644 --- a/res/css/_components.scss +++ b/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/_SecuritySettingsTab.scss"; @import "./views/settings/tabs/_SettingsTab.scss"; diff --git a/res/css/views/settings/tabs/_NotificationSettingsTab.scss b/res/css/views/settings/tabs/_NotificationSettingsTab.scss new file mode 100644 index 0000000000..da4511a4da --- /dev/null +++ b/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 +} \ No newline at end of file diff --git a/res/css/views/settings/tabs/_SettingsTab.scss b/res/css/views/settings/tabs/_SettingsTab.scss index de4baca892..b810bc5c7e 100644 --- a/res/css/views/settings/tabs/_SettingsTab.scss +++ b/res/css/views/settings/tabs/_SettingsTab.scss @@ -60,4 +60,10 @@ limitations under the License. cursor: pointer; color: $accent-color; word-break: break-all; -} \ No newline at end of file +} + +.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; +} diff --git a/src/components/views/settings/tabs/NotificationSettingsTab.js b/src/components/views/settings/tabs/NotificationSettingsTab.js index a5d416cba2..42d495f6ec 100644 --- a/src/components/views/settings/tabs/NotificationSettingsTab.js +++ b/src/components/views/settings/tabs/NotificationSettingsTab.js @@ -26,7 +26,7 @@ export default class NotificationSettingsTab extends React.Component { render() { const Notifications = sdk.getComponent("views.settings.Notifications"); return ( -
+
{_t("Notifications")}