Merge branch 'main' into chore/separate-mod-button-functions

.eslintrc.json

@@ -3,7 +3,7 @@
   "env": {
     "browser": true
   },
-  "plugins": ["@typescript-eslint", "jsx-a11y"],
+  "plugins": ["@typescript-eslint", "jsx-a11y", "prettier"],
   "extends": [
     "eslint:recommended",
     "plugin:@typescript-eslint/recommended",
@@ -41,6 +41,7 @@
     "no-var": 0,
     "prefer-const": 1,
     "prefer-rest-params": 0,
+    "prettier/prettier": "error",
     "quote-props": 0,
     "unicorn/filename-case": 0
   }

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

@@ -312,7 +312,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                 <PersonListing person={cv.creator} />
               </span>
               {cv.comment.distinguished && (
-                <Icon icon="shield" inline classes={`text-danger me-2`} />
+                <Icon icon="shield" inline classes="text-danger me-2" />
               )}
               {this.isPostCreator && (
                 <div className="badge text-bg-light d-none d-sm-inline me-2">

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

@@ -79,7 +79,7 @@ export class CommentNodes extends Component<CommentNodesProps, any> {
     const maxComments = this.props.maxCommentsShown ?? this.props.nodes.length;
 
     const borderColor = this.props.depth
-      ? colorList[this.props.depth % colorList.length]
+      ? colorList[(this.props.depth - 1) % colorList.length]
       : colorList[0];
 
     return (
@@ -89,7 +89,11 @@ export class CommentNodes extends Component<CommentNodesProps, any> {
             "ms-1": !!this.props.isChild,
             "border-top border-light": !this.props.noBorder,
           })}
-          style={`border-left: 2px solid ${borderColor} !important;`}
+          style={
+            this.props.isChild
+              ? `border-left: 2px solid ${borderColor} !important;`
+              : undefined
+          }
         >
           {this.props.nodes.slice(0, maxComments).map(node => (
             <CommentNode

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

@@ -174,7 +174,7 @@ export class VoteButtons extends Component<VoteButtonsProps, VoteButtonsState> {
 
   render() {
     return (
-      <div className={`vote-bar col-1 pe-0 small text-center`}>
+      <div className="vote-bar col-1 pe-0 small text-center">
         <button
           type="button"
           className={`btn-animate btn btn-link p-0 ${
@@ -193,7 +193,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 px-1 post-score"
             data-tippy-content={tippy(this.props.counts)}
           >
             {numToSI(this.props.counts.score)}

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

@@ -255,7 +255,7 @@ export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
                         >
                           <Icon
                             icon="trash"
-                            classes={`icon-inline text-danger`}
+                            classes="icon-inline text-danger"
                           />
                         </button>
                       </div>

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

@@ -71,7 +71,7 @@ export class TaglineForm extends Component<TaglineFormProps, TaglineFormState> {
                       data-tippy-content={I18NextService.i18n.t("edit")}
                       aria-label={I18NextService.i18n.t("edit")}
                     >
-                      <Icon icon="edit" classes={`icon-inline`} />
+                      <Icon icon="edit" classes="icon-inline" />
                     </button>
 
                     <button
@@ -83,7 +83,7 @@ export class TaglineForm extends Component<TaglineFormProps, TaglineFormState> {
                       data-tippy-content={I18NextService.i18n.t("delete")}
                       aria-label={I18NextService.i18n.t("delete")}
                     >
-                      <Icon icon="trash" classes={`icon-inline text-danger`} />
+                      <Icon icon="trash" classes="icon-inline text-danger" />
                     </button>
                   </td>
                 </tr>

src/shared/components/person/cake-day.tsx

@@ -10,7 +10,7 @@ export class CakeDay extends Component<CakeDayProps, any> {
   render() {
     return (
       <div
-        className={`cake-day mx-2 d-inline-block unselectable pointer`}
+        className="cake-day mx-2 d-inline-block unselectable pointer"
         data-tippy-content={this.cakeDayTippy()}
       >
         <Icon icon="cake" classes="icon-inline" />

src/shared/components/person/profile.tsx

@@ -647,12 +647,12 @@ export class Profile extends Component<
               value={this.state.banReason}
               onInput={linkEvent(this, this.handleModBanReasonChange)}
             />
-            <label className="col-form-label" htmlFor={`mod-ban-expires`}>
+            <label className="col-form-label" htmlFor="mod-ban-expires">
               {I18NextService.i18n.t("expires")}
             </label>
             <input
               type="number"
-              id={`mod-ban-expires`}
+              id="mod-ban-expires"
               className="form-control me-2"
               placeholder={I18NextService.i18n.t("number_of_days")}
               value={this.state.banExpireDays}

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

@@ -531,7 +531,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
               checked={this.state.form.nsfw}
               onChange={linkEvent(this, handlePostNsfwChange)}
             />
-            <label className="form-check-label">
+            <label className="form-check-label" htmlFor="post-nsfw">
               {I18NextService.i18n.t("nsfw")}
             </label>
           </div>

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

@@ -1264,12 +1264,12 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
                 value={this.state.banReason}
                 onInput={linkEvent(this, this.handleModBanReasonChange)}
               />
-              <label className="col-form-label" htmlFor={`mod-ban-expires`}>
+              <label className="col-form-label" htmlFor="mod-ban-expires">
                 {I18NextService.i18n.t("expires")}
               </label>
               <input
                 type="number"
-                id={`mod-ban-expires`}
+                id="mod-ban-expires"
                 className="form-control me-2"
                 placeholder={I18NextService.i18n.t("number_of_days")}
                 value={this.state.banExpireDays}