From fd6445439e671d00cfa09362aee24135149ce392 Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Thu, 5 Jul 2018 11:21:35 -0700
Subject: Implement landing page change in preperation for portal

---
 packages/website/ts/components/portal/portal.tsx   |  2 +-
 packages/website/ts/components/top_bar/top_bar.tsx |  4 ++--
 .../ts/components/top_bar/top_bar_menu_item.tsx    | 25 +++++++++-------------
 packages/website/ts/components/ui/button.tsx       | 21 ++++++++++++------
 packages/website/ts/components/wallet/wallet.tsx   |  2 +-
 5 files changed, 28 insertions(+), 26 deletions(-)

(limited to 'packages/website/ts/components')

diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx
index d31de02bc..2c42ad8cb 100644
--- a/packages/website/ts/components/portal/portal.tsx
+++ b/packages/website/ts/components/portal/portal.tsx
@@ -226,7 +226,7 @@ export class Portal extends React.Component<PortalProps, PortalState> {
                 : TokenVisibility.TRACKED;
         return (
             <Container>
-                <DocumentTitle title="0x Portal DApp" />
+                <DocumentTitle title="0x Portal" />
                 <TopBar
                     userAddress={this.props.userAddress}
                     networkId={this.props.networkId}
diff --git a/packages/website/ts/components/top_bar/top_bar.tsx b/packages/website/ts/components/top_bar/top_bar.tsx
index dd3de7950..960e5a824 100644
--- a/packages/website/ts/components/top_bar/top_bar.tsx
+++ b/packages/website/ts/components/top_bar/top_bar.tsx
@@ -233,7 +233,7 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
                     <div className="flex-auto" />
                     {!this._isViewingPortal() && (
                         <div className={menuClasses}>
-                            <div className="flex justify-between">
+                            <div className="flex items-center justify-between">
                                 <DropDown
                                     activeNode={activeNode}
                                     popoverContent={popoverContent}
@@ -263,7 +263,7 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
                                     isExternal={false}
                                 />
                                 <TopBarMenuItem
-                                    title={this.props.translate.get(Key.PortalDApp, Deco.CapWords)}
+                                    title={this.props.translate.get(Key.TradeCallToAction, Deco.Cap)}
                                     path={`${WebsitePaths.Portal}`}
                                     isPrimary={true}
                                     style={styles.menuItem}
diff --git a/packages/website/ts/components/top_bar/top_bar_menu_item.tsx b/packages/website/ts/components/top_bar/top_bar_menu_item.tsx
index e96d27c3f..25fab2868 100644
--- a/packages/website/ts/components/top_bar/top_bar_menu_item.tsx
+++ b/packages/website/ts/components/top_bar/top_bar_menu_item.tsx
@@ -3,6 +3,8 @@ import * as _ from 'lodash';
 import * as React from 'react';
 import { Link } from 'react-router-dom';
 
+import { CallToAction } from 'ts/components/ui/button';
+
 const DEFAULT_STYLE = {
     color: colors.darkestGrey,
 };
@@ -27,22 +29,15 @@ export class TopBarMenuItem extends React.Component<TopBarMenuItemProps, TopBarM
         isNightVersion: false,
     };
     public render(): React.ReactNode {
-        const primaryStyles = this.props.isPrimary
-            ? {
-                  borderRadius: 4,
-                  border: `1px solid ${this.props.isNightVersion ? colors.grey : colors.greyishPink}`,
-                  paddingLeft: 9,
-                  paddingRight: 9,
-                  minWidth: 77,
-              }
-            : {};
         const menuItemColor = this.props.isNightVersion ? 'white' : this.props.style.color;
         const linkColor = _.isUndefined(menuItemColor) ? colors.darkestGrey : menuItemColor;
+        const itemContent = this.props.isPrimary ? (
+            <CallToAction padding="0.8em 1.5em">{this.props.title}</CallToAction>
+        ) : (
+            this.props.title
+        );
         return (
-            <div
-                className={`center ${this.props.className}`}
-                style={{ ...this.props.style, ...primaryStyles, color: menuItemColor }}
-            >
+            <div className={`center ${this.props.className}`} style={{ ...this.props.style, color: menuItemColor }}>
                 {this.props.isExternal ? (
                     <a
                         className="text-decoration-none"
@@ -50,11 +45,11 @@ export class TopBarMenuItem extends React.Component<TopBarMenuItemProps, TopBarM
                         target="_blank"
                         href={this.props.path}
                     >
-                        {this.props.title}
+                        {itemContent}
                     </a>
                 ) : (
                     <Link to={this.props.path} className="text-decoration-none" style={{ color: linkColor }}>
-                        {this.props.title}
+                        {itemContent}
                     </Link>
                 )}
             </div>
diff --git a/packages/website/ts/components/ui/button.tsx b/packages/website/ts/components/ui/button.tsx
index 1489a74a6..2952c8859 100644
--- a/packages/website/ts/components/ui/button.tsx
+++ b/packages/website/ts/components/ui/button.tsx
@@ -11,6 +11,7 @@ export interface ButtonProps {
     backgroundColor?: string;
     borderColor?: string;
     width?: string;
+    padding?: string;
     type?: string;
     isDisabled?: boolean;
     onClick?: (event: React.MouseEvent<HTMLElement>) => void;
@@ -27,9 +28,8 @@ export const Button = styled(PlainButton)`
     font-size: ${props => props.fontSize};
     color: ${props => props.fontColor};
     transition: background-color, opacity 0.5s ease;
-    padding: 0.8em 2.2em;
+    padding: ${props => props.padding};
     border-radius: 6px;
-    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25);
     font-weight: 500;
     outline: none;
     font-family: ${props => props.fontFamily};
@@ -44,7 +44,6 @@ export const Button = styled(PlainButton)`
     }
     &:disabled {
         opacity: 0.5;
-        box-shadow: none;
     }
     &:focus {
         background-color: ${props => saturate(0.2, props.backgroundColor)};
@@ -57,6 +56,7 @@ Button.defaultProps = {
     width: 'auto',
     fontFamily: 'Roboto',
     isDisabled: false,
+    padding: '0.8em 2.2em',
 };
 
 Button.displayName = 'Button';
@@ -67,20 +67,26 @@ export interface CallToActionProps {
     type?: CallToActionType;
     fontSize?: string;
     width?: string;
+    padding?: string;
 }
 
-export const CallToAction: React.StatelessComponent<CallToActionProps> = ({ children, type, fontSize, width }) => {
+export const CallToAction: React.StatelessComponent<CallToActionProps> = ({
+    children,
+    type,
+    fontSize,
+    padding,
+    width,
+}) => {
     const isLight = type === 'light';
-    const backgroundColor = isLight ? colors.white : colors.heroGrey;
+    const backgroundColor = isLight ? colors.white : colors.mediumBlue;
     const fontColor = isLight ? colors.heroGrey : colors.white;
-    const borderColor = isLight ? undefined : colors.white;
     return (
         <Button
             fontSize={fontSize}
+            padding={padding}
             backgroundColor={backgroundColor}
             fontColor={fontColor}
             width={width}
-            borderColor={borderColor}
         >
             {children}
         </Button>
@@ -89,4 +95,5 @@ export const CallToAction: React.StatelessComponent<CallToActionProps> = ({ chil
 
 CallToAction.defaultProps = {
     type: 'dark',
+    fontSize: '14px',
 };
diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx
index 1d7be5dbc..de3b91ad0 100644
--- a/packages/website/ts/components/wallet/wallet.tsx
+++ b/packages/website/ts/components/wallet/wallet.tsx
@@ -234,7 +234,7 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
                 targetOrigin={{ horizontal: 'right', vertical: 'top' }}
                 zDepth={1}
                 activateEvent={DropdownMouseEvent.Click}
-                closeEvent={isMobile ? DropdownMouseEvent.Click : DropdownMouseEvent.Hover}
+                closeEvent={DropdownMouseEvent.Click}
             />
         );
         return (
-- 
cgit v1.2.3


From 3a85b3212b0c04fd9c9f1506464d54f83f182d42 Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Thu, 5 Jul 2018 14:42:22 -0700
Subject: Unify large and small padding in Portal

---
 packages/website/ts/components/portal/portal.tsx | 19 ++++++-------------
 1 file changed, 6 insertions(+), 13 deletions(-)

(limited to 'packages/website/ts/components')

diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx
index 2c42ad8cb..f983241fa 100644
--- a/packages/website/ts/components/portal/portal.tsx
+++ b/packages/website/ts/components/portal/portal.tsx
@@ -106,8 +106,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 LARGE_LAYOUT_SIDE_PADDING = 30;
-const SMALL_LAYOUT_SIDE_PADDING = 20;
+const SIDE_PADDING = 20;
 
 export class Portal extends React.Component<PortalProps, PortalState> {
     private _blockchain: Blockchain;
@@ -244,9 +243,7 @@ export class Portal extends React.Component<PortalProps, PortalState> {
                         position: 'fixed',
                         zIndex: zIndex.topBar,
                     }}
-                    maxWidth={!this._isSmallScreen() ? LARGE_LAYOUT_MAX_WIDTH : undefined}
-                    paddingLeft={!this._isSmallScreen() ? LARGE_LAYOUT_SIDE_PADDING : SMALL_LAYOUT_SIDE_PADDING}
-                    paddingRight={!this._isSmallScreen() ? LARGE_LAYOUT_SIDE_PADDING : SMALL_LAYOUT_SIDE_PADDING}
+                    maxWidth={LARGE_LAYOUT_MAX_WIDTH}
                 />
                 <Container marginTop={TOP_BAR_HEIGHT} minHeight="100vh" backgroundColor={colors.lightestGrey}>
                     <Switch>
@@ -701,8 +698,8 @@ const LargeLayout = (props: LargeLayoutProps) => {
         <Container
             className="mx-auto flex flex-center"
             maxWidth={LARGE_LAYOUT_MAX_WIDTH}
-            paddingLeft={LARGE_LAYOUT_SIDE_PADDING}
-            paddingRight={LARGE_LAYOUT_SIDE_PADDING}
+            paddingLeft={SIDE_PADDING}
+            paddingRight={SIDE_PADDING}
         >
             <div className="flex-last">
                 <Container width={LEFT_COLUMN_WIDTH} position="fixed" zIndex={zIndex.aboveTopBar}>
@@ -710,7 +707,7 @@ const LargeLayout = (props: LargeLayoutProps) => {
                 </Container>
             </div>
             <Container className="flex-auto" marginLeft={LEFT_COLUMN_WIDTH}>
-                <Container className="flex-auto" marginLeft={LARGE_LAYOUT_SIDE_PADDING}>
+                <Container className="flex-auto" marginLeft={SIDE_PADDING}>
                     {props.right}
                 </Container>
             </Container>
@@ -724,11 +721,7 @@ interface SmallLayoutProps {
 const SmallLayout = (props: SmallLayoutProps) => {
     return (
         <div className="flex flex-center">
-            <Container
-                className="flex-auto"
-                paddingLeft={SMALL_LAYOUT_SIDE_PADDING}
-                paddingRight={SMALL_LAYOUT_SIDE_PADDING}
-            >
+            <Container className="flex-auto" paddingLeft={SIDE_PADDING} paddingRight={SIDE_PADDING}>
                 {props.content}
             </Container>
         </div>
-- 
cgit v1.2.3