zecfoundation
/
zepio
mirror of https://github.com/ZcashFoundation/zepio.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

styles: work on copy and qrcode icons for WalletAddress

This commit is contained in:
Andre Neves 2019-02-18 13:04:41 -05:00
parent 18710f69cf
commit ca040ee99f
12 changed files with 101 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
app/assets/images/_ionicons_svg_md-copy.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M296 48H176.5C154.4 48 136 65.4 136 87.5V96h-7.5C106.4 96 88 113.4 88 135.5v288c0 22.1 18.4 40.5 40.5 40.5h208c22.1 0 39.5-18.4 39.5-40.5V416h8.5c22.1 0 39.5-18.4 39.5-40.5V176L296 48zm0 44.6l83.4 83.4H296V92.6zm48 330.9c0 4.7-3.4 8.5-7.5 8.5h-208c-4.4 0-8.5-4.1-8.5-8.5v-288c0-4.1 3.8-7.5 8.5-7.5h7.5v255.5c0 22.1 10.4 32.5 32.5 32.5H344v7.5zm48-48c0 4.7-3.4 8.5-7.5 8.5h-208c-4.4 0-8.5-4.1-8.5-8.5v-288c0-4.1 3.8-7.5 8.5-7.5H264v128h128v167.5z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 525 B

1
app/assets/images/copy_icon_dark.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill='#fff' d="M296 48H176.5C154.4 48 136 65.4 136 87.5V96h-7.5C106.4 96 88 113.4 88 135.5v288c0 22.1 18.4 40.5 40.5 40.5h208c22.1 0 39.5-18.4 39.5-40.5V416h8.5c22.1 0 39.5-18.4 39.5-40.5V176L296 48zm0 44.6l83.4 83.4H296V92.6zm48 330.9c0 4.7-3.4 8.5-7.5 8.5h-208c-4.4 0-8.5-4.1-8.5-8.5v-288c0-4.1 3.8-7.5 8.5-7.5h7.5v255.5c0 22.1 10.4 32.5 32.5 32.5H344v7.5zm48-48c0 4.7-3.4 8.5-7.5 8.5h-208c-4.4 0-8.5-4.1-8.5-8.5v-288c0-4.1 3.8-7.5 8.5-7.5H264v128h128v167.5z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 537 B

1
app/assets/images/copy_icon_light.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill='#000' d="M296 48H176.5C154.4 48 136 65.4 136 87.5V96h-7.5C106.4 96 88 113.4 88 135.5v288c0 22.1 18.4 40.5 40.5 40.5h208c22.1 0 39.5-18.4 39.5-40.5V416h8.5c22.1 0 39.5-18.4 39.5-40.5V176L296 48zm0 44.6l83.4 83.4H296V92.6zm48 330.9c0 4.7-3.4 8.5-7.5 8.5h-208c-4.4 0-8.5-4.1-8.5-8.5v-288c0-4.1 3.8-7.5 8.5-7.5h7.5v255.5c0 22.1 10.4 32.5 32.5 32.5H344v7.5zm48-48c0 4.7-3.4 8.5-7.5 8.5h-208c-4.4 0-8.5-4.1-8.5-8.5v-288c0-4.1 3.8-7.5 8.5-7.5H264v128h128v167.5z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 537 B

1
app/assets/images/scan_icon_dark.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill='#fff' d="M174 64h-58.8C78.1 64 48 94.1 48 131.2V190c0 7.7 6.3 14 14 14s14-6.3 14-14v-59.8c0-9.1 4.3-18.7 11.7-26.2 7.5-7.6 17.2-12 26.5-12H174c7.7 0 14-6.3 14-14s-6.3-14-14-14zM397.8 64H338c-7.7 0-14 6.3-14 14s6.3 14 14 14h59.8c9.3 0 19 4.4 26.5 12 7.4 7.5 11.7 17.1 11.7 26.2V190c0 7.7 6.3 14 14 14s14-6.3 14-14v-59.8c0-36.5-29.7-66.2-66.2-66.2zM174 420h-59.8c-9.3 0-19-4.4-26.5-12-7.4-7.5-11.7-17.1-11.7-26.2V322c0-7.7-6.3-14-14-14s-14 6.3-14 14v59.8c0 36.5 29.7 66.2 66.2 66.2H174c7.7 0 14-6.3 14-14s-6.3-14-14-14zM450 308c-7.7 0-14 6.3-14 14v59.8c0 9.1-4.3 18.7-11.7 26.2-7.5 7.6-17.2 12-26.5 12H338c-7.7 0-14 6.3-14 14s6.3 14 14 14h58.8c37 0 67.2-30.1 67.2-67.2V322c0-7.7-6.3-14-14-14z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 773 B

1
app/assets/images/scan_icon_light.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill='#000' d="M174 64h-58.8C78.1 64 48 94.1 48 131.2V190c0 7.7 6.3 14 14 14s14-6.3 14-14v-59.8c0-9.1 4.3-18.7 11.7-26.2 7.5-7.6 17.2-12 26.5-12H174c7.7 0 14-6.3 14-14s-6.3-14-14-14zM397.8 64H338c-7.7 0-14 6.3-14 14s6.3 14 14 14h59.8c9.3 0 19 4.4 26.5 12 7.4 7.5 11.7 17.1 11.7 26.2V190c0 7.7 6.3 14 14 14s14-6.3 14-14v-59.8c0-36.5-29.7-66.2-66.2-66.2zM174 420h-59.8c-9.3 0-19-4.4-26.5-12-7.4-7.5-11.7-17.1-11.7-26.2V322c0-7.7-6.3-14-14-14s-14 6.3-14 14v59.8c0 36.5 29.7 66.2 66.2 66.2H174c7.7 0 14-6.3 14-14s-6.3-14-14-14zM450 308c-7.7 0-14 6.3-14 14v59.8c0 9.1-4.3 18.7-11.7 26.2-7.5 7.6-17.2 12-26.5 12H338c-7.7 0-14 6.3-14 14s6.3 14 14 14h58.8c37 0 67.2-30.1 67.2-67.2V322c0-7.7-6.3-14-14-14z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 773 B

5
app/components/input.js
View File

@ -40,6 +40,11 @@ const getDefaultStyles: ($PropertyType<Props, 'inputType'>) => Element<*> = t =>
::placeholder {
opacity: 0.5;
}
&:focus,
&:active {
border-color: ${(props: DefaultStylesProps) => props.theme.colors.inputBorderActive};
}
`;
const Wrapper = styled.div`

17
app/components/select.js
View File

@ -62,9 +62,14 @@ const SelectMenuButton = styled.button`
padding: 3px 7px;
outline: none;
background-color: transparent;
border: 1px solid
${(props: PropsWithTheme<{ isOpen: boolean }>) => (props.isOpen ? props.theme.colors.primary : '#29292D')};
border-radius: 100%;
cursor: pointer;
border: 1px solid
${(props: PropsWithTheme<{ isOpen: boolean }>) => (
props.isOpen
? props.theme.colors.dropdownOpenedIconBorder
: props.theme.colors.dropdownIconBorder
)};
`;
const Icon = styled.img`
@ -80,8 +85,9 @@ const OptionsWrapper = styled.div`
margin-left: -0.25%;
border-radius: ${props => props.theme.colors.boxBorderRadius};
border: 1px solid ${props => props.theme.colors.inputBorder};
${(props: PropsWithTheme<{ placement: string, optionsAmount: number }>) => `${String(props.placement)}: ${`-${String(((props.optionsAmount || 0) * 40) + 25)}px`}`};
${(props: PropsWithTheme<{ placement: string, optionsAmount: number }>) => `${String(props.placement)}: ${`-${String(((props.optionsAmount || 0) * 40) + 10)}px`}`};
overflow-y: auto;
box-shadow: 1px 3px 20px rgba(16, 19, 20, 0.1);
`;
const Option = styled.button`
@ -179,7 +185,10 @@ export class SelectComponent extends PureComponent<Props, State> {
onClick={() => this.setState(() => ({ isOpen: !isOpen }))}
bgColor={bgColor}
>
<ValueWrapper hasValue={Boolean(value)} capitalize={capitalize}>
<ValueWrapper
hasValue={Boolean(value)}
capitalize={capitalize}
>
{this.getSelectedLabel(value) || placeholder}
</ValueWrapper>
<SelectMenuButtonWrapper>

60
app/components/wallet-address.js
View File

@ -1,12 +1,16 @@
// @flow
import React, { PureComponent } from 'react';
import styled from 'styled-components';
import styled, { withTheme } from 'styled-components';
import { ColumnComponent } from './column';
import { QRCode } from './qrcode';
import eyeIcon from '../assets/images/eye.png';
import CopyIconDark from '../assets/images/copy_icon_dark.svg';
import CopyIconLight from '../assets/images/copy_icon_light.svg';
import ScanIconDark from '../assets/images/scan_icon_dark.svg';
import ScanIconLight from '../assets/images/scan_icon_light.svg';
import { DARK } from '../constants/themes';
const AddressWrapper = styled.div`
align-items: center;
@ -23,11 +27,18 @@ const Input = styled.input`
border-radius: ${props => props.theme.boxBorderRadius};
border: none;
background-color: ${props => props.theme.colors.inputBg};
color: ${props => props.theme.colors.text};
padding: 15px;
width: 100%;
outline: none;
font-family: ${props => props.theme.fontFamily};
font-size: 13px;
color: #666666;
line-height: 1;
cursor: pointer;
${AddressWrapper}:hover & {
color: #fff;
}
::placeholder {
opacity: 0.5;
@ -38,7 +49,8 @@ const QRCodeWrapper = styled.div`
align-items: center;
display: flex;
background-color: ${props => props.theme.colors.qrCodeWrapperBg}
border-radius: 6px;
border: 1px solid ${props => props.theme.colors.qrCodeWrapperBorder}
border-radius: 3px;
padding: 20px;
margin-bottom: 10px;
width: 100%;
@ -48,21 +60,31 @@ const IconButton = styled.button`
background: transparent;
cursor: pointer;
outline: none;
border: none;
display: flex;
opacity: 0.4;
width: 28px;
margin-left: 3px;
&:hover {
opacity: 1;
}
`;
const IconImage = styled.img`
max-width: 15px;
max-width: 23px;
`;
type Props = {
address: string,
theme: AppTheme,
};
type State = {
showQRCode: boolean,
};
export class WalletAddress extends PureComponent<Props, State> {
class Component extends PureComponent<Props, State> {
state = {
showQRCode: false,
};
@ -72,10 +94,18 @@ export class WalletAddress extends PureComponent<Props, State> {
hide = () => this.setState(() => ({ showQRCode: false }));
render() {
const { address } = this.props;
const { address, theme } = this.props;
const { showQRCode } = this.state;
const toggleVisibility = showQRCode ? this.hide : this.show;
const qrCodeIcon = theme.mode === DARK
? ScanIconDark
: ScanIconLight;
const copyIcon = theme.mode === DARK
? CopyIconDark
: CopyIconLight;
return (
<ColumnComponent width='100%'>
<AddressWrapper>
@ -84,18 +114,18 @@ export class WalletAddress extends PureComponent<Props, State> {
onChange={() => {}}
onFocus={event => event.currentTarget.select()}
/>
<IconButton onClick={toggleVisibility}>
<IconImage
src={eyeIcon}
alt='See QRCode'
/>
</IconButton>
<IconButton onClick={() => {}}>
<IconImage
src={eyeIcon}
src={copyIcon}
alt='Copy Address'
/>
</IconButton>
<IconButton onClick={toggleVisibility}>
<IconImage
src={qrCodeIcon}
alt='See QRCode'
/>
</IconButton>
</AddressWrapper>
{!showQRCode ? null : (
<QRCodeWrapper>
@ -106,3 +136,5 @@ export class WalletAddress extends PureComponent<Props, State> {
);
}
}
export const WalletAddress = withTheme(Component);

8
app/theme/colors/dark.js
View File

@ -25,6 +25,8 @@ export const DARK_COLORS = {
dropdownBg: '#5d5d5d',
dropdownHoveredBg: '#212124',
dropdownBorder: '#4e4b4b',
dropdownIconBorder: '#ddd',
dropdownOpenedIconBorder: '#2929DD',
// Card
cardBackgroundColor: black,
@ -79,11 +81,14 @@ export const DARK_COLORS = {
// Misc
divider: black,
qrCodeWrapperBg: black,
qrCodeWrapperBorder: black,
headerTitle: text,
selectButtonShadow: 'rgba(238,201,76,0.65)',
// Forms
inputBg: black,
inputBorder: 'transparent',
inputBorderActive: '#222',
// Wallet Summary
walletSummaryBg: black,
@ -97,9 +102,6 @@ export const DARK_COLORS = {
consoleBg: black,
consoleBorder: 'transparent',
// Input
inputBorder: 'transparent',
// Settings
settingsCardBg: black,
settingsLearnMore: '#AAAAAA',

12
app/theme/colors/light.js
View File

@ -26,9 +26,11 @@ export const LIGHT_COLORS = {
activeItem: brand,
// Dropdown
dropdownBg: white,
dropdownHoveredBg: offWhite,
dropdownBg: offWhite,
dropdownHoveredBg: white,
dropdownBorder: border,
dropdownIconBorder: '#c1c1c1',
dropdownOpenedIconBorder: '#828282',
// Buttons
buttonPrimaryBg: brand,
@ -88,6 +90,7 @@ export const LIGHT_COLORS = {
// QR Code
qrCodeWrapperBg: white,
qrCodeWrapperBorder: border,
// Header
headerTitle: text,
@ -102,6 +105,8 @@ export const LIGHT_COLORS = {
// Forms
inputBg: white,
inputBorder: border,
inputBorderActive: '#828282',
// Console
consoleBg: white,
@ -110,9 +115,6 @@ export const LIGHT_COLORS = {
// Misc
divider: '#AAAAAA',
// Input
inputBorder: border,
// Settings
settingsCardBg: white,
settingsLearnMore: '#a0a0a0',

16
app/theme/theme.js
View File

@ -286,5 +286,21 @@ export const appTheme: AppTheme = {
[LIGHT]: LIGHT_COLORS.buttonSecondaryHoveredBg,
[DARK]: DARK_COLORS.buttonSecondaryHoveredBg,
}),
dropdownIconBorder: theme('mode', {
[LIGHT]: LIGHT_COLORS.dropdownIconBorder,
[DARK]: DARK_COLORS.dropdownIconBorder,
}),
dropdownOpenedIconBorder: theme('mode', {
[LIGHT]: LIGHT_COLORS.dropdownOpenedIconBorder,
[DARK]: DARK_COLORS.dropdownOpenedIconBorder,
}),
inputBorderActive: theme('mode', {
[LIGHT]: LIGHT_COLORS.inputBorderActive,
[DARK]: DARK_COLORS.inputBorderActive,
}),
qrCodeWrapperBorder: theme('mode', {
[LIGHT]: LIGHT_COLORS.qrCodeWrapperBorder,
[DARK]: DARK_COLORS.qrCodeWrapperBorder,
}),
},
};

4
flow-custom-typedefs/theme.js
View File

@ -27,6 +27,8 @@ type Colors = {
dropdownBg: ThemeSet,
dropdownHoveredBg: ThemeSet,
dropdownBorder: ThemeSet,
dropdownIconBorder: ThemeSet,
dropdownOpenedIconBorder: ThemeSet,
// Divider
divider: ThemeSet,
@ -59,6 +61,7 @@ type Colors = {
// QR Code
qrCodeWrapperBg: ThemeSet,
qrCodeWrapperBorder: ThemeSet,
// Transactions
transactionSent: ThemeSet,
@ -82,6 +85,7 @@ type Colors = {
// Input
inputBg: ThemeSet,
inputBorder: ThemeSet,
inputBorderActive: ThemeSet,
// Sidebar
sidebarBg: ThemeSet,