Merge branch 'next-admin' into 'next'

Next: Improve Reports styles

See merge request soapbox-pub/soapbox-fe!1275

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

@@ -6,7 +6,8 @@ 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 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';
 import { useAppDispatch } from 'soapbox/hooks';
@@ -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'>
@@ -98,19 +105,24 @@ 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>
+          )}
+          <span className='byline'>
+            &mdash;
+            <HoverRefWrapper accountId={report.getIn(['actor', 'id']) as string} inline>
+              <Link to={`/@${reporterAcct}`} title={reporterAcct}>@{reporterAcct}</Link>
+            </HoverRefWrapper>
+          </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>
   );
 };

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';

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;
       }
     }