fix: Use Bootstrap file upload form control styles

This commit is contained in:
Jay Sitter 2023-06-26 18:42:44 -04:00
parent 8e2f83eb4e
commit b2b6f4521f
5 changed files with 16 additions and 19 deletions

View file

@ -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;

View file

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

View file

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

View file

@ -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"

View file

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