From 19439910772ed5205edbb258b3d8a97315dde9b5 Mon Sep 17 00:00:00 2001 From: Henry Jameson <me@hjkos.com> Date: Wed, 30 Mar 2022 12:33:56 +0300 Subject: [PATCH] make all clickable icons into actual buttons --- src/components/importer/importer.vue | 18 +++++++++----- src/components/login_form/login_form.vue | 12 ++++++---- src/components/mfa_form/recovery_form.vue | 12 ++++++---- src/components/mfa_form/totp_form.vue | 14 +++++++---- src/components/notification/notification.vue | 24 ++++++++++++------- .../notifications/notifications.scss | 4 ---- 6 files changed, 53 insertions(+), 31 deletions(-) diff --git a/src/components/importer/importer.vue b/src/components/importer/importer.vue index ddc3010e..5df238e2 100644 --- a/src/components/importer/importer.vue +++ b/src/components/importer/importer.vue @@ -20,20 +20,26 @@ > {{ submitButtonLabel || $t('importer.submit') }} </button> - <div v-if="success"> + <button + v-if="success" + class="button-unstyled" + @click="dismiss" + > <FAIcon icon="times" - @click="dismiss" /> <p>{{ successMessage || $t('importer.success') }}</p> - </div> - <div v-else-if="error"> + </button> + <button + v-else-if="error" + class="button-unstyled" + @click="dismiss" + > <FAIcon icon="times" - @click="dismiss" /> <p>{{ errorMessage || $t('importer.error') }}</p> - </div> + </button> </div> </template> diff --git a/src/components/login_form/login_form.vue b/src/components/login_form/login_form.vue index bfabb946..87fa37c6 100644 --- a/src/components/login_form/login_form.vue +++ b/src/components/login_form/login_form.vue @@ -76,11 +76,15 @@ > <div class="alert error"> {{ error }} - <FAIcon - class="fa-scale-110 fa-old-padding" - icon="times" + <button + class="button-unstyled" @click="clearError" - /> + > + <FAIcon + class="fa-scale-110 fa-old-padding" + icon="times" + /> + </button> </div> </div> </div> diff --git a/src/components/mfa_form/recovery_form.vue b/src/components/mfa_form/recovery_form.vue index 7c594228..a9cf39aa 100644 --- a/src/components/mfa_form/recovery_form.vue +++ b/src/components/mfa_form/recovery_form.vue @@ -56,11 +56,15 @@ > <div class="alert error"> {{ error }} - <FAIcon - class="fa-scale-110 fa-old-padding" - icon="times" + <button + class="button-unstyled" @click="clearError" - /> + > + <FAIcon + class="fa-scale-110 fa-old-padding" + icon="times" + /> + </button> </div> </div> </div> diff --git a/src/components/mfa_form/totp_form.vue b/src/components/mfa_form/totp_form.vue index 4ee13992..709eb9b8 100644 --- a/src/components/mfa_form/totp_form.vue +++ b/src/components/mfa_form/totp_form.vue @@ -58,12 +58,16 @@ > <div class="alert error"> {{ error }} - <FAIcon - size="lg" - class="fa-scale-110 fa-old-padding" - icon="times" + <button + class="button-unstyled" @click="clearError" - /> + > + <FAIcon + size="lg" + class="fa-scale-110 fa-old-padding" + icon="times" + /> + </button> </div> </div> </div> diff --git a/src/components/notification/notification.vue b/src/components/notification/notification.vue index ff7a21f1..9ecb034f 100644 --- a/src/components/notification/notification.vue +++ b/src/components/notification/notification.vue @@ -172,18 +172,26 @@ v-if="notification.type === 'follow_request'" style="white-space: nowrap;" > - <FAIcon - icon="check" - class="fa-scale-110 fa-old-padding follow-request-accept" + <button + class="button-unstyled" :title="$t('tool_tip.accept_follow_request')" @click="approveUser()" - /> - <FAIcon - icon="times" - class="fa-scale-110 fa-old-padding follow-request-reject" + > + <FAIcon + icon="check" + class="fa-scale-110 fa-old-padding follow-request-accept" + /> + </button> + <button + class="button-unstyled" :title="$t('tool_tip.reject_follow_request')" @click="denyUser()" - /> + > + <FAIcon + icon="times" + class="fa-scale-110 fa-old-padding follow-request-reject" + /> + </button> </div> </div> <div diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss index 9e5663ed..a285027d 100644 --- a/src/components/notifications/notifications.scss +++ b/src/components/notifications/notifications.scss @@ -64,8 +64,6 @@ } .follow-request-accept { - cursor: pointer; - &:hover { color: $fallback--text; color: var(--text, $fallback--text); @@ -73,8 +71,6 @@ } .follow-request-reject { - cursor: pointer; - &:hover { color: $fallback--cRed; color: var(--cRed, $fallback--cRed);