diff options
author | 2019-03-21 15:40:50 +0100 | |
---|---|---|
committer | 2019-03-21 15:40:50 +0100 | |
commit | 95d378239e72387759306b629e200a9d52234f20 (patch) | |
tree | 022a3194eaa6de4b547db819be610587ce01e910 | |
parent | improve workspace switching ux (diff) | |
download | ferdium-app-95d378239e72387759306b629e200a9d52234f20.tar.gz ferdium-app-95d378239e72387759306b629e200a9d52234f20.tar.zst ferdium-app-95d378239e72387759306b629e200a9d52234f20.zip |
style add workspace icon in drawer like the sidebar icons
4 files changed, 17 insertions, 6 deletions
diff --git a/packages/theme/src/themes/dark/index.ts b/packages/theme/src/themes/dark/index.ts index eaa552961..cb7ffc1cf 100644 --- a/packages/theme/src/themes/dark/index.ts +++ b/packages/theme/src/themes/dark/index.ts | |||
@@ -66,9 +66,11 @@ export const colorModalOverlayBackground = color(legacyStyles.darkThemeBlack).al | |||
66 | 66 | ||
67 | // Workspace Drawer | 67 | // Workspace Drawer |
68 | export const workspaceDrawerBackground = color(colorBackground).lighten(0.3).hex(); | 68 | export const workspaceDrawerBackground = color(colorBackground).lighten(0.3).hex(); |
69 | export const workspaceDrawerAddButtonColor = legacyStyles.darkThemeGrayLighter; | ||
70 | export const workspaceDrawerAddButtonHoverColor = legacyStyles.darkThemeGraySmoke; | ||
69 | export const workspaceDrawerItemBorder = color(workspaceDrawerBackground).lighten(0.2).hex(); | 71 | export const workspaceDrawerItemBorder = color(workspaceDrawerBackground).lighten(0.2).hex(); |
70 | export const workspaceDrawerItemActiveBackground = defaultStyles.brandPrimary; | 72 | export const workspaceDrawerItemActiveBackground = defaultStyles.brandPrimary; |
71 | export const workspaceDrawerNameColor = colorText; | 73 | export const workspaceDrawerItemNameColor = colorText; |
72 | export const workspaceDrawerNameActiveColor = 'white'; | 74 | export const workspaceDrawerItemNameActiveColor = 'white'; |
73 | export const workspaceDrawerServicesColor = color(colorText).darken(0.5).hex(); | 75 | export const workspaceDrawerServicesColor = color(colorText).darken(0.5).hex(); |
74 | export const workspaceDrawerServicesActiveColor = color(defaultStyles.brandPrimary).lighten(0.5).hex(); | 76 | export const workspaceDrawerServicesActiveColor = color(defaultStyles.brandPrimary).lighten(0.5).hex(); |
diff --git a/packages/theme/src/themes/default/index.ts b/packages/theme/src/themes/default/index.ts index fc03b67de..e6785ec5e 100644 --- a/packages/theme/src/themes/default/index.ts +++ b/packages/theme/src/themes/default/index.ts | |||
@@ -144,9 +144,11 @@ export const colorModalOverlayBackground = color('#000').alpha(0.5).rgb().string | |||
144 | // Workspace Drawer | 144 | // Workspace Drawer |
145 | export const workspaceDrawerWidth = '220px'; | 145 | export const workspaceDrawerWidth = '220px'; |
146 | export const workspaceDrawerBackground = color(colorBackground).lighten(0.1).hex(); | 146 | export const workspaceDrawerBackground = color(colorBackground).lighten(0.1).hex(); |
147 | export const workspaceDrawerAddButtonColor = legacyStyles.themeGrayLight; | ||
148 | export const workspaceDrawerAddButtonHoverColor = color(legacyStyles.themeGrayLight).lighten(0.1).hex(); | ||
147 | export const workspaceDrawerItemActiveBackground = legacyStyles.themeGrayLightest; | 149 | export const workspaceDrawerItemActiveBackground = legacyStyles.themeGrayLightest; |
148 | export const workspaceDrawerItemBorder = color(workspaceDrawerBackground).darken(0.05).hex(); | 150 | export const workspaceDrawerItemBorder = color(workspaceDrawerBackground).darken(0.05).hex(); |
149 | export const workspaceDrawerNameColor = colorText; | 151 | export const workspaceDrawerItemNameColor = colorText; |
150 | export const workspaceDrawerNameActiveColor = colorText; | 152 | export const workspaceDrawerItemNameActiveColor = colorText; |
151 | export const workspaceDrawerServicesColor = color(colorText).lighten(1.5).hex(); | 153 | export const workspaceDrawerServicesColor = color(colorText).lighten(1.5).hex(); |
152 | export const workspaceDrawerServicesActiveColor = workspaceDrawerServicesColor; | 154 | export const workspaceDrawerServicesActiveColor = workspaceDrawerServicesColor; |
diff --git a/src/features/workspaces/components/WorkspaceDrawer.js b/src/features/workspaces/components/WorkspaceDrawer.js index c9c4d3bc9..7bf3684c0 100644 --- a/src/features/workspaces/components/WorkspaceDrawer.js +++ b/src/features/workspaces/components/WorkspaceDrawer.js | |||
@@ -35,6 +35,12 @@ const styles = theme => ({ | |||
35 | marginRight: '10px', | 35 | marginRight: '10px', |
36 | marginTop: '2px', | 36 | marginTop: '2px', |
37 | }, | 37 | }, |
38 | addWorkspaceButtonIcon: { | ||
39 | fill: theme.workspaceDrawerAddButtonColor, | ||
40 | '&:hover': { | ||
41 | fill: theme.workspaceDrawerAddButtonHoverColor, | ||
42 | }, | ||
43 | }, | ||
38 | }); | 44 | }); |
39 | 45 | ||
40 | @injectSheet(styles) @observer | 46 | @injectSheet(styles) @observer |
@@ -67,6 +73,7 @@ class WorkspaceDrawer extends Component { | |||
67 | <Icon | 73 | <Icon |
68 | icon="mdiPlusBox" | 74 | icon="mdiPlusBox" |
69 | size={1.5} | 75 | size={1.5} |
76 | className={classes.addWorkspaceButtonIcon} | ||
70 | /> | 77 | /> |
71 | </span> | 78 | </span> |
72 | </H1> | 79 | </H1> |
diff --git a/src/features/workspaces/components/WorkspaceDrawerItem.js b/src/features/workspaces/components/WorkspaceDrawerItem.js index 00207d323..935508943 100644 --- a/src/features/workspaces/components/WorkspaceDrawerItem.js +++ b/src/features/workspaces/components/WorkspaceDrawerItem.js | |||
@@ -18,10 +18,10 @@ const styles = theme => ({ | |||
18 | }, | 18 | }, |
19 | name: { | 19 | name: { |
20 | marginTop: '4px', | 20 | marginTop: '4px', |
21 | color: theme.workspaceDrawerNameColor, | 21 | color: theme.workspaceDrawerItemNameColor, |
22 | }, | 22 | }, |
23 | activeName: { | 23 | activeName: { |
24 | color: theme.workspaceDrawerNameActiveColor, | 24 | color: theme.workspaceDrawerItemNameActiveColor, |
25 | }, | 25 | }, |
26 | services: { | 26 | services: { |
27 | display: 'block', | 27 | display: 'block', |