aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/components
diff options
context:
space:
mode:
authorBrandon Millman <brandon@0xproject.com>2018-06-19 03:11:59 +0800
committerGitHub <noreply@github.com>2018-06-19 03:11:59 +0800
commit3f02631b98368503718a1c1977e7f83220c284a2 (patch)
tree25079232ba59f09dfaf52ef7940edc40b156337f /packages/website/ts/components
parenta3ca3ed33fcf51fbcc236d5b8238648873085630 (diff)
parentda46eefe2eea9507ae12ed678b15047f1c74366f (diff)
downloaddexon-0x-contracts-3f02631b98368503718a1c1977e7f83220c284a2.tar.gz
dexon-0x-contracts-3f02631b98368503718a1c1977e7f83220c284a2.tar.zst
dexon-0x-contracts-3f02631b98368503718a1c1977e7f83220c284a2.zip
Merge pull request #712 from 0xProject/feature/website/portal-facelift
Change relayer grid tile to use logos and primary colors
Diffstat (limited to 'packages/website/ts/components')
-rw-r--r--packages/website/ts/components/portal/portal.tsx10
-rw-r--r--packages/website/ts/components/relayer_index/relayer_grid_tile.tsx54
-rw-r--r--packages/website/ts/components/relayer_index/relayer_index.tsx4
-rw-r--r--packages/website/ts/components/top_bar/top_bar.tsx3
-rw-r--r--packages/website/ts/components/ui/image.tsx37
5 files changed, 66 insertions, 42 deletions
diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx
index d1d499314..28a303793 100644
--- a/packages/website/ts/components/portal/portal.tsx
+++ b/packages/website/ts/components/portal/portal.tsx
@@ -102,6 +102,7 @@ const THROTTLE_TIMEOUT = 100;
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: {
@@ -256,6 +257,7 @@ export class Portal extends React.Component<PortalProps, PortalState> {
translate={this.props.translate}
displayType={TopBarDisplayType.Expanded}
style={{ backgroundColor: colors.lightestGrey }}
+ maxWidth={LARGE_LAYOUT_MAX_WIDTH}
/>
<div id="portal" style={styles.body}>
<Switch>
@@ -680,11 +682,11 @@ interface LargeLayoutProps {
}
const LargeLayout = (props: LargeLayoutProps) => {
return (
- <div className="sm-flex flex-center">
- <div className="flex-last px3">
+ <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 px3" style={styles.scrollContainer}>
+ <div className="flex-auto px2" style={styles.scrollContainer}>
{props.right}
</div>
</div>
@@ -696,7 +698,7 @@ interface SmallLayoutProps {
}
const SmallLayout = (props: SmallLayoutProps) => {
return (
- <div className="sm-flex flex-center">
+ <div className="flex flex-center">
<div className="flex-auto px3" style={styles.scrollContainer}>
{props.content}
</div>
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 fbb634164..98d6dc0b3 100644
--- a/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx
+++ b/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx
@@ -5,6 +5,7 @@ import * as React from 'react';
import { TopTokens } from 'ts/components/relayer_index/relayer_top_tokens';
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 { WebsiteBackendRelayerInfo } from 'ts/types';
@@ -26,7 +27,6 @@ const styles: Styles = {
header: {
height: '50%',
width: '100%',
- objectFit: 'cover',
borderBottomRightRadius: 4,
borderBottomLeftRadius: 4,
borderTopRightRadius: 4,
@@ -58,21 +58,34 @@ const styles: Styles = {
};
const FALLBACK_IMG_SRC = '/images/landing/hero_chip_image.png';
+const FALLBACK_PRIMARY_COLOR = colors.grey200;
const NO_CONTENT_MESSAGE = '--';
+const RELAYER_ICON_HEIGHT = '110px';
export const RelayerGridTile: React.StatelessComponent<RelayerGridTileProps> = (props: RelayerGridTileProps) => {
const link = props.relayerInfo.appUrl || props.relayerInfo.url;
const topTokens = props.relayerInfo.topTokens;
const weeklyTxnVolume = props.relayerInfo.weeklyTxnVolume;
+ const headerImageUrl = props.relayerInfo.logoImgUrl;
+ const headerBackgroundColor =
+ !_.isUndefined(headerImageUrl) && !_.isUndefined(props.relayerInfo.primaryColor)
+ ? props.relayerInfo.primaryColor
+ : FALLBACK_PRIMARY_COLOR;
return (
<Island style={styles.root} Component={GridTile}>
<div style={styles.innerDiv}>
<a href={link} target="_blank" style={{ textDecoration: 'none' }}>
- <ImgWithFallback
- src={props.relayerInfo.headerImgUrl}
- fallbackSrc={FALLBACK_IMG_SRC}
- style={styles.header}
- />
+ <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.body}>
<div className="py1" style={styles.relayerNameLabel}>
@@ -108,32 +121,3 @@ const Section = (props: SectionProps) => {
};
const NoContent = () => <div style={styles.subLabel}>{NO_CONTENT_MESSAGE}</div>;
-
-interface ImgWithFallbackProps {
- src?: string;
- fallbackSrc: string;
- style: React.CSSProperties;
-}
-interface ImgWithFallbackState {
- imageLoadFailed: boolean;
-}
-class ImgWithFallback extends React.Component<ImgWithFallbackProps, ImgWithFallbackState> {
- constructor(props: ImgWithFallbackProps) {
- super(props);
- this.state = {
- imageLoadFailed: false,
- };
- }
- public render(): React.ReactNode {
- if (this.state.imageLoadFailed || _.isUndefined(this.props.src)) {
- return <img src={this.props.fallbackSrc} style={this.props.style} />;
- } else {
- return <img src={this.props.src} onError={this._onError.bind(this)} style={this.props.style} />;
- }
- }
- private _onError(): void {
- this.setState({
- imageLoadFailed: true,
- });
- }
-}
diff --git a/packages/website/ts/components/relayer_index/relayer_index.tsx b/packages/website/ts/components/relayer_index/relayer_index.tsx
index 3c5761bcd..8dd4f0fbf 100644
--- a/packages/website/ts/components/relayer_index/relayer_index.tsx
+++ b/packages/website/ts/components/relayer_index/relayer_index.tsx
@@ -37,8 +37,8 @@ const styles: Styles = {
};
const CELL_HEIGHT = 290;
-const NUMBER_OF_COLUMNS_LARGE = 4;
-const NUMBER_OF_COLUMNS_MEDIUM = 3;
+const NUMBER_OF_COLUMNS_LARGE = 3;
+const NUMBER_OF_COLUMNS_MEDIUM = 2;
const NUMBER_OF_COLUMNS_SMALL = 1;
const GRID_PADDING = 20;
diff --git a/packages/website/ts/components/top_bar/top_bar.tsx b/packages/website/ts/components/top_bar/top_bar.tsx
index 05cc6e3ad..1a69827a4 100644
--- a/packages/website/ts/components/top_bar/top_bar.tsx
+++ b/packages/website/ts/components/top_bar/top_bar.tsx
@@ -45,6 +45,7 @@ export interface TopBarProps {
isNightVersion?: boolean;
onVersionSelected?: (semver: string) => void;
sidebarHeader?: React.ReactNode;
+ maxWidth?: number;
}
interface TopBarState {
@@ -213,7 +214,7 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
const shouldShowPortalV2Drawer = this._isViewingPortal() && utils.shouldShowPortalV2();
return (
<div style={{ ...styles.topBar, ...bottomBorderStyle, ...this.props.style, ...{ height } }} className="pb1">
- <div className={parentClassNames}>
+ <div className={parentClassNames} style={{ maxWidth: this.props.maxWidth }}>
<div className="col col-2 sm-pl1 md-pl2 lg-pl0" style={{ paddingTop: 15 }}>
<Link to={`${WebsitePaths.Home}`} className="text-decoration-none">
<img src={logoUrl} height="30" />
diff --git a/packages/website/ts/components/ui/image.tsx b/packages/website/ts/components/ui/image.tsx
new file mode 100644
index 000000000..0958d2e5e
--- /dev/null
+++ b/packages/website/ts/components/ui/image.tsx
@@ -0,0 +1,37 @@
+import * as _ from 'lodash';
+import * as React from 'react';
+
+export interface ImageProps {
+ className?: string;
+ src?: string;
+ fallbackSrc?: string;
+ height?: string;
+}
+interface ImageState {
+ imageLoadFailed: boolean;
+}
+export class Image extends React.Component<ImageProps, ImageState> {
+ constructor(props: ImageProps) {
+ super(props);
+ this.state = {
+ imageLoadFailed: false,
+ };
+ }
+ public render(): React.ReactNode {
+ const src =
+ this.state.imageLoadFailed || _.isUndefined(this.props.src) ? this.props.fallbackSrc : this.props.src;
+ return (
+ <img
+ className={this.props.className}
+ onError={this._onError.bind(this)}
+ src={src}
+ height={this.props.height}
+ />
+ );
+ }
+ private _onError(): void {
+ this.setState({
+ imageLoadFailed: true,
+ });
+ }
+}