Merge pull request #1656 from LemmyNet/refactor/move-role-pill-to-util

Move `getRoleLabelPill` to `@utils/app`

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;
 

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>

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">
+      <div className="small">
+        <span className="me-1">
           <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>
-        )}
+        {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>
     );
   }
 

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

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,