From: Jay Sitter <jay@jaysitter.com>
Date: Mon, 26 Jun 2023 22:42:44 +0000 (-0400)
Subject: fix: Use Bootstrap file upload form control styles
X-Git-Url: http://these/git/readmes/%7BmarkdownHelpUrl%7D?a=commitdiff_plain;h=b2b6f4521fde8fd7ffd2bb8f075c18b050c350e2;p=lemmy-ui.git

fix: Use Bootstrap file upload form control styles
---

diff --git a/src/assets/css/main.css b/src/assets/css/main.css
index d3e9d0b..b917b3e 100644
--- a/src/assets/css/main.css
+++ b/src/assets/css/main.css
@@ -88,15 +88,6 @@
   color: var(--bs-gray) !important;
 }
 
-input[type="file"]::file-selector-button {
-  font: inherit;
-  border: 0;
-  padding: 0.375em 0.75em;
-  border-radius: var(--bs-border-radius);
-  background-color: var(--bs-secondary);
-  color: var(--bs-white);
-}
-
 .icon {
   display: inline-grid;
   display: inline-flex;
diff --git a/src/shared/components/common/image-upload-form.tsx b/src/shared/components/common/image-upload-form.tsx
index 107949f..3f40693 100644
--- a/src/shared/components/common/image-upload-form.tsx
+++ b/src/shared/components/common/image-upload-form.tsx
@@ -59,7 +59,7 @@ export class ImageUploadForm extends Component<
           id={this.id}
           type="file"
           accept="image/*,video/*"
-          className="small"
+          className="small form-control"
           name={this.id}
           disabled={!UserService.Instance.myUserInfo}
           onChange={linkEvent(this, this.handleImageUpload)}
diff --git a/src/shared/components/common/markdown-textarea.tsx b/src/shared/components/common/markdown-textarea.tsx
index 8963d5e..25df120 100644
--- a/src/shared/components/common/markdown-textarea.tsx
+++ b/src/shared/components/common/markdown-textarea.tsx
@@ -170,6 +170,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"
                     }`}
diff --git a/src/shared/components/home/emojis-form.tsx b/src/shared/components/home/emojis-form.tsx
index da0028d..44aa6c6 100644
--- a/src/shared/components/home/emojis-form.tsx
+++ b/src/shared/components/home/emojis-form.tsx
@@ -133,6 +133,7 @@ export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
                       )}
                       {cv.image_url.length === 0 && (
                         <label
+                          // TODO: Fix this linting violation
                           // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
                           tabIndex={0}
                           className="btn btn-sm btn-secondary pointer"
diff --git a/src/shared/components/post/post-form.tsx b/src/shared/components/post/post-form.tsx
index 266843e..6d0d463 100644
--- a/src/shared/components/post/post-form.tsx
+++ b/src/shared/components/post/post-form.tsx
@@ -390,15 +390,17 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
             {capitalizeFirstLetter(I18NextService.i18n.t("image"))}
             <Icon icon="image" classes="icon-inline ms-1" />
           </label>
-          <input
-            id="file-upload"
-            type="file"
-            accept="image/*,video/*"
-            name="file"
-            className="small col-sm-10"
-            disabled={!UserService.Instance.myUserInfo}
-            onChange={linkEvent(this, handleImageUpload)}
-          />
+          <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)}
+            />
+          </div>
           {this.state.imageLoading && <Spinner />}
           {url && isImage(url) && (
             <img src={url} className="img-fluid" alt="" />