Added initial navigation bar

10 files changed, 646 insertions, 35 deletions

diff --git a/app/features/config/index.js b/app/features/config/index.js
index 22d3806..6da1239 100644
--- a/app/features/config/index.js
+++ b/app/features/config/index.js
@@ -8,5 +8,20 @@ export default {
     /**
      * The domain of the Jitsi Meet deployment that will be used.
      */
-    defaultDomain: 'meet.jit.si'
+    defaultDomain: 'meet.jit.si',
+
+    /**
+     * URL to send feedback.
+     */
+    feedbackURL: 'mailto:support@jitsi.org',
+
+    /**
+     * The url of Privacy Policy Page.
+     */
+    privacyPolicyURL: 'https://jitsi.org/meet/privacy',
+
+    /**
+     * The url of Terms and Conditions Page.
+     */
+    termsAndConditionsURL: 'https://jitsi.org/meet/terms'
 };
diff --git a/app/features/navbar/components/HelpAction.js b/app/features/navbar/components/HelpAction.js
new file mode 100644
index 0000000..81cd903
--- /dev/null
+++ b/app/features/navbar/components/HelpAction.js
@@ -0,0 +1,100 @@
+// @flow
+
+import Droplist, { Item } from '@atlaskit/droplist';
+import HelpIcon from '@atlaskit/icon/glyph/question-circle';
+
+import React, { Component } from 'react';
+
+import config from '../../config';
+import { openExternalLink } from '../../utils';
+
+type State = {
+
+    /**
+     * Whether the droplist is open or not.
+     */
+    droplistOpen: boolean
+};
+
+/**
+ * Help Action for Navigation Bar.
+ */
+class HelpAction extends Component< *, State> {
+    /**
+     * Initializes a new {@code HelpAction} instance.
+     *
+     * @inheritdoc
+     */
+    constructor() {
+        super();
+
+        this.state = {
+            droplistOpen: false
+        };
+
+        this._droplistToggle = this._droplistToggle.bind(this);
+        this._openPrivacyPage = this._openPrivacyPage.bind(this);
+        this._openTermsPage = this._openTermsPage.bind(this);
+        this._sendFeedback = this._sendFeedback.bind(this);
+    }
+
+    _droplistToggle: (*) => void;
+
+    /**
+     * Toggles the droplist.
+     */
+    _droplistToggle() {
+        this.setState({
+            droplistOpen: !this.state.droplistOpen
+        });
+    }
+
+    _openPrivacyPage: (*) => void;
+
+    /**
+     * Opens Privacy Policy Page in default browser.
+     */
+    _openPrivacyPage() {
+        openExternalLink(config.privacyPolicyURL);
+    }
+
+    _openTermsPage: (*) => void;
+
+    /**
+     * Opens Terms and Conditions Page in default browser.
+     */
+    _openTermsPage() {
+        openExternalLink(config.termsAndConditionsURL);
+    }
+
+    _sendFeedback: (*) => void;
+
+    /**
+     * Opens Support/Feedback Email.
+     */
+    _sendFeedback() {
+        openExternalLink(config.feedbackURL);
+    }
+
+    /**
+     * Render function of component.
+     *
+     * @return {ReactElement}
+     */
+    render() {
+        return (
+            <Droplist
+                isOpen = { this.state.droplistOpen }
+                onClick = { () => this._droplistToggle() }
+                onOpenChange = { () => this._droplistToggle() }
+                position = 'right bottom'
+                trigger = { <HelpIcon /> }>
+                <Item onActivate = { this._openTermsPage }>Terms</Item>
+                <Item onActivate = { this._openPrivacyPage }>Privacy</Item>
+                <Item onActivate = { this._sendFeedback } >Send Feedback</Item>
+            </Droplist>
+        );
+    }
+}
+
+export default HelpAction;
diff --git a/app/features/navbar/components/Navbar.js b/app/features/navbar/components/Navbar.js
new file mode 100644
index 0000000..d243559
--- /dev/null
+++ b/app/features/navbar/components/Navbar.js
@@ -0,0 +1,43 @@
+
+// @flow
+
+import Navigation, { AkGlobalItem } from '@atlaskit/navigation';
+
+import React, { Component } from 'react';
+
+import { isElectronMac } from '../../utils';
+
+import HelpAction from './HelpAction';
+
+/**
+ * Navigation Bar component.
+ */
+class Navbar extends Component<*> {
+    /**
+     * Get the array of Secondary actions of Global Navigation.
+     */
+    _getSecondaryActions() {
+        return [
+            <AkGlobalItem key={0}>
+                <HelpAction />
+            </AkGlobalItem>
+        ];
+    }
+
+    /**
+     * Render function of component.
+     *
+     * @return {ReactElement}
+     */
+    render() {
+        return (
+            <Navigation
+                globalSecondaryActions = { this._getSecondaryActions() }
+                isElectronMac = { isElectronMac() }
+                isOpen = { false }
+                isResizeable = { false } />
+        );
+    }
+}
+
+export default Navbar;
diff --git a/app/features/navbar/components/index.js b/app/features/navbar/components/index.js
new file mode 100644
index 0000000..ee1d016
--- /dev/null
+++ b/app/features/navbar/components/index.js
@@ -0,0 +1 @@
+export { default as Navbar } from './Navbar';
diff --git a/app/features/navbar/index.js b/app/features/navbar/index.js
new file mode 100644
index 0000000..07635cb
--- /dev/null
+++ b/app/features/navbar/index.js
@@ -0,0 +1 @@
+export * from './components';
diff --git a/app/features/utils/functions.js b/app/features/utils/functions.js
new file mode 100644
index 0000000..f0db554
--- /dev/null
+++ b/app/features/utils/functions.js
@@ -0,0 +1,19 @@
+/* global process */
+
+// @flow
+
+import { shell } from 'electron';
+
+/**
+ * Opens the provided link in default broswer.
+ */
+export function openExternalLink(link: string) {
+    shell.openExternal(link);
+}
+
+/**
+ * Return true if Electron app is running on Mac system.
+ */
+export function isElectronMac() {
+    return process.platform === 'darwin';
+}
diff --git a/app/features/utils/index.js b/app/features/utils/index.js
new file mode 100644
index 0000000..484b715
--- /dev/null
+++ b/app/features/utils/index.js
@@ -0,0 +1 @@
+export * from './functions';
diff --git a/app/features/welcome/components/Welcome.js b/app/features/welcome/components/Welcome.js
index cdf7187..423b0f0 100644
--- a/app/features/welcome/components/Welcome.js
+++ b/app/features/welcome/components/Welcome.js
@@ -1,8 +1,9 @@
 // @flow
 
-import { AtlasKitThemeProvider } from '@atlaskit/theme';
 import Button from '@atlaskit/button';
 import { FieldTextStateless } from '@atlaskit/field-text';
+import Page from '@atlaskit/page';
+import { AtlasKitThemeProvider } from '@atlaskit/theme';
 
 import React, { Component } from 'react';
 import type { Dispatch } from 'redux';
@@ -10,6 +11,8 @@ import { connect } from 'react-redux';
 import { push } from 'react-router-redux';
 import URL from 'url';
 
+import { Navbar } from '../../navbar';
+
 import { WelcomeWrapper as Wrapper, Content, Form } from '../styled';
 
 
@@ -59,27 +62,29 @@ class Welcome extends Component<Props, State> {
      */
     render() {
         return (
-            <AtlasKitThemeProvider mode = 'light'>
-                <Wrapper>
-                    <Content>
-                        <Form onSubmit = { this._onFormSubmit }>
-                            <FieldTextStateless
-                                autoFocus = { true }
-                                isLabelHidden = { true }
-                                onChange = { this._onURLChange }
-                                shouldFitContainer = { true }
-                                type = 'text'
-                                value = { this.state.url } />
-                        </Form>
-                        <Button
-                            appearance = 'primary'
-                            onClick = { this._onJoin }
-                            type = 'button'>
-                            GO
-                        </Button>
-                    </Content>
-                </Wrapper>
-            </AtlasKitThemeProvider>
+            <Page navigation = { <Navbar /> }>
+                <AtlasKitThemeProvider mode = 'light'>
+                    <Wrapper>
+                        <Content>
+                            <Form onSubmit = { this._onFormSubmit }>
+                                <FieldTextStateless
+                                    autoFocus = { true }
+                                    isLabelHidden = { true }
+                                    onChange = { this._onURLChange }
+                                    shouldFitContainer = { true }
+                                    type = 'text'
+                                    value = { this.state.url } />
+                            </Form>
+                            <Button
+                                appearance = 'primary'
+                                onClick = { this._onJoin }
+                                type = 'button'>
+                                GO
+                            </Button>
+                        </Content>
+                    </Wrapper>
+                </AtlasKitThemeProvider>
+            </Page>
         );
     }
 
diff --git a/package-lock.json b/package-lock.json
index 722c46b..f592ec8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4,6 +4,14 @@
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
+    "@atlaskit/analytics": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@atlaskit/analytics/-/analytics-3.0.3.tgz",
+      "integrity": "sha512-xbFw4suHWgIEVhkXhZ/PrNoVudLR1uwrMZZV7zXUpqSMPq00lL+kiq7H7d9qPXOJ4IgzJiNASBr7mkpSAp9pBw==",
+      "requires": {
+        "prop-types": "15.6.1"
+      }
+    },
     "@atlaskit/analytics-next": {
       "version": "2.1.4",
       "resolved": "https://registry.npmjs.org/@atlaskit/analytics-next/-/analytics-next-2.1.4.tgz",
@@ -12,6 +20,45 @@
         "prop-types": "15.6.1"
       }
     },
+    "@atlaskit/avatar": {
+      "version": "11.0.1",
+      "resolved": "https://registry.npmjs.org/@atlaskit/avatar/-/avatar-11.0.1.tgz",
+      "integrity": "sha512-aS4fKrWgApw/ECH06N3wBNlBbn1MNDM78N1cTkkkw8Ly4xV+f8EzpJhQt0kx4PfRrAIag2t6UYesrKq8WFOKAg==",
+      "requires": {
+        "@atlaskit/dropdown-menu": "5.0.1",
+        "@atlaskit/item": "7.0.2",
+        "@atlaskit/theme": "4.0.1",
+        "@atlaskit/tooltip": "10.1.0"
+      },
+      "dependencies": {
+        "@atlaskit/theme": {
+          "version": "4.0.1",
+          "resolved": "https://registry.npmjs.org/@atlaskit/theme/-/theme-4.0.1.tgz",
+          "integrity": "sha512-tkHYJyVspudD90mfkx3Khm7va0OTnx04ha5G+Pyma6BcjyyQuroRj86ttl4+U4FrVWcgHt12B5YlU3YSR2Oy+g==",
+          "requires": {
+            "prop-types": "15.6.1"
+          }
+        }
+      }
+    },
+    "@atlaskit/blanket": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/@atlaskit/blanket/-/blanket-6.0.1.tgz",
+      "integrity": "sha512-PzfvhXgNdMqDOxY9It3hhwRHqPFBKybXDlwoBRz52uk2Lw7f2g3TsJgaXAoTFhcKdo95kTzjM+UgneoFHbpzdw==",
+      "requires": {
+        "@atlaskit/theme": "4.0.1"
+      },
+      "dependencies": {
+        "@atlaskit/theme": {
+          "version": "4.0.1",
+          "resolved": "https://registry.npmjs.org/@atlaskit/theme/-/theme-4.0.1.tgz",
+          "integrity": "sha512-tkHYJyVspudD90mfkx3Khm7va0OTnx04ha5G+Pyma6BcjyyQuroRj86ttl4+U4FrVWcgHt12B5YlU3YSR2Oy+g==",
+          "requires": {
+            "prop-types": "15.6.1"
+          }
+        }
+      }
+    },
     "@atlaskit/button": {
       "version": "7.2.5",
       "resolved": "https://registry.npmjs.org/@atlaskit/button/-/button-7.2.5.tgz",
@@ -24,6 +71,67 @@
         "styled-components": "3.3.0"
       }
     },
+    "@atlaskit/checkbox": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@atlaskit/checkbox/-/checkbox-3.0.3.tgz",
+      "integrity": "sha512-XqFhNPAqNbxbBrO6UYverpBg3iVn9uinkPxhxenhSilUvy5TxEel1lQitu5PGSkOYG5jEH0gFoC+DKmCEX2Fow==",
+      "requires": {
+        "@atlaskit/button": "8.0.1",
+        "@atlaskit/icon": "12.0.1",
+        "@atlaskit/theme": "4.0.1",
+        "babel-runtime": "6.26.0",
+        "prop-types": "15.6.1"
+      },
+      "dependencies": {
+        "@atlaskit/analytics-next": {
+          "version": "2.1.6",
+          "resolved": "https://registry.npmjs.org/@atlaskit/analytics-next/-/analytics-next-2.1.6.tgz",
+          "integrity": "sha512-fpQoi+xRaUk353UmwKIhG+K4caYO03+diMxsma4UjfNBYD5quW2b08jbCvjVeQoa6X057CFftkLxT3FZmSTTiQ==",
+          "requires": {
+            "prop-types": "15.6.1"
+          }
+        },
+        "@atlaskit/button": {
+          "version": "8.0.1",
+          "resolved": "https://registry.npmjs.org/@atlaskit/button/-/button-8.0.1.tgz",
+          "integrity": "sha512-l8xoSucydi6rdm73chp4rV3Ed7C7bwRN0o6OjnAj8hm/Ra/bI0bEbjN5etPfcMnX6ZYVCnnLv4k/HVmveM3GnQ==",
+          "requires": {
+            "@atlaskit/analytics-next": "2.1.6",
+            "@atlaskit/spinner": "6.0.1",
+            "@atlaskit/theme": "4.0.1",
+            "babel-runtime": "6.26.0"
+          }
+        },
+        "@atlaskit/icon": {
+          "version": "12.0.1",
+          "resolved": "https://registry.npmjs.org/@atlaskit/icon/-/icon-12.0.1.tgz",
+          "integrity": "sha512-lPj14HZKtgcUmrvmtG1QM4+0QTorfiFD0fXQQ/95KZX07aJv+UtmUtFpQ9L6U2cD+k2I2GqIy6AlZA30tsICNQ==",
+          "requires": {
+            "@atlaskit/theme": "4.0.1",
+            "babel-runtime": "6.26.0",
+            "uuid": "3.2.1"
+          }
+        },
+        "@atlaskit/spinner": {
+          "version": "6.0.1",
+          "resolved": "https://registry.npmjs.org/@atlaskit/spinner/-/spinner-6.0.1.tgz",
+          "integrity": "sha512-YpxE+mRI0qISeBb1Nwg5cOR8rkoiY2WiV2+8WVXXfRBxtVIbODn8Q/lSmY9F4HK9W4a/t5yUAlMEmjO/UVyopg==",
+          "requires": {
+            "@atlaskit/theme": "4.0.1",
+            "babel-runtime": "6.26.0",
+            "react-transition-group": "2.3.1"
+          }
+        },
+        "@atlaskit/theme": {
+          "version": "4.0.1",
+          "resolved": "https://registry.npmjs.org/@atlaskit/theme/-/theme-4.0.1.tgz",
+          "integrity": "sha512-tkHYJyVspudD90mfkx3Khm7va0OTnx04ha5G+Pyma6BcjyyQuroRj86ttl4+U4FrVWcgHt12B5YlU3YSR2Oy+g==",
+          "requires": {
+            "prop-types": "15.6.1"
+          }
+        }
+      }
+    },
     "@atlaskit/css-reset": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/@atlaskit/css-reset/-/css-reset-2.0.2.tgz",
@@ -32,6 +140,115 @@
         "@atlaskit/util-shared-styles": "2.10.8"
       }
     },
+    "@atlaskit/dropdown-menu": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/@atlaskit/dropdown-menu/-/dropdown-menu-5.0.1.tgz",
+      "integrity": "sha512-caArtgsnZHpulgRV3oPPQq2ZyHNxJzIH9Lb2tfMkDW5idgsGyXEzLCR3Ti2r9CmCvkYxUu0y84X94RmWgzc8Fg==",
+      "requires": {
+        "@atlaskit/button": "8.0.1",
+        "@atlaskit/droplist": "6.0.1",
+        "@atlaskit/icon": "12.0.1",
+        "@atlaskit/item": "7.0.2",
+        "@atlaskit/theme": "4.0.1",
+        "array-find": "1.0.0",
+        "prop-types": "15.6.1",
+        "uuid": "3.2.1"
+      },
+      "dependencies": {
+        "@atlaskit/analytics-next": {
+          "version": "2.1.6",
+          "resolved": "https://registry.npmjs.org/@atlaskit/analytics-next/-/analytics-next-2.1.6.tgz",
+          "integrity": "sha512-fpQoi+xRaUk353UmwKIhG+K4caYO03+diMxsma4UjfNBYD5quW2b08jbCvjVeQoa6X057CFftkLxT3FZmSTTiQ==",
+          "requires": {
+            "prop-types": "15.6.1"
+          }
+        },
+        "@atlaskit/button": {
+          "version": "8.0.1",
+          "resolved": "https://registry.npmjs.org/@atlaskit/button/-/button-8.0.1.tgz",
+          "integrity": "sha512-l8xoSucydi6rdm73chp4rV3Ed7C7bwRN0o6OjnAj8hm/Ra/bI0bEbjN5etPfcMnX6ZYVCnnLv4k/HVmveM3GnQ==",
+          "requires": {
+            "@atlaskit/analytics-next": "2.1.6",
+            "@atlaskit/spinner": "6.0.1",
+            "@atlaskit/theme": "4.0.1",
+            "babel-runtime": "6.26.0"
+          }
+        },
+        "@atlaskit/icon": {
+          "version": "12.0.1",
+          "resolved": "https://registry.npmjs.org/@atlaskit/icon/-/icon-12.0.1.tgz",
+          "integrity": "sha512-lPj14HZKtgcUmrvmtG1QM4+0QTorfiFD0fXQQ/95KZX07aJv+UtmUtFpQ9L6U2cD+k2I2GqIy6AlZA30tsICNQ==",
+          "requires": {
+            "@atlaskit/theme": "4.0.1",
+            "babel-runtime": "6.26.0",
+            "uuid": "3.2.1"
+          }
+        },
+        "@atlaskit/spinner": {
+          "version": "6.0.1",
+          "resolved": "https://registry.npmjs.org/@atlaskit/spinner/-/spinner-6.0.1.tgz",
+          "integrity": "sha512-YpxE+mRI0qISeBb1Nwg5cOR8rkoiY2WiV2+8WVXXfRBxtVIbODn8Q/lSmY9F4HK9W4a/t5yUAlMEmjO/UVyopg==",
+          "requires": {
+            "@atlaskit/theme": "4.0.1",
+            "babel-runtime": "6.26.0",
+            "react-transition-group": "2.3.1"
+          }
+        },
+        "@atlaskit/theme": {
+          "version": "4.0.1",
+          "resolved": "https://registry.npmjs.org/@atlaskit/theme/-/theme-4.0.1.tgz",
+          "integrity": "sha512-tkHYJyVspudD90mfkx3Khm7va0OTnx04ha5G+Pyma6BcjyyQuroRj86ttl4+U4FrVWcgHt12B5YlU3YSR2Oy+g==",
+          "requires": {
+            "prop-types": "15.6.1"
+          }
+        }
+      }
+    },
+    "@atlaskit/droplist": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/@atlaskit/droplist/-/droplist-6.0.1.tgz",
+      "integrity": "sha512-6W78ZTcz215SKU5gvM75fJkQQ97zhbXoKXrjQHZVT/7E5FfHQInNC4F+FvsMX/NeH+a753lZ8/ZeidoQsyGz2A==",
+      "requires": {
+        "@atlaskit/icon": "12.0.1",
+        "@atlaskit/item": "7.0.2",
+        "@atlaskit/layer": "4.0.0",
+        "@atlaskit/spinner": "6.0.1",
+        "@atlaskit/theme": "4.0.1",
+        "@atlaskit/tooltip": "10.1.0",
+        "babel-runtime": "6.26.0",
+        "classnames": "2.2.5",
+        "keycode": "2.2.0",
+        "prop-types": "15.6.1"
+      },
+      "dependencies": {
+        "@atlaskit/layer": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/@atlaskit/layer/-/layer-4.0.0.tgz",
+          "integrity": "sha512-TaLzgfxIdzGqqDgKbXRTDGExY8vmS89eX2y8AQ2ujsX7+sRvxGLAVzxWKROoCIvxrW5c9ZMjnxhLjnDLXREgsA==",
+          "requires": {
+            "react-scrolllock": "2.0.7"
+          }
+        },
+        "@atlaskit/spinner": {
+          "version": "6.0.1",
+          "resolved": "https://registry.npmjs.org/@atlaskit/spinner/-/spinner-6.0.1.tgz",
+          "integrity": "sha512-YpxE+mRI0qISeBb1Nwg5cOR8rkoiY2WiV2+8WVXXfRBxtVIbODn8Q/lSmY9F4HK9W4a/t5yUAlMEmjO/UVyopg==",
+          "requires": {
+            "@atlaskit/theme": "4.0.1",
+            "babel-runtime": "6.26.0",
+            "react-transition-group": "2.3.1"
+          }
+        },
+        "@atlaskit/theme": {
+          "version": "4.0.1",
+          "resolved": "https://registry.npmjs.org/@atlaskit/theme/-/theme-4.0.1.tgz",
+          "integrity": "sha512-tkHYJyVspudD90mfkx3Khm7va0OTnx04ha5G+Pyma6BcjyyQuroRj86ttl4+U4FrVWcgHt12B5YlU3YSR2Oy+g==",
+          "requires": {
+            "prop-types": "15.6.1"
+          }
+        }
+      }
+    },
     "@atlaskit/field-base": {
       "version": "9.0.3",
       "resolved": "https://registry.npmjs.org/@atlaskit/field-base/-/field-base-9.0.3.tgz",
@@ -43,6 +260,19 @@
         "@atlaskit/theme": "3.2.2",
         "babel-runtime": "6.26.0",
         "styled-components": "3.3.0"
+      },
+      "dependencies": {
+        "@atlaskit/icon": {
+          "version": "11.4.0",
+          "resolved": "https://registry.npmjs.org/@atlaskit/icon/-/icon-11.4.0.tgz",
+          "integrity": "sha512-n+Wx+1adkOlFRqz5t/1hwUDXZr1ydNvC0zb7MH6t/g7XnnGQBkgNjIz6Yn+i1YH/czH+AQNKE2OaIrfRWwmF/A==",
+          "requires": {
+            "@atlaskit/theme": "3.2.2",
+            "babel-runtime": "6.26.0",
+            "styled-components": "3.3.0",
+            "uuid": "3.2.1"
+          }
+        }
       }
     },
     "@atlaskit/field-text": {
@@ -56,14 +286,23 @@
       }
     },
     "@atlaskit/icon": {
-      "version": "11.4.0",
-      "resolved": "https://registry.npmjs.org/@atlaskit/icon/-/icon-11.4.0.tgz",
-      "integrity": "sha512-n+Wx+1adkOlFRqz5t/1hwUDXZr1ydNvC0zb7MH6t/g7XnnGQBkgNjIz6Yn+i1YH/czH+AQNKE2OaIrfRWwmF/A==",
+      "version": "12.0.1",
+      "resolved": "https://registry.npmjs.org/@atlaskit/icon/-/icon-12.0.1.tgz",
+      "integrity": "sha512-lPj14HZKtgcUmrvmtG1QM4+0QTorfiFD0fXQQ/95KZX07aJv+UtmUtFpQ9L6U2cD+k2I2GqIy6AlZA30tsICNQ==",
       "requires": {
-        "@atlaskit/theme": "3.2.2",
+        "@atlaskit/theme": "4.0.1",
         "babel-runtime": "6.26.0",
-        "styled-components": "3.3.0",
         "uuid": "3.2.1"
+      },
+      "dependencies": {
+        "@atlaskit/theme": {
+          "version": "4.0.1",
+          "resolved": "https://registry.npmjs.org/@atlaskit/theme/-/theme-4.0.1.tgz",
+          "integrity": "sha512-tkHYJyVspudD90mfkx3Khm7va0OTnx04ha5G+Pyma6BcjyyQuroRj86ttl4+U4FrVWcgHt12B5YlU3YSR2Oy+g==",
+          "requires": {
+            "prop-types": "15.6.1"
+          }
+        }
       }
     },
     "@atlaskit/inline-dialog": {
@@ -76,6 +315,27 @@
         "styled-components": "3.3.0"
       }
     },
+    "@atlaskit/item": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/@atlaskit/item/-/item-7.0.2.tgz",
+      "integrity": "sha512-3h0R+GvZEEdAIhv7gZkPYjK4CvKYMTmIM/L5ya1R9tnGEEqrDNkVub+anHBjM3scnTyRky4aUDHgUbPCOpsFLw==",
+      "requires": {
+        "@atlaskit/theme": "4.0.1",
+        "prop-types": "15.6.1",
+        "react-addons-text-content": "0.0.4",
+        "uuid": "3.2.1"
+      },
+      "dependencies": {
+        "@atlaskit/theme": {
+          "version": "4.0.1",
+          "resolved": "https://registry.npmjs.org/@atlaskit/theme/-/theme-4.0.1.tgz",
+          "integrity": "sha512-tkHYJyVspudD90mfkx3Khm7va0OTnx04ha5G+Pyma6BcjyyQuroRj86ttl4+U4FrVWcgHt12B5YlU3YSR2Oy+g==",
+          "requires": {
+            "prop-types": "15.6.1"
+          }
+        }
+      }
+    },
     "@atlaskit/layer": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/@atlaskit/layer/-/layer-3.2.0.tgz",
@@ -85,6 +345,85 @@
         "styled-components": "3.3.0"
       }
     },
+    "@atlaskit/layer-manager": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/@atlaskit/layer-manager/-/layer-manager-4.0.1.tgz",
+      "integrity": "sha512-TiFtqsdgpUKBJXk4izKkHd1QH8rTv37Gkjzj8yiQavx1ypaz1y6Eap23bu+/tIsRj67Izz73riS3Dqq6gF8HzA==",
+      "requires": {
+        "focusin": "2.0.0",
+        "prop-types": "15.6.1",
+        "react-transition-group": "2.3.1",
+        "tabbable": "1.1.3"
+      }
+    },
+    "@atlaskit/navigation": {
+      "version": "32.0.2",
+      "resolved": "https://registry.npmjs.org/@atlaskit/navigation/-/navigation-32.0.2.tgz",
+      "integrity": "sha512-/Yqe2KQIY1hl8s9MdcPY10pflO/nIy1NAEj6NibttwCXD6i/QwkzBK7sj5DN6uY2tPprAWcxQXnpZtb+vW5wsg==",
+      "requires": {
+        "@atlaskit/analytics": "3.0.3",
+        "@atlaskit/avatar": "11.0.1",
+        "@atlaskit/blanket": "6.0.1",
+        "@atlaskit/checkbox": "3.0.3",
+        "@atlaskit/dropdown-menu": "5.0.1",
+        "@atlaskit/icon": "12.0.1",
+        "@atlaskit/item": "7.0.2",
+        "@atlaskit/polyfills": "2.0.3",
+        "@atlaskit/size-detector": "4.0.1",
+        "@atlaskit/theme": "4.0.1",
+        "@atlaskit/tooltip": "10.1.0",
+        "@atlaskit/util-shared-styles": "2.10.8",
+        "babel-runtime": "6.26.0",
+        "chromatism": "2.6.0",
+        "es6-object-assign": "1.1.0",
+        "keycode": "2.2.0",
+        "lodash.clonedeep": "4.5.0",
+        "memoize-one": "3.1.1",
+        "prop-types": "15.6.1",
+        "raf-schd": "2.1.2",
+        "react-scrolllock": "2.0.7",
+        "react-transition-group": "2.3.1"
+      },
+      "dependencies": {
+        "@atlaskit/icon": {
+          "version": "12.0.1",
+          "resolved": "https://registry.npmjs.org/@atlaskit/icon/-/icon-12.0.1.tgz",
+          "integrity": "sha512-lPj14HZKtgcUmrvmtG1QM4+0QTorfiFD0fXQQ/95KZX07aJv+UtmUtFpQ9L6U2cD+k2I2GqIy6AlZA30tsICNQ==",
+          "requires": {
+            "@atlaskit/theme": "4.0.1",
+            "babel-runtime": "6.26.0",
+            "uuid": "3.2.1"
+          }
+        },
+        "@atlaskit/theme": {
+          "version": "4.0.1",
+          "resolved": "https://registry.npmjs.org/@atlaskit/theme/-/theme-4.0.1.tgz",
+          "integrity": "sha512-tkHYJyVspudD90mfkx3Khm7va0OTnx04ha5G+Pyma6BcjyyQuroRj86ttl4+U4FrVWcgHt12B5YlU3YSR2Oy+g==",
+          "requires": {
+            "prop-types": "15.6.1"
+          }
+        }
+      }
+    },
+    "@atlaskit/page": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/@atlaskit/page/-/page-7.0.1.tgz",
+      "integrity": "sha512-rLin2IcRgjxru/NPNuysEKZfc2t3iPW8vaVLyN7IKfs1+xuk4Vb5xVnBSWwYsEm/a8HSLLDoa9mYSX3a0gfC/A=="
+    },
+    "@atlaskit/polyfills": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/@atlaskit/polyfills/-/polyfills-2.0.3.tgz",
+      "integrity": "sha512-J/GkEIsjsqNGYKdcWZaelOXWNvU4TkUU+PmcM1zup00JuZyKZtlV+yx+K1bvKlbZPon7ugZfbUWc3cPG8u6YKA=="
+    },
+    "@atlaskit/size-detector": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/@atlaskit/size-detector/-/size-detector-4.0.1.tgz",
+      "integrity": "sha512-w8Xyyr0wHq18x4+l7I2llow4FqBIw6JWCB+H1bLWzX4/B3vTWCp0H1G8l12Ty2c5LioR3X3kozIt3/Q2Kg5GFQ==",
+      "requires": {
+        "babel-runtime": "6.26.0",
+        "raf-schd": "2.1.2"
+      }
+    },
     "@atlaskit/spinner": {
       "version": "5.0.2",
       "resolved": "https://registry.npmjs.org/@atlaskit/spinner/-/spinner-5.0.2.tgz",
@@ -105,6 +444,27 @@
         "styled-components": "3.3.0"
       }
     },
+    "@atlaskit/tooltip": {
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/@atlaskit/tooltip/-/tooltip-10.1.0.tgz",
+      "integrity": "sha512-qF1p8Ju0Wx8HaoovkeGrNdErzVvmUpxWj6w0Nit6RA8cmx/F/KAc74Un+v/FXdzoK9QapVerHB1iZYb6/oHVQg==",
+      "requires": {
+        "@atlaskit/layer-manager": "4.0.1",
+        "@atlaskit/theme": "4.0.1",
+        "react-deprecate": "0.1.0",
+        "react-transition-group": "2.3.1"
+      },
+      "dependencies": {
+        "@atlaskit/theme": {
+          "version": "4.0.1",
+          "resolved": "https://registry.npmjs.org/@atlaskit/theme/-/theme-4.0.1.tgz",
+          "integrity": "sha512-tkHYJyVspudD90mfkx3Khm7va0OTnx04ha5G+Pyma6BcjyyQuroRj86ttl4+U4FrVWcgHt12B5YlU3YSR2Oy+g==",
+          "requires": {
+            "prop-types": "15.6.1"
+          }
+        }
+      }
+    },
     "@atlaskit/util-shared-styles": {
       "version": "2.10.8",
       "resolved": "https://registry.npmjs.org/@atlaskit/util-shared-styles/-/util-shared-styles-2.10.8.tgz",
@@ -633,6 +993,11 @@
       "integrity": "sha1-7/UuN1gknTO+QCuLuOVkuytdQDE=",
       "dev": true
     },
+    "array-find": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/array-find/-/array-find-1.0.0.tgz",
+      "integrity": "sha1-bI4obRHtdoMn+OYuzuhzU8o+eLg="
+    },
     "array-find-index": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/array-find-index/-/array-find-index-1.0.2.tgz",
@@ -2376,6 +2741,11 @@
       "resolved": "https://registry.npmjs.org/chownr/-/chownr-1.0.1.tgz",
       "integrity": "sha1-4qdQQqlVGQi+vSW4Uj1fl2nXkYE="
     },
+    "chromatism": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/chromatism/-/chromatism-2.6.0.tgz",
+      "integrity": "sha1-xQunFVZbyf69h7V6NRhQ4eUTdqQ="
+    },
     "chrome-trace-event": {
       "version": "0.1.3",
       "resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-0.1.3.tgz",
@@ -2436,6 +2806,11 @@
         }
       }
     },
+    "classnames": {
+      "version": "2.2.5",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.5.tgz",
+      "integrity": "sha1-+zgB1FNGdknvNgPH1hoCvRKb3m0="
+    },
     "clean-css": {
       "version": "4.1.11",
       "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.1.11.tgz",
@@ -3743,6 +4118,11 @@
         "is-symbol": "1.0.1"
       }
     },
+    "es6-object-assign": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/es6-object-assign/-/es6-object-assign-1.1.0.tgz",
+      "integrity": "sha1-wsNYJlYkfDnqEHyx5mUrb58kUjw="
+    },
     "es6-promise": {
       "version": "4.2.4",
       "resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-4.2.4.tgz",
@@ -4613,6 +4993,11 @@
         "readable-stream": "2.3.6"
       }
     },
+    "focusin": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/focusin/-/focusin-2.0.0.tgz",
+      "integrity": "sha1-WMARgN+xlJ8D493u4GNzn8M7b/w="
+    },
     "for-in": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz",
@@ -6673,6 +7058,15 @@
         "postis": "2.2.0",
         "prebuild-install": "2.5.3",
         "robotjs": "github:jitsi/robotjs#5cc469f655669e728b61271c2c57ce97d62976fd"
+      },
+      "dependencies": {
+        "robotjs": {
+          "version": "github:jitsi/robotjs#5cc469f655669e728b61271c2c57ce97d62976fd",
+          "requires": {
+            "nan": "2.10.0",
+            "prebuild-install": "2.5.3"
+          }
+        }
       }
     },
     "js-base64": {
@@ -6983,6 +7377,11 @@
         "array-includes": "3.0.3"
       }
     },
+    "keycode": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/keycode/-/keycode-2.2.0.tgz",
+      "integrity": "sha1-PQr1bce4uOXLqNCpfxByBO7CKwQ="
+    },
     "keyv": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/keyv/-/keyv-3.0.0.tgz",
@@ -7295,6 +7694,11 @@
       "integrity": "sha1-soqmKIorn8ZRA1x3EfZathkDMaY=",
       "dev": true
     },
+    "lodash.clonedeep": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz",
+      "integrity": "sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8="
+    },
     "lodash.get": {
       "version": "4.4.2",
       "resolved": "https://registry.npmjs.org/lodash.get/-/lodash.get-4.4.2.tgz",
@@ -7616,6 +8020,11 @@
         }
       }
     },
+    "memoize-one": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-3.1.1.tgz",
+      "integrity": "sha512-YqVh744GsMlZu6xkhGslPSqSurOv6P+kLN2J3ysBZfagLcL5FdRK/0UpgLoL8hwjjEvvAVkjJZyFP+1T6p1vgA=="
+    },
     "memory-fs": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/memory-fs/-/memory-fs-0.4.1.tgz",
@@ -9505,6 +9914,11 @@
       "integrity": "sha1-nsYfeQSYdXB9aUFFlv2Qek1xHnM=",
       "dev": true
     },
+    "raf-schd": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/raf-schd/-/raf-schd-2.1.2.tgz",
+      "integrity": "sha512-Orl0IEvMtUCgPddgSxtxreK77UiQz4nPYJy9RggVzu4mKsZkQWiAaG1y9HlYWdvm9xtN348xRaT37qkvL/+A+g=="
+    },
     "randomatic": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/randomatic/-/randomatic-3.0.0.tgz",
@@ -9571,6 +9985,16 @@
         "prop-types": "15.6.1"
       }
     },
+    "react-addons-text-content": {
+      "version": "0.0.4",
+      "resolved": "https://registry.npmjs.org/react-addons-text-content/-/react-addons-text-content-0.0.4.tgz",
+      "integrity": "sha1-0uJZ/clR0diQbAiQIAIQjc6HkuU="
+    },
+    "react-deprecate": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/react-deprecate/-/react-deprecate-0.1.0.tgz",
+      "integrity": "sha512-9ooyaovhANHgfuOxXRgrEiEfWjEhvygeSxrRTGxNlXErnXnyHBGjxCxrKYsT/Gsc62lS9rFOBeK0c2wwdyUnvQ=="
+    },
     "react-dom": {
       "version": "16.3.2",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.3.2.tgz",
@@ -10106,13 +10530,6 @@
         "inherits": "2.0.3"
       }
     },
-    "robotjs": {
-      "version": "github:jitsi/robotjs#5cc469f655669e728b61271c2c57ce97d62976fd",
-      "requires": {
-        "nan": "2.10.0",
-        "prebuild-install": "2.5.3"
-      }
-    },
     "run-async": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/run-async/-/run-async-2.3.0.tgz",
@@ -10846,6 +11263,11 @@
       "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.2.0.tgz",
       "integrity": "sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ=="
     },
+    "tabbable": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-1.1.3.tgz",
+      "integrity": "sha512-nOWwx35/JuDI4ONuF0ZTo6lYvI0fY0tZCH1ErzY2EXfu4az50ZyiUX8X073FLiZtmWUVlkRnuXsehjJgCw9tYg=="
+    },
     "table": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/table/-/table-4.0.3.tgz",
diff --git a/package.json b/package.json
index 2215725..fa98280 100644
--- a/package.json
+++ b/package.json
@@ -32,7 +32,11 @@
   "dependencies": {
     "@atlaskit/button": "7.2.5",
     "@atlaskit/css-reset": "2.0.2",
+    "@atlaskit/droplist": "6.0.1",
     "@atlaskit/field-text": "5.1.0",
+    "@atlaskit/icon": "12.0.1",
+    "@atlaskit/navigation": "32.0.2",
+    "@atlaskit/page": "7.0.1",
     "@atlaskit/theme": "3.2.2",
     "electron-is-dev": "0.3.0",
     "history": "4.7.2",