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/11] 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/11] 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/11] 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/11] 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/11] 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 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 06/11] 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 07/11] 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 08/11] 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 09/11] 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 10/11] 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 11/11] 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>
     );
   }