aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--packages/react-shared/src/utils/colors.ts1
-rw-r--r--packages/website/ts/components/forms/subscribe_form.tsx30
-rw-r--r--packages/website/ts/components/ui/button.tsx10
-rw-r--r--packages/website/ts/components/ui/input.tsx4
-rw-r--r--packages/website/ts/components/ui/text.tsx2
-rw-r--r--packages/website/ts/pages/landing/landing.tsx14
-rw-r--r--packages/website/ts/utils/fetch_utils.ts22
-rw-r--r--packages/website/ts/utils/utils.ts3
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;
generated by cgit v1.2.3 (git 2.25.1) at 2024-07-20 22:55:08 +0800