From 8658830622e1fbaa4d1e7d9e5e5a179ba19f3ca4 Mon Sep 17 00:00:00 2001 From: eliabejr Date: Tue, 15 Jan 2019 21:36:01 -0300 Subject: [PATCH 1/7] fix(pixel-perfecting): dropdown component exploding --- app/components/dropdown.js | 18 ++++++++++++++++-- 1 file changed, 16 insertions(+), 2 deletions(-) diff --git a/app/components/dropdown.js b/app/components/dropdown.js index 115ccc2..bee1a00 100644 --- a/app/components/dropdown.js +++ b/app/components/dropdown.js @@ -9,6 +9,8 @@ import ClickOutside from 'react-click-outside'; import { TextComponent } from './text'; +import truncateAddress from '../utils/truncateAddress'; + /* eslint-disable max-len */ const MenuWrapper = styled.div` background-image: ${props => `linear-gradient(to right, ${darken( @@ -30,6 +32,7 @@ const MenuItem = styled.button` padding: 15px; cursor: pointer; font-weight: 700; + overflow: hidden; width: 100%; text-align: left; @@ -50,16 +53,24 @@ const MenuItem = styled.button` } `; +const Option = styled(TextComponent)` + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +`; + const PopoverWithStyle = styled(Popover)` & > .Popover-tip { fill: ${props => props.theme.colors.activeItem}; } + left: 10px; `; type Props = { renderTrigger: (toggleVisibility: () => void, isOpen: boolean) => Node, options: Array<{ label: string, onClick: () => void }>, label?: string | null, + truncate?: boolean, }; type State = { @@ -73,11 +84,14 @@ export class DropdownComponent extends Component { static defaultProps = { label: null, + truncate: false, }; render() { const { isOpen } = this.state; - const { label, options, renderTrigger } = this.props; + const { + label, options, truncate, renderTrigger, + } = this.props; const body = [ { )} {options.map(({ label: optionLabel, onClick }) => ( - + ))} From 919b5d913fca16d111d44194ea1693dd889dc663 Mon Sep 17 00:00:00 2001 From: eliabejr Date: Tue, 15 Jan 2019 23:01:20 -0300 Subject: [PATCH 2/7] chore(pixel-perfecting): remove inconsistent defaultValue of to prop on button component --- app/components/button.js | 2 +- app/components/dropdown.js | 12 +++++++++--- 2 files changed, 10 insertions(+), 4 deletions(-) diff --git a/app/components/button.js b/app/components/button.js index 3211d82..89da90c 100644 --- a/app/components/button.js +++ b/app/components/button.js @@ -91,7 +91,7 @@ export const Button = ({ }; Button.defaultProps = { - to: null, + to: '', variant: 'primary', onClick: null, disabled: false, diff --git a/app/components/dropdown.js b/app/components/dropdown.js index bee1a00..c90ff91 100644 --- a/app/components/dropdown.js +++ b/app/components/dropdown.js @@ -20,6 +20,7 @@ const MenuWrapper = styled.div` border-radius: ${props => props.theme.boxBorderRadius}; margin-left: -10px; max-width: 400px; + overflow: hidden; `; const MenuItem = styled.button` @@ -53,6 +54,12 @@ const MenuItem = styled.button` } `; +const OptionItem = styled(MenuItem)` + &:hover { + background-color: #F9D114; + } +`; + const Option = styled(TextComponent)` overflow: hidden; text-overflow: ellipsis; @@ -63,7 +70,6 @@ const PopoverWithStyle = styled(Popover)` & > .Popover-tip { fill: ${props => props.theme.colors.activeItem}; } - left: 10px; `; type Props = { @@ -104,9 +110,9 @@ export class DropdownComponent extends Component { )} {options.map(({ label: optionLabel, onClick }) => ( - + + ))} , From f7aca59ad0c9291cd04dfb5b9406dd91e93e1fc6 Mon Sep 17 00:00:00 2001 From: eliabejr Date: Tue, 15 Jan 2019 23:02:04 -0300 Subject: [PATCH 3/7] feat(pixel-perfecting): match theme colors with Adobe XD --- app/theme.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/theme.js b/app/theme.js index 1bafe92..4dd256b 100644 --- a/app/theme.js +++ b/app/theme.js @@ -7,11 +7,11 @@ import { normalize } from 'polished'; // eslint-disable-line import { DARK } from './constants/themes'; -const darkOne = '#7B00DD'; +const darkOne = '#F4B728'; const lightOne = '#ffffff'; const brandOne = '#000'; const brandTwo = '#3B3B3F'; -const activeItem = '#F5CB00'; +const activeItem = '#F4B728'; const text = '#FFF'; const cardBackgroundColor = '#000'; const sidebarLogoGradientBegin = '#F4B728'; From 51fc36da4fd2890bbcf1653f89e27c483bae38e1 Mon Sep 17 00:00:00 2001 From: eliabejr Date: Tue, 15 Jan 2019 23:02:49 -0300 Subject: [PATCH 4/7] feat(pixel-perfecting): add show/hide address button on receive view --- app/components/wallet-address.js | 104 ++++++++++++++++++++++++++++++ app/components/wallet-address.mdx | 28 ++++++++ app/views/receive.js | 15 +---- 3 files changed, 135 insertions(+), 12 deletions(-) create mode 100644 app/components/wallet-address.js create mode 100644 app/components/wallet-address.mdx diff --git a/app/components/wallet-address.js b/app/components/wallet-address.js new file mode 100644 index 0000000..3e95211 --- /dev/null +++ b/app/components/wallet-address.js @@ -0,0 +1,104 @@ +// @flow +import React, { Component } from 'react'; +import styled from 'styled-components'; + +import { ColumnComponent } from './column'; +import { Button } from './button'; +import { QRCode } from './qrcode'; + +import truncateAddress from '../utils/truncateAddress'; + +const AddressWrapper = styled.div` + align-items: center; + display: flex; + background-color: #000; + border-radius: 6px; + padding: 7px 13px; + width: 100%; +`; + +const Input = styled.input` + border-radius: ${props => props.theme.boxBorderRadius}; + border: none; + background-color: ${props => props.theme.colors.inputBackground}; + color: ${props => props.theme.colors.text}; + padding: 15px; + width: 100%; + outline: none; + font-family: ${props => props.theme.fontFamily}; + + ::placeholder { + opacity: 0.5; + } +`; + +const QRCodeWrapper = styled.div` + align-items: center; + display: flex; + background-color: #000; + border-radius: 6px; + padding: 20px; + margin-top: 10px; + width: 100%; +`; + +type Props = { + address: string, +}; + +type State = { + isVisible: boolean, +}; + +export class WalletAddress extends Component { + state = { + isVisible: false, + }; + + componentDidMount() { + + } + + show = () => { + this.setState( + () => ({ isVisible: true }), + ); + }; + + hide = () => { + this.setState( + () => ({ isVisible: false }), + ); + }; + + + render() { + const { address } = this.props; + const { isVisible } = this.state; + const toggleVisibility = isVisible ? this.hide : this.show; + + return ( + + + {}} + onFocus={event => event.currentTarget.select()} + /> +