From 6fba71ea2c613381645d896220131dc3c7fb32a4 Mon Sep 17 00:00:00 2001
From: Ian Oxley <ijoxley@gmail.com>
Date: Thu, 28 Mar 2019 20:38:17 +0000
Subject: [PATCH] Add :focus styles to match :hover styles

Add :focus styles to the .habitica-menu-dropdown.
These match the existing :hover styles.
---
 website/client/components/header/menu.vue           |  1 +
 website/client/components/ui/customMenuDropdown.vue | 12 +++++++++---
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/website/client/components/header/menu.vue b/website/client/components/header/menu.vue
index cf519a7ee2..d89011ca15 100644
--- a/website/client/components/header/menu.vue
+++ b/website/client/components/header/menu.vue
@@ -290,6 +290,7 @@ div
       margin-right: 24px;
     }
 
+    &:focus /deep/ .top-menu-icon.svg-icon,
     &:hover /deep/ .top-menu-icon.svg-icon {
       color: $white;
     }
diff --git a/website/client/components/ui/customMenuDropdown.vue b/website/client/components/ui/customMenuDropdown.vue
index 87c3dbc1f9..2671c3ecca 100644
--- a/website/client/components/ui/customMenuDropdown.vue
+++ b/website/client/components/ui/customMenuDropdown.vue
@@ -12,10 +12,16 @@ A simplified dropdown component that doesn't rely on buttons as toggles  like bo
 
 <style lang="scss">
 @import '~client/assets/scss/colors.scss';
+.habitica-menu-dropdown {
+  &:hover,
+  &:focus { // NB focus styles match the hover styles for .svg-icon
+    outline: none;
+  }
 
-.habitica-menu-dropdown.open {
-  .habitica-menu-dropdown-toggle .svg-icon {
-    color: $white !important;
+  &.open {
+    .habitica-menu-dropdown-toggle .svg-icon {
+      color: $white !important;
+    }
   }
 }
 </style>