diff options
| -rw-r--r-- | packages/website/translations/english.json | 3 | ||||
| -rw-r--r-- | packages/website/ts/components/portal/portal.tsx | 21 | ||||
| -rw-r--r-- | packages/website/ts/components/top_bar/top_bar.tsx | 4 | ||||
| -rw-r--r-- | packages/website/ts/components/top_bar/top_bar_menu_item.tsx | 25 | ||||
| -rw-r--r-- | packages/website/ts/components/ui/button.tsx | 21 | ||||
| -rw-r--r-- | packages/website/ts/components/wallet/wallet.tsx | 2 | ||||
| -rw-r--r-- | packages/website/ts/pages/landing/landing.tsx | 12 | ||||
| -rw-r--r-- | packages/website/ts/types.ts | 1 | ||||
| -rw-r--r-- | packages/website/ts/utils/translate.ts | 13 |
9 files changed, 54 insertions, 48 deletions
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..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; @@ -226,7 +225,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} @@ -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> 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 ( diff --git a/packages/website/ts/pages/landing/landing.tsx b/packages/website/ts/pages/landing/landing.tsx index f091778f4..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<LandingProps, LandingState> { </Link> </div> <div className="lg-col lg-col-6 sm-center sm-col sm-col-12"> - <a - href={constants.URL_ZEROEX_CHAT} - target="_blank" - className="text-decoration-none" - > + <Link to={WebsitePaths.Portal} className="text-decoration-none"> <CallToAction width="175px"> - {this.props.translate.get(Key.CommunityCallToAction, Deco.Cap)} + {this.props.translate.get(Key.TradeCallToAction, Deco.Cap)} </CallToAction> - </a> + </Link> </div> </Container> </div> @@ -295,7 +291,7 @@ export class Landing extends React.Component<LandingProps, LandingState> { <div className="mr1 px1" style={{ - backgroundColor: colors.lightTurquois, + backgroundColor: colors.white, borderRadius: 3, color: colors.heroGrey, height: 23, diff --git a/packages/website/ts/types.ts b/packages/website/ts/types.ts index 93d029325..f7324e87a 100644 --- a/packages/website/ts/types.ts +++ b/packages/website/ts/types.ts @@ -456,6 +456,7 @@ export enum Key { Developers = 'DEVELOPERS', Home = 'HOME', RocketChat = 'ROCKETCHAT', + TradeCallToAction = 'TRADE_CALL_TO_ACTION', } export enum SmartContractDocSections { diff --git a/packages/website/ts/utils/translate.ts b/packages/website/ts/utils/translate.ts index 39924b6f7..1ee1a59c5 100644 --- a/packages/website/ts/utils/translate.ts +++ b/packages/website/ts/utils/translate.ts @@ -55,6 +55,19 @@ export class Translate { } public get(key: Key, decoration?: Deco): string { let text = this._translation[key]; + // if a translation does not exist for a certain language, fallback to english + // if it still doesn't exist in english, throw an error + if (_.isUndefined(text)) { + const englishTranslation: Translation = languageToTranslations[Language.English]; + const englishText = englishTranslation[key]; + if (!_.isUndefined(englishText)) { + text = englishText; + } else { + throw new Error( + `Translation key not available in ${this._selectedLanguage} or ${Language.English}: ${key}`, + ); + } + } if (!_.isUndefined(decoration) && !_.includes(languagesWithoutCaps, this._selectedLanguage)) { switch (decoration) { case Deco.Cap: |