fix: Use Bootstrap file upload form control styles

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;

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

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"
                     }`}

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"

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="" />