From 2ad411ea290697fc33786f9a0daa32116d51bd09 Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Thu, 14 Jun 2018 15:04:31 -0700 Subject: Update RelayerGridTile render logic to incorportate colors and logos --- .../components/relayer_index/relayer_grid_tile.tsx | 32 ++++++++++++++-------- .../ts/components/relayer_index/relayer_index.tsx | 4 +-- packages/website/ts/types.ts | 2 ++ 3 files changed, 24 insertions(+), 14 deletions(-) (limited to 'packages/website') 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..0b0e75312 100644 --- a/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx +++ b/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx @@ -26,7 +26,6 @@ const styles: Styles = { header: { height: '50%', width: '100%', - objectFit: 'cover', borderBottomRightRadius: 4, borderBottomLeftRadius: 4, borderTopRightRadius: 4, @@ -58,21 +57,26 @@ 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 = (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 (
- +
+ +
@@ -112,7 +116,6 @@ const NoContent = () =>
{NO_CONTENT_MESSAGE}
; interface ImgWithFallbackProps { src?: string; fallbackSrc: string; - style: React.CSSProperties; } interface ImgWithFallbackState { imageLoadFailed: boolean; @@ -125,11 +128,16 @@ class ImgWithFallback extends React.Component; - } else { - return ; - } + return ( +
+ {this._renderImg()} +
+ ); + } + private _renderImg(): React.ReactNode { + const src = + this.state.imageLoadFailed || _.isUndefined(this.props.src) ? this.props.fallbackSrc : this.props.src; + return ; } private _onError(): void { this.setState({ 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/types.ts b/packages/website/ts/types.ts index 24e86a901..d00154652 100644 --- a/packages/website/ts/types.ts +++ b/packages/website/ts/types.ts @@ -519,6 +519,8 @@ export interface WebsiteBackendRelayerInfo { url: string; appUrl?: string; headerImgUrl?: string; + logoImgUrl?: string; + primaryColor?: string; topTokens: WebsiteBackendTokenInfo[]; } -- cgit v1.2.3