diff --git a/.flowconfig b/.flowconfig index b5f785d..f2d95fd 100644 --- a/.flowconfig +++ b/.flowconfig @@ -1,5 +1,6 @@ [ignore] .*/node_modules/polished/.* +./__tests__ [include] 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/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 { const { isOpen } = this.state; const { label, options, renderTrigger } = this.props; + const body = [ + this.setState(() => ({ isOpen: false }))} + > + + {label && ( + + + + )} + {options.map(({ label: optionLabel, onClick }) => ( + + + + ))} + + , + ]; + return ( this.setState(() => ({ isOpen: false }))} - > - - {label && ( - - - - )} - {options.map(({ label: optionLabel, onClick }) => ( - - - - ))} - - , - ]} 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) => ( {(options || []).map((item) => { const isActive = location.pathname === item.route; + return ( - - + + {item.label} ); 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 ( - + - + - - - + + + + +