From fd6445439e671d00cfa09362aee24135149ce392 Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Thu, 5 Jul 2018 11:21:35 -0700 Subject: Implement landing page change in preperation for portal --- packages/website/translations/english.json | 3 ++- 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 +- packages/website/ts/pages/landing/landing.tsx | 4 ++-- packages/website/ts/types.ts | 1 + packages/website/ts/utils/translate.ts | 13 +++++++++++ 9 files changed, 46 insertions(+), 29 deletions(-) (limited to 'packages') diff --git a/packages/website/translations/english.json b/packages/website/translations/english.json index 04fb0507a..d94dbb29e 100644 --- a/packages/website/translations/english.json +++ b/packages/website/translations/english.json @@ -76,5 +76,6 @@ "WEBSITE": "website", "DEVELOPERS": "developers", "HOME": "home", - "ROCKETCHAT": "rocket.chat" + "ROCKETCHAT": "rocket.chat", + "TRADE_CALL_TO_ACTION": "trade on 0x" } 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 { : TokenVisibility.TRACKED; return ( - + {
{!this._isViewingPortal() && (
-
+
{ isExternal={false} /> {this.props.title} + ) : ( + this.props.title + ); return ( -
+
{this.props.isExternal ? ( - {this.props.title} + {itemContent} ) : ( - {this.props.title} + {itemContent} )}
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) => 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 = ({ children, type, fontSize, width }) => { +export const CallToAction: React.StatelessComponent = ({ + 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 ( @@ -89,4 +95,5 @@ export const CallToAction: React.StatelessComponent = ({ 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 { targetOrigin={{ horizontal: 'right', vertical: 'top' }} zDepth={1} activateEvent={DropdownMouseEvent.Click} - closeEvent={isMobile ? DropdownMouseEvent.Click : DropdownMouseEvent.Hover} + closeEvent={DropdownMouseEvent.Click} /> ); return ( diff --git a/packages/website/ts/pages/landing/landing.tsx b/packages/website/ts/pages/landing/landing.tsx index f091778f4..86941def8 100644 --- a/packages/website/ts/pages/landing/landing.tsx +++ b/packages/website/ts/pages/landing/landing.tsx @@ -274,7 +274,7 @@ export class Landing extends React.Component { className="text-decoration-none" > - {this.props.translate.get(Key.CommunityCallToAction, Deco.Cap)} + {this.props.translate.get(Key.TradeCallToAction, Deco.Cap)}
@@ -295,7 +295,7 @@ export class Landing extends React.Component {
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') 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 { private _blockchain: Blockchain; @@ -244,9 +243,7 @@ export class Portal extends React.Component { 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} /> @@ -701,8 +698,8 @@ const LargeLayout = (props: LargeLayoutProps) => {
@@ -710,7 +707,7 @@ const LargeLayout = (props: LargeLayoutProps) => {
- + {props.right} @@ -724,11 +721,7 @@ interface SmallLayoutProps { const SmallLayout = (props: SmallLayoutProps) => { return (
- + {props.content}
-- cgit v1.2.3 From 9f870b3d4ee1ce1ca4ddbac1efeabcb39cceebe8 Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Thu, 5 Jul 2018 15:12:22 -0700 Subject: Change call to action link to /portal --- packages/website/ts/pages/landing/landing.tsx | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) (limited to 'packages') diff --git a/packages/website/ts/pages/landing/landing.tsx b/packages/website/ts/pages/landing/landing.tsx index 86941def8..b2cf4d979 100644 --- a/packages/website/ts/pages/landing/landing.tsx +++ b/packages/website/ts/pages/landing/landing.tsx @@ -268,15 +268,11 @@ export class Landing extends React.Component {
-- cgit v1.2.3