1
0
mirror of https://github.com/trezor/trezor-wallet synced 2024-11-24 09:18:09 +00:00

Fix tooltip positioning & size

This commit is contained in:
Vasek Mlejnsky 2018-09-05 15:26:14 +02:00
parent 344b783e22
commit e6ba3fab92

View File

@ -163,6 +163,11 @@ const GreenSpan = styled.span`
color: ${colors.GREEN_PRIMARY}; color: ${colors.GREEN_PRIMARY};
`; `;
const InputLabelWrapper = styled.div`
display: flex;
align-items: center;
`;
class AccountSend extends Component<Props, State> { class AccountSend extends Component<Props, State> {
constructor(props: Props) { constructor(props: Props) {
super(props); super(props);
@ -322,6 +327,7 @@ class AccountSend extends Component<Props, State> {
gasLimitTooltipValue = network.defaultGasLimit.toString(10); gasLimitTooltipValue = network.defaultGasLimit.toString(10);
} }
return ( return (
<SelectedAccount {...this.props}> <SelectedAccount {...this.props}>
<Wrapper> <Wrapper>
@ -459,7 +465,7 @@ class AccountSend extends Component<Props, State> {
autoCapitalize="off" autoCapitalize="off"
spellCheck="false" spellCheck="false"
topLabel={( topLabel={(
<React.Fragment> <InputLabelWrapper>
Gas limit Gas limit
<Tooltip <Tooltip
content={( content={(
@ -475,9 +481,10 @@ class AccountSend extends Component<Props, State> {
<Icon <Icon
icon={ICONS.HELP} icon={ICONS.HELP}
color={colors.TEXT_SECONDARY} color={colors.TEXT_SECONDARY}
size={24}
/> />
</Tooltip> </Tooltip>
</React.Fragment> </InputLabelWrapper>
)} )}
bottomText={errors.gasLimit ? errors.gasLimit : warnings.gasLimit} bottomText={errors.gasLimit ? errors.gasLimit : warnings.gasLimit}
value={gasLimit} value={gasLimit}
@ -492,7 +499,7 @@ class AccountSend extends Component<Props, State> {
autoCapitalize="off" autoCapitalize="off"
spellCheck="false" spellCheck="false"
topLabel={( topLabel={(
<React.Fragment> <InputLabelWrapper>
Gas price Gas price
<Tooltip <Tooltip
content={( content={(
@ -508,9 +515,10 @@ class AccountSend extends Component<Props, State> {
<Icon <Icon
icon={ICONS.HELP} icon={ICONS.HELP}
color={colors.TEXT_SECONDARY} color={colors.TEXT_SECONDARY}
size={24}
/> />
</Tooltip> </Tooltip>
</React.Fragment> </InputLabelWrapper>
)} )}
bottomText={errors.gasPrice ? errors.gasPrice : warnings.gasPrice} bottomText={errors.gasPrice ? errors.gasPrice : warnings.gasPrice}
value={gasPrice} value={gasPrice}
@ -520,7 +528,7 @@ class AccountSend extends Component<Props, State> {
<StyledTextarea <StyledTextarea
topLabel={( topLabel={(
<React.Fragment> <InputLabelWrapper>
Data Data
<Tooltip <Tooltip
content={( content={(
@ -533,9 +541,10 @@ class AccountSend extends Component<Props, State> {
<Icon <Icon
icon={ICONS.HELP} icon={ICONS.HELP}
color={colors.TEXT_SECONDARY} color={colors.TEXT_SECONDARY}
size={24}
/> />
</Tooltip> </Tooltip>
</React.Fragment> </InputLabelWrapper>
)} )}
disabled={networkSymbol !== currency} disabled={networkSymbol !== currency}
value={networkSymbol !== currency ? '' : data} value={networkSymbol !== currency ? '' : data}
@ -553,11 +562,13 @@ class AccountSend extends Component<Props, State> {
</AdvancedSettingsWrapper> </AdvancedSettingsWrapper>
)} )}
<PendingTransactions {this.props.selectedAccount.pending.length > 0 && (
pending={this.props.selectedAccount.pending} <PendingTransactions
tokens={this.props.selectedAccount.tokens} pending={this.props.selectedAccount.pending}
network={network} tokens={this.props.selectedAccount.tokens}
/> network={network}
/>
)}
</Wrapper> </Wrapper>
</SelectedAccount> </SelectedAccount>
); );