From cf733630162e95ff5edea3b45fba5b16001f3c87 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Mon, 4 Jun 2018 17:02:10 -0700
Subject: Address PR feedback

---
 .../website/ts/components/forms/subscribe_form.tsx | 30 ++++++++++++----------
 packages/website/ts/components/ui/button.tsx       | 10 ++++----
 packages/website/ts/components/ui/input.tsx        |  4 +--
 packages/website/ts/components/ui/text.tsx         |  2 +-
 4 files changed, 24 insertions(+), 22 deletions(-)

(limited to 'packages/website/ts/components')

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>;
-- 
cgit