Reports: display reported posts

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

@@ -5,7 +5,9 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import { injectIntl, FormattedMessage, defineMessages } from 'react-intl';
 import Avatar from 'soapbox/components/avatar';
 import Button from 'soapbox/components/button';
+import StatusContent from 'soapbox/components/status_content';
 import DropdownMenu from 'soapbox/containers/dropdown_menu_container';
+import Accordion from 'soapbox/features/ui/components/accordion';
 import { closeReports, deactivateUsers, deleteUsers } from 'soapbox/actions/admin';
 import snackbar from 'soapbox/actions/snackbar';
 import { openModal } from 'soapbox/actions/modal';
@@ -30,6 +32,10 @@ class Report extends ImmutablePureComponent {
     report: ImmutablePropTypes.map.isRequired,
   };
 
+  state = {
+    accordionExpanded: false,
+  };
+
   makeMenu = () => {
     const { intl, report } = this.props;
 
@@ -83,8 +89,13 @@ class Report extends ImmutablePureComponent {
     }));
   }
 
+  handleAccordionToggle = setting => {
+    this.setState({ accordionExpanded: setting });
+  }
+
   render() {
     const { report } = this.props;
+    const { accordionExpanded } = this.state;
     const menu = this.makeMenu();
 
     return (
@@ -100,7 +111,16 @@ class Report extends ImmutablePureComponent {
               values={{ acct:  `@${report.getIn(['account', 'acct'])}` }}
             />
           </h4>
-          <div class='admin-report__quote'>
+          <div className='admin-report__statuses'>
+            <Accordion
+              headline={`Reported posts (${report.get('statuses').count()})`}
+              expanded={accordionExpanded}
+              onToggle={this.handleAccordionToggle}
+            >
+              <div>{report.get('statuses').map(status => <StatusContent status={status} />)}</div>
+            </Accordion>
+          </div>
+          <div className='admin-report__quote'>
             <blockquote className='md'>{report.get('content')}</blockquote>
             <span className='byline'>&mdash; @{report.getIn(['actor', 'acct'])}</span>
           </div>

app/styles/components/accordion.scss

@@ -20,6 +20,7 @@
     text-transform: none !important;
     text-align: left !important;
     display: flex !important;
+    align-items: center;
     border: 0;
     width: 100%;
 

app/styles/components/admin.scss

@@ -127,6 +127,7 @@
 
   &__content {
     padding: 0 16px;
+    flex: 1;
   }
 
   &__title {
@@ -155,4 +156,24 @@
       }
     }
   }
+
+  &__statuses .accordion {
+    padding: 10px;
+    margin-bottom: 6px;
+
+    &__title {
+      font-size: 12px !important;
+      font-weight: normal !important;
+      margin-bottom: 0 !important;
+    }
+
+    .status__content {
+      border-bottom: 1px solid var(--accent-color--med);
+      padding: 10px 0;
+
+      &:last-child {
+        border: 0;
+      }
+    }
+  }
 }

app/styles/components/buttons.scss

@@ -72,7 +72,7 @@ button {
   }
 
   &.button-alternative {
-    color: var(--primary-text-color);
+    color: #fff;
     background: var(--brand-color);
 
     &:active,