diff options
author | 2019-04-10 11:22:25 +0200 | |
---|---|---|
committer | 2019-04-10 11:22:25 +0200 | |
commit | 9472deab9496aca3a9bdf20b93f2a84e3e4569b7 (patch) | |
tree | 4785fcbd438330eaa5463203bba249080e6c02e5 /src | |
parent | fix drawer add workspace label styles (diff) | |
download | ferdium-app-9472deab9496aca3a9bdf20b93f2a84e3e4569b7.tar.gz ferdium-app-9472deab9496aca3a9bdf20b93f2a84e3e4569b7.tar.zst ferdium-app-9472deab9496aca3a9bdf20b93f2a84e3e4569b7.zip |
refactors workspace theme vars into object structure
Diffstat (limited to 'src')
4 files changed, 23 insertions, 23 deletions
diff --git a/src/components/layout/AppLayout.js b/src/components/layout/AppLayout.js index 0c72c1413..b7f7722dd 100644 --- a/src/components/layout/AppLayout.js +++ b/src/components/layout/AppLayout.js | |||
@@ -50,10 +50,10 @@ const messages = defineMessages({ | |||
50 | 50 | ||
51 | const styles = theme => ({ | 51 | const styles = theme => ({ |
52 | appContent: { | 52 | appContent: { |
53 | width: `calc(100% + ${theme.workspaceDrawerWidth}px)`, | 53 | width: `calc(100% + ${theme.workspaces.drawer.width}px)`, |
54 | transition: 'transform 0.5s ease', | 54 | transition: 'transform 0.5s ease', |
55 | transform() { | 55 | transform() { |
56 | return workspaceStore.isWorkspaceDrawerOpen ? 'translateX(0)' : `translateX(-${theme.workspaceDrawerWidth}px)`; | 56 | return workspaceStore.isWorkspaceDrawerOpen ? 'translateX(0)' : `translateX(-${theme.workspaces.drawer.width}px)`; |
57 | }, | 57 | }, |
58 | }, | 58 | }, |
59 | }); | 59 | }); |
diff --git a/src/features/workspaces/components/WorkspaceDrawer.js b/src/features/workspaces/components/WorkspaceDrawer.js index ae67b9ea4..d48b55f12 100644 --- a/src/features/workspaces/components/WorkspaceDrawer.js +++ b/src/features/workspaces/components/WorkspaceDrawer.js | |||
@@ -45,24 +45,24 @@ const messages = defineMessages({ | |||
45 | 45 | ||
46 | const styles = theme => ({ | 46 | const styles = theme => ({ |
47 | drawer: { | 47 | drawer: { |
48 | backgroundColor: theme.workspaceDrawerBackground, | 48 | background: theme.workspaces.drawer.background, |
49 | width: `${theme.workspaceDrawerWidth}px`, | 49 | width: `${theme.workspaces.drawer.width}px`, |
50 | }, | 50 | }, |
51 | headline: { | 51 | headline: { |
52 | fontSize: '24px', | 52 | fontSize: '24px', |
53 | marginTop: '38px', | 53 | marginTop: '38px', |
54 | marginBottom: '25px', | 54 | marginBottom: '25px', |
55 | marginLeft: theme.workspaceDrawerPadding, | 55 | marginLeft: theme.workspaces.drawer.padding, |
56 | }, | 56 | }, |
57 | workspacesSettingsButton: { | 57 | workspacesSettingsButton: { |
58 | float: 'right', | 58 | float: 'right', |
59 | marginRight: theme.workspaceDrawerPadding, | 59 | marginRight: theme.workspaces.drawer.padding, |
60 | marginTop: '2px', | 60 | marginTop: '2px', |
61 | }, | 61 | }, |
62 | workspacesSettingsButtonIcon: { | 62 | workspacesSettingsButtonIcon: { |
63 | fill: theme.workspaceDrawerAddButtonColor, | 63 | fill: theme.workspaces.drawer.buttons.color, |
64 | '&:hover': { | 64 | '&:hover': { |
65 | fill: theme.workspaceDrawerAddButtonHoverColor, | 65 | fill: theme.workspaces.drawer.buttons.hoverColor, |
66 | }, | 66 | }, |
67 | }, | 67 | }, |
68 | workspaces: { | 68 | workspaces: { |
@@ -80,11 +80,11 @@ const styles = theme => ({ | |||
80 | }, | 80 | }, |
81 | addNewWorkspaceLabel: { | 81 | addNewWorkspaceLabel: { |
82 | height: 'auto', | 82 | height: 'auto', |
83 | color: theme.workspaces.drawer.addButton.color, | 83 | color: theme.workspaces.drawer.buttons.color, |
84 | marginTop: 40, | 84 | marginTop: 40, |
85 | textAlign: 'center', | 85 | textAlign: 'center', |
86 | '& > svg': { | 86 | '& > svg': { |
87 | fill: theme.workspaces.drawer.addButton.color, | 87 | fill: theme.workspaces.drawer.buttons.color, |
88 | }, | 88 | }, |
89 | '& > span': { | 89 | '& > span': { |
90 | fontSize: '13px', | 90 | fontSize: '13px', |
@@ -93,9 +93,9 @@ const styles = theme => ({ | |||
93 | top: -3, | 93 | top: -3, |
94 | }, | 94 | }, |
95 | '&:hover': { | 95 | '&:hover': { |
96 | color: theme.workspaces.drawer.addButton.hoverColor, | 96 | color: theme.workspaces.drawer.buttons.hoverColor, |
97 | '& > svg': { | 97 | '& > svg': { |
98 | fill: theme.workspaces.drawer.addButton.hoverColor, | 98 | fill: theme.workspaces.drawer.buttons.hoverColor, |
99 | }, | 99 | }, |
100 | }, | 100 | }, |
101 | }, | 101 | }, |
diff --git a/src/features/workspaces/components/WorkspaceDrawerItem.js b/src/features/workspaces/components/WorkspaceDrawerItem.js index 0be485504..57f0754d9 100644 --- a/src/features/workspaces/components/WorkspaceDrawerItem.js +++ b/src/features/workspaces/components/WorkspaceDrawerItem.js | |||
@@ -15,41 +15,41 @@ const messages = defineMessages({ | |||
15 | const styles = theme => ({ | 15 | const styles = theme => ({ |
16 | item: { | 16 | item: { |
17 | height: '67px', | 17 | height: '67px', |
18 | padding: `15px ${theme.workspaceDrawerPadding}px`, | 18 | padding: `15px ${theme.workspaces.drawer.padding}px`, |
19 | borderBottom: `1px solid ${theme.workspaceDrawerItemBorder}`, | 19 | borderBottom: `1px solid ${theme.workspaces.drawer.listItem.border}`, |
20 | transition: 'background-color 300ms ease-out', | 20 | transition: 'background-color 300ms ease-out', |
21 | '&:first-child': { | 21 | '&:first-child': { |
22 | borderTop: `1px solid ${theme.workspaceDrawerItemBorder}`, | 22 | borderTop: `1px solid ${theme.workspaces.drawer.listItem.border}`, |
23 | }, | 23 | }, |
24 | '&:hover': { | 24 | '&:hover': { |
25 | backgroundColor: theme.workspaceDrawerItemHoverBackground, | 25 | backgroundColor: theme.workspaces.drawer.listItem.hoverBackground, |
26 | }, | 26 | }, |
27 | }, | 27 | }, |
28 | isActiveItem: { | 28 | isActiveItem: { |
29 | backgroundColor: theme.workspaceDrawerItemActiveBackground, | 29 | backgroundColor: theme.workspaces.drawer.listItem.activeBackground, |
30 | '&:hover': { | 30 | '&:hover': { |
31 | backgroundColor: theme.workspaceDrawerItemActiveBackground, | 31 | backgroundColor: theme.workspaces.drawer.listItem.activeBackground, |
32 | }, | 32 | }, |
33 | }, | 33 | }, |
34 | name: { | 34 | name: { |
35 | marginTop: '4px', | 35 | marginTop: '4px', |
36 | color: theme.workspaceDrawerItemNameColor, | 36 | color: theme.workspaces.drawer.listItem.name.color, |
37 | }, | 37 | }, |
38 | activeName: { | 38 | activeName: { |
39 | color: theme.workspaceDrawerItemNameActiveColor, | 39 | color: theme.workspaces.drawer.listItem.name.activeColor, |
40 | }, | 40 | }, |
41 | services: { | 41 | services: { |
42 | display: 'block', | 42 | display: 'block', |
43 | fontSize: '11px', | 43 | fontSize: '11px', |
44 | marginTop: '5px', | 44 | marginTop: '5px', |
45 | color: theme.workspaceDrawerServicesColor, | 45 | color: theme.workspaces.drawer.listItem.services.color, |
46 | whiteSpace: 'nowrap', | 46 | whiteSpace: 'nowrap', |
47 | textOverflow: 'ellipsis', | 47 | textOverflow: 'ellipsis', |
48 | overflow: 'hidden', | 48 | overflow: 'hidden', |
49 | lineHeight: '15px', | 49 | lineHeight: '15px', |
50 | }, | 50 | }, |
51 | activeServices: { | 51 | activeServices: { |
52 | color: theme.workspaceDrawerServicesActiveColor, | 52 | color: theme.workspaces.drawer.listItem.services.active, |
53 | }, | 53 | }, |
54 | }); | 54 | }); |
55 | 55 | ||
diff --git a/src/features/workspaces/components/WorkspaceSwitchingIndicator.js b/src/features/workspaces/components/WorkspaceSwitchingIndicator.js index 8aba5bbd9..ded6b8f2a 100644 --- a/src/features/workspaces/components/WorkspaceSwitchingIndicator.js +++ b/src/features/workspaces/components/WorkspaceSwitchingIndicator.js | |||
@@ -25,7 +25,7 @@ const styles = theme => ({ | |||
25 | marginTop: '20px', | 25 | marginTop: '20px', |
26 | }, | 26 | }, |
27 | wrapperWhenDrawerIsOpen: { | 27 | wrapperWhenDrawerIsOpen: { |
28 | width: `calc(100% - ${theme.workspaceDrawerWidth}px)`, | 28 | width: `calc(100% - ${theme.workspaces.drawer.width}px)`, |
29 | }, | 29 | }, |
30 | component: { | 30 | component: { |
31 | background: 'rgba(20, 20, 20, 0.4)', | 31 | background: 'rgba(20, 20, 20, 0.4)', |