Merge pull request #607 from 0xProject/feature/website/onboarding-setup

Set up structure for onboarding flow along with basic step 0

16 files changed, 338 insertions, 40 deletions

diff --git a/packages/typescript-typings/CHANGELOG.json b/packages/typescript-typings/CHANGELOG.json
index 2e2998bb3..77a5ffad2 100644
--- a/packages/typescript-typings/CHANGELOG.json
+++ b/packages/typescript-typings/CHANGELOG.json
@@ -1,5 +1,13 @@
 [
     {
+        "version": "0.4.0",
+        "changes": [
+            {
+                "note": "Add types for `react-joyride`"
+            }
+        ]
+    },
+    {
         "timestamp": 1527009133,
         "version": "0.3.2",
         "changes": [
diff --git a/packages/typescript-typings/types/react-joyride/index.d.ts b/packages/typescript-typings/types/react-joyride/index.d.ts
new file mode 100644
index 000000000..f126e4c86
--- /dev/null
+++ b/packages/typescript-typings/types/react-joyride/index.d.ts
@@ -0,0 +1,86 @@
+// Type definitions for react-joyride 2.0.0-11
+// Project: https://github.com/gilbarbara/react-joyride
+
+declare module 'react-joyride' {
+    import * as React from 'react';
+    export interface StyleOptions {
+        arrowColor?: string;
+        backgroundColor?: string;
+        primaryColor?: string;
+        textColor?: string;
+        overlayColor?: string;
+        spotlightShadow?: string;
+        beaconSize?: number;
+        zIndex?: number;
+    }
+
+    export type Placement =
+        | 'top'
+        | 'top-left'
+        | 'top-right'
+        | 'bottom'
+        | 'bottom-left'
+        | 'bottom-right'
+        | 'right'
+        | 'left';
+
+    export interface Step {
+        title?: string;
+        content: React.ReactNode;
+        target: string;
+        placement?: Placement;
+        type?: 'click' | 'hover';
+        isFixed?: boolean;
+        allowClicksThruHole?: boolean;
+        disableBeacon?: boolean;
+        style?: StyleOptions;
+        [prop: string]: any;
+    }
+
+    export interface StyleOptionsProp {
+        options: StyleOptions;
+    }
+
+    interface CallbackMetadata {
+        type:
+            | 'tour:start'
+            | 'step:before'
+            | 'beacon'
+            | 'tooltip'
+            | 'close'
+            | 'step:after'
+            | 'tour:end'
+            | 'tour:status'
+            | 'error:target_not_found'
+            | 'error';
+        step: number;
+    }
+
+    export type CallbackData = CallbackMetadata & State;
+
+    export interface Props {
+        steps?: Step[];
+        beaconComponent?: React.ReactNode;
+        disableOverlayClose?: boolean;
+        run?: boolean;
+        stepIndex?: number;
+        callback?: (data: CallbackData) => void;
+        debug?: boolean;
+        styles?: StyleOptionsProp;
+    }
+
+    export interface State {
+        action: string;
+        controlled: boolean;
+        index: number;
+        lifecycle: string;
+        size: 0;
+        status: string;
+    }
+
+    export default class Joyride extends React.Component<Props, State> {
+        constructor(props: Props);
+
+        static defaultProps: Props;
+    }
+}
diff --git a/packages/website/package.json b/packages/website/package.json
index cd0bfaf5e..efe61c4b6 100644
--- a/packages/website/package.json
+++ b/packages/website/package.json
@@ -11,9 +11,12 @@
         "clean": "shx rm -f public/bundle*",
         "lint": "tslint --project . 'ts/**/*.ts' 'ts/**/*.tsx'",
         "watch": "webpack-dev-server --content-base public --https",
-        "deploy_dogfood": "npm run build; aws s3 sync ./public/. s3://dogfood.0xproject.com --profile 0xproject --region us-east-1 --grants read=uri=http://acs.amazonaws.com/groups/global/AllUsers",
-        "deploy_staging": "npm run build; aws s3 sync ./public/. s3://staging-0xproject --profile 0xproject --region us-east-1 --grants read=uri=http://acs.amazonaws.com/groups/global/AllUsers",
-        "deploy_live": "npm run build; aws s3 sync ./public/. s3://0xproject.com --profile 0xproject --region us-east-1 --grants read=uri=http://acs.amazonaws.com/groups/global/AllUsers"
+        "deploy_dogfood":
+            "npm run build; aws s3 sync ./public/. s3://dogfood.0xproject.com --profile 0xproject --region us-east-1 --grants read=uri=http://acs.amazonaws.com/groups/global/AllUsers",
+        "deploy_staging":
+            "npm run build; aws s3 sync ./public/. s3://staging-0xproject --profile 0xproject --region us-east-1 --grants read=uri=http://acs.amazonaws.com/groups/global/AllUsers",
+        "deploy_live":
+            "npm run build; aws s3 sync ./public/. s3://0xproject.com --profile 0xproject --region us-east-1 --grants read=uri=http://acs.amazonaws.com/groups/global/AllUsers"
     },
     "author": "Fabio Berger",
     "license": "Apache-2.0",
@@ -42,6 +45,7 @@
         "react-document-title": "^2.0.3",
         "react-dom": "15.6.1",
         "react-ga": "^2.4.1",
+        "react-joyride": "^2.0.0-11",
         "react-redux": "^5.0.3",
         "react-router-dom": "^4.1.1",
         "react-scroll": "^1.5.2",
diff --git a/packages/website/ts/components/onboarding/onboarding_flow.tsx b/packages/website/ts/components/onboarding/onboarding_flow.tsx
new file mode 100644
index 000000000..621d14260
--- /dev/null
+++ b/packages/website/ts/components/onboarding/onboarding_flow.tsx
@@ -0,0 +1,39 @@
+import * as _ from 'lodash';
+import * as React from 'react';
+import Joyride, { CallbackData, Step, StyleOptions } from 'react-joyride';
+
+import { zIndex } from 'ts/utils/style';
+
+export interface OnboardingFlowProps {
+    steps: Step[];
+    stepIndex: number;
+    isRunning: boolean;
+    onClose: () => void;
+}
+
+const joyrideStyleOptions: StyleOptions = {
+    zIndex: zIndex.overlay,
+};
+
+// Wrapper around Joyride with defaults and styles set
+export class OnboardingFlow extends React.Component<OnboardingFlowProps> {
+    public render(): React.ReactNode {
+        return (
+            <Joyride
+                run={this.props.isRunning}
+                debug={true}
+                steps={this.props.steps}
+                stepIndex={this.props.stepIndex}
+                styles={{ options: joyrideStyleOptions }}
+                callback={this._handleChange.bind(this)}
+            />
+        );
+    }
+
+    private _handleChange(data: CallbackData): void {
+        switch (data.action) {
+            case 'close':
+                this.props.onClose();
+        }
+    }
+}
diff --git a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
new file mode 100644
index 000000000..11684aaee
--- /dev/null
+++ b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { Step } from 'react-joyride';
+
+import { OnboardingFlow } from 'ts/components/onboarding/onboarding_flow';
+
+export interface PortalOnboardingFlowProps {
+    stepIndex: number;
+    isRunning: boolean;
+    onClose: () => void;
+}
+
+const steps: Step[] = [
+    {
+        target: '.wallet',
+        content: 'You are onboarding right now!',
+        placement: 'right',
+        disableBeacon: true,
+    },
+];
+
+export class PortalOnboardingFlow extends React.Component<PortalOnboardingFlowProps> {
+    public render(): React.ReactNode {
+        return (
+            <OnboardingFlow
+                steps={steps}
+                stepIndex={this.props.stepIndex}
+                isRunning={this.props.isRunning}
+                onClose={this.props.onClose}
+            />
+        );
+    }
+}
diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx
index 1bd318c28..a03731ec0 100644
--- a/packages/website/ts/components/portal/portal.tsx
+++ b/packages/website/ts/components/portal/portal.tsx
@@ -20,9 +20,12 @@ import { RelayerIndex } from 'ts/components/relayer_index/relayer_index';
 import { TokenBalances } from 'ts/components/token_balances';
 import { TopBar, TopBarDisplayType } from 'ts/components/top_bar/top_bar';
 import { TradeHistory } from 'ts/components/trade_history/trade_history';
+import { Container } from 'ts/components/ui/container';
 import { FlashMessage } from 'ts/components/ui/flash_message';
+import { Island } from 'ts/components/ui/island';
 import { Wallet } from 'ts/components/wallet/wallet';
 import { GenerateOrderForm } from 'ts/containers/generate_order_form';
+import { PortalOnboardingFlow } from 'ts/containers/portal_onboarding_flow';
 import { localStorage } from 'ts/local_storage/local_storage';
 import { trackedTokenStorage } from 'ts/local_storage/tracked_token_storage';
 import { FullscreenMessage } from 'ts/pages/fullscreen_message';
@@ -183,6 +186,7 @@ export class Portal extends React.Component<PortalProps, PortalState> {
                 : TokenVisibility.TRACKED;
         return (
             <div style={styles.root}>
+                <PortalOnboardingFlow />
                 <DocumentTitle title="0x Portal DApp" />
                 <TopBar
                     userAddress={this.props.userAddress}
@@ -278,25 +282,37 @@ export class Portal extends React.Component<PortalProps, PortalState> {
         const allTokens = _.values(this.props.tokenByAddress);
         const trackedTokens = _.filter(allTokens, t => t.isTracked);
         return (
-            <Wallet
-                userAddress={this.props.userAddress}
-                networkId={this.props.networkId}
-                blockchain={this._blockchain}
-                blockchainIsLoaded={this.props.blockchainIsLoaded}
-                blockchainErr={this.props.blockchainErr}
-                dispatcher={this.props.dispatcher}
-                tokenByAddress={this.props.tokenByAddress}
-                trackedTokens={trackedTokens}
-                userEtherBalanceInWei={this.props.userEtherBalanceInWei}
-                lastForceTokenStateRefetch={this.props.lastForceTokenStateRefetch}
-                injectedProviderName={this.props.injectedProviderName}
-                providerType={this.props.providerType}
-                onToggleLedgerDialog={this._onToggleLedgerDialog.bind(this)}
-                onAddToken={this._onAddToken.bind(this)}
-                onRemoveToken={this._onRemoveToken.bind(this)}
-            />
+            <div>
+                <Wallet
+                    userAddress={this.props.userAddress}
+                    networkId={this.props.networkId}
+                    blockchain={this._blockchain}
+                    blockchainIsLoaded={this.props.blockchainIsLoaded}
+                    blockchainErr={this.props.blockchainErr}
+                    dispatcher={this.props.dispatcher}
+                    tokenByAddress={this.props.tokenByAddress}
+                    trackedTokens={trackedTokens}
+                    userEtherBalanceInWei={this.props.userEtherBalanceInWei}
+                    lastForceTokenStateRefetch={this.props.lastForceTokenStateRefetch}
+                    injectedProviderName={this.props.injectedProviderName}
+                    providerType={this.props.providerType}
+                    onToggleLedgerDialog={this._onToggleLedgerDialog.bind(this)}
+                    onAddToken={this._onAddToken.bind(this)}
+                    onRemoveToken={this._onRemoveToken.bind(this)}
+                />
+                <Container marginTop="15px">
+                    <Island>
+                        {/** TODO: Implement real styles. */}
+                        <p onClick={this._startOnboarding.bind(this)}>Start onboarding flow.</p>
+                    </Island>
+                </Container>
+            </div>
         );
     }
+
+    private _startOnboarding(): void {
+        this.props.dispatcher.updatePortalOnboardingShowing(true);
+    }
     private _renderWalletSection(): React.ReactNode {
         return <Section header={<TextHeader labelText="Your Account" />} body={this._renderWallet()} />;
     }
diff --git a/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx b/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx
index dc9eeb29d..23c2f0b56 100644
--- a/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx
+++ b/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx
@@ -4,6 +4,7 @@ import { GridTile } from 'material-ui/GridList';
 import * as React from 'react';
 
 import { TopTokens } from 'ts/components/relayer_index/relayer_top_tokens';
+import { Island } from 'ts/components/ui/island';
 import { TokenIcon } from 'ts/components/ui/token_icon';
 import { Token, WebsiteBackendRelayerInfo } from 'ts/types';
 import { colors } from 'ts/utils/colors';
@@ -15,13 +16,6 @@ export interface RelayerGridTileProps {
 
 const styles: Styles = {
     root: {
-        backgroundColor: colors.white,
-        borderBottomRightRadius: 10,
-        borderBottomLeftRadius: 10,
-        borderTopRightRadius: 10,
-        borderTopLeftRadius: 10,
-        boxShadow: `0px 4px 6px ${colors.walletBoxShadow}`,
-        overflow: 'hidden',
         boxSizing: 'border-box',
     },
     innerDiv: {
@@ -68,7 +62,7 @@ const FALLBACK_IMG_SRC = '/images/landing/hero_chip_image.png';
 export const RelayerGridTile: React.StatelessComponent<RelayerGridTileProps> = (props: RelayerGridTileProps) => {
     const link = props.relayerInfo.appUrl || props.relayerInfo.url;
     return (
-        <GridTile style={styles.root}>
+        <Island style={styles.root} Component={GridTile}>
             <div style={styles.innerDiv}>
                 <a href={link} target="_blank" style={{ textDecoration: 'none' }}>
                     <ImgWithFallback
@@ -91,7 +85,7 @@ export const RelayerGridTile: React.StatelessComponent<RelayerGridTileProps> = (
                     </div>
                 </div>
             </div>
-        </GridTile>
+        </Island>
     );
 };
 
diff --git a/packages/website/ts/components/top_bar/top_bar.tsx b/packages/website/ts/components/top_bar/top_bar.tsx
index f2d0c6177..db8e3cb82 100644
--- a/packages/website/ts/components/top_bar/top_bar.tsx
+++ b/packages/website/ts/components/top_bar/top_bar.tsx
@@ -18,6 +18,7 @@ import { Identicon } from 'ts/components/ui/identicon';
 import { Dispatcher } from 'ts/redux/dispatcher';
 import { Deco, Key, ProviderType, WebsiteLegacyPaths, WebsitePaths } from 'ts/types';
 import { constants } from 'ts/utils/constants';
+import { zIndex } from 'ts/utils/style';
 import { Translate } from 'ts/utils/translate';
 import { utils } from 'ts/utils/utils';
 
@@ -59,7 +60,7 @@ const styles: Styles = {
         width: '100%',
         position: 'relative',
         top: 0,
-        zIndex: 1100,
+        zIndex: zIndex.topBar,
         paddingBottom: 1,
     },
     bottomBar: {
diff --git a/packages/website/ts/components/ui/container.tsx b/packages/website/ts/components/ui/container.tsx
new file mode 100644
index 000000000..07868608c
--- /dev/null
+++ b/packages/website/ts/components/ui/container.tsx
@@ -0,0 +1,16 @@
+import * as React from 'react';
+
+export interface ContainerProps {
+    marginTop?: string | number;
+    marginBottom?: string | number;
+    marginRight?: string | number;
+    marginLeft?: string | number;
+    children?: React.ReactNode;
+}
+
+export const Container: React.StatelessComponent<ContainerProps> = (props: ContainerProps) => {
+    const { children, ...style } = props;
+    return <div style={style}>{children}</div>;
+};
+
+Container.displayName = 'Container';
diff --git a/packages/website/ts/components/ui/island.tsx b/packages/website/ts/components/ui/island.tsx
new file mode 100644
index 000000000..f5480c9c9
--- /dev/null
+++ b/packages/website/ts/components/ui/island.tsx
@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { Styleable } from 'ts/types';
+import { colors } from 'ts/utils/colors';
+
+export interface IslandProps {
+    style?: React.CSSProperties;
+    children?: React.ReactNode;
+    className?: string;
+    Component?: string | React.ComponentClass<any> | React.StatelessComponent<any>;
+}
+
+const defaultStyle: React.CSSProperties = {
+    backgroundColor: colors.white,
+    borderBottomRightRadius: 10,
+    borderBottomLeftRadius: 10,
+    borderTopRightRadius: 10,
+    borderTopLeftRadius: 10,
+    boxShadow: `0px 4px 6px ${colors.walletBoxShadow}`,
+    overflow: 'hidden',
+};
+
+export const Island: React.StatelessComponent<IslandProps> = (props: IslandProps) => (
+    <props.Component style={{ ...defaultStyle, ...props.style }} className={props.className}>
+        {props.children}
+    </props.Component>
+);
+
+Island.defaultProps = {
+    Component: 'div',
+    style: {},
+};
+
+Island.displayName = 'Island';
diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx
index d0354580d..39e591bac 100644
--- a/packages/website/ts/components/wallet/wallet.tsx
+++ b/packages/website/ts/components/wallet/wallet.tsx
@@ -25,6 +25,7 @@ import { Blockchain } from 'ts/blockchain';
 import { AllowanceToggle } from 'ts/components/inputs/allowance_toggle';
 import { IconButton } from 'ts/components/ui/icon_button';
 import { Identicon } from 'ts/components/ui/identicon';
+import { Island } from 'ts/components/ui/island';
 import { TokenIcon } from 'ts/components/ui/token_icon';
 import { WalletDisconnectedItem } from 'ts/components/wallet/wallet_disconnected_item';
 import { WrapEtherItem } from 'ts/components/wallet/wrap_ether_item';
@@ -84,13 +85,6 @@ interface AccessoryItemConfig {
 const styles: Styles = {
     root: {
         width: '100%',
-        backgroundColor: colors.white,
-        borderBottomRightRadius: 10,
-        borderBottomLeftRadius: 10,
-        borderTopRightRadius: 10,
-        borderTopLeftRadius: 10,
-        boxShadow: `0px 4px 6px ${colors.walletBoxShadow}`,
-        overflow: 'hidden',
     },
     headerItemInnerDiv: {
         paddingLeft: 65,
@@ -198,11 +192,11 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
         const isReadyToRender = this.props.blockchainIsLoaded && this.props.blockchainErr === BlockchainErrs.NoError;
         const isAddressAvailable = !_.isEmpty(this.props.userAddress);
         return (
-            <div className="flex flex-column" style={styles.root}>
+            <Island className="flex flex-column wallet" style={styles.root}>
                 {isReadyToRender && isAddressAvailable
                     ? _.concat(this._renderConnectedHeaderRows(), this._renderBody(), this._renderFooterRows())
                     : _.concat(this._renderDisconnectedHeaderRows(), this._renderDisconnectedRows())}
-            </div>
+            </Island>
         );
     }
     private _renderDisconnectedHeaderRows(): React.ReactElement<{}> {
diff --git a/packages/website/ts/containers/portal_onboarding_flow.ts b/packages/website/ts/containers/portal_onboarding_flow.ts
new file mode 100644
index 000000000..3cd4e8510
--- /dev/null
+++ b/packages/website/ts/containers/portal_onboarding_flow.ts
@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { connect } from 'react-redux';
+import { Dispatch } from 'redux';
+import { ActionTypes } from 'ts/types';
+
+import { PortalOnboardingFlow as PortalOnboardingFlowComponent } from 'ts/components/onboarding/portal_onboarding_flow';
+import { State } from 'ts/redux/reducer';
+
+interface PortalOnboardingFlowProps {}
+
+interface ConnectedState {
+    stepIndex: number;
+    isRunning: boolean;
+}
+
+interface ConnectedDispatch {
+    onClose: () => void;
+}
+
+const mapStateToProps = (state: State): ConnectedState => ({
+    stepIndex: state.portalOnboardingStep,
+    isRunning: state.isPortalOnboardingShowing,
+});
+
+const mapDispatchToProps = (dispatch: Dispatch<State>): ConnectedDispatch => ({
+    onClose: (): void => {
+        dispatch({
+            type: ActionTypes.UpdatePortalOnboardingShowing,
+            data: false,
+        });
+    },
+});
+
+export const PortalOnboardingFlow: React.ComponentClass<PortalOnboardingFlowProps> = connect(
+    mapStateToProps,
+    mapDispatchToProps,
+)(PortalOnboardingFlowComponent);
diff --git a/packages/website/ts/redux/dispatcher.ts b/packages/website/ts/redux/dispatcher.ts
index 340b80d49..0b4cc3938 100644
--- a/packages/website/ts/redux/dispatcher.ts
+++ b/packages/website/ts/redux/dispatcher.ts
@@ -174,6 +174,13 @@ export class Dispatcher {
         });
     }
 
+    public updatePortalOnboardingShowing(isShowing: boolean): void {
+        this._dispatch({
+            data: isShowing,
+            type: ActionTypes.UpdatePortalOnboardingShowing,
+        });
+    }
+
     // Docs
     public updateCurrentDocsVersion(version: string): void {
         this._dispatch({
diff --git a/packages/website/ts/redux/reducer.ts b/packages/website/ts/redux/reducer.ts
index fba6afa5d..e61345c87 100644
--- a/packages/website/ts/redux/reducer.ts
+++ b/packages/website/ts/redux/reducer.ts
@@ -40,6 +40,8 @@ export interface State {
     lastForceTokenStateRefetch: number;
     userAddress: string;
     userEtherBalanceInWei: BigNumber;
+    portalOnboardingStep: number;
+    isPortalOnboardingShowing: boolean;
     // Note: cache of supplied orderJSON in fill order step. Do not use for anything else.
     userSuppliedOrderCache: Order;
 
@@ -80,7 +82,8 @@ const INITIAL_STATE: State = {
     userAddress: '',
     userEtherBalanceInWei: new BigNumber(0),
     userSuppliedOrderCache: undefined,
-
+    portalOnboardingStep: 0,
+    isPortalOnboardingShowing: false,
     // Docs
     docsVersion: DEFAULT_DOCS_VERSION,
     availableDocVersions: [DEFAULT_DOCS_VERSION],
@@ -293,6 +296,22 @@ export function reducer(state: State = INITIAL_STATE, action: Action): State {
             };
         }
 
+        case ActionTypes.UpdatePortalOnboardingStep: {
+            const portalOnboardingStep = action.data;
+            return {
+                ...state,
+                portalOnboardingStep,
+            };
+        }
+
+        case ActionTypes.UpdatePortalOnboardingShowing: {
+            const isPortalOnboardingShowing = action.data;
+            return {
+                ...state,
+                isPortalOnboardingShowing,
+            };
+        }
+
         // Docs
         case ActionTypes.UpdateLibraryVersion: {
             return {
diff --git a/packages/website/ts/types.ts b/packages/website/ts/types.ts
index 294a58f64..aca3edae8 100644
--- a/packages/website/ts/types.ts
+++ b/packages/website/ts/types.ts
@@ -1,6 +1,7 @@
 import { ECSignature } from '@0xproject/types';
 import { BigNumber } from '@0xproject/utils';
 import * as _ from 'lodash';
+import * as React from 'react';
 
 export enum Side {
     Receive = 'RECEIVE',
@@ -21,6 +22,11 @@ export interface TokenByAddress {
     [address: string]: Token;
 }
 
+export interface Styleable {
+    style: React.CSSProperties;
+    children: React.ReactNode;
+}
+
 export interface AssetToken {
     address?: string;
     amount?: BigNumber;
@@ -125,6 +131,8 @@ export enum ActionTypes {
     UpdateUserSuppliedOrderCache = 'UPDATE_USER_SUPPLIED_ORDER_CACHE',
     UpdateOrderFillAmount = 'UPDATE_ORDER_FILL_AMOUNT',
     UpdateShouldBlockchainErrDialogBeOpen = 'UPDATE_SHOULD_BLOCKCHAIN_ERR_DIALOG_BE_OPEN',
+    UpdatePortalOnboardingStep = 'UPDATE_ONBOARDING_STEP',
+    UpdatePortalOnboardingShowing = 'UPDATE_PORTAL_ONBOARDING_SHOWING',
 
     // Docs
     UpdateLibraryVersion = 'UPDATE_LIBRARY_VERSION',
diff --git a/packages/website/ts/utils/style.ts b/packages/website/ts/utils/style.ts
new file mode 100644
index 000000000..51b6e4eb6
--- /dev/null
+++ b/packages/website/ts/utils/style.ts
@@ -0,0 +1,4 @@
+export const zIndex = {
+    topBar: 1100,
+    overlay: 1101,
+};