Merge pull request #746 from 0xProject/feature/website/relayer-grid-polish

Relayer grid polish

11 files changed, 138 insertions, 152 deletions

diff --git a/packages/website/ts/components/onboarding/onboarding_flow.tsx b/packages/website/ts/components/onboarding/onboarding_flow.tsx
index 331899469..ec8d96191 100644
--- a/packages/website/ts/components/onboarding/onboarding_flow.tsx
+++ b/packages/website/ts/components/onboarding/onboarding_flow.tsx
@@ -42,7 +42,11 @@ export class OnboardingFlow extends React.Component<OnboardingFlowProps> {
             onboardingElement = <Animation type="easeUpFromBottom">{this._renderOnboardignCard()}</Animation>;
         } else {
             onboardingElement = (
-                <Popper referenceElement={this._getElementForStep()} placement={this._getCurrentStep().placement}>
+                <Popper
+                    referenceElement={this._getElementForStep()}
+                    placement={this._getCurrentStep().placement}
+                    positionFixed={true}
+                >
                     {this._renderPopperChildren.bind(this)}
                 </Popper>
             );
diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx
index 11b3b43f4..c9f2b2633 100644
--- a/packages/website/ts/components/portal/portal.tsx
+++ b/packages/website/ts/components/portal/portal.tsx
@@ -1,4 +1,4 @@
-import { colors, constants as sharedConstants, Styles } from '@0xproject/react-shared';
+import { colors, constants as sharedConstants } from '@0xproject/react-shared';
 import { BigNumber } from '@0xproject/utils';
 import * as _ from 'lodash';
 import ActionAccountBalanceWallet from 'material-ui/svg-icons/action/account-balance-wallet';
@@ -107,26 +107,7 @@ const TOP_BAR_HEIGHT = TopBar.heightForDisplayType(TopBarDisplayType.Expanded);
 const LEFT_COLUMN_WIDTH = 346;
 const MENU_PADDING_LEFT = 185;
 const LARGE_LAYOUT_MAX_WIDTH = 1200;
-
-const styles: Styles = {
-    root: {
-        width: '100%',
-        height: '100%',
-        backgroundColor: colors.lightestGrey,
-    },
-    body: {
-        height: `calc(100vh - ${TOP_BAR_HEIGHT}px)`,
-    },
-    leftColumn: {
-        width: LEFT_COLUMN_WIDTH,
-        height: '100%',
-    },
-    scrollContainer: {
-        height: `calc(100vh - ${TOP_BAR_HEIGHT}px)`,
-        WebkitOverflowScrolling: 'touch',
-        overflow: 'auto',
-    },
-};
+const LARGE_LAYOUT_MARGIN = 30;
 
 export class Portal extends React.Component<PortalProps, PortalState> {
     private _blockchain: Blockchain;
@@ -245,7 +226,7 @@ export class Portal extends React.Component<PortalProps, PortalState> {
                 ? TokenVisibility.UNTRACKED
                 : TokenVisibility.TRACKED;
         return (
-            <div style={styles.root}>
+            <Container>
                 <DocumentTitle title="0x Portal DApp" />
                 <TopBar
                     userAddress={this.props.userAddress}
@@ -259,10 +240,15 @@ export class Portal extends React.Component<PortalProps, PortalState> {
                     blockchain={this._blockchain}
                     translate={this.props.translate}
                     displayType={TopBarDisplayType.Expanded}
-                    style={{ backgroundColor: colors.lightestGrey }}
+                    style={{
+                        backgroundColor: colors.lightestGrey,
+                        position: 'fixed',
+                        // Hack: used to make onboarding z-index logic work for both mobile and desktop
+                        zIndex: utils.isMobile(this.props.screenWidth) ? zIndex.topBar : undefined,
+                    }}
                     maxWidth={LARGE_LAYOUT_MAX_WIDTH}
                 />
-                <div id="portal" style={styles.body}>
+                <Container marginTop={TOP_BAR_HEIGHT} minHeight="100vh" backgroundColor={colors.lightestGrey}>
                     <Switch>
                         <Route path={`${WebsitePaths.Portal}/:route`} render={this._renderOtherRoutes.bind(this)} />
                         <Route
@@ -301,13 +287,8 @@ export class Portal extends React.Component<PortalProps, PortalState> {
                         tokenByAddress={this.props.tokenByAddress}
                         tokenVisibility={tokenVisibility}
                     />
-                </div>
-                <PortalOnboardingFlow
-                    blockchain={this._blockchain}
-                    trackedTokenStateByAddress={this.state.trackedTokenStateByAddress}
-                    refetchTokenStateAsync={this._refetchTokenStateAsync.bind(this)}
-                />
-            </div>
+                </Container>
+            </Container>
         );
     }
     private _renderMainRoute(): React.ReactNode {
@@ -341,41 +322,48 @@ export class Portal extends React.Component<PortalProps, PortalState> {
     }
     private _renderWallet(): React.ReactNode {
         const startOnboarding = this._renderStartOnboarding();
-        const isMobile = this.props.screenWidth === ScreenWidths.Sm;
+        const isMobile = utils.isMobile(this.props.screenWidth);
         // We need room to scroll down for mobile onboarding
         const marginBottom = isMobile ? '200px' : '15px';
         return (
             <div>
-                {isMobile && <Container marginBottom="15px">{startOnboarding}</Container>}
-                <Container marginBottom={marginBottom}>
-                    <Wallet
-                        style={
-                            !isMobile && this.props.isPortalOnboardingShowing
-                                ? { zIndex: zIndex.aboveOverlay, position: 'relative' }
-                                : undefined
-                        }
-                        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={this._getCurrentTrackedTokens()}
-                        userEtherBalanceInWei={this.props.userEtherBalanceInWei}
-                        lastForceTokenStateRefetch={this.props.lastForceTokenStateRefetch}
-                        injectedProviderName={this.props.injectedProviderName}
-                        providerType={this.props.providerType}
-                        screenWidth={this.props.screenWidth}
-                        location={this.props.location}
-                        trackedTokenStateByAddress={this.state.trackedTokenStateByAddress}
-                        onToggleLedgerDialog={this._onToggleLedgerDialog.bind(this)}
-                        onAddToken={this._onAddToken.bind(this)}
-                        onRemoveToken={this._onRemoveToken.bind(this)}
-                        refetchTokenStateAsync={this._refetchTokenStateAsync.bind(this)}
-                    />
+                <Container>
+                    {isMobile && <Container marginBottom="15px">{startOnboarding}</Container>}
+                    <Container marginBottom={marginBottom}>
+                        <Wallet
+                            style={
+                                !isMobile && this.props.isPortalOnboardingShowing
+                                    ? { zIndex: zIndex.aboveOverlay, position: 'relative' }
+                                    : undefined
+                            }
+                            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={this._getCurrentTrackedTokens()}
+                            userEtherBalanceInWei={this.props.userEtherBalanceInWei}
+                            lastForceTokenStateRefetch={this.props.lastForceTokenStateRefetch}
+                            injectedProviderName={this.props.injectedProviderName}
+                            providerType={this.props.providerType}
+                            screenWidth={this.props.screenWidth}
+                            location={this.props.location}
+                            trackedTokenStateByAddress={this.state.trackedTokenStateByAddress}
+                            onToggleLedgerDialog={this._onToggleLedgerDialog.bind(this)}
+                            onAddToken={this._onAddToken.bind(this)}
+                            onRemoveToken={this._onRemoveToken.bind(this)}
+                            refetchTokenStateAsync={this._refetchTokenStateAsync.bind(this)}
+                        />
+                    </Container>
+                    {!isMobile && <Container marginTop="15px">{startOnboarding}</Container>}
                 </Container>
-                {!isMobile && <Container marginTop="15px">{startOnboarding}</Container>}
+                <PortalOnboardingFlow
+                    blockchain={this._blockchain}
+                    trackedTokenStateByAddress={this.state.trackedTokenStateByAddress}
+                    refetchTokenStateAsync={this._refetchTokenStateAsync.bind(this)}
+                />
             </div>
         );
     }
@@ -551,7 +539,7 @@ export class Portal extends React.Component<PortalProps, PortalState> {
     private _renderRelayerIndexSection(): React.ReactNode {
         return (
             <Section
-                header={<TextHeader labelText="Explore 0x Relayers" />}
+                header={<TextHeader labelText="0x Relayers" />}
                 body={<RelayerIndex networkId={this.props.networkId} screenWidth={this.props.screenWidth} />}
             />
         );
@@ -709,12 +697,16 @@ interface LargeLayoutProps {
 const LargeLayout = (props: LargeLayoutProps) => {
     return (
         <div className="mx-auto flex flex-center" style={{ maxWidth: LARGE_LAYOUT_MAX_WIDTH }}>
-            <div className="flex-last px2">
-                <div style={styles.leftColumn}>{props.left}</div>
-            </div>
-            <div className="flex-auto px2" style={styles.scrollContainer}>
-                {props.right}
+            <div className="flex-last">
+                <Container width={LEFT_COLUMN_WIDTH} position="fixed" marginLeft={LARGE_LAYOUT_MARGIN}>
+                    {props.left}
+                </Container>
             </div>
+            <Container className="flex-auto" marginLeft={LEFT_COLUMN_WIDTH + LARGE_LAYOUT_MARGIN}>
+                <Container className="flex-auto" marginLeft={LARGE_LAYOUT_MARGIN} marginRight={LARGE_LAYOUT_MARGIN}>
+                    {props.right}
+                </Container>
+            </Container>
         </div>
     );
 };
@@ -725,9 +717,7 @@ interface SmallLayoutProps {
 const SmallLayout = (props: SmallLayoutProps) => {
     return (
         <div className="flex flex-center">
-            <div className="flex-auto px3" style={styles.scrollContainer}>
-                {props.content}
-            </div>
+            <div className="flex-auto px3">{props.content}</div>
         </div>
     );
 }; // tslint:disable:max-file-line-count
diff --git a/packages/website/ts/components/portal/text_header.tsx b/packages/website/ts/components/portal/text_header.tsx
index 4aabd47d0..853da3a29 100644
--- a/packages/website/ts/components/portal/text_header.tsx
+++ b/packages/website/ts/components/portal/text_header.tsx
@@ -1,21 +1,16 @@
-import { Styles } from '@0xproject/react-shared';
+import { colors } from '@0xproject/react-shared';
 import * as React from 'react';
 
+import { Text } from 'ts/components/ui/text';
+
 export interface TextHeaderProps {
     labelText: string;
 }
 
-const styles: Styles = {
-    title: {
-        fontWeight: 'bold',
-        fontSize: 20,
-    },
-};
-
 export const TextHeader = (props: TextHeaderProps) => {
     return (
-        <div className="py3" style={styles.title}>
+        <Text className="pt3 pb2" fontWeight="bold" fontSize="16px" fontColor={colors.darkestGrey}>
             {props.labelText}
-        </div>
+        </Text>
     );
 };
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 23860856b..18b069ae2 100644
--- a/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx
+++ b/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx
@@ -1,6 +1,6 @@
 import { constants as sharedConstants, Styles } from '@0xproject/react-shared';
 import * as _ from 'lodash';
-import { GridTile } from 'material-ui/GridList';
+import { GridTile as PlainGridTile } from 'material-ui/GridList';
 import * as React from 'react';
 import { analytics } from 'ts/utils/analytics';
 
@@ -9,7 +9,9 @@ import { Container } from 'ts/components/ui/container';
 import { Image } from 'ts/components/ui/image';
 import { Island } from 'ts/components/ui/island';
 import { colors } from 'ts/style/colors';
+import { styled } from 'ts/style/theme';
 import { WebsiteBackendRelayerInfo } from 'ts/types';
+import { utils } from 'ts/utils/utils';
 
 export interface RelayerGridTileProps {
     relayerInfo: WebsiteBackendRelayerInfo;
@@ -19,29 +21,23 @@ export interface RelayerGridTileProps {
 const styles: Styles = {
     root: {
         boxSizing: 'border-box',
+        // All material UI components have position: relative
+        // which creates a new stacking context and makes z-index stuff impossible. So reset.
+        position: 'static',
     },
     innerDiv: {
-        padding: 6,
         height: '100%',
         boxSizing: 'border-box',
     },
     header: {
         height: '50%',
         width: '100%',
-        borderBottomRightRadius: 4,
-        borderBottomLeftRadius: 4,
-        borderTopRightRadius: 4,
-        borderTopLeftRadius: 4,
-        borderWidth: 1,
-        borderStyle: 'solid',
-        borderColor: colors.walletBorder,
     },
     body: {
-        paddingLeft: 6,
-        paddingRight: 6,
         height: '50%',
         width: '100%',
         boxSizing: 'border-box',
+        padding: 12,
     },
     weeklyTradeVolumeLabel: {
         fontSize: 14,
@@ -69,7 +65,10 @@ export const RelayerGridTile: React.StatelessComponent<RelayerGridTileProps> = (
     const weeklyTxnVolume = props.relayerInfo.weeklyTxnVolume;
     const networkName = sharedConstants.NETWORK_NAME_BY_ID[props.networkId];
     const eventLabel = `${props.relayerInfo.name}-${networkName}`;
-    const trackRelayerClick = () => analytics.logEvent('Portal', 'Relayer Click', eventLabel);
+    const onClick = () => {
+        analytics.logEvent('Portal', 'Relayer Click', eventLabel);
+        utils.openUrl(link);
+    };
     const headerImageUrl = props.relayerInfo.logoImgUrl;
     const headerBackgroundColor =
         !_.isUndefined(headerImageUrl) && !_.isUndefined(props.relayerInfo.primaryColor)
@@ -77,22 +76,17 @@ export const RelayerGridTile: React.StatelessComponent<RelayerGridTileProps> = (
             : FALLBACK_PRIMARY_COLOR;
     return (
         <Island style={styles.root} Component={GridTile}>
-            <div style={styles.innerDiv}>
-                <a href={link} target="_blank" style={{ textDecoration: 'none' }} onClick={trackRelayerClick}>
-                    <div
-                        className="flex items-center"
-                        style={{ ...styles.header, backgroundColor: headerBackgroundColor }}
-                    >
-                        <Image
-                            className="mx-auto"
-                            src={props.relayerInfo.logoImgUrl}
-                            fallbackSrc={FALLBACK_IMG_SRC}
-                            height={RELAYER_ICON_HEIGHT}
-                        />
-                    </div>
-                </a>
+            <div style={styles.innerDiv} onClick={onClick}>
+                <div className="flex items-center" style={{ ...styles.header, backgroundColor: headerBackgroundColor }}>
+                    <Image
+                        className="mx-auto"
+                        src={props.relayerInfo.logoImgUrl}
+                        fallbackSrc={FALLBACK_IMG_SRC}
+                        height={RELAYER_ICON_HEIGHT}
+                    />
+                </div>
                 <div style={styles.body}>
-                    <div className="py1" style={styles.relayerNameLabel}>
+                    <div className="pb1" style={styles.relayerNameLabel}>
                         {props.relayerInfo.name}
                     </div>
                     <Section titleText="Weekly Trade Volume">
@@ -111,6 +105,14 @@ export const RelayerGridTile: React.StatelessComponent<RelayerGridTileProps> = (
     );
 };
 
+const GridTile = styled(PlainGridTile)`
+    cursor: pointer;
+    transition: transform 0.2s ease;
+    &:hover {
+        transform: translate(0px, -3px);
+    }
+`;
+
 interface SectionProps {
     titleText: string;
     children?: React.ReactNode;
diff --git a/packages/website/ts/components/relayer_index/relayer_index.tsx b/packages/website/ts/components/relayer_index/relayer_index.tsx
index d565eb608..4aea1bbbb 100644
--- a/packages/website/ts/components/relayer_index/relayer_index.tsx
+++ b/packages/website/ts/components/relayer_index/relayer_index.tsx
@@ -1,4 +1,3 @@
-import { Styles } from '@0xproject/react-shared';
 import * as _ from 'lodash';
 import CircularProgress from 'material-ui/CircularProgress';
 import { GridList } from 'material-ui/GridList';
@@ -6,7 +5,6 @@ import * as React from 'react';
 
 import { RelayerGridTile } from 'ts/components/relayer_index/relayer_grid_tile';
 import { Retry } from 'ts/components/ui/retry';
-import { colors } from 'ts/style/colors';
 import { ScreenWidths, WebsiteBackendRelayerInfo } from 'ts/types';
 import { backendClient } from 'ts/utils/backend_client';
 
@@ -20,22 +18,6 @@ interface RelayerIndexState {
     error?: Error;
 }
 
-const styles: Styles = {
-    root: {
-        width: '100%',
-    },
-    item: {
-        backgroundColor: colors.white,
-        borderBottomRightRadius: 10,
-        borderBottomLeftRadius: 10,
-        borderTopRightRadius: 10,
-        borderTopLeftRadius: 10,
-        boxShadow: `0px 4px 6px ${colors.walletBoxShadow}`,
-        overflow: 'hidden',
-        padding: 4,
-    },
-};
-
 const CELL_HEIGHT = 290;
 const NUMBER_OF_COLUMNS_LARGE = 3;
 const NUMBER_OF_COLUMNS_MEDIUM = 2;
@@ -76,18 +58,16 @@ export class RelayerIndex extends React.Component<RelayerIndexProps, RelayerInde
         } else {
             const numberOfColumns = this._numberOfColumnsForScreenWidth(this.props.screenWidth);
             return (
-                <div style={styles.root}>
-                    <GridList
-                        cellHeight={CELL_HEIGHT}
-                        cols={numberOfColumns}
-                        padding={GRID_PADDING}
-                        style={styles.gridList}
-                    >
-                        {this.state.relayerInfos.map((relayerInfo: WebsiteBackendRelayerInfo, index) => (
-                            <RelayerGridTile key={index} relayerInfo={relayerInfo} networkId={this.props.networkId} />
-                        ))}
-                    </GridList>
-                </div>
+                <GridList
+                    cellHeight={CELL_HEIGHT}
+                    cols={numberOfColumns}
+                    padding={GRID_PADDING}
+                    style={{ marginTop: -10, marginBottom: 0 }}
+                >
+                    {this.state.relayerInfos.map((relayerInfo: WebsiteBackendRelayerInfo, index) => (
+                        <RelayerGridTile key={index} relayerInfo={relayerInfo} networkId={this.props.networkId} />
+                    ))}
+                </GridList>
             );
         }
     }
diff --git a/packages/website/ts/components/relayer_index/relayer_top_tokens.tsx b/packages/website/ts/components/relayer_index/relayer_top_tokens.tsx
index b599e7123..f544fc924 100644
--- a/packages/website/ts/components/relayer_index/relayer_top_tokens.tsx
+++ b/packages/website/ts/components/relayer_index/relayer_top_tokens.tsx
@@ -70,7 +70,10 @@ class TokenLink extends React.Component<TokenLinkProps, TokenLinkState> {
         };
         const networkName = sharedConstants.NETWORK_NAME_BY_ID[this.props.networkId];
         const eventLabel = `${this.props.tokenInfo.symbol}-${networkName}`;
-        const trackTokenClick = () => analytics.logEvent('Portal', 'Token Click', eventLabel);
+        const onClick = (event: React.MouseEvent<HTMLElement>) => {
+            event.stopPropagation();
+            analytics.logEvent('Portal', 'Token Click', eventLabel);
+        };
         return (
             <a
                 href={tokenLinkFromToken(this.props.tokenInfo, this.props.networkId)}
@@ -78,7 +81,7 @@ class TokenLink extends React.Component<TokenLinkProps, TokenLinkState> {
                 style={style}
                 onMouseEnter={this._onToggleHover.bind(this, true)}
                 onMouseLeave={this._onToggleHover.bind(this, false)}
-                onClick={trackTokenClick}
+                onClick={onClick}
             >
                 {this.props.tokenInfo.symbol}
             </a>
diff --git a/packages/website/ts/components/ui/animation.tsx b/packages/website/ts/components/ui/animation.tsx
index cbda2993d..136f3d005 100644
--- a/packages/website/ts/components/ui/animation.tsx
+++ b/packages/website/ts/components/ui/animation.tsx
@@ -11,13 +11,15 @@ const PlainAnimation: React.StatelessComponent<AnimationProps> = props => <div {
 
 const appearFromBottomFrames = keyframes`
     from {
-        position: absolute;
+        position: fixed;
         bottom: -500px;
+        left: 0px;
     }
 
     to {
-        position: absolute;
+        position: fixed;
         bottom: 0px;
+        left: 0px;
     }
 `;
 
diff --git a/packages/website/ts/components/ui/container.tsx b/packages/website/ts/components/ui/container.tsx
index 90aec0e7c..a747ef01f 100644
--- a/packages/website/ts/components/ui/container.tsx
+++ b/packages/website/ts/components/ui/container.tsx
@@ -15,6 +15,7 @@ export interface ContainerProps {
     borderRadius?: StringOrNum;
     maxWidth?: StringOrNum;
     width?: StringOrNum;
+    minHeight?: StringOrNum;
     isHidden?: boolean;
     className?: string;
     position?: 'absolute' | 'fixed' | 'relative' | 'unset';
diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx
index f88fd6c24..4cc70badd 100644
--- a/packages/website/ts/components/wallet/wallet.tsx
+++ b/packages/website/ts/components/wallet/wallet.tsx
@@ -29,6 +29,7 @@ import { WrapEtherItem } from 'ts/components/wallet/wrap_ether_item';
 import { AllowanceToggle } from 'ts/containers/inputs/allowance_toggle';
 import { Dispatcher } from 'ts/redux/dispatcher';
 import { colors } from 'ts/style/colors';
+import { styled } from 'ts/style/theme';
 import {
     BlockchainErrs,
     ProviderType,
@@ -138,6 +139,12 @@ const USD_DECIMAL_PLACES = 2;
 const NO_ALLOWANCE_TOGGLE_SPACE_WIDTH = 56;
 const ACCOUNT_PATH = `${WebsitePaths.Portal}/account`;
 
+const ActionButton = styled(FloatingActionButton)`
+    button {
+        position: static !important;
+    }
+`;
+
 export class Wallet extends React.Component<WalletProps, WalletState> {
     public static defaultProps = {
         style: {},
@@ -244,17 +251,12 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
                 <ListItem
                     primaryText={
                         <div className="flex">
-                            <FloatingActionButton mini={true} zDepth={0} onClick={this.props.onAddToken}>
+                            <ActionButton mini={true} zDepth={0} onClick={this.props.onAddToken}>
                                 <ContentAdd />
-                            </FloatingActionButton>
-                            <FloatingActionButton
-                                mini={true}
-                                zDepth={0}
-                                className="px1"
-                                onClick={this.props.onRemoveToken}
-                            >
+                            </ActionButton>
+                            <ActionButton mini={true} zDepth={0} className="px1" onClick={this.props.onRemoveToken}>
                                 <ContentRemove />
-                            </FloatingActionButton>
+                            </ActionButton>
                             <div
                                 style={{
                                     paddingLeft: 10,
diff --git a/packages/website/ts/pages/jobs/open_positions.tsx b/packages/website/ts/pages/jobs/open_positions.tsx
index f3d980315..e789795c1 100644
--- a/packages/website/ts/pages/jobs/open_positions.tsx
+++ b/packages/website/ts/pages/jobs/open_positions.tsx
@@ -11,6 +11,7 @@ import { colors } from 'ts/style/colors';
 import { styled } from 'ts/style/theme';
 import { ScreenWidths, WebsiteBackendJobInfo } from 'ts/types';
 import { backendClient } from 'ts/utils/backend_client';
+import { utils } from 'ts/utils/utils';
 
 const labelStyle = { fontFamily: 'Roboto Mono', fontSize: 18 };
 const HEADER_TEXT = 'Open Positions';
@@ -161,7 +162,7 @@ export class OpenPositions extends React.Component<OpenPositionsProps, OpenPosit
 
     private _openJobInfoUrl(jobInfo: WebsiteBackendJobInfo): void {
         const url = jobInfo.url;
-        window.open(url, '_blank');
+        utils.openUrl(url);
     }
 }
 
diff --git a/packages/website/ts/utils/utils.ts b/packages/website/ts/utils/utils.ts
index 0bd3dbcfa..0cb965f05 100644
--- a/packages/website/ts/utils/utils.ts
+++ b/packages/website/ts/utils/utils.ts
@@ -362,4 +362,10 @@ export const utils = {
         const formattedAmount = unitAmount.toFixed(precision);
         return `${formattedAmount} ${symbol}`;
     },
+    openUrl(url: string): void {
+        window.open(url, '_blank');
+    },
+    isMobile(screenWidth: ScreenWidths): boolean {
+        return screenWidth === ScreenWidths.Sm;
+    },
 };