change plus icon in workspace drawer to settings icon

5 files changed, 52 insertions, 27 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;
diff --git a/src/i18n/locales/defaultMessages.json b/src/i18n/locales/defaultMessages.json
index 05df4cbac..f882e6030 100644
--- a/src/i18n/locales/defaultMessages.json
+++ b/src/i18n/locales/defaultMessages.json
@@ -3349,15 +3349,15 @@
         }
       },
       {
-        "defaultMessage": "!!!Add workspace",
+        "defaultMessage": "!!!Workspaces settings",
         "end": {
           "column": 3,
           "line": 27
         },
         "file": "src/features/workspaces/components/WorkspaceDrawer.js",
-        "id": "workspaceDrawer.addWorkspaceTooltip",
+        "id": "workspaceDrawer.workspacesSettingsTooltip",
         "start": {
-          "column": 23,
+          "column": 29,
           "line": 24
         }
       },
diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json
index 78dcd83d7..e55489418 100644
--- a/src/i18n/locales/en-US.json
+++ b/src/i18n/locales/en-US.json
@@ -307,12 +307,12 @@
   "welcome.loginButton": "Login to your account",
   "welcome.signupButton": "Create a free account",
   "workspaceDrawer.addNewWorkspaceLabel": "add new workspace",
-  "workspaceDrawer.addWorkspaceTooltip": "Add workspace",
   "workspaceDrawer.allServices": "All services",
   "workspaceDrawer.headline": "Workspaces",
   "workspaceDrawer.item.noServicesAddedYet": "No services added yet",
   "workspaceDrawer.premiumCtaButtonLabel": "Create your first workspace",
   "workspaceDrawer.reactivatePremiumAccountLabel": "Reactivate premium account",
   "workspaceDrawer.workspaceFeatureInfo": "<p>Franz Workspaces let you focus on what’s important right now. Set up different sets of services and easily switch between them at any time.</p><p>You decide which services you need when and where, so we can help you stay on top of your game - or easily switch off from work whenever you want.</p>",
+  "workspaceDrawer.workspacesSettingsTooltip": "Edit workspaces settings",
   "workspaces.switchingIndicator.switchingTo": "Switching to"
 }
\ No newline at end of file
diff --git a/src/i18n/messages/src/features/workspaces/components/WorkspaceDrawer.json b/src/i18n/messages/src/features/workspaces/components/WorkspaceDrawer.json
index 9b0b80321..d347622d2 100644
--- a/src/i18n/messages/src/features/workspaces/components/WorkspaceDrawer.json
+++ b/src/i18n/messages/src/features/workspaces/components/WorkspaceDrawer.json
@@ -26,12 +26,12 @@
     }
   },
   {
-    "id": "workspaceDrawer.addWorkspaceTooltip",
-    "defaultMessage": "!!!Add workspace",
+    "id": "workspaceDrawer.workspacesSettingsTooltip",
+    "defaultMessage": "!!!Workspaces settings",
     "file": "src/features/workspaces/components/WorkspaceDrawer.js",
     "start": {
       "line": 24,
-      "column": 23
+      "column": 29
     },
     "end": {
       "line": 27,