From bc67e961fc0da8ae402b684dbd0a2ff5b119291c Mon Sep 17 00:00:00 2001
From: Tommaso Casaburi <tom@bitsocial.net>
Date: Sat, 6 Jun 2026 23:15:29 +0700
Subject: [PATCH] fix: use body color for brackets around inline action buttons

Wrap copy-error and failed-publish bracket characters in spans so they use body text color instead of inheriting the action button color.
---
 src/components/error-display/error-display.module.css | 4 ++++
 src/components/error-display/error-display.tsx        | 4 ++--
 src/components/failed-publish-notice.tsx              | 8 ++++----
 src/views/post/post.module.css                        | 5 ++++-
 4 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/src/components/error-display/error-display.module.css b/src/components/error-display/error-display.module.css
index 780b1278..85a42066 100644
--- a/src/components/error-display/error-display.module.css
+++ b/src/components/error-display/error-display.module.css
@@ -27,6 +27,10 @@
   white-space: nowrap;
 }
 
+.copyErrorBracket {
+  color: var(--body-font-color);
+}
+
 .copyErrorButton {
   all: unset;
   font: inherit;
diff --git a/src/components/error-display/error-display.tsx b/src/components/error-display/error-display.tsx
index 93dcda20..2e5af7a9 100644
--- a/src/components/error-display/error-display.tsx
+++ b/src/components/error-display/error-display.tsx
@@ -79,11 +79,11 @@ const ErrorDisplay = ({ error, displayMessage, inline = false, showImmediately =
       {originalDisplayMessage && <span className={styles.errorMessage}>{originalDisplayMessage}</span>}
       {canCopyError && (
         <span className={styles.copyErrorButtonWrapper}>
-          [
+          <span className={styles.copyErrorBracket}>[</span>
           <button type='button' className={copyButtonClassNames.join(' ')} onClick={handleCopyError} title={t('copyFullError', 'copy full error')}>
             {displayCopyButtonLabel}
           </button>
-          ]
+          <span className={styles.copyErrorBracket}>]</span>
         </span>
       )}
     </div>
diff --git a/src/components/failed-publish-notice.tsx b/src/components/failed-publish-notice.tsx
index 2ff27575..3eaa95c7 100644
--- a/src/components/failed-publish-notice.tsx
+++ b/src/components/failed-publish-notice.tsx
@@ -23,19 +23,19 @@ const FailedPublishNotice = ({ isDeleting, isRetrying = false, onDelete, onRetry
       )}
       {onRetry && (
         <span className={styles.failedDeletePostAction}>
-          [
+          <span className={styles.failedDeletePostBracket}>[</span>
           <button type='button' className={styles.failedDeletePostButton} disabled={isBusy} onClick={onRetry}>
             Retry Publish
           </button>
-          ]
+          <span className={styles.failedDeletePostBracket}>]</span>
         </span>
       )}{' '}
       <span className={styles.failedDeletePostAction}>
-        [
+        <span className={styles.failedDeletePostBracket}>[</span>
         <button type='button' className={styles.failedDeletePostButton} disabled={isBusy} onClick={onDelete}>
           Delete Post
         </button>
-        ]
+        <span className={styles.failedDeletePostBracket}>]</span>
       </span>
     </span>
   );
diff --git a/src/views/post/post.module.css b/src/views/post/post.module.css
index dbb5b2b9..75aada2a 100644
--- a/src/views/post/post.module.css
+++ b/src/views/post/post.module.css
@@ -672,10 +672,13 @@
 }
 
 .failedDeletePostAction {
-  color: var(--button-desktop-text-color);
   font-weight: 400;
 }
 
+.failedDeletePostBracket {
+  color: var(--body-font-color);
+}
+
 .failedDeletePostButton {
   all: unset;
   font: inherit;