From 75ea2ea9674615c98230f67936069f6a4f0f4030 Mon Sep 17 00:00:00 2001
From: Chris Beer <cabeer@stanford.edu>
Date: Fri, 15 Mar 2019 10:26:25 -0700
Subject: [PATCH] Add button hover styles to our window sidebar tabs; fixes
 #2205

---
 src/containers/WindowSideBarButtons.js | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/src/containers/WindowSideBarButtons.js b/src/containers/WindowSideBarButtons.js
index c768e1338..71738d39c 100644
--- a/src/containers/WindowSideBarButtons.js
+++ b/src/containers/WindowSideBarButtons.js
@@ -1,6 +1,7 @@
 import { compose } from 'redux';
 import { connect } from 'react-redux';
 import { withStyles } from '@material-ui/core';
+import { fade } from '@material-ui/core/styles/colorManipulator';
 import { withTranslation } from 'react-i18next';
 import * as actions from '../state/actions';
 import {
@@ -48,10 +49,24 @@ const style = theme => ({
   tab: {
     minWidth: 'auto',
     borderRight: '4px solid transparent',
+    '&:hover': {
+      textDecoration: 'none',
+      backgroundColor: fade(theme.palette.text.primary, theme.palette.action.hoverOpacity),
+      // Reset on touch devices, it doesn't add specificity
+      '@media (hover: none)': {
+        backgroundColor: 'transparent',
+      },
+      '&$disabled': {
+        backgroundColor: 'transparent',
+      },
+    },
   },
   tabSelected: {
     backgroundColor: theme.palette.secondary.light,
     borderRight: `4px solid ${theme.palette.secondary.main}`,
+    '&:hover': {
+      backgroundColor: theme.palette.secondary.light,
+    },
   },
 });
 
-- 
GitLab