change plus icon in workspace drawer to settings icon

2 files changed, 45 insertions, 20 deletions

diff --git a/src/features/workspaces/components/WorkspaceDrawer.js b/src/features/workspaces/components/WorkspaceDrawer.js
index 0befcc869..bb77aa72d 100644
--- a/src/features/workspaces/components/WorkspaceDrawer.js
+++ b/src/features/workspaces/components/WorkspaceDrawer.js
@@ -21,9 +21,9 @@ const messages = defineMessages({
     id: 'workspaceDrawer.allServices',
     defaultMessage: '!!!All services',
   },
-  addWorkspaceTooltip: {
-    id: 'workspaceDrawer.addWorkspaceTooltip',
-    defaultMessage: '!!!Add workspace',
+  workspacesSettingsTooltip: {
+    id: 'workspaceDrawer.workspacesSettingsTooltip',
+    defaultMessage: '!!!Workspaces settings',
   },
   workspaceFeatureInfo: {
     id: 'workspaceDrawer.workspaceFeatureInfo',
@@ -54,12 +54,12 @@ const styles = theme => ({
     marginBottom: '25px',
     marginLeft: theme.workspaceDrawerPadding,
   },
-  addWorkspaceButton: {
+  workspacesSettingsButton: {
     float: 'right',
     marginRight: theme.workspaceDrawerPadding,
     marginTop: '2px',
   },
-  addWorkspaceButtonIcon: {
+  workspacesSettingsButtonIcon: {
     fill: theme.workspaceDrawerAddButtonColor,
     '&:hover': {
       fill: theme.workspaceDrawerAddButtonHoverColor,
@@ -133,17 +133,17 @@ class WorkspaceDrawer extends Component {
         <H1 className={classes.headline}>
           {intl.formatMessage(messages.headline)}
           <span
-            className={classes.addWorkspaceButton}
+            className={classes.workspacesSettingsButton}
             onClick={() => {
               workspaceActions.openWorkspaceSettings();
-              gaEvent(GA_CATEGORY_WORKSPACES, 'add', 'drawerHeadline');
+              gaEvent(GA_CATEGORY_WORKSPACES, 'settings', 'drawerHeadline');
             }}
-            data-tip={`${intl.formatMessage(messages.addWorkspaceTooltip)}`}
+            data-tip={`${intl.formatMessage(messages.workspacesSettingsTooltip)}`}
           >
             <Icon
-              icon="mdiPlusBox"
+              icon="mdiSettings"
               size={1.5}
-              className={classes.addWorkspaceButtonIcon}
+              className={classes.workspacesSettingsButtonIcon}
             />
           </span>
         </H1>
@@ -212,7 +212,7 @@ class WorkspaceDrawer extends Component {
           <Icon
             icon="mdiPlusBox"
             size={1}
-            className={classes.addWorkspaceButtonIcon}
+            className={classes.workspacesSettingsButtonIcon}
           />
           <span>
             {intl.formatMessage(messages.addNewWorkspaceLabel)}
diff --git a/src/features/workspaces/components/WorkspaceServiceListItem.js b/src/features/workspaces/components/WorkspaceServiceListItem.js
index 7b516d056..e05b21440 100644
--- a/src/features/workspaces/components/WorkspaceServiceListItem.js
+++ b/src/features/workspaces/components/WorkspaceServiceListItem.js
@@ -2,23 +2,37 @@ 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 { Toggle } from '@meetfranz/forms';
 
 import Service from '../../../models/Service';
 import ServiceIcon from '../../../components/ui/ServiceIcon';
 
 const styles = theme => ({
-  service: {
-    height: theme.workspaceSettings.listItemHeight,
+  listItem: {
+    height: theme.workspaces.settings.listItems.height,
+    borderBottom: `1px solid ${theme.workspaces.settings.listItems.borderColor}`,
     display: 'flex',
+    alignItems: 'center',
   },
-  name: {
-    marginTop: '4px',
+  serviceIcon: {
+    padding: theme.workspaces.settings.listItems.padding,
+  },
+  toggle: {
+    height: 'auto',
+    margin: 0,
+  },
+  label: {
+    padding: theme.workspaces.settings.listItems.padding,
+    flexGrow: 1,
+  },
+  disabledLabel: {
+    color: theme.workspaces.settings.listItems.disabled.color,
   },
 });
 
 @injectSheet(styles) @observer
-class ServiceListItem extends Component {
+class WorkspaceServiceListItem extends Component {
   static propTypes = {
     classes: PropTypes.object.isRequired,
     isInWorkspace: PropTypes.bool.isRequired,
@@ -35,16 +49,27 @@ class ServiceListItem extends Component {
     } = this.props;
 
     return (
-      <div className={classes.service}>
-        <ServiceIcon service={service} />
+      <div className={classes.listItem}>
+        <ServiceIcon
+          className={classes.serviceIcon}
+          service={service}
+        />
+        <span
+          className={classnames([
+            classes.label,
+            service.isEnabled ? null : classes.disabledLabel,
+          ])}
+        >
+          {service.name}
+        </span>
         <Toggle
+          className={classes.toggle}
           checked={isInWorkspace}
           onChange={onToggle}
-          label={service.name}
         />
       </div>
     );
   }
 }
 
-export default ServiceListItem;
+export default WorkspaceServiceListItem;