crowetic/protocol
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Address PR feedback

Browse Source
This commit is contained in:
fragosti
2018-06-04 17:02:10 -07:00
parent a74597c7cd
commit cf73363016
8 changed files with 46 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
packages/react-shared/src/utils/colors.ts
View File

@@ -22,7 +22,6 @@ const baseColors = {
heroGrey: '#404040', heroGrey: '#404040',
projectsGrey: '#343333', projectsGrey: '#343333',
darkestGrey: '#272727', darkestGrey: '#272727',
darkButtonGrey: '#252525',
lightBlue: '#60A4F4', lightBlue: '#60A4F4',
lightBlueA700: '#0091EA', lightBlueA700: '#0091EA',
linkBlue: '#1D5CDE', linkBlue: '#1D5CDE',

30
packages/website/ts/components/forms/subscribe_form.tsx
View File

@@ -1,7 +1,6 @@
import { colors } from '@0xproject/react-shared'; import { colors } from '@0xproject/react-shared';
import * as React from 'react'; import * as React from 'react';
import { logUtils } from '@0xproject/utils';
import { Button } from 'ts/components/ui/button'; import { Button } from 'ts/components/ui/button';
import { Container } from 'ts/components/ui/container'; import { Container } from 'ts/components/ui/container';
import { Input } from 'ts/components/ui/input'; import { Input } from 'ts/components/ui/input';
@@ -16,6 +15,7 @@ export enum SubscribeFormStatus {
Error, Error,
Success, Success,
Loading, Loading,
Other,
} }
export interface SubscribeFormState { export interface SubscribeFormState {
@@ -24,6 +24,9 @@ export interface SubscribeFormState {
status: SubscribeFormStatus; 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> { export class SubscribeForm extends React.Component<SubscribeFormProps, SubscribeFormState> {
public state = { public state = {
emailText: '', emailText: '',
@@ -31,7 +34,6 @@ export class SubscribeForm extends React.Component<SubscribeFormProps, Subscribe
status: SubscribeFormStatus.None, status: SubscribeFormStatus.None,
}; };
public render(): React.ReactNode { public render(): React.ReactNode {
const formFontSize = '15px';
return ( return (
<Container className="flex flex-column items-center justify-between md-mx2 sm-mx2"> <Container className="flex flex-column items-center justify-between md-mx2 sm-mx2">
<Container marginBottom="15px"> <Container marginBottom="15px">
@@ -46,18 +48,18 @@ export class SubscribeForm extends React.Component<SubscribeFormProps, Subscribe
placeholder="you@email.com" placeholder="you@email.com"
value={this.state.emailText} value={this.state.emailText}
fontColor={colors.white} fontColor={colors.white}
fontSize={formFontSize} fontSize={FORM_FONT_SIZE}
backgroundColor={colors.projectsGrey} backgroundColor={colors.projectsGrey}
width="275px" width="300px"
onChange={this._handleEmailInputChange.bind(this)} onChange={this._handleEmailInputChange.bind(this)}
/> />
</Container> </Container>
<Container marginLeft="15px" marginTop="15px"> <Container marginLeft="15px" marginTop="15px">
<Button <Button
type="submit" type="submit"
backgroundColor={colors.darkButtonGrey} backgroundColor={colors.darkestGrey}
fontColor={colors.white} fontColor={colors.white}
fontSize={formFontSize} fontSize={FORM_FONT_SIZE}
> >
Subscribe Subscribe
</Button> </Button>
@@ -82,16 +84,19 @@ export class SubscribeForm extends React.Component<SubscribeFormProps, Subscribe
break; break;
case SubscribeFormStatus.None: case SubscribeFormStatus.None:
break; break;
default:
throw new Error(
'The SubscribeFormStatus switch statement is not exhaustive when choosing an error message.',
);
} }
return ( return (
<Container isHidden={!message} marginTop="30px"> <Container isHidden={!message} marginTop="30px">
<Text center={true} fontFamily="Roboto Mono" fontColor={colors.grey}> <Text center={true} fontFamily="Roboto Mono" fontColor={colors.grey}>
{message || 'spacer text'} {message || 'spacer text (never shown to user)'}
</Text> </Text>
</Container> </Container>
); );
} }
private _handleEmailInputChange(event: React.ChangeEvent<HTMLInputElement>): void { private _handleEmailInputChange(event: React.ChangeEvent<HTMLInputElement>): void {
this.setState({ emailText: event.target.value }); this.setState({ emailText: event.target.value });
} }
@@ -107,15 +112,12 @@ export class SubscribeForm extends React.Component<SubscribeFormProps, Subscribe
try { try {
const response = await backendClient.subscribeToNewsletterAsync(this.state.emailText); const response = await backendClient.subscribeToNewsletterAsync(this.state.emailText);
const status = response.status === 200 ? SubscribeFormStatus.Success : SubscribeFormStatus.Error; const status = response.status === 200 ? SubscribeFormStatus.Success : SubscribeFormStatus.Error;
this._setStatus(status); this.setState({ status, emailText: '' });
} catch (error) { } catch (error) {
logUtils.log(error);
this._setStatus(SubscribeFormStatus.Error); this._setStatus(SubscribeFormStatus.Error);
} finally {
this.setState({ emailText: '' });
} }
} }
private _setStatus(status: SubscribeFormStatus, then?: () => void): void { private _setStatus(status: SubscribeFormStatus): void {
this.setState({ status }, then); this.setState({ status });
} }
} }

10
packages/website/ts/components/ui/button.tsx
View File

@@ -48,15 +48,15 @@ Button.defaultProps = {
Button.displayName = 'Button'; Button.displayName = 'Button';
type CTAType = 'light' | 'dark'; type CallToActionType = 'light' | 'dark';
export interface CTAProps { export interface CallToActionProps {
type?: CTAType; type?: CallToActionType;
fontSize?: string; fontSize?: string;
width?: 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 isLight = type === 'light';
const backgroundColor = isLight ? colors.white : colors.heroGrey; const backgroundColor = isLight ? colors.white : colors.heroGrey;
const fontColor = isLight ? colors.heroGrey : colors.white; 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', type: 'dark',
}; };

4
packages/website/ts/components/ui/input.tsx
View File

@@ -28,7 +28,7 @@ export const Input = styled(PlainInput)`
border: none; border: none;
background-color: ${props => props.backgroundColor}; background-color: ${props => props.backgroundColor};
&::placeholder { &::placeholder {
color: ${props => props.placeholder}; color: ${props => props.placeholderColor};
} }
`; `;
@@ -36,7 +36,7 @@ Input.defaultProps = {
width: 'auto', width: 'auto',
backgroundColor: colors.white, backgroundColor: colors.white,
fontColor: colors.darkestGrey, fontColor: colors.darkestGrey,
placeholderColor: colors.grey500, placeholderColor: colors.darkGrey,
fontSize: '12px', fontSize: '12px',
}; };

2
packages/website/ts/components/ui/text.tsx
View File

@@ -52,5 +52,5 @@ export const TranslatedText: React.StatelessComponent<TranslatedTextProps> = ({
translate, translate,
children, children,
deco, deco,
...textProps, ...textProps
}) => <Text {...textProps}>{translate.get(children, deco)}</Text>; }) => <Text {...textProps}>{translate.get(children, deco)}</Text>;

14
packages/website/ts/pages/landing/landing.tsx
View File

@@ -6,7 +6,7 @@ import { Link } from 'react-router-dom';
import { Footer } from 'ts/components/footer'; import { Footer } from 'ts/components/footer';
import { SubscribeForm } from 'ts/components/forms/subscribe_form'; import { SubscribeForm } from 'ts/components/forms/subscribe_form';
import { TopBar } from 'ts/components/top_bar/top_bar'; 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 { Dispatcher } from 'ts/redux/dispatcher';
import { Deco, Key, Language, ScreenWidths, WebsitePaths } from 'ts/types'; import { Deco, Key, Language, ScreenWidths, WebsitePaths } from 'ts/types';
import { constants } from 'ts/utils/constants'; 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="pt3 clearfix sm-mx-auto" style={{ maxWidth: 389 }}>
<div className="lg-pr2 md-pr2 col col-6 sm-center"> <div className="lg-pr2 md-pr2 col col-6 sm-center">
<Link to={WebsitePaths.ZeroExJs} className="text-decoration-none"> <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)} {this.props.translate.get(Key.BuildCallToAction, Deco.Cap)}
</CTA> </CallToAction>
</Link> </Link>
</div> </div>
<div className="col col-6 sm-center"> <div className="col col-6 sm-center">
@@ -283,9 +283,9 @@ export class Landing extends React.Component<LandingProps, LandingState> {
target="_blank" target="_blank"
className="text-decoration-none" className="text-decoration-none"
> >
<CTA width="175px"> <CallToAction width="175px">
{this.props.translate.get(Key.CommunityCallToAction, Deco.Cap)} {this.props.translate.get(Key.CommunityCallToAction, Deco.Cap)}
</CTA> </CallToAction>
</a> </a>
</div> </div>
</div> </div>
@@ -774,7 +774,9 @@ export class Landing extends React.Component<LandingProps, LandingState> {
</div> </div>
<div className="sm-center sm-pt2 lg-table-cell md-table-cell"> <div className="sm-center sm-pt2 lg-table-cell md-table-cell">
<Link to={WebsitePaths.ZeroExJs} className="text-decoration-none"> <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> </Link>
</div> </div>
</div> </div>

22
packages/website/ts/utils/fetch_utils.ts
View File

@@ -4,23 +4,26 @@ import * as queryString from 'query-string';
import { errorReporter } from 'ts/utils/error_reporter'; 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 = { export const fetchUtils = {
async requestAsync(baseUrl: string, path: string, queryParams?: object): Promise<any> { async requestAsync(baseUrl: string, path: string, queryParams?: object): Promise<any> {
const query = queryStringFromQueryParams(queryParams); const query = queryStringFromQueryParams(queryParams);
const url = `${baseUrl}${path}${query}`; const url = `${baseUrl}${path}${query}`;
const response = await fetch(url); const response = await fetch(url);
if (response.status !== 200) { logErrorIfPresent(response, url);
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;
}
const result = await response.json(); const result = await response.json();
return result; return result;
}, },
async postAsync(baseUrl: string, path: string, body: object): Promise<Response> { async postAsync(baseUrl: string, path: string, body: object): Promise<Response> {
const url = `${baseUrl}${path}`; const url = `${baseUrl}${path}`;
const response = await fetch(url, { const response = await fetch(url, {
@@ -30,6 +33,7 @@ export const fetchUtils = {
}, },
body: JSON.stringify(body), body: JSON.stringify(body),
}); });
logErrorIfPresent(response, url);
return response; return response;
}, },
}; };

3
packages/website/ts/utils/utils.ts
View File

@@ -306,8 +306,7 @@ export const utils = {
return parsedProviderName; return parsedProviderName;
}, },
getBackendBaseUrl(): string { 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 { isDevelopment(): boolean {
return configs.ENVIRONMENT === Environments.DEVELOPMENT; return configs.ENVIRONMENT === Environments.DEVELOPMENT;