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/lists/components/new_list_form.js

@@ -2,12 +2,13 @@ import React from 'react';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import { changeListEditorTitle, submitListEditor } from '../../../actions/lists';
-import IconButton from '../../../components/icon_button';
+import Button from '../../../components/button';
 import { defineMessages, injectIntl } from 'react-intl';
 
 const messages = defineMessages({
   label: { id: 'lists.new.title_placeholder', defaultMessage: 'New list title' },
   title: { id: 'lists.new.create', defaultMessage: 'Add list' },
+  create: { id: 'lists.new.create_title', defaultMessage: 'Create' },
 });
 
 const mapStateToProps = state => ({
@@ -50,6 +51,7 @@ class NewListForm extends React.PureComponent {
 
     const label = intl.formatMessage(messages.label);
     const title = intl.formatMessage(messages.title);
+    const create = intl.formatMessage(messages.create);
 
     return (
       <form className='column-inline-form' onSubmit={this.handleSubmit}>
@@ -57,7 +59,7 @@ class NewListForm extends React.PureComponent {
           <span style={{ display: 'none' }}>{label}</span>
 
           <input
-            className='setting-text'
+            className='setting-text new-list-form__input'
             value={value}
             disabled={disabled}
             onChange={this.handleChange}
@@ -65,12 +67,13 @@ class NewListForm extends React.PureComponent {
           />
         </label>
 
-        <IconButton
+        <Button
+          className='new-list-form__btn'
           disabled={disabled}
-          icon='plus'
-          title={title}
           onClick={this.handleClick}
-        />
+        >
+          {create}
+        </Button>
       </form>
     );
   }

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

@@ -16,6 +16,7 @@ import ScrollableList from '../../components/scrollable_list';
 const messages = defineMessages({
   heading: { id: 'column.lists', defaultMessage: 'Lists' },
   subheading: { id: 'lists.subheading', defaultMessage: 'Your lists' },
+  add: { id: 'lists.new.create', defaultMessage: 'Add List' },
 });
 
 const getOrderedLists = createSelector([state => state.get('lists')], lists => {
@@ -60,8 +61,10 @@ class Lists extends ImmutablePureComponent {
 
     return (
       <Column icon='list-ul' heading={intl.formatMessage(messages.heading)} backBtnSlim>
+        <br/>
+        <ColumnSubheading text={intl.formatMessage(messages.add)} />
         <NewListForm />
-
+        <br/>
         <ColumnSubheading text={intl.formatMessage(messages.subheading)} />
         <ScrollableList
           scrollKey='lists'