fix: Use Bootstrap file upload form control styles

diff --git a/src/assets/css/main.css b/src/assets/css/main.css
index d3e9d0b811422b5d8c64fed8db5ba5c610084e1e..b917b3ec73317c4c86d4b57ab0288646f3c3da44 100644 (file)
--- 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 107949f6acb9187e01a14dcfe8f654405cb2f6c1..3f40693adb773ef85553bd6c968a496e5426bf0f 100644 (file)
--- 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 8963d5e9c65c505d2aad10bbff27a48302edff49..25df1207905cd2c2e8fd70886597006c695206a2 100644 (file)
--- 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 da0028d9389a2924a432de1ddb0336dcbe0a21d4..44aa6c6995825950cbed0d477b33a3abe2cb88e8 100644 (file)
--- 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 266843ef1e69e7912db292c13ddaff4ac50606d2..6d0d4636083b22fc22a0c1444673a71cb1f15897 100644 (file)
--- 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="" />