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

Consolidate all custom colors and material-ui colors into a colors module

Browse Source
This commit is contained in:
Fabio Berger
2017-12-18 09:15:12 +01:00
parent 98c01c2f80
commit df9d3e3e16
48 changed files with 169 additions and 226 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
packages/website/ts/components/ui/alert.tsx
View File

@@ -1,8 +1,6 @@
import {colors} from 'material-ui/styles';
import * as React from 'react';
import {AlertTypes} from 'ts/types';
const CUSTOM_GREEN = 'rgb(137, 199, 116)';
import {colors} from 'ts/utils/colors';
interface AlertProps {
type: AlertTypes;
@@ -12,8 +10,8 @@ interface AlertProps {
export function Alert(props: AlertProps) {
const isAlert = props.type === AlertTypes.ERROR;
const errMsgStyles = {
background: isAlert ? colors.red200 : CUSTOM_GREEN,
color: 'white',
background: isAlert ? colors.red200 : colors.lightestGreen,
color: colors.white,
marginTop: 10,
padding: 4,
paddingLeft: 8,

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

@@ -1,5 +1,5 @@
import * as _ from 'lodash';
import {colors} from 'material-ui/styles';
import {colors} from 'ts/utils/colors';
import * as React from 'react';
import * as CopyToClipboard from 'react-copy-to-clipboard';
import * as ReactDOM from 'react-dom';

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

@@ -2,9 +2,9 @@ import * as _ from 'lodash';
import Menu from 'material-ui/Menu';
import Popover from 'material-ui/Popover';
import * as React from 'react';
import {colors} from 'ts/utils/colors';
const CHECK_CLOSE_POPOVER_INTERVAL_MS = 300;
const CUSTOM_LIGHT_GRAY = '#848484';
const DEFAULT_STYLE = {
fontSize: 14,
};
@@ -72,7 +72,7 @@ export class DropDownMenuItem extends React.Component<DropDownMenuItemProps, Dro
onMouseEnter={this.onHover.bind(this)}
onMouseLeave={this.onHoverOff.bind(this)}
>
<Menu style={{color: CUSTOM_LIGHT_GRAY}}>
<Menu style={{color: colors.gray}}>
{this.props.subMenuItems}
</Menu>
</div>

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

@@ -1,5 +1,5 @@
import * as _ from 'lodash';
import {colors} from 'material-ui/styles';
import {colors} from 'ts/utils/colors';
import * as React from 'react';
import ReactTooltip = require('react-tooltip');
import {EtherscanLinkSuffixes} from 'ts/types';

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

@@ -1,4 +1,4 @@
import {colors} from 'material-ui/styles';
import {colors} from 'ts/utils/colors';
import * as React from 'react';
export interface InputLabelProps {

73
packages/website/ts/components/ui/labeled_switcher.tsx
View File

@@ -1,73 +0,0 @@
import * as _ from 'lodash';
import {colors} from 'material-ui/styles';
import * as React from 'react';
const CUSTOM_BLUE = '#63A6F1';
interface LabeledSwitcherProps {
labelLeft: string;
labelRight: string;
isLeftInitiallySelected: boolean;
onLeftLabelClickAsync: () => Promise<boolean>;
onRightLabelClickAsync: () => Promise<boolean>;
}
interface LabeledSwitcherState {
isLeftSelected: boolean;
}
export class LabeledSwitcher extends React.Component<LabeledSwitcherProps, LabeledSwitcherState> {
constructor(props: LabeledSwitcherProps) {
super(props);
this.state = {
isLeftSelected: props.isLeftInitiallySelected,
};
}
public render() {
const isLeft = true;
return (
<div
className="rounded clearfix"
>
{this.renderLabel(this.props.labelLeft, isLeft, this.state.isLeftSelected)}
{this.renderLabel(this.props.labelRight, !isLeft, !this.state.isLeftSelected)}
</div>
);
}
private renderLabel(title: string, isLeft: boolean, isSelected: boolean) {
const borderStyle = `2px solid ${isSelected ? '#4F8BCF' : '#DADADA'}`;
const style = {
cursor: 'pointer',
backgroundColor: isSelected ? CUSTOM_BLUE : colors.grey200,
color: isSelected ? 'white' : '#A5A5A5',
boxShadow: isSelected ? `inset 0px 0px 4px #4083CE` : 'inset 0px 0px 4px #F7F6F6',
borderTop: borderStyle,
borderBottom: borderStyle,
[isLeft ? 'borderLeft' : 'borderRight']: borderStyle,
paddingTop: 12,
paddingBottom: 12,
};
return (
<div
className={`col col-6 center p1 ${isLeft ? 'rounded-left' : 'rounded-right'}`}
style={style}
onClick={this.onLabelClickAsync.bind(this, isLeft)}
>
{title}
</div>
);
}
private async onLabelClickAsync(isLeft: boolean): Promise<void> {
this.setState({
isLeftSelected: isLeft,
});
const didSucceed = isLeft ?
await this.props.onLeftLabelClickAsync() :
await this.props.onRightLabelClickAsync();
if (!didSucceed) {
this.setState({
isLeftSelected: !isLeft,
});
}
}
}

3
packages/website/ts/components/ui/lifecycle_raised_button.tsx
View File

@@ -1,6 +1,7 @@
import * as _ from 'lodash';
import RaisedButton from 'material-ui/RaisedButton';
import * as React from 'react';
import {colors} from 'ts/utils/colors';
import {utils} from 'ts/utils/utils';
const COMPLETE_STATE_SHOW_LENGTH_MS = 2000;
@@ -32,7 +33,7 @@ export class LifeCycleRaisedButton extends
public static defaultProps: Partial<LifeCycleRaisedButtonProps> = {
isDisabled: false,
backgroundColor: 'white',
labelColor: 'rgb(97, 97, 97)',
labelColor: colors.darkGray,
};
private buttonTimeoutId: number;
private didUnmount: boolean;

5
packages/website/ts/components/ui/party.tsx
View File

@@ -1,15 +1,14 @@
import * as _ from 'lodash';
import {colors} from 'material-ui/styles';
import * as React from 'react';
import ReactTooltip = require('react-tooltip');
import {EthereumAddress} from 'ts/components/ui/ethereum_address';
import {Identicon} from 'ts/components/ui/identicon';
import {EtherscanLinkSuffixes} from 'ts/types';
import {colors} from 'ts/utils/colors';
import {utils} from 'ts/utils/utils';
const IMAGE_DIMENSION = 100;
const IDENTICON_DIAMETER = 95;
const CHECK_MARK_GREEN = 'rgb(0, 195, 62)';
interface PartyProps {
label: string;
@@ -94,7 +93,7 @@ export class Party extends React.Component<PartyProps, PartyState> {
className="mx-auto"
style={{fontSize: 13, width: 127}}
>
<span style={{color: isRegistered ? CHECK_MARK_GREEN : colors.red500}}>
<span style={{color: isRegistered ? colors.brightGreen : colors.red500}}>
<i
className={`zmdi ${isRegistered ? 'zmdi-check-circle' : 'zmdi-alert-triangle'}`}
/>

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

@@ -1,4 +1,4 @@
import {colors} from 'material-ui/styles';
import {colors} from 'ts/utils/colors';
import * as React from 'react';
export interface RequiredLabelProps {

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

@@ -1,5 +1,5 @@
import * as _ from 'lodash';
import {colors} from 'material-ui/styles';
import {colors} from 'ts/utils/colors';
import * as React from 'react';
interface SwapIconProps {