From 21c8b64cda664488a2af0b4aedb5dd1e837c657a Mon Sep 17 00:00:00 2001 From: Jay Sitter <jay@jaysitter.com> Date: Tue, 4 Jul 2023 00:53:31 -0400 Subject: [PATCH] fix: Add focus border to markdown toolbar buttons --- src/shared/components/common/emoji-picker.tsx | 2 +- .../components/common/markdown-textarea.tsx | 61 ++++++++++--------- 2 files changed, 34 insertions(+), 29 deletions(-) diff --git a/src/shared/components/common/emoji-picker.tsx b/src/shared/components/common/emoji-picker.tsx index 4523e16..7eac4cf 100644 --- a/src/shared/components/common/emoji-picker.tsx +++ b/src/shared/components/common/emoji-picker.tsx @@ -32,7 +32,7 @@ export class EmojiPicker extends Component<EmojiPickerProps, EmojiPickerState> { return ( <span className="emoji-picker"> <button - className="btn btn-sm text-muted" + className="btn btn-sm btn-link rounded-0 text-muted" data-tippy-content={I18NextService.i18n.t("emoji")} aria-label={I18NextService.i18n.t("emoji")} disabled={this.props.disabled} diff --git a/src/shared/components/common/markdown-textarea.tsx b/src/shared/components/common/markdown-textarea.tsx index 1a707a2..7cccbb1 100644 --- a/src/shared/components/common/markdown-textarea.tsx +++ b/src/shared/components/common/markdown-textarea.tsx @@ -170,34 +170,39 @@ export class MarkdownTextArea extends Component< <EmojiPicker onEmojiClick={e => this.handleEmoji(this, e)} ></EmojiPicker> - <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" - }`} - data-tippy-content={I18NextService.i18n.t("upload_image")} - > - {this.state.imageUploadStatus ? ( - <Spinner /> - ) : ( + <label + htmlFor={`file-upload-${this.id}`} + className={classNames("mb-0", { + pointer: UserService.Instance.myUserInfo, + })} + data-tippy-content={I18NextService.i18n.t("upload_image")} + > + {this.state.imageUploadStatus ? ( + <Spinner /> + ) : ( + <button + type="button" + className="btn btn-sm btn-link rounded-0 text-muted mb-0" + onClick={() => { + document + .getElementById(`file-upload-${this.id}`) + ?.click(); + }} + > <Icon icon="image" classes="icon-inline" /> - )} - </label> - <input - id={`file-upload-${this.id}`} - type="file" - accept="image/*,video/*" - name="file" - className="d-none" - multiple - disabled={!UserService.Instance.myUserInfo} - onChange={linkEvent(this, this.handleImageUpload)} - /> - </form> + </button> + )} + </label> + <input + id={`file-upload-${this.id}`} + type="file" + accept="image/*,video/*" + name="file" + className="d-none" + multiple + disabled={!UserService.Instance.myUserInfo} + onChange={linkEvent(this, this.handleImageUpload)} + /> {this.getFormatButton("header", this.handleInsertHeader)} {this.getFormatButton( "strikethrough", @@ -348,7 +353,7 @@ export class MarkdownTextArea extends Component< return ( <button - className="btn btn-sm text-muted" + className="btn btn-sm btn-link rounded-0 text-muted" data-tippy-content={I18NextService.i18n.t(type)} aria-label={I18NextService.i18n.t(type)} onClick={linkEvent(this, handleClick)} -- 2.44.1