From 0281d6030f970a36a4cb1624a9a9a5434d0dfd86 Mon Sep 17 00:00:00 2001
From: George Lima <georgelima11@hotmail.com>
Date: Thu, 10 Jan 2019 17:49:32 -0300
Subject: [PATCH 1/4] feature: enable testnet for tests

---
 config/daemon/zcashd-child-process.js | 3 +++
 services/api.js                       | 3 ++-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/config/daemon/zcashd-child-process.js b/config/daemon/zcashd-child-process.js
index adade34..48afcb1 100644
--- a/config/daemon/zcashd-child-process.js
+++ b/config/daemon/zcashd-child-process.js
@@ -34,6 +34,9 @@ const getDaemonOptions = ({ username, password }) => {
     '-metricsrefreshtime=1',
     `-rpcuser=${username}`,
     `-rpcpassword=${password}`,
+    // TODO: For test purposes only
+    '-testnet',
+    '-addnode=testnet.z.cash',
   ];
   return isDev
     ? defaultOptions.concat(['-testnet', '-addnode=testnet.z.cash'])
diff --git a/services/api.js b/services/api.js
index adebe47..4e6d5c9 100644
--- a/services/api.js
+++ b/services/api.js
@@ -8,7 +8,8 @@ import store from '../config/electron-store';
 
 const RPC = {
   host: '127.0.0.1',
-  port: isDev ? 18232 : 8232,
+  // port: isDev ? 18232 : 8232,
+  port: 18232, // TODO: Test purposes only
   user: store.get('rpcuser'),
   password: store.get('rpcpassword'),
 };

From 9a8db79924645d2eb2839562d202a66f2187f644 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Neves?= <andrerfneves@protonmail.com>
Date: Thu, 10 Jan 2019 22:30:46 -0500
Subject: [PATCH 2/4] refactor: UI improvements all around chore: adding tests
 to flowconfig ignore transaction deatils and item fixes

---
 .flowconfig                           |  2 +
 app/components/button.js              | 17 ++---
 app/components/dropdown.js            | 49 ++++++++------
 app/components/header.js              |  2 +
 app/components/sidebar.js             | 39 +++++++----
 app/components/transaction-details.js | 95 +++++++++++++++++----------
 app/components/transaction-item.js    |  7 +-
 app/theme.js                          | 11 ++--
 app/views/receive.js                  |  6 +-
 app/views/send.js                     | 17 +++--
 10 files changed, 154 insertions(+), 91 deletions(-)

diff --git a/.flowconfig b/.flowconfig
index b5f785d..ebdc92d 100644
--- a/.flowconfig
+++ b/.flowconfig
@@ -1,5 +1,7 @@
 [ignore]
 .*/node_modules/polished/.*
+./__tests__
+./__tests__/
 
 [include]
 
diff --git a/app/components/button.js b/app/components/button.js
index dad1a69..3211d82 100644
--- a/app/components/button.js
+++ b/app/components/button.js
@@ -10,23 +10,14 @@ import { darken } from 'polished';
 
 const DefaultButton = styled.button`
   padding: 10px 30px;
-  font-family: ${
-  // $FlowFixMe
-  props => props.theme.fontFamily
-};
-  font-weight: ${
-  // $FlowFixMe
-  props => props.theme.fontWeight.bold
-};
-  font-size: ${
-  // $FlowFixMe
-  props => `${props.theme.fontSize.regular}em`
-};
+  font-family: ${props => props.theme.fontFamily};
+  font-weight: ${props => props.theme.fontWeight.bold};
+  font-size: ${props => `${props.theme.fontSize.regular}em`};
   cursor: pointer;
   outline: none;
   min-width: 100px;
   border-radius: 100px;
-  transition: background-color 0.1s ease-in-out;
+  transition: background-color 0.1s ${props => props.theme.colors.transitionEase};
   width: 100%;
 `;
 
diff --git a/app/components/dropdown.js b/app/components/dropdown.js
index 4539660..115ccc2 100644
--- a/app/components/dropdown.js
+++ b/app/components/dropdown.js
@@ -15,9 +15,9 @@ const MenuWrapper = styled.div`
     0.05,
     props.theme.colors.activeItem,
   )}, ${props.theme.colors.activeItem})`};
-  padding: 10px 20px;
   border-radius: ${props => props.theme.boxBorderRadius};
   margin-left: -10px;
+  max-width: 400px;
 `;
 
 const MenuItem = styled.button`
@@ -27,13 +27,14 @@ const MenuItem = styled.button`
   border-bottom-style: solid;
   border-bottom-color: ${props => props.theme.colors.text};
   border-bottom-width: 1px;
-  padding: 15px 10px;
+  padding: 15px;
   cursor: pointer;
+  font-weight: 700;
   width: 100%;
   text-align: left;
 
   &:hover {
-    opacity: 0.9;
+    opacity: 1;
   }
 
   &:disabled {
@@ -43,6 +44,10 @@ const MenuItem = styled.button`
       opacity: 1;
     }
   }
+
+  &:last-child {
+    border-bottom: none;
+  }
 `;
 
 const PopoverWithStyle = styled(Popover)`
@@ -74,30 +79,32 @@ export class DropdownComponent extends Component<Props, State> {
     const { isOpen } = this.state;
     const { label, options, renderTrigger } = this.props;
 
+    const body = [
+      <ClickOutside
+        onClickOutside={() => this.setState(() => ({ isOpen: false }))}
+      >
+        <MenuWrapper>
+          {label && (
+            <MenuItem disabled isGroupLabel>
+              <TextComponent value={label} isBold />
+            </MenuItem>
+          )}
+          {options.map(({ label: optionLabel, onClick }) => (
+            <MenuItem onClick={onClick} key={optionLabel}>
+              <TextComponent value={optionLabel} />
+            </MenuItem>
+          ))}
+        </MenuWrapper>
+      </ClickOutside>,
+    ];
+
     return (
       <PopoverWithStyle
         isOpen={isOpen}
         preferPlace='below'
         enterExitTransitionDurationMs={0}
-        body={[
-          <ClickOutside
-            onClickOutside={() => this.setState(() => ({ isOpen: false }))}
-          >
-            <MenuWrapper>
-              {label && (
-                <MenuItem disabled>
-                  <TextComponent value={label} isBold />
-                </MenuItem>
-              )}
-              {options.map(({ label: optionLabel, onClick }) => (
-                <MenuItem onClick={onClick} key={optionLabel}>
-                  <TextComponent value={optionLabel} />
-                </MenuItem>
-              ))}
-            </MenuWrapper>
-          </ClickOutside>,
-        ]}
         tipSize={7}
+        body={body}
       >
         {renderTrigger(
           () => this.setState(state => ({ isOpen: !state.isOpen })),
diff --git a/app/components/header.js b/app/components/header.js
index ae28252..4dd2d84 100644
--- a/app/components/header.js
+++ b/app/components/header.js
@@ -43,6 +43,8 @@ const Title = styled(TextComponent)`
   margin-top: 10px;
   margin-bottom: 10px;
   text-transform: capitalize;
+  letter-spacing: 0.25px;
+  font-weight: ${props => props.theme.fontWeight.bold};
 `;
 
 type Props = {
diff --git a/app/components/sidebar.js b/app/components/sidebar.js
index 57b5c12..f36798b 100644
--- a/app/components/sidebar.js
+++ b/app/components/sidebar.js
@@ -11,7 +11,7 @@ const Wrapper = styled.div`
   width: ${props => props.theme.sidebarWidth};
   height: ${props => `calc(100vh - ${props.theme.headerHeight})`};
   font-family: ${props => props.theme.fontFamily}
-  background-color: ${props => props.theme.colors.sidebarBg}; 
+  background-color: ${props => props.theme.colors.sidebarBg};
   padding-top: 15px;
   position: relative;
 `;
@@ -22,20 +22,22 @@ const StyledLink = styled(Link)`
     : props.theme.colors.sidebarItem)};
   font-size: ${props => `${props.theme.fontSize.regular}em`};
   text-decoration: none;
-  font-weight: ${props => (props.isActive
-    ? props.theme.fontWeight.bold
-    : props.theme.fontWeight.default)};
-  padding: 0 20px;
+  font-weight: ${props => props.theme.fontWeight.bold};
+  background-color: ${props => (props.isActive
+    ? `${props.theme.colors.sidebarHoveredItem}`
+    : 'transparent')};
+  letter-spacing: 0.25px;
+  padding: 25px 20px;
   height: 35px;
   width: 100%;
-  margin: 12.5px 0;
   display: flex;
   align-items: center;
   outline: none;
   border-right: ${props => (props.isActive
-    ? `1px solid ${props.theme.colors.sidebarItemActive}`
+    ? `3px solid ${props.theme.colors.sidebarItemActive}`
     : 'none')};
   cursor: pointer;
+  transition: all 0.03s ${props => props.theme.colors.transitionEase};
 
   &:hover {
     color: ${/* eslint-disable-next-line max-len */
@@ -47,9 +49,13 @@ const StyledLink = styled(Link)`
 `;
 
 const Icon = styled.img`
-  width: 20px;
-  height: 20px;
-  margin-right: 15px;
+  width: 17px;
+  height: 17px;
+  margin-right: 13px;
+
+  ${StyledLink}:hover & {
+    filter: ${props => (props.isActive ? 'none' : 'brightness(200%)')};
+  }
 `;
 
 type MenuItem = {
@@ -67,9 +73,18 @@ export const SidebarComponent = ({ options, location }: Props) => (
   <Wrapper>
     {(options || []).map((item) => {
       const isActive = location.pathname === item.route;
+
       return (
-        <StyledLink isActive={isActive} key={item.route} to={item.route}>
-          <Icon src={item.icon(isActive)} alt={`Sidebar Icon ${item.route}`} />
+        <StyledLink
+          isActive={isActive}
+          key={item.route}
+          to={item.route}
+        >
+          <Icon
+            isActive={isActive}
+            src={item.icon(isActive)}
+            alt={`Sidebar Icon ${item.route}`}
+          />
           {item.label}
         </StyledLink>
       );
diff --git a/app/components/transaction-details.js b/app/components/transaction-details.js
index ad67a8b..1957f01 100644
--- a/app/components/transaction-details.js
+++ b/app/components/transaction-details.js
@@ -17,17 +17,19 @@ import formatNumber from '../utils/formatNumber';
 import truncateAddress from '../utils/truncateAddress';
 
 const Wrapper = styled.div`
-  width: 30vw;
+  width: 460px;
   background-color: ${props => props.theme.colors.background};
   display: flex;
   flex-direction: column;
   align-items: center;
   border-radius: 6px;
   box-shadow: 0px 0px 30px 0px black;
+  position: relative;
 `;
 
 const TitleWrapper = styled.div`
   margin-top: 20px;
+  margin-bottom: 30px;
 `;
 
 const Icon = styled.img`
@@ -41,13 +43,14 @@ const CloseIconWrapper = styled.div`
   width: 100%;
   align-items: flex-end;
   justify-content: flex-end;
+  position: absolute;
 `;
 
 const CloseIconImg = styled.img`
-  width: 12.5px;
-  height: 12.5px;
-  margin-top: 10px;
-  margin-right: 10px;
+  width: 16px;
+  height: 16px;
+  margin-top: 12px;
+  margin-right: 12px;
   cursor: pointer;
 `;
 
@@ -57,11 +60,27 @@ const InfoRow = styled(RowComponent)`
   width: 100%;
   height: 80px;
   padding: 0 30px;
+
+  &first-child {
+    margin-top: 30px;
+  }
+
+  &:hover {
+    background: #1d1d1d;
+  }
+`;
+
+const DetailsWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 30px;
 `;
 
 const Divider = styled.div`
   width: 100%;
-  background-color: ${props => props.theme.colors.transactionsDetailsLabel};
+  background-color: #3a3a3a;
   height: 1px;
   opacity: 0.5;
 `;
@@ -70,6 +89,7 @@ const Label = styled(TextComponent)`
   font-weight: ${props => props.theme.fontWeight.bold};
   color: ${props => props.theme.colors.transactionsDetailsLabel};
   margin-bottom: 5px;
+  letter-spacing: 0.25px;
 `;
 
 const Ellipsis = styled(TextComponent)`
@@ -101,39 +121,48 @@ export const TransactionDetailsComponent = ({
   handleClose,
 }: Props) => {
   const isReceived = type === 'receive';
+
   return (
     <Wrapper>
       <CloseIconWrapper>
-        <CloseIconImg src={CloseIcon} onClick={handleClose} />
+        <CloseIconImg
+          src={CloseIcon}
+          onClick={handleClose}
+        />
       </CloseIconWrapper>
       <TitleWrapper>
-        <TextComponent value='Transaction Details' align='center' />
+        <TextComponent
+          value='Transaction Details'
+          align='center'
+        />
       </TitleWrapper>
-      <Icon
-        src={isReceived ? ReceivedIcon : SentIcon}
-        alt='Transaction Type Icon'
-      />
-      <TextComponent
-        value={formatNumber({
-          append: `${isReceived ? '+' : '-'}ZEC `,
-          value: amount,
-        })}
-        color={
-          isReceived
-            ? theme.colors.transactionReceived
-            : theme.colors.transactionSent
-        }
-        isBold
-        size={2.625}
-      />
-      <TextComponent
-        value={formatNumber({
-          append: `${isReceived ? '+' : '-'}USD `,
-          value: amount * zecPrice,
-        })}
-        size={1.5}
-        color={theme.colors.transactionsDetailsLabel}
-      />
+      <DetailsWrapper>
+        <Icon
+          src={isReceived ? ReceivedIcon : SentIcon}
+          alt='Transaction Type Icon'
+        />
+        <TextComponent
+          isBold
+          size={2.625}
+          value={formatNumber({
+            append: `${isReceived ? '+' : '-'}ZEC `,
+            value: amount,
+          })}
+          color={
+            isReceived
+              ? theme.colors.transactionReceived
+              : theme.colors.transactionSent
+          }
+        />
+        <TextComponent
+          value={formatNumber({
+            append: `${isReceived ? '+' : '-'}USD `,
+            value: amount * zecPrice,
+          })}
+          size={1.5}
+          color={theme.colors.transactionsDetailsLabel}
+        />
+      </DetailsWrapper>
       <InfoRow>
         <ColumnComponent>
           <Label value='DATE' />
diff --git a/app/components/transaction-item.js b/app/components/transaction-item.js
index 6c0a31e..93611fa 100644
--- a/app/components/transaction-item.js
+++ b/app/components/transaction-item.js
@@ -93,7 +93,11 @@ export const TransactionItemComponent = ({
                 alt='Transaction Type Icon'
               />
               <TransactionColumn>
-                <TransactionTypeLabel isReceived={isReceived} value={type} />
+                <TransactionTypeLabel
+                  isReceived={isReceived}
+                  value={type}
+                  isBold
+                />
                 <TransactionTime value={transactionTime} />
               </TransactionColumn>
             </RowComponent>
@@ -101,6 +105,7 @@ export const TransactionItemComponent = ({
           </RowComponent>
           <ColumnComponent alignItems='flex-end'>
             <TextComponent
+              isBold
               value={transactionValueInZec}
               color={
                 isReceived
diff --git a/app/theme.js b/app/theme.js
index 29d7ddc..1bafe92 100644
--- a/app/theme.js
+++ b/app/theme.js
@@ -17,7 +17,7 @@ const cardBackgroundColor = '#000';
 const sidebarLogoGradientBegin = '#F4B728';
 const sidebarLogoGradientEnd = '#FFE240';
 const sidebarHoveredItem = '#1C1C1C';
-const sidebarHoveredItemLabel = '#969696';
+const sidebarHoveredItemLabel = '#76767e';
 const background = '#212124';
 const transactionSent = '#FF6C6C';
 const transactionReceived = '#6AEAC0';
@@ -69,12 +69,13 @@ const appTheme = {
     selectButtonShadow,
     transactionsDetailsLabel,
   },
-  sidebarWidth: '200px',
+  sidebarWidth: '180px',
   headerHeight: '60px',
-  layoutPaddingLeft: '50px',
-  layoutPaddingRight: '45px',
+  layoutPaddingLeft: '35px',
+  layoutPaddingRight: '35px',
   layoutContentPaddingTop: '20px',
-  boxBorderRadius: '6px',
+  boxBorderRadius: '3px',
+  transitionEase: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)',
 };
 
 export const GlobalStyle = createGlobalStyle`
diff --git a/app/views/receive.js b/app/views/receive.js
index 4998d9c..0ec6e95 100644
--- a/app/views/receive.js
+++ b/app/views/receive.js
@@ -28,7 +28,11 @@ const Label = styled(InputLabelComponent)`
 export const ReceiveView = ({ addresses }: Props) => (
   <Wrapper>
     {(addresses || []).map(address => (
-      <Row alignItems='center' justifyContent='space-between'>
+      <Row
+        key={address}
+        alignItems='center'
+        justifyContent='space-between'
+      >
         <ColumnComponent width='85%'>
           <Label value='Your Address: ' />
           <InputComponent
diff --git a/app/views/send.js b/app/views/send.js
index 3eee985..633b581 100644
--- a/app/views/send.js
+++ b/app/views/send.js
@@ -21,12 +21,12 @@ import type { State as SendState } from '../redux/modules/send';
 
 const FormWrapper = styled.div`
   margin-top: ${props => props.theme.layoutContentPaddingTop};
-  width: 80%;
+  width: 71%;
 `;
 
 const SendWrapper = styled(ColumnComponent)`
   margin-top: 60px;
-  width: 15%;
+  width: 25%;
 `;
 
 const ShowFeeButton = styled.button`
@@ -179,12 +179,18 @@ export class SendView extends PureComponent<Props, State> {
       operationId,
     } = this.props;
     const {
-      showFee, from, amount, to, memo, fee, feeType,
+      showFee,
+      from,
+      amount,
+      to,
+      memo,
+      fee,
+      feeType,
     } = this.state;
 
     const zecBalance = formatNumber({ value: balance, append: 'ZEC ' });
     const zecBalanceInUsd = formatNumber({
-      value: new BigNumber(balance).multipliedBy(zecPrice).toNumber(),
+      value: new BigNumber(balance).times(zecPrice).toNumber(),
       append: 'USD $',
     });
     const valueSent = formatNumber({
@@ -192,7 +198,7 @@ export class SendView extends PureComponent<Props, State> {
       append: 'ZEC ',
     });
     const valueSentInUsd = formatNumber({
-      value: new BigNumber(amount).multipliedBy(zecPrice).toNumber(),
+      value: new BigNumber(amount).times(zecPrice).toNumber(),
       append: 'USD $',
     });
 
@@ -243,6 +249,7 @@ export class SendView extends PureComponent<Props, State> {
             }
           >
             <TextComponent
+              paddingTop='10px'
               value={`${showFee ? 'Hide' : 'Show'} Additional Options`}
               align='right'
             />

From 4dc9c6a7300087a5aa872962d3c7422088591bc5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Neves?= <andrerfneves@protonmail.com>
Date: Thu, 10 Jan 2019 22:38:57 -0500
Subject: [PATCH 3/4] chore: flowconfig inputs refactor: hover state for
 transaction item styles refactor: send view bug where deleting 0 from amount
 would crash the app

---
 .flowconfig                        |  1 -
 app/components/transaction-item.js |  2 +-
 app/views/send.js                  | 12 +++++++++---
 3 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/.flowconfig b/.flowconfig
index ebdc92d..f2d95fd 100644
--- a/.flowconfig
+++ b/.flowconfig
@@ -1,7 +1,6 @@
 [ignore]
 .*/node_modules/polished/.*
 ./__tests__
-./__tests__/
 
 [include]
 
diff --git a/app/components/transaction-item.js b/app/components/transaction-item.js
index 93611fa..83d09b5 100644
--- a/app/components/transaction-item.js
+++ b/app/components/transaction-item.js
@@ -23,7 +23,7 @@ const Wrapper = styled(RowComponent)`
   cursor: pointer;
 
   &:hover {
-    background-color: ${props => props.theme.colors.transactionsItemHovered};
+    background-color: #101010;
   }
 `;
 
diff --git a/app/views/send.js b/app/views/send.js
index 633b581..6a16c8b 100644
--- a/app/views/send.js
+++ b/app/views/send.js
@@ -121,9 +121,15 @@ export class SendView extends PureComponent<Props, State> {
   }
 
   handleChange = (field: string) => (value: string) => {
-    this.setState(() => ({
-      [field]: value,
-    }));
+    if (field === 'amount') {
+      if (value !== '') {
+        this.setState(() => ({
+          [field]: value,
+        }));
+      }
+    } else {
+      this.setState(() => ({ [field]: value }));
+    }
   };
 
   handleChangeFeeType = (value: string) => {

From b38fa656cd1bb2778b72c4efea45b9ca2582187b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Neves?= <andrerfneves@protonmail.com>
Date: Thu, 10 Jan 2019 22:50:54 -0500
Subject: [PATCH 4/4] chore: bump version and license date update

---
 LICENSE.md   | 2 +-
 package.json | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/LICENSE.md b/LICENSE.md
index b03d2c5..423d8b5 100644
--- a/LICENSE.md
+++ b/LICENSE.md
@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2018 Zcash Foundation
+Copyright (c) 2019 Zcash Foundation
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
diff --git a/package.json b/package.json
index ec90c68..9c015a3 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "zec-react-wallet",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "Zcash Reference Wallet",
   "main": "config/main.js",
   "license": "MIT",