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

styles: continued work on style improvements

This commit is contained in:
Andre Neves 2019-02-17 22:56:50 -05:00
parent 1c8dbb538b
commit d4e78114f7
11 changed files with 178 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
app/components/confirm-dialog.js
View File

@ -1,6 +1,6 @@
// @flow
import React, { Fragment, type Element } from 'react';
import React, { type Element } from 'react';
import styled from 'styled-components';
import { TextComponent } from './text';
@ -17,7 +17,7 @@ const Wrapper = styled.div`
flex-direction: column;
align-items: center;
border-radius: 6px;
box-shadow: 0px 0px 30px 0px black;
box-shadow: ${props => props.theme.colors.transactionDetailsShadow}
position: relative;
`;
@ -42,6 +42,22 @@ const CloseIconImg = styled.img`
cursor: pointer;
`;
const ButtonWrapper = styled.div`
display: flex;
flex-direction: row;
flex: 1;
width: 100%;
padding: 20px 40px 10px;
& > :first-child {
margin-right: 5px;
}
& > :last-child {
margin-left: 5px;
}
`;
const Btn = styled(Button)`
width: 95%;
margin-bottom: 10px;
@ -91,7 +107,7 @@ export const ConfirmDialogComponent = ({
<Divider opacity={0.3} />
{children(handleClose(toggle))}
{showButtons && (
<Fragment>
<ButtonWrapper>
<Btn
id='confirm-modal-button'
label='Confirm'
@ -104,7 +120,7 @@ export const ConfirmDialogComponent = ({
variant='secondary'
disabled={isLoading}
/>
</Fragment>
</ButtonWrapper>
)}
</Wrapper>
)}

15
app/components/select.js
View File

@ -21,7 +21,7 @@ const SelectWrapper = styled.div`
display: flex;
flex-direction: row;
border-radius: ${(props: SelectWrapperProps) => props.theme.boxBorderRadius};
border: none;
border: 1px solid ${(props: SelectWrapperProps) => props.theme.colors.inputBorder};
background-color: ${(props: SelectWrapperProps) => props.bgColor || props.theme.colors.inputBg};
color: ${(props: SelectWrapperProps) => props.theme.colors.text};
width: 100%;
@ -76,8 +76,11 @@ const OptionsWrapper = styled.div`
display: flex;
flex-direction: column;
position: absolute;
width: 100%;
${(props: PropsWithTheme<{ placement: string, optionsAmount: number }>) => `${String(props.placement)}: ${`-${String((props.optionsAmount || 0) * 40)}px`}`};
width: 100.5%;
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`}`};
overflow-y: auto;
`;
@ -85,15 +88,15 @@ const Option = styled.button`
border: none;
background: none;
height: 40px;
background-color: #5d5d5d;
background-color: ${props => props.theme.colors.dropdownBg};
cursor: pointer;
z-index: 99;
text-transform: ${(props: PropsWithTheme<{ capitalize: boolean }>) => (props.capitalize ? 'capitalize' : 'none')};
padding: 5px 10px;
border-bottom: 1px solid #4e4b4b;
border-bottom: 1px solid ${props => props.theme.colors.dropdownBorder};
&:hover {
background-color: ${props => props.theme.colors.background};
background-color: ${props => props.theme.colors.dropdownHoveredBg};
}
&:last-child {

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

@ -11,11 +11,12 @@ import eyeIcon from '../assets/images/eye.png';
const AddressWrapper = styled.div`
align-items: center;
display: flex;
background-color: #000;
border-radius: 6px;
border-radius: ${props => props.theme.boxBorderRadius};
padding: 0 13px 0 0;
margin-bottom: 10px;
width: 100%;
background: ${props => props.theme.colors.walletAddressBg};
border: 1px solid ${props => props.theme.colors.walletAddressBorder};
`;
const Input = styled.input`

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

@ -19,9 +19,18 @@ export const DARK_COLORS = {
buttonBorderColor: '#3e3c42',
activeItem: brand,
text,
cardBackgroundColor: black,
background: '#212124',
// Dropdown
dropdownBg: '#5d5d5d',
dropdownHoveredBg: '#212124',
dropdownBorder: '#4e4b4b',
// Card
cardBackgroundColor: black,
sendCardBg: black,
sendCardBorder: 'transparent',
// Buttons
buttonPrimaryText: text,
buttonSecondaryText: black,
@ -74,6 +83,10 @@ export const DARK_COLORS = {
walletSummaryBg: black,
walletSummaryBorder: black,
// Wallet Address
walletAddressBg: black,
walletAddressBorder: black,
// Console
consoleBg: black,
consoleBorder: 'transparent',

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

@ -25,12 +25,19 @@ export const LIGHT_COLORS = {
buttonBorderColor: '#3E3C42',
activeItem: brand,
// Dropdown
dropdownBg: white,
dropdownHoveredBg: offWhite,
dropdownBorder: border,
// Buttons
buttonPrimaryText: white,
buttonSecondaryText: text,
// Card
cardBackgroundColor: black,
sendCardBg: white,
sendCardBorder: border,
// Sidebar
sidebarBg: white,
@ -83,6 +90,10 @@ export const LIGHT_COLORS = {
walletSummaryBg: white,
walletSummaryBorder: border,
// Wallet Address
walletAddressBg: white,
walletAddressBorder: border,
// Forms
inputBg: white,

28
app/theme/theme.js
View File

@ -222,5 +222,33 @@ export const appTheme: AppTheme = {
[LIGHT]: LIGHT_COLORS.consoleBorder,
[DARK]: DARK_COLORS.consoleBorder,
}),
sendCardBg: theme('mode', {
[LIGHT]: LIGHT_COLORS.sendCardBg,
[DARK]: DARK_COLORS.sendCardBg,
}),
sendCardBorder: theme('mode', {
[LIGHT]: LIGHT_COLORS.sendCardBorder,
[DARK]: DARK_COLORS.sendCardBorder,
}),
walletAddressBg: theme('mode', {
[LIGHT]: LIGHT_COLORS.walletAddressBg,
[DARK]: DARK_COLORS.walletAddressBg,
}),
walletAddressBorder: theme('mode', {
[LIGHT]: LIGHT_COLORS.walletAddressBorder,
[DARK]: DARK_COLORS.walletAddressBorder,
}),
dropdownBg: theme('mode', {
[LIGHT]: LIGHT_COLORS.dropdownBg,
[DARK]: DARK_COLORS.dropdownBg,
}),
dropdownHoveredBg: theme('mode', {
[LIGHT]: LIGHT_COLORS.dropdownHoveredBg,
[DARK]: DARK_COLORS.dropdownHoveredBg,
}),
dropdownBorder: theme('mode', {
[LIGHT]: LIGHT_COLORS.dropdownBorder,
[DARK]: DARK_COLORS.dropdownBorder,
}),
},
};

42
app/views/receive.js
View File

@ -35,14 +35,19 @@ const ActionButton = styled.button`
outline: none;
display: flex;
align-items: center;
margin-top: 30px;
margin: 15px 0;
opacity: 0.7;
width: auto;
&:hover {
opacity: 1;
}
`;
const ActionText = styled(TextComponent)`
white-space: nowrap;
`;
const ActionIcon = styled.img`
width: 25px;
height: 25px;
@ -104,20 +109,29 @@ export class ReceiveView extends PureComponent<Props, State> {
<div>
<Label value='Shielded Address' />
{shieldedAddresses.map(addr => (
<WalletAddress key={addr} address={addr} />
<WalletAddress
key={addr}
address={addr}
/>
))}
<Row>
<ActionButton onClick={this.toggleAdditionalOptions} isActive={showAdditionalOptions}>
<ActionIcon isActive={showAdditionalOptions} src={MenuIcon} alt='More Options' />
<TextComponent value={buttonText} />
</ActionButton>
<Row justifyContent='space-between'>
<ActionButton onClick={() => this.generateNewAddress('shielded')}>
<ActionIcon src={PlusIcon} alt='New Shielded Address' />
<TextComponent value='New Shielded Address' />
<ActionIcon
src={PlusIcon}
alt='New Shielded Address'
/>
<ActionText value='New Shielded Address' />
</ActionButton>
<ActionButton onClick={() => this.generateNewAddress('transparent')}>
<ActionIcon src={PlusIcon} alt='New Transparent Address' />
<TextComponent value='New Transparent Address' />
<ActionButton
onClick={this.toggleAdditionalOptions}
isActive={showAdditionalOptions}
>
<ActionIcon
isActive={showAdditionalOptions}
src={MenuIcon}
alt='More Options'
/>
<ActionText value={buttonText} />
</ActionButton>
</Row>
<RevealsMain>
@ -146,6 +160,10 @@ export class ReceiveView extends PureComponent<Props, State> {
{transparentAddresses.map(addr => (
<WalletAddress key={addr} address={addr} />
))}
<ActionButton onClick={() => this.generateNewAddress('transparent')}>
<ActionIcon src={PlusIcon} alt='New Transparent Address' />
<ActionText value='New Transparent Address' />
</ActionButton>
</animated.div>
))
}

5
app/views/send.js
View File

@ -51,7 +51,7 @@ const Loader = styled.img`
`;
const FormWrapper = styled.div`
margin-top: ${props => props.theme.layoutContentPaddingTop};
/* margin-top: ${props => props.theme.layoutContentPaddingTop}; */
width: 71%;
`;
@ -121,7 +121,8 @@ const FeeWrapper = styled.div`
const InfoCard = styled.div`
width: 100%;
background-color: ${props => props.theme.colors.cardBackgroundColor};
background-color: ${props => props.theme.colors.sendCardBg};
border: 1px solid ${props => props.theme.colors.sendCardBorder}
border-radius: ${props => props.theme.boxBorderRadius};
`;

28
app/views/settings.js
View File

@ -30,7 +30,7 @@ const Wrapper = styled.div`
`;
const ModalContent = styled.div`
padding: 20px;
padding: 20px 30px;
width: 100%;
max-height: 600px;
overflow-y: auto;
@ -231,17 +231,17 @@ export class SettingsView extends PureComponent<Props, State> {
/>
</ThemeSelectWrapper>
<ConfirmDialogComponent
title='Export view keys'
title='Export View Keys'
renderTrigger={toggleVisibility => (
<SettingsWrapper>
<SettingsTitle value='Export view keys' />
<SettingsTitle value='Export View Keys' />
<SettingsContent value='Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.' />
<Btn label='Export view keys' onClick={toggleVisibility} />
<Btn label='Export View Keys' onClick={toggleVisibility} />
</SettingsWrapper>
)}
onConfirm={this.exportViewKeys}
showButtons={!successExportViewKeys}
width={750}
width={450}
>
{() => (
<ModalContent>
@ -268,17 +268,17 @@ export class SettingsView extends PureComponent<Props, State> {
</ConfirmDialogComponent>
<ConfirmDialogComponent
title='Export private keys'
title='Export Private Keys'
renderTrigger={toggleVisibility => (
<SettingsWrapper>
<SettingsTitle value='Export private keys' />
<SettingsTitle value='Export Private Keys' />
<SettingsContent value='Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.' />
<Btn label='Export private keys' onClick={toggleVisibility} />
<Btn label='Export Private Keys' onClick={toggleVisibility} />
</SettingsWrapper>
)}
onConfirm={this.exportPrivateKeys}
showButtons={!successExportPrivateKeys}
width={750}
width={450}
>
{() => (
<ModalContent>
@ -305,17 +305,17 @@ export class SettingsView extends PureComponent<Props, State> {
</ConfirmDialogComponent>
<ConfirmDialogComponent
title='Import private keys'
title='Import Private Keys'
renderTrigger={toggleVisibility => (
<SettingsWrapper>
<SettingsTitle value='Import private keys' />
<SettingsTitle value='Import Private Keys' />
<SettingsContent value='Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.' />
<Btn label='Import private keys' onClick={toggleVisibility} />
<Btn label='Import Private Keys' onClick={toggleVisibility} />
</SettingsWrapper>
)}
onConfirm={this.importPrivateKeys}
showButtons={!successImportPrivateKeys}
width={900}
width={450}
isLoading={isLoading}
>
{() => (
@ -338,7 +338,7 @@ export class SettingsView extends PureComponent<Props, State> {
<SettingsWrapper>
<SettingsTitle value='Backup Wallet' />
<SettingsContent value='Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.' />
<Btn label='Backup wallet.dat' onClick={this.backupWalletDat} />
<Btn label='Backup Wallet' onClick={this.backupWalletDat} />
</SettingsWrapper>
</Wrapper>
);

54
app/views/transactions.js
View File

@ -31,17 +31,30 @@ const RoundedTransactionWrapper = styled.div`
${props => (props.roundPosition === 'top'
? `
border-top-left-radius: ${props.theme.boxBorderRadius};
border-top-right-radius: ${props.theme.boxBorderRadius};`
: `border-bottom-left-radius: ${props.theme.boxBorderRadius};
border-bottom-right-radius: ${props.theme.boxBorderRadius};`)}
border-top-left-radius: ${props.theme.boxBorderRadius};
border-top-right-radius: ${props.theme.boxBorderRadius};
`
: `
border-bottom-left-radius: ${props.theme.boxBorderRadius};
border-bottom-right-radius: ${props.theme.boxBorderRadius};
`
)}
`;
const ListWrapper = styled.div`
margin-top: 10px;
`;
export class TransactionsView extends PureComponent<Props> {
componentDidMount() {
const { getTransactions, resetTransactionsList } = this.props;
resetTransactionsList();
getTransactions({ count: PAGE_SIZE, offset: 0, shieldedTransactionsCount: 0 });
getTransactions({
count: PAGE_SIZE,
offset: 0,
shieldedTransactionsCount: 0,
});
}
isRowLoaded = ({ index }: { index: number }) => {
@ -122,9 +135,14 @@ export class TransactionsView extends PureComponent<Props> {
return transactionItem;
};
renderRow = ({ index, key, style }: { index: number, key: string, style: Object }) => (
renderRow = (
{ index, key, style }: { index: number, key: string, style: Object },
) => (
<div key={key} style={style}>
{this.isRowLoaded({ index }) ? this.renderTransactions({ index }) : 'Loading...'}
{this.isRowLoaded({ index })
? this.renderTransactions({ index })
: 'Loading...'
}
</div>
);
@ -179,16 +197,18 @@ export class TransactionsView extends PureComponent<Props> {
{({ onRowsRendered, registerChild }) => (
<AutoSizer>
{({ width, height }) => (
<List
noRowsRenderer={EmptyTransactionsComponent}
ref={registerChild}
onRowsRendered={onRowsRendered}
rowRenderer={this.renderRow}
rowHeight={this.getRowHeight}
rowCount={transactionsSize}
width={width}
height={height - 20}
/>
<ListWrapper>
<List
noRowsRenderer={EmptyTransactionsComponent}
ref={registerChild}
onRowsRendered={onRowsRendered}
rowRenderer={this.renderRow}
rowHeight={this.getRowHeight}
rowCount={transactionsSize}
width={width}
height={height - 20}
/>
</ListWrapper>
)}
</AutoSizer>
)}

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

@ -7,7 +7,11 @@ type Colors = {
secondary: ThemeSet,
sidebarBg: ThemeSet,
// Card
cardBackgroundColor: ThemeSet,
sendCardBg: ThemeSet,
sendCardBorder: ThemeSet,
text: ThemeSet,
activeItem: ThemeSet,
inactiveItem: ThemeSet,
@ -19,6 +23,11 @@ type Colors = {
blackTwo: ThemeSet,
buttonBorderColor: ThemeSet,
// Dropdown
dropdownBg: ThemeSet,
dropdownHoveredBg: ThemeSet,
dropdownBorder: ThemeSet,
// Divider
divider: ThemeSet,