Refactor toggle

plugins/talk-plugin-notifications-category-reply/client/containers/Toggle.js

@@ -1,7 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { compose, gql } from 'react-apollo';
-import Toggle from '../components/Toggle';
+import Toggle from 'talk-plugin-notifications/client/components/Toggle';
+import { t } from 'plugin-api/beta/client/services';
 import { withFragments } from 'plugin-api/beta/client/hocs';
 
 class ToggleContainer extends React.Component {
@@ -34,7 +35,11 @@ class ToggleContainer extends React.Component {
   };
 
   render() {
-    return <Toggle checked={this.getOnReplySetting()} onChange={this.toggle} />;
+    return (
+      <Toggle checked={this.getOnReplySetting()} onChange={this.toggle}>
+        {t('talk-plugin-notifications-category-reply.toggle_description')}
+      </Toggle>
+    );
   }
 }
 

plugins/talk-plugin-notifications/client/components/Settings.css

@@ -17,8 +17,8 @@
   border-bottom: 1px solid #2099d6;
 
   &:disabled {
-    color: #aaa;
-    border-bottom: 1px solid #aaa;
+    color: #e5e5e5;
+    border-bottom: 1px solid #e5e5e5;
   }
 }
 

plugins/talk-plugin-notifications/client/components/Toggle.js

@@ -1,6 +1,5 @@
 import React from 'react';
 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';
@@ -9,11 +8,11 @@ class Toggle extends React.Component {
   id = uuid();
 
   render() {
-    const { checked, onChange } = this.props;
+    const { checked, onChange, children } = this.props;
     return (
       <div className={styles.toggle}>
         <label htmlFor={this.id} className={styles.title}>
-          {t('talk-plugin-notifications-category-reply.toggle_description')}
+          {children}
         </label>
         <Checkbox checked={checked} onChange={onChange} id={this.id} />
       </div>
@@ -24,6 +23,7 @@ class Toggle extends React.Component {
 Toggle.propTypes = {
   checked: PropTypes.bool,
   onChange: PropTypes.func,
+  children: PropTypes.node,
 };
 
 export default Toggle;