refactor: UI improvements all around

chore: adding tests to flowconfig ignore transaction deatils and item fixes
2019-01-10 22:30:46 -05:00 · 2019-01-10 22:30:46 -05:00 · 9a8db79924
parent 718e1bce84
commit 9a8db79924
10 changed files with 154 additions and 91 deletions
--- a/.flowconfig
+++ b/.flowconfig
@ -1,5 +1,7 @@
 [ignore]
 .*/node_modules/polished/.*
+./__tests__
+./__tests__/

 [include]

--- 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%;
 `;

--- 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 })),
--- 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 = {
--- 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>
      );
--- 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' />
--- 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
--- 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`
--- 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
--- 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'
            />