External/5chan
1
0
Fork 0
mirror of https://github.com/bitsocialnet/5chan.git synced 2026-08-03 07:41:04 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix(mod-queue): style action buttons to match board buttons and make status indicators bold/colored

Browse Source
This commit is contained in:
plebeius
2026-01-08 18:09:44 +01:00
parent 01823caeab
commit fbdfadc65c
2 changed files with 46 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/mod-queue/mod-queue.module.css
+26 -16
View File
@@ -147,24 +147,29 @@
display: flex; display: flex;
gap: 4px; gap: 4px;
justify-content: flex-end; 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) { @media (min-width: 640px) {
.actions {
display: block;
text-align: right;
}
.button { .button {
all: unset; all: unset;
cursor: pointer; cursor: pointer;
padding: 0; text-transform: capitalize;
color: var(--mod-queue-button-text-color); color: var(--button-desktop-text-color);
font-size: 11px; text-decoration: var(--button-text-decoration);
text-decoration: var(--mod-queue-button-text-decoration); display: inline;
display: inline-block;
font-family: inherit; font-family: inherit;
} }
.button:hover { .button:hover {
color: var(--mod-queue-button-text-color-hover); color: var(--button-desktop-text-color-hover);
text-decoration: var(--mod-queue-button-text-decoration); cursor: pointer;
} }
.button:disabled { .button:disabled {
@@ -173,20 +178,25 @@
} }
} }
.approve { /* Status indicators (spans only) - bold, green/red, no underline */
color: var(--mod-queue-approve-color); span.approve {
color: green;
font-weight: 700;
text-decoration: none;
} }
.approve:hover { span.approve:hover {
color: var(--mod-queue-approve-color-hover); color: green;
} }
.reject { span.reject {
color: var(--mod-queue-reject-color); color: red;
font-weight: 700;
text-decoration: none;
} }
.reject:hover { span.reject:hover {
color: var(--mod-queue-reject-color-hover); color: red;
} }
/* ModQueueBoardFilter styles */ /* ModQueueBoardFilter styles */
src/views/mod-queue/mod-queue.tsx
+14 -2
View File
@@ -154,20 +154,31 @@ const ModQueueRow = ({ comment, showBoardColumn = false }: ModQueueRowProps) =>
return ( return (
<> <>
<button className={`${styles.button} ${styles.approve}`} onClick={handleApprove} disabled={isPublishing}> [
<button className={styles.button} onClick={handleApprove} disabled={isPublishing}>
{t('approve')} {t('approve')}
</button> </button>
<button className={`${styles.button} ${styles.reject}`} onClick={handleReject} disabled={isPublishing}> ] [
<button className={styles.button} onClick={handleReject} disabled={isPublishing}>
{t('reject')} {t('reject')}
</button> </button>
]{' '}
{postUrl ? ( {postUrl ? (
<>
[
<Link to={postUrl} className={styles.button}> <Link to={postUrl} className={styles.button}>
{t('view')} {t('view')}
</Link> </Link>
]
</>
) : ( ) : (
<>
[
<button className={styles.button} disabled> <button className={styles.button} disabled>
{t('view')} {t('view')}
</button> </button>
]
</>
)} )}
</> </>
); );
@@ -263,6 +274,7 @@ export const ModQueueButton = ({ boardIdentifier, isMobile }: ModQueueButtonProp
const { feed } = useFeed({ const { feed } = useFeed({
subplebbitAddresses: shouldFetch ? subplebbitAddresses : [], subplebbitAddresses: shouldFetch ? subplebbitAddresses : [],
modQueue: ['pendingApproval'], modQueue: ['pendingApproval'],
sortType: 'new',
postsPerPage: 100, // Fetch enough to check timestamps postsPerPage: 100, // Fetch enough to check timestamps
}); });