From ec9e478bbeaf5277f66384662e9d217534ce440d Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Thu, 28 Apr 2022 21:36:28 -0500
Subject: [PATCH 1/2] Improve Reports styles

---
 app/soapbox/features/admin/components/report.tsx | 10 +++++-----
 app/styles/components/accordion.scss             |  1 +
 app/styles/components/admin.scss                 |  5 -----
 3 files changed, 6 insertions(+), 10 deletions(-)

diff --git a/app/soapbox/features/admin/components/report.tsx b/app/soapbox/features/admin/components/report.tsx
index 16e99bb7c..b232d8c73 100644
--- a/app/soapbox/features/admin/components/report.tsx
+++ b/app/soapbox/features/admin/components/report.tsx
@@ -6,7 +6,7 @@ import { closeReports } from 'soapbox/actions/admin';
 import { deactivateUserModal, deleteUserModal } from 'soapbox/actions/moderation';
 import snackbar from 'soapbox/actions/snackbar';
 import Avatar from 'soapbox/components/avatar';
-import { Button } from 'soapbox/components/ui';
+import { Button, HStack } from 'soapbox/components/ui';
 import DropdownMenu from 'soapbox/containers/dropdown_menu_container';
 import Accordion from 'soapbox/features/ui/components/accordion';
 import { useAppDispatch } from 'soapbox/hooks';
@@ -98,19 +98,19 @@ const Report: React.FC<IReport> = ({ report }) => {
           )}
         </div>
         <div className='admin-report__quote'>
-          {report.get('content', '').length > 0 &&
+          {report.get('content', '').length > 0 && (
             <blockquote className='md' dangerouslySetInnerHTML={{ __html: report.get('content') }} />
-          }
+          )}
           <span className='byline'>&mdash; <Link to={`/@${reporterAcct}`} title={reporterAcct}>@{reporterAcct}</Link></span>
         </div>
       </div>
-      <div className='admin-report__actions'>
+      <HStack space={2} alignItems='start'>
         <Button onClick={handleCloseReport}>
           <FormattedMessage id='admin.reports.actions.close' defaultMessage='Close' />
         </Button>
 
         <DropdownMenu items={menu} src={require('@tabler/icons/icons/dots-vertical.svg')} />
-      </div>
+      </HStack>
     </div>
   );
 };
diff --git a/app/styles/components/accordion.scss b/app/styles/components/accordion.scss
index 00a14196e..314da1369 100644
--- a/app/styles/components/accordion.scss
+++ b/app/styles/components/accordion.scss
@@ -25,6 +25,7 @@
     width: 100%;
 
     &::after {
+      @apply text-black dark:text-white;
       content: '';
       display: block;
       font-family: 'Font Awesome 5 Free';
diff --git a/app/styles/components/admin.scss b/app/styles/components/admin.scss
index 56e7e9022..75ab36c38 100644
--- a/app/styles/components/admin.scss
+++ b/app/styles/components/admin.scss
@@ -105,10 +105,6 @@
     font-weight: bold;
     text-overflow: ellipsis;
     overflow: hidden;
-
-    a {
-      color: var(--primary-text-color);
-    }
   }
 
   &__quote {
@@ -122,7 +118,6 @@
       font-size: 12px;
 
       a {
-        color: var(--primary-text-color);
         text-decoration: none;
       }
     }

From cf26e4f2a2daa8423b478c1ece378f46494353f3 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Thu, 28 Apr 2022 21:55:02 -0500
Subject: [PATCH 2/2] Report: show profile hover card

---
 .../features/admin/components/report.tsx      | 22 ++++++++++++++-----
 1 file changed, 17 insertions(+), 5 deletions(-)

diff --git a/app/soapbox/features/admin/components/report.tsx b/app/soapbox/features/admin/components/report.tsx
index b232d8c73..6d3da6009 100644
--- a/app/soapbox/features/admin/components/report.tsx
+++ b/app/soapbox/features/admin/components/report.tsx
@@ -6,6 +6,7 @@ import { closeReports } from 'soapbox/actions/admin';
 import { deactivateUserModal, deleteUserModal } from 'soapbox/actions/moderation';
 import snackbar from 'soapbox/actions/snackbar';
 import Avatar from 'soapbox/components/avatar';
+import HoverRefWrapper from 'soapbox/components/hover_ref_wrapper';
 import { Button, HStack } from 'soapbox/components/ui';
 import DropdownMenu from 'soapbox/containers/dropdown_menu_container';
 import Accordion from 'soapbox/features/ui/components/accordion';
@@ -74,16 +75,22 @@ const Report: React.FC<IReport> = ({ report }) => {
   return (
     <div className='admin-report' key={report.get('id')}>
       <div className='admin-report__avatar'>
-        <Link to={`/@${acct}`} title={acct}>
-          <Avatar account={report.get('account')} size={32} />
-        </Link>
+        <HoverRefWrapper accountId={report.getIn(['account', 'id']) as string} inline>
+          <Link to={`/@${acct}`} title={acct}>
+            <Avatar account={report.get('account')} size={32} />
+          </Link>
+        </HoverRefWrapper>
       </div>
       <div className='admin-report__content'>
         <h4 className='admin-report__title'>
           <FormattedMessage
             id='admin.reports.report_title'
             defaultMessage='Report on {acct}'
-            values={{ acct: <Link to={`/@${acct}`} title={acct}>@{acct}</Link> }}
+            values={{ acct: (
+              <HoverRefWrapper accountId={report.getIn(['account', 'id']) as string} inline>
+                <Link to={`/@${acct}`} title={acct}>@{acct}</Link>
+              </HoverRefWrapper>
+            ) }}
           />
         </h4>
         <div className='admin-report__statuses'>
@@ -101,7 +108,12 @@ const Report: React.FC<IReport> = ({ report }) => {
           {report.get('content', '').length > 0 && (
             <blockquote className='md' dangerouslySetInnerHTML={{ __html: report.get('content') }} />
           )}
-          <span className='byline'>&mdash; <Link to={`/@${reporterAcct}`} title={reporterAcct}>@{reporterAcct}</Link></span>
+          <span className='byline'>
+            &mdash;
+            <HoverRefWrapper accountId={report.getIn(['actor', 'id']) as string} inline>
+              <Link to={`/@${reporterAcct}`} title={reporterAcct}>@{reporterAcct}</Link>
+            </HoverRefWrapper>
+          </span>
         </div>
       </div>
       <HStack space={2} alignItems='start'>