publish: dropdown component as sidebar sort

also adds 'align' to dropdown component as prop

pkg/interface/publish/src/js/components/lib/dropdown.js

@@ -37,12 +37,23 @@ export class Dropdown extends Component {
   }
 
   render() {
+    let alignment = (!!this.props.align)
+      ? this.props.align : "right";
+
     let display = (this.state.open)
       ? "block" : "none";
 
     let optionsColor = (this.state.open)
       ? '#e6e6e6' : 'white';
 
+    let leftAlign = "";
+    let rightAlign = "0";
+
+    if (alignment === "left") {
+      leftAlign = "0"
+      rightAlign = ""
+    }
+
     let optionsList = this.props.options.map((val, i) => {
       return (
         <button key={i} className={val.cls}
@@ -60,9 +71,9 @@ export class Dropdown extends Component {
                 onClick={this.toggleDropdown}>
           {this.props.buttonText}
         </button>
-        <div className="absolute flex flex-column pa4 ba b--gray4 br2 z-1 bg-white"
+        <div className="absolute flex flex-column pv2 ba b--gray4 br2 z-1 bg-white"
            ref={(el) => {this.optsList = el}}
-            style={{right:0, width:this.props.width, display: display}}>
+          style={{left: leftAlign, right: rightAlign, width:this.props.width, display: display}}>
           {optionsList}
         </div>
       </div>

pkg/interface/publish/src/js/components/lib/sidebar.js

@@ -1,5 +1,6 @@
 import React, { Component } from 'react'
 import { Route, Link } from 'react-router-dom';
+import { Dropdown } from './dropdown';
 import { NotebookItem } from './notebook-item';
 import { SidebarInvite } from './sidebar-invite';
 
@@ -149,24 +150,41 @@ export class Sidebar extends Component {
         <a className="db dn-m dn-l dn-xl f9 pb3 pl3" href="/">
           ⟵ Landscape
         </a>
-        <div className="w-100">
+        <div className="w-100 f9">
           <Link to="/~publish/new" className="green2 mr4 f9 pl4 pt4 dib">
             New Notebook
           </Link>
           <Link to="/~publish/join" className="f9 gray2">
             Join Notebook
           </Link>
-          <div className="dropdown relative bb b--gray4">
-            <select
-              style={{ WebkitAppearance: "none" }}
-              className="pl4 pv6 f9 bg-white bg-black-d white-d bn w-100 inter"
-              value={this.state.sort}
-              onChange={this.sortChange}>
-              <option value="oldest">Oldest Notebooks First</option>
-              <option value="newest">Newest Notebooks First</option>
-              <option value="alphabetical">Alphabetical A -> Z</option>
-              <option value="reverseAlphabetical">Alphabetical Z -> A</option>
-            </select>
+          <div className="pl2 pv2 bb b--gray4">
+          <Dropdown
+            width="16rem"
+            align="left"
+            options={[
+              {
+              cls: "w-100 tl pointer db ph2 pv3 hover-bg-gray4",
+              txt: "Oldest Notebooks First",
+              action: () => {this.setState({sort: "oldest"})}
+              },
+              {
+              cls: "w-100 tl pointer db ph2 pv3 hover-bg-gray4",
+              txt: "Newest Notebooks First",
+              action: () => {this.setState({sort: "newest"})}
+              },
+              {
+              cls: "w-100 tl pointer db ph2 pv3 hover-bg-gray4",
+              txt: "Alphabetical A -> Z",
+              action: () => {this.setState({sort: "alphabetical"})}
+              },
+              {
+              cls: "w-100 tl pointer db ph2 pv3 hover-bg-gray4",
+              txt: "Alphabetical Z -> A",
+              action: () => {this.setState({sort: "reverseAlphabetical"})}
+              }
+            ]}
+            buttonText="Sort Notebooks"
+          />
           </div>
         </div>
         <div className="overflow-y-scroll h-100">

pkg/interface/publish/src/js/components/lib/subscribers.js

@@ -54,14 +54,14 @@ export class Subscribers extends Component {
           width = 258;
           let url = `/~contacts${writePath}`;
           options = [{
-            cls: "tl pointer",
+            cls: "tl pointer w-100 db hover-bg-gray4 ph2 pv3",
             txt: "Manage this group in the contacts view",
             action: () => {this.redirect(url)}
           }];
         } else {
           width = 157;
           options = [{
-            cls: "tl pointer",
+            cls: "tl pointer w-100 db hover-bg-gray4 ph2 pv3",
             txt: "Demote to subscriber",
             action: () => {this.removeUser(`~${who}`, writePath)}
           }];
@@ -92,11 +92,11 @@ export class Subscribers extends Component {
         let width = 162;
         subscribers = this.props.notebook.subscribers.map((who, i) => {
           let options = [
-            { cls: "tl mb2 pointer",
+            { cls: "tl pointer w-100 db hover-bg-gray4 ph2 pv3",
               txt: "Promote to participant",
               action: () => {this.addUser(who, writePath)}
             },
-            { cls: "tl red2 pointer",
+            { cls: "tl red2 pointer w-100 db hover-bg-gray4 ph2 pv3",
               txt: "Ban",
               action: () => {this.addUser(who, readPath)}
             },