Reports: break out separate Report component, basic styling

app/soapbox/components/intersection_observer_article.js

@@ -24,6 +24,7 @@ export default class IntersectionObserverArticle extends React.Component {
 
   state = {
     isHidden: false, // set to true in requestIdleCallback to trigger un-render
+    isIntersecting: true,
   }
 
   shouldComponentUpdate(nextProps, nextState) {

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)}>
+        <ScrollableList
-          {reports.map(report => (
+          isLoading={isLoading}
-            <div className='admin-report' key={report.get('id')}>
+          showLoading={showLoading}
-              <div>Report on @{report.getIn(['account', 'acct'])}</div>
+          scrollKey='admin-reports'
-              <blockquote>{report.get('content')} &mdash; @{report.getIn(['actor', 'acct'])}</blockquote>
+          emptyMessage={intl.formatMessage(messages.emptyMessage)}
-            </div>
+        >
-          ))}
+          {reports.map(report => <Report report={report} />)}
         </ScrollableList>
       </Column>
     );

app/styles/components/admin.scss

@@ -77,12 +77,6 @@
     font-weight: bold;
   }
 
-  &__reason {
-    padding: 5px 0 5px 15px;
-    border-left: 3px solid hsla(var(--primary-text-color_hsl), 0.4);
-    color: var(--primary-text-color--faint);
-  }
-
   &__actions {
     margin-left: auto;
     display: flex;
@@ -118,8 +112,32 @@
       }
     }
   }
+
+  blockquote.md {
+    padding: 5px 0 5px 15px;
+    border-left: 3px solid hsla(var(--primary-text-color_hsl), 0.4);
+    color: var(--primary-text-color--faint);
+  }
 }
 
 .admin-report {
-  padding: 20px;
+  padding: 15px;
+  display: flex;
+  border-bottom: 1px solid var(--brand-color--faint);
+
+  &__content {
+    padding-left: 16px;
+  }
+
+  &__title {
+    font-weight: bold;
+  }
+
+  &__quote {
+    font-size: 14px;
+
+    .byline {
+      font-size: 12px;
+    }
+  }
 }