From 302bc899d79b797302657b7ddf57137211bbd4a7 Mon Sep 17 00:00:00 2001
From: Ian Oxley <ijoxley@gmail.com>
Date: Wed, 7 Nov 2018 00:06:06 +0000
Subject: [PATCH] Update reward button and toggle menu

Add `<button>` tag to the 3 dots toggle menu, and the reward control.

Update the CSS to add focus styles, in addition to hover styles, for the
3 dots toggle menu.
---
 website/client/components/tasks/task.vue            | 11 +++++++++--
 website/client/components/ui/customMenuDropdown.vue |  2 +-
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/website/client/components/tasks/task.vue b/website/client/components/tasks/task.vue
index c61687115c..7723eed98a 100644
--- a/website/client/components/tasks/task.vue
+++ b/website/client/components/tasks/task.vue
@@ -101,7 +101,7 @@
         button.task-control.habit-control(:class="controlClass.down.inner", @click="(isUser && task.down) ? score('down') : null")
           .svg-icon.negative(v-html="icons.negative")
       // Rewards right side control
-      .right-control.d-flex.align-items-center.justify-content-center.reward-control(v-if="task.type === 'reward'", :class="controlClass.bg", @click="isUser ? score('down') : null")
+      button.right-control.d-flex.align-items-center.justify-content-center.reward-control(v-if="task.type === 'reward'", :class="controlClass.bg", @click="isUser ? score('down') : null")
         .svg-icon(v-html="icons.gold")
         .small-text {{task.value}}
     approval-footer(:task='task', v-if='this.task.group.id', :group='group')
@@ -175,11 +175,14 @@
   }
 
   .task /deep/ .habitica-menu-dropdown .habitica-menu-dropdown-toggle {
+    border: 0;
+    border-radius: 0;
     opacity: 0;
     padding: 0 8px;
     transition: opacity 0.15s ease-in;
   }
 
+  .task /deep/ .habitica-menu-dropdown .habitica-menu-dropdown-toggle:focus,
   .task:hover /deep/ .habitica-menu-dropdown .habitica-menu-dropdown-toggle {
     opacity: 1;
   }
@@ -192,6 +195,7 @@
     }
   }
 
+  .task-clickable-area /deep/ .habitica-menu-dropdown .habitica-menu-dropdown-toggle:focus .svg-icon,
   .task-clickable-area /deep/ .habitica-menu-dropdown .habitica-menu-dropdown-toggle:hover .svg-icon {
     color: $purple-400 !important;
   }
@@ -428,12 +432,15 @@
 
   .task-control, .reward-control {
     align-items: center;
-    border: none;
     cursor: pointer;
     margin: 0;
     padding: 0;
   }
 
+  .task-control {
+    border: none;
+  }
+
   .task-not-scoreable {
     .task-control, .reward-control {
       cursor: default !important;
diff --git a/website/client/components/ui/customMenuDropdown.vue b/website/client/components/ui/customMenuDropdown.vue
index ddbf549e59..d3edd76625 100644
--- a/website/client/components/ui/customMenuDropdown.vue
+++ b/website/client/components/ui/customMenuDropdown.vue
@@ -4,7 +4,7 @@ A simplified dropdown component that doesn't rely on buttons as toggles  like bo
 
 <template lang="pug">
 .habitica-menu-dropdown.dropdown(@click="toggleDropdown()", :class="{open: isOpen}")
-  .habitica-menu-dropdown-toggle
+  button.habitica-menu-dropdown-toggle
     slot(name="dropdown-toggle")
   .dropdown-menu(:class="{'dropdown-menu-right': right}")
     slot(name="dropdown-content")