change a few more buttons to real buttons

3 files changed, 18 insertions, 23 deletions

diff --git a/src/App.scss b/src/App.scss
index 2a1d7b1b..8b91f3de 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -178,6 +178,13 @@ a {
   &.-fullwidth {
     width: 100%;
   }
+
+  &.-hover-highlight {
+    &:hover svg {
+      color: $fallback--lightText;
+      color: var(--lightText, $fallback--lightText);
+    }
+  }
 }
 
 input, textarea, .select, .input {
diff --git a/src/components/poll/poll_form.vue b/src/components/poll/poll_form.vue
index 31f204a0..09496105 100644
--- a/src/components/poll/poll_form.vue
+++ b/src/components/poll/poll_form.vue
@@ -21,20 +21,17 @@
           @keydown.enter.stop.prevent="nextOption(index)"
         >
       </div>
-      <div
+      <button
         v-if="options.length > 2"
-        class="icon-container"
+        class="delete-option button-unstyled -hover-highlight"
+        @click="deleteOption(index)"
       >
-        <FAIcon
-          icon="times"
-          class="delete"
-          @click="deleteOption(index)"
-        />
-      </div>
+        <FAIcon icon="times" />
+      </button>
     </div>
-    <a
+    <button
       v-if="options.length < maxOptions"
-      class="add-option faint"
+      class="add-option faint button-unstyled -hover-highlight"
       @click="addOption"
     >
       <FAIcon
@@ -43,7 +40,7 @@
       />
 
       {{ $t("polls.add_option") }}
-    </a>
+    </button>
     <div class="poll-type-expiry">
       <div
         class="poll-type"
@@ -116,7 +113,6 @@
     align-self: flex-start;
     padding-top: 0.25em;
     padding-left: 0.1em;
-    cursor: pointer;
   }
 
   .poll-option {
@@ -135,19 +131,11 @@
     }
   }
 
-  .icon-container {
+  .delete-option {
     // Hack: Move the icon over the input box
     width: 1.5em;
     margin-left: -1.5em;
     z-index: 1;
-
-    .delete {
-      cursor: pointer;
-
-      &:hover {
-        color: inherit;
-      }
-    }
   }
 
   .poll-type-expiry {
diff --git a/src/components/settings_modal/tabs/profile_tab.vue b/src/components/settings_modal/tabs/profile_tab.vue
index abb16db2..cfbd94fc 100644
--- a/src/components/settings_modal/tabs/profile_tab.vue
+++ b/src/components/settings_modal/tabs/profile_tab.vue
@@ -125,7 +125,7 @@
             >
           </EmojiInput>
           <button
-            class="button-unstyled"
+            class="button-unstyled -hover-highlight"
             @click="deleteField(i)"
           >
             <FAIcon
@@ -136,7 +136,7 @@
         </div>
         <button
           v-if="newFields.length < maxFields"
-          class="add-field faint button-unstyled"
+          class="add-field faint button-unstyled -hover-highlight"
           @click="addField"
         >
           <FAIcon icon="plus" />