Admin: improve approval UI for mobile, display snackbar messages

app/soapbox/features/admin/awaiting_approval.js

@@ -8,10 +8,13 @@ import Column from '../ui/components/column';
 import IconButton from 'soapbox/components/icon_button';
 import ScrollableList from 'soapbox/components/scrollable_list';
 import { fetchUsers, deleteUsers, approveUsers } from 'soapbox/actions/admin';
+import snackbar from 'soapbox/actions/snackbar';
 
 const messages = defineMessages({
   heading: { id: 'column.admin.awaiting_approval', defaultMessage: 'Awaiting Approval' },
   emptyMessage: { id: 'admin.awaiting_approval.empty_message', defaultMessage: 'There is nobody waiting for approval. When a new user signs up, you can review them here.' },
+  approved: { id: 'admin.awaiting_approval.approved_message', defaultMessage: '{acct} was approved!' },
+  rejected: { id: 'admin.awaiting_approval.rejected_message', defaultMessage: '{acct} was rejected.' },
 });
 
 const mapStateToProps = state => {
@@ -43,16 +46,22 @@ class AwaitingApproval extends ImmutablePureComponent {
   }
 
   handleApprove = nickname => {
-    const { dispatch } = this.props;
+    const { dispatch, intl } = this.props;
     return e => {
-      dispatch(approveUsers([nickname]));
+      dispatch(approveUsers([nickname])).then(() => {
+        const message = intl.formatMessage(messages.approved, { acct: `@${nickname}` });
+        dispatch(snackbar.success(message));
+      }).catch(() => {});
     };
   }
 
   handleReject = nickname => {
-    const { dispatch } = this.props;
+    const { dispatch, intl } = this.props;
     return e => {
-      dispatch(deleteUsers([nickname]));
+      dispatch(deleteUsers([nickname])).then(() => {
+        const message = intl.formatMessage(messages.rejected, { acct: `@${nickname}` });
+        dispatch(snackbar.info(message));
+      }).catch(() => {});
     };
   }
 
@@ -70,8 +79,8 @@ class AwaitingApproval extends ImmutablePureComponent {
                 <blockquote className='unapproved-account__reason'>{user.get('registration_reason')}</blockquote>
               </div>
               <div className='unapproved-account__actions'>
-                <IconButton icon='check' onClick={this.handleApprove(user.get('nickname'))} />
-                <IconButton icon='close' onClick={this.handleReject(user.get('nickname'))} />
+                <IconButton icon='check' size={22} onClick={this.handleApprove(user.get('nickname'))} />
+                <IconButton icon='close' size={22} onClick={this.handleReject(user.get('nickname'))} />
               </div>
             </div>
           ))}

app/styles/components/admin.scss

@@ -85,9 +85,13 @@
 
   &__actions {
     margin-left: auto;
-    padding-left: 20px;
     display: flex;
     flex-wrap: nowrap;
+    padding-left: 20px;
+
+    button.icon-button:nth-child(n+2) {
+      padding-left: 10px;
+    }
   }
 }