From fbdfadc65cd0ad24eff28552570ef91fa89fcddf Mon Sep 17 00:00:00 2001
From: plebeius <tom@plebbit.com>
Date: Thu, 8 Jan 2026 18:09:44 +0100
Subject: [PATCH] fix(mod-queue): style action buttons to match board buttons
 and make status indicators bold/colored

---
 src/views/mod-queue/mod-queue.module.css | 42 +++++++++++++++---------
 src/views/mod-queue/mod-queue.tsx        | 28 +++++++++++-----
 2 files changed, 46 insertions(+), 24 deletions(-)

diff --git a/src/views/mod-queue/mod-queue.module.css b/src/views/mod-queue/mod-queue.module.css
index 8d003dd9..748573ea 100644
--- a/src/views/mod-queue/mod-queue.module.css
+++ b/src/views/mod-queue/mod-queue.module.css
@@ -147,24 +147,29 @@
   display: flex;
   gap: 4px;
   justify-content: flex-end;
+  align-items: center;
 }
 
-/* Desktop: buttons styled as text links */
+/* Desktop: buttons styled as text links (same as board buttons) */
 @media (min-width: 640px) {
+  .actions {
+    display: block;
+    text-align: right;
+  }
+
   .button {
     all: unset;
     cursor: pointer;
-    padding: 0;
-    color: var(--mod-queue-button-text-color);
-    font-size: 11px;
-    text-decoration: var(--mod-queue-button-text-decoration);
-    display: inline-block;
+    text-transform: capitalize;
+    color: var(--button-desktop-text-color);
+    text-decoration: var(--button-text-decoration);
+    display: inline;
     font-family: inherit;
   }
 
   .button:hover {
-    color: var(--mod-queue-button-text-color-hover);
-    text-decoration: var(--mod-queue-button-text-decoration);
+    color: var(--button-desktop-text-color-hover);
+    cursor: pointer;
   }
 
   .button:disabled {
@@ -173,20 +178,25 @@
   }
 }
 
-.approve {
-  color: var(--mod-queue-approve-color);
+/* Status indicators (spans only) - bold, green/red, no underline */
+span.approve {
+  color: green;
+  font-weight: 700;
+  text-decoration: none;
 }
 
-.approve:hover {
-  color: var(--mod-queue-approve-color-hover);
+span.approve:hover {
+  color: green;
 }
 
-.reject {
-  color: var(--mod-queue-reject-color);
+span.reject {
+  color: red;
+  font-weight: 700;
+  text-decoration: none;
 }
 
-.reject:hover {
-  color: var(--mod-queue-reject-color-hover);
+span.reject:hover {
+  color: red;
 }
 
 /* ModQueueBoardFilter styles */
diff --git a/src/views/mod-queue/mod-queue.tsx b/src/views/mod-queue/mod-queue.tsx
index 11f3b5ca..37539fcf 100644
--- a/src/views/mod-queue/mod-queue.tsx
+++ b/src/views/mod-queue/mod-queue.tsx
@@ -154,20 +154,31 @@ const ModQueueRow = ({ comment, showBoardColumn = false }: ModQueueRowProps) =>
 
     return (
       <>
-        <button className={`${styles.button} ${styles.approve}`} onClick={handleApprove} disabled={isPublishing}>
+        [
+        <button className={styles.button} onClick={handleApprove} disabled={isPublishing}>
           {t('approve')}
         </button>
-        <button className={`${styles.button} ${styles.reject}`} onClick={handleReject} disabled={isPublishing}>
+        ] [
+        <button className={styles.button} onClick={handleReject} disabled={isPublishing}>
           {t('reject')}
         </button>
+        ]{' '}
         {postUrl ? (
-          <Link to={postUrl} className={styles.button}>
-            {t('view')}
-          </Link>
+          <>
+            [
+            <Link to={postUrl} className={styles.button}>
+              {t('view')}
+            </Link>
+            ]
+          </>
         ) : (
-          <button className={styles.button} disabled>
-            {t('view')}
-          </button>
+          <>
+            [
+            <button className={styles.button} disabled>
+              {t('view')}
+            </button>
+            ]
+          </>
         )}
       </>
     );
@@ -263,6 +274,7 @@ export const ModQueueButton = ({ boardIdentifier, isMobile }: ModQueueButtonProp
   const { feed } = useFeed({
     subplebbitAddresses: shouldFetch ? subplebbitAddresses : [],
     modQueue: ['pendingApproval'],
+    sortType: 'new',
     postsPerPage: 100, // Fetch enough to check timestamps
   });