diff options
author | 2019-04-04 16:46:22 +0200 | |
---|---|---|
committer | 2019-04-04 16:46:22 +0200 | |
commit | 4346b0c0871c856d27c9ba088dcaf0e084552b12 (patch) | |
tree | 9f6fdf49ec73a53f5f6f76f2a9f15cc71a118677 | |
parent | close workspace drawer after clicking on a workspace (diff) | |
download | ferdium-app-4346b0c0871c856d27c9ba088dcaf0e084552b12.tar.gz ferdium-app-4346b0c0871c856d27c9ba088dcaf0e084552b12.tar.zst ferdium-app-4346b0c0871c856d27c9ba088dcaf0e084552b12.zip |
add hover effect for drawer workspace items
-rw-r--r-- | packages/theme/src/themes/dark/index.ts | 1 | ||||
-rw-r--r-- | packages/theme/src/themes/default/index.ts | 1 | ||||
-rw-r--r-- | src/features/workspaces/components/WorkspaceDrawerItem.js | 6 |
3 files changed, 8 insertions, 0 deletions
diff --git a/packages/theme/src/themes/dark/index.ts b/packages/theme/src/themes/dark/index.ts index cb7ffc1cf..1c0ede8e5 100644 --- a/packages/theme/src/themes/dark/index.ts +++ b/packages/theme/src/themes/dark/index.ts | |||
@@ -69,6 +69,7 @@ export const workspaceDrawerBackground = color(colorBackground).lighten(0.3).hex | |||
69 | export const workspaceDrawerAddButtonColor = legacyStyles.darkThemeGrayLighter; | 69 | export const workspaceDrawerAddButtonColor = legacyStyles.darkThemeGrayLighter; |
70 | export const workspaceDrawerAddButtonHoverColor = legacyStyles.darkThemeGraySmoke; | 70 | export const workspaceDrawerAddButtonHoverColor = legacyStyles.darkThemeGraySmoke; |
71 | export const workspaceDrawerItemBorder = color(workspaceDrawerBackground).lighten(0.2).hex(); | 71 | export const workspaceDrawerItemBorder = color(workspaceDrawerBackground).lighten(0.2).hex(); |
72 | export const workspaceDrawerItemHoverBackground = color(workspaceDrawerBackground).lighten(0.2).hex(); | ||
72 | export const workspaceDrawerItemActiveBackground = defaultStyles.brandPrimary; | 73 | export const workspaceDrawerItemActiveBackground = defaultStyles.brandPrimary; |
73 | export const workspaceDrawerItemNameColor = colorText; | 74 | export const workspaceDrawerItemNameColor = colorText; |
74 | export const workspaceDrawerItemNameActiveColor = 'white'; | 75 | export const workspaceDrawerItemNameActiveColor = 'white'; |
diff --git a/packages/theme/src/themes/default/index.ts b/packages/theme/src/themes/default/index.ts index f2632ee20..718ccf485 100644 --- a/packages/theme/src/themes/default/index.ts +++ b/packages/theme/src/themes/default/index.ts | |||
@@ -149,6 +149,7 @@ export const workspaceDrawerPadding = 20; | |||
149 | export const workspaceDrawerBackground = color(colorBackground).lighten(0.1).hex(); | 149 | export const workspaceDrawerBackground = color(colorBackground).lighten(0.1).hex(); |
150 | export const workspaceDrawerAddButtonColor = legacyStyles.themeGrayLight; | 150 | export const workspaceDrawerAddButtonColor = legacyStyles.themeGrayLight; |
151 | export const workspaceDrawerAddButtonHoverColor = color(legacyStyles.themeGrayLight).lighten(0.1).hex(); | 151 | export const workspaceDrawerAddButtonHoverColor = color(legacyStyles.themeGrayLight).lighten(0.1).hex(); |
152 | export const workspaceDrawerItemHoverBackground = color(workspaceDrawerBackground).darken(0.01).hex(); | ||
152 | export const workspaceDrawerItemActiveBackground = legacyStyles.themeGrayLightest; | 153 | export const workspaceDrawerItemActiveBackground = legacyStyles.themeGrayLightest; |
153 | export const workspaceDrawerItemBorder = color(workspaceDrawerBackground).darken(0.05).hex(); | 154 | export const workspaceDrawerItemBorder = color(workspaceDrawerBackground).darken(0.05).hex(); |
154 | export const workspaceDrawerItemNameColor = colorText; | 155 | export const workspaceDrawerItemNameColor = colorText; |
diff --git a/src/features/workspaces/components/WorkspaceDrawerItem.js b/src/features/workspaces/components/WorkspaceDrawerItem.js index 1e28ebea6..17a7882b8 100644 --- a/src/features/workspaces/components/WorkspaceDrawerItem.js +++ b/src/features/workspaces/components/WorkspaceDrawerItem.js | |||
@@ -20,9 +20,15 @@ const styles = theme => ({ | |||
20 | '&:first-child': { | 20 | '&:first-child': { |
21 | borderTop: `1px solid ${theme.workspaceDrawerItemBorder}`, | 21 | borderTop: `1px solid ${theme.workspaceDrawerItemBorder}`, |
22 | }, | 22 | }, |
23 | '&:hover': { | ||
24 | backgroundColor: theme.workspaceDrawerItemHoverBackground, | ||
25 | }, | ||
23 | }, | 26 | }, |
24 | isActiveItem: { | 27 | isActiveItem: { |
25 | backgroundColor: theme.workspaceDrawerItemActiveBackground, | 28 | backgroundColor: theme.workspaceDrawerItemActiveBackground, |
29 | '&:hover': { | ||
30 | backgroundColor: theme.workspaceDrawerItemActiveBackground, | ||
31 | }, | ||
26 | }, | 32 | }, |
27 | name: { | 33 | name: { |
28 | marginTop: '4px', | 34 | marginTop: '4px', |