refactors workspace theme vars into object structure

6 files changed, 78 insertions, 77 deletions

diff --git a/packages/theme/src/themes/dark/index.ts b/packages/theme/src/themes/dark/index.ts
index 73ffa7f5e..fd04b106c 100644
--- a/packages/theme/src/themes/dark/index.ts
+++ b/packages/theme/src/themes/dark/index.ts
@@ -76,6 +76,13 @@ export const services = merge({}, defaultStyles.services, {
   },
 });
 
+// Service Icon
+export const serviceIcon = merge({}, defaultStyles.serviceIcon, {
+  isCustom: {
+    border: `1px solid ${legacyStyles.darkThemeGrayDark}`,
+  },
+});
+
 // Workspaces
 const drawerBg = color(colorBackground).lighten(0.3).hex();
 
@@ -105,27 +112,21 @@ export const workspaces = merge({}, defaultStyles.workspaces, {
   },
 });
 
-// Workspace settings
-export const workspaceSettings = merge({}, defaultStyles.workspaceSettings, {
-  listItemBorderColor: legacyStyles.darkThemeGrayDarker,
-  listItemHoverBgColor: legacyStyles.darkThemeGrayDarker,
-});
-
-// Workspace Drawer
-export const workspaceDrawerBackground = color(colorBackground).lighten(0.3).hex();
-export const workspaceDrawerAddButtonColor = legacyStyles.darkThemeGrayLighter;
-export const workspaceDrawerAddButtonHoverColor = legacyStyles.darkThemeGraySmoke;
-export const workspaceDrawerItemBorder = color(workspaceDrawerBackground).lighten(0.2).hex();
-export const workspaceDrawerItemHoverBackground = color(workspaceDrawerBackground).lighten(0.2).hex();
-export const workspaceDrawerItemActiveBackground = defaultStyles.brandPrimary;
-export const workspaceDrawerItemNameColor = colorText;
-export const workspaceDrawerItemNameActiveColor = 'white';
-export const workspaceDrawerServicesColor = color(colorText).darken(0.5).hex();
-export const workspaceDrawerServicesActiveColor = color(defaultStyles.brandPrimary).lighten(0.5).hex();
-
-// Service Icon
-export const serviceIcon = merge({}, defaultStyles.serviceIcon, {
-  isCustom: {
-    border: `1px solid ${legacyStyles.darkThemeGrayDark}`,
-  },
-});
+// // Workspace settings
+// export const workspaceSettings = merge({}, defaultStyles.workspaceSettings, {
+//   listItemBorderColor: legacyStyles.darkThemeGrayDarker,
+//   listItemHoverBgColor: legacyStyles.darkThemeGrayDarker,
+// });
+//
+// // Workspace Drawer
+// export const workspaceDrawerBackground = color(colorBackground).lighten(0.3).hex();
+// export const workspaceDrawerAddButtonColor = legacyStyles.darkThemeGrayLighter;
+// export const workspaceDrawerAddButtonHoverColor = legacyStyles.darkThemeGraySmoke;
+// export const workspaceDrawerItemBorder = color(workspaceDrawerBackground).lighten(0.2).hex();
+// export const workspaceDrawerItemHoverBackground = color(workspaceDrawerBackground).lighten(0.2).hex();
+// export const workspaceDrawerItemActiveBackground = defaultStyles.brandPrimary;
+// export const workspaceDrawerItemNameColor = colorText;
+// export const workspaceDrawerItemNameActiveColor = 'white';
+// export const workspaceDrawerServicesColor = color(colorText).darken(0.5).hex();
+// 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 eb7e80b9f..48111d22b 100644
--- a/packages/theme/src/themes/default/index.ts
+++ b/packages/theme/src/themes/default/index.ts
@@ -157,6 +157,16 @@ export const services = {
   },
 };
 
+// Service Icon
+export const serviceIcon = {
+  width: 35,
+  isCustom: {
+    border: `1px solid ${legacyStyles.themeGrayLighter}`,
+    borderRadius: legacyStyles.themeBorderRadius,
+    width: 37,
+  },
+};
+
 // Workspaces
 const drawerBg = color(colorBackground).lighten(0.1).hex();
 
@@ -168,7 +178,7 @@ export const workspaces = {
     width: 300,
     padding: 20,
     background: drawerBg,
-    addButton: {
+    buttons: {
       color: color(legacyStyles.themeGrayLight).lighten(0.1).hex(),
       hoverColor: legacyStyles.themeGrayLight,
     },
@@ -188,32 +198,22 @@ export const workspaces = {
   },
 };
 
-export const workspaceSettings = {
-  listItemHeight: 57,
-  listItemBorderColor: legacyStyles.themeGrayLightest,
-  listItemHoverBgColor: legacyStyles.themeGrayLightest,
-};
-
-// Workspace Drawer
-export const workspaceDrawerWidth = 300;
-export const workspaceDrawerPadding = 20;
-export const workspaceDrawerBackground = color(colorBackground).lighten(0.1).hex();
-export const workspaceDrawerAddButtonColor = legacyStyles.themeGrayLight;
-export const workspaceDrawerAddButtonHoverColor = color(legacyStyles.themeGrayLight).lighten(0.1).hex();
-export const workspaceDrawerItemHoverBackground = color(workspaceDrawerBackground).darken(0.01).hex();
-export const workspaceDrawerItemActiveBackground = legacyStyles.themeGrayLightest;
-export const workspaceDrawerItemBorder = color(workspaceDrawerBackground).darken(0.05).hex();
-export const workspaceDrawerItemNameColor = colorText;
-export const workspaceDrawerItemNameActiveColor = colorText;
-export const workspaceDrawerServicesColor = color(colorText).lighten(1.5).hex();
-export const workspaceDrawerServicesActiveColor = workspaceDrawerServicesColor;
-
-// Service Icon
-export const serviceIcon = {
-  width: 35,
-  isCustom: {
-    border: `1px solid ${legacyStyles.themeGrayLighter}`,
-    borderRadius: legacyStyles.themeBorderRadius,
-    width: 37,
-  },
-};
+// export const workspaceSettings = {
+//   listItemHeight: 57,
+//   listItemBorderColor: legacyStyles.themeGrayLightest,
+//   listItemHoverBgColor: legacyStyles.themeGrayLightest,
+// };
+//
+// // Workspace Drawer
+// export const workspaceDrawerWidth = 300;
+// export const workspaceDrawerPadding = 20;
+// export const workspaceDrawerBackground = color(colorBackground).lighten(0.1).hex();
+// export const workspaceDrawerAddButtonColor = legacyStyles.themeGrayLight;
+// export const workspaceDrawerAddButtonHoverColor = color(legacyStyles.themeGrayLight).lighten(0.1).hex();
+// export const workspaceDrawerItemHoverBackground = color(workspaceDrawerBackground).darken(0.01).hex();
+// export const workspaceDrawerItemActiveBackground = legacyStyles.themeGrayLightest;
+// export const workspaceDrawerItemBorder = color(workspaceDrawerBackground).darken(0.05).hex();
+// export const workspaceDrawerItemNameColor = colorText;
+// export const workspaceDrawerItemNameActiveColor = colorText;
+// export const workspaceDrawerServicesColor = color(colorText).lighten(1.5).hex();
+// export const workspaceDrawerServicesActiveColor = workspaceDrawerServicesColor;
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({
 
 const styles = theme => ({
   appContent: {
-    width: `calc(100% + ${theme.workspaceDrawerWidth}px)`,
+    width: `calc(100% + ${theme.workspaces.drawer.width}px)`,
     transition: 'transform 0.5s ease',
     transform() {
-      return workspaceStore.isWorkspaceDrawerOpen ? 'translateX(0)' : `translateX(-${theme.workspaceDrawerWidth}px)`;
+      return workspaceStore.isWorkspaceDrawerOpen ? 'translateX(0)' : `translateX(-${theme.workspaces.drawer.width}px)`;
     },
   },
 });
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({
 
 const styles = theme => ({
   drawer: {
-    backgroundColor: theme.workspaceDrawerBackground,
-    width: `${theme.workspaceDrawerWidth}px`,
+    background: theme.workspaces.drawer.background,
+    width: `${theme.workspaces.drawer.width}px`,
   },
   headline: {
     fontSize: '24px',
     marginTop: '38px',
     marginBottom: '25px',
-    marginLeft: theme.workspaceDrawerPadding,
+    marginLeft: theme.workspaces.drawer.padding,
   },
   workspacesSettingsButton: {
     float: 'right',
-    marginRight: theme.workspaceDrawerPadding,
+    marginRight: theme.workspaces.drawer.padding,
     marginTop: '2px',
   },
   workspacesSettingsButtonIcon: {
-    fill: theme.workspaceDrawerAddButtonColor,
+    fill: theme.workspaces.drawer.buttons.color,
     '&:hover': {
-      fill: theme.workspaceDrawerAddButtonHoverColor,
+      fill: theme.workspaces.drawer.buttons.hoverColor,
     },
   },
   workspaces: {
@@ -80,11 +80,11 @@ const styles = theme => ({
   },
   addNewWorkspaceLabel: {
     height: 'auto',
-    color: theme.workspaces.drawer.addButton.color,
+    color: theme.workspaces.drawer.buttons.color,
     marginTop: 40,
     textAlign: 'center',
     '& > svg': {
-      fill: theme.workspaces.drawer.addButton.color,
+      fill: theme.workspaces.drawer.buttons.color,
     },
     '& > span': {
       fontSize: '13px',
@@ -93,9 +93,9 @@ const styles = theme => ({
       top: -3,
     },
     '&:hover': {
-      color: theme.workspaces.drawer.addButton.hoverColor,
+      color: theme.workspaces.drawer.buttons.hoverColor,
       '& > svg': {
-        fill: theme.workspaces.drawer.addButton.hoverColor,
+        fill: theme.workspaces.drawer.buttons.hoverColor,
       },
     },
   },
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({
 const styles = theme => ({
   item: {
     height: '67px',
-    padding: `15px ${theme.workspaceDrawerPadding}px`,
-    borderBottom: `1px solid ${theme.workspaceDrawerItemBorder}`,
+    padding: `15px ${theme.workspaces.drawer.padding}px`,
+    borderBottom: `1px solid ${theme.workspaces.drawer.listItem.border}`,
     transition: 'background-color 300ms ease-out',
     '&:first-child': {
-      borderTop: `1px solid ${theme.workspaceDrawerItemBorder}`,
+      borderTop: `1px solid ${theme.workspaces.drawer.listItem.border}`,
     },
     '&:hover': {
-      backgroundColor: theme.workspaceDrawerItemHoverBackground,
+      backgroundColor: theme.workspaces.drawer.listItem.hoverBackground,
     },
   },
   isActiveItem: {
-    backgroundColor: theme.workspaceDrawerItemActiveBackground,
+    backgroundColor: theme.workspaces.drawer.listItem.activeBackground,
     '&:hover': {
-      backgroundColor: theme.workspaceDrawerItemActiveBackground,
+      backgroundColor: theme.workspaces.drawer.listItem.activeBackground,
     },
   },
   name: {
     marginTop: '4px',
-    color: theme.workspaceDrawerItemNameColor,
+    color: theme.workspaces.drawer.listItem.name.color,
   },
   activeName: {
-    color: theme.workspaceDrawerItemNameActiveColor,
+    color: theme.workspaces.drawer.listItem.name.activeColor,
   },
   services: {
     display: 'block',
     fontSize: '11px',
     marginTop: '5px',
-    color: theme.workspaceDrawerServicesColor,
+    color: theme.workspaces.drawer.listItem.services.color,
     whiteSpace: 'nowrap',
     textOverflow: 'ellipsis',
     overflow: 'hidden',
     lineHeight: '15px',
   },
   activeServices: {
-    color: theme.workspaceDrawerServicesActiveColor,
+    color: theme.workspaces.drawer.listItem.services.active,
   },
 });
 
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 => ({
     marginTop: '20px',
   },
   wrapperWhenDrawerIsOpen: {
-    width: `calc(100% - ${theme.workspaceDrawerWidth}px)`,
+    width: `calc(100% - ${theme.workspaces.drawer.width}px)`,
   },
   component: {
     background: 'rgba(20, 20, 20, 0.4)',