Restyle active/hover states of WindowSideBarButton tabs. (#2296)

src/components/WindowSideBarButtons.js

@@ -55,6 +55,7 @@ export class WindowSideBarButtons extends Component {
               <InfoIcon />
             </Tooltip>
           )}
+          TouchRippleProps={{ classes: { child: classes.tabRipple } }}
           value="info"
         />
         <Tab
@@ -67,6 +68,7 @@ export class WindowSideBarButtons extends Component {
               <CanvasIndexIcon />
             </Tooltip>
           )}
+          TouchRippleProps={{ classes: { child: classes.tabRipple } }}
           value="canvas_navigation"
         />
         <Tab
@@ -81,6 +83,7 @@ export class WindowSideBarButtons extends Component {
               </Badge>
             </Tooltip>
           )}
+          TouchRippleProps={{ classes: { child: classes.tabRipple } }}
           value="annotations"
         />
       </Tabs>

src/containers/WindowSideBarButtons.js

@@ -37,23 +37,26 @@ const mapStateToProps = (state, { windowId }) => ({
 /** */
 const style = theme => ({
   tab: {
+    '&:active': {
+      backgroundColor: theme.palette.action.active,
+    },
     '&:hover': {
       '@media (hover: none)': {
         backgroundColor: 'transparent',
       },
-      backgroundColor: fade(theme.palette.text.primary, theme.palette.action.hoverOpacity),
+      backgroundColor: theme.palette.action.hover,
       textDecoration: 'none',
       // Reset on touch devices, it doesn't add specificity
     },
-    borderRight: '4px solid transparent',
+
+    borderRight: '2px solid transparent',
     minWidth: 'auto',
   },
-  tabSelected: {
-    '&:hover': {
-      backgroundColor: theme.palette.secondary.light,
+  tabRipple: {
+    backgroundColor: theme.palette.action.active,
   },
-    backgroundColor: theme.palette.secondary.light,
-    borderRight: `4px solid ${theme.palette.secondary.main}`,
+  tabSelected: {
+    borderRight: `2px solid ${theme.palette.secondary.main}`,
   },
   tabsFlexContainer: {
     flexDirection: 'column',