From e4f1862644d5921e2ee77078c10e16efa3e58c7b Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Tue, 19 Mar 2019 19:38:56 +0100
Subject: add workspace drawer

---
 packages/theme/src/themes/dark/index.ts | 9 +++++++++
 1 file changed, 9 insertions(+)

(limited to 'packages/theme/src/themes/dark/index.ts')

diff --git a/packages/theme/src/themes/dark/index.ts b/packages/theme/src/themes/dark/index.ts
index 3a56719b2..eaa552961 100644
--- a/packages/theme/src/themes/dark/index.ts
+++ b/packages/theme/src/themes/dark/index.ts
@@ -63,3 +63,12 @@ export const selectSearchColor = inputBackground;
 
 // Modal
 export const colorModalOverlayBackground = color(legacyStyles.darkThemeBlack).alpha(0.8).rgb().string();
+
+// Workspace Drawer
+export const workspaceDrawerBackground = color(colorBackground).lighten(0.3).hex();
+export const workspaceDrawerItemBorder = color(workspaceDrawerBackground).lighten(0.2).hex();
+export const workspaceDrawerItemActiveBackground = defaultStyles.brandPrimary;
+export const workspaceDrawerNameColor = colorText;
+export const workspaceDrawerNameActiveColor = 'white';
+export const workspaceDrawerServicesColor = color(colorText).darken(0.5).hex();
+export const workspaceDrawerServicesActiveColor = color(defaultStyles.brandPrimary).lighten(0.5).hex();
-- 
cgit v1.2.3-54-g00ecf


From 95d378239e72387759306b629e200a9d52234f20 Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Thu, 21 Mar 2019 15:40:50 +0100
Subject: style add workspace icon in drawer like the sidebar icons

---
 packages/theme/src/themes/dark/index.ts                   | 6 ++++--
 packages/theme/src/themes/default/index.ts                | 6 ++++--
 src/features/workspaces/components/WorkspaceDrawer.js     | 7 +++++++
 src/features/workspaces/components/WorkspaceDrawerItem.js | 4 ++--
 4 files changed, 17 insertions(+), 6 deletions(-)

(limited to 'packages/theme/src/themes/dark/index.ts')

diff --git a/packages/theme/src/themes/dark/index.ts b/packages/theme/src/themes/dark/index.ts
index eaa552961..cb7ffc1cf 100644
--- a/packages/theme/src/themes/dark/index.ts
+++ b/packages/theme/src/themes/dark/index.ts
@@ -66,9 +66,11 @@ export const colorModalOverlayBackground = color(legacyStyles.darkThemeBlack).al
 
 // 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 workspaceDrawerItemActiveBackground = defaultStyles.brandPrimary;
-export const workspaceDrawerNameColor = colorText;
-export const workspaceDrawerNameActiveColor = 'white';
+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 fc03b67de..e6785ec5e 100644
--- a/packages/theme/src/themes/default/index.ts
+++ b/packages/theme/src/themes/default/index.ts
@@ -144,9 +144,11 @@ export const colorModalOverlayBackground = color('#000').alpha(0.5).rgb().string
 // Workspace Drawer
 export const workspaceDrawerWidth = '220px';
 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 workspaceDrawerItemActiveBackground = legacyStyles.themeGrayLightest;
 export const workspaceDrawerItemBorder = color(workspaceDrawerBackground).darken(0.05).hex();
-export const workspaceDrawerNameColor = colorText;
-export const workspaceDrawerNameActiveColor = colorText;
+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/features/workspaces/components/WorkspaceDrawer.js b/src/features/workspaces/components/WorkspaceDrawer.js
index c9c4d3bc9..7bf3684c0 100644
--- a/src/features/workspaces/components/WorkspaceDrawer.js
+++ b/src/features/workspaces/components/WorkspaceDrawer.js
@@ -35,6 +35,12 @@ const styles = theme => ({
     marginRight: '10px',
     marginTop: '2px',
   },
+  addWorkspaceButtonIcon: {
+    fill: theme.workspaceDrawerAddButtonColor,
+    '&:hover': {
+      fill: theme.workspaceDrawerAddButtonHoverColor,
+    },
+  },
 });
 
 @injectSheet(styles) @observer
@@ -67,6 +73,7 @@ class WorkspaceDrawer extends Component {
             <Icon
               icon="mdiPlusBox"
               size={1.5}
+              className={classes.addWorkspaceButtonIcon}
             />
           </span>
         </H1>
diff --git a/src/features/workspaces/components/WorkspaceDrawerItem.js b/src/features/workspaces/components/WorkspaceDrawerItem.js
index 00207d323..935508943 100644
--- a/src/features/workspaces/components/WorkspaceDrawerItem.js
+++ b/src/features/workspaces/components/WorkspaceDrawerItem.js
@@ -18,10 +18,10 @@ const styles = theme => ({
   },
   name: {
     marginTop: '4px',
-    color: theme.workspaceDrawerNameColor,
+    color: theme.workspaceDrawerItemNameColor,
   },
   activeName: {
-    color: theme.workspaceDrawerNameActiveColor,
+    color: theme.workspaceDrawerItemNameActiveColor,
   },
   services: {
     display: 'block',
-- 
cgit v1.2.3-54-g00ecf


From 4346b0c0871c856d27c9ba088dcaf0e084552b12 Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Thu, 4 Apr 2019 16:46:22 +0200
Subject: add hover effect for drawer workspace items

---
 packages/theme/src/themes/dark/index.ts                   | 1 +
 packages/theme/src/themes/default/index.ts                | 1 +
 src/features/workspaces/components/WorkspaceDrawerItem.js | 6 ++++++
 3 files changed, 8 insertions(+)

(limited to 'packages/theme/src/themes/dark/index.ts')

diff --git a/packages/theme/src/themes/dark/index.ts b/packages/theme/src/themes/dark/index.ts
index cb7ffc1cf..1c0ede8e5 100644
--- a/packages/theme/src/themes/dark/index.ts
+++ b/packages/theme/src/themes/dark/index.ts
@@ -69,6 +69,7 @@ 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';
diff --git a/packages/theme/src/themes/default/index.ts b/packages/theme/src/themes/default/index.ts
index f2632ee20..718ccf485 100644
--- a/packages/theme/src/themes/default/index.ts
+++ b/packages/theme/src/themes/default/index.ts
@@ -149,6 +149,7 @@ 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;
diff --git a/src/features/workspaces/components/WorkspaceDrawerItem.js b/src/features/workspaces/components/WorkspaceDrawerItem.js
index 1e28ebea6..17a7882b8 100644
--- a/src/features/workspaces/components/WorkspaceDrawerItem.js
+++ b/src/features/workspaces/components/WorkspaceDrawerItem.js
@@ -20,9 +20,15 @@ const styles = theme => ({
     '&:first-child': {
       borderTop: `1px solid ${theme.workspaceDrawerItemBorder}`,
     },
+    '&:hover': {
+      backgroundColor: theme.workspaceDrawerItemHoverBackground,
+    },
   },
   isActiveItem: {
     backgroundColor: theme.workspaceDrawerItemActiveBackground,
+    '&:hover': {
+      backgroundColor: theme.workspaceDrawerItemActiveBackground,
+    },
   },
   name: {
     marginTop: '4px',
-- 
cgit v1.2.3-54-g00ecf


From 1fa1e165b159adf390375787df2af9b33e5f5856 Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Sat, 6 Apr 2019 10:05:16 +0200
Subject: make workspace settings list items taller

---
 packages/theme/src/themes/dark/index.ts            |  6 +++++
 packages/theme/src/themes/default/index.ts         |  6 +++++
 .../workspaces/components/WorkspaceItem.js         | 31 ++++++++++++----------
 3 files changed, 29 insertions(+), 14 deletions(-)

(limited to 'packages/theme/src/themes/dark/index.ts')

diff --git a/packages/theme/src/themes/dark/index.ts b/packages/theme/src/themes/dark/index.ts
index 1c0ede8e5..a9d1e1b46 100644
--- a/packages/theme/src/themes/dark/index.ts
+++ b/packages/theme/src/themes/dark/index.ts
@@ -64,6 +64,12 @@ export const selectSearchColor = inputBackground;
 // Modal
 export const colorModalOverlayBackground = color(legacyStyles.darkThemeBlack).alpha(0.8).rgb().string();
 
+// Workspace settings
+export const workspaceSettings = {
+  listItemBorderColor: legacyStyles.darkThemeGrayDarker,
+  listItemHoverBgColor: legacyStyles.darkThemeGrayDarker,
+};
+
 // Workspace Drawer
 export const workspaceDrawerBackground = color(colorBackground).lighten(0.3).hex();
 export const workspaceDrawerAddButtonColor = legacyStyles.darkThemeGrayLighter;
diff --git a/packages/theme/src/themes/default/index.ts b/packages/theme/src/themes/default/index.ts
index 718ccf485..e4c74a5c9 100644
--- a/packages/theme/src/themes/default/index.ts
+++ b/packages/theme/src/themes/default/index.ts
@@ -143,6 +143,12 @@ export const badgeBorderRadius = 50;
 // Modal
 export const colorModalOverlayBackground = color('#000').alpha(0.5).rgb().string();
 
+// Workspace settings
+export const workspaceSettings = {
+  listItemBorderColor: legacyStyles.themeGrayLightest,
+  listItemHoverBgColor: legacyStyles.themeGrayLightest,
+};
+
 // Workspace Drawer
 export const workspaceDrawerWidth = 300;
 export const workspaceDrawerPadding = 20;
diff --git a/src/features/workspaces/components/WorkspaceItem.js b/src/features/workspaces/components/WorkspaceItem.js
index b2c2a4830..a950a981a 100644
--- a/src/features/workspaces/components/WorkspaceItem.js
+++ b/src/features/workspaces/components/WorkspaceItem.js
@@ -2,14 +2,25 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { intlShape } from 'react-intl';
 import { observer } from 'mobx-react';
-import classnames from 'classnames';
+import injectSheet from 'react-jss';
+
 import Workspace from '../models/Workspace';
 
-// const messages = defineMessages({});
+const styles = theme => ({
+  row: {
+    height: 57,
+    borderBottom: `1px solid ${theme.workspaceSettings.listItemBorderColor}`,
+    '&:hover': {
+      background: theme.workspaceSettings.listItemHoverBgColor,
+    },
+  },
+  columnName: {},
+});
 
-@observer
+@injectSheet(styles) @observer
 class WorkspaceItem extends Component {
   static propTypes = {
+    classes: PropTypes.object.isRequired,
     workspace: PropTypes.instanceOf(Workspace).isRequired,
     onItemClick: PropTypes.func.isRequired,
   };
@@ -19,19 +30,11 @@ class WorkspaceItem extends Component {
   };
 
   render() {
-    const { workspace, onItemClick } = this.props;
-    // const { intl } = this.context;
+    const { classes, workspace, onItemClick } = this.props;
 
     return (
-      <tr
-        className={classnames({
-          'workspace-table__row': true,
-        })}
-      >
-        <td
-          className="workspace-table__column-name"
-          onClick={() => onItemClick(workspace)}
-        >
+      <tr className={classes.row}>
+        <td onClick={() => onItemClick(workspace)}>
           {workspace.name}
         </td>
       </tr>
-- 
cgit v1.2.3-54-g00ecf


From b3afb9f45d47ebc352b28eb106b22fffc2f17707 Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Sun, 7 Apr 2019 19:50:40 +0200
Subject: render workspace service list like services + toggle

---
 packages/forms/src/input/index.tsx                 |  1 +
 packages/forms/src/input/styles.ts                 |  5 ++
 packages/forms/src/label/styles.ts                 |  4 +-
 packages/forms/src/select/index.tsx                |  6 ++
 packages/forms/src/toggle/index.tsx                |  4 +-
 packages/theme/src/themes/dark/index.ts            | 52 ++++++++++++++++-
 packages/theme/src/themes/default/index.ts         | 57 +++++++++++++++++-
 src/components/ui/ServiceIcon.js                   | 67 ++++++++++++++++++++++
 .../workspaces/components/EditWorkspaceForm.js     |  4 +-
 .../workspaces/components/ServiceListItem.js       | 48 ----------------
 .../workspaces/components/WorkspaceItem.js         |  6 +-
 .../components/WorkspaceServiceListItem.js         | 50 ++++++++++++++++
 12 files changed, 243 insertions(+), 61 deletions(-)
 create mode 100644 src/components/ui/ServiceIcon.js
 delete mode 100644 src/features/workspaces/components/ServiceListItem.js
 create mode 100644 src/features/workspaces/components/WorkspaceServiceListItem.js

(limited to 'packages/theme/src/themes/dark/index.ts')

diff --git a/packages/forms/src/input/index.tsx b/packages/forms/src/input/index.tsx
index f89c91be5..e410f8fef 100644
--- a/packages/forms/src/input/index.tsx
+++ b/packages/forms/src/input/index.tsx
@@ -131,6 +131,7 @@ class InputComponent extends Component<IProps, IState> {
           title={label}
           showLabel={showLabel}
           htmlFor={id}
+          className={classes.label}
         >
           <div
             className={classnames({
diff --git a/packages/forms/src/input/styles.ts b/packages/forms/src/input/styles.ts
index a64d2c340..2f7ea65f2 100644
--- a/packages/forms/src/input/styles.ts
+++ b/packages/forms/src/input/styles.ts
@@ -10,6 +10,11 @@ const prefixStyles = (theme: Theme) => ({
 });
 
 export default (theme: Theme) => ({
+  label: {
+    '& > div': {
+      marginTop: 5,
+    }
+  },
   disabled: {
     opacity: theme.inputDisabledOpacity,
   },
diff --git a/packages/forms/src/label/styles.ts b/packages/forms/src/label/styles.ts
index f3998de04..c64c9b285 100644
--- a/packages/forms/src/label/styles.ts
+++ b/packages/forms/src/label/styles.ts
@@ -1,9 +1,7 @@
 import { Theme } from '../../../theme/lib';
 
 export default (theme: Theme) => ({
-  content: {
-    marginTop: 5,
-  },
+  content: {},
   label: {
     color: theme.labelColor,
     fontSize: theme.uiFontSize,
diff --git a/packages/forms/src/select/index.tsx b/packages/forms/src/select/index.tsx
index 4a9e3c56e..cfbe91dda 100644
--- a/packages/forms/src/select/index.tsx
+++ b/packages/forms/src/select/index.tsx
@@ -56,6 +56,11 @@ const styles = (theme: Theme) => ({
     textAlign: 'left',
     color: theme.selectColor,
   },
+  label: {
+    '& > div': {
+      marginTop: 5,
+    }
+  },
   popup: {
     opacity: 0,
     height: 0,
@@ -334,6 +339,7 @@ class SelectComponent extends Component<IProps> {
           title={label}
           showLabel={showLabel}
           htmlFor={id}
+          className={classes.label}
         >
           <div
             className={classnames({
diff --git a/packages/forms/src/toggle/index.tsx b/packages/forms/src/toggle/index.tsx
index 6487f1d07..d84508a5f 100644
--- a/packages/forms/src/toggle/index.tsx
+++ b/packages/forms/src/toggle/index.tsx
@@ -1,7 +1,7 @@
 import { Theme } from '@meetfranz/theme';
 import classnames from 'classnames';
 import CSS from 'csstype';
-import React, { Component, createRef } from 'react';
+import React, { Component } from 'react';
 import injectStyle from 'react-jss';
 
 import { IFormField, IWithStyle, Omit } from '../typings/generic';
@@ -45,11 +45,11 @@ const styles = (theme: Theme) => ({
   },
   toggleLabel: {
     display: 'flex',
+    alignItems: 'center',
 
     '& > span': {
       order: 1,
       marginLeft: 15,
-      marginTop: 2,
     },
   },
 });
diff --git a/packages/theme/src/themes/dark/index.ts b/packages/theme/src/themes/dark/index.ts
index a9d1e1b46..73ffa7f5e 100644
--- a/packages/theme/src/themes/dark/index.ts
+++ b/packages/theme/src/themes/dark/index.ts
@@ -1,4 +1,5 @@
 import color from 'color';
+import { merge, cloneDeep } from 'lodash';
 
 import * as defaultStyles from '../default';
 import * as legacyStyles from '../legacy';
@@ -64,11 +65,51 @@ export const selectSearchColor = inputBackground;
 // Modal
 export const colorModalOverlayBackground = color(legacyStyles.darkThemeBlack).alpha(0.8).rgb().string();
 
+// Services
+export const services = merge({}, defaultStyles.services, {
+  listItems: {
+    borderColor: legacyStyles.darkThemeGrayDarker,
+    hoverBgColor: legacyStyles.darkThemeGrayDarker,
+    disabled: {
+      color: legacyStyles.darkThemeGray,
+    },
+  },
+});
+
+// Workspaces
+const drawerBg = color(colorBackground).lighten(0.3).hex();
+
+export const workspaces = merge({}, defaultStyles.workspaces, {
+  settings: {
+    listItems: cloneDeep(services.listItems),
+  },
+  drawer: {
+    background: drawerBg,
+    addButton: {
+      color: legacyStyles.darkThemeGrayLighter,
+      hoverColor: legacyStyles.darkThemeGraySmoke,
+    },
+    listItem: {
+      border: color(drawerBg).lighten(0.2).hex(),
+      hoverBackground: color(drawerBg).lighten(0.2).hex(),
+      activeBackground: defaultStyles.brandPrimary,
+      name: {
+        color: colorText,
+        activeColor: 'white',
+      },
+      services: {
+        color: color(colorText).darken(0.5).hex(),
+        active: color(defaultStyles.brandPrimary).lighten(0.5).hex(),
+      },
+    },
+  },
+});
+
 // Workspace settings
-export const workspaceSettings = {
+export const workspaceSettings = merge({}, defaultStyles.workspaceSettings, {
   listItemBorderColor: legacyStyles.darkThemeGrayDarker,
   listItemHoverBgColor: legacyStyles.darkThemeGrayDarker,
-};
+});
 
 // Workspace Drawer
 export const workspaceDrawerBackground = color(colorBackground).lighten(0.3).hex();
@@ -81,3 +122,10 @@ 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}`,
+  },
+});
diff --git a/packages/theme/src/themes/default/index.ts b/packages/theme/src/themes/default/index.ts
index e4c74a5c9..d2b9014b4 100644
--- a/packages/theme/src/themes/default/index.ts
+++ b/packages/theme/src/themes/default/index.ts
@@ -1,4 +1,5 @@
 import color from 'color';
+import { cloneDeep } from 'lodash';
 
 import * as legacyStyles from '../legacy';
 
@@ -143,8 +144,52 @@ export const badgeBorderRadius = 50;
 // Modal
 export const colorModalOverlayBackground = color('#000').alpha(0.5).rgb().string();
 
-// Workspace settings
+// Services
+export const services = {
+  listItems: {
+    padding: 10,
+    height: 57,
+    borderColor: legacyStyles.themeGrayLightest,
+    hoverBgColor: legacyStyles.themeGrayLightest,
+    disabled: {
+      color: legacyStyles.themeGrayLight,
+    },
+  },
+};
+
+// Workspaces
+const drawerBg = color(colorBackground).lighten(0.1).hex();
+
+export const workspaces = {
+  settings: {
+    listItems: cloneDeep(services.listItems),
+  },
+  drawer: {
+    width: 300,
+    padding: 20,
+    background: drawerBg,
+    addButton: {
+      color: legacyStyles.themeGrayLight,
+      hoverColor: color(legacyStyles.themeGrayLight).lighten(0.1).hex(),
+    },
+    listItem: {
+      hoverBackground: color(drawerBg).darken(0.01).hex(),
+      activeBackground: legacyStyles.themeGrayLightest,
+      border: color(drawerBg).darken(0.05).hex(),
+      name: {
+        color: colorText,
+        activeColor: colorText,
+      },
+      services: {
+        color: color(colorText).lighten(1.5).hex(),
+        active: color(colorText).lighten(1.5).hex(),
+      },
+    },
+  },
+};
+
 export const workspaceSettings = {
+  listItemHeight: 57,
   listItemBorderColor: legacyStyles.themeGrayLightest,
   listItemHoverBgColor: legacyStyles.themeGrayLightest,
 };
@@ -162,3 +207,13 @@ 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,
+  },
+};
diff --git a/src/components/ui/ServiceIcon.js b/src/components/ui/ServiceIcon.js
new file mode 100644
index 000000000..0b9155a4e
--- /dev/null
+++ b/src/components/ui/ServiceIcon.js
@@ -0,0 +1,67 @@
+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 ServiceModel from '../../models/Service';
+
+const styles = theme => ({
+  root: {
+    height: 'auto',
+  },
+  icon: {
+    width: theme.serviceIcon.width,
+  },
+  isCustomIcon: {
+    width: theme.serviceIcon.isCustom.width,
+    border: theme.serviceIcon.isCustom.border,
+    borderRadius: theme.serviceIcon.isCustom.borderRadius,
+  },
+  isDisabled: {
+    filter: 'grayscale(100%)',
+    opacity: '.5',
+  },
+});
+
+@injectSheet(styles) @observer
+class ServiceIcon extends Component {
+  static propTypes = {
+    classes: PropTypes.object.isRequired,
+    service: PropTypes.instanceOf(ServiceModel).isRequired,
+    className: PropTypes.string,
+  };
+
+  static defaultProps = {
+    className: '',
+  };
+
+  render() {
+    const {
+      classes,
+      className,
+      service,
+    } = this.props;
+
+    return (
+      <div
+        className={classnames([
+          classes.root,
+          className,
+        ])}
+      >
+        <img
+          src={service.icon}
+          className={classnames([
+            classes.icon,
+            service.isEnabled ? null : classes.isDisabled,
+            service.hasCustomIcon ? classes.isCustomIcon : null,
+          ])}
+          alt=""
+        />
+      </div>
+    );
+  }
+}
+
+export default ServiceIcon;
diff --git a/src/features/workspaces/components/EditWorkspaceForm.js b/src/features/workspaces/components/EditWorkspaceForm.js
index e4bf44248..bba4485ff 100644
--- a/src/features/workspaces/components/EditWorkspaceForm.js
+++ b/src/features/workspaces/components/EditWorkspaceForm.js
@@ -10,7 +10,7 @@ import Workspace from '../models/Workspace';
 import Service from '../../../models/Service';
 import Form from '../../../lib/Form';
 import { required } from '../../../helpers/validation-helpers';
-import ServiceListItem from './ServiceListItem';
+import WorkspaceServiceListItem from './WorkspaceServiceListItem';
 import Request from '../../../stores/lib/Request';
 import { gaEvent } from '../../../lib/analytics';
 import { GA_CATEGORY_WORKSPACES } from '../index';
@@ -151,7 +151,7 @@ class EditWorkspaceForm extends Component {
           <h2>{intl.formatMessage(messages.servicesInWorkspaceHeadline)}</h2>
           <div className={classes.serviceList}>
             {services.map(s => (
-              <ServiceListItem
+              <WorkspaceServiceListItem
                 key={s.id}
                 service={s}
                 isInWorkspace={workspaceServices.includes(s.id)}
diff --git a/src/features/workspaces/components/ServiceListItem.js b/src/features/workspaces/components/ServiceListItem.js
deleted file mode 100644
index 146cc5a36..000000000
--- a/src/features/workspaces/components/ServiceListItem.js
+++ /dev/null
@@ -1,48 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { observer } from 'mobx-react';
-import injectSheet from 'react-jss';
-import { Toggle } from '@meetfranz/forms';
-
-import Service from '../../../models/Service';
-
-const styles = () => ({
-  service: {
-    height: 'auto',
-    display: 'flex',
-  },
-  name: {
-    marginTop: '4px',
-  },
-});
-
-@injectSheet(styles) @observer
-class ServiceListItem extends Component {
-  static propTypes = {
-    classes: PropTypes.object.isRequired,
-    isInWorkspace: PropTypes.bool.isRequired,
-    onToggle: PropTypes.func.isRequired,
-    service: PropTypes.instanceOf(Service).isRequired,
-  };
-
-  render() {
-    const {
-      classes,
-      isInWorkspace,
-      onToggle,
-      service,
-    } = this.props;
-
-    return (
-      <div className={classes.service}>
-        <Toggle
-          checked={isInWorkspace}
-          onChange={onToggle}
-          label={service.name}
-        />
-      </div>
-    );
-  }
-}
-
-export default ServiceListItem;
diff --git a/src/features/workspaces/components/WorkspaceItem.js b/src/features/workspaces/components/WorkspaceItem.js
index a950a981a..cc4b1a3ba 100644
--- a/src/features/workspaces/components/WorkspaceItem.js
+++ b/src/features/workspaces/components/WorkspaceItem.js
@@ -8,10 +8,10 @@ import Workspace from '../models/Workspace';
 
 const styles = theme => ({
   row: {
-    height: 57,
-    borderBottom: `1px solid ${theme.workspaceSettings.listItemBorderColor}`,
+    height: theme.workspaces.settings.listItems.height,
+    borderBottom: `1px solid ${theme.workspaces.settings.listItems.borderColor}`,
     '&:hover': {
-      background: theme.workspaceSettings.listItemHoverBgColor,
+      background: theme.workspaces.settings.listItems.hoverBgColor,
     },
   },
   columnName: {},
diff --git a/src/features/workspaces/components/WorkspaceServiceListItem.js b/src/features/workspaces/components/WorkspaceServiceListItem.js
new file mode 100644
index 000000000..7b516d056
--- /dev/null
+++ b/src/features/workspaces/components/WorkspaceServiceListItem.js
@@ -0,0 +1,50 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { observer } from 'mobx-react';
+import injectSheet from 'react-jss';
+import { Toggle } from '@meetfranz/forms';
+
+import Service from '../../../models/Service';
+import ServiceIcon from '../../../components/ui/ServiceIcon';
+
+const styles = theme => ({
+  service: {
+    height: theme.workspaceSettings.listItemHeight,
+    display: 'flex',
+  },
+  name: {
+    marginTop: '4px',
+  },
+});
+
+@injectSheet(styles) @observer
+class ServiceListItem extends Component {
+  static propTypes = {
+    classes: PropTypes.object.isRequired,
+    isInWorkspace: PropTypes.bool.isRequired,
+    onToggle: PropTypes.func.isRequired,
+    service: PropTypes.instanceOf(Service).isRequired,
+  };
+
+  render() {
+    const {
+      classes,
+      isInWorkspace,
+      onToggle,
+      service,
+    } = this.props;
+
+    return (
+      <div className={classes.service}>
+        <ServiceIcon service={service} />
+        <Toggle
+          checked={isInWorkspace}
+          onChange={onToggle}
+          label={service.name}
+        />
+      </div>
+    );
+  }
+}
+
+export default ServiceListItem;
-- 
cgit v1.2.3-54-g00ecf


From 9472deab9496aca3a9bdf20b93f2a84e3e4569b7 Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Wed, 10 Apr 2019 11:22:25 +0200
Subject: refactors workspace theme vars into object structure

---
 packages/theme/src/themes/dark/index.ts            | 49 +++++++++---------
 packages/theme/src/themes/default/index.ts         | 60 +++++++++++-----------
 src/components/layout/AppLayout.js                 |  4 +-
 .../workspaces/components/WorkspaceDrawer.js       | 20 ++++----
 .../workspaces/components/WorkspaceDrawerItem.js   | 20 ++++----
 .../components/WorkspaceSwitchingIndicator.js      |  2 +-
 6 files changed, 78 insertions(+), 77 deletions(-)

(limited to 'packages/theme/src/themes/dark/index.ts')

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)',
-- 
cgit v1.2.3-54-g00ecf


From eaf4aff646eed56e65c8dd8e70143ab5634ad4b4 Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Thu, 11 Apr 2019 16:44:16 +0200
Subject: WIP: announcement feature and workspace fixes

---
 packages/theme/src/themes/dark/index.ts            |  19 --
 packages/theme/src/themes/default/index.ts         |  20 --
 src/features/announcements/actions.js              |   4 +-
 src/features/announcements/api.js                  |  18 +-
 .../announcements/components/AnnouncementScreen.js | 152 ++++++++++++---
 src/features/announcements/store.js                | 151 +++++++++------
 src/features/utils/FeatureStore.js                 |  29 ++-
 src/features/workspaces/store.js                   |  18 +-
 src/i18n/locales/defaultMessages.json              |   6 +-
 src/i18n/locales/en-US.json                        |   6 +-
 .../src/features/announcements/Component.json      |   4 +-
 .../components/AnnouncementScreen.json             |   8 +-
 src/i18n/messages/src/lib/Menu.json                | 214 ++++++++++-----------
 src/lib/Menu.js                                    |  15 +-
 src/stores/index.js                                |   4 +
 15 files changed, 405 insertions(+), 263 deletions(-)

(limited to 'packages/theme/src/themes/dark/index.ts')

diff --git a/packages/theme/src/themes/dark/index.ts b/packages/theme/src/themes/dark/index.ts
index fd04b106c..b17dc8965 100644
--- a/packages/theme/src/themes/dark/index.ts
+++ b/packages/theme/src/themes/dark/index.ts
@@ -111,22 +111,3 @@ 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();
-//
diff --git a/packages/theme/src/themes/default/index.ts b/packages/theme/src/themes/default/index.ts
index d0493b82f..46d29f593 100644
--- a/packages/theme/src/themes/default/index.ts
+++ b/packages/theme/src/themes/default/index.ts
@@ -200,23 +200,3 @@ export const workspaces = {
     spinnerColor: 'white',
   },
 };
-
-// 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/features/announcements/actions.js b/src/features/announcements/actions.js
index 68b262ded..bab496314 100644
--- a/src/features/announcements/actions.js
+++ b/src/features/announcements/actions.js
@@ -2,7 +2,9 @@ import PropTypes from 'prop-types';
 import { createActionsFromDefinitions } from '../../actions/lib/actions';
 
 export const announcementActions = createActionsFromDefinitions({
-  show: {},
+  show: {
+    targetVersion: PropTypes.string,
+  },
 }, PropTypes.checkPropTypes);
 
 export default announcementActions;
diff --git a/src/features/announcements/api.js b/src/features/announcements/api.js
index 09fcb8235..a581bd8de 100644
--- a/src/features/announcements/api.js
+++ b/src/features/announcements/api.js
@@ -1,5 +1,6 @@
 import { remote } from 'electron';
 import Request from '../../stores/lib/Request';
+import { API, API_VERSION } from '../../environment';
 
 const debug = require('debug')('Franz:feature:announcements:api');
 
@@ -9,15 +10,24 @@ export const announcementsApi = {
     return Promise.resolve(remote.app.getVersion());
   },
 
-  async getAnnouncementForVersion(version) {
-    debug('fetching release announcement from Github');
+  async getChangelog(version) {
+    debug('fetching release changelog from Github');
     const url = `https://api.github.com/repos/meetfranz/franz/releases/tags/v${version}`;
     const request = await window.fetch(url, { method: 'GET' });
-    if (!request.ok) throw request;
+    if (!request.ok) return null;
     const data = await request.json();
     return data.body;
   },
+
+  async getAnnouncement(version) {
+    debug('fetching release announcement from api');
+    const url = `${API}/${API_VERSION}/announcements/${version}`;
+    const response = await window.fetch(url, { method: 'GET' });
+    if (!response.ok) return null;
+    return response.json();
+  },
 };
 
 export const getCurrentVersionRequest = new Request(announcementsApi, 'getCurrentVersion');
-export const getAnnouncementRequest = new Request(announcementsApi, 'getAnnouncementForVersion');
+export const getChangelogRequest = new Request(announcementsApi, 'getChangelog');
+export const getAnnouncementRequest = new Request(announcementsApi, 'getAnnouncement');
diff --git a/src/features/announcements/components/AnnouncementScreen.js b/src/features/announcements/components/AnnouncementScreen.js
index 5b3e7aeaa..2d5efc396 100644
--- a/src/features/announcements/components/AnnouncementScreen.js
+++ b/src/features/announcements/components/AnnouncementScreen.js
@@ -4,27 +4,29 @@ import PropTypes from 'prop-types';
 import { inject, observer } from 'mobx-react';
 import { defineMessages, intlShape } from 'react-intl';
 import injectSheet from 'react-jss';
-import { themeSidebarWidth } from '../../../../packages/theme/lib/themes/legacy';
+import { Button } from '@meetfranz/forms';
+
 import { announcementsStore } from '../index';
+import UIStore from '../../../stores/UIStore';
 
 const messages = defineMessages({
   headline: {
-    id: 'feature.announcements.headline',
-    defaultMessage: '!!!What\'s new in Franz {version}?',
+    id: 'feature.announcements.changelog.headline',
+    defaultMessage: '!!!Changes in Franz {version}',
   },
 });
 
+const smallScreen = '1000px';
+
 const styles = theme => ({
   container: {
     background: theme.colorBackground,
     position: 'absolute',
     top: 0,
     zIndex: 140,
-    width: `calc(100% - ${themeSidebarWidth})`,
-    display: 'flex',
-    'flex-direction': 'column',
-    'align-items': 'center',
-    'justify-content': 'center',
+    width: '100%',
+    height: '100%',
+    overflowY: 'auto',
   },
   headline: {
     color: theme.colorHeadline,
@@ -33,7 +35,76 @@ const styles = theme => ({
     'text-align': 'center',
     'line-height': '1.3em',
   },
-  body: {
+  announcement: {
+    height: '100vh',
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+  },
+  main: {
+    flexGrow: 1,
+    '& h1': {
+      marginTop: 40,
+      fontSize: 50,
+      color: theme.styleTypes.primary.accent,
+      textAlign: 'center',
+      [`@media(min-width: ${smallScreen})`]: {
+        marginTop: 75,
+      },
+    },
+    '& h2': {
+      fontSize: 24,
+      fontWeight: 300,
+      color: theme.colorText,
+      textAlign: 'center',
+    },
+  },
+  mainBody: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    width: 'calc(100% - 80px)',
+    height: 'auto',
+    margin: '0 auto',
+    [`@media(min-width: ${smallScreen})`]: {
+      flexDirection: 'row',
+      justifyContent: 'center',
+    },
+  },
+  mainImage: {
+    minWidth: 250,
+    maxWidth: 400,
+    margin: '0 auto',
+    marginBottom: 40,
+    '& img': {
+      width: '100%',
+    },
+    [`@media(min-width: ${smallScreen})`]: {
+      margin: 0,
+    },
+  },
+  mainText: {
+    height: 'auto',
+    maxWidth: 600,
+    textAlign: 'center',
+    '& p': {
+      lineHeight: '1.5em',
+    },
+    [`@media(min-width: ${smallScreen})`]: {
+      textAlign: 'left',
+    },
+  },
+  mainCtaButton: {
+    textAlign: 'center',
+    marginTop: 40,
+    [`@media(min-width: ${smallScreen})`]: {
+      textAlign: 'left',
+    },
+  },
+  spotlight: {
+    height: 'auto',
+  },
+  changelog: {
     '& h3': {
       fontSize: '24px',
       margin: '1.5em 0 1em 0',
@@ -45,10 +116,13 @@ const styles = theme => ({
 });
 
 
-@inject('actions') @injectSheet(styles) @observer
+@inject('stores', 'actions') @injectSheet(styles) @observer
 class AnnouncementScreen extends Component {
   static propTypes = {
     classes: PropTypes.object.isRequired,
+    stores: PropTypes.shape({
+      ui: PropTypes.instanceOf(UIStore).isRequired,
+    }).isRequired,
   };
 
   static contextTypes = {
@@ -56,21 +130,55 @@ class AnnouncementScreen extends Component {
   };
 
   render() {
-    const { classes } = this.props;
+    const { classes, stores } = this.props;
     const { intl } = this.context;
+    const { changelog, announcement } = announcementsStore;
+    const themeImage = stores.ui.isDarkThemeActive ? 'dark' : 'light';
     return (
       <div className={`${classes.container}`}>
-        <h1 className={classes.headline}>
-          {intl.formatMessage(messages.headline, {
-            version: announcementsStore.currentVersion,
-          })}
-        </h1>
-        <div
-          className={classes.body}
-          dangerouslySetInnerHTML={{
-            __html: marked(announcementsStore.announcement, { sanitize: true }),
-          }}
-        />
+        <div className={classes.announcement}>
+          <div className={classes.main}>
+            <h1>{announcement.main.headline}</h1>
+            <h2>{announcement.main.subHeadline}</h2>
+            <div className={classes.mainBody}>
+              <div className={classes.mainImage}>
+                <img
+                  src={announcement.main.image[themeImage]}
+                  alt=""
+                />
+              </div>
+              <div className={classes.mainText}>
+                <p
+                  dangerouslySetInnerHTML={{
+                    __html: marked(announcement.main.text,{ sanitize: true }),
+                  }}
+                />
+                <div className={classes.mainCtaButton}>
+                  <Button label={announcement.main.cta.label} />
+                </div>
+              </div>
+            </div>
+          </div>
+          {announcement.spotlight && (
+            <div className={classes.spotlight}>
+              <h2>{announcement.spotlight.title}</h2>
+            </div>
+          )}
+        </div>
+        {changelog && (
+          <div className={classes.changelog}>
+            <h1 className={classes.headline}>
+              {intl.formatMessage(messages.headline, {
+                version: announcementsStore.currentVersion,
+              })}
+            </h1>
+            <div
+              dangerouslySetInnerHTML={{
+                __html: marked(changelog, { sanitize: true }),
+              }}
+            />
+          </div>
+        )}
       </div>
     );
   }
diff --git a/src/features/announcements/store.js b/src/features/announcements/store.js
index c59700926..d4fb0a52c 100644
--- a/src/features/announcements/store.js
+++ b/src/features/announcements/store.js
@@ -1,96 +1,93 @@
-import { action, observable, reaction } from 'mobx';
+import {
+  action,
+  computed,
+  observable,
+  reaction,
+} from 'mobx';
 import semver from 'semver';
+import localStorage from 'mobx-localstorage';
+
 import { FeatureStore } from '../utils/FeatureStore';
-import { getAnnouncementRequest, getCurrentVersionRequest } from './api';
+import { getAnnouncementRequest, getChangelogRequest, getCurrentVersionRequest } from './api';
+import { announcementActions } from './actions';
+
+const LOCAL_STORAGE_KEY = 'announcements';
 
 const debug = require('debug')('Franz:feature:announcements:store');
 
 export class AnnouncementsStore extends FeatureStore {
-
-  @observable announcement = null;
-
-  @observable currentVersion = null;
-
-  @observable lastUsedVersion = null;
+  @observable targetVersion = null;
 
   @observable isAnnouncementVisible = false;
 
   @observable isFeatureActive = false;
 
-  async start(stores, actions) {
-    debug('AnnouncementsStore::start');
-    this.stores = stores;
-    this.actions = actions;
-    await this.fetchLastUsedVersion();
-    await this.fetchCurrentVersion();
-    await this.fetchReleaseAnnouncement();
-    this.showAnnouncementIfNotSeenYet();
-
-    this.actions.announcements.show.listen(this._showAnnouncement.bind(this));
-    this.isFeatureActive = true;
+  @computed get changelog() {
+    return getChangelogRequest.result;
   }
 
-  stop() {
-    debug('AnnouncementsStore::stop');
-    this.isFeatureActive = false;
-    this.isAnnouncementVisible = false;
+  @computed get announcement() {
+    return getAnnouncementRequest.result;
   }
 
-  // ====== PUBLIC ======
-
-  async fetchLastUsedVersion() {
-    debug('getting last used version from local storage');
-    const lastUsedVersion = window.localStorage.getItem('lastUsedVersion');
-    this._setLastUsedVersion(lastUsedVersion == null ? '0.0.0' : lastUsedVersion);
+  @computed get settings() {
+    return localStorage.getItem(LOCAL_STORAGE_KEY) || {};
   }
 
-  async fetchCurrentVersion() {
-    debug('getting current version from api');
-    const version = await getCurrentVersionRequest.execute();
-    this._setCurrentVersion(version);
+  @computed get lastSeenAnnouncementVersion() {
+    return this.settings.lastSeenAnnouncementVersion || null;
   }
 
-  async fetchReleaseAnnouncement() {
-    debug('getting release announcement from api');
-    try {
-      const announcement = await getAnnouncementRequest.execute(this.currentVersion);
-      this._setAnnouncement(announcement);
-    } catch (error) {
-      this._setAnnouncement(null);
-    }
+  @computed get currentVersion() {
+    return getCurrentVersionRequest.result;
   }
 
-  showAnnouncementIfNotSeenYet() {
-    const { announcement, currentVersion, lastUsedVersion } = this;
-    if (announcement && semver.gt(currentVersion, lastUsedVersion)) {
-      debug(`${currentVersion} < ${lastUsedVersion}: announcement is shown`);
-      this._showAnnouncement();
-    } else {
-      debug(`${currentVersion} >= ${lastUsedVersion}: announcement is hidden`);
-      this._hideAnnouncement();
-    }
+  @computed get isNewUser() {
+    return this.stores.settings.stats.appStarts <= 1;
   }
 
-  // ====== PRIVATE ======
+  async start(stores, actions) {
+    debug('AnnouncementsStore::start');
+    this.stores = stores;
+    this.actions = actions;
+    getCurrentVersionRequest.execute();
 
-  @action _setCurrentVersion(version) {
-    debug(`setting current version to ${version}`);
-    this.currentVersion = version;
-  }
+    this._registerActions([
+      [announcementActions.show, this._showAnnouncement],
+    ]);
 
-  @action _setLastUsedVersion(version) {
-    debug(`setting last used version to ${version}`);
-    this.lastUsedVersion = version;
+    this._registerReactions([
+      this._fetchAnnouncements,
+      this._showAnnouncementToUsersWhoUpdatedApp,
+    ]);
+    this.isFeatureActive = true;
   }
 
-  @action _setAnnouncement(announcement) {
-    debug(`setting announcement to ${announcement}`);
-    this.announcement = announcement;
+  stop() {
+    super.stop();
+    debug('AnnouncementsStore::stop');
+    this.isFeatureActive = false;
+    this.isAnnouncementVisible = false;
   }
 
-  @action _showAnnouncement() {
+  // ======= HELPERS ======= //
+
+  _updateSettings = (changes) => {
+    localStorage.setItem(LOCAL_STORAGE_KEY, {
+      ...this.settings,
+      ...changes,
+    });
+  };
+
+  // ======= ACTIONS ======= //
+
+  @action _showAnnouncement = ({ targetVersion } = {}) => {
+    this.targetVersion = targetVersion || this.currentVersion;
     this.isAnnouncementVisible = true;
     this.actions.service.blurActive();
+    this._updateSettings({
+      lastSeenAnnouncementVersion: this.currentVersion,
+    });
     const dispose = reaction(
       () => this.stores.services.active,
       () => {
@@ -98,9 +95,37 @@ export class AnnouncementsStore extends FeatureStore {
         dispose();
       },
     );
-  }
+  };
 
   @action _hideAnnouncement() {
     this.isAnnouncementVisible = false;
   }
+
+  // ======= REACTIONS ========
+
+  _showAnnouncementToUsersWhoUpdatedApp = () => {
+    const { announcement, isNewUser } = this;
+    console.log(announcement, isNewUser);
+    // Check if there is an announcement and on't show announcements to new users
+    if (!announcement || isNewUser) return;
+
+    this._showAnnouncement();
+
+    // Check if the user has already used current version (= has seen the announcement)
+    // const { currentVersion, lastSeenAnnouncementVersion } = this;
+    // if (semver.gt(currentVersion, lastSeenAnnouncementVersion)) {
+    //   debug(`${currentVersion} < ${lastSeenAnnouncementVersion}: announcement is shown`);
+    //   this._showAnnouncement();
+    // } else {
+    //   debug(`${currentVersion} >= ${lastSeenAnnouncementVersion}: announcement is hidden`);
+    //   this._hideAnnouncement();
+    // }
+  };
+
+  _fetchAnnouncements = () => {
+    const targetVersion = this.targetVersion || this.currentVersion;
+    if (!targetVersion) return;
+    getChangelogRequest.execute('5.0.1');
+    getAnnouncementRequest.execute('5.1.0');
+  }
 }
diff --git a/src/features/utils/FeatureStore.js b/src/features/utils/FeatureStore.js
index 66b66a104..48962561d 100644
--- a/src/features/utils/FeatureStore.js
+++ b/src/features/utils/FeatureStore.js
@@ -5,17 +5,38 @@ export class FeatureStore {
 
   _reactions = null;
 
-  _listenToActions(actions) {
-    if (this._actions) this._actions.forEach(a => a[0].off(a[1]));
+  _registerActions(actions) {
     this._actions = [];
     actions.forEach(a => this._actions.push(a));
+    this._startListeningToActions();
+  }
+
+  _startListeningToActions() {
+    this._stopListeningToActions();
     this._actions.forEach(a => a[0].listen(a[1]));
   }
 
-  _startReactions(reactions) {
-    if (this._reactions) this._reactions.forEach(r => r.stop());
+  _stopListeningToActions() {
+    this._actions.forEach(a => a[0].off(a[1]));
+  }
+
+  _registerReactions(reactions) {
     this._reactions = [];
     reactions.forEach(r => this._reactions.push(new Reaction(r)));
+    this._startReactions();
+  }
+
+  _startReactions() {
+    this._stopReactions();
     this._reactions.forEach(r => r.start());
   }
+
+  _stopReactions() {
+    this._reactions.forEach(r => r.stop());
+  }
+
+  stop() {
+    this._stopListeningToActions();
+    this._stopReactions();
+  }
 }
diff --git a/src/features/workspaces/store.js b/src/features/workspaces/store.js
index ea601700e..4841a4e08 100644
--- a/src/features/workspaces/store.js
+++ b/src/features/workspaces/store.js
@@ -51,12 +51,16 @@ export default class WorkspacesStore extends FeatureStore {
     return getUserWorkspacesRequest.wasExecuted && this.workspaces.length > 0;
   }
 
+  @computed get isUserAllowedToUseFeature() {
+    return !this.isPremiumUpgradeRequired;
+  }
+
   start(stores, actions) {
     debug('WorkspacesStore::start');
     this.stores = stores;
     this.actions = actions;
 
-    this._listenToActions([
+    this._registerActions([
       [workspaceActions.edit, this._edit],
       [workspaceActions.create, this._create],
       [workspaceActions.delete, this._delete],
@@ -67,7 +71,7 @@ export default class WorkspacesStore extends FeatureStore {
       [workspaceActions.openWorkspaceSettings, this._openWorkspaceSettings],
     ]);
 
-    this._startReactions([
+    this._registerReactions([
       this._setWorkspaceBeingEditedReaction,
       this._setActiveServiceOnWorkspaceSwitchReaction,
       this._setFeatureEnabledReaction,
@@ -75,6 +79,7 @@ export default class WorkspacesStore extends FeatureStore {
       this._activateLastUsedWorkspaceReaction,
       this._openDrawerWithSettingsReaction,
       this._cleanupInvalidServiceReferences,
+      this._disableActionsForFreeUser,
     ]);
 
     getUserWorkspacesRequest.execute();
@@ -82,6 +87,7 @@ export default class WorkspacesStore extends FeatureStore {
   }
 
   stop() {
+    super.stop();
     debug('WorkspacesStore::stop');
     this.isFeatureActive = false;
     this.activeWorkspace = null;
@@ -273,4 +279,12 @@ export default class WorkspacesStore extends FeatureStore {
       getUserWorkspacesRequest.execute();
     }
   };
+
+  _disableActionsForFreeUser = () => {
+    if (!this.isUserAllowedToUseFeature) {
+      this._stopListeningToActions();
+    } else {
+      this._startListeningToActions();
+    }
+  }
 }
diff --git a/src/i18n/locales/defaultMessages.json b/src/i18n/locales/defaultMessages.json
index 1dd31324e..5ad7a8bd8 100644
--- a/src/i18n/locales/defaultMessages.json
+++ b/src/i18n/locales/defaultMessages.json
@@ -3088,7 +3088,7 @@
           "line": 14
         },
         "file": "src/features/announcements/Component.js",
-        "id": "feature.announcements.headline",
+        "id": "feature.announcements.changelog.headline",
         "start": {
           "column": 12,
           "line": 11
@@ -3106,7 +3106,7 @@
           "line": 14
         },
         "file": "src/features/announcements/components/AnnouncementScreen.js",
-        "id": "feature.announcements.headline",
+        "id": "feature.announcements.changelog.headline",
         "start": {
           "column": 12,
           "line": 11
@@ -4470,4 +4470,4 @@
     ],
     "path": "src/lib/Menu.json"
   }
-]
\ No newline at end of file
+]
diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json
index 13775d758..958b6fb6a 100644
--- a/src/i18n/locales/en-US.json
+++ b/src/i18n/locales/en-US.json
@@ -1,7 +1,7 @@
 {
   "app.errorHandler.action": "Reload",
   "app.errorHandler.headline": "Something went wrong",
-  "feature.announcements.headline": "What's new in Franz {version}?",
+  "feature.announcements.changelog.headline": "Changes in Franz {version}",
   "feature.delayApp.action": "Get a Franz Supporter License",
   "feature.delayApp.headline": "Please purchase a Franz Supporter License to skip waiting",
   "feature.delayApp.text": "Franz will continue in {seconds} seconds.",
@@ -44,7 +44,7 @@
   "login.submit.label": "Sign in",
   "login.tokenExpired": "Your session expired, please login again.",
   "menu.app.about": "About Franz",
-  "menu.app.announcement": "What's new in Franz?",
+  "menu.app.announcement": "What's new?",
   "menu.app.hide": "Hide",
   "menu.app.hideOthers": "Hide Others",
   "menu.app.quit": "Quit",
@@ -319,4 +319,4 @@
   "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/announcements/Component.json b/src/i18n/messages/src/features/announcements/Component.json
index 18e1b84c5..c31c35fc7 100644
--- a/src/i18n/messages/src/features/announcements/Component.json
+++ b/src/i18n/messages/src/features/announcements/Component.json
@@ -1,6 +1,6 @@
 [
   {
-    "id": "feature.announcements.headline",
+    "id": "feature.announcements.changelog.headline",
     "defaultMessage": "!!!What's new in Franz {version}?",
     "file": "src/features/announcements/Component.js",
     "start": {
@@ -12,4 +12,4 @@
       "column": 3
     }
   }
-]
\ No newline at end of file
+]
diff --git a/src/i18n/messages/src/features/announcements/components/AnnouncementScreen.json b/src/i18n/messages/src/features/announcements/components/AnnouncementScreen.json
index 225670ee2..874c9dd9d 100644
--- a/src/i18n/messages/src/features/announcements/components/AnnouncementScreen.json
+++ b/src/i18n/messages/src/features/announcements/components/AnnouncementScreen.json
@@ -1,14 +1,14 @@
 [
   {
-    "id": "feature.announcements.headline",
-    "defaultMessage": "!!!What's new in Franz {version}?",
+    "id": "feature.announcements.changelog.headline",
+    "defaultMessage": "!!!Changes in Franz {version}",
     "file": "src/features/announcements/components/AnnouncementScreen.js",
     "start": {
-      "line": 11,
+      "line": 13,
       "column": 12
     },
     "end": {
-      "line": 14,
+      "line": 16,
       "column": 3
     }
   }
diff --git a/src/i18n/messages/src/lib/Menu.json b/src/i18n/messages/src/lib/Menu.json
index f4cd35582..a2ce34cd4 100644
--- a/src/i18n/messages/src/lib/Menu.json
+++ b/src/i18n/messages/src/lib/Menu.json
@@ -4,11 +4,11 @@
     "defaultMessage": "!!!Edit",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 13,
+      "line": 14,
       "column": 8
     },
     "end": {
-      "line": 16,
+      "line": 17,
       "column": 3
     }
   },
@@ -17,11 +17,11 @@
     "defaultMessage": "!!!Undo",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 17,
+      "line": 18,
       "column": 8
     },
     "end": {
-      "line": 20,
+      "line": 21,
       "column": 3
     }
   },
@@ -30,11 +30,11 @@
     "defaultMessage": "!!!Redo",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 21,
+      "line": 22,
       "column": 8
     },
     "end": {
-      "line": 24,
+      "line": 25,
       "column": 3
     }
   },
@@ -43,11 +43,11 @@
     "defaultMessage": "!!!Cut",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 25,
+      "line": 26,
       "column": 7
     },
     "end": {
-      "line": 28,
+      "line": 29,
       "column": 3
     }
   },
@@ -56,11 +56,11 @@
     "defaultMessage": "!!!Copy",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 29,
+      "line": 30,
       "column": 8
     },
     "end": {
-      "line": 32,
+      "line": 33,
       "column": 3
     }
   },
@@ -69,11 +69,11 @@
     "defaultMessage": "!!!Paste",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 33,
+      "line": 34,
       "column": 9
     },
     "end": {
-      "line": 36,
+      "line": 37,
       "column": 3
     }
   },
@@ -82,11 +82,11 @@
     "defaultMessage": "!!!Paste And Match Style",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 37,
+      "line": 38,
       "column": 22
     },
     "end": {
-      "line": 40,
+      "line": 41,
       "column": 3
     }
   },
@@ -95,11 +95,11 @@
     "defaultMessage": "!!!Delete",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 41,
+      "line": 42,
       "column": 10
     },
     "end": {
-      "line": 44,
+      "line": 45,
       "column": 3
     }
   },
@@ -108,11 +108,11 @@
     "defaultMessage": "!!!Select All",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 45,
+      "line": 46,
       "column": 13
     },
     "end": {
-      "line": 48,
+      "line": 49,
       "column": 3
     }
   },
@@ -121,11 +121,11 @@
     "defaultMessage": "!!!Speech",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 49,
+      "line": 50,
       "column": 10
     },
     "end": {
-      "line": 52,
+      "line": 53,
       "column": 3
     }
   },
@@ -134,11 +134,11 @@
     "defaultMessage": "!!!Start Speaking",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 53,
+      "line": 54,
       "column": 17
     },
     "end": {
-      "line": 56,
+      "line": 57,
       "column": 3
     }
   },
@@ -147,11 +147,11 @@
     "defaultMessage": "!!!Stop Speaking",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 57,
+      "line": 58,
       "column": 16
     },
     "end": {
-      "line": 60,
+      "line": 61,
       "column": 3
     }
   },
@@ -160,11 +160,11 @@
     "defaultMessage": "!!!Start Dictation",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 61,
+      "line": 62,
       "column": 18
     },
     "end": {
-      "line": 64,
+      "line": 65,
       "column": 3
     }
   },
@@ -173,11 +173,11 @@
     "defaultMessage": "!!!Emoji & Symbols",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 65,
+      "line": 66,
       "column": 16
     },
     "end": {
-      "line": 68,
+      "line": 69,
       "column": 3
     }
   },
@@ -186,11 +186,11 @@
     "defaultMessage": "!!!Actual Size",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 69,
+      "line": 70,
       "column": 13
     },
     "end": {
-      "line": 72,
+      "line": 73,
       "column": 3
     }
   },
@@ -199,11 +199,11 @@
     "defaultMessage": "!!!Zoom In",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 73,
+      "line": 74,
       "column": 10
     },
     "end": {
-      "line": 76,
+      "line": 77,
       "column": 3
     }
   },
@@ -212,11 +212,11 @@
     "defaultMessage": "!!!Zoom Out",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 77,
+      "line": 78,
       "column": 11
     },
     "end": {
-      "line": 80,
+      "line": 81,
       "column": 3
     }
   },
@@ -225,11 +225,11 @@
     "defaultMessage": "!!!Enter Full Screen",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 81,
+      "line": 82,
       "column": 19
     },
     "end": {
-      "line": 84,
+      "line": 85,
       "column": 3
     }
   },
@@ -238,11 +238,11 @@
     "defaultMessage": "!!!Exit Full Screen",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 85,
+      "line": 86,
       "column": 18
     },
     "end": {
-      "line": 88,
+      "line": 89,
       "column": 3
     }
   },
@@ -251,11 +251,11 @@
     "defaultMessage": "!!!Toggle Full Screen",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 89,
+      "line": 90,
       "column": 20
     },
     "end": {
-      "line": 92,
+      "line": 93,
       "column": 3
     }
   },
@@ -264,11 +264,11 @@
     "defaultMessage": "!!!Toggle Developer Tools",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 93,
+      "line": 94,
       "column": 18
     },
     "end": {
-      "line": 96,
+      "line": 97,
       "column": 3
     }
   },
@@ -277,11 +277,11 @@
     "defaultMessage": "!!!Toggle Service Developer Tools",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 97,
+      "line": 98,
       "column": 25
     },
     "end": {
-      "line": 100,
+      "line": 101,
       "column": 3
     }
   },
@@ -290,11 +290,11 @@
     "defaultMessage": "!!!Reload Service",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 101,
+      "line": 102,
       "column": 17
     },
     "end": {
-      "line": 104,
+      "line": 105,
       "column": 3
     }
   },
@@ -303,11 +303,11 @@
     "defaultMessage": "!!!Reload Franz",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 105,
+      "line": 106,
       "column": 15
     },
     "end": {
-      "line": 108,
+      "line": 109,
       "column": 3
     }
   },
@@ -316,11 +316,11 @@
     "defaultMessage": "!!!Minimize",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 109,
+      "line": 110,
       "column": 12
     },
     "end": {
-      "line": 112,
+      "line": 113,
       "column": 3
     }
   },
@@ -329,11 +329,11 @@
     "defaultMessage": "!!!Close",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 113,
+      "line": 114,
       "column": 9
     },
     "end": {
-      "line": 116,
+      "line": 117,
       "column": 3
     }
   },
@@ -342,11 +342,11 @@
     "defaultMessage": "!!!Learn More",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 117,
+      "line": 118,
       "column": 13
     },
     "end": {
-      "line": 120,
+      "line": 121,
       "column": 3
     }
   },
@@ -355,11 +355,11 @@
     "defaultMessage": "!!!Changelog",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 121,
+      "line": 122,
       "column": 13
     },
     "end": {
-      "line": 124,
+      "line": 125,
       "column": 3
     }
   },
@@ -368,11 +368,11 @@
     "defaultMessage": "!!!Support",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 125,
+      "line": 126,
       "column": 11
     },
     "end": {
-      "line": 128,
+      "line": 129,
       "column": 3
     }
   },
@@ -381,11 +381,11 @@
     "defaultMessage": "!!!Terms of Service",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 129,
+      "line": 130,
       "column": 7
     },
     "end": {
-      "line": 132,
+      "line": 133,
       "column": 3
     }
   },
@@ -394,11 +394,11 @@
     "defaultMessage": "!!!Privacy Statement",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 133,
+      "line": 134,
       "column": 11
     },
     "end": {
-      "line": 136,
+      "line": 137,
       "column": 3
     }
   },
@@ -407,11 +407,11 @@
     "defaultMessage": "!!!File",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 137,
+      "line": 138,
       "column": 8
     },
     "end": {
-      "line": 140,
+      "line": 141,
       "column": 3
     }
   },
@@ -420,11 +420,11 @@
     "defaultMessage": "!!!View",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 141,
+      "line": 142,
       "column": 8
     },
     "end": {
-      "line": 144,
+      "line": 145,
       "column": 3
     }
   },
@@ -433,11 +433,11 @@
     "defaultMessage": "!!!Services",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 145,
+      "line": 146,
       "column": 12
     },
     "end": {
-      "line": 148,
+      "line": 149,
       "column": 3
     }
   },
@@ -446,11 +446,11 @@
     "defaultMessage": "!!!Window",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 149,
+      "line": 150,
       "column": 10
     },
     "end": {
-      "line": 152,
+      "line": 153,
       "column": 3
     }
   },
@@ -459,11 +459,11 @@
     "defaultMessage": "!!!Help",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 153,
+      "line": 154,
       "column": 8
     },
     "end": {
-      "line": 156,
+      "line": 157,
       "column": 3
     }
   },
@@ -472,24 +472,24 @@
     "defaultMessage": "!!!About Franz",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 157,
+      "line": 158,
       "column": 9
     },
     "end": {
-      "line": 160,
+      "line": 161,
       "column": 3
     }
   },
   {
     "id": "menu.app.announcement",
-    "defaultMessage": "!!!What's new in Franz?",
+    "defaultMessage": "!!!What's new?",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 161,
+      "line": 162,
       "column": 16
     },
     "end": {
-      "line": 164,
+      "line": 165,
       "column": 3
     }
   },
@@ -498,11 +498,11 @@
     "defaultMessage": "!!!Settings",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 165,
+      "line": 166,
       "column": 12
     },
     "end": {
-      "line": 168,
+      "line": 169,
       "column": 3
     }
   },
@@ -511,11 +511,11 @@
     "defaultMessage": "!!!Hide",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 169,
+      "line": 170,
       "column": 8
     },
     "end": {
-      "line": 172,
+      "line": 173,
       "column": 3
     }
   },
@@ -524,11 +524,11 @@
     "defaultMessage": "!!!Hide Others",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 173,
+      "line": 174,
       "column": 14
     },
     "end": {
-      "line": 176,
+      "line": 177,
       "column": 3
     }
   },
@@ -537,11 +537,11 @@
     "defaultMessage": "!!!Unhide",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 177,
+      "line": 178,
       "column": 10
     },
     "end": {
-      "line": 180,
+      "line": 181,
       "column": 3
     }
   },
@@ -550,11 +550,11 @@
     "defaultMessage": "!!!Quit",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 181,
+      "line": 182,
       "column": 8
     },
     "end": {
-      "line": 184,
+      "line": 185,
       "column": 3
     }
   },
@@ -563,11 +563,11 @@
     "defaultMessage": "!!!Add New Service...",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 185,
+      "line": 186,
       "column": 17
     },
     "end": {
-      "line": 188,
+      "line": 189,
       "column": 3
     }
   },
@@ -576,11 +576,11 @@
     "defaultMessage": "!!!Add New Workspace...",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 189,
+      "line": 190,
       "column": 19
     },
     "end": {
-      "line": 192,
+      "line": 193,
       "column": 3
     }
   },
@@ -589,11 +589,11 @@
     "defaultMessage": "!!!Open workspace drawer",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 193,
+      "line": 194,
       "column": 23
     },
     "end": {
-      "line": 196,
+      "line": 197,
       "column": 3
     }
   },
@@ -602,11 +602,11 @@
     "defaultMessage": "!!!Close workspace drawer",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 197,
+      "line": 198,
       "column": 24
     },
     "end": {
-      "line": 200,
+      "line": 201,
       "column": 3
     }
   },
@@ -615,11 +615,11 @@
     "defaultMessage": "!!!Activate next service...",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 201,
+      "line": 202,
       "column": 23
     },
     "end": {
-      "line": 204,
+      "line": 205,
       "column": 3
     }
   },
@@ -628,11 +628,11 @@
     "defaultMessage": "!!!Activate previous service...",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 205,
+      "line": 206,
       "column": 27
     },
     "end": {
-      "line": 208,
+      "line": 209,
       "column": 3
     }
   },
@@ -641,11 +641,11 @@
     "defaultMessage": "!!!Disable notifications & audio",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 209,
+      "line": 210,
       "column": 11
     },
     "end": {
-      "line": 212,
+      "line": 213,
       "column": 3
     }
   },
@@ -654,11 +654,11 @@
     "defaultMessage": "!!!Enable notifications & audio",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 213,
+      "line": 214,
       "column": 13
     },
     "end": {
-      "line": 216,
+      "line": 217,
       "column": 3
     }
   },
@@ -667,11 +667,11 @@
     "defaultMessage": "!!!Workspaces",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 217,
+      "line": 218,
       "column": 14
     },
     "end": {
-      "line": 220,
+      "line": 221,
       "column": 3
     }
   },
@@ -680,11 +680,11 @@
     "defaultMessage": "!!!Default",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 221,
+      "line": 222,
       "column": 20
     },
     "end": {
-      "line": 224,
+      "line": 225,
       "column": 3
     }
   }
diff --git a/src/lib/Menu.js b/src/lib/Menu.js
index 46a347237..3df06e05a 100644
--- a/src/lib/Menu.js
+++ b/src/lib/Menu.js
@@ -6,6 +6,7 @@ import { isMac, ctrlKey, cmdKey } from '../environment';
 import { GA_CATEGORY_WORKSPACES, workspaceStore } from '../features/workspaces/index';
 import { workspaceActions } from '../features/workspaces/actions';
 import { gaEvent } from './analytics';
+import announcementActions from '../features/announcements/actions';
 
 const { app, Menu, dialog } = remote;
 
@@ -160,7 +161,7 @@ const menuItems = defineMessages({
   },
   announcement: {
     id: 'menu.app.announcement',
-    defaultMessage: '!!!What\'s new in Franz?',
+    defaultMessage: '!!!What\'s new?',
   },
   settings: {
     id: 'menu.app.settings',
@@ -352,8 +353,10 @@ const _templateFactory = intl => [
         click() { shell.openExternal('https://meetfranz.com'); },
       },
       {
-        label: intl.formatMessage(menuItems.changelog),
-        click() { shell.openExternal('https://github.com/meetfranz/franz/blob/master/CHANGELOG.md'); },
+        label: intl.formatMessage(menuItems.announcement),
+        click: () => {
+          announcementActions.show();
+        },
       },
       {
         type: 'separator',
@@ -621,12 +624,6 @@ export default class FranzMenu {
           label: intl.formatMessage(menuItems.about),
           role: 'about',
         },
-        {
-          label: intl.formatMessage(menuItems.announcement),
-          click: () => {
-            this.actions.announcements.show();
-          },
-        },
         {
           type: 'separator',
         },
diff --git a/src/stores/index.js b/src/stores/index.js
index 96b844c95..1912418a2 100644
--- a/src/stores/index.js
+++ b/src/stores/index.js
@@ -10,6 +10,8 @@ import PaymentStore from './PaymentStore';
 import NewsStore from './NewsStore';
 import RequestStore from './RequestStore';
 import GlobalErrorStore from './GlobalErrorStore';
+import { workspaceStore } from '../features/workspaces';
+import { announcementsStore } from '../features/announcements';
 
 export default (api, actions, router) => {
   const stores = {};
@@ -27,6 +29,8 @@ export default (api, actions, router) => {
     news: new NewsStore(stores, api, actions),
     requests: new RequestStore(stores, api, actions),
     globalError: new GlobalErrorStore(stores, api, actions),
+    workspaces: workspaceStore,
+    announcements: announcementsStore,
   });
   // Initialize all stores
   Object.keys(stores).forEach((name) => {
-- 
cgit v1.2.3-54-g00ecf


From 6a6f3fbc65077ac68d76382c4e76afc6cc6ed4b1 Mon Sep 17 00:00:00 2001
From: Stefan Malzner <stefan@adlk.io>
Date: Thu, 11 Apr 2019 21:25:07 +0200
Subject: Finalize styling

---
 package-lock.json                                  | 230 ++++++++++-----------
 packages/theme/src/themes/dark/index.ts            |  10 +-
 packages/theme/src/themes/default/index.ts         |   8 +
 .../announcements/components/AnnouncementScreen.js | 124 +++++++++--
 .../components/AnnouncementScreen.json             |   4 +-
 5 files changed, 244 insertions(+), 132 deletions(-)

(limited to 'packages/theme/src/themes/dark/index.ts')

diff --git a/package-lock.json b/package-lock.json
index 600d4b7d7..33f7d69f2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1442,7 +1442,7 @@
     "@lerna/get-packed": {
       "version": "3.7.0",
       "resolved": "https://registry.npmjs.org/@lerna/get-packed/-/get-packed-3.7.0.tgz",
-      "integrity": "sha1-VJx3OPe+XjsUM+gu2c2pEjvNHtU=",
+      "integrity": "sha512-yuFtjsUZIHjeIvIYQ/QuytC+FQcHwo3peB+yGBST2uWCLUCR5rx6knoQcPzbxdFDCuUb5IFccFGd3B1fHFg3RQ==",
       "dev": true,
       "requires": {
         "fs-extra": "^7.0.0",
@@ -1567,7 +1567,7 @@
     "@lerna/npm-conf": {
       "version": "3.7.0",
       "resolved": "https://registry.npmjs.org/@lerna/npm-conf/-/npm-conf-3.7.0.tgz",
-      "integrity": "sha1-8QHU/fB8788RYbz688DxBbQgpFA=",
+      "integrity": "sha512-+WSMDfPKcKzMfqq283ydz9RRpOU6p9wfx0wy4hVSUY/6YUpsyuk8SShjcRtY8zTM5AOrxvFBuuV90H4YpZ5+Ng==",
       "dev": true,
       "requires": {
         "config-chain": "^1.1.11",
@@ -1823,7 +1823,7 @@
     "@lerna/run-parallel-batches": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/@lerna/run-parallel-batches/-/run-parallel-batches-3.0.0.tgz",
-      "integrity": "sha1-RocEk0CEx0mR0xJNgGB4V9TfqEA=",
+      "integrity": "sha512-Mj1ravlXF7AkkewKd9YFq9BtVrsStNrvVLedD/b2wIVbNqcxp8lS68vehXVOzoL/VWNEDotvqCQtyDBilCodGw==",
       "dev": true,
       "requires": {
         "p-map": "^1.2.0",
@@ -1945,7 +1945,7 @@
       "requires": {
         "@mdi/js": "^3.3.92",
         "@mdi/react": "^1.1.0",
-        "@meetfranz/theme": "^1.0.7",
+        "@meetfranz/theme": "^1.0.13",
         "react-html-attributes": "^1.4.3",
         "react-loader": "^2.4.5"
       }
@@ -1961,14 +1961,14 @@
       "requires": {
         "@mdi/js": "^3.3.92",
         "@mdi/react": "^1.1.0",
-        "@meetfranz/theme": "^1.0.7",
+        "@meetfranz/theme": "^1.0.13",
         "react-loader": "^2.4.5"
       }
     },
     "@mrmlnc/readdir-enhanced": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz",
-      "integrity": "sha1-UkryQNGjYFJ7cwR17PoTRKpUDd4=",
+      "integrity": "sha512-bPHp6Ji8b41szTOcaP63VlnbbO5Ny6dwAATtY6JTjh5N2OLrb5Qk/Th5cRkRQhkWCt+EJsYrNB0MiL+Gpn6e3g==",
       "dev": true,
       "requires": {
         "call-me-maybe": "^1.0.1",
@@ -1978,7 +1978,7 @@
     "@nodelib/fs.stat": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-1.1.3.tgz",
-      "integrity": "sha1-K1o6s/kYzKSKjHVMCBaOPwPrphs=",
+      "integrity": "sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw==",
       "dev": true
     },
     "@octokit/endpoint": {
@@ -2355,7 +2355,7 @@
       "dependencies": {
         "mime-types": {
           "version": "1.0.2",
-          "resolved": "http://registry.npmjs.org/mime-types/-/mime-types-1.0.2.tgz",
+          "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-1.0.2.tgz",
           "integrity": "sha1-mVrhOSq4r/y/yyZB3QVOlDwNXc4=",
           "dev": true
         }
@@ -2413,7 +2413,7 @@
     "agent-base": {
       "version": "4.2.1",
       "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-4.2.1.tgz",
-      "integrity": "sha1-2J5ZmfeXh1Z0wH2H8mD8Qeg+jKk=",
+      "integrity": "sha512-JVwXMr9nHYTUXsBFKUqhJwvlcYU/blreOEUkhNR2eXZIvwd+c+o5V4MgDPKWnMS/56awN3TRzIP+KoPn+roQtg==",
       "dev": true,
       "requires": {
         "es6-promisify": "^5.0.0"
@@ -2422,7 +2422,7 @@
     "agentkeepalive": {
       "version": "3.5.2",
       "resolved": "https://registry.npmjs.org/agentkeepalive/-/agentkeepalive-3.5.2.tgz",
-      "integrity": "sha1-oROSTdP6JKC8O3gQjEUMKr7gD2c=",
+      "integrity": "sha512-e0L/HNe6qkQ7H19kTlRRqUibEAwDK5AFk6y3PtMsuut2VAH6+Q4xZml1tNDJD7kSAyqmbG/K08K5WEJYtUrSlQ==",
       "dev": true,
       "requires": {
         "humanize-ms": "^1.2.1"
@@ -2469,7 +2469,7 @@
     },
     "ansi-colors": {
       "version": "1.1.0",
-      "resolved": "http://registry.npmjs.org/ansi-colors/-/ansi-colors-1.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-1.1.0.tgz",
       "integrity": "sha512-SFKX67auSNoVR38N3L+nvsPjOE0bybKTYbkf5tRvushrAPQ9V75huw0ZxBkKVeRU9kqH3d6HA4xTckbwZ4ixmA==",
       "dev": true,
       "requires": {
@@ -2900,7 +2900,7 @@
         },
         "util": {
           "version": "0.10.3",
-          "resolved": "http://registry.npmjs.org/util/-/util-0.10.3.tgz",
+          "resolved": "https://registry.npmjs.org/util/-/util-0.10.3.tgz",
           "integrity": "sha1-evsa/lCAUkZInj23/g7TeTNqwPk=",
           "dev": true,
           "requires": {
@@ -2935,7 +2935,7 @@
     },
     "async": {
       "version": "0.1.22",
-      "resolved": "http://registry.npmjs.org/async/-/async-0.1.22.tgz",
+      "resolved": "https://registry.npmjs.org/async/-/async-0.1.22.tgz",
       "integrity": "sha1-D8GqoIig4+8Ovi2IMbqw3PiEUGE="
     },
     "async-done": {
@@ -3758,7 +3758,7 @@
     "byte-size": {
       "version": "4.0.4",
       "resolved": "https://registry.npmjs.org/byte-size/-/byte-size-4.0.4.tgz",
-      "integrity": "sha1-KdOBcJ9BquDYnGMfHIGuyIzUCyM=",
+      "integrity": "sha512-82RPeneC6nqCdSwCX2hZUz3JPOvN5at/nTEw/CMf05Smu3Hrpo9Psb7LjN+k+XndNArG1EY8L4+BM3aTM4BCvw==",
       "dev": true
     },
     "bytes": {
@@ -3770,7 +3770,7 @@
     "cacache": {
       "version": "11.3.2",
       "resolved": "https://registry.npmjs.org/cacache/-/cacache-11.3.2.tgz",
-      "integrity": "sha1-LYHjCOPSWMo4Eltna5iyrJzmm/o=",
+      "integrity": "sha512-E0zP4EPGDOaT2chM08Als91eYnf8Z+eH1awwwVsngUmgppfM5jjJ8l3z5vO5p5w/I3LsiXawb1sW0VY65pQABg==",
       "dev": true,
       "requires": {
         "bluebird": "^3.5.3",
@@ -3792,7 +3792,7 @@
         "lru-cache": {
           "version": "5.1.1",
           "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
-          "integrity": "sha1-HaJ+ZxAnGUdpXa9oSOhH8B2EuSA=",
+          "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
           "dev": true,
           "requires": {
             "yallist": "^3.0.2"
@@ -4489,7 +4489,7 @@
     "config-chain": {
       "version": "1.1.12",
       "resolved": "https://registry.npmjs.org/config-chain/-/config-chain-1.1.12.tgz",
-      "integrity": "sha1-D96NCRIA616AjK8l/mGMAvSOTvo=",
+      "integrity": "sha512-a1eOIcu8+7lUInge4Rpf/n4Krkf3Dd9lqhljRzII1/Zno/kRtUWnznPO3jOKBmTEktkt3fkxisUcivoj0ebzoA==",
       "dev": true,
       "requires": {
         "ini": "^1.3.4",
@@ -4535,7 +4535,7 @@
       "dependencies": {
         "debug": {
           "version": "1.0.4",
-          "resolved": "http://registry.npmjs.org/debug/-/debug-1.0.4.tgz",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-1.0.4.tgz",
           "integrity": "sha1-W5wla9VLbsAigxdvqKDt5tFUy/g=",
           "dev": true,
           "requires": {
@@ -4805,7 +4805,7 @@
     "conventional-recommended-bump": {
       "version": "4.0.4",
       "resolved": "https://registry.npmjs.org/conventional-recommended-bump/-/conventional-recommended-bump-4.0.4.tgz",
-      "integrity": "sha1-BVQFhGQdPadYyIY8CXiPyutYaHI=",
+      "integrity": "sha512-9mY5Yoblq+ZMqJpBzgS+RpSq+SUfP2miOR3H/NR9drGf08WCrY9B6HAGJZEm6+ThsVP917VHAahSOjM6k1vhPg==",
       "dev": true,
       "requires": {
         "concat-stream": "^1.6.0",
@@ -4896,7 +4896,7 @@
     "copy-concurrently": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/copy-concurrently/-/copy-concurrently-1.0.5.tgz",
-      "integrity": "sha1-kilzmMrjSTf8r9bsgTnBgFHwteA=",
+      "integrity": "sha512-f2domd9fsVDFtaFcbaRZuYXwtdmnzqbADSwhSWYxYB/Q8zsdUUFMXVRwXGDMWmbEzAn1kdRrtI1T/KTFOL4X2A==",
       "dev": true,
       "requires": {
         "aproba": "^1.1.1",
@@ -5477,7 +5477,7 @@
     "diff": {
       "version": "3.5.0",
       "resolved": "https://registry.npmjs.org/diff/-/diff-3.5.0.tgz",
-      "integrity": "sha1-gAwN0eCov7yVg1wgKtIg/jF+WhI=",
+      "integrity": "sha512-A46qtFgd+g7pDZinpnwiRJtxbC1hpgf0uzP3iG89scHk0AUC7A1TGxf5OiiOUv/JMZR8GOt8hL900hV0bOy5xA==",
       "dev": true
     },
     "diffie-hellman": {
@@ -5494,7 +5494,7 @@
     "dir-glob": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-2.0.0.tgz",
-      "integrity": "sha1-CyBdK2rvmCOMooZZioIE0p0KADQ=",
+      "integrity": "sha512-37qirFDz8cA5fimp9feo43fSuRo2gHwaIn6dXL8Ber1dGwUosDrGZeCCXq57WnIqE4aQ+u3eQZzsk1yOzhdwag==",
       "dev": true,
       "requires": {
         "arrify": "^1.0.1",
@@ -5579,7 +5579,7 @@
       "dependencies": {
         "domelementtype": {
           "version": "1.1.3",
-          "resolved": "http://registry.npmjs.org/domelementtype/-/domelementtype-1.1.3.tgz",
+          "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-1.1.3.tgz",
           "integrity": "sha1-vSh3PiZCiBrsUVRJJCmcXNgiGFs="
         }
       }
@@ -5623,7 +5623,7 @@
     },
     "dotenv": {
       "version": "4.0.0",
-      "resolved": "http://registry.npmjs.org/dotenv/-/dotenv-4.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-4.0.0.tgz",
       "integrity": "sha1-hk7xN5rO1Vzm+V3r7NzhefegzR0=",
       "dev": true
     },
@@ -5643,7 +5643,7 @@
     },
     "duplexer": {
       "version": "0.1.1",
-      "resolved": "http://registry.npmjs.org/duplexer/-/duplexer-0.1.1.tgz",
+      "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.1.tgz",
       "integrity": "sha1-rOb/gIwc5mtX0ev5eXessCM0z8E=",
       "dev": true
     },
@@ -5977,7 +5977,7 @@
         },
         "readable-stream": {
           "version": "1.1.14",
-          "resolved": "http://registry.npmjs.org/readable-stream/-/readable-stream-1.1.14.tgz",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.1.14.tgz",
           "integrity": "sha1-fPTFTvZI44EwhMY23SB54WbAgdk=",
           "dev": true,
           "requires": {
@@ -6507,7 +6507,7 @@
         },
         "debug": {
           "version": "2.3.3",
-          "resolved": "http://registry.npmjs.org/debug/-/debug-2.3.3.tgz",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-2.3.3.tgz",
           "integrity": "sha1-QMRT5n5uE8kB3ewxeviYbNqe/4w=",
           "dev": true,
           "requires": {
@@ -6516,7 +6516,7 @@
         },
         "ms": {
           "version": "0.7.2",
-          "resolved": "http://registry.npmjs.org/ms/-/ms-0.7.2.tgz",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-0.7.2.tgz",
           "integrity": "sha1-riXPJRKziFodldfwN4aNhDESR2U=",
           "dev": true
         },
@@ -6550,7 +6550,7 @@
       "dependencies": {
         "debug": {
           "version": "2.3.3",
-          "resolved": "http://registry.npmjs.org/debug/-/debug-2.3.3.tgz",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-2.3.3.tgz",
           "integrity": "sha1-QMRT5n5uE8kB3ewxeviYbNqe/4w=",
           "dev": true,
           "requires": {
@@ -6559,7 +6559,7 @@
         },
         "ms": {
           "version": "0.7.2",
-          "resolved": "http://registry.npmjs.org/ms/-/ms-0.7.2.tgz",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-0.7.2.tgz",
           "integrity": "sha1-riXPJRKziFodldfwN4aNhDESR2U=",
           "dev": true
         }
@@ -6683,12 +6683,12 @@
     "es6-promise": {
       "version": "4.2.5",
       "resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-4.2.5.tgz",
-      "integrity": "sha1-2m0NVpLvtGHggsFIF/4kJ9j10FQ=",
+      "integrity": "sha512-n6wvpdE43VFtJq+lUDYDBFUwV8TZbuGXLV4D6wKafg13ldznKsyEvatubnmUe31zcvelSzOHF+XbaT+Bl9ObDg==",
       "dev": true
     },
     "es6-promisify": {
       "version": "5.0.0",
-      "resolved": "http://registry.npmjs.org/es6-promisify/-/es6-promisify-5.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/es6-promisify/-/es6-promisify-5.0.0.tgz",
       "integrity": "sha1-UQnWLz5W6pZ8S2NQWu8IKRyKUgM=",
       "dev": true,
       "requires": {
@@ -6895,7 +6895,7 @@
         },
         "load-json-file": {
           "version": "2.0.0",
-          "resolved": "http://registry.npmjs.org/load-json-file/-/load-json-file-2.0.0.tgz",
+          "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-2.0.0.tgz",
           "integrity": "sha1-eUfkIUmvgNaWy/eXvKq8/h/inKg=",
           "dev": true,
           "requires": {
@@ -7378,7 +7378,7 @@
         },
         "finalhandler": {
           "version": "1.1.1",
-          "resolved": "http://registry.npmjs.org/finalhandler/-/finalhandler-1.1.1.tgz",
+          "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.1.tgz",
           "integrity": "sha512-Y1GUDo39ez4aHAw7MysnUD5JzYX+WaIj8I57kO3aEPT1fFRL4sr7mjei97FgnwhAyyzRYmQZaTHb2+9uZ1dPtg==",
           "dev": true,
           "requires": {
@@ -7706,7 +7706,7 @@
     "figgy-pudding": {
       "version": "3.5.1",
       "resolved": "https://registry.npmjs.org/figgy-pudding/-/figgy-pudding-3.5.1.tgz",
-      "integrity": "sha1-hiRwESkBxyeg5JWoB0S9W6odZ5A=",
+      "integrity": "sha512-vNKxJHTEKNThjfrdJwHc7brvM6eVevuO5nTj6ez8ZQ1qbXTvGthucRF7S4vf2cr71QVnT70V34v0S1DyQsti0w==",
       "dev": true
     },
     "figures": {
@@ -7764,7 +7764,7 @@
     },
     "finalhandler": {
       "version": "0.1.0",
-      "resolved": "http://registry.npmjs.org/finalhandler/-/finalhandler-0.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-0.1.0.tgz",
       "integrity": "sha1-2gW7xPX0owyEzh2R88FUAHxOnao=",
       "dev": true,
       "requires": {
@@ -7774,7 +7774,7 @@
       "dependencies": {
         "debug": {
           "version": "1.0.4",
-          "resolved": "http://registry.npmjs.org/debug/-/debug-1.0.4.tgz",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-1.0.4.tgz",
           "integrity": "sha1-W5wla9VLbsAigxdvqKDt5tFUy/g=",
           "dev": true,
           "requires": {
@@ -7783,7 +7783,7 @@
         },
         "ms": {
           "version": "0.6.2",
-          "resolved": "http://registry.npmjs.org/ms/-/ms-0.6.2.tgz",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-0.6.2.tgz",
           "integrity": "sha1-2JwhJMb9wTU9Zai3e/GqxLGTcIw=",
           "dev": true
         }
@@ -8386,7 +8386,7 @@
     "genfun": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/genfun/-/genfun-5.0.0.tgz",
-      "integrity": "sha1-ndlxCgaQClxKW/V6yl2k5S/nZTc=",
+      "integrity": "sha512-KGDOARWVga7+rnB3z9Sd2Letx515owfk0hSxHGuqjANb1M+x2bGZGqHLiozPsYMdM2OubeMni/Hpwmjq6qIUhA==",
       "dev": true
     },
     "get-caller-file": {
@@ -8925,7 +8925,7 @@
     },
     "got": {
       "version": "6.7.1",
-      "resolved": "http://registry.npmjs.org/got/-/got-6.7.1.tgz",
+      "resolved": "https://registry.npmjs.org/got/-/got-6.7.1.tgz",
       "integrity": "sha1-JAzQV4WpoY5WHcG0S0HHY+8ejbA=",
       "dev": true,
       "requires": {
@@ -9507,7 +9507,7 @@
         },
         "yargs": {
           "version": "3.32.0",
-          "resolved": "http://registry.npmjs.org/yargs/-/yargs-3.32.0.tgz",
+          "resolved": "https://registry.npmjs.org/yargs/-/yargs-3.32.0.tgz",
           "integrity": "sha1-AwiOnr+edWtpdRYR0qXvWRSCyZU=",
           "dev": true,
           "requires": {
@@ -9682,7 +9682,7 @@
             },
             "lodash": {
               "version": "1.0.2",
-              "resolved": "http://registry.npmjs.org/lodash/-/lodash-1.0.2.tgz",
+              "resolved": "https://registry.npmjs.org/lodash/-/lodash-1.0.2.tgz",
               "integrity": "sha1-j1dWDIO1n8JwvT1WG2kAQ0MOJVE=",
               "dev": true
             },
@@ -9742,7 +9742,7 @@
         },
         "readable-stream": {
           "version": "1.0.34",
-          "resolved": "http://registry.npmjs.org/readable-stream/-/readable-stream-1.0.34.tgz",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.34.tgz",
           "integrity": "sha1-Elgg40vIQtLyqq+v5MKRbuMsFXw=",
           "dev": true,
           "requires": {
@@ -10323,7 +10323,7 @@
     "http-cache-semantics": {
       "version": "3.8.1",
       "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-3.8.1.tgz",
-      "integrity": "sha1-ObDhat2bYFvwqe89nar0hDtMrNI=",
+      "integrity": "sha512-5ai2iksyV8ZXmnZhHH4rWPoxxistEexSi5936zIQ1bnNTW5VnA85B6P/VpXiRM017IgRvb2kKo1a//y+0wSp3w==",
       "dev": true
     },
     "http-deceiver": {
@@ -10334,7 +10334,7 @@
     },
     "http-errors": {
       "version": "1.6.3",
-      "resolved": "http://registry.npmjs.org/http-errors/-/http-errors-1.6.3.tgz",
+      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.6.3.tgz",
       "integrity": "sha1-i1VoC7S+KDoLW/TqLjhYC+HZMg0=",
       "dev": true,
       "requires": {
@@ -10372,7 +10372,7 @@
     "http-proxy-agent": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-2.1.0.tgz",
-      "integrity": "sha1-5IIb7vWyFCogJr1zkm/lN2McVAU=",
+      "integrity": "sha512-qwHbBLV7WviBl0rQsOzH6o5lwyOIvwp/BdFnvVxXORldu5TmjFfjzBcWUWS5kWAZhmv+JtiDhSuQCp4sBfbIgg==",
       "dev": true,
       "requires": {
         "agent-base": "4",
@@ -10382,7 +10382,7 @@
         "debug": {
           "version": "3.1.0",
           "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
-          "integrity": "sha1-W7WgZyYotkFJVmuhaBnmFRjGcmE=",
+          "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
           "dev": true,
           "requires": {
             "ms": "2.0.0"
@@ -10430,7 +10430,7 @@
     "https-proxy-agent": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-2.2.1.tgz",
-      "integrity": "sha1-UVUpcPoE1yPgTFbQQXjD+SWSu8A=",
+      "integrity": "sha512-HPCTS1LW51bcyMYbxUIOO4HEOlQ1/1qRaFWcyxvwaqUS9TY88aoEuHUY33kuAh1YhVVaDQhLZsnPd+XNARWZlQ==",
       "dev": true,
       "requires": {
         "agent-base": "^4.1.0",
@@ -10440,7 +10440,7 @@
         "debug": {
           "version": "3.2.6",
           "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.6.tgz",
-          "integrity": "sha1-6D0X3hbYp++3cX7b5fsQE17uYps=",
+          "integrity": "sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==",
           "dev": true,
           "requires": {
             "ms": "^2.1.1"
@@ -10449,7 +10449,7 @@
         "ms": {
           "version": "2.1.1",
           "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.1.tgz",
-          "integrity": "sha1-MKWGTrPrsKZvLr5tcnrwagnYbgo=",
+          "integrity": "sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg==",
           "dev": true
         }
       }
@@ -10465,7 +10465,7 @@
     },
     "hunspell-asm": {
       "version": "1.0.2",
-      "resolved": "http://registry.npmjs.org/hunspell-asm/-/hunspell-asm-1.0.2.tgz",
+      "resolved": "https://registry.npmjs.org/hunspell-asm/-/hunspell-asm-1.0.2.tgz",
       "integrity": "sha512-UTLBvc0yZiIcHl9qrgxnFTZbX3zF4CprzEY+u+N0iXlUKZnUJRIgvgppTdgiQTsucm5b0aN/rHsgXz2q/0kBRA==",
       "requires": {
         "emscripten-wasm-loader": "^1.0.0",
@@ -10543,7 +10543,7 @@
     "ignore-walk": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/ignore-walk/-/ignore-walk-3.0.1.tgz",
-      "integrity": "sha1-qD5i59JyrA47VRqqgoMaGbafgvg=",
+      "integrity": "sha512-DTVlMx3IYPe0/JJcYP7Gxg7ttZZu3IInhuEhbchuqneY9wWe5Ojy2mXLBaQFUQmo0AW2r3qG7m1mg86js+gnlQ==",
       "dev": true,
       "requires": {
         "minimatch": "^3.0.4"
@@ -10585,7 +10585,7 @@
     "import-local": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/import-local/-/import-local-1.0.0.tgz",
-      "integrity": "sha1-Xk/9wD9P5sAJxnKb6yljHC+CJ7w=",
+      "integrity": "sha512-vAaZHieK9qjGo58agRBg+bhHX3hoTZU/Oa3GESWLz7t1U62fk63aHuDJJEteXoDeTCcPmUT+z38gkHPZkkmpmQ==",
       "dev": true,
       "requires": {
         "pkg-dir": "^2.0.0",
@@ -10649,7 +10649,7 @@
     "init-package-json": {
       "version": "1.10.3",
       "resolved": "https://registry.npmjs.org/init-package-json/-/init-package-json-1.10.3.tgz",
-      "integrity": "sha1-Rf/i9hCoyhNPK9HbVjeyNQcPbL4=",
+      "integrity": "sha512-zKSiXKhQveNteyhcj1CoOP8tqp1QuxPIPBl8Bid99DGLFqA1p87M6lNgfjJHSBoWJJlidGOv5rWjyYKEB3g2Jw==",
       "dev": true,
       "requires": {
         "glob": "^7.1.1",
@@ -10753,7 +10753,7 @@
     "inversify": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/inversify/-/inversify-5.0.1.tgz",
-      "integrity": "sha1-UA1wmxQ0iWzloNWJFcSkIQ40+24=",
+      "integrity": "sha512-Ieh06s48WnEYGcqHepdsJUIJUXpwH5o5vodAX+DK2JA/gjy4EbEcQZxw+uFfzysmKjiLXGYwNG3qDZsKVMcINQ==",
       "dev": true
     },
     "invert-kv": {
@@ -10782,7 +10782,7 @@
     },
     "is": {
       "version": "0.3.0",
-      "resolved": "http://registry.npmjs.org/is/-/is-0.3.0.tgz",
+      "resolved": "https://registry.npmjs.org/is/-/is-0.3.0.tgz",
       "integrity": "sha1-qPcd/IpuKDcWJ/JskpCYxvTV1dc=",
       "dev": true
     },
@@ -11006,7 +11006,7 @@
     },
     "is-obj": {
       "version": "1.0.1",
-      "resolved": "http://registry.npmjs.org/is-obj/-/is-obj-1.0.1.tgz",
+      "resolved": "https://registry.npmjs.org/is-obj/-/is-obj-1.0.1.tgz",
       "integrity": "sha1-PkcprB9f3gJc19g6iW2rn09n2w8=",
       "dev": true
     },
@@ -11188,7 +11188,7 @@
     },
     "isemail": {
       "version": "1.2.0",
-      "resolved": "http://registry.npmjs.org/isemail/-/isemail-1.2.0.tgz",
+      "resolved": "https://registry.npmjs.org/isemail/-/isemail-1.2.0.tgz",
       "integrity": "sha1-vgPfjMPineTSxd9lASY/H6RZXpo="
     },
     "isexe": {
@@ -11219,7 +11219,7 @@
     },
     "joi": {
       "version": "6.10.1",
-      "resolved": "http://registry.npmjs.org/joi/-/joi-6.10.1.tgz",
+      "resolved": "https://registry.npmjs.org/joi/-/joi-6.10.1.tgz",
       "integrity": "sha1-TVDDGAeRIgAP5fFq8f+OGRe3fgY=",
       "requires": {
         "hoek": "2.x.x",
@@ -11626,7 +11626,7 @@
     "libnpmaccess": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/libnpmaccess/-/libnpmaccess-3.0.1.tgz",
-      "integrity": "sha1-Wzqd5iHyk9QlGRqi53kQL4QWf6g=",
+      "integrity": "sha512-RlZ7PNarCBt+XbnP7R6PoVgOq9t+kou5rvhaInoNibhPO7eMlRfS0B8yjatgn2yaHIwWNyoJDolC/6Lc5L/IQA==",
       "dev": true,
       "requires": {
         "aproba": "^2.0.0",
@@ -11638,7 +11638,7 @@
         "aproba": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/aproba/-/aproba-2.0.0.tgz",
-          "integrity": "sha1-UlILiuW1aSFbNU78DKo/4eRaitw=",
+          "integrity": "sha512-lYe4Gx7QT+MKGbDsA+Z+he/Wtef0BiwDOlK/XkBrdfsh9J/jPPXbX0tE9x9cl27Tmu5gg3QUbUrQYa/y+KOHPQ==",
           "dev": true
         }
       }
@@ -12084,7 +12084,7 @@
     "make-fetch-happen": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/make-fetch-happen/-/make-fetch-happen-4.0.1.tgz",
-      "integrity": "sha1-FBSXy4ePJDupMTbIPYq6EsIWwIM=",
+      "integrity": "sha512-7R5ivfy9ilRJ1EMKIOziwrns9fGeAD4bAha8EB7BIiBBLHm2KeTUGCrICFt2rbHfzheTLynv50GnNTK1zDTrcQ==",
       "dev": true,
       "requires": {
         "agentkeepalive": "^3.4.1",
@@ -12180,7 +12180,7 @@
     },
     "media-typer": {
       "version": "0.3.0",
-      "resolved": "http://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
+      "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
       "integrity": "sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g=",
       "dev": true
     },
@@ -12271,7 +12271,7 @@
         },
         "readable-stream": {
           "version": "1.0.34",
-          "resolved": "http://registry.npmjs.org/readable-stream/-/readable-stream-1.0.34.tgz",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.34.tgz",
           "integrity": "sha1-Elgg40vIQtLyqq+v5MKRbuMsFXw=",
           "dev": true,
           "requires": {
@@ -12302,7 +12302,7 @@
     "merge2": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.2.3.tgz",
-      "integrity": "sha1-fumdvWm7ZIFoklPwGEiKG5ArDtU=",
+      "integrity": "sha512-gdUU1Fwj5ep4kplwcmftruWofEFt6lfpkkr3h860CXbAB9c3hGb55EOL2ali0Td5oebvW0E1+3Sr+Ur7XfKpRA==",
       "dev": true
     },
     "methods": {
@@ -12396,7 +12396,7 @@
     },
     "minimist": {
       "version": "1.2.0",
-      "resolved": "http://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
       "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=",
       "dev": true
     },
@@ -12430,7 +12430,7 @@
     "mississippi": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/mississippi/-/mississippi-3.0.0.tgz",
-      "integrity": "sha1-6goykfl+C16HdrNj1fChLZTGcCI=",
+      "integrity": "sha512-x471SsVjUtBRtcvd4BzKE9kFC+/2TeWgKCgw0bZcw1b9l2X3QX5vCWgF+KaZaYm87Ss//rHnWryupDrgLvmSkA==",
       "dev": true,
       "requires": {
         "concat-stream": "^1.5.0",
@@ -12468,7 +12468,7 @@
     },
     "mkdirp": {
       "version": "0.5.1",
-      "resolved": "http://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
+      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
       "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
       "requires": {
         "minimist": "0.0.8"
@@ -12476,7 +12476,7 @@
       "dependencies": {
         "minimist": {
           "version": "0.0.8",
-          "resolved": "http://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
+          "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
           "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0="
         }
       }
@@ -12648,7 +12648,7 @@
     },
     "multimatch": {
       "version": "2.1.0",
-      "resolved": "http://registry.npmjs.org/multimatch/-/multimatch-2.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/multimatch/-/multimatch-2.1.0.tgz",
       "integrity": "sha1-nHkGoi+0wCkZ4vX3UWG0zb1LKis=",
       "dev": true,
       "requires": {
@@ -12786,7 +12786,7 @@
     "node-fetch-npm": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/node-fetch-npm/-/node-fetch-npm-2.0.2.tgz",
-      "integrity": "sha1-cljJBGGC3KNFtCCO2pGNrzNpf/c=",
+      "integrity": "sha512-nJIxm1QmAj4v3nfCvEeCrYSoVwXyxLnaPBK5W1W5DGEJwjlKuC2VEUycGw5oxk+4zZahRrB84PUJJgEmhFTDFw==",
       "dev": true,
       "requires": {
         "encoding": "^0.1.11",
@@ -12822,7 +12822,7 @@
       "dependencies": {
         "semver": {
           "version": "5.3.0",
-          "resolved": "http://registry.npmjs.org/semver/-/semver-5.3.0.tgz",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-5.3.0.tgz",
           "integrity": "sha1-myzl094C0XxgEq0yaqa00M9U+U8=",
           "dev": true
         },
@@ -14000,7 +14000,7 @@
     "p-map": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/p-map/-/p-map-1.2.0.tgz",
-      "integrity": "sha1-5OlPMR6rvIYzoeeZCBZfyiYkG2s=",
+      "integrity": "sha512-r6zKACMNhjPJMTl8KcFH4li//gkrXWfbD6feV8l6doRHlzljFWGJ2AP6iKaCJXyZmAUMOPtvbW7EXkbWO/pLEA==",
       "dev": true
     },
     "p-map-series": {
@@ -14173,7 +14173,7 @@
       "dependencies": {
         "color-convert": {
           "version": "0.5.3",
-          "resolved": "http://registry.npmjs.org/color-convert/-/color-convert-0.5.3.tgz",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-0.5.3.tgz",
           "integrity": "sha1-vbbGnOZg+t/+CwAHzER+G59ygr0=",
           "dev": true
         }
@@ -14318,7 +14318,7 @@
     },
     "path-browserify": {
       "version": "0.0.0",
-      "resolved": "http://registry.npmjs.org/path-browserify/-/path-browserify-0.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/path-browserify/-/path-browserify-0.0.0.tgz",
       "integrity": "sha1-oLhwcpquIUAFt9UDLsLLuw+0RRo=",
       "dev": true
     },
@@ -14597,7 +14597,7 @@
     },
     "pretty-hrtime": {
       "version": "1.0.3",
-      "resolved": "http://registry.npmjs.org/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz",
+      "resolved": "https://registry.npmjs.org/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz",
       "integrity": "sha1-t+PqQkNaTJsnWdmeDyAesZWALuE=",
       "dev": true
     },
@@ -14743,7 +14743,7 @@
     "protoduck": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/protoduck/-/protoduck-5.0.1.tgz",
-      "integrity": "sha1-A8NlnKGAB7aaUP2Cp+vMUWJhFR8=",
+      "integrity": "sha512-WxoCeDCoCBY55BMvj4cAEjdVUFGRWed9ZxPlqTKYyw1nDDTQ4pqmnIMAGfJlg7Dx35uB/M+PHJPTmGOvaCaPTg==",
       "dev": true,
       "requires": {
         "genfun": "^5.0.0"
@@ -15103,7 +15103,7 @@
     },
     "react-router": {
       "version": "3.2.1",
-      "resolved": "http://registry.npmjs.org/react-router/-/react-router-3.2.1.tgz",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-3.2.1.tgz",
       "integrity": "sha512-SXkhC0nr3G0ltzVU07IN8jYl0bB6FsrDIqlLC9dK3SITXqyTJyM7yhXlUqs89w3Nqi5OkXsfRUeHX+P874HQrg==",
       "requires": {
         "create-react-class": "^15.5.1",
@@ -15218,7 +15218,7 @@
     "read-package-json": {
       "version": "2.0.13",
       "resolved": "https://registry.npmjs.org/read-package-json/-/read-package-json-2.0.13.tgz",
-      "integrity": "sha1-LoLr2fYTuqbS6+Oqcs7+P2jkH0o=",
+      "integrity": "sha512-/1dZ7TRZvGrYqE0UAfN6qQb5GYBsNcqS1C0tNK601CFOJmtHI7NIGXwetEPU/OtoFHZL3hDxm4rolFFVE9Bnmg==",
       "dev": true,
       "requires": {
         "glob": "^7.1.1",
@@ -15239,7 +15239,7 @@
     "read-package-tree": {
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/read-package-tree/-/read-package-tree-5.2.1.tgz",
-      "integrity": "sha1-Yhixh9b6yCKJzkOHu7r47vU2rWM=",
+      "integrity": "sha512-2CNoRoh95LxY47LvqrehIAfUVda2JbuFE/HaGYs42bNrGG+ojbw1h3zOcPcQ+1GQ3+rkzNndZn85u1XyZ3UsIA==",
       "dev": true,
       "requires": {
         "debuglog": "^1.0.1",
@@ -15607,7 +15607,7 @@
         },
         "htmlparser2": {
           "version": "3.3.0",
-          "resolved": "http://registry.npmjs.org/htmlparser2/-/htmlparser2-3.3.0.tgz",
+          "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-3.3.0.tgz",
           "integrity": "sha1-zHDQWln2VC5D8OaFyYLhTJJKnv4=",
           "dev": true,
           "requires": {
@@ -15625,7 +15625,7 @@
         },
         "readable-stream": {
           "version": "1.0.34",
-          "resolved": "http://registry.npmjs.org/readable-stream/-/readable-stream-1.0.34.tgz",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.34.tgz",
           "integrity": "sha1-Elgg40vIQtLyqq+v5MKRbuMsFXw=",
           "dev": true,
           "requires": {
@@ -15637,7 +15637,7 @@
         },
         "string_decoder": {
           "version": "0.10.31",
-          "resolved": "http://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
+          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
           "integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ=",
           "dev": true
         },
@@ -16260,7 +16260,7 @@
       "dependencies": {
         "debug": {
           "version": "1.0.4",
-          "resolved": "http://registry.npmjs.org/debug/-/debug-1.0.4.tgz",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-1.0.4.tgz",
           "integrity": "sha1-W5wla9VLbsAigxdvqKDt5tFUy/g=",
           "dev": true,
           "requires": {
@@ -16275,7 +16275,7 @@
         },
         "ms": {
           "version": "0.6.2",
-          "resolved": "http://registry.npmjs.org/ms/-/ms-0.6.2.tgz",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-0.6.2.tgz",
           "integrity": "sha1-2JwhJMb9wTU9Zai3e/GqxLGTcIw=",
           "dev": true
         }
@@ -16352,7 +16352,7 @@
     },
     "sha.js": {
       "version": "2.4.11",
-      "resolved": "http://registry.npmjs.org/sha.js/-/sha.js-2.4.11.tgz",
+      "resolved": "https://registry.npmjs.org/sha.js/-/sha.js-2.4.11.tgz",
       "integrity": "sha512-QMEp5B7cftE7APOjk5Y6xgrbWu+WkLVQwk8JNjZ8nKRciZaByEW6MubieAiToS7+dwvrjGhH8jRXz3MVd0AYqQ==",
       "dev": true,
       "requires": {
@@ -16603,7 +16603,7 @@
       "dependencies": {
         "debug": {
           "version": "2.3.3",
-          "resolved": "http://registry.npmjs.org/debug/-/debug-2.3.3.tgz",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-2.3.3.tgz",
           "integrity": "sha1-QMRT5n5uE8kB3ewxeviYbNqe/4w=",
           "dev": true,
           "requires": {
@@ -16612,7 +16612,7 @@
         },
         "ms": {
           "version": "0.7.2",
-          "resolved": "http://registry.npmjs.org/ms/-/ms-0.7.2.tgz",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-0.7.2.tgz",
           "integrity": "sha1-riXPJRKziFodldfwN4aNhDESR2U=",
           "dev": true
         },
@@ -16636,7 +16636,7 @@
       "dependencies": {
         "debug": {
           "version": "2.3.3",
-          "resolved": "http://registry.npmjs.org/debug/-/debug-2.3.3.tgz",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-2.3.3.tgz",
           "integrity": "sha1-QMRT5n5uE8kB3ewxeviYbNqe/4w=",
           "dev": true,
           "requires": {
@@ -16645,7 +16645,7 @@
         },
         "ms": {
           "version": "0.7.2",
-          "resolved": "http://registry.npmjs.org/ms/-/ms-0.7.2.tgz",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-0.7.2.tgz",
           "integrity": "sha1-riXPJRKziFodldfwN4aNhDESR2U=",
           "dev": true
         }
@@ -16672,7 +16672,7 @@
       "dependencies": {
         "debug": {
           "version": "2.3.3",
-          "resolved": "http://registry.npmjs.org/debug/-/debug-2.3.3.tgz",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-2.3.3.tgz",
           "integrity": "sha1-QMRT5n5uE8kB3ewxeviYbNqe/4w=",
           "dev": true,
           "requires": {
@@ -16681,7 +16681,7 @@
         },
         "ms": {
           "version": "0.7.2",
-          "resolved": "http://registry.npmjs.org/ms/-/ms-0.7.2.tgz",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-0.7.2.tgz",
           "integrity": "sha1-riXPJRKziFodldfwN4aNhDESR2U=",
           "dev": true
         }
@@ -16707,7 +16707,7 @@
         },
         "debug": {
           "version": "2.2.0",
-          "resolved": "http://registry.npmjs.org/debug/-/debug-2.2.0.tgz",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-2.2.0.tgz",
           "integrity": "sha1-+HBX6ZWxofauaklgZkE3vFbwOdo=",
           "dev": true,
           "requires": {
@@ -16722,7 +16722,7 @@
         },
         "ms": {
           "version": "0.7.1",
-          "resolved": "http://registry.npmjs.org/ms/-/ms-0.7.1.tgz",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-0.7.1.tgz",
           "integrity": "sha1-nNE8A62/8ltl7/3nzoZO6VIBcJg=",
           "dev": true
         }
@@ -16798,7 +16798,7 @@
     "socks-proxy-agent": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/socks-proxy-agent/-/socks-proxy-agent-4.0.1.tgz",
-      "integrity": "sha1-WTa/i3B6mTB5xvN9sgkYIb/6ZHM=",
+      "integrity": "sha512-Kezx6/VBguXOsEe5oU3lXYyKMi4+gva72TwJ7pQY5JfqUx2nMk7NXA6z/mpNqIlfQjWYVfeuNvQjexiTaTn6Nw==",
       "dev": true,
       "requires": {
         "agent-base": "~4.2.0",
@@ -17035,7 +17035,7 @@
     "ssri": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/ssri/-/ssri-6.0.1.tgz",
-      "integrity": "sha1-KjxBso3UW2K2Nnbst0ABJlrp7dg=",
+      "integrity": "sha512-3Wge10hNcT1Kur4PDFwEieXSCMCJs/7WvSACcrMYrNp+b8kDL1/0wJch5Ni2WrtwEa2IO8OsVfeKIciKCDx/QA==",
       "dev": true,
       "requires": {
         "figgy-pudding": "^3.5.1"
@@ -17154,7 +17154,7 @@
     "stream-each": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/stream-each/-/stream-each-1.2.3.tgz",
-      "integrity": "sha1-6+J6DDibBPvMIzZClS4Qcxr6m64=",
+      "integrity": "sha512-vlMC2f8I2u/bZGqkdfLQW/13Zihpej/7PmSiMQsbYddxuTsJp8vRe2x2FvVExZg7FaOds43ROAuFJwPR4MTZLw==",
       "dev": true,
       "requires": {
         "end-of-stream": "^1.1.0",
@@ -17550,7 +17550,7 @@
     },
     "through": {
       "version": "2.3.8",
-      "resolved": "http://registry.npmjs.org/through/-/through-2.3.8.tgz",
+      "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
       "integrity": "sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU=",
       "dev": true
     },
@@ -17822,7 +17822,7 @@
     "tslint": {
       "version": "5.12.0",
       "resolved": "https://registry.npmjs.org/tslint/-/tslint-5.12.0.tgz",
-      "integrity": "sha1-R/LbopHtPVgHUtEJhm+2QHaPyjY=",
+      "integrity": "sha512-CKEcH1MHUBhoV43SA/Jmy1l24HJJgI0eyLbBNSRyFlsQvb9v6Zdq+Nz2vEOH00nC5SUx4SneJ59PZUS/ARcokQ==",
       "dev": true,
       "requires": {
         "babel-code-frame": "^6.22.0",
@@ -17842,7 +17842,7 @@
     "tslint-config-airbnb": {
       "version": "5.11.1",
       "resolved": "https://registry.npmjs.org/tslint-config-airbnb/-/tslint-config-airbnb-5.11.1.tgz",
-      "integrity": "sha1-UaJ/u4vyTBRNBkonSnHaR+fs5hc=",
+      "integrity": "sha512-hkaittm2607vVMe8eotANGN1CimD5tor7uoY3ypg2VTtEcDB/KGWYbJOz58t8LI4cWSyWtgqYQ5F0HwKxxhlkQ==",
       "dev": true,
       "requires": {
         "tslint-consistent-codestyle": "^1.14.1",
@@ -17864,7 +17864,7 @@
     "tslint-eslint-rules": {
       "version": "5.4.0",
       "resolved": "https://registry.npmjs.org/tslint-eslint-rules/-/tslint-eslint-rules-5.4.0.tgz",
-      "integrity": "sha1-5IjMkYG/GT/lzXv8ohOnaV8XN7U=",
+      "integrity": "sha512-WlSXE+J2vY/VPgIcqQuijMQiel+UtmXS+4nvK4ZzlDiqBfXse8FAvkNnTcYhnQyOTW5KFM+uRRGXxYhFpuBc6w==",
       "dev": true,
       "requires": {
         "doctrine": "0.7.2",
@@ -17874,7 +17874,7 @@
       "dependencies": {
         "doctrine": {
           "version": "0.7.2",
-          "resolved": "http://registry.npmjs.org/doctrine/-/doctrine-0.7.2.tgz",
+          "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-0.7.2.tgz",
           "integrity": "sha1-fLhgNZujvpDgQLJrcpzkv6ZUxSM=",
           "dev": true,
           "requires": {
@@ -17897,7 +17897,7 @@
         "tslib": {
           "version": "1.9.0",
           "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.9.0.tgz",
-          "integrity": "sha1-43qG/ajLuvI6BX9HPJ9Nxk5fwug=",
+          "integrity": "sha512-f/qGG2tUkrISBlQZEjEqoZ3B2+npJjIf04H1wuAv9iA8i04Icp+61KRXxFdha22670NJopsZCIjhC3SnjPRKrQ==",
           "dev": true
         },
         "tsutils": {
@@ -17914,7 +17914,7 @@
     "tslint-microsoft-contrib": {
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/tslint-microsoft-contrib/-/tslint-microsoft-contrib-5.2.1.tgz",
-      "integrity": "sha1-pihoOfgA4lkdBB6igAx3SHhErYE=",
+      "integrity": "sha512-PDYjvpo0gN9IfMULwKk0KpVOPMhU6cNoT9VwCOLeDl/QS8v8W2yspRpFFuUS7/c5EIH/n8ApMi8TxJAz1tfFUA==",
       "dev": true,
       "requires": {
         "tsutils": "^2.27.2 <2.29.0"
@@ -17923,7 +17923,7 @@
         "tsutils": {
           "version": "2.28.0",
           "resolved": "https://registry.npmjs.org/tsutils/-/tsutils-2.28.0.tgz",
-          "integrity": "sha1-a9ceFggo+dAZtvToRHQiKPhRaaE=",
+          "integrity": "sha512-bh5nAtW0tuhvOJnx1GLRn5ScraRLICGyJV5wJhtRWOLsxW70Kk5tZtpK3O/hW6LDnqKS9mlUMPZj9fEMJ0gxqA==",
           "dev": true,
           "requires": {
             "tslib": "^1.8.1"
@@ -17934,7 +17934,7 @@
     "tsutils": {
       "version": "2.29.0",
       "resolved": "https://registry.npmjs.org/tsutils/-/tsutils-2.29.0.tgz",
-      "integrity": "sha1-MrSIUBRnrL7dS4VJhnOggSrKC5k=",
+      "integrity": "sha512-g5JVHCIJwzfISaXpXE1qvNalca5Jwob6FjI4AoPlqMusJ6ftFE7IkkFoMhVLRgK+4Kx3gkzb8UZK5t5yTTvEmA==",
       "dev": true,
       "requires": {
         "tslib": "^1.8.1"
@@ -17942,7 +17942,7 @@
     },
     "tty-browserify": {
       "version": "0.0.0",
-      "resolved": "http://registry.npmjs.org/tty-browserify/-/tty-browserify-0.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/tty-browserify/-/tty-browserify-0.0.0.tgz",
       "integrity": "sha1-oVe6QC2iTpv5V/mqadUk7tQpAaY=",
       "dev": true
     },
@@ -17989,7 +17989,7 @@
     "typescript": {
       "version": "3.2.2",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.2.2.tgz",
-      "integrity": "sha1-/oEBxGqhI/g1NSPr3PVzDCrkk+U=",
+      "integrity": "sha512-VCj5UiSyHBjwfYacmDuc/NOk4QQixbE+Wn7MFJuS0nRuPQbof132Pw4u53dm264O8LPc2MVsc7RJNml5szurkg==",
       "dev": true
     },
     "ua-parser-js": {
@@ -18128,7 +18128,7 @@
     "unique-filename": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/unique-filename/-/unique-filename-1.1.1.tgz",
-      "integrity": "sha1-HWl2k2mtoFgxA6HmrodoG1ZXMjA=",
+      "integrity": "sha512-Vmp0jIp2ln35UTXuryvjzkjGdRyf9b2lTXuSYUiPmzRcl3FDtYqAwOnTJkAngD9SWhnoJzDbTKwaOrZ+STtxNQ==",
       "dev": true,
       "requires": {
         "unique-slug": "^2.0.0"
@@ -18137,7 +18137,7 @@
     "unique-slug": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/unique-slug/-/unique-slug-2.0.1.tgz",
-      "integrity": "sha1-Xp7cbRzo+yZNsYpQfvm9hURFHKY=",
+      "integrity": "sha512-n9cU6+gITaVu7VGj1Z8feKMmfAjEAQGhwD9fE3zvpRRa0wEIx8ODYkVGfSc94M2OX00tUFV8wH3zYbm1I8mxFg==",
       "dev": true,
       "requires": {
         "imurmurhash": "^0.1.4"
@@ -18582,7 +18582,7 @@
     },
     "vm-browserify": {
       "version": "0.0.4",
-      "resolved": "http://registry.npmjs.org/vm-browserify/-/vm-browserify-0.0.4.tgz",
+      "resolved": "https://registry.npmjs.org/vm-browserify/-/vm-browserify-0.0.4.tgz",
       "integrity": "sha1-XX6kW7755Kb/ZflUOOCofDV9WnM=",
       "dev": true,
       "requires": {
@@ -18687,7 +18687,7 @@
     "webidl-conversions": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-4.0.2.tgz",
-      "integrity": "sha1-qFWYCx8LazWbodXZ+zmulB+qY60=",
+      "integrity": "sha512-YQ+BmxuTgd6UXZW3+ICGfyqRyHXVlD5GtQr5+qjiNW7bF0cqrzX500HVXPBOvgXb5YnzDd+h0zqyv61KUD7+Sg==",
       "dev": true
     },
     "webpack": {
@@ -19178,7 +19178,7 @@
     },
     "wrap-ansi": {
       "version": "2.1.0",
-      "resolved": "http://registry.npmjs.org/wrap-ansi/-/wrap-ansi-2.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-2.1.0.tgz",
       "integrity": "sha1-2Pw9KE3QV5T+hJc8rs3Rz4JP3YU=",
       "dev": true,
       "requires": {
@@ -19286,7 +19286,7 @@
     "write-pkg": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/write-pkg/-/write-pkg-3.2.0.tgz",
-      "integrity": "sha1-DheP6Xgg04mokovHlTXb5ows/yE=",
+      "integrity": "sha512-tX2ifZ0YqEFOF1wjRW2Pk93NLsj02+n1UP5RvO6rCs0K6R2g1padvf006cY74PQJKMGS2r42NK7FD0dG6Y6paw==",
       "dev": true,
       "requires": {
         "sort-keys": "^2.0.0",
@@ -19328,7 +19328,7 @@
     },
     "xmlbuilder": {
       "version": "9.0.7",
-      "resolved": "http://registry.npmjs.org/xmlbuilder/-/xmlbuilder-9.0.7.tgz",
+      "resolved": "https://registry.npmjs.org/xmlbuilder/-/xmlbuilder-9.0.7.tgz",
       "integrity": "sha1-Ey7mPS7FVlxVfiD0wi35rKaGsQ0=",
       "dev": true
     },
diff --git a/packages/theme/src/themes/dark/index.ts b/packages/theme/src/themes/dark/index.ts
index b17dc8965..6796c7cbb 100644
--- a/packages/theme/src/themes/dark/index.ts
+++ b/packages/theme/src/themes/dark/index.ts
@@ -1,5 +1,5 @@
 import color from 'color';
-import { merge, cloneDeep } from 'lodash';
+import { cloneDeep, merge } from 'lodash';
 
 import * as defaultStyles from '../default';
 import * as legacyStyles from '../legacy';
@@ -111,3 +111,11 @@ export const workspaces = merge({}, defaultStyles.workspaces, {
     },
   },
 });
+
+// Announcements
+
+export const announcements = merge({}, defaultStyles.workspaces, {
+  spotlight: {
+    background: legacyStyles.darkThemeGrayDark,
+  },
+});
diff --git a/packages/theme/src/themes/default/index.ts b/packages/theme/src/themes/default/index.ts
index 46d29f593..a85dcb366 100644
--- a/packages/theme/src/themes/default/index.ts
+++ b/packages/theme/src/themes/default/index.ts
@@ -1,6 +1,7 @@
 import color from 'color';
 import { cloneDeep } from 'lodash';
 
+import { theme } from '../..';
 import * as legacyStyles from '../legacy';
 
 export interface IStyleTypes {
@@ -200,3 +201,10 @@ export const workspaces = {
     spinnerColor: 'white',
   },
 };
+
+// Announcements
+export const announcements = {
+  spotlight: {
+    background: legacyStyles.themeGrayLightest,
+  },
+};
diff --git a/src/features/announcements/components/AnnouncementScreen.js b/src/features/announcements/components/AnnouncementScreen.js
index 2682b7890..e0c65c11f 100644
--- a/src/features/announcements/components/AnnouncementScreen.js
+++ b/src/features/announcements/components/AnnouncementScreen.js
@@ -8,6 +8,13 @@ import { Button } from '@meetfranz/forms';
 
 import { announcementsStore } from '../index';
 import UIStore from '../../../stores/UIStore';
+import { gaEvent } from '../../../lib/analytics';
+
+const renderer = new marked.Renderer();
+
+renderer.link = (href, title, text) => `<a target="_blank" href="${href}" title="${title}">${text}</a>`;
+
+const markedOptions = { sanitize: true, renderer };
 
 const messages = defineMessages({
   headline: {
@@ -31,32 +38,42 @@ const styles = theme => ({
   headline: {
     color: theme.colorHeadline,
     margin: [25, 0, 40],
-    'max-width': 500,
+    // 'max-width': 500,
     'text-align': 'center',
     'line-height': '1.3em',
   },
   announcement: {
-    height: '100vh',
-    display: 'flex',
-    flexDirection: 'column',
-    justifyContent: 'center',
+    height: 'auto',
+
+    [`@media(min-width: ${smallScreen})`]: {
+      display: 'flex',
+      flexDirection: 'column',
+      justifyContent: 'center',
+      height: '100vh',
+    },
   },
   main: {
+    display: 'flex',
+    flexDirection: 'column',
     flexGrow: 1,
+    justifyContent: 'center',
+
     '& h1': {
-      marginTop: 40,
-      fontSize: 50,
+      margin: [40, 0, 15],
+      fontSize: 70,
       color: theme.styleTypes.primary.accent,
       textAlign: 'center',
+
       [`@media(min-width: ${smallScreen})`]: {
-        marginTop: 75,
+        marginTop: 0,
       },
     },
     '& h2': {
-      fontSize: 24,
+      fontSize: 30,
       fontWeight: 300,
       color: theme.colorText,
       textAlign: 'center',
+      marginBottom: 60,
     },
   },
   mainBody: {
@@ -103,8 +120,55 @@ const styles = theme => ({
   },
   spotlight: {
     height: 'auto',
+    background: theme.announcements.spotlight.background,
+    padding: 60,
+    marginTop: 80,
+    [`@media(min-width: ${smallScreen})`]: {
+      marginTop: 0,
+      justifyContent: 'center',
+      alignItems: 'flex-start',
+      display: 'flex',
+      flexDirection: 'row',
+    },
+  },
+  spotlightTopicContainer: {
+    textAlign: 'center',
+    marginBottom: 20,
+
+    [`@media(min-width: ${smallScreen})`]: {
+      marginBottom: 0,
+      minWidth: 250,
+      maxWidth: 400,
+      width: '100%',
+      textAlign: 'right',
+      paddingRight: 80,
+    },
+  },
+  spotlightContentContainer: {
+    textAlign: 'center',
+    [`@media(min-width: ${smallScreen})`]: {
+      height: 'auto',
+      maxWidth: 600,
+      textAlign: 'left',
+    },
+    '& p': {
+      lineHeight: '1.5em',
+    },
+  },
+  spotlightTopic: {
+    fontSize: 20,
+    marginBottom: 5,
+    letterSpacing: 0,
+    fontWeight: 100,
+  },
+  spotlightSubject: {
+    fontSize: 20,
   },
   changelog: {
+    maxWidth: 650,
+    margin: [100, 'auto'],
+    height: 'auto',
+
     '& h3': {
       fontSize: '24px',
       margin: '1.5em 0 1em 0',
@@ -112,6 +176,9 @@ const styles = theme => ({
     '& li': {
       marginBottom: '1em',
     },
+    '& div': {
+      height: 'auto',
+    },
   },
 });
 
@@ -148,20 +215,49 @@ class AnnouncementScreen extends Component {
                 />
               </div>
               <div className={classes.mainText}>
-                <p
+                <div
                   dangerouslySetInnerHTML={{
-                    __html: marked(announcement.main.text, { sanitize: true }),
+                    __html: marked(announcement.main.text, markedOptions),
                   }}
                 />
                 <div className={classes.mainCtaButton}>
-                  <Button label={announcement.main.cta.label} />
+                  <Button
+                    label={announcement.main.cta.label}
+                    onClick={() => {
+                      const { analytics } = announcement.main.cta;
+                      window.location.href = `#${announcement.main.cta.href}`;
+
+                      gaEvent(analytics.category, analytics.action, announcement.main.cta.label);
+                    }}
+                  />
                 </div>
               </div>
             </div>
           </div>
           {announcement.spotlight && (
             <div className={classes.spotlight}>
-              <h2>{announcement.spotlight.title}</h2>
+              <div className={classes.spotlightTopicContainer}>
+                <h2 className={classes.spotlightTopic}>{announcement.spotlight.title}</h2>
+                <h3 className={classes.spotlightSubject}>{announcement.spotlight.subject}</h3>
+              </div>
+              <div className={classes.spotlightContentContainer}>
+                <div
+                  dangerouslySetInnerHTML={{
+                    __html: marked(announcement.spotlight.text, markedOptions),
+                  }}
+                />
+                <div className={classes.mainCtaButton}>
+                  <Button
+                    label={announcement.spotlight.cta.label}
+                    onClick={() => {
+                      const { analytics } = announcement.spotlight.cta;
+                      window.location.href = `#${announcement.spotlight.cta.href}`;
+
+                      gaEvent(analytics.category, analytics.action, announcement.spotlight.cta.label);
+                    }}
+                  />
+                </div>
+              </div>
             </div>
           )}
         </div>
@@ -174,7 +270,7 @@ class AnnouncementScreen extends Component {
             </h1>
             <div
               dangerouslySetInnerHTML={{
-                __html: marked(changelog, { sanitize: true }),
+                __html: marked(changelog, markedOptions),
               }}
             />
           </div>
diff --git a/src/i18n/messages/src/features/announcements/components/AnnouncementScreen.json b/src/i18n/messages/src/features/announcements/components/AnnouncementScreen.json
index 874c9dd9d..eb1b66916 100644
--- a/src/i18n/messages/src/features/announcements/components/AnnouncementScreen.json
+++ b/src/i18n/messages/src/features/announcements/components/AnnouncementScreen.json
@@ -4,11 +4,11 @@
     "defaultMessage": "!!!Changes in Franz {version}",
     "file": "src/features/announcements/components/AnnouncementScreen.js",
     "start": {
-      "line": 13,
+      "line": 20,
       "column": 12
     },
     "end": {
-      "line": 16,
+      "line": 23,
       "column": 3
     }
   }
-- 
cgit v1.2.3-54-g00ecf