Reports: break out separate Report component, basic styling

app/soapbox/features/admin/awaiting_approval.js

@@ -77,7 +77,7 @@ class AwaitingApproval extends ImmutablePureComponent {
             <div className='unapproved-account' key={user.get('id')}>
               <div className='unapproved-account__bio'>
                 <div className='unapproved-account__nickname'>@{user.get('nickname')}</div>
-                <blockquote className='unapproved-account__reason'>{user.get('registration_reason')}</blockquote>
+                <blockquote className='md'>{user.get('registration_reason')}</blockquote>
               </div>
               <div className='unapproved-account__actions'>
                 <IconButton icon='check' size={22} onClick={this.handleApprove(user.get('nickname'))} />

app/soapbox/features/admin/components/report.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import ImmutablePureComponent from 'react-immutable-pure-component';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import { FormattedMessage } from 'react-intl';
+import Avatar from 'soapbox/components/avatar';
+
+export default class Report extends ImmutablePureComponent {
+
+  static propTypes = {
+    report: ImmutablePropTypes.map.isRequired,
+  };
+
+  render() {
+    const { report } = this.props;
+
+    return (
+      <div className='admin-report' key={report.get('id')}>
+        <Avatar account={report.get('account')} size={32} />
+        <div className='admin-report__content'>
+          <h4 className='admin-report__title'>
+            <FormattedMessage
+              id='admin.reports.report_title'
+              defaultMessage='Report on {acct}'
+              values={{ acct:  `@${report.getIn(['account', 'acct'])}` }}
+            />
+          </h4>
+          <div class='admin-report__quote'>
+            <blockquote className='md'>{report.get('content')}</blockquote>
+            <span className='byline'>&mdash; @{report.getIn(['actor', 'acct'])}</span>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+}

app/soapbox/features/admin/reports.js

@@ -7,6 +7,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import Column from '../ui/components/column';
 import ScrollableList from 'soapbox/components/scrollable_list';
 import { fetchReports } from 'soapbox/actions/admin';
+import Report from './components/report';
 
 const messages = defineMessages({
   heading: { id: 'column.admin.reports', defaultMessage: 'Reports' },
@@ -47,13 +48,13 @@ class Reports extends ImmutablePureComponent {
 
     return (
       <Column icon='gavel' heading={intl.formatMessage(messages.heading)} backBtnSlim>
-        <ScrollableList isLoading={isLoading} showLoading={showLoading} scrollKey='admin-reports' emptyMessage={intl.formatMessage(messages.emptyMessage)}>
-          {reports.map(report => (
-            <div className='admin-report' key={report.get('id')}>
-              <div>Report on @{report.getIn(['account', 'acct'])}</div>
-              <blockquote>{report.get('content')} &mdash; @{report.getIn(['actor', 'acct'])}</blockquote>
-            </div>
-          ))}
+        <ScrollableList
+          isLoading={isLoading}
+          showLoading={showLoading}
+          scrollKey='admin-reports'
+          emptyMessage={intl.formatMessage(messages.emptyMessage)}
+        >
+          {reports.map(report => <Report report={report} />)}
         </ScrollableList>
       </Column>
     );