update mod queue styling

src/views/mod-queue/mod-queue.module.css

@@ -53,11 +53,11 @@
 
 .tableHeader {
   display: flex;
-  padding: 8px;
+  padding: 5px;
   border-bottom: var(--mod-queue-header-border-bottom);
   background: var(--mod-queue-header-background-color);
   font-weight: bold;
-  font-size: 13px;
+  font-size: 9pt;
   text-transform: capitalize;
 }
 
@@ -97,26 +97,42 @@
 /* ModQueueRow styles */
 .row {
   display: flex;
-  padding: 4px 8px;
-  border-top: none;
-  border-left: none;
-  border-right: none;
-  border-bottom: var(--mod-queue-row-border-bottom);
+  padding: 2px;
+  border: none;
   align-items: center;
   gap: 8px;
-  background-color: var(--mod-queue-row-background-color);
   color: var(--body-font-color);
-  font-size: 13px;
+  font-size: 9pt;
 }
 
-.row:hover {
-  background-color: var(--mod-queue-row-hover-background-color);
+/* Odd rows - theme-specific background colors */
+:global(body.yotsuba) .rowOdd {
+  background-color: #ede2d4;
+}
+
+:global(body.yotsuba-b) .rowOdd {
+  background-color: #e0e5f6;
+}
+
+:global(body.futaba) .rowOdd {
+  background-color: #ede2d4;
+}
+
+:global(body.burichan) .rowOdd {
+  background-color: #e0e5f6;
+}
+
+:global(body.tomorrow) .rowOdd {
+  background-color: rgba(255, 255, 255, 0.1);
+}
+
+:global(body.photon) .rowOdd {
+  background-color: #888;
 }
 
 .number {
   width: 60px;
   flex-shrink: 0;
-  font-weight: bold;
 }
 
 .board {
@@ -147,7 +163,6 @@
   width: auto;
   flex-shrink: 0;
   text-align: right;
-  color: var(--mod-queue-time-color);
   white-space: nowrap;
 }
 

src/views/mod-queue/mod-queue.tsx

@@ -47,12 +47,13 @@ const ModQueueFooter = ({ hasMore, subplebbitAddresses }: ModQueueFooterProps) =
 interface ModQueueRowProps {
   comment: Comment;
   showBoardColumn?: boolean;
+  isOdd?: boolean;
 }
 
 // Track which action was initiated to show appropriate completion message
 type ModerationAction = 'approve' | 'reject' | null;
 
-const ModQueueRow = ({ comment, showBoardColumn = false }: ModQueueRowProps) => {
+const ModQueueRow = ({ comment, showBoardColumn = false, isOdd = false }: ModQueueRowProps) => {
   const { t } = useTranslation();
   const { getAlertThresholdSeconds } = useModQueueStore();
   const [initiatedAction, setInitiatedAction] = useState<ModerationAction>(null);
@@ -191,8 +192,8 @@ const ModQueueRow = ({ comment, showBoardColumn = false }: ModQueueRowProps) =>
   };
 
   return (
-    <div className={styles.row}>
-      <div className={styles.number}>{number ?? '—'}</div>
+    <div className={`${styles.row} ${isOdd ? styles.rowOdd : ''}`}>
+      <div className={styles.number}>{number ?? 'N/A'}</div>
       {showBoardColumn && <div className={styles.board}>{boardPath ? <Link to={`/${boardPath}`}>/{boardPath}/</Link> : <span>—</span>}</div>}
       <div className={styles.excerpt}>
         {postUrl ? (
@@ -524,7 +525,7 @@ export const ModQueueView = ({ boardIdentifier: propBoardIdentifier }: ModQueueV
             data={feed}
             totalCount={feed.length}
             endReached={loadMore}
-            itemContent={(index, comment) => <ModQueueRow key={comment.cid} comment={comment} showBoardColumn={showBoardColumn} />}
+            itemContent={(index, comment) => <ModQueueRow key={comment.cid} comment={comment} showBoardColumn={showBoardColumn} isOdd={index % 2 === 1} />}
             components={footerComponents}
           />
         </>