From 888086010579566aca57e63daa5bacc9c6802830 Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Thu, 14 Jun 2018 13:51:02 -0700
Subject: Set max-width for LargeLayout

---
 packages/website/ts/components/portal/portal.tsx | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

(limited to 'packages')

diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx
index 48486939b..d51e40216 100644
--- a/packages/website/ts/components/portal/portal.tsx
+++ b/packages/website/ts/components/portal/portal.tsx
@@ -100,6 +100,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: {
@@ -660,11 +661,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>
@@ -676,7 +677,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>
-- 
cgit v1.2.3


From 55cbcd728d9b0611e604a389443f94de58726d92 Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Thu, 14 Jun 2018 14:12:05 -0700
Subject: Add max width to top bar

---
 packages/website/ts/components/portal/portal.tsx   | 1 +
 packages/website/ts/components/top_bar/top_bar.tsx | 3 ++-
 2 files changed, 3 insertions(+), 1 deletion(-)

(limited to 'packages')

diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx
index d51e40216..ee8c90c2f 100644
--- a/packages/website/ts/components/portal/portal.tsx
+++ b/packages/website/ts/components/portal/portal.tsx
@@ -255,6 +255,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>
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" />
-- 
cgit v1.2.3


From 2ad411ea290697fc33786f9a0daa32116d51bd09 Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
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')

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<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 style={{ ...styles.header, backgroundColor: headerBackgroundColor }}>
+                        <ImgWithFallback src={props.relayerInfo.logoImgUrl} fallbackSrc={FALLBACK_IMG_SRC} />
+                    </div>
                 </a>
                 <div style={styles.body}>
                     <div className="py1" style={styles.relayerNameLabel}>
@@ -112,7 +116,6 @@ const NoContent = () => <div style={styles.subLabel}>{NO_CONTENT_MESSAGE}</div>;
 interface ImgWithFallbackProps {
     src?: string;
     fallbackSrc: string;
-    style: React.CSSProperties;
 }
 interface ImgWithFallbackState {
     imageLoadFailed: boolean;
@@ -125,11 +128,16 @@ class ImgWithFallback extends React.Component<ImgWithFallbackProps, ImgWithFallb
         };
     }
     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} />;
-        }
+        return (
+            <div className="flex items-center" style={{ height: '100%' }}>
+                {this._renderImg()}
+            </div>
+        );
+    }
+    private _renderImg(): React.ReactNode {
+        const src =
+            this.state.imageLoadFailed || _.isUndefined(this.props.src) ? this.props.fallbackSrc : this.props.src;
+        return <img className="mx-auto" onError={this._onError.bind(this)} src={src} height={RELAYER_ICON_HEIGHT} />;
     }
     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


From da46eefe2eea9507ae12ed678b15047f1c74366f Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Mon, 18 Jun 2018 12:09:31 -0700
Subject: Create a shared Image component

---
 .../components/relayer_index/relayer_grid_tile.tsx | 46 ++++++----------------
 packages/website/ts/components/ui/image.tsx        | 37 +++++++++++++++++
 2 files changed, 48 insertions(+), 35 deletions(-)
 create mode 100644 packages/website/ts/components/ui/image.tsx

(limited to 'packages')

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 0b0e75312..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';
@@ -74,8 +75,16 @@ export const RelayerGridTile: React.StatelessComponent<RelayerGridTileProps> = (
         <Island style={styles.root} Component={GridTile}>
             <div style={styles.innerDiv}>
                 <a href={link} target="_blank" style={{ textDecoration: 'none' }}>
-                    <div style={{ ...styles.header, backgroundColor: headerBackgroundColor }}>
-                        <ImgWithFallback src={props.relayerInfo.logoImgUrl} fallbackSrc={FALLBACK_IMG_SRC} />
+                    <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}>
@@ -112,36 +121,3 @@ const Section = (props: SectionProps) => {
 };
 
 const NoContent = () => <div style={styles.subLabel}>{NO_CONTENT_MESSAGE}</div>;
-
-interface ImgWithFallbackProps {
-    src?: string;
-    fallbackSrc: string;
-}
-interface ImgWithFallbackState {
-    imageLoadFailed: boolean;
-}
-class ImgWithFallback extends React.Component<ImgWithFallbackProps, ImgWithFallbackState> {
-    constructor(props: ImgWithFallbackProps) {
-        super(props);
-        this.state = {
-            imageLoadFailed: false,
-        };
-    }
-    public render(): React.ReactNode {
-        return (
-            <div className="flex items-center" style={{ height: '100%' }}>
-                {this._renderImg()}
-            </div>
-        );
-    }
-    private _renderImg(): React.ReactNode {
-        const src =
-            this.state.imageLoadFailed || _.isUndefined(this.props.src) ? this.props.fallbackSrc : this.props.src;
-        return <img className="mx-auto" onError={this._onError.bind(this)} src={src} height={RELAYER_ICON_HEIGHT} />;
-    }
-    private _onError(): void {
-        this.setState({
-            imageLoadFailed: true,
-        });
-    }
-}
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,
+        });
+    }
+}
-- 
cgit v1.2.3