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/14] 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/14] 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/14] 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 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 04/14] 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 05/14] 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 06/14] 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 07/14] 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 08/14] 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 09/14] 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 10/14] 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 11/14] 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 12/14] 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 13/14] 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 14/14] 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,