diff --git a/app/soapbox/features/admin/components/report.js b/app/soapbox/features/admin/components/report.js
new file mode 100644
index 000000000..0365e3cf2
--- /dev/null
+++ b/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 (
+
+
+
+
+
+
+
+
{report.get('content')}
+
— @{report.getIn(['actor', 'acct'])}
+
+
+
+ );
+ }
+
+}
diff --git a/app/soapbox/features/admin/reports.js b/app/soapbox/features/admin/reports.js
index a277eae63..1acc6def1 100644
--- a/app/soapbox/features/admin/reports.js
+++ b/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 (
-
- {reports.map(report => (
-
-
Report on @{report.getIn(['account', 'acct'])}
-
{report.get('content')} — @{report.getIn(['actor', 'acct'])}
-
- ))}
+
+ {reports.map(report => )}
);
diff --git a/app/styles/components/admin.scss b/app/styles/components/admin.scss
index 4c25eab4d..4942144b6 100644
--- a/app/styles/components/admin.scss
+++ b/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;
+ }
+ }
}