Add more sort options and improve styling

plugin-api/beta/client/components/SortOption.css

@@ -1,8 +1,12 @@
-.input {
+.label {
+  display: block;
   cursor: pointer;
+  width: 100%;
+  padding: 4px 16px 4px 10px;
+  box-sizing: border-box;
 }
 
-.label {
+.input {
   cursor: pointer;
-  padding-left: 4px;
+  margin-right: 6px;
 }

plugin-api/beta/client/components/SortOption.js

@@ -4,12 +4,15 @@ import styles from './SortOption.css';
 export default class SortOption extends React.Component {
   render() {
     return (
-      <div className={styles.viewingOption}>
-        <input type="radio" onChange={this.props.setSort} checked={this.props.active} className={styles.input}/>
-        <label className={styles.label} onClick={this.props.setSort}>
-          {this.props.label}
-        </label>
-      </div>
+      <label className={styles.label}>
+        <input
+          type="radio"
+          onChange={this.props.setSort}
+          checked={this.props.active}
+          className={styles.input}
+        />
+        {this.props.label}
+      </label>
     );
   }
 }