Unverified Commit f1d81094 authored by Amaury Martiny's avatar Amaury Martiny Committed by GitHub

Merge pull request #118 from parity-js/am-ux

Small UI improvements
parents 21d537c1 423b719b
......@@ -41,11 +41,11 @@
"scripts": {
"build": "lerna run build",
"preelectron": "yarn build",
"electron": "lerna run electron --scope fether",
"electron": "cd packages/fether-electron && yarn electron",
"lint": "semistandard 'packages/**/*.js' --parser babel-eslint",
"prepackage": "yarn build",
"package": "lerna run package --scope fether",
"release": "lerna run release --scope fether",
"package": "cd packages/fether-electron && yarn package",
"release": "cd packages/fether-electron && yarn release",
"start": "npm-run-all -l -p start-*",
"start-electron": "cd packages/fether-electron && yarn start",
"start-hoc": "cd packages/light-hoc && yarn start",
......
......@@ -96,6 +96,7 @@ class AccountsList extends Component {
? accountsInfo[address].name
: '(No name)')
}
shortAddress
/>
</li>
))
......
......@@ -6,18 +6,22 @@
import React, { Component } from 'react';
import { inject, observer } from 'mobx-react';
import { TokenCard } from 'fether-ui';
import { withRouter } from 'react-router-dom';
@withRouter
@inject('tokensStore')
@observer
class NewTokenItem extends Component {
handleAddToken = () => {
const { token, tokensStore } = this.props;
const { history, token, tokensStore } = this.props;
tokensStore.addToken(token.address, token);
history.goBack();
};
handleRemoveToken = () => {
const { token, tokensStore } = this.props;
const { history, token, tokensStore } = this.props;
tokensStore.removeToken(token.address);
history.goBack();
};
render () {
......
......@@ -9,7 +9,6 @@ import debounce from 'lodash/debounce';
import { Header } from 'fether-ui';
import { inject, observer } from 'mobx-react';
import light from 'light-hoc';
import { Link } from 'react-router-dom';
import Health from '../Health';
import NewTokenItem from './NewTokenItem';
......@@ -96,17 +95,18 @@ class Whitelist extends Component {
};
render () {
const { history } = this.props;
const { matches, search } = this.state;
return (
<div>
<Header
left={
<Link to='/tokens' className='icon -close'>
<a to='/tokens' className='icon -close' onClick={history.goBack}>
Close
</Link>
</a>
}
title={<h1>My tokens</h1>}
title={<h1>Search tokens</h1>}
/>
<div className='window_content'>
......
.account {
display: flex;
&.-header {
.account_address {
font-size: 0.6rem;
}
}
.account_avatar {
width: (ms(0) * 1.3) + 1rem;
height: (ms(0) * 1.3) + 1rem;
......@@ -38,7 +44,7 @@
.account_address {
font-family: $mono;
color: $grey;
font-size: ms(-2) * 0.9; // 0.9 is ugly here
font-size: ms(-2);
line-height: ms(-2) * 1.3;
}
}
......@@ -32,7 +32,7 @@
padding: 0.25rem 0.5rem 0.175rem;
display: inline-block;
font-size: ms(0);
line-height: ms(0) * 1.3;
line-height: ms(0) * 0.8;
color: rgba($black, 0.675);
font-weight: 500;
}
......
......@@ -4,39 +4,35 @@
// SPDX-License-Identifier: BSD-3-Clause
import React from 'react';
import Blockies from 'react-blockies';
import PropTypes from 'prop-types';
import Address from './Address';
import Avatar from './Avatar';
import Card from '../Card';
import Placeholder from '../Placeholder';
import Information from './Information';
import Name from './Name';
const AccountCard = ({ address, animate, name, ...otherProps }) => (
const AccountCard = ({ address, name, shortAddress, ...otherProps }) => (
<Card {...otherProps}>
<div className='account'>
<div className='account_avatar'>
{address ? (
<Blockies seed={address.toLowerCase()} />
) : (
<Placeholder animate={animate} height={36} width={36} />
)}
</div>
<div className='account_information'>
{name ? (
<div className='account_name'>{name}</div>
) : (
<Placeholder animate={animate} height={18} width={100} />
)}
<div className='account_address'>
{address || <Placeholder animate={animate} height={12} width={150} />}
</div>
</div>
<Avatar address={address} />
<Information>
<Name name={name} />
<Address address={address} short={shortAddress} />
</Information>
</div>
</Card>
);
AccountCard.Address = Address;
AccountCard.Avatar = Avatar;
AccountCard.Information = Information;
AccountCard.Name = Name;
AccountCard.propTypes = {
address: PropTypes.string,
name: PropTypes.string
name: PropTypes.string,
shortAddress: PropTypes.bool
};
export default AccountCard;
// Copyright 2015-2018 Parity Technologies (UK) Ltd.
// This file is part of Parity.
//
// SPDX-License-Identifier: BSD-3-Clause
import React from 'react';
import PropTypes from 'prop-types';
import AddressShort from '../../AddressShort';
import Placeholder from '../../Placeholder';
const Address = ({ address, short, ...otherProps }) => (
<div className='account_address' {...otherProps}>
{address ? (
short ? (
<AddressShort address={address} />
) : (
address
)
) : (
<Placeholder height={18} width={100} />
)}
</div>
);
Address.defaultProps = {
short: false
};
Address.propTypes = {
name: PropTypes.string,
short: PropTypes.bool
};
export default Address;
// Copyright 2015-2018 Parity Technologies (UK) Ltd.
// This file is part of Parity.
//
// SPDX-License-Identifier: BSD-3-Clause
import Address from './Address';
export default Address;
// Copyright 2015-2018 Parity Technologies (UK) Ltd.
// This file is part of Parity.
//
// SPDX-License-Identifier: BSD-3-Clause
import React from 'react';
import Blockies from 'react-blockies';
import PropTypes from 'prop-types';
import Placeholder from '../../Placeholder';
const Avatar = ({ address, ...otherProps }) => (
<div className='account_avatar' {...otherProps}>
{address ? (
<Blockies seed={address.toLowerCase()} />
) : (
<Placeholder height={36} width={36} />
)}
</div>
);
Avatar.propTypes = {
address: PropTypes.string
};
export default Avatar;
// Copyright 2015-2018 Parity Technologies (UK) Ltd.
// This file is part of Parity.
//
// SPDX-License-Identifier: BSD-3-Clause
import Avatar from './Avatar';
export default Avatar;
// Copyright 2015-2018 Parity Technologies (UK) Ltd.
// This file is part of Parity.
//
// SPDX-License-Identifier: BSD-3-Clause
import React from 'react';
import PropTypes from 'prop-types';
const Information = ({ children, ...otherProps }) => (
<div className='account_information' {...otherProps}>
{children}
</div>
);
Information.propTypes = {
children: PropTypes.node
};
export default Information;
// Copyright 2015-2018 Parity Technologies (UK) Ltd.
// This file is part of Parity.
//
// SPDX-License-Identifier: BSD-3-Clause
import Information from './Information';
export default Information;
// Copyright 2015-2018 Parity Technologies (UK) Ltd.
// This file is part of Parity.
//
// SPDX-License-Identifier: BSD-3-Clause
import React from 'react';
import PropTypes from 'prop-types';
import Placeholder from '../../Placeholder';
const Name = ({ name, ...otherProps }) => (
<div className='account_name' {...otherProps}>
{name || <Placeholder height={18} width={100} />}
</div>
);
Name.propTypes = {
name: PropTypes.string
};
export default Name;
// Copyright 2015-2018 Parity Technologies (UK) Ltd.
// This file is part of Parity.
//
// SPDX-License-Identifier: BSD-3-Clause
import Name from './Name';
export default Name;
......@@ -11,11 +11,11 @@ import ClickToCopy from '../ClickToCopy';
import Header from '../Header';
const NormalContainer = ({ children }) => (
<h1 className='account'>{children}</h1>
<h1 className='account -header'>{children}</h1>
);
const CopyContainer = ({ address, children, ...otherProps }) => (
<ClickToCopy label='Copy address' textToCopy={address} {...otherProps}>
<a className='account'>{children}</a>
<a className='account -header'>{children}</a>
</ClickToCopy>
);
......@@ -30,10 +30,8 @@ const AccountHeader = ({ address, copyAddress, name, ...otherProps }) => {
name && (
<Container address={address}>
<Blockies seed={address.toLowerCase()} scale={2} size={8} />{' '}
{name}{' '}
<span className='account_address'>
{address.slice(0, 4)}..{address.slice(-4)}
</span>
{name} <br />
<span className='account_address'>{address}</span>
</Container>
)
}
......
// Copyright 2015-2018 Parity Technologies (UK) Ltd.
// This file is part of Parity.
//
// SPDX-License-Identifier: BSD-3-Clause
import React from 'react';
import PropTypes from 'prop-types';
const AddressShort = ({ address, as: T = 'span', ...otherProps }) => (
<T {...otherProps}>
{address.slice(0, 4)}..{address.slice(-4)}
</T>
);
AddressShort.propTypes = {
address: PropTypes.string.isRequired
};
export default AddressShort;
// Copyright 2015-2018 Parity Technologies (UK) Ltd.
// This file is part of Parity.
//
// SPDX-License-Identifier: BSD-3-Clause
import AddressShort from './AddressShort';
export default AddressShort;
......@@ -5,6 +5,7 @@
import AccountCard from './AccountCard';
import AccountHeader from './AccountHeader';
import AddressShort from './AddressShort';
import Card from './Card';
import FormField from './FormField';
import Header from './Header';
......@@ -14,6 +15,7 @@ import TokenCard from './TokenCard';
export {
AccountCard,
AccountHeader,
AddressShort,
Card,
FormField,
Header,
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment