From b2b6f4521fde8fd7ffd2bb8f075c18b050c350e2 Mon Sep 17 00:00:00 2001 From: Jay Sitter <jay@jaysitter.com> Date: Mon, 26 Jun 2023 18:42:44 -0400 Subject: [PATCH] fix: Use Bootstrap file upload form control styles --- src/assets/css/main.css | 9 --------- .../components/common/image-upload-form.tsx | 2 +- .../components/common/markdown-textarea.tsx | 3 +++ src/shared/components/home/emojis-form.tsx | 1 + src/shared/components/post/post-form.tsx | 20 ++++++++++--------- 5 files changed, 16 insertions(+), 19 deletions(-) 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="" /> -- 2.44.1