Merge branch 'main' into fix/fix-badges-spacing-componentize

diff --combined src/shared/components/person/profile.tsx
index cc334db5ee5449381c02fad9fa08981e879ae754,86b01d5805033ac89e9fba8dd2d7bae00a5f59c3..ec7538ba8a2cc2e6da05d7aff7a189b266e59dbf
--- 1/src/shared/components/person/profile.tsx
--- 2/src/shared/components/person/profile.tsx
+++ b/src/shared/components/person/profile.tsx
@@@ -5,6 -5,7 +5,6 @@@ import 
    enableDownvotes,
    enableNsfw,
    getCommentParentId,
 -  getRoleLabelPill,
    myAuth,
    myAuthRequired,
    setIsoData,
@@@ -84,7 -85,6 +84,7 @@@ import { HtmlTags } from "../common/htm
  import { Icon, Spinner } from "../common/icon";
  import { MomentTime } from "../common/moment-time";
  import { SortSelect } from "../common/sort-select";
 +import { UserBadges } from "../common/user-badges";
  import { CommunityLink } from "../community/community-link";
  import { PersonDetails } from "./person-details";
  import { PersonListing } from "./person-listing";
@@@ -137,7 -137,7 +137,7 @@@ const getCommunitiesListing = 
    communityViews.length > 0 && (
      <div className="card border-secondary mb-3">
        <div className="card-body">
-         <h5>{I18NextService.i18n.t(translationKey)}</h5>
+         <h2 className="h5">{I18NextService.i18n.t(translationKey)}</h2>
          <ul className="list-unstyled mb-0">
            {communityViews.map(({ community }) => (
              <li key={community.id}>
@@@ -472,7 -472,7 +472,7 @@@ export class Profile extends Component
                <div className="mb-0 d-flex flex-wrap">
                  <div>
                    {pv.person.display_name && (
-                     <h5 className="mb-0">{pv.person.display_name}</h5>
+                     <h1 className="h4 mb-4">{pv.person.display_name}</h1>
                    )}
                    <ul className="list-inline mb-2">
                      <li className="list-inline-item">
@@@ -484,15 -484,46 +484,15 @@@
                          hideAvatar
                        />
                      </li>
 -                    {isBanned(pv.person) && (
 -                      <li className="list-inline-item">
 -                        {getRoleLabelPill({
 -                          label: I18NextService.i18n.t("banned"),
 -                          tooltip: I18NextService.i18n.t("banned"),
 -                          classes: "text-bg-danger",
 -                          shrink: false,
 -                        })}
 -                      </li>
 -                    )}
 -                    {pv.person.deleted && (
 -                      <li className="list-inline-item">
 -                        {getRoleLabelPill({
 -                          label: I18NextService.i18n.t("deleted"),
 -                          tooltip: I18NextService.i18n.t("deleted"),
 -                          classes: "text-bg-danger",
 -                          shrink: false,
 -                        })}
 -                      </li>
 -                    )}
 -                    {pv.person.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">
 -                        {getRoleLabelPill({
 -                          label: I18NextService.i18n
 -                            .t("bot_account")
 -                            .toLowerCase(),
 -                          tooltip: I18NextService.i18n.t("bot_account"),
 -                          shrink: false,
 -                        })}
 -                      </li>
 -                    )}
 +                    <li className="list-inline-item">
 +                      <UserBadges
 +                        classNames="ms-1"
 +                        isBanned={isBanned(pv.person)}
 +                        isDeleted={pv.person.deleted}
 +                        isAdmin={pv.person.admin}
 +                        isBot={pv.person.bot_account}
 +                      />
 +                    </li>
                    </ul>
                  </div>
                  {this.banDialog(pv)}

diff --combined src/shared/components/post/post-listing.tsx
index 29004078d1f67a8537d63acd7d4cb7f199014846,3f55cebdccfeb5e2bf18cb9f2cb9e8faa03a6a14..a4ce5db54af50d8ac60a6b5289034b126087a557
--- 1/src/shared/components/post/post-listing.tsx
--- 2/src/shared/components/post/post-listing.tsx
+++ b/src/shared/components/post/post-listing.tsx
@@@ -1,4 -1,4 +1,4 @@@
 -import { getRoleLabelPill, myAuthRequired } from "@utils/app";
 +import { myAuthRequired } from "@utils/app";
  import { canShare, share } from "@utils/browser";
  import { getExternalHost, getHttpBase } from "@utils/env";
  import {
@@@ -55,7 -55,6 +55,7 @@@ import { setupTippy } from "../../tippy
  import { Icon, PurgeWarning, Spinner } from "../common/icon";
  import { MomentTime } from "../common/moment-time";
  import { PictrsImage } from "../common/pictrs-image";
 +import { UserBadges } from "../common/user-badges";
  import { VoteButtons, VoteButtonsCompact } from "../common/vote-buttons";
  import { CommunityLink } from "../community/community-link";
  import { PersonListing } from "../person/person-listing";
@@@ -407,13 -406,26 +407,13 @@@ export class PostListing extends Compon
  
      return (
        <div className="small mb-1 mb-md-0">
 -        <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",
 -          })}
 -        {this.creatorIsAdmin_ &&
 -          getRoleLabelPill({
 -            label: I18NextService.i18n.t("admin"),
 -            tooltip: I18NextService.i18n.t("admin"),
 -            classes: "text-bg-danger",
 -          })}
 -        {post_view.creator.bot_account &&
 -          getRoleLabelPill({
 -            label: I18NextService.i18n.t("bot_account").toLowerCase(),
 -            tooltip: I18NextService.i18n.t("bot_account"),
 -          })}
 +        <PersonListing person={post_view.creator} />
 +        <UserBadges
 +          classNames="ms-1"
 +          isMod={this.creatorIsMod_}
 +          isAdmin={this.creatorIsAdmin_}
 +          isBot={post_view.creator.bot_account}
 +        />
          {this.props.showCommunity && (
            <>
              {" "}
@@@ -466,7 -478,7 +466,7 @@@
      return (
        <>
          <div className="post-title overflow-hidden">
-           <h5 className="d-inline">
+           <h1 className="h5 d-inline">
              {url && this.props.showBody ? (
                <a
                  className={
@@@ -482,7 -494,7 +482,7 @@@
              ) : (
                this.postLink
              )}
-           </h5>
+           </h1>
  
            {/**
             * If there is (a) a URL and an embed title, or (b) a post body, and