Merge pull request #64 from satoshilabs/fix-send-form-css

fix: send form css

src/actions/SendFormActions.js

@@ -247,7 +247,7 @@ export const init = (): AsyncAction => async (dispatch: Dispatch, getState: GetS
 
 
     // const gasPrice: BigNumber = new BigNumber(EthereumjsUnits.convert(web3.gasPrice, 'wei', 'gwei')) || new BigNumber(network.defaultGasPrice);
-    const gasPrice: BigNumber = await dispatch( BlockchainActions.getGasPrice(network.network, network.defaultGasPrice) );
+    const gasPrice: BigNumber = await dispatch(BlockchainActions.getGasPrice(network.network, network.defaultGasPrice));
     // const gasPrice: BigNumber = new BigNumber(network.defaultGasPrice);
     const gasLimit: string = network.defaultGasLimit.toString();
     const feeLevels: Array<FeeLevel> = getFeeLevels(network.symbol, gasPrice, gasLimit);
@@ -721,7 +721,7 @@ const estimateGasPrice = (): AsyncAction => async (dispatch: Dispatch, getState:
         return;
     }
 
-    const gasLimit: number = await dispatch( BlockchainActions.estimateGasLimit(network.network, state.data, state.amount, state.gasPrice) );
+    const gasLimit: number = await dispatch(BlockchainActions.estimateGasLimit(network.network, state.data, state.amount, state.gasPrice));
 
     if (getState().sendForm.data === requestedData) {
         dispatch(onGasLimitChange(gasLimit.toString()));
@@ -771,7 +771,7 @@ export const onSend = (): AsyncAction => async (dispatch: Dispatch, getState: Ge
     const pendingNonce: number = stateUtils.getPendingNonce(pending);
     const nonce = pendingNonce > 0 && pendingNonce >= account.nonce ? pendingNonce : account.nonce;
 
-    const txData = await dispatch( prepareEthereumTx({
+    const txData = await dispatch(prepareEthereumTx({
         network: network.network,
         token: isToken ? findToken(getState().tokens, account.address, currentState.currency, account.deviceState) : null,
         from: account.address,
@@ -780,8 +780,8 @@ export const onSend = (): AsyncAction => async (dispatch: Dispatch, getState: Ge
         data: currentState.data,
         gasLimit: currentState.gasLimit,
         gasPrice: currentState.gasPrice,
-        nonce
+        nonce,
-    }) );
+    }));
 
     const selected: ?TrezorDevice = getState().wallet.selectedDevice;
     if (!selected) return;
@@ -816,14 +816,14 @@ export const onSend = (): AsyncAction => async (dispatch: Dispatch, getState: Ge
     txData.v = signedTransaction.payload.v;
 
     try {
-        const serializedTx: string = await dispatch( serializeEthereumTx(txData) );
+        const serializedTx: string = await dispatch(serializeEthereumTx(txData));
         const push = await TrezorConnect.pushTransaction({
             tx: serializedTx,
-            coin: network.network
+            coin: network.network,
         });
 
         if (!push.success) {
-            throw new Error( push.payload.error );
+            throw new Error(push.payload.error);
         }
 
         const txid = push.payload.txid;

src/components/Select/index.js

@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 import ReactSelect from 'react-select';
 import ReactAsyncSelect from 'react-select/lib/Async';
 import colors from 'config/colors';
-import { FONT_FAMILY } from 'config/variables';
 
 const styles = isSearchable => ({
     singleValue: base => ({
@@ -13,7 +12,6 @@ const styles = isSearchable => ({
     }),
     control: (base, { isDisabled }) => ({
         ...base,
-        fontFamily: FONT_FAMILY.MONOSPACE,
         minHeight: 'initial',
         height: '100%',
         borderRadius: '2px',
@@ -45,7 +43,6 @@ const styles = isSearchable => ({
     menuList: base => ({
         ...base,
         padding: 0,
-        fontFamily: FONT_FAMILY.MONOSPACE,
         boxShadow: 'none',
         background: colors.WHITE,
         borderLeft: `1px solid ${colors.DIVIDER}`,

src/components/inputs/Input/index.js

@@ -8,7 +8,6 @@ import {
     FONT_SIZE,
     FONT_WEIGHT,
     TRANSITION,
-    FONT_FAMILY,
 } from 'config/variables';
 
 const Wrapper = styled.div`
@@ -35,10 +34,9 @@ const TopLabel = styled.span`
 
 const StyledInput = styled.input`
     width: 100%;
-    padding: 6px 12px;
+    padding: 6px ${props => (props.hasIcon ? '40px' : '12px')} 6px 12px;
 
     line-height: 1.42857143;
-    font-family: ${FONT_FAMILY.MONOSPACE};
     font-size: ${FONT_SIZE.SMALL};
     font-weight: ${FONT_WEIGHT.BASE};
     color: ${colors.TEXT_PRIMARY};
@@ -114,6 +112,7 @@ class Input extends Component {
                             />
                         )}
                         <StyledInput
+                            hasIcon={!!this.props.state}
                             innerRef={this.props.innerRef}
                             hasAddon={!!this.props.sideAddons}
                             type={this.props.type}

src/views/Wallet/views/AccountSend/components/PendingTransactions/index.js

@@ -18,12 +18,17 @@ type Props = {
 }
 
 const Wrapper = styled.div`
+    padding-top: 20px;
     border-top: 1px solid ${colors.DIVIDER};
 `;
 
+const StyledLink = styled(Link)`
+    text-decoration: none;
+`;
+
 const TransactionWrapper = styled.div`
     border-bottom: 1px solid ${colors.DIVIDER};
-    padding: 14px 48px;
+    padding: 14px 0;
     display: flex;
     flex-direction: row;
     align-items: center;
@@ -39,13 +44,17 @@ const TransactionIcon = styled.div`
     width: 36px;
     height: 36px;
     border-radius: 50%;
-    line-height: 30px;
+    line-height: 25px;
     text-transform: uppercase;
     user-select: none;
     text-align: center;
-    color: ${props => props.color};
+    color: ${props => props.textColor};
     background: ${props => props.background};
     border-color: ${props => props.borderColor};
+
+    &:before {
+        content: ${props => props.color};
+    }
 `;
 
 const P = styled.p``;
@@ -54,7 +63,9 @@ const TransactionName = styled.div`
     flex: 1;
 `;
 
-const TransactionAmount = styled.div``;
+const TransactionAmount = styled.div`
+    color: colors.TEXT_SECONDARY;
+`;
 
 class PendingTransactions extends Component<Props> {
     getPendingTransactions() {
@@ -62,7 +73,11 @@ class PendingTransactions extends Component<Props> {
     }
 
     getTransactionIconColors(tx: any) {
-        let iconColors = { };
+        let iconColors = {
+            textColor: '#fff',
+            background: '#000',
+            borderColor: '#000',
+        };
         const bgColorFactory = new ColorHash({ lightness: 0.7 });
         const textColorFactory = new ColorHash();
 
@@ -73,26 +88,25 @@ class PendingTransactions extends Component<Props> {
 
             if (!token) {
                 iconColors = {
-                    color: '#ffffff',
+                    textColor: '#ffffff',
                     background: '#000000',
                     borderColor: '#000000',
                 };
             } else {
                 const bgColor: string = bgColorFactory.hex(token.name);
                 iconColors = {
-                    color: textColorFactory.hex(token.name),
+                    textColor: textColorFactory.hex(token.name),
                     background: bgColor,
                     borderColor: bgColor,
                 };
             }
         } else {
             iconColors = {
-                color: textColorFactory.hex(tx.network),
+                textColor: textColorFactory.hex(tx.network),
                 background: bgColorFactory.hex(tx.network),
                 borderColor: bgColorFactory.hex(tx.network),
             };
         }
-
         return iconColors;
     }
 
@@ -125,9 +139,11 @@ class PendingTransactions extends Component<Props> {
             <Wrapper>
                 <H2>Pending transactions</H2>
                 {this.getPendingTransactions().map(tx => (
-                    <TransactionWrapper>
+                    <TransactionWrapper
+                        key={tx.id}
+                    >
                         <TransactionIcon
-                            color={() => this.getTransactionIconColors(tx).color}
+                            textColor={() => this.getTransactionIconColors(tx).textColor}
                             background={() => this.getTransactionIconColors(tx).background}
                             borderColor={() => this.getTransactionIconColors(tx).borderColor}
                         >
@@ -137,13 +153,14 @@ class PendingTransactions extends Component<Props> {
                         </TransactionIcon>
 
                         <TransactionName>
-                            <Link
+                            <StyledLink
                                 href={`${this.props.network.explorer.tx}${tx.id}`}
                                 target="_blank"
                                 rel="noreferrer noopener"
+                                isGray
                             >
                                 {this.getTransactionName(tx)}
-                            </Link>
+                            </StyledLink>
                         </TransactionName>
 
                         <TransactionAmount>

src/views/Wallet/views/AccountSend/index.js

@@ -21,6 +21,10 @@ import PendingTransactions from './components/PendingTransactions';
 
 import type { Props } from './Container';
 
+// TODO: Decide on a small screen width for the whole app
+// and put it inside config/variables.js
+const SmallScreenWidth = '850px';
+
 type State = {
     isAdvancedSettingsHidden: boolean,
     shouldAnimateAdvancedSettingsToggle: boolean,
@@ -76,6 +80,7 @@ const SetMaxAmountButton = styled(Button)`
 `;
 
 const CurrencySelect = styled(Select)`
+    min-width: 77px;
     height: 34px;
     flex: 0.2;
 `;
@@ -108,12 +113,21 @@ const StyledLink = styled(Link)`
 `;
 
 const ToggleAdvancedSettingsWrapper = styled.div`
+    min-height: 40px;
     margin-bottom: 20px;
     display: flex;
+    flex-direction: row;
     justify-content: space-between;
+
+    @media screen and (max-width: ${SmallScreenWidth}) {
+        ${props => (props.isAdvancedSettingsHidden && css`
+            flex-direction: column;
+        `)}
+    }
 `;
 
 const ToggleAdvancedSettingsButton = styled(Button)`
+    min-height: 40px;
     padding: 0;
     display: flex;
     align-items: center;
@@ -121,7 +135,12 @@ const ToggleAdvancedSettingsButton = styled(Button)`
 `;
 
 const SendButton = styled(Button)`
-    min-width: 50%;
+    min-width: ${props => (props.isAdvancedSettingsHidden ? '50%' : '100%')};
+    font-size: 13px;
+
+    @media screen and (max-width: ${SmallScreenWidth}) {
+        margin-top: ${props => (props.isAdvancedSettingsHidden ? '10px' : 0)};
+    }
 `;
 
 const AdvancedSettingsWrapper = styled.div`
@@ -188,9 +207,11 @@ class AccountSend extends Component<Props, State> {
         let state = '';
         if (address && !addressErrors) {
             state = 'success';
-        } else if (addressWarnings && !addressErrors) {
+        }
+        if (addressWarnings && !addressErrors) {
             state = 'warning';
-        } else if (addressErrors) {
+        }
+        if (addressErrors) {
             state = 'error';
         }
         return state;
@@ -200,27 +221,19 @@ class AccountSend extends Component<Props, State> {
         let state = '';
         if (amountWarnings && !amountErrors) {
             state = 'warning';
-        } else if (amountErrors) {
+        }
+        if (amountErrors) {
             state = 'error';
         }
         return state;
     }
 
-    getAmountInputBottomText(amountErrors: string, amountWarnings: string) {
-        let text = '';
-        if (amountWarnings && !amountErrors) {
-            text = amountWarnings;
-        } else if (amountErrors) {
-            text = amountErrors;
-        }
-        return text;
-    }
-
     getGasLimitInputState(gasLimitErrors: string, gasLimitWarnings: string) {
         let state = '';
         if (gasLimitWarnings && !gasLimitErrors) {
             state = 'warning';
-        } else if (gasLimitErrors) {
+        }
+        if (gasLimitErrors) {
             state = 'error';
         }
         return state;
@@ -230,7 +243,8 @@ class AccountSend extends Component<Props, State> {
         let state = '';
         if (gasPriceWarnings && !gasPriceErrors) {
             state = 'warning';
-        } else if (gasPriceErrors) {
+        }
+        if (gasPriceErrors) {
             state = 'error';
         }
         return state;
@@ -275,6 +289,7 @@ class AccountSend extends Component<Props, State> {
             total,
             errors,
             warnings,
+            infos,
             data,
             sending,
             gasLimit,
@@ -340,7 +355,7 @@ class AccountSend extends Component<Props, State> {
                             autoCapitalize="off"
                             spellCheck="false"
                             topLabel="Address"
-                            bottomText={errors.address ? 'Wrong Address' : ''}
+                            bottomText={errors.address || warnings.address || infos.address}
                             value={address}
                             onChange={event => onAddressChange(event.target.value)}
                         />
@@ -356,7 +371,7 @@ class AccountSend extends Component<Props, State> {
                             topLabel="Amount"
                             value={amount}
                             onChange={event => onAmountChange(event.target.value)}
-                            bottomText={this.getAmountInputBottomText(errors.amount, warnings.amount)}
+                            bottomText={errors.amount || warnings.amount || infos.amount}
                             sideAddons={[
                                 (
                                     <SetMaxAmountButton
@@ -430,7 +445,9 @@ class AccountSend extends Component<Props, State> {
                         />
                     </InputRow>
 
-                    <ToggleAdvancedSettingsWrapper>
+                    <ToggleAdvancedSettingsWrapper
+                        isAdvancedSettingsHidden={this.state.isAdvancedSettingsHidden}
+                    >
                         <ToggleAdvancedSettingsButton
                             isTransparent
                             onClick={() => this.handleToggleAdvancedSettingsButton()}
@@ -448,6 +465,7 @@ class AccountSend extends Component<Props, State> {
                         {this.state.isAdvancedSettingsHidden && (
                             <SendButton
                                 isDisabled={isSendButtonDisabled}
+                                isAdvancedSettingsHidden={this.state.isAdvancedSettingsHidden}
                                 onClick={() => onSend()}
                             >
                                 {sendButtonText}
@@ -486,7 +504,7 @@ class AccountSend extends Component<Props, State> {
                                             </Tooltip>
                                         </InputLabelWrapper>
                                     )}
-                                    bottomText={errors.gasLimit ? errors.gasLimit : warnings.gasLimit}
+                                    bottomText={errors.gasLimit || warnings.gasLimit || infos.gasLimit}
                                     value={gasLimit}
                                     isDisabled={networkSymbol === currency && data.length > 0}
                                     onChange={event => onGasLimitChange(event.target.value)}
@@ -520,7 +538,7 @@ class AccountSend extends Component<Props, State> {
                                             </Tooltip>
                                         </InputLabelWrapper>
                                     )}
-                                    bottomText={errors.gasPrice ? errors.gasPrice : warnings.gasPrice}
+                                    bottomText={errors.gasPrice || warnings.gasPrice || infos.gasPrice}
                                     value={gasPrice}
                                     onChange={event => onGasPriceChange(event.target.value)}
                                 />