From 2422648ba17500ab738dfb2c64eef8c866c68b80 Mon Sep 17 00:00:00 2001
From: Jessie Keck <jkeck@stanford.edu>
Date: Thu, 21 Mar 2019 18:18:59 -0700
Subject: [PATCH] Restyle active/hover states of WindowSideBarButton tabs.
(#2296)
---
src/components/WindowSideBarButtons.js | 3 +++
src/containers/WindowSideBarButtons.js | 17 ++++++++++-------
2 files changed, 13 insertions(+), 7 deletions(-)
diff --git a/src/components/WindowSideBarButtons.js b/src/components/WindowSideBarButtons.js
index 950986c7f..e393122f3 100644
--- a/src/components/WindowSideBarButtons.js
+++ b/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>
diff --git a/src/containers/WindowSideBarButtons.js b/src/containers/WindowSideBarButtons.js
index f4fc77482..cb29d9060 100644
--- a/src/containers/WindowSideBarButtons.js
+++ b/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',
},
+ tabRipple: {
+ backgroundColor: theme.palette.action.active,
+ },
tabSelected: {
- '&:hover': {
- backgroundColor: theme.palette.secondary.light,
- },
- backgroundColor: theme.palette.secondary.light,
- borderRight: `4px solid ${theme.palette.secondary.main}`,
+ borderRight: `2px solid ${theme.palette.secondary.main}`,
},
tabsFlexContainer: {
flexDirection: 'column',
--
GitLab