Address PR feedback

8 files changed, 46 insertions, 40 deletions

diff --git a/packages/react-shared/src/utils/colors.ts b/packages/react-shared/src/utils/colors.ts
index 92f45c2e7..7d047a50e 100644
--- a/packages/react-shared/src/utils/colors.ts
+++ b/packages/react-shared/src/utils/colors.ts
@@ -22,7 +22,6 @@ const baseColors = {
     heroGrey: '#404040',
     projectsGrey: '#343333',
     darkestGrey: '#272727',
-    darkButtonGrey: '#252525',
     lightBlue: '#60A4F4',
     lightBlueA700: '#0091EA',
     linkBlue: '#1D5CDE',
diff --git a/packages/website/ts/components/forms/subscribe_form.tsx b/packages/website/ts/components/forms/subscribe_form.tsx
index b83a9c346..4bef3a7b6 100644
--- a/packages/website/ts/components/forms/subscribe_form.tsx
+++ b/packages/website/ts/components/forms/subscribe_form.tsx
@@ -1,7 +1,6 @@
 import { colors } from '@0xproject/react-shared';
 import * as React from 'react';
 
-import { logUtils } from '@0xproject/utils';
 import { Button } from 'ts/components/ui/button';
 import { Container } from 'ts/components/ui/container';
 import { Input } from 'ts/components/ui/input';
@@ -16,6 +15,7 @@ export enum SubscribeFormStatus {
     Error,
     Success,
     Loading,
+    Other,
 }
 
 export interface SubscribeFormState {
@@ -24,6 +24,9 @@ export interface SubscribeFormState {
     status: SubscribeFormStatus;
 }
 
+const FORM_FONT_SIZE = '15px';
+
+// TODO: Translate visible strings. https://app.asana.com/0/628666249318202/697485674422001
 export class SubscribeForm extends React.Component<SubscribeFormProps, SubscribeFormState> {
     public state = {
         emailText: '',
@@ -31,7 +34,6 @@ export class SubscribeForm extends React.Component<SubscribeFormProps, Subscribe
         status: SubscribeFormStatus.None,
     };
     public render(): React.ReactNode {
-        const formFontSize = '15px';
         return (
             <Container className="flex flex-column items-center justify-between md-mx2 sm-mx2">
                 <Container marginBottom="15px">
@@ -46,18 +48,18 @@ export class SubscribeForm extends React.Component<SubscribeFormProps, Subscribe
                                 placeholder="you@email.com"
                                 value={this.state.emailText}
                                 fontColor={colors.white}
-                                fontSize={formFontSize}
+                                fontSize={FORM_FONT_SIZE}
                                 backgroundColor={colors.projectsGrey}
-                                width="275px"
+                                width="300px"
                                 onChange={this._handleEmailInputChange.bind(this)}
                             />
                         </Container>
                         <Container marginLeft="15px" marginTop="15px">
                             <Button
                                 type="submit"
-                                backgroundColor={colors.darkButtonGrey}
+                                backgroundColor={colors.darkestGrey}
                                 fontColor={colors.white}
-                                fontSize={formFontSize}
+                                fontSize={FORM_FONT_SIZE}
                             >
                                 Subscribe
                             </Button>
@@ -82,16 +84,19 @@ export class SubscribeForm extends React.Component<SubscribeFormProps, Subscribe
                 break;
             case SubscribeFormStatus.None:
                 break;
+            default:
+                throw new Error(
+                    'The SubscribeFormStatus switch statement is not exhaustive when choosing an error message.',
+                );
         }
         return (
             <Container isHidden={!message} marginTop="30px">
                 <Text center={true} fontFamily="Roboto Mono" fontColor={colors.grey}>
-                    {message || 'spacer text'}
+                    {message || 'spacer text (never shown to user)'}
                 </Text>
             </Container>
         );
     }
-
     private _handleEmailInputChange(event: React.ChangeEvent<HTMLInputElement>): void {
         this.setState({ emailText: event.target.value });
     }
@@ -107,15 +112,12 @@ export class SubscribeForm extends React.Component<SubscribeFormProps, Subscribe
         try {
             const response = await backendClient.subscribeToNewsletterAsync(this.state.emailText);
             const status = response.status === 200 ? SubscribeFormStatus.Success : SubscribeFormStatus.Error;
-            this._setStatus(status);
+            this.setState({ status, emailText: '' });
         } catch (error) {
-            logUtils.log(error);
             this._setStatus(SubscribeFormStatus.Error);
-        } finally {
-            this.setState({ emailText: '' });
         }
     }
-    private _setStatus(status: SubscribeFormStatus, then?: () => void): void {
-        this.setState({ status }, then);
+    private _setStatus(status: SubscribeFormStatus): void {
+        this.setState({ status });
     }
 }
diff --git a/packages/website/ts/components/ui/button.tsx b/packages/website/ts/components/ui/button.tsx
index e6e31374f..4c7d59839 100644
--- a/packages/website/ts/components/ui/button.tsx
+++ b/packages/website/ts/components/ui/button.tsx
@@ -48,15 +48,15 @@ Button.defaultProps = {
 
 Button.displayName = 'Button';
 
-type CTAType = 'light' | 'dark';
+type CallToActionType = 'light' | 'dark';
 
-export interface CTAProps {
-    type?: CTAType;
+export interface CallToActionProps {
+    type?: CallToActionType;
     fontSize?: string;
     width?: string;
 }
 
-export const CTA: React.StatelessComponent<CTAProps> = ({ children, type, fontSize, width }) => {
+export const CallToAction: React.StatelessComponent<CallToActionProps> = ({ children, type, fontSize, width }) => {
     const isLight = type === 'light';
     const backgroundColor = isLight ? colors.white : colors.heroGrey;
     const fontColor = isLight ? colors.heroGrey : colors.white;
@@ -74,6 +74,6 @@ export const CTA: React.StatelessComponent<CTAProps> = ({ children, type, fontSi
     );
 };
 
-CTA.defaultProps = {
+CallToAction.defaultProps = {
     type: 'dark',
 };
diff --git a/packages/website/ts/components/ui/input.tsx b/packages/website/ts/components/ui/input.tsx
index 75a453eae..e01a71a53 100644
--- a/packages/website/ts/components/ui/input.tsx
+++ b/packages/website/ts/components/ui/input.tsx
@@ -28,7 +28,7 @@ export const Input = styled(PlainInput)`
     border: none;
     background-color: ${props => props.backgroundColor};
     &::placeholder {
-        color: ${props => props.placeholder};
+        color: ${props => props.placeholderColor};
     }
 `;
 
@@ -36,7 +36,7 @@ Input.defaultProps = {
     width: 'auto',
     backgroundColor: colors.white,
     fontColor: colors.darkestGrey,
-    placeholderColor: colors.grey500,
+    placeholderColor: colors.darkGrey,
     fontSize: '12px',
 };
 
diff --git a/packages/website/ts/components/ui/text.tsx b/packages/website/ts/components/ui/text.tsx
index d3e205d12..259365618 100644
--- a/packages/website/ts/components/ui/text.tsx
+++ b/packages/website/ts/components/ui/text.tsx
@@ -52,5 +52,5 @@ export const TranslatedText: React.StatelessComponent<TranslatedTextProps> = ({
     translate,
     children,
     deco,
-    ...textProps,
+    ...textProps
 }) => <Text {...textProps}>{translate.get(children, deco)}</Text>;
diff --git a/packages/website/ts/pages/landing/landing.tsx b/packages/website/ts/pages/landing/landing.tsx
index 1a1772a23..db3eb83b0 100644
--- a/packages/website/ts/pages/landing/landing.tsx
+++ b/packages/website/ts/pages/landing/landing.tsx
@@ -6,7 +6,7 @@ import { Link } from 'react-router-dom';
 import { Footer } from 'ts/components/footer';
 import { SubscribeForm } from 'ts/components/forms/subscribe_form';
 import { TopBar } from 'ts/components/top_bar/top_bar';
-import { CTA } from 'ts/components/ui/button';
+import { CallToAction } from 'ts/components/ui/button';
 import { Dispatcher } from 'ts/redux/dispatcher';
 import { Deco, Key, Language, ScreenWidths, WebsitePaths } from 'ts/types';
 import { constants } from 'ts/utils/constants';
@@ -272,9 +272,9 @@ export class Landing extends React.Component<LandingProps, LandingState> {
                                 <div className="pt3 clearfix sm-mx-auto" style={{ maxWidth: 389 }}>
                                     <div className="lg-pr2 md-pr2 col col-6 sm-center">
                                         <Link to={WebsitePaths.ZeroExJs} className="text-decoration-none">
-                                            <CTA width="175px" type="light">
+                                            <CallToAction width="175px" type="light">
                                                 {this.props.translate.get(Key.BuildCallToAction, Deco.Cap)}
-                                            </CTA>
+                                            </CallToAction>
                                         </Link>
                                     </div>
                                     <div className="col col-6 sm-center">
@@ -283,9 +283,9 @@ export class Landing extends React.Component<LandingProps, LandingState> {
                                             target="_blank"
                                             className="text-decoration-none"
                                         >
-                                            <CTA width="175px">
+                                            <CallToAction width="175px">
                                                 {this.props.translate.get(Key.CommunityCallToAction, Deco.Cap)}
-                                            </CTA>
+                                            </CallToAction>
                                         </a>
                                     </div>
                                 </div>
@@ -774,7 +774,9 @@ export class Landing extends React.Component<LandingProps, LandingState> {
                         </div>
                         <div className="sm-center sm-pt2 lg-table-cell md-table-cell">
                             <Link to={WebsitePaths.ZeroExJs} className="text-decoration-none">
-                                <CTA fontSize="15px">{this.props.translate.get(Key.BuildCallToAction, Deco.Cap)}</CTA>
+                                <CallToAction fontSize="15px">
+                                    {this.props.translate.get(Key.BuildCallToAction, Deco.Cap)}
+                                </CallToAction>
                             </Link>
                         </div>
                     </div>
diff --git a/packages/website/ts/utils/fetch_utils.ts b/packages/website/ts/utils/fetch_utils.ts
index e65ac64e1..513f7e479 100644
--- a/packages/website/ts/utils/fetch_utils.ts
+++ b/packages/website/ts/utils/fetch_utils.ts
@@ -4,23 +4,26 @@ import * as queryString from 'query-string';
 
 import { errorReporter } from 'ts/utils/error_reporter';
 
+const logErrorIfPresent = (response: Response, requestedURL: string) => {
+    if (response.status !== 200) {
+        const errorText = `Error requesting url: ${requestedURL}, ${response.status}: ${response.statusText}`;
+        logUtils.log(errorText);
+        const error = Error(errorText);
+        // tslint:disable-next-line:no-floating-promises
+        errorReporter.reportAsync(error);
+        throw error;
+    }
+};
+
 export const fetchUtils = {
     async requestAsync(baseUrl: string, path: string, queryParams?: object): Promise<any> {
         const query = queryStringFromQueryParams(queryParams);
         const url = `${baseUrl}${path}${query}`;
         const response = await fetch(url);
-        if (response.status !== 200) {
-            const errorText = `Error requesting url: ${url}, ${response.status}: ${response.statusText}`;
-            logUtils.log(errorText);
-            const error = Error(errorText);
-            // tslint:disable-next-line:no-floating-promises
-            errorReporter.reportAsync(error);
-            throw error;
-        }
+        logErrorIfPresent(response, url);
         const result = await response.json();
         return result;
     },
-
     async postAsync(baseUrl: string, path: string, body: object): Promise<Response> {
         const url = `${baseUrl}${path}`;
         const response = await fetch(url, {
@@ -30,6 +33,7 @@ export const fetchUtils = {
             },
             body: JSON.stringify(body),
         });
+        logErrorIfPresent(response, url);
         return response;
     },
 };
diff --git a/packages/website/ts/utils/utils.ts b/packages/website/ts/utils/utils.ts
index 10381845b..b9d962b75 100644
--- a/packages/website/ts/utils/utils.ts
+++ b/packages/website/ts/utils/utils.ts
@@ -306,8 +306,7 @@ export const utils = {
         return parsedProviderName;
     },
     getBackendBaseUrl(): string {
-        return 'http://localhost:3000';
-        // return isDogfood() ? configs.BACKEND_BASE_STAGING_URL : configs.BACKEND_BASE_PROD_URL;
+        return isDogfood() ? configs.BACKEND_BASE_STAGING_URL : configs.BACKEND_BASE_PROD_URL;
     },
     isDevelopment(): boolean {
         return configs.ENVIRONMENT === Environments.DEVELOPMENT;