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

@@ -27,6 +27,10 @@
   white-space: nowrap;
 }
 
+.copyErrorBracket {
+  color: var(--body-font-color);
+}
+
 .copyErrorButton {
   all: unset;
   font: inherit;

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>

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>
   );

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;