small ui fixes inside report admin page

CHANGELOG.md

@@ -1,4 +1,5 @@
 # Changelog
+
 All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
@@ -7,6 +8,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [Unreleased]
 
 ### Added
+
 - Admin: redirect the homepage to any URL.
 - Compatibility: added compatibility with Friendica.
 - Posts: bot badge on statuses from bot accounts.
@@ -15,10 +17,13 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Groups: Initial support for groups.
 
 ### Changed
+
 - Chats: improved display of media attachments.
 - ServiceWorker: switch to a network-first strategy. The "An update is available!" prompt goes away.
 
 ### Fixed
+
+- Reports dashboard: usability improvement (see #1329)
 - Chats: media attachments rendering at the wrong size and/or causing the chat to scroll on load.
 - Chats: don't display "copy" button for messages without text.
 - Posts: don't have to click the play button twice for embedded videos.
@@ -26,11 +31,13 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Modals: fix media modal automatically switching to video.
 
 ### Removed
+
 - Admin: single user mode. Now the homepage can be redirected to any URL.
 
 ## [3.1.0] - 2023-01-13
 
 ### Added
+
 - Compatibility: rudimentary support for Takahē.
 - UI: added backdrop blur behind modals.
 - Admin: let admins configure media preview for attachment thumbnails.
@@ -39,6 +46,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Export: restored "Export data" to CSV.
 
 ### Changed
+
 - Posts: letterbox images to 19:6 again.
 - Status Info: moved context (repost, pinned) to improve UX.
 - Posts: remove file icon from empty link previews.
@@ -46,6 +54,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Composer: add more descriptive discard confirmation message.
 
 ### Fixed
+
 - Layout: use accent color for "floating action button" (mobile compose button).
 - ServiceWorker: don't serve favicon, robots.txt, and others from ServiceWorker.
 - Datepicker: correctly default to the current year.
@@ -67,6 +76,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [3.0.0] - 2022-12-25
 
 ### Added
+
 - Editing: ability to edit posts and view edit history (on Rebased, Pleroma, and Mastodon).
 - Events: ability to create, view, and comment on Events (on Rebased).
 - Onboarding: display an introduction wizard to newly registered accounts.
@@ -92,6 +102,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Toast: added the ability to dismiss toast notifications.
 
 ### Changed
+
 - UI: the whole UI has been overhauled both inside and out. 97% of the codebase has been rewritten to TypeScript, and a new component library has been introduced with Tailwind CSS.
 - Chats: redesigned chats. Includes an improved desktop UI, unified chat widget, expanding textarea, and autosuggestions.
 - Lists: ability to edit and delete a list.
@@ -110,6 +121,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Toast: redesigned toast notifications.
 
 ### Removed
+
 - Theme: Halloween theme.
 - Settings: advanced notification settings.
 - Settings: dyslexic mode.
@@ -120,10 +132,13 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Posts: hide non-emoji images embedded in post content.
 
 ### Security
+
 - Glitch Social: fixed XSS vulnerability on Glitch Social where custom emojis could be exploited to embed a script tag.
 
 ## [2.0.0] - 2022-05-01
+
 ### Added
+
 - Quote Posting: repost with comment on Fedibird and Rebased.
 - Profile: ability to feature other users on your profile (on Rebased, Mastodon).
 - Profile: ability to add location to the user's profile (on Rebased, Truth Social).
@@ -139,6 +154,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - i18n: added Icelandic translation.
 
 ### Changed
+
 - Feeds: added gaps between posts in feeds.
 - Feeds: automatically load new posts when scrolled to the top of the feed.
 - Layout: improved design of top navigation bar.
@@ -148,16 +164,20 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Composer: use graphical ring counter for character count.
 
 ### Fixed
+
 - Multi-Account: fix switching between profiles on different servers with the same local username.
 
 ## [1.3.0] - 2021-07-02
+
 ### Changed
+
 - Layout: show right sidebar on all pages.
 - Statuses: improve display of multiple rich media items.
 - Statuses: let media be cropped less (when dimensions are provided).
 - Profile metadata: show only 4 by default, let items be added and removed.
 
 ### Fixed
+
 - Performance: fixed various performance issues, especially related to the post composer and chats.
 - Composer: fixed upload form style on light theme.
 - Composer: fixed emoji search when a custom emoji was invalid.
@@ -173,6 +193,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Various iOS fixes.
 
 ### Added
+
 - Statuses: added greentext support, configurable site-wide by admin.
 - Statuses: added Mastodon's audio player.
 - Statuses: indicate > 4 attachments.
@@ -190,31 +211,41 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Admin: add user retention % to dashboard.
 
 ## [1.2.3] - 2021-04-18
+
 ### Changed
+
 - Twemoji now bundled
 
 ### Fixed
+
 - Redirect user after registration
 - Delete invalid auth users from browser
 - Uploaded files ending in .blob
 
 ## [1.2.2] - 2021-04-13
+
 ### Fixed
+
 - verify_credentials infinite loop bug
 - Emoji reacts not being sent through notifications
 - Contrast of Polls
 
 ### Added
+
 - Configurable FQN for local accounts
 - Polish translations
 
 ## [1.2.1] - 2021-04-06
+
 ### Fixed
+
 - "View context" button on videos
 - Login page successfully redirects Home
 
 ## [1.2.0] - 2021-04-02
+
 ### Added
+
 - Remote follow button
 - Display "Bot" tag for bot users
 - Ability to view remote timelines
@@ -230,11 +261,14 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Portuguese translations
 
 ### Fixed
+
 - Heart reaction works on Pleroma >= 2.3.0
 - Pagination of Blocks and Mutes
 
 ## [1.1.0] - 2020-10-05
+
 ### Fixed
+
 - General user interface and ease-of-use improvements for both mobile and desktop
 - General loading and performance improvements, including shrinking bundle size
 - GIF handling: AutoPlayGif Preference support, including avatars and profile banners
@@ -254,29 +288,30 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Composer: Forcing the scope to default after settings save.
 
 ### Added
+
 - Chats, currently one-to-one, evolving with Pleroma BE capabilities, including:
-    - Initiate chat via `Message` button on profile
-    - Up to 4 open foreground chat windows in desktop, with open/minimize/close and notification counter
-    - Browser tab notification counter includes total chat and post notifications
-    - Chats list with total chats notification counter and audio notification toggle
-    - Unique chat audio notification
-    - Add attachment
-    - Delete chat message
-    - Report chat account
-    - Chats icon with notification counter in top navbar in mobile view
-    - Chats marked read on chat hover or on chat key event
+  - Initiate chat via `Message` button on profile
+  - Up to 4 open foreground chat windows in desktop, with open/minimize/close and notification counter
+  - Browser tab notification counter includes total chat and post notifications
+  - Chats list with total chats notification counter and audio notification toggle
+  - Unique chat audio notification
+  - Add attachment
+  - Delete chat message
+  - Report chat account
+  - Chats icon with notification counter in top navbar in mobile view
+  - Chats marked read on chat hover or on chat key event
 - Audio player for audio uploads, including ogg, oga, and wav support
 - Integration with Patron recurring donations platform
 - Profile hover panels, with click to Follow/Unfollow
 - Posts: Favicon of user's home instance included on post
 - Soapbox configuration page, including:
-    - Site preview, including light/dark theme toggle rendering
-    - Logo
-    - Brand color using color picker
-    - Copyright footer
-    - Promo panel custom links for timeline pages
-    - Home footer custom links for static pages
-    - Editable JSON based configuration option
+  - Site preview, including light/dark theme toggle rendering
+  - Logo
+  - Brand color using color picker
+  - Copyright footer
+  - Promo panel custom links for timeline pages
+  - Home footer custom links for static pages
+  - Editable JSON based configuration option
 - Themes: Light/dark theme toggle in top navbar
 - Themes: Halloween mode in Preferences page
 - Markdown support in post composer, as default
@@ -303,6 +338,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - [Renovate.json](https://docs.renovatebot.com/configuration-options/) support
 
 ### Changed
+
 - Revoke OAuth token on logout
 - Home sidebar rearrangement
 - Compose form icons
@@ -314,12 +350,15 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Redux update
 
 ### Removed
+
 - FontAwesome dependencies, with full switch to ForkAwesome
 - Requirement for use of soapbox.json for configuration
 - Direct Message links from menus, partial deprecation due to chats
 
 ## [1.0.0] - 2020-06-15
+
 ### Added
+
 - Emoji reactions.
 - Ability to set brand color in soapbox.json.
 - Security UI.
@@ -330,6 +369,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Many new automated tests.
 
 ### Changed
+
 - Overhauled theming system to use native CSS variables.
 - Reorganized folder structure.
 - Redesigned post composer.
@@ -340,6 +380,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Force media to have a static height, fixing jumpy timelines.
 
 ### Fixed
+
 - Composer: Move cursor to end of text.
 - Composer: Tagging yourself in replies.
 - Composer: State issues between compose modal and inline composer.
@@ -354,10 +395,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Hide reposted media from account media tab.
 
 ## [0.9.0] - 2020-04-30
+
 ### Added
+
 - Initial beta release.
 
-[Unreleased]: https://gitlab.com/soapbox-pub/soapbox/-/compare/v1.0.0...develop
-[Unreleased patch]: https://gitlab.com/soapbox-pub/soapbox/-/compare/v1.0.0...stable/1.0.x
+[unreleased]: https://gitlab.com/soapbox-pub/soapbox/-/compare/v1.0.0...develop
+[unreleased patch]: https://gitlab.com/soapbox-pub/soapbox/-/compare/v1.0.0...stable/1.0.x
 [1.0.0]: https://gitlab.com/soapbox-pub/soapbox/-/compare/v0.9.0...v1.0.0
 [0.9.0]: https://gitlab.com/soapbox-pub/soapbox/-/tags/v0.9.0

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

@@ -5,7 +5,7 @@ import { Link } from 'react-router-dom';
 import { closeReports } from 'soapbox/actions/admin';
 import { deactivateUserModal, deleteUserModal } from 'soapbox/actions/moderation';
 import HoverRefWrapper from 'soapbox/components/hover-ref-wrapper';
-import { Accordion, Avatar, Button, Stack, HStack, Text } from 'soapbox/components/ui';
+import { Accordion, Avatar, IconButton, Stack, HStack, Text } from 'soapbox/components/ui';
 import DropdownMenu from 'soapbox/containers/dropdown-menu-container';
 import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
 import { makeGetReport } from 'soapbox/selectors';
@@ -20,6 +20,7 @@ const messages = defineMessages({
   reportClosed: { id: 'admin.reports.report_closed_message', defaultMessage: 'Report on @{name} was closed' },
   deactivateUser: { id: 'admin.users.actions.deactivate_user', defaultMessage: 'Deactivate @{name}' },
   deleteUser: { id: 'admin.users.actions.delete_user', defaultMessage: 'Delete @{name}' },
+  reportedPosts: { id: 'admin.reports.reported_posts', defaultMessage: '{count} {count, plural, one {post} other {posts}} reported' },
 });
 
 interface IReport {
@@ -45,7 +46,7 @@ const Report: React.FC<IReport> = ({ id }) => {
     return [{
       text: intl.formatMessage(messages.deactivateUser, { name: targetAccount.username }),
       action: handleDeactivateUser,
-      icon: require('@tabler/icons/hourglass-empty.svg'),
+      icon: require('@tabler/icons/hourglass-low.svg'),
     }, {
       text: intl.formatMessage(messages.deleteUser, { name: targetAccount.username }),
       action: handleDeleteUser,
@@ -95,7 +96,7 @@ const Report: React.FC<IReport> = ({ id }) => {
             id='admin.reports.report_title'
             defaultMessage='Report on {acct}'
             values={{ acct: (
-              <HoverRefWrapper accountId={account.id} inline>
+              <HoverRefWrapper accountId={targetAccount.id} inline>
                 <Link to={`/@${acct}`} title={acct}>@{acct}</Link>
               </HoverRefWrapper>
             ) }}
@@ -104,7 +105,7 @@ const Report: React.FC<IReport> = ({ id }) => {
 
         {statusCount > 0 && (
           <Accordion
-            headline={`Reported posts (${statusCount})`}
+            headline={intl.formatMessage(messages.reportedPosts, { count: statusCount as number })}
             expanded={accordionExpanded}
             onToggle={handleAccordionToggle}
           >
@@ -144,13 +145,15 @@ const Report: React.FC<IReport> = ({ id }) => {
         </Stack>
       </Stack>
 
-      <HStack space={2} alignItems='start' className='flex-none'>
-        <Button onClick={handleCloseReport}>
-          <FormattedMessage id='admin.reports.actions.close' defaultMessage='Close' />
-        </Button>
-
-        <DropdownMenu items={menu} src={require('@tabler/icons/dots-vertical.svg')} />
-      </HStack>
+      <Stack space={2} alignItems='top' className='flex-none'>
+        <DropdownMenu  items={menu} src={require('@tabler/icons/dots-vertical.svg')} />
+        <IconButton
+          src={require('@tabler/icons/x.svg')}
+          onClick={handleCloseReport}
+          theme='outlined'
+          iconClassName='p-1 text-gray-600 dark:text-gray-400'
+        />
+      </Stack>
     </HStack>
   );
 };

app/soapbox/locales/en.json

@@ -105,11 +105,11 @@
   "admin.latest_accounts_panel.more": "Click to see {count, plural, one {# account} other {# accounts}}",
   "admin.latest_accounts_panel.title": "Latest Accounts",
   "admin.moderation_log.empty_message": "You have not performed any moderation actions yet. When you do, a history will be shown here.",
-  "admin.reports.actions.close": "Close",
   "admin.reports.actions.view_status": "View post",
   "admin.reports.empty_message": "There are no open reports. If a user gets reported, they will show up here.",
   "admin.reports.report_closed_message": "Report on @{name} was closed",
   "admin.reports.report_title": "Report on {acct}",
+  "admin.reports.reported_posts": "{count} {count, plural, one {post} other {posts}} reported",
   "admin.software.backend": "Backend",
   "admin.software.frontend": "Frontend",
   "admin.statuses.actions.delete_status": "Delete post",
@@ -1381,6 +1381,8 @@
   "sw.state.unknown": "Unknown",
   "sw.state.waiting": "Waiting",
   "sw.status": "Status",
+  "sw.update": "Update",
+  "sw.update_text": "An update is available.",
   "sw.url": "Script URL",
   "tabs_bar.all": "All",
   "tabs_bar.dashboard": "Dashboard",