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

[lemmy-ui.git] / src / shared / components / home / emojis-form.tsx

diff --git a/src/shared/components/home/emojis-form.tsx b/src/shared/components/home/emojis-form.tsx
index 149ff032468b7dfff405912e876344889882df84..3ad8cc05a77742923a1a978b615673b14271d3a0 100644 (file)
--- a/src/shared/components/home/emojis-form.tsx
+++ b/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,30 +132,31 @@ export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
                         />
                       )}
                       {cv.image_url.length === 0 && (
-                        <form>
-                          <label
-                            className="btn btn-sm btn-secondary pointer"
-                            htmlFor={`file-uploader-${index}`}
-                            data-tippy-content={I18NextService.i18n.t(
-                              "upload_image"
-                            )}
-                          >
-                            {capitalizeFirstLetter(
-                              I18NextService.i18n.t("upload")
+                        <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(
+                            "upload_image"
+                          )}
+                        >
+                          {capitalizeFirstLetter(
+                            I18NextService.i18n.t("upload")
+                          )}
+                          <input
+                            name={`file-uploader-${index}`}
+                            id={`file-uploader-${index}`}
+                            type="file"
+                            accept="image/*"
+                            className="d-none"
+                            onChange={linkEvent(
+                              { form: this, index: index },
+                              this.handleImageUpload
                             )}
-                            <input
-                              name={`file-uploader-${index}`}
-                              id={`file-uploader-${index}`}
-                              type="file"
-                              accept="image/*"
-                              className="d-none"
-                              onChange={linkEvent(
-                                { form: this, index: index },
-                                this.handleImageUpload
-                              )}
-                            />
-                          </label>
-                        </form>
+                          />
+                        </label>
                       )}
                     </td>
                     <td className="text-right">
@@ -508,6 +512,8 @@ export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
             { form: form, index: index, overrideValue: res.data.url as string },
             event
           );
+        } else if (res.data.msg === "too_large") {
+          toast(I18NextService.i18n.t("upload_too_large"), "danger");
         } else {
           toast(JSON.stringify(res), "danger");
         }