More improvements to accessibility of user menu

- Replace hover animation with font-weight change
- Remove pointer-event rule that caused menu to be non-interactive in
  some scenarios
- Use action for login, rather than route

packages/libs/web-common/src/App/UserMenu/UserMenu.jsx

@@ -1,10 +1,9 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 
-import './UserMenu.scss';
-
 import { IconAlt as Icon } from '@veupathdb/wdk-client/lib/Components';
-import { showLogoutWarning } from '@veupathdb/wdk-client/lib/Actions/UserSessionActions';
+
+import './UserMenu.scss';
 
 class UserMenu extends React.Component {
   constructor(props) {
@@ -19,9 +18,7 @@ class UserMenu extends React.Component {
           {
             icon: 'sign-in',
             text: 'Login',
-            route: `/user/login?destination=${encodeURIComponent(
-              window.location
-            )}`,
+            onClick: () => actions.showLoginForm(window.location),
           },
           {
             icon: 'user-plus',

packages/libs/web-common/src/App/UserMenu/UserMenu.scss

@@ -26,16 +26,14 @@ $white: #e0e0e0;
   &:hover {
     .UserMenu-Pane {
       opacity: 1;
-      pointer-events: all;
       transition: none;
     }
   }
 }
 
 .UserMenu-Pane {
-  transition: opacity 1s 500ms;
+  transition: opacity 500ms 1s;
   opacity: 0;
-  pointer-events: none;
 
   right: 0;
   top: 100%;
@@ -78,15 +76,15 @@ $white: #e0e0e0;
       text-decoration: none;
     }
     flex: 1;
+    border-radius: 0.2em;
     display: flex;
     font-size: 1.3em;
     padding: 5px;
     flex-direction: row;
     white-space: nowrap;
     cursor: pointer;
-    transition: all 0.4s;
     &:hover {
-      transform: scale(1.04);
+      font-weight: 500;
     }
     .UserMenu-Pane-Item-Icon {
       width: 20px;