Merge pull request #79 from andrerfneves/bugfix/review-fixes

Bugfix/review fixes

app/app.js

@@ -9,7 +9,7 @@ import { configureStore, history } from './redux/create';
 import { Router } from './router/container';
 import { appTheme as theme, GlobalStyle } from './theme';
 import electronStore from '../config/electron-store';
-import { DARK, THEME_MODE } from './constants/themes';
+import { DARK, LIGHT, THEME_MODE } from './constants/themes';
 
 const store = configureStore({});
 
@@ -18,15 +18,19 @@ type State = {
   themeMode: string,
 };
 
+const getInitialTheme = () => {
+  const themeInStore = String(electronStore.get(THEME_MODE));
+  if (themeInStore === DARK || themeInStore === LIGHT) return themeInStore;
+  return DARK;
+};
+
 export class App extends Component<Props, State> {
   state = {
-    themeMode: electronStore.get(THEME_MODE) || DARK,
+    themeMode: getInitialTheme(),
   };
 
   componentDidMount() {
-    if (!electronStore.has(THEME_MODE)) {
-      electronStore.set(THEME_MODE, DARK);
-    }
+    electronStore.set(THEME_MODE, getInitialTheme());
 
     electronStore.onDidChange(THEME_MODE, newValue => this.setState({ themeMode: newValue }));
   }

app/components/loading-screen.js

@@ -108,8 +108,8 @@ class Component extends PureComponent<Props, State> {
                     progress={progress}
                     responsive
                     showPercentage={false}
-                    progressColor={theme.colors.activeItem}
-                    bgColor={theme.colors.inactiveItem}
+                    progressColor={theme.colors.activeItem(this.props)}
+                    bgColor={theme.colors.inactiveItem(this.props)}
                   />
                 </CircleWrapper>
                 <LoadingText value={message} />

app/components/transaction-details.js

@@ -18,8 +18,6 @@ import { TextComponent } from './text';
 import { RowComponent } from './row';
 import { ColumnComponent } from './column';
 
-import { appTheme } from '../theme';
-
 import { formatNumber } from '../utils/format-number';
 import { openExternal } from '../utils/open-external';
 
@@ -164,7 +162,11 @@ const Component = ({
             append: `${isReceived ? '+' : '-'}ZEC `,
             value: amount,
           })}
-          color={isReceived ? appTheme.colors.transactionReceived : appTheme.colors.transactionSent}
+          color={
+            isReceived
+              ? theme.colors.transactionReceived({ theme })
+              : theme.colors.transactionSent({ theme })
+          }
         />
         <TextComponent
           value={formatNumber({
@@ -172,7 +174,7 @@ const Component = ({
             value: new BigNumber(amount).times(zecPrice).toNumber(),
           })}
           size={1.5}
-          color={appTheme.colors.transactionDetailsLabel}
+          color={theme.colors.transactionDetailsLabel({ theme })}
         />
       </DetailsWrapper>
       <InfoRow>
@@ -181,7 +183,11 @@ const Component = ({
           <TextComponent value={dateFns.format(new Date(date), 'MMMM D, YYYY HH:MMA')} />
         </ColumnComponent>
         <ColumnComponent>
-          <TextComponent value='FEES' isBold color={appTheme.colors.transactionDetailsLabel} />
+          <TextComponent
+            value='FEES'
+            isBold
+            color={theme.colors.transactionDetailsLabel({ theme })}
+          />
           <TextComponent
             value={
               fees === 'N/A'

app/components/transaction-item.js

@@ -125,9 +125,16 @@ const Component = ({
             <TextComponent
               isBold
               value={transactionValueInZec}
-              color={isReceived ? theme.colors.transactionReceived : theme.colors.transactionSent}
+              color={
+                isReceived
+                  ? theme.colors.transactionReceived({ theme })
+                  : theme.colors.transactionSent({ theme })
+              }
+            />
+            <TextComponent
+              value={transactionValueInUsd}
+              color={theme.colors.inactiveItem({ theme })}
             />
-            <TextComponent value={transactionValueInUsd} color={theme.colors.inactiveItem} />
           </ColumnComponent>
         </Wrapper>
       )}

app/views/send.js

@@ -80,7 +80,7 @@ const AmountWrapper = styled.div`
     content: 'ZEC';
     font-family: ${props => props.theme.fontFamily};
     position: absolute;
-    margin-top: 15px;
+    margin-top: 16px;
     margin-left: 15px;
     display: block;
     transition: all 0.05s ease-in-out;
@@ -361,7 +361,11 @@ class Component extends PureComponent<Props, State> {
   }
 
   updateTooltipVisibility = ({ balance, amount }: { balance: number, amount: number }) => {
-    this.setState({ showBalanceTooltip: new BigNumber(amount).gt(balance) });
+    const { from, to } = this.state;
+
+    this.setState({
+      showBalanceTooltip: !from || !to ? false : new BigNumber(amount).gt(balance),
+    });
   };
 
   getAmountWithFee = () => {
@@ -379,11 +383,15 @@ class Component extends PureComponent<Props, State> {
     const { amount } = this.state;
 
     if (field === 'to') {
-      this.setState(() => ({ [field]: value }), () => validateAddress({ address: String(value) }));
-    } else if (field === 'amount') {
       this.setState(
         () => ({ [field]: value }),
-        () => this.updateTooltipVisibility({ balance, amount: new BigNumber(value).toNumber() }),
+        () => {
+          validateAddress({ address: String(value) });
+          this.updateTooltipVisibility({
+            balance,
+            amount: new BigNumber(amount).toNumber(),
+          });
+        },
       );
     } else {
       if (field === 'from') getAddressBalance({ address: String(value) });
@@ -392,6 +400,10 @@ class Component extends PureComponent<Props, State> {
         () => ({ [field]: value }),
         () => {
           if (field === 'fee') this.handleChange('amount')(amount);
+          this.updateTooltipVisibility({
+            balance,
+            amount: new BigNumber(field === 'amount' ? value : amount).toNumber(),
+          });
         },
       );
     }
@@ -461,7 +473,6 @@ class Component extends PureComponent<Props, State> {
     const feeValue = new BigNumber(fee);
 
     if (feeValue.isEqualTo(FEES.LOW)) return `Low ZEC ${feeValue.toString()}`;
-    // eslint-disable-next-line max-len
     if (feeValue.isEqualTo(FEES.MEDIUM)) return `Medium ZEC ${feeValue.toString()}`;
     if (feeValue.isEqualTo(FEES.HIGH)) return `High ZEC ${feeValue.toString()}`;
 
@@ -474,12 +485,12 @@ class Component extends PureComponent<Props, State> {
     return isToAddressValid ? (
       <ValidateWrapper alignItems='center'>
         <ValidateStatusIcon src={ValidIcon} />
-        <ValidateItemLabel value='VALID' color={theme.colors.transactionReceived} />
+        <ValidateItemLabel value='VALID' color={theme.colors.transactionReceived(this.props)} />
       </ValidateWrapper>
     ) : (
       <ValidateWrapper alignItems='center'>
         <ValidateStatusIcon src={InvalidIcon} />
-        <ValidateItemLabel value='INVALID' color={theme.colors.transactionSent} />
+        <ValidateItemLabel value='INVALID' color={theme.colors.transactionSent(this.props)} />
       </ValidateWrapper>
     );
   };
@@ -712,8 +723,8 @@ class Component extends PureComponent<Props, State> {
                             onChange={this.handleChange('fee')}
                             value={String(fee)}
                             disabled={feeType !== FEES.CUSTOM}
-                            bgColor={theme.colors.sendAdditionalInputBg}
-                            color={theme.colors.sendAdditionalInputText}
+                            bgColor={theme.colors.sendAdditionalInputBg(this.props)}
+                            color={theme.colors.sendAdditionalInputText(this.props)}
                             name='fee'
                           />
                         </ColumnComponent>
@@ -721,7 +732,7 @@ class Component extends PureComponent<Props, State> {
                           <SelectComponent
                             placement='top'
                             value={String(feeType)}
-                            bgColor={theme.colors.sendAdditionalInputBg}
+                            bgColor={theme.colors.sendAdditionalInputBg(this.props)}
                             onChange={this.handleChangeFeeType}
                             options={Object.keys(FEES).map(cur => ({
                               label: cur.toLowerCase(),

public/flow-coverage-badge.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="125" height="20"><linearGradient id="b" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><mask id="a"><rect width="125" height="20" rx="3" fill="#fff"/></mask><g mask="url(#a)"><path fill="#555" d="M0 0h91v20H0z"/><path fill="#4C1" d="M91 0h34v20H91z"/><path fill="url(#b)" d="M0 0h125v20H0z"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,DejaVu Sans,Geneva,sans-serif" font-size="11"><text x="45.5" y="15" fill="#010101" fill-opacity=".3">flow-coverage</text><text x="45.5" y="14">flow-coverage</text><text x="107" y="15" fill="#010101" fill-opacity=".3">88%</text><text x="107" y="14">88%</text></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="125" height="20"><linearGradient id="b" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><mask id="a"><rect width="125" height="20" rx="3" fill="#fff"/></mask><g mask="url(#a)"><path fill="#555" d="M0 0h91v20H0z"/><path fill="#4C1" d="M91 0h34v20H91z"/><path fill="url(#b)" d="M0 0h125v20H0z"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,DejaVu Sans,Geneva,sans-serif" font-size="11"><text x="45.5" y="15" fill="#010101" fill-opacity=".3">flow-coverage</text><text x="45.5" y="14">flow-coverage</text><text x="107" y="15" fill="#010101" fill-opacity=".3">89%</text><text x="107" y="14">89%</text></g></svg>