Merge branch 'main' into feat/pureblack-theme

src/shared/components/comment/comment-node.tsx

@@ -1,6 +1,7 @@
 import {
   colorList,
   getCommentParentId,
+  getRoleLabelPill,
   myAuth,
   myAuthRequired,
   showScores,
@@ -308,32 +309,43 @@ 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 && (
-                <div className="badge text-bg-light d-none d-sm-inline me-2">
-                  {I18NextService.i18n.t("creator")}
-                </div>
-              )}
-              {isMod_ && (
-                <div className="badge text-bg-light d-none d-sm-inline me-2">
-                  {I18NextService.i18n.t("mod")}
-                </div>
-              )}
-              {isAdmin_ && (
-                <div className="badge text-bg-light d-none d-sm-inline me-2">
-                  {I18NextService.i18n.t("admin")}
-                </div>
-              )}
-              {cv.creator.bot_account && (
-                <div className="badge text-bg-light d-none d-sm-inline me-2">
-                  {I18NextService.i18n.t("bot_account").toLowerCase()}
-                </div>
-              )}
+
+              {this.isPostCreator &&
+                getRoleLabelPill({
+                  label: I18NextService.i18n.t("op").toUpperCase(),
+                  tooltip: I18NextService.i18n.t("creator"),
+                  classes: "text-bg-info",
+                  shrink: false,
+                })}
+
+              {isMod_ &&
+                getRoleLabelPill({
+                  label: I18NextService.i18n.t("mod"),
+                  tooltip: I18NextService.i18n.t("mod"),
+                  classes: "text-bg-primary",
+                })}
+
+              {isAdmin_ &&
+                getRoleLabelPill({
+                  label: I18NextService.i18n.t("admin"),
+                  tooltip: I18NextService.i18n.t("admin"),
+                  classes: "text-bg-danger",
+                })}
+
+              {cv.creator.bot_account &&
+                getRoleLabelPill({
+                  label: I18NextService.i18n.t("bot_account").toLowerCase(),
+                  tooltip: I18NextService.i18n.t("bot_account"),
+                })}
+
               {this.props.showCommunity && (
                 <>
                   <span className="mx-1">{I18NextService.i18n.t("to")}</span>
@@ -344,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">
                   {
@@ -410,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"
@@ -1186,7 +1200,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
     }
   }
 
-  linkBtn(small = false) {
+  getLinkButton(small = false) {
     const cv = this.commentView;
 
     const classnames = classNames("btn btn-link btn-animate text-muted", {

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={classNames("d-flex flex-wrap border-bottom", {
+                  "no-click": this.isDisabled,
+                })}
+              >
                 {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>

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

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",
+                          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",
+                          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 {
@@ -331,16 +331,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 (
@@ -351,7 +354,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) {
@@ -398,23 +404,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",
+          })}
+        {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"),
+          })}
         {this.props.showCommunity && (
           <>
             {" "}
@@ -436,7 +446,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,