Merge branch 'vue3-again' into vue3-no-compat

* vue3-again:
  make all clickable icons into actual buttons

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>
+    </button>
-    <div v-else-if="error">
+    <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>
 

src/components/login_form/login_form.vue

@@ -76,11 +76,15 @@
     >
       <div class="alert error">
         {{ error }}
+        <button
+          class="button-unstyled"
+          @click="clearError"
+        >
           <FAIcon
             class="fa-scale-110 fa-old-padding"
             icon="times"
-          @click="clearError"
           />
+        </button>
       </div>
     </div>
   </div>

src/components/mfa_form/recovery_form.vue

@@ -56,11 +56,15 @@
     >
       <div class="alert error">
         {{ error }}
+        <button
+          class="button-unstyled"
+          @click="clearError"
+        >
           <FAIcon
             class="fa-scale-110 fa-old-padding"
             icon="times"
-          @click="clearError"
           />
+        </button>
       </div>
     </div>
   </div>

src/components/mfa_form/totp_form.vue

@@ -58,12 +58,16 @@
     >
       <div class="alert error">
         {{ error }}
+        <button
+          class="button-unstyled"
+          @click="clearError"
+        >
           <FAIcon
             size="lg"
             class="fa-scale-110 fa-old-padding"
             icon="times"
-          @click="clearError"
           />
+        </button>
       </div>
     </div>
   </div>

src/components/notification/notification.vue

@@ -171,19 +171,27 @@
           <div
             v-if="notification.type === 'follow_request'"
             style="white-space: nowrap;"
+          >
+            <button
+              class="button-unstyled"
+              :title="$t('tool_tip.accept_follow_request')"
+              @click="approveUser()"
             >
               <FAIcon
                 icon="check"
                 class="fa-scale-110 fa-old-padding follow-request-accept"
-              :title="$t('tool_tip.accept_follow_request')"
-              @click="approveUser()"
               />
+            </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"
-              :title="$t('tool_tip.reject_follow_request')"
-              @click="denyUser()"
               />
+            </button>
           </div>
         </div>
         <div

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