diff options
author | Fabio Berger <me@fabioberger.com> | 2018-06-14 17:17:58 +0800 |
---|---|---|
committer | Fabio Berger <me@fabioberger.com> | 2018-06-14 17:17:58 +0800 |
commit | f9410d5d008ce289d075741710c6f7705bd3ad2a (patch) | |
tree | e2ca5fe2601ae1958f9ed6555b60fe8f1a20678a /packages/website/ts/components | |
parent | c232a32991725f2f05d61c40f1fb899d138544d2 (diff) | |
parent | 0e354e5ea1f9951088331a310999bf87c8f8f4b3 (diff) | |
download | dexon-sol-tools-f9410d5d008ce289d075741710c6f7705bd3ad2a.tar dexon-sol-tools-f9410d5d008ce289d075741710c6f7705bd3ad2a.tar.gz dexon-sol-tools-f9410d5d008ce289d075741710c6f7705bd3ad2a.tar.bz2 dexon-sol-tools-f9410d5d008ce289d075741710c6f7705bd3ad2a.tar.lz dexon-sol-tools-f9410d5d008ce289d075741710c6f7705bd3ad2a.tar.xz dexon-sol-tools-f9410d5d008ce289d075741710c6f7705bd3ad2a.tar.zst dexon-sol-tools-f9410d5d008ce289d075741710c6f7705bd3ad2a.zip |
Merge branch 'v2-prototype' into feature/combinatorial-testing
* v2-prototype: (27 commits)
Add back redirector behind feature flag
Update minHeight in Text
Use Text components in Values
Use spread operator instead of React.createElement
Fix issue with positions hash
Revert localhost config
Use Text in Teams
Use Text in OpenPositions
Use Text component for HeaderItem
Remove FloatingImage
Move FilledImage into components/ui
Replace FlatButton with Button in Retry
Fix incorrect colors
Add font family to Button component and use in Join0x component
Consolidate jobs page grey colors with shared colors
Fix lint errors
Remove extra packages
Implement small open positions
Implement large screen open positions
Teams section
...
Diffstat (limited to 'packages/website/ts/components')
-rw-r--r-- | packages/website/ts/components/redirector.tsx (renamed from packages/website/ts/components/redirecter.tsx) | 4 | ||||
-rw-r--r-- | packages/website/ts/components/relayer_index/relayer_index.tsx | 33 | ||||
-rw-r--r-- | packages/website/ts/components/ui/button.tsx | 4 | ||||
-rw-r--r-- | packages/website/ts/components/ui/filled_image.tsx | 18 | ||||
-rw-r--r-- | packages/website/ts/components/ui/retry.tsx | 32 | ||||
-rw-r--r-- | packages/website/ts/components/ui/text.tsx | 4 |
6 files changed, 61 insertions, 34 deletions
diff --git a/packages/website/ts/components/redirecter.tsx b/packages/website/ts/components/redirector.tsx index 477aecb77..a02693003 100644 --- a/packages/website/ts/components/redirecter.tsx +++ b/packages/website/ts/components/redirector.tsx @@ -1,9 +1,9 @@ import { constants } from 'ts/utils/constants'; -interface RedirecterProps { +interface RedirectorProps { location: string; } -export function Redirecter(_props: RedirecterProps): void { +export function Redirector(_props: RedirectorProps): void { window.location.href = constants.URL_ANGELLIST; } diff --git a/packages/website/ts/components/relayer_index/relayer_index.tsx b/packages/website/ts/components/relayer_index/relayer_index.tsx index 683f7084b..3c5761bcd 100644 --- a/packages/website/ts/components/relayer_index/relayer_index.tsx +++ b/packages/website/ts/components/relayer_index/relayer_index.tsx @@ -1,11 +1,11 @@ import { Styles } from '@0xproject/react-shared'; import * as _ from 'lodash'; import CircularProgress from 'material-ui/CircularProgress'; -import FlatButton from 'material-ui/FlatButton'; import { GridList } from 'material-ui/GridList'; import * as React from 'react'; import { RelayerGridTile } from 'ts/components/relayer_index/relayer_grid_tile'; +import { Retry } from 'ts/components/ui/retry'; import { colors } from 'ts/style/colors'; import { ScreenWidths, WebsiteBackendRelayerInfo } from 'ts/types'; import { backendClient } from 'ts/utils/backend_client'; @@ -63,7 +63,8 @@ export class RelayerIndex extends React.Component<RelayerIndexProps, RelayerInde const isReadyToRender = _.isUndefined(this.state.error) && !_.isUndefined(this.state.relayerInfos); if (!isReadyToRender) { return ( - // TODO: consolidate this loading component with the one in portal + // TODO: consolidate this loading component with the one in portal and OpenPositions + // TODO: possibly refactor into a generic loading container with spinner and retry UI <div className="center"> {_.isUndefined(this.state.error) ? ( <CircularProgress size={40} thickness={5} /> @@ -124,31 +125,3 @@ export class RelayerIndex extends React.Component<RelayerIndexProps, RelayerInde } } } - -interface RetryProps { - onRetry: () => void; -} -const Retry = (props: RetryProps) => ( - <div className="clearfix center" style={{ color: colors.black }}> - <div className="mx-auto inline-block align-middle" style={{ lineHeight: '44px', textAlign: 'center' }}> - <div className="h2" style={{ fontFamily: 'Roboto Mono' }}> - Something went wrong. - </div> - <div className="py3"> - <FlatButton - label={'reload'} - backgroundColor={colors.black} - labelStyle={{ - fontSize: 18, - fontFamily: 'Roboto Mono', - fontWeight: 'lighter', - color: colors.white, - textTransform: 'lowercase', - }} - style={{ width: 280, height: 62, borderRadius: 5 }} - onClick={props.onRetry} - /> - </div> - </div> - </div> -); diff --git a/packages/website/ts/components/ui/button.tsx b/packages/website/ts/components/ui/button.tsx index 4c7d59839..1f88297de 100644 --- a/packages/website/ts/components/ui/button.tsx +++ b/packages/website/ts/components/ui/button.tsx @@ -7,6 +7,7 @@ export interface ButtonProps { className?: string; fontSize?: string; fontColor?: string; + fontFamily?: string; backgroundColor?: string; borderColor?: string; width?: string; @@ -28,7 +29,7 @@ export const Button = styled(PlainButton)` border-radius: 6px; box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25); font-weight: 500; - font-family: 'Roboto'; + font-family: ${props => props.fontFamily}; width: ${props => props.width}; background-color: ${props => props.backgroundColor}; border: ${props => (props.borderColor ? `1px solid ${props.borderColor}` : 'none')}; @@ -44,6 +45,7 @@ Button.defaultProps = { fontSize: '12px', backgroundColor: colors.white, width: 'auto', + fontFamily: 'Roboto', }; Button.displayName = 'Button'; diff --git a/packages/website/ts/components/ui/filled_image.tsx b/packages/website/ts/components/ui/filled_image.tsx new file mode 100644 index 000000000..7f58ee5b9 --- /dev/null +++ b/packages/website/ts/components/ui/filled_image.tsx @@ -0,0 +1,18 @@ +import * as React from 'react'; + +export interface FilledImageProps { + src: string; +} +export const FilledImage = (props: FilledImageProps) => ( + <div + style={{ + width: '100%', + height: '100%', + objectFit: 'cover', + backgroundImage: `url(${props.src})`, + backgroundRepeat: 'no-repeat', + backgroundPosition: 'center', + backgroundSize: 'cover', + }} + /> +); diff --git a/packages/website/ts/components/ui/retry.tsx b/packages/website/ts/components/ui/retry.tsx new file mode 100644 index 000000000..543b7df4b --- /dev/null +++ b/packages/website/ts/components/ui/retry.tsx @@ -0,0 +1,32 @@ +import * as React from 'react'; + +import { Button } from 'ts/components/ui/button'; +import { colors } from 'ts/style/colors'; + +const BUTTON_TEXT = 'reload'; + +export interface RetryProps { + onRetry: () => void; +} +export const Retry = (props: RetryProps) => ( + <div className="clearfix center" style={{ color: colors.black }}> + <div className="mx-auto inline-block align-middle" style={{ lineHeight: '44px', textAlign: 'center' }}> + <div className="h2" style={{ fontFamily: 'Roboto Mono' }}> + Something went wrong. + </div> + <div className="py3"> + <Button + type="button" + backgroundColor={colors.black} + width="290px" + fontColor={colors.white} + fontSize="18px" + fontFamily="Roboto Mono" + onClick={props.onRetry} + > + {BUTTON_TEXT} + </Button> + </div> + </div> + </div> +); diff --git a/packages/website/ts/components/ui/text.tsx b/packages/website/ts/components/ui/text.tsx index e90c1707d..7e47f1d09 100644 --- a/packages/website/ts/components/ui/text.tsx +++ b/packages/website/ts/components/ui/text.tsx @@ -11,8 +11,9 @@ export interface TextProps { fontFamily?: string; fontColor?: string; lineHeight?: string; + minHeight?: string; center?: boolean; - fontWeight?: number; + fontWeight?: number | string; } const PlainText: React.StatelessComponent<TextProps> = ({ children, className, Tag }) => ( @@ -26,6 +27,7 @@ export const Text = styled(PlainText)` ${props => (props.lineHeight ? `line-height: ${props.lineHeight}` : '')}; ${props => (props.center ? 'text-align: center' : '')}; color: ${props => props.fontColor}; + ${props => (props.minHeight ? `min-height: ${props.minHeight}` : '')}; `; Text.defaultProps = { |