pleroma-fe

commit: 19439910772ed5205edbb258b3d8a97315dde9b5
parent c3690b456e66585598f05d71643089a5e9770af7
Author: Henry Jameson <me@hjkos.com>
Date:   Wed, 30 Mar 2022 12:33:56 +0300

make all clickable icons into actual buttons

Diffstat:
M
src/components/importer/importer.vue
18
++++++++++++------
M
src/components/login_form/login_form.vue
12
++++++++----
M
src/components/mfa_form/recovery_form.vue
12
++++++++----
M
src/components/mfa_form/totp_form.vue
14
+++++++++-----
M
src/components/notification/notification.vue
24
++++++++++++++++--------
M
src/components/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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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);