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

Center all the things

Browse Source
This commit is contained in:
fragosti
2018-05-17 12:00:00 -07:00
parent 5bc83fceaa
commit e9e570db4f
4 changed files with 46 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/website/ts/components/inputs/balance_bounded_input.tsx
View File

@@ -23,6 +23,8 @@ interface BalanceBoundedInputProps {
isDisabled?: boolean;
shouldShowErrs?: boolean;
shouldShowUnderline?: boolean;
inputStyle?: React.CSSProperties;
inputHintStyle?: React.CSSProperties;
}
interface BalanceBoundedInputState {
@@ -95,6 +97,8 @@ export class BalanceBoundedInput extends React.Component<BalanceBoundedInputProp
hintText={<span style={{ textTransform: 'capitalize' }}>{this.props.hintText}</span>}
onChange={this._onValueChange.bind(this)}
underlineStyle={{ width: 'calc(100% + 50px)' }}
inputStyle={this.props.inputStyle}
hintStyle={this.props.inputHintStyle}
underlineShow={this.props.shouldShowUnderline}
disabled={this.props.isDisabled}
/>

9
packages/website/ts/components/inputs/eth_amount_input.tsx
View File

@@ -20,6 +20,8 @@ interface EthAmountInputProps {
shouldShowErrs?: boolean;
shouldShowUnderline?: boolean;
style?: React.CSSProperties;
labelStyle?: React.CSSProperties;
inputHintStyle?: React.CSSProperties;
}
interface EthAmountInputState {}
@@ -49,8 +51,10 @@ export class EthAmountInput extends React.Component<EthAmountInputProps, EthAmou
hintText={this.props.hintText}
shouldShowErrs={this.props.shouldShowErrs}
shouldShowUnderline={this.props.shouldShowUnderline}
inputStyle={this.props.style}
inputHintStyle={this.props.inputHintStyle}
/>
<div style={{ paddingTop: _.isUndefined(this.props.label) ? 15 : 40 }}>ETH</div>
<div style={this._getLabelStyle()}>ETH</div>
</div>
);
}
@@ -60,4 +64,7 @@ export class EthAmountInput extends React.Component<EthAmountInputProps, EthAmou
: ZeroEx.toBaseUnitAmount(amount, constants.DECIMAL_PLACES_ETH);
this.props.onChange(isValid, baseUnitAmountIfExists);
}
private _getLabelStyle(): React.CSSProperties {
return this.props.labelStyle || { paddingTop: _.isUndefined(this.props.label) ? 15 : 40 };
}
}

22
packages/website/ts/components/inputs/token_amount_input.tsx
View File

@@ -26,6 +26,8 @@ interface TokenAmountInputProps {
shouldShowErrs?: boolean;
shouldShowUnderline?: boolean;
style?: React.CSSProperties;
labelStyle?: React.CSSProperties;
inputHintStyle?: React.CSSProperties;
}
interface TokenAmountInputState {
@@ -75,12 +77,8 @@ export class TokenAmountInput extends React.Component<TokenAmountInputProps, Tok
const amount = this.props.amount
? ZeroEx.toUnitAmount(this.props.amount, this.props.token.decimals)
: undefined;
const hasLabel = !_.isUndefined(this.props.label);
const style = !_.isUndefined(this.props.style)
? this.props.style
: { height: hasLabel ? HEIGHT_WITH_LABEL : HEIGHT_WITHOUT_LABEL };
return (
<div className="flex overflow-hidden" style={style}>
<div className="flex overflow-hidden" style={this._getStyle()}>
<BalanceBoundedInput
label={this.props.label}
amount={amount}
@@ -95,8 +93,10 @@ export class TokenAmountInput extends React.Component<TokenAmountInputProps, Tok
hintText={this.props.hintText}
shouldShowErrs={this.props.shouldShowErrs}
shouldShowUnderline={this.props.shouldShowUnderline}
inputStyle={this.props.style}
inputHintStyle={this.props.inputHintStyle}
/>
<div style={{ paddingTop: hasLabel ? 39 : 14 }}>{this.props.token.symbol}</div>
<div style={this._getLabelStyle()}>{this.props.token.symbol}</div>
</div>
);
}
@@ -141,4 +141,14 @@ export class TokenAmountInput extends React.Component<TokenAmountInputProps, Tok
});
}
}
private _getStyle(): React.CSSProperties {
const hasLabel = !_.isUndefined(this.props.label);
return !_.isUndefined(this.props.style)
? this.props.style
: { height: hasLabel ? HEIGHT_WITH_LABEL : HEIGHT_WITHOUT_LABEL };
}
private _getLabelStyle(): React.CSSProperties {
const hasLabel = !_.isUndefined(this.props.label);
return this.props.labelStyle || { paddingTop: hasLabel ? 39 : 14 };
}
}

22
packages/website/ts/components/wallet/wrap_ether_item.tsx
View File

@@ -46,9 +46,19 @@ const styles: Styles = {
padding: 4,
width: 125,
},
ethAmountInput: { height: 32 },
amountInput: { height: 34 },
amountInputLabel: {
paddingTop: 10,
paddingRight: 10,
paddingLeft: 5,
color: colors.grey,
fontSize: 14,
},
amountInputHint: {
bottom: 18,
},
innerDiv: { paddingLeft: 60, paddingTop: 0, paddingBottom: 10 },
wrapEtherConfirmationButtonContainer: { width: 128, top: 18 },
wrapEtherConfirmationButtonContainer: { width: 128, top: 19 },
wrapEtherConfirmationButtonLabel: {
fontSize: 12,
color: colors.white,
@@ -90,7 +100,9 @@ export class WrapEtherItem extends React.Component<WrapEtherItemProps, WrapEther
shouldShowIncompleteErrs={false}
shouldShowErrs={false}
shouldShowUnderline={false}
style={styles.ethAmountInput}
style={styles.amountInput}
labelStyle={styles.amountInputLabel}
inputHintStyle={styles.amountInputHint}
onErrorMsgChange={this._onErrorMsgChange.bind(this)}
/>
) : (
@@ -108,7 +120,9 @@ export class WrapEtherItem extends React.Component<WrapEtherItemProps, WrapEther
hintText="0.00"
shouldShowErrs={false}
shouldShowUnderline={false}
style={styles.ethAmountInput}
style={styles.amountInput}
labelStyle={styles.amountInputLabel}
inputHintStyle={styles.amountInputHint}
onErrorMsgChange={this._onErrorMsgChange.bind(this)}
/>
)}