diff --git a/plugins/talk-plugin-notifications-category-reply/client/components/Toggle.css b/plugins/talk-plugin-notifications-category-reply/client/components/Toggle.css
index b61b2fe4d..f888da616 100644
--- a/plugins/talk-plugin-notifications-category-reply/client/components/Toggle.css
+++ b/plugins/talk-plugin-notifications-category-reply/client/components/Toggle.css
@@ -1,3 +1,6 @@
-.innerSettings {
- padding-left: 24px;
+.title {
+ display: inline-block;
+ width: 270px;
+ cursor: pointer;
+ user-select: none;
}
diff --git a/plugins/talk-plugin-notifications-category-reply/client/components/Toggle.js b/plugins/talk-plugin-notifications-category-reply/client/components/Toggle.js
index fa32a0880..a44b064ca 100644
--- a/plugins/talk-plugin-notifications-category-reply/client/components/Toggle.js
+++ b/plugins/talk-plugin-notifications-category-reply/client/components/Toggle.js
@@ -3,16 +3,19 @@ import PropTypes from 'prop-types';
import { t } from 'plugin-api/beta/client/services';
import { Checkbox } from 'plugin-api/beta/client/components/ui';
import styles from './Toggle.css';
+import uuid from 'uuid/v4';
class Toggle extends React.Component {
+ id = uuid();
+
render() {
const { checked, onChange } = this.props;
return (
-
+
+
+
);
}
diff --git a/plugins/talk-plugin-notifications/client/components/Settings.css b/plugins/talk-plugin-notifications/client/components/Settings.css
index 2980501cc..e34a8adba 100644
--- a/plugins/talk-plugin-notifications/client/components/Settings.css
+++ b/plugins/talk-plugin-notifications/client/components/Settings.css
@@ -1,3 +1,7 @@
+.root {
+ margin-bottom: 20px;
+}
+
.innerSettings {
padding-left: 12px;
}
@@ -6,3 +10,18 @@
margin: 0;
margin-bottom: 8px;
}
+
+.turnOffButton {
+ padding: 2px 0;
+ color: #2099d6;
+ border-bottom: 1px solid #2099d6;
+
+ &:disabled {
+ color: #aaa;
+ border-bottom: 1px solid #aaa;
+ }
+}
+
+.notifcationSettingsSlot {
+ margin-bottom: 3px;
+}
diff --git a/plugins/talk-plugin-notifications/client/components/Settings.js b/plugins/talk-plugin-notifications/client/components/Settings.js
index 91523621a..dad6b2bed 100644
--- a/plugins/talk-plugin-notifications/client/components/Settings.js
+++ b/plugins/talk-plugin-notifications/client/components/Settings.js
@@ -27,22 +27,26 @@ class Settings extends React.Component {
return (
-
+
{t('talk-plugin-notifications.settings_title')}
{t('talk-plugin-notifications.settings_subtitle')}
-
- {' '}
- Turn Off All{' '}
+
+ {t('talk-plugin-notifications.turn_off_all')}
diff --git a/plugins/talk-plugin-notifications/client/translations.yml b/plugins/talk-plugin-notifications/client/translations.yml
index 2054f8ac1..9088e6493 100644
--- a/plugins/talk-plugin-notifications/client/translations.yml
+++ b/plugins/talk-plugin-notifications/client/translations.yml
@@ -2,3 +2,4 @@ en:
talk-plugin-notifications:
settings_title: Notifications
settings_subtitle: Receive notifications when
+ turn_off_all: I do not want to receive notifications