Add more sort options and improve styling

plugins/talk-plugin-offtopic/client/components/OffTopicCheckbox.css

@@ -0,0 +1,8 @@
+.offTopic {
+  height: 100%;
+}
+
+.offTopicLabel {
+  padding: 10px 20px;
+  display: block;
+}

plugins/talk-plugin-offtopic/client/components/OffTopicCheckbox.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import styles from './styles.css';
+import styles from './OffTopicCheckbox.css';
 
 import {t} from 'plugin-api/beta/client/services';
 

plugins/talk-plugin-offtopic/client/components/OffTopicFilter.css

@@ -0,0 +1,16 @@
+.label {
+  display: block;
+  cursor: pointer;
+  width: 100%;
+  padding: 4px 16px 4px 10px;
+  box-sizing: border-box;
+}
+
+.input {
+  cursor: pointer;
+  margin-right: 6px;
+}
+
+:global(.talk-plugin-off-topic-comment) {
+  display: none;
+}

plugins/talk-plugin-offtopic/client/components/OffTopicFilter.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import styles from './styles.css';
+import styles from './OffTopicFilter.css';
 
 export default class OffTopicFilter extends React.Component {
 
@@ -20,12 +20,15 @@ export default class OffTopicFilter extends React.Component {
 
   render() {
     return (
-      <div className={styles.viewingOption}>
-        <label>
-          <input type="checkbox" onChange={this.handleChange} checked={this.props.checked} />
-          Hide Off-Topic Comments
-        </label>
-      </div>
+      <label className={styles.label}>
+        <input
+          type="checkbox"
+          onChange={this.handleChange}
+          checked={this.props.checked}
+          className={styles.input}
+        />
+        Hide Off-Topic Comments
+      </label>
     );
   }
 }

plugins/talk-plugin-offtopic/client/components/OffTopicTag.css

@@ -1,12 +1,3 @@
-.offTopic {
-  height: 100%;
-}
-
-.offTopicLabel {
-  padding: 10px 20px;
-  display: block;
-}
-
 .tag {
   background: #D2D7D3;
   font-size: 12px;
@@ -17,10 +8,3 @@
   padding: 5px 5px;
   border-radius: 2px;
 }
-
-.viewingOption {
-}
-
-:global(.talk-plugin-off-topic-comment) {
-  display: none;
-}

plugins/talk-plugin-offtopic/client/components/OffTopicTag.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import styles from './styles.css';
+import styles from './OffTopicTag.css';
 import {t} from 'plugin-api/beta/client/services';
 import {isTagged} from 'plugin-api/beta/client/utils';