Merge branch 'main' into fix/use-row-in-filters

src/assets/css/main.css

@@ -81,6 +81,7 @@
 }
 
 .vote-bar {
+  min-width: 5ch;
   margin-top: -6.5px;
 }
 
@@ -253,10 +254,6 @@ hr {
   -ms-filter: blur(10px);
 }
 
-.img-cover {
-  object-fit: cover;
-}
-
 .img-expanded {
   max-height: 90vh;
 }
@@ -349,10 +346,12 @@ br.big {
 }
 
 .avatar-overlay {
-  width: 20%;
+  width: 20vw;
-  height: 20%;
+  height: 20vw;
   max-width: 120px;
   max-height: 120px;
+  min-width: 80px;
+  min-height: 80px;
 }
 
 .avatar-pushup {

src/shared/components/app/error-page.tsx

@@ -1,4 +1,5 @@
 import { setIsoData } from "@utils/app";
+import { removeAuthParam } from "@utils/helpers";
 import { Component } from "inferno";
 import { T } from "inferno-i18next-dess";
 import { Link } from "inferno-router";
@@ -58,7 +59,7 @@ export class ErrorPage extends Component<any, any> {
           <T
             i18nKey="error_code_message"
             parent="p"
-            interpolation={{ error: errorPageData.error }}
+            interpolation={{ error: removeAuthParam(errorPageData.error) }}
           >
             #<strong className="text-danger">#</strong>#
           </T>

src/shared/components/common/image-upload-form.tsx

@@ -1,4 +1,5 @@
 import { randomStr } from "@utils/helpers";
+import classNames from "classnames";
 import { Component, linkEvent } from "inferno";
 import { HttpService, I18NextService, UserService } from "../../services";
 import { toast } from "../../toast";
@@ -33,18 +34,18 @@ export class ImageUploadForm extends Component<
   render() {
     return (
       <form className="image-upload-form d-inline">
-        <label htmlFor={this.id} className="pointer text-muted small fw-bold">
+        {this.props.imageSrc && (
-          {this.props.imageSrc ? (
+          <span className="d-inline-block position-relative mb-2">
-            <span className="d-inline-block position-relative">
             {/* TODO: Create "Current Iamge" translation for alt text */}
             <img
               alt=""
               src={this.props.imageSrc}
               height={this.props.rounded ? 60 : ""}
               width={this.props.rounded ? 60 : ""}
-                className={`img-fluid ${
+              className={classNames({
-                  this.props.rounded ? "rounded-circle" : ""
+                "rounded-circle object-fit-cover": this.props.rounded,
-                }`}
+                "img-fluid": !this.props.rounded,
+              })}
             />
             <button
               className="position-absolute d-block p-0 end-0 border-0 top-0 bg-transparent text-white"
@@ -55,16 +56,13 @@ export class ImageUploadForm extends Component<
               <Icon icon="x" classes="mini-overlay" />
             </button>
           </span>
-          ) : (
-            <span className="btn btn-secondary">{this.props.uploadTitle}</span>
         )}
-        </label>
         <input
           id={this.id}
           type="file"
           accept="image/*,video/*"
+          className="small form-control"
           name={this.id}
-          className="d-none"
           disabled={!UserService.Instance.myUserInfo}
           onChange={linkEvent(this, this.handleImageUpload)}
         />

src/shared/components/common/markdown-textarea.tsx

@@ -173,6 +173,9 @@ export class MarkdownTextArea extends Component<
                 <form className="btn btn-sm text-muted fw-bold">
                   <label
                     htmlFor={`file-upload-${this.id}`}
+                    // TODO: Fix this linting violation
+                    // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+                    tabIndex={0}
                     className={`mb-0 ${
                       UserService.Instance.myUserInfo && "pointer"
                     }`}
@@ -702,18 +705,20 @@ export class MarkdownTextArea extends Component<
   quoteInsert() {
     const textarea: any = document.getElementById(this.id);
     const selectedText = window.getSelection()?.toString();
-    const { content } = this.state;
+    let { content } = this.state;
     if (selectedText) {
       const quotedText =
         selectedText
           .split("\n")
           .map(t => `> ${t}`)
           .join("\n") + "\n\n";
+
       if (!content) {
-        this.setState({ content: "" });
+        content = "";
       } else {
-        this.setState({ content: `${content}\n` });
+        content = `${content}\n\n`;
       }
+
       this.setState({
         content: `${content}${quotedText}`,
       });

src/shared/components/common/pictrs-image.tsx

@@ -34,13 +34,13 @@ export class PictrsImage extends Component<PictrsImageProps, any> {
           className={classNames("overflow-hidden pictrs-image", {
             "img-fluid": !this.props.icon && !this.props.iconOverlay,
             banner: this.props.banner,
-            "thumbnail rounded":
+            "thumbnail rounded object-fit-cover":
               this.props.thumbnail && !this.props.icon && !this.props.banner,
             "img-expanded slight-radius":
               !this.props.thumbnail && !this.props.icon,
             "img-blur": this.props.thumbnail && this.props.nsfw,
-            "img-cover img-icon me-1": this.props.icon,
+            "object-fit-cover img-icon me-1": this.props.icon,
-            "ms-2 mb-0 rounded-circle img-cover avatar-overlay":
+            "ms-2 mb-0 rounded-circle object-fit-cover avatar-overlay":
               this.props.iconOverlay,
             "avatar-pushup": this.props.pushup,
           })}

src/shared/components/common/vote-buttons.tsx

@@ -64,8 +64,6 @@ const handleUpvote = (i: VoteButtons) => {
         auth: myAuthRequired(),
       });
   }
-
-  i.setState({ upvoteLoading: false });
 };
 
 const handleDownvote = (i: VoteButtons) => {
@@ -86,7 +84,6 @@ const handleDownvote = (i: VoteButtons) => {
         auth: myAuthRequired(),
       });
   }
-  i.setState({ downvoteLoading: false });
 };
 
 export class VoteButtonsCompact extends Component<
@@ -102,6 +99,15 @@ export class VoteButtonsCompact extends Component<
     super(props, context);
   }
 
+  componentWillReceiveProps(nextProps: VoteButtonsProps) {
+    if (this.props !== nextProps) {
+      this.setState({
+        upvoteLoading: false,
+        downvoteLoading: false,
+      });
+    }
+  }
+
   render() {
     return (
       <>
@@ -172,9 +178,18 @@ export class VoteButtons extends Component<VoteButtonsProps, VoteButtonsState> {
     super(props, context);
   }
 
+  componentWillReceiveProps(nextProps: VoteButtonsProps) {
+    if (this.props !== nextProps) {
+      this.setState({
+        upvoteLoading: false,
+        downvoteLoading: false,
+      });
+    }
+  }
+
   render() {
     return (
-      <div className="vote-bar pe-0 small text-center">
+      <div className="vote-bar small text-center">
         <button
           type="button"
           className={`btn-animate btn btn-link p-0 ${
@@ -193,7 +208,7 @@ export class VoteButtons extends Component<VoteButtonsProps, VoteButtonsState> {
         </button>
         {showScores() ? (
           <div
-            className="unselectable pointer text-muted px-1 post-score"
+            className="unselectable pointer text-muted post-score"
             data-tippy-content={tippy(this.props.counts)}
           >
             {numToSI(this.props.counts.score)}

src/shared/components/community/sidebar.tsx

@@ -258,7 +258,7 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
             <Spinner />
           ) : (
             <>
-              <Icon icon="check" classes="icon-inline text-success me-1" />
+              <Icon icon="check" classes="icon-inline me-1" />
               {I18NextService.i18n.t("joined")}
             </>
           )}

src/shared/components/home/emojis-form.tsx

@@ -87,7 +87,10 @@ export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
           </div>
         )}
         <div className="table-responsive">
-          <table id="emojis_table" className="table table-sm table-hover">
+          <table
+            id="emojis_table"
+            className="table table-sm table-hover align-middle"
+          >
             <thead className="pointer">
               <tr>
                 <th>{I18NextService.i18n.t("column_emoji")}</th>
@@ -129,8 +132,10 @@ export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
                         />
                       )}
                       {cv.image_url.length === 0 && (
-                        <form>
                         <label
+                          // TODO: Fix this linting violation
+                          // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+                          tabIndex={0}
                           className="btn btn-sm btn-secondary pointer"
                           htmlFor={`file-uploader-${index}`}
                           data-tippy-content={I18NextService.i18n.t(
@@ -152,7 +157,6 @@ export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
                             )}
                           />
                         </label>
-                        </form>
                       )}
                     </td>
                     <td className="text-right">

src/shared/components/home/site-form.tsx

@@ -158,10 +158,11 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
             />
           </div>
         </div>
-        <div className="input-group mb-3">
+        <div className="row mb-3">
-          <label className="me-2 col-form-label">
+          <label className="col-sm-2 col-form-label">
             {I18NextService.i18n.t("icon")}
           </label>
+          <div className="col-sm-10">
             <ImageUploadForm
               uploadTitle={I18NextService.i18n.t("upload_icon")}
               imageSrc={this.state.siteForm.icon}
@@ -170,10 +171,12 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
               rounded
             />
           </div>
-        <div className="input-group mb-3">
+        </div>
-          <label className="me-2 col-form-label">
+        <div className="row mb-3">
+          <label className="col-sm-2 col-form-label">
             {I18NextService.i18n.t("banner")}
           </label>
+          <div className="col-sm-10">
             <ImageUploadForm
               uploadTitle={I18NextService.i18n.t("upload_banner")}
               imageSrc={this.state.siteForm.banner}
@@ -181,6 +184,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
               onRemove={this.handleBannerRemove}
             />
           </div>
+        </div>
         <div className="mb-3 row">
           <label className="col-12 col-form-label" htmlFor="site-desc">
             {I18NextService.i18n.t("description")}

src/shared/components/post/post-form.tsx

@@ -349,32 +349,12 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
             <input
               type="url"
               id="post-url"
-              className="form-control"
+              className="form-control mb-3"
               value={url}
               onInput={linkEvent(this, handlePostUrlChange)}
               onPaste={linkEvent(this, handleImageUploadPaste)}
             />
             {this.renderSuggestedTitleCopy()}
-            <form>
-              <label
-                htmlFor="file-upload"
-                className={`${
-                  UserService.Instance.myUserInfo && "pointer"
-                } d-inline-block float-right text-muted fw-bold`}
-                data-tippy-content={I18NextService.i18n.t("upload_image")}
-              >
-                <Icon icon="image" classes="icon-inline" />
-              </label>
-              <input
-                id="file-upload"
-                type="file"
-                accept="image/*,video/*"
-                name="file"
-                className="d-none"
-                disabled={!UserService.Instance.myUserInfo}
-                onChange={linkEvent(this, handleImageUpload)}
-              />
-            </form>
             {url && validURL(url) && (
               <div>
                 <a
@@ -404,21 +384,38 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
                 </a>
               </div>
             )}
+          </div>
+        </div>
+
+        <div className="mb-3 row">
+          <label htmlFor="file-upload" className={"col-sm-2 col-form-label"}>
+            {capitalizeFirstLetter(I18NextService.i18n.t("image"))}
+            <Icon icon="image" classes="icon-inline ms-1" />
+          </label>
+          <div className="col-sm-10">
+            <input
+              id="file-upload"
+              type="file"
+              accept="image/*,video/*"
+              name="file"
+              className="small col-sm-10 form-control"
+              disabled={!UserService.Instance.myUserInfo}
+              onChange={linkEvent(this, handleImageUpload)}
+            />
             {this.state.imageLoading && <Spinner />}
             {url && isImage(url) && (
-              <img src={url} className="img-fluid" alt="" />
+              <img src={url} className="img-fluid mt-2" alt="" />
             )}
             {this.state.imageDeleteUrl && (
               <button
                 className="btn btn-danger btn-sm mt-2"
                 onClick={linkEvent(this, handleImageDelete)}
-                aria-label={I18NextService.i18n.t("delete")}
-                data-tippy-content={I18NextService.i18n.t("delete")}
               >
                 <Icon icon="x" classes="icon-inline me-1" />
                 {capitalizeFirstLetter(I18NextService.i18n.t("delete"))}
               </button>
             )}
+          </div>
           {this.props.crossPosts && this.props.crossPosts.length > 0 && (
             <>
               <div className="my-1 text-muted small fw-bold">
@@ -453,7 +450,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
             </>
           )}
         </div>
-        </div>
+
         <div className="mb-3 row">
           <label className="col-sm-2 col-form-label" htmlFor="post-title">
             {I18NextService.i18n.t("title")}

src/shared/components/post/post-listing.tsx

@@ -333,7 +333,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
       return (
         <button
           type="button"
-          className="thumbnail rounded overflow-hidden d-inline-block position-relative p-0 border-0"
+          className="thumbnail rounded overflow-hidden d-inline-block position-relative p-0 border-0 bg-transparent"
           data-tippy-content={I18NextService.i18n.t("expand_here")}
           onClick={linkEvent(this, this.handleImageExpandClick)}
           aria-label={I18NextService.i18n.t("expand_here")}
@@ -497,12 +497,12 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
           </h5>
 
           {/**
-           * If there is a URL, an embed title, and we were not told to show the
+           * If there is (a) a URL and an embed title, or (b) a post body, and
-           * body by the parent component, show the MetadataCard/body toggle.
+           * we were not told to show the body by the parent component, show the
+           * MetadataCard/body toggle.
            */}
           {!this.props.showBody &&
-            post.url &&
+            ((post.url && post.embed_title) || post.body) &&
-            post.embed_title &&
             this.showPreviewButton()}
 
           {post.removed && (

src/shared/components/private_message/private-message.tsx

@@ -284,7 +284,6 @@ export class PrivateMessage extends Component<
           <div className="row">
             <div className="col-sm-6">
               <PrivateMessageForm
-                privateMessageView={message_view}
                 replyType={true}
                 recipient={otherPerson}
                 onCreate={this.props.onCreate}

src/shared/utils/helpers/index.ts

@@ -17,6 +17,7 @@ import isCakeDay from "./is-cake-day";
 import numToSI from "./num-to-si";
 import poll from "./poll";
 import randomStr from "./random-str";
+import removeAuthParam from "./remove-auth-param";
 import sleep from "./sleep";
 import validEmail from "./valid-email";
 import validInstanceTLD from "./valid-instance-tld";
@@ -43,6 +44,7 @@ export {
   numToSI,
   poll,
   randomStr,
+  removeAuthParam,
   sleep,
   validEmail,
   validInstanceTLD,

src/shared/utils/helpers/remove-auth-param.ts

@@ -0,0 +1,6 @@
+export default function (err: any) {
+  return err
+    .toString()
+    .replace(new RegExp("[?&]auth=[^&#]*(#.*)?$"), "$1")
+    .replace(new RegExp("([?&])auth=[^&]*&"), "$1");
+}