Updated list components

Updated list edit/add modal to be more user friendly. Added titles where necessary. Spaced out components/divs. Added text buttons instead of checkmark and plus icons for list titles. Updated title where list is empty of accounts/posts where user can click to add people to list. Added add/remove to list from account action dropdown

app/javascript/gabsocial/features/list_adder/index.js

@@ -3,12 +3,14 @@ import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { connect } from 'react-redux';
 import ImmutablePureComponent from 'react-immutable-pure-component';
-import { injectIntl } from 'react-intl';
+import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
 import { setupListAdder, resetListAdder } from '../../actions/lists';
 import { createSelector } from 'reselect';
 import List from './components/list';
 import Account from './components/account';
+import IconButton from 'gabsocial/components/icon_button';
 import NewListForm from '../lists/components/new_list_form';
+import ColumnSubheading from '../ui/components/column_subheading';
 // hack
 
 const getOrderedLists = createSelector([state => state.get('lists')], lists => {
@@ -19,8 +21,9 @@ const getOrderedLists = createSelector([state => state.get('lists')], lists => {
   return lists.toList().filter(item => !!item).sort((a, b) => a.get('title').localeCompare(b.get('title')));
 });
 
-const mapStateToProps = state => ({
+const mapStateToProps = (state, {accountId}) => ({
   listIds: getOrderedLists(state).map(list=>list.get('id')),
+  account: state.getIn(['accounts', accountId]),
 });
 
 const mapDispatchToProps = dispatch => ({
@@ -28,6 +31,12 @@ const mapDispatchToProps = dispatch => ({
   onReset: () => dispatch(resetListAdder()),
 });
 
+const messages = defineMessages({
+  close: { id: 'lightbox.close', defaultMessage: 'Close' },
+  subheading: { id: 'lists.subheading', defaultMessage: 'Your lists' },
+  add: { id: 'lists.new.create', defaultMessage: 'Add List' },
+});
+
 export default @connect(mapStateToProps, mapDispatchToProps)
 @injectIntl
 class ListAdder extends ImmutablePureComponent {
@@ -39,6 +48,7 @@ class ListAdder extends ImmutablePureComponent {
     onInitialize: PropTypes.func.isRequired,
     onReset: PropTypes.func.isRequired,
     listIds: ImmutablePropTypes.list.isRequired,
+    account: ImmutablePropTypes.map,
   };
 
   componentDidMount () {
@@ -51,20 +61,41 @@ class ListAdder extends ImmutablePureComponent {
     onReset();
   }
 
+  onClickClose = () => {
+    this.props.onClose('LIST_ADDER');
+  };
+
   render () {
-    const { accountId, listIds } = this.props;
+    const { accountId, listIds, intl, onClose, account } = this.props;
+
+    const displayNameHtml = account ? { __html: account.get('display_name_html') } : '';
 
     return (
-      <div className='modal-root__modal list-adder'>
-        <div className='list-adder__account'>
-          <Account accountId={accountId} />
+      <div className='modal-root__modal compose-modal'>
+        <div className='compose-modal__header'>
+          <h3 className='compose-modal__header__title'>
+            <FormattedMessage id='list_adder.header_title' defaultMessage='Add or Remove from Lists' />
+          </h3>
+          <IconButton className='compose-modal__close' title={intl.formatMessage(messages.close)} icon='times' onClick={this.onClickClose} size={20} />
         </div>
+        <div className='compose-modal__content'>
+          <div className='list-adder'>
+            <div className='list-adder__account'>
+              <Account accountId={accountId} />
+            </div>
 
-        <NewListForm />
+            <br/>
 
+            <ColumnSubheading text={intl.formatMessage(messages.add)} />
+            <NewListForm />
 
-        <div className='list-adder__lists'>
-          {listIds.map(ListId => <List key={ListId} listId={ListId} />)}
+            <br/>
+
+            <ColumnSubheading text={intl.formatMessage(messages.subheading)} />
+            <div className='list-adder__lists'>
+              {listIds.map(ListId => <List key={ListId} listId={ListId} />)}
+            </div>
+          </div>
         </div>
       </div>
     );