From b69ad1264ddcd315b178fdd3e88902e5d97e1708 Mon Sep 17 00:00:00 2001
From: Alec Armbruster <35377827+alectrocute@users.noreply.github.com>
Date: Mon, 26 Jun 2023 16:41:14 -0400
Subject: [PATCH 01/18] make post creator badge stand out more

---
 src/shared/components/comment/comment-node.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/shared/components/comment/comment-node.tsx b/src/shared/components/comment/comment-node.tsx
index 4ad15383..70369c70 100644
--- a/src/shared/components/comment/comment-node.tsx
+++ b/src/shared/components/comment/comment-node.tsx
@@ -315,8 +315,8 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                 <Icon icon="shield" inline classes="text-danger me-2" />
               )}
               {this.isPostCreator && (
-                <div className="badge text-bg-light d-none d-sm-inline me-2">
-                  {I18NextService.i18n.t("creator")}
+                <div className="badge text-info text-bg-light d-none d-sm-inline me-2">
+                  {I18NextService.i18n.t("op").toUpperCase()}
                 </div>
               )}
               {isMod_ && (

From 1faa9f354bc1429d14ff6437ff46b1eee1249cca Mon Sep 17 00:00:00 2001
From: Alec Armbruster <35377827+alectrocute@users.noreply.github.com>
Date: Mon, 26 Jun 2023 16:49:09 -0400
Subject: [PATCH 02/18] add tooltip

---
 src/shared/components/comment/comment-node.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/shared/components/comment/comment-node.tsx b/src/shared/components/comment/comment-node.tsx
index 70369c70..d7cda869 100644
--- a/src/shared/components/comment/comment-node.tsx
+++ b/src/shared/components/comment/comment-node.tsx
@@ -315,7 +315,11 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                 <Icon icon="shield" inline classes="text-danger me-2" />
               )}
               {this.isPostCreator && (
-                <div className="badge text-info text-bg-light d-none d-sm-inline me-2">
+                <div
+                  className="badge text-info text-bg-light d-none d-sm-inline me-2"
+                  aria-label={I18NextService.i18n.t("creator")}
+                  data-tippy-content={I18NextService.i18n.t("creator")}
+                >
                   {I18NextService.i18n.t("op").toUpperCase()}
                 </div>
               )}

From 03a4bfad467fab50e3f5fb8fc669da7084a54596 Mon Sep 17 00:00:00 2001
From: Alec Armbruster <35377827+alectrocute@users.noreply.github.com>
Date: Mon, 26 Jun 2023 17:19:34 -0400
Subject: [PATCH 03/18] remove toUpperCase since the translation is uppercase

---
 src/shared/components/comment/comment-node.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/shared/components/comment/comment-node.tsx b/src/shared/components/comment/comment-node.tsx
index d7cda869..4c0e8b67 100644
--- a/src/shared/components/comment/comment-node.tsx
+++ b/src/shared/components/comment/comment-node.tsx
@@ -320,7 +320,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                   aria-label={I18NextService.i18n.t("creator")}
                   data-tippy-content={I18NextService.i18n.t("creator")}
                 >
-                  {I18NextService.i18n.t("op").toUpperCase()}
+                  {I18NextService.i18n.t("op")}
                 </div>
               )}
               {isMod_ && (

From ee84634a73e2904f39bc7bb1b46fc102778ca156 Mon Sep 17 00:00:00 2001
From: Jay Sitter <jay@jaysitter.com>
Date: Mon, 26 Jun 2023 21:05:50 -0400
Subject: [PATCH 04/18] fix: Fix alignment of preview mini-overlay buttons on
 thumbs

---
 src/shared/components/post/post-listing.tsx | 20 +++++++++++++-------
 1 file changed, 13 insertions(+), 7 deletions(-)

diff --git a/src/shared/components/post/post-listing.tsx b/src/shared/components/post/post-listing.tsx
index f80cb970..3d373ee0 100644
--- a/src/shared/components/post/post-listing.tsx
+++ b/src/shared/components/post/post-listing.tsx
@@ -49,7 +49,7 @@ import {
   PurgeType,
   VoteContentType,
 } from "../../interfaces";
-import { mdNoImages, mdToHtml, mdToHtmlInline } from "../../markdown";
+import { mdToHtml, mdToHtmlInline } from "../../markdown";
 import { I18NextService, UserService } from "../../services";
 import { setupTippy } from "../../tippy";
 import { Icon, PurgeWarning, Spinner } from "../common/icon";
@@ -328,16 +328,19 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
 
     if (!this.props.hideImage && url && isImage(url) && this.imageSrc) {
       return (
-        <a
-          href={this.imageSrc}
-          className="text-body d-inline-block position-relative mb-2"
+        <button
+          type="button"
+          className="d-inline-block position-relative mb-2 p-0 border-0"
           data-tippy-content={I18NextService.i18n.t("expand_here")}
           onClick={linkEvent(this, this.handleImageExpandClick)}
           aria-label={I18NextService.i18n.t("expand_here")}
         >
           {this.imgThumb(this.imageSrc)}
-          <Icon icon="image" classes="mini-overlay" />
-        </a>
+          <Icon
+            icon="image"
+            classes="d-block text-white position-absolute end-0 top-0 mini-overlay text-opacity-75 text-opacity-100-hover"
+          />
+        </button>
       );
     } else if (!this.props.hideImage && url && thumbnail && this.imageSrc) {
       return (
@@ -348,7 +351,10 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
           title={url}
         >
           {this.imgThumb(this.imageSrc)}
-          <Icon icon="external-link" classes="mini-overlay" />
+          <Icon
+            icon="external-link"
+            classes="d-block text-white position-absolute end-0 top-0 mini-overlay text-opacity-75 text-opacity-100-hover"
+          />
         </a>
       );
     } else if (url) {

From 3439512a1cd1eba7db5a8b9e7e718d3b3b414869 Mon Sep 17 00:00:00 2001
From: Jay Sitter <jay@jaysitter.com>
Date: Mon, 26 Jun 2023 21:12:43 -0400
Subject: [PATCH 05/18] fix: Restore mdNoImages import

---
 src/shared/components/post/post-listing.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/shared/components/post/post-listing.tsx b/src/shared/components/post/post-listing.tsx
index 3d373ee0..f1d0dcab 100644
--- a/src/shared/components/post/post-listing.tsx
+++ b/src/shared/components/post/post-listing.tsx
@@ -49,7 +49,7 @@ import {
   PurgeType,
   VoteContentType,
 } from "../../interfaces";
-import { mdToHtml, mdToHtmlInline } from "../../markdown";
+import { mdNoImages, mdToHtml, mdToHtmlInline } from "../../markdown";
 import { I18NextService, UserService } from "../../services";
 import { setupTippy } from "../../tippy";
 import { Icon, PurgeWarning, Spinner } from "../common/icon";

From 9e1eb5fe19584264677ac5a1ed448fadee63beb9 Mon Sep 17 00:00:00 2001
From: Alec Armbruster <35377827+alectrocute@users.noreply.github.com>
Date: Tue, 27 Jun 2023 11:42:00 -0400
Subject: [PATCH 06/18] always show badge on mobile

---
 src/shared/components/comment/comment-node.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/shared/components/comment/comment-node.tsx b/src/shared/components/comment/comment-node.tsx
index 4c0e8b67..0fe43e26 100644
--- a/src/shared/components/comment/comment-node.tsx
+++ b/src/shared/components/comment/comment-node.tsx
@@ -316,7 +316,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
               )}
               {this.isPostCreator && (
                 <div
-                  className="badge text-info text-bg-light d-none d-sm-inline me-2"
+                  className="badge text-info text-bg-light d-sm-inline me-2"
                   aria-label={I18NextService.i18n.t("creator")}
                   data-tippy-content={I18NextService.i18n.t("creator")}
                 >

From c020debf6d34fdd07da9346eccde6fe22da0b513 Mon Sep 17 00:00:00 2001
From: Alec Armbruster <35377827+alectrocute@users.noreply.github.com>
Date: Tue, 27 Jun 2023 11:44:17 -0400
Subject: [PATCH 07/18] use span

---
 src/shared/components/comment/comment-node.tsx | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/shared/components/comment/comment-node.tsx b/src/shared/components/comment/comment-node.tsx
index 0fe43e26..c0d9d319 100644
--- a/src/shared/components/comment/comment-node.tsx
+++ b/src/shared/components/comment/comment-node.tsx
@@ -315,28 +315,28 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                 <Icon icon="shield" inline classes="text-danger me-2" />
               )}
               {this.isPostCreator && (
-                <div
+                <span
                   className="badge text-info text-bg-light d-sm-inline me-2"
                   aria-label={I18NextService.i18n.t("creator")}
                   data-tippy-content={I18NextService.i18n.t("creator")}
                 >
                   {I18NextService.i18n.t("op")}
-                </div>
+                </span>
               )}
               {isMod_ && (
-                <div className="badge text-bg-light d-none d-sm-inline me-2">
+                <span className="badge text-bg-light d-none d-sm-inline me-2">
                   {I18NextService.i18n.t("mod")}
-                </div>
+                </span>
               )}
               {isAdmin_ && (
-                <div className="badge text-bg-light d-none d-sm-inline me-2">
+                <span className="badge text-bg-light d-none d-sm-inline me-2">
                   {I18NextService.i18n.t("admin")}
-                </div>
+                </span>
               )}
               {cv.creator.bot_account && (
-                <div className="badge text-bg-light d-none d-sm-inline me-2">
+                <span className="badge text-bg-light d-none d-sm-inline me-2">
                   {I18NextService.i18n.t("bot_account").toLowerCase()}
-                </div>
+                </span>
               )}
               {this.props.showCommunity && (
                 <>

From 9cf3c33823ab5dfd002c4813c06cc93a38272e59 Mon Sep 17 00:00:00 2001
From: Alec Armbruster <35377827+alectrocute@users.noreply.github.com>
Date: Tue, 27 Jun 2023 12:59:06 -0400
Subject: [PATCH 08/18] fix weird borders when markdown textarea is disabled

---
 src/shared/components/common/markdown-textarea.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/shared/components/common/markdown-textarea.tsx b/src/shared/components/common/markdown-textarea.tsx
index 8963d5e9..3f5b6e1e 100644
--- a/src/shared/components/common/markdown-textarea.tsx
+++ b/src/shared/components/common/markdown-textarea.tsx
@@ -159,13 +159,16 @@ export class MarkdownTextArea extends Component<
         <div className="mb-3 row">
           <div className="col-12">
             <div className="rounded bg-light border">
-              <div className="d-flex flex-wrap border-bottom">
+              <div
+                className={`d-flex flex-wrap border-bottom ${
+                  this.isDisabled ? "no-click" : ""
+                }`}
+              >
                 {this.getFormatButton("bold", this.handleInsertBold)}
                 {this.getFormatButton("italic", this.handleInsertItalic)}
                 {this.getFormatButton("link", this.handleInsertLink)}
                 <EmojiPicker
                   onEmojiClick={e => this.handleEmoji(this, e)}
-                  disabled={this.isDisabled}
                 ></EmojiPicker>
                 <form className="btn btn-sm text-muted fw-bold">
                   <label
@@ -188,9 +191,7 @@ export class MarkdownTextArea extends Component<
                     name="file"
                     className="d-none"
                     multiple
-                    disabled={
-                      !UserService.Instance.myUserInfo || this.isDisabled
-                    }
+                    disabled={!UserService.Instance.myUserInfo}
                     onChange={linkEvent(this, this.handleImageUpload)}
                   />
                 </form>
@@ -352,7 +353,6 @@ export class MarkdownTextArea extends Component<
         data-tippy-content={I18NextService.i18n.t(type)}
         aria-label={I18NextService.i18n.t(type)}
         onClick={linkEvent(this, handleClick)}
-        disabled={this.isDisabled}
       >
         <Icon icon={iconType} classes="icon-inline" />
       </button>

From 746b52f378ef5cfadc700566cd025e7556e1ecd0 Mon Sep 17 00:00:00 2001
From: Alec Armbruster <35377827+alectrocute@users.noreply.github.com>
Date: Tue, 27 Jun 2023 13:41:31 -0400
Subject: [PATCH 09/18] add @jsit advice

---
 src/shared/components/common/markdown-textarea.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/shared/components/common/markdown-textarea.tsx b/src/shared/components/common/markdown-textarea.tsx
index 3f5b6e1e..2dd1b84a 100644
--- a/src/shared/components/common/markdown-textarea.tsx
+++ b/src/shared/components/common/markdown-textarea.tsx
@@ -160,9 +160,9 @@ export class MarkdownTextArea extends Component<
           <div className="col-12">
             <div className="rounded bg-light border">
               <div
-                className={`d-flex flex-wrap border-bottom ${
-                  this.isDisabled ? "no-click" : ""
-                }`}
+                className={classNames("d-flex flex-wrap border-bottom", {
+                  "no-click": this.isDisabled,
+                })}
               >
                 {this.getFormatButton("bold", this.handleInsertBold)}
                 {this.getFormatButton("italic", this.handleInsertItalic)}

From 6d65abc3ee7c3353a12d90634300c8d4df7822f2 Mon Sep 17 00:00:00 2001
From: Alec Armbruster <35377827+alectrocute@users.noreply.github.com>
Date: Tue, 27 Jun 2023 14:10:05 -0400
Subject: [PATCH 10/18] refactor

---
 .../components/comment/comment-node.tsx       | 90 +++++++++++++------
 1 file changed, 63 insertions(+), 27 deletions(-)

diff --git a/src/shared/components/comment/comment-node.tsx b/src/shared/components/comment/comment-node.tsx
index c0d9d319..3f3361b2 100644
--- a/src/shared/components/comment/comment-node.tsx
+++ b/src/shared/components/comment/comment-node.tsx
@@ -308,36 +308,44 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                   classes="icon-inline"
                 />
               </button>
+
               <span className="me-2">
                 <PersonListing person={cv.creator} />
               </span>
+
               {cv.comment.distinguished && (
                 <Icon icon="shield" inline classes="text-danger me-2" />
               )}
-              {this.isPostCreator && (
-                <span
-                  className="badge text-info text-bg-light d-sm-inline me-2"
-                  aria-label={I18NextService.i18n.t("creator")}
-                  data-tippy-content={I18NextService.i18n.t("creator")}
-                >
-                  {I18NextService.i18n.t("op")}
-                </span>
-              )}
-              {isMod_ && (
-                <span className="badge text-bg-light d-none d-sm-inline me-2">
-                  {I18NextService.i18n.t("mod")}
-                </span>
-              )}
-              {isAdmin_ && (
-                <span className="badge text-bg-light d-none d-sm-inline me-2">
-                  {I18NextService.i18n.t("admin")}
-                </span>
-              )}
-              {cv.creator.bot_account && (
-                <span className="badge text-bg-light d-none d-sm-inline me-2">
-                  {I18NextService.i18n.t("bot_account").toLowerCase()}
-                </span>
-              )}
+
+              {this.isPostCreator &&
+                this.getRoleLabelPill({
+                  label: I18NextService.i18n.t("op").toUpperCase(),
+                  tooltip: I18NextService.i18n.t("creator"),
+                  textClasses: "text-info",
+                  hideOnMobile: false,
+                })}
+
+              {isMod_ &&
+                this.getRoleLabelPill({
+                  label: I18NextService.i18n.t("mod"),
+                  tooltip: I18NextService.i18n.t("mod"),
+                  hideOnMobile: true,
+                })}
+
+              {isAdmin_ &&
+                this.getRoleLabelPill({
+                  label: I18NextService.i18n.t("admin"),
+                  tooltip: I18NextService.i18n.t("admin"),
+                  hideOnMobile: true,
+                })}
+
+              {cv.creator.bot_account &&
+                this.getRoleLabelPill({
+                  label: I18NextService.i18n.t("bot_account").toLowerCase(),
+                  tooltip: I18NextService.i18n.t("bot_account"),
+                  hideOnMobile: true,
+                })}
+
               {this.props.showCommunity && (
                 <>
                   <span className="mx-1">{I18NextService.i18n.t("to")}</span>
@@ -348,7 +356,9 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                   </Link>
                 </>
               )}
-              {this.linkBtn(true)}
+
+              {this.getLinkButton(true)}
+
               {cv.comment.language_id !== 0 && (
                 <span className="badge text-bg-light d-none d-sm-inline me-2">
                   {
@@ -414,7 +424,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                   />
                 )}
                 <div className="d-flex justify-content-between justify-content-lg-start flex-wrap text-muted fw-bold">
-                  {this.props.showContext && this.linkBtn()}
+                  {this.props.showContext && this.getLinkButton()}
                   {this.props.markable && (
                     <button
                       className="btn btn-link btn-animate text-muted"
@@ -1190,7 +1200,33 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
     }
   }
 
-  linkBtn(small = false) {
+  getRoleLabelPill({
+    label,
+    tooltip,
+    textClasses,
+    hideOnMobile,
+  }: {
+    label: string;
+    tooltip: string;
+    textClasses?: string;
+    hideOnMobile?: boolean;
+  }) {
+    const classnames = classNames(`badge me-2 text-bg-light ${textClasses}`, {
+      "d-none d-md-inline": hideOnMobile,
+    });
+
+    return (
+      <span
+        className={classnames}
+        aria-label={tooltip}
+        data-tippy-content={tooltip}
+      >
+        {label}
+      </span>
+    );
+  }
+
+  getLinkButton(small = false) {
     const cv = this.commentView;
 
     const classnames = classNames("btn btn-link btn-animate text-muted", {

From 086052a69a8c99c78c0ad0ddce317573a8cafca2 Mon Sep 17 00:00:00 2001
From: Alec Armbruster <35377827+alectrocute@users.noreply.github.com>
Date: Tue, 27 Jun 2023 14:29:44 -0400
Subject: [PATCH 11/18] refactor x2

---
 .../components/comment/comment-node.tsx       | 45 +++++++++++++------
 1 file changed, 31 insertions(+), 14 deletions(-)

diff --git a/src/shared/components/comment/comment-node.tsx b/src/shared/components/comment/comment-node.tsx
index 3f3361b2..fcb74751 100644
--- a/src/shared/components/comment/comment-node.tsx
+++ b/src/shared/components/comment/comment-node.tsx
@@ -321,29 +321,28 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                 this.getRoleLabelPill({
                   label: I18NextService.i18n.t("op").toUpperCase(),
                   tooltip: I18NextService.i18n.t("creator"),
-                  textClasses: "text-info",
-                  hideOnMobile: false,
+                  parentClasses: "text-info",
+                  shrinkToSingleLetter: false,
                 })}
 
               {isMod_ &&
                 this.getRoleLabelPill({
                   label: I18NextService.i18n.t("mod"),
                   tooltip: I18NextService.i18n.t("mod"),
-                  hideOnMobile: true,
+                  shrunkenLabelClasses: "text-info",
                 })}
 
               {isAdmin_ &&
                 this.getRoleLabelPill({
                   label: I18NextService.i18n.t("admin"),
                   tooltip: I18NextService.i18n.t("admin"),
-                  hideOnMobile: true,
+                  shrunkenLabelClasses: "text-danger",
                 })}
 
-              {cv.creator.bot_account &&
+              {true &&
                 this.getRoleLabelPill({
                   label: I18NextService.i18n.t("bot_account").toLowerCase(),
                   tooltip: I18NextService.i18n.t("bot_account"),
-                  hideOnMobile: true,
                 })}
 
               {this.props.showCommunity && (
@@ -1203,25 +1202,43 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
   getRoleLabelPill({
     label,
     tooltip,
-    textClasses,
-    hideOnMobile,
+    parentClasses,
+    shrunkenLabelClasses,
+    hideOnMobile = false,
+    shrinkToSingleLetter = true,
   }: {
     label: string;
     tooltip: string;
-    textClasses?: string;
+    parentClasses?: string;
+    shrunkenLabelClasses?: string;
     hideOnMobile?: boolean;
+    shrinkToSingleLetter?: boolean;
   }) {
-    const classnames = classNames(`badge me-2 text-bg-light ${textClasses}`, {
-      "d-none d-md-inline": hideOnMobile,
-    });
+    const parentClassNames = classNames(
+      `badge me-2 text-bg-light ${parentClasses}`,
+      {
+        "d-none d-md-inline": hideOnMobile,
+      }
+    );
+
+    let fullLabelClassNames = "d-none d-md-inline";
+    let shrunkenLabelClassNames = `d-inline d-md-none ${shrunkenLabelClasses}`;
+
+    if (!shrinkToSingleLetter) {
+      fullLabelClassNames = "";
+      shrunkenLabelClassNames = "d-none";
+    }
 
     return (
       <span
-        className={classnames}
+        className={parentClassNames}
         aria-label={tooltip}
         data-tippy-content={tooltip}
       >
-        {label}
+        <span className={fullLabelClassNames}>{label}</span>
+        <span className={shrunkenLabelClassNames}>
+          {label[0].toUpperCase()}
+        </span>
       </span>
     );
   }

From 0b7e2b7e4df01117c1ea1e63e1a49ab99baba78c Mon Sep 17 00:00:00 2001
From: Alec Armbruster <35377827+alectrocute@users.noreply.github.com>
Date: Tue, 27 Jun 2023 14:31:53 -0400
Subject: [PATCH 12/18] oops

---
 src/shared/components/comment/comment-node.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/shared/components/comment/comment-node.tsx b/src/shared/components/comment/comment-node.tsx
index fcb74751..b6d491b2 100644
--- a/src/shared/components/comment/comment-node.tsx
+++ b/src/shared/components/comment/comment-node.tsx
@@ -339,7 +339,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                   shrunkenLabelClasses: "text-danger",
                 })}
 
-              {true &&
+              {cv.creator.bot_account &&
                 this.getRoleLabelPill({
                   label: I18NextService.i18n.t("bot_account").toLowerCase(),
                   tooltip: I18NextService.i18n.t("bot_account"),

From f333710077d519b622ce4a22de8f011535d057e4 Mon Sep 17 00:00:00 2001
From: Alec Armbruster <35377827+alectrocute@users.noreply.github.com>
Date: Tue, 27 Jun 2023 14:36:19 -0400
Subject: [PATCH 13/18] make mod shrunken label text-primary

---
 src/shared/components/comment/comment-node.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/shared/components/comment/comment-node.tsx b/src/shared/components/comment/comment-node.tsx
index b6d491b2..0ce8638d 100644
--- a/src/shared/components/comment/comment-node.tsx
+++ b/src/shared/components/comment/comment-node.tsx
@@ -329,7 +329,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                 this.getRoleLabelPill({
                   label: I18NextService.i18n.t("mod"),
                   tooltip: I18NextService.i18n.t("mod"),
-                  shrunkenLabelClasses: "text-info",
+                  shrunkenLabelClasses: "text-primary",
                 })}
 
               {isAdmin_ &&

From 4944f19143481a351b1286b5ab1bd73275469e7a Mon Sep 17 00:00:00 2001
From: Alec Armbruster <35377827+alectrocute@users.noreply.github.com>
Date: Tue, 27 Jun 2023 14:39:30 -0400
Subject: [PATCH 14/18] change me-2 to me-1, no need for me-2 width

---
 src/shared/components/comment/comment-node.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/shared/components/comment/comment-node.tsx b/src/shared/components/comment/comment-node.tsx
index 0ce8638d..6452cb9e 100644
--- a/src/shared/components/comment/comment-node.tsx
+++ b/src/shared/components/comment/comment-node.tsx
@@ -1215,7 +1215,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
     shrinkToSingleLetter?: boolean;
   }) {
     const parentClassNames = classNames(
-      `badge me-2 text-bg-light ${parentClasses}`,
+      `badge me-1 text-bg-light ${parentClasses}`,
       {
         "d-none d-md-inline": hideOnMobile,
       }

From 4e161f5f910a390dce320adfc9715b784670bfe2 Mon Sep 17 00:00:00 2001
From: Alec Armbruster <35377827+alectrocute@users.noreply.github.com>
Date: Tue, 27 Jun 2023 15:00:35 -0400
Subject: [PATCH 15/18] refactor again

---
 .../components/comment/comment-node.tsx       | 42 +++++--------------
 1 file changed, 10 insertions(+), 32 deletions(-)

diff --git a/src/shared/components/comment/comment-node.tsx b/src/shared/components/comment/comment-node.tsx
index 6452cb9e..ff03ddc6 100644
--- a/src/shared/components/comment/comment-node.tsx
+++ b/src/shared/components/comment/comment-node.tsx
@@ -321,22 +321,22 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                 this.getRoleLabelPill({
                   label: I18NextService.i18n.t("op").toUpperCase(),
                   tooltip: I18NextService.i18n.t("creator"),
-                  parentClasses: "text-info",
-                  shrinkToSingleLetter: false,
+                  classes: "text-bg-info text-black",
+                  shrink: false,
                 })}
 
               {isMod_ &&
                 this.getRoleLabelPill({
                   label: I18NextService.i18n.t("mod"),
                   tooltip: I18NextService.i18n.t("mod"),
-                  shrunkenLabelClasses: "text-primary",
+                  classes: "text-bg-primary text-black",
                 })}
 
               {isAdmin_ &&
                 this.getRoleLabelPill({
                   label: I18NextService.i18n.t("admin"),
                   tooltip: I18NextService.i18n.t("admin"),
-                  shrunkenLabelClasses: "text-danger",
+                  classes: "text-bg-danger text-black",
                 })}
 
               {cv.creator.bot_account &&
@@ -1202,43 +1202,21 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
   getRoleLabelPill({
     label,
     tooltip,
-    parentClasses,
-    shrunkenLabelClasses,
-    hideOnMobile = false,
-    shrinkToSingleLetter = true,
+    classes,
+    shrink = true,
   }: {
     label: string;
     tooltip: string;
-    parentClasses?: string;
-    shrunkenLabelClasses?: string;
-    hideOnMobile?: boolean;
-    shrinkToSingleLetter?: boolean;
+    classes?: string;
+    shrink?: boolean;
   }) {
-    const parentClassNames = classNames(
-      `badge me-1 text-bg-light ${parentClasses}`,
-      {
-        "d-none d-md-inline": hideOnMobile,
-      }
-    );
-
-    let fullLabelClassNames = "d-none d-md-inline";
-    let shrunkenLabelClassNames = `d-inline d-md-none ${shrunkenLabelClasses}`;
-
-    if (!shrinkToSingleLetter) {
-      fullLabelClassNames = "";
-      shrunkenLabelClassNames = "d-none";
-    }
-
     return (
       <span
-        className={parentClassNames}
+        className={`badge me-1 ${classes ?? "text-bg-light"}`}
         aria-label={tooltip}
         data-tippy-content={tooltip}
       >
-        <span className={fullLabelClassNames}>{label}</span>
-        <span className={shrunkenLabelClassNames}>
-          {label[0].toUpperCase()}
-        </span>
+        {shrink ? label[0].toUpperCase() : label}
       </span>
     );
   }

From 8f1b0ad55920f6756a88525d678983b83428459b Mon Sep 17 00:00:00 2001
From: Alec Armbruster <35377827+alectrocute@users.noreply.github.com>
Date: Tue, 27 Jun 2023 15:49:14 -0400
Subject: [PATCH 16/18] refactor

---
 .../components/comment/comment-node.tsx       | 33 +++------------
 src/shared/components/person/profile.tsx      | 37 ++++++++++++----
 src/shared/components/post/post-listing.tsx   | 42 ++++++++++---------
 src/shared/utils/app/get-role-label-pill.tsx  | 21 ++++++++++
 src/shared/utils/app/index.ts                 |  2 +
 5 files changed, 81 insertions(+), 54 deletions(-)
 create mode 100644 src/shared/utils/app/get-role-label-pill.tsx

diff --git a/src/shared/components/comment/comment-node.tsx b/src/shared/components/comment/comment-node.tsx
index ff03ddc6..079edec7 100644
--- a/src/shared/components/comment/comment-node.tsx
+++ b/src/shared/components/comment/comment-node.tsx
@@ -1,6 +1,7 @@
 import {
   colorList,
   getCommentParentId,
+  getRoleLabelPill,
   myAuth,
   myAuthRequired,
   showScores,
@@ -318,7 +319,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
               )}
 
               {this.isPostCreator &&
-                this.getRoleLabelPill({
+                getRoleLabelPill({
                   label: I18NextService.i18n.t("op").toUpperCase(),
                   tooltip: I18NextService.i18n.t("creator"),
                   classes: "text-bg-info text-black",
@@ -326,21 +327,21 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                 })}
 
               {isMod_ &&
-                this.getRoleLabelPill({
+                getRoleLabelPill({
                   label: I18NextService.i18n.t("mod"),
                   tooltip: I18NextService.i18n.t("mod"),
                   classes: "text-bg-primary text-black",
                 })}
 
               {isAdmin_ &&
-                this.getRoleLabelPill({
+                getRoleLabelPill({
                   label: I18NextService.i18n.t("admin"),
                   tooltip: I18NextService.i18n.t("admin"),
-                  classes: "text-bg-danger text-black",
+                  classes: "text-bg-danger text-white",
                 })}
 
               {cv.creator.bot_account &&
-                this.getRoleLabelPill({
+                getRoleLabelPill({
                   label: I18NextService.i18n.t("bot_account").toLowerCase(),
                   tooltip: I18NextService.i18n.t("bot_account"),
                 })}
@@ -1199,28 +1200,6 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
     }
   }
 
-  getRoleLabelPill({
-    label,
-    tooltip,
-    classes,
-    shrink = true,
-  }: {
-    label: string;
-    tooltip: string;
-    classes?: string;
-    shrink?: boolean;
-  }) {
-    return (
-      <span
-        className={`badge me-1 ${classes ?? "text-bg-light"}`}
-        aria-label={tooltip}
-        data-tippy-content={tooltip}
-      >
-        {shrink ? label[0].toUpperCase() : label}
-      </span>
-    );
-  }
-
   getLinkButton(small = false) {
     const cv = this.commentView;
 
diff --git a/src/shared/components/person/profile.tsx b/src/shared/components/person/profile.tsx
index afd88184..4a8de027 100644
--- a/src/shared/components/person/profile.tsx
+++ b/src/shared/components/person/profile.tsx
@@ -5,6 +5,7 @@ import {
   enableDownvotes,
   enableNsfw,
   getCommentParentId,
+  getRoleLabelPill,
   myAuth,
   myAuthRequired,
   setIsoData,
@@ -484,23 +485,43 @@ export class Profile extends Component<
                       />
                     </li>
                     {isBanned(pv.person) && (
-                      <li className="list-inline-item badge text-bg-danger">
-                        {I18NextService.i18n.t("banned")}
+                      <li className="list-inline-item">
+                        {getRoleLabelPill({
+                          label: I18NextService.i18n.t("banned"),
+                          tooltip: I18NextService.i18n.t("banned"),
+                          classes: "text-bg-danger text-white",
+                          shrink: false,
+                        })}
                       </li>
                     )}
                     {pv.person.deleted && (
-                      <li className="list-inline-item badge text-bg-danger">
-                        {I18NextService.i18n.t("deleted")}
+                      <li className="list-inline-item">
+                        {getRoleLabelPill({
+                          label: I18NextService.i18n.t("deleted"),
+                          tooltip: I18NextService.i18n.t("deleted"),
+                          classes: "text-bg-danger text-white",
+                          shrink: false,
+                        })}
                       </li>
                     )}
                     {pv.person.admin && (
-                      <li className="list-inline-item badge text-bg-light">
-                        {I18NextService.i18n.t("admin")}
+                      <li className="list-inline-item">
+                        {getRoleLabelPill({
+                          label: I18NextService.i18n.t("admin"),
+                          tooltip: I18NextService.i18n.t("admin"),
+                          shrink: false,
+                        })}
                       </li>
                     )}
                     {pv.person.bot_account && (
-                      <li className="list-inline-item badge text-bg-light">
-                        {I18NextService.i18n.t("bot_account").toLowerCase()}
+                      <li className="list-inline-item">
+                        {getRoleLabelPill({
+                          label: I18NextService.i18n
+                            .t("bot_account")
+                            .toLowerCase(),
+                          tooltip: I18NextService.i18n.t("bot_account"),
+                          shrink: false,
+                        })}
                       </li>
                     )}
                   </ul>
diff --git a/src/shared/components/post/post-listing.tsx b/src/shared/components/post/post-listing.tsx
index b9a19131..64b9a7a8 100644
--- a/src/shared/components/post/post-listing.tsx
+++ b/src/shared/components/post/post-listing.tsx
@@ -1,4 +1,4 @@
-import { myAuthRequired } from "@utils/app";
+import { getRoleLabelPill, myAuthRequired } from "@utils/app";
 import { canShare, share } from "@utils/browser";
 import { getExternalHost, getHttpBase } from "@utils/env";
 import {
@@ -398,23 +398,27 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
   createdLine() {
     const post_view = this.postView;
     return (
-      <span className="small">
-        <PersonListing person={post_view.creator} />
-        {this.creatorIsMod_ && (
-          <span className="mx-1 badge text-bg-light">
-            {I18NextService.i18n.t("mod")}
-          </span>
-        )}
-        {this.creatorIsAdmin_ && (
-          <span className="mx-1 badge text-bg-light">
-            {I18NextService.i18n.t("admin")}
-          </span>
-        )}
-        {post_view.creator.bot_account && (
-          <span className="mx-1 badge text-bg-light">
-            {I18NextService.i18n.t("bot_account").toLowerCase()}
-          </span>
-        )}
+      <div className="small">
+        <span className="me-1">
+          <PersonListing person={post_view.creator} />
+        </span>
+        {this.creatorIsMod_ &&
+          getRoleLabelPill({
+            label: I18NextService.i18n.t("mod"),
+            tooltip: I18NextService.i18n.t("mod"),
+            classes: "text-bg-primary text-black",
+          })}
+        {this.creatorIsAdmin_ &&
+          getRoleLabelPill({
+            label: I18NextService.i18n.t("admin"),
+            tooltip: I18NextService.i18n.t("admin"),
+            classes: "text-bg-danger text-white",
+          })}
+        {post_view.creator.bot_account &&
+          getRoleLabelPill({
+            label: I18NextService.i18n.t("bot_account").toLowerCase(),
+            tooltip: I18NextService.i18n.t("bot_account"),
+          })}
         {this.props.showCommunity && (
           <>
             {" "}
@@ -436,7 +440,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
           published={post_view.post.published}
           updated={post_view.post.updated}
         />
-      </span>
+      </div>
     );
   }
 
diff --git a/src/shared/utils/app/get-role-label-pill.tsx b/src/shared/utils/app/get-role-label-pill.tsx
new file mode 100644
index 00000000..0cb0a414
--- /dev/null
+++ b/src/shared/utils/app/get-role-label-pill.tsx
@@ -0,0 +1,21 @@
+export default function getRoleLabelPill({
+  label,
+  tooltip,
+  classes,
+  shrink = true,
+}: {
+  label: string;
+  tooltip: string;
+  classes?: string;
+  shrink?: boolean;
+}) {
+  return (
+    <span
+      className={`badge me-1 ${classes ?? "text-bg-light"}`}
+      aria-label={tooltip}
+      data-tippy-content={tooltip}
+    >
+      {shrink ? label[0].toUpperCase() : label}
+    </span>
+  );
+}
diff --git a/src/shared/utils/app/index.ts b/src/shared/utils/app/index.ts
index f98357d7..12cf1ea2 100644
--- a/src/shared/utils/app/index.ts
+++ b/src/shared/utils/app/index.ts
@@ -29,6 +29,7 @@ import getDataTypeString from "./get-data-type-string";
 import getDepthFromComment from "./get-depth-from-comment";
 import getIdFromProps from "./get-id-from-props";
 import getRecipientIdFromProps from "./get-recipient-id-from-props";
+import getRoleLabelPill from "./get-role-label-pill";
 import getUpdatedSearchId from "./get-updated-search-id";
 import initializeSite from "./initialize-site";
 import insertCommentIntoTree from "./insert-comment-into-tree";
@@ -87,6 +88,7 @@ export {
   getDepthFromComment,
   getIdFromProps,
   getRecipientIdFromProps,
+  getRoleLabelPill,
   getUpdatedSearchId,
   getUserInterfaceLangId,
   initializeSite,

From e7c121aff93a2965ab28e66fc0d2e3dbeab41a37 Mon Sep 17 00:00:00 2001
From: SleeplessOne1917 <abias1122@gmail.com>
Date: Tue, 27 Jun 2023 19:01:47 -0400
Subject: [PATCH 17/18] Fix subscribe and block community buttons not showing
 up on first load

---
 src/shared/components/community/sidebar.tsx | 48 ++++++++++-----------
 1 file changed, 22 insertions(+), 26 deletions(-)

diff --git a/src/shared/components/community/sidebar.tsx b/src/shared/components/community/sidebar.tsx
index 733c19a1..d5cf2cb6 100644
--- a/src/shared/components/community/sidebar.tsx
+++ b/src/shared/components/community/sidebar.tsx
@@ -260,20 +260,18 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
   subscribe() {
     const community_view = this.props.community_view;
     return (
-      <>
-        {community_view.subscribed == "NotSubscribed" && (
-          <button
-            className="btn btn-secondary d-block mb-2 w-100"
-            onClick={linkEvent(this, this.handleFollowCommunity)}
-          >
-            {this.state.followCommunityLoading ? (
-              <Spinner />
-            ) : (
-              I18NextService.i18n.t("subscribe")
-            )}
-          </button>
-        )}
-      </>
+      community_view.subscribed === "NotSubscribed" && (
+        <button
+          className="btn btn-secondary d-block mb-2 w-100"
+          onClick={linkEvent(this, this.handleFollowCommunity)}
+        >
+          {this.state.followCommunityLoading ? (
+            <Spinner />
+          ) : (
+            I18NextService.i18n.t("subscribe")
+          )}
+        </button>
+      )
     );
   }
 
@@ -281,18 +279,16 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
     const { subscribed, blocked } = this.props.community_view;
 
     return (
-      <>
-        {subscribed == "NotSubscribed" && (
-          <button
-            className="btn btn-danger d-block mb-2 w-100"
-            onClick={linkEvent(this, this.handleBlockCommunity)}
-          >
-            {I18NextService.i18n.t(
-              blocked ? "unblock_community" : "block_community"
-            )}
-          </button>
-        )}
-      </>
+      subscribed === "NotSubscribed" && (
+        <button
+          className="btn btn-danger d-block mb-2 w-100"
+          onClick={linkEvent(this, this.handleBlockCommunity)}
+        >
+          {I18NextService.i18n.t(
+            blocked ? "unblock_community" : "block_community"
+          )}
+        </button>
+      )
     );
   }
 

From 874ae62fba7470693c3a514071111074a60db970 Mon Sep 17 00:00:00 2001
From: Alec Armbruster <35377827+alectrocute@users.noreply.github.com>
Date: Tue, 27 Jun 2023 19:08:01 -0400
Subject: [PATCH 18/18] remove hard-coded text foreground color classes (#1658)

Signed-off-by: Alec Armbruster <35377827+alectrocute@users.noreply.github.com>
---
 src/shared/components/comment/comment-node.tsx | 6 +++---
 src/shared/components/person/profile.tsx       | 4 ++--
 src/shared/components/post/post-listing.tsx    | 4 ++--
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/shared/components/comment/comment-node.tsx b/src/shared/components/comment/comment-node.tsx
index 079edec7..8f689aa2 100644
--- a/src/shared/components/comment/comment-node.tsx
+++ b/src/shared/components/comment/comment-node.tsx
@@ -322,7 +322,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                 getRoleLabelPill({
                   label: I18NextService.i18n.t("op").toUpperCase(),
                   tooltip: I18NextService.i18n.t("creator"),
-                  classes: "text-bg-info text-black",
+                  classes: "text-bg-info",
                   shrink: false,
                 })}
 
@@ -330,14 +330,14 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                 getRoleLabelPill({
                   label: I18NextService.i18n.t("mod"),
                   tooltip: I18NextService.i18n.t("mod"),
-                  classes: "text-bg-primary text-black",
+                  classes: "text-bg-primary",
                 })}
 
               {isAdmin_ &&
                 getRoleLabelPill({
                   label: I18NextService.i18n.t("admin"),
                   tooltip: I18NextService.i18n.t("admin"),
-                  classes: "text-bg-danger text-white",
+                  classes: "text-bg-danger",
                 })}
 
               {cv.creator.bot_account &&
diff --git a/src/shared/components/person/profile.tsx b/src/shared/components/person/profile.tsx
index 4a8de027..ad7c5fe5 100644
--- a/src/shared/components/person/profile.tsx
+++ b/src/shared/components/person/profile.tsx
@@ -489,7 +489,7 @@ export class Profile extends Component<
                         {getRoleLabelPill({
                           label: I18NextService.i18n.t("banned"),
                           tooltip: I18NextService.i18n.t("banned"),
-                          classes: "text-bg-danger text-white",
+                          classes: "text-bg-danger",
                           shrink: false,
                         })}
                       </li>
@@ -499,7 +499,7 @@ export class Profile extends Component<
                         {getRoleLabelPill({
                           label: I18NextService.i18n.t("deleted"),
                           tooltip: I18NextService.i18n.t("deleted"),
-                          classes: "text-bg-danger text-white",
+                          classes: "text-bg-danger",
                           shrink: false,
                         })}
                       </li>
diff --git a/src/shared/components/post/post-listing.tsx b/src/shared/components/post/post-listing.tsx
index 98c38470..eb3d0f64 100644
--- a/src/shared/components/post/post-listing.tsx
+++ b/src/shared/components/post/post-listing.tsx
@@ -412,13 +412,13 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
           getRoleLabelPill({
             label: I18NextService.i18n.t("mod"),
             tooltip: I18NextService.i18n.t("mod"),
-            classes: "text-bg-primary text-black",
+            classes: "text-bg-primary",
           })}
         {this.creatorIsAdmin_ &&
           getRoleLabelPill({
             label: I18NextService.i18n.t("admin"),
             tooltip: I18NextService.i18n.t("admin"),
-            classes: "text-bg-danger text-white",
+            classes: "text-bg-danger",
           })}
         {post_view.creator.bot_account &&
           getRoleLabelPill({