improve workspace drawer layout

5 files changed, 20 insertions, 10 deletions

diff --git a/src/components/layout/AppLayout.js b/src/components/layout/AppLayout.js
index 284a2523a..4e897e623 100644
--- a/src/components/layout/AppLayout.js
+++ b/src/components/layout/AppLayout.js
@@ -51,10 +51,10 @@ const messages = defineMessages({
 
 const styles = theme => ({
   appContent: {
-    width: `calc(100% + ${theme.workspaceDrawerWidth})`,
+    width: `calc(100% + ${theme.workspaceDrawerWidth}px)`,
     transition: 'transform 0.5s ease',
     transform() {
-      return workspacesState.isWorkspaceDrawerOpen ? 'translateX(0)' : 'translateX(-220px)';
+      return workspacesState.isWorkspaceDrawerOpen ? 'translateX(0)' : `translateX(-${theme.workspaceDrawerWidth}px)`;
     },
   },
 });
diff --git a/src/features/workspaces/components/WorkspaceDrawer.js b/src/features/workspaces/components/WorkspaceDrawer.js
index 7bf3684c0..28e74b287 100644
--- a/src/features/workspaces/components/WorkspaceDrawer.js
+++ b/src/features/workspaces/components/WorkspaceDrawer.js
@@ -22,17 +22,17 @@ const messages = defineMessages({
 const styles = theme => ({
   drawer: {
     backgroundColor: theme.workspaceDrawerBackground,
-    width: theme.workspaceDrawerWidth,
+    width: `${theme.workspaceDrawerWidth}px`,
   },
   headline: {
     fontSize: '24px',
     marginTop: '38px',
     marginBottom: '25px',
-    marginLeft: '10px',
+    marginLeft: `${theme.workspaceDrawerPadding}px`,
   },
   addWorkspaceButton: {
     float: 'right',
-    marginRight: '10px',
+    marginRight: `${theme.workspaceDrawerPadding}px`,
     marginTop: '2px',
   },
   addWorkspaceButtonIcon: {
diff --git a/src/features/workspaces/components/WorkspaceDrawerItem.js b/src/features/workspaces/components/WorkspaceDrawerItem.js
index 935508943..d2cdf1c0a 100644
--- a/src/features/workspaces/components/WorkspaceDrawerItem.js
+++ b/src/features/workspaces/components/WorkspaceDrawerItem.js
@@ -7,7 +7,7 @@ import classnames from 'classnames';
 const styles = theme => ({
   item: {
     height: '67px',
-    padding: '15px 10px',
+    padding: `15px ${theme.workspaceDrawerPadding}px`,
     borderBottom: `1px solid ${theme.workspaceDrawerItemBorder}`,
     '&:first-child': {
       borderTop: `1px solid ${theme.workspaceDrawerItemBorder}`,
diff --git a/src/features/workspaces/components/WorkspaceSwitchingIndicator.js b/src/features/workspaces/components/WorkspaceSwitchingIndicator.js
index 4a279afaf..f68ac1b00 100644
--- a/src/features/workspaces/components/WorkspaceSwitchingIndicator.js
+++ b/src/features/workspaces/components/WorkspaceSwitchingIndicator.js
@@ -2,17 +2,22 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import injectSheet from 'react-jss';
+import classnames from 'classnames';
 import { workspacesState } from '../state';
 import LoaderComponent from '../../../components/ui/Loader';
 
-const styles = () => ({
+const styles = theme => ({
   wrapper: {
     display: 'flex',
     alignItems: 'flex-start',
     position: 'absolute',
+    transition: 'width 0.5s ease',
     width: '100%',
     marginTop: '20px',
   },
+  wrapperWhenDrawerIsOpen: {
+    width: `calc(100% - ${theme.workspaceDrawerWidth}px)`,
+  },
   component: {
     background: 'rgba(20, 20, 20, 0.4)',
     padding: 20,
@@ -37,11 +42,16 @@ class WorkspaceSwitchingIndicator extends Component {
 
   render() {
     const { classes } = this.props;
-    const { isSwitchingWorkspace, nextWorkspace } = workspacesState;
+    const { isSwitchingWorkspace, isWorkspaceDrawerOpen, nextWorkspace } = workspacesState;
     if (!isSwitchingWorkspace) return null;
     const nextWorkspaceName = nextWorkspace ? nextWorkspace.name : 'All services';
     return (
-      <div className={classes.wrapper}>
+      <div
+        className={classnames([
+          classes.wrapper,
+          isWorkspaceDrawerOpen ? classes.wrapperWhenDrawerIsOpen : null,
+        ])}
+      >
         <div className={classes.component}>
           <h1 className={classes.name}>
             {`Switching to ${nextWorkspaceName}`}
diff --git a/src/features/workspaces/components/WorkspacesDashboard.js b/src/features/workspaces/components/WorkspacesDashboard.js
index df35b3590..17b3755d7 100644
--- a/src/features/workspaces/components/WorkspacesDashboard.js
+++ b/src/features/workspaces/components/WorkspacesDashboard.js
@@ -43,7 +43,7 @@ class WorkspacesDashboard extends Component {
   render() {
     const {
       workspaces,
-      isLoading,
+      isLoadingWorkspaces,
       onCreateWorkspaceSubmit,
       onWorkspaceClick,
       classes,