Admin: improve design of Moderation Logs

app/soapbox/features/admin/moderation-log.tsx

@@ -3,8 +3,9 @@ import { defineMessages, FormattedDate, useIntl } from 'react-intl';
 
 import { fetchModerationLog } from 'soapbox/actions/admin';
 import ScrollableList from 'soapbox/components/scrollable-list';
-import { Column } from 'soapbox/components/ui';
+import { Column, Stack, Text } from 'soapbox/components/ui';
 import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
+import { AdminLog } from 'soapbox/types/entities';
 
 const messages = defineMessages({
   heading: { id: 'column.admin.moderation_log', defaultMessage: 'Moderation Log' },
@@ -18,6 +19,7 @@ const ModerationLog = () => {
   const items = useAppSelector((state) => {
     return state.admin_log.index.map((i) => state.admin_log.items.get(String(i)));
   });
+
   const hasMore = useAppSelector((state) => state.admin_log.total - state.admin_log.index.count() > 0);
 
   const [isLoading, setIsLoading] = useState(true);
@@ -54,26 +56,38 @@ const ModerationLog = () => {
         emptyMessage={intl.formatMessage(messages.emptyMessage)}
         hasMore={hasMore}
         onLoadMore={handleLoadMore}
+        className='divide-y divide-solid divide-gray-200 dark:divide-gray-800'
       >
-        {items.map((item) => item && (
+        {items.map(item => item && (
-          <div className='logentry' key={item.id}>
+          <LogItem key={item.id} log={item} />
-            <div className='logentry__message'>{item.message}</div>
-            <div className='logentry__timestamp'>
-              <FormattedDate
-                value={new Date(item.time * 1000)}
-                hour12
-                year='numeric'
-                month='short'
-                day='2-digit'
-                hour='numeric'
-                minute='2-digit'
-              />
-            </div>
-          </div>
         ))}
       </ScrollableList>
     </Column>
   );
 };
 
+interface ILogItem {
+  log: AdminLog
+}
+
+const LogItem: React.FC<ILogItem> = ({ log }) => {
+  return (
+    <Stack space={2} className='p-4'>
+      <Text>{log.message}</Text>
+
+      <Text theme='muted' size='xs'>
+        <FormattedDate
+          value={new Date(log.time * 1000)}
+          hour12
+          year='numeric'
+          month='short'
+          day='2-digit'
+          hour='numeric'
+          minute='2-digit'
+        />
+      </Text>
+    </Stack>
+  );
+};
+
 export default ModerationLog;

app/soapbox/reducers/admin-log.ts

@@ -8,7 +8,7 @@ import { ADMIN_LOG_FETCH_SUCCESS } from 'soapbox/actions/admin';
 
 import type { AnyAction } from 'redux';
 
-const LogEntryRecord = ImmutableRecord({
+export const LogEntryRecord = ImmutableRecord({
   data: ImmutableMap<string, any>(),
   id: 0,
   message: '',

app/soapbox/types/entities.ts

@@ -24,10 +24,12 @@ import {
   StatusRecord,
   TagRecord,
 } from 'soapbox/normalizers';
+import { LogEntryRecord } from 'soapbox/reducers/admin-log';
 
 import type { Record as ImmutableRecord } from 'immutable';
 
 type AdminAccount = ReturnType<typeof AdminAccountRecord>;
+type AdminLog = ReturnType<typeof LogEntryRecord>;
 type AdminReport = ReturnType<typeof AdminReportRecord>;
 type Announcement = ReturnType<typeof AnnouncementRecord>;
 type AnnouncementReaction = ReturnType<typeof AnnouncementReactionRecord>;
@@ -68,6 +70,7 @@ type EmbeddedEntity<T extends object> = null | string | ReturnType<ImmutableReco
 
 export {
   AdminAccount,
+  AdminLog,
   AdminReport,
   Account,
   Announcement,

app/styles/components/admin.scss

@@ -20,13 +20,3 @@
     }
   }
 }
-
-.logentry {
-  padding: 15px;
-
-  &__timestamp {
-    color: var(--primary-text-color--faint);
-    font-size: 13px;
-    text-align: right;
-  }
-}