4 files changed, 41 insertions, 1 deletions

diff --git a/packages/forms/src/input/index.tsx b/packages/forms/src/input/index.tsx
index ab1c33315..f89c91be5 100644
--- a/packages/forms/src/input/index.tsx
+++ b/packages/forms/src/input/index.tsx
@@ -25,6 +25,7 @@ interface IProps extends React.InputHTMLAttributes<HTMLInputElement>, IFormField
   showPasswordToggle?: boolean;
   data: IData;
   inputClassName?: string;
+  onEnterKey?: Function;
 }
 
 interface IState {
@@ -33,7 +34,7 @@ interface IState {
 }
 
 class InputComponent extends Component<IProps, IState> {
-  public static defaultProps = {
+  static defaultProps = {
     focus: false,
     onChange: () => {},
     onBlur: () => {},
@@ -81,6 +82,13 @@ class InputComponent extends Component<IProps, IState> {
     }
   }
 
+  onInputKeyPress(e: React.KeyboardEvent) {
+    if (e.key === "Enter") {
+      const { onEnterKey } = this.props;
+      onEnterKey && onEnterKey();
+    }
+  }
+
   render() {
     const {
       classes,
@@ -150,6 +158,7 @@ class InputComponent extends Component<IProps, IState> {
               onFocus={onFocus}
               onBlur={onBlur}
               disabled={disabled}
+              onKeyPress={this.onInputKeyPress.bind(this)}
               min={min}
               max={max}
               step={step}
diff --git a/packages/theme/src/themes/dark/index.ts b/packages/theme/src/themes/dark/index.ts
index 3a56719b2..cb7ffc1cf 100644
--- a/packages/theme/src/themes/dark/index.ts
+++ b/packages/theme/src/themes/dark/index.ts
@@ -63,3 +63,14 @@ 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 workspaceDrawerAddButtonColor = legacyStyles.darkThemeGrayLighter;
+export const workspaceDrawerAddButtonHoverColor = legacyStyles.darkThemeGraySmoke;
+export const workspaceDrawerItemBorder = 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 273792d46..f2632ee20 100644
--- a/packages/theme/src/themes/default/index.ts
+++ b/packages/theme/src/themes/default/index.ts
@@ -142,3 +142,16 @@ export const badgeBorderRadius = 50;
 
 // Modal
 export const colorModalOverlayBackground = color('#000').alpha(0.5).rgb().string();
+
+// 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 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/packages/ui/src/infobox/index.tsx b/packages/ui/src/infobox/index.tsx
index 1a442a733..9066a623e 100644
--- a/packages/ui/src/infobox/index.tsx
+++ b/packages/ui/src/infobox/index.tsx
@@ -11,6 +11,7 @@ interface IProps extends IWithStyle {
   type?: string;
   dismissable?: boolean;
   onDismiss?: () => void;
+  onUnmount?: () => void;
   ctaOnClick?: () => void;
   ctaLabel?: string;
   ctaLoading?: boolean;
@@ -46,6 +47,7 @@ const styles = (theme: Theme) => ({
   wrapper: {
     position: 'relative',
     overflow: 'hidden',
+    height: 'auto',
   },
   infobox: {
     alignItems: 'center',
@@ -129,6 +131,11 @@ class InfoboxComponent extends Component<IProps, IState> {
     },         3000);
   }
 
+  componentWillUnmount(): void {
+    const { onUnmount } = this.props;
+    if (onUnmount) onUnmount();
+  }
+
   render() {
     const {
       classes,