Refactor 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.css

@@ -0,0 +1,6 @@
+.title {
+  display: inline-block;
+  width: 270px;
+  cursor: pointer;
+  user-select: none;
+}

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

@@ -0,0 +1,29 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+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, children } = this.props;
+    return (
+      <div className={styles.toggle}>
+        <label htmlFor={this.id} className={styles.title}>
+          {children}
+        </label>
+        <Checkbox checked={checked} onChange={onChange} id={this.id} />
+      </div>
+    );
+  }
+}
+
+Toggle.propTypes = {
+  checked: PropTypes.bool,
+  onChange: PropTypes.func,
+  children: PropTypes.node,
+};
+
+export default Toggle;