status-im
/
MyCrypto
mirror of https://github.com/status-im/MyCrypto.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Implement new radio designs

This commit is contained in:
james-prado 2018-07-13 07:59:59 +01:00
parent 37aac07d0d
commit aa53c991c2
No known key found for this signature in database
GPG Key ID: 313ACB2286229FD0
9 changed files with 55 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
common/assets/images/icon-help-3.svg
View File

@ -1 +1 @@
<svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 92 92"><path fill="#007896" d="M45.386.004C19.983.344-.333 21.215.005 46.619c.34 25.393 21.209 45.715 46.611 45.377 25.398-.342 45.718-21.213 45.38-46.615-.34-25.395-21.21-45.716-46.61-45.377zM45.25 74l-.254-.004c-3.912-.116-6.67-2.998-6.559-6.852.109-3.788 2.934-6.538 6.717-6.538l.227.004c4.021.119 6.748 2.972 6.635 6.937C51.904 71.346 49.123 74 45.25 74zm16.455-32.659c-.92 1.307-2.943 2.93-5.492 4.916l-2.807 1.938c-1.541 1.198-2.471 2.325-2.82 3.434-.275.873-.41 1.104-.434 2.88l-.004.451H39.43l.031-.907c.131-3.728.223-5.921 1.768-7.733 2.424-2.846 7.771-6.289 7.998-6.435.766-.577 1.412-1.234 1.893-1.936 1.125-1.551 1.623-2.772 1.623-3.972a7.74 7.74 0 0 0-1.471-4.576c-.939-1.323-2.723-1.993-5.303-1.993-2.559 0-4.311.812-5.359 2.478-1.078 1.713-1.623 3.512-1.623 5.35v.457H27.936l.02-.477c.285-6.769 2.701-11.643 7.178-14.487C37.947 18.918 41.447 18 45.531 18c5.346 0 9.859 1.299 13.412 3.861 3.6 2.596 5.426 6.484 5.426 11.556 0 2.837-.896 5.502-2.664 7.924z"/></svg>
<svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 92 92"><path fill="#4295bc" d="M45.386.004C19.983.344-.333 21.215.005 46.619c.34 25.393 21.209 45.715 46.611 45.377 25.398-.342 45.718-21.213 45.38-46.615-.34-25.395-21.21-45.716-46.61-45.377zM45.25 74l-.254-.004c-3.912-.116-6.67-2.998-6.559-6.852.109-3.788 2.934-6.538 6.717-6.538l.227.004c4.021.119 6.748 2.972 6.635 6.937C51.904 71.346 49.123 74 45.25 74zm16.455-32.659c-.92 1.307-2.943 2.93-5.492 4.916l-2.807 1.938c-1.541 1.198-2.471 2.325-2.82 3.434-.275.873-.41 1.104-.434 2.88l-.004.451H39.43l.031-.907c.131-3.728.223-5.921 1.768-7.733 2.424-2.846 7.771-6.289 7.998-6.435.766-.577 1.412-1.234 1.893-1.936 1.125-1.551 1.623-2.772 1.623-3.972a7.74 7.74 0 0 0-1.471-4.576c-.939-1.323-2.723-1.993-5.303-1.993-2.559 0-4.311.812-5.359 2.478-1.078 1.713-1.623 3.512-1.623 5.35v.457H27.936l.02-.477c.285-6.769 2.701-11.643 7.178-14.487C37.947 18.918 41.447 18 45.531 18c5.346 0 9.859 1.299 13.412 3.861 3.6 2.596 5.426 6.484 5.426 11.556 0 2.837-.896 5.502-2.664 7.924z"/></svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.0 KiB

After

Width:  |  Height:  |  Size: 1.0 KiB

46
common/components/PriorityRadio/PriorityRadio.scss
View File

@ -4,51 +4,47 @@
.PriorityRadio {
&-button {
&-wrapper {
position: relative;
box-shadow: inset 0 1px 0 0 rgba(63, 63, 68, 0.05);
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
width: 100%;
border: 1px solid #e5ecf3;
border-radius: 3px;
text-transform: capitalize;
> button {
border: solid 1px #e5ecf3;
}
}
&.selected {
border: solid 1px rgba(16, 151, 192, 0.3);
border-radius: 3px;
box-shadow: 0 1px 1px 0 rgba(232, 234, 237, 0.5), 0 2px 4px 0 rgba(232, 234, 237, 0.5);
background-color: #fafbfc;
.PriorityRadio-button-level {
color: #4295bc;
}
}
width: 31%;
border: solid 1px transparent;
border-radius: 3px;
transition: box-shadow 150ms ease, border 150ms ease, color 150ms ease,
background-color 150ms ease;
background-color: white;
@include reset-button;
width: 33%;
padding: 0.75rem;
padding: 0.75rem 1.5rem;
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
&-level {
font-weight: 600;
font-size: 1rem;
font-weight: 400;
margin-bottom: 2px;
color: #9a9a9a;
transition: $transition;
text-transform: capitalize;
}
&-ringsize {
color: #9a9a9a;
}
}
&-sliding-border {
box-shadow: inset 0px 0px 0px 1px #4295bc;
height: calc(100% + 2px);
width: calc(33% + 2px);
margin: -1px;
position: absolute;
border: 1px solid #4295bc;
transition: transform 200ms ease;
border-radius: 3px;
&.medium {
transform: translateX(100%);
}
&.high {
transform: translateX(200%);
font-size: 0.8125rem;
}
}
}

19
common/components/PriorityRadio/index.tsx
View File

@ -22,12 +22,12 @@ export class PriorityRadio extends React.Component<any, State> {
public render() {
const { option } = this.state;
const prices = { low: '$0.24', medium: '$0.34', high: '$0.85' };
const ringSize = { low: '7', medium: '20', high: '40' };
const speed = { slow: '$0.075', average: '$0.088', fast: '$0.19' };
const estimate = { slow: '4 min', average: '3.4 min', fast: '24 sec' };
const buttons = [
{ type: 'low', price: prices.low, ringSize: ringSize.low },
{ type: 'medium', price: prices.medium, ringSize: ringSize.medium },
{ type: 'high', price: prices.high, ringSize: ringSize.high }
{ type: 'low', price: speed.slow, ringSize: estimate.slow },
{ type: 'medium', price: speed.average, ringSize: estimate.average },
{ type: 'high', price: speed.fast, ringSize: estimate.fast }
];
return (
<div className="PriorityRadio input-group-wrapper">
@ -38,11 +38,6 @@ export class PriorityRadio extends React.Component<any, State> {
<div className="flex-spacer" />
</div>
<div className="PriorityRadio-button-wrapper">
<div
className={`PriorityRadio-sliding-border ${
option.type === 'high' ? 'high' : option.type === 'medium' ? 'medium' : ''
}`}
/>
{buttons.map((btn, i) => (
<button
key={i}
@ -52,9 +47,7 @@ export class PriorityRadio extends React.Component<any, State> {
<span className="PriorityRadio-button-level">
{btn.type}: {btn.price}
</span>
<span className="PriorityRadio-button-ringsize small">
ring size: {btn.ringSize}
</span>
<span className="PriorityRadio-button-ringsize small">~{btn.ringSize}</span>
</button>
))}
</div>

46
common/components/PrivacyRadio/PrivacyRadio.scss
View File

@ -4,51 +4,47 @@
.PrivacyRadio {
&-button {
&-wrapper {
position: relative;
box-shadow: inset 0 1px 0 0 rgba(63, 63, 68, 0.05);
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
width: 100%;
border: 1px solid #e5ecf3;
border-radius: 3px;
text-transform: capitalize;
> button {
border: solid 1px #e5ecf3;
}
}
&.selected {
border: solid 1px rgba(16, 151, 192, 0.3);
border-radius: 3px;
box-shadow: 0 1px 1px 0 rgba(232, 234, 237, 0.5), 0 2px 4px 0 rgba(232, 234, 237, 0.5);
background-color: #fafbfc;
.PrivacyRadio-button-level {
color: #4295bc;
}
}
width: 31%;
border: solid 1px transparent;
border-radius: 3px;
transition: box-shadow 150ms ease, border 150ms ease, color 150ms ease,
background-color 150ms ease;
background-color: white;
@include reset-button;
width: 33%;
padding: 0.75rem;
padding: 0.75rem 1.5rem;
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
&-level {
font-weight: 600;
font-size: 1rem;
font-weight: 400;
margin-bottom: 2px;
color: #9a9a9a;
transition: $transition;
text-transform: capitalize;
}
&-ringsize {
color: #9a9a9a;
}
}
&-sliding-border {
box-shadow: inset 0px 0px 0px 1px #4295bc;
height: calc(100% + 2px);
width: calc(33% + 2px);
margin: -1px;
position: absolute;
border: 1px solid #4295bc;
transition: transform 200ms ease;
border-radius: 3px;
&.medium {
transform: translateX(100%);
}
&.high {
transform: translateX(200%);
font-size: 0.8125rem;
}
}
}

5
common/components/PrivacyRadio/index.tsx
View File

@ -38,11 +38,6 @@ export class PrivacyRadio extends React.Component<any, State> {
<div className="flex-spacer" />
</div>
<div className="PrivacyRadio-button-wrapper">
<div
className={`PrivacyRadio-sliding-border ${
option.type === 'high' ? 'high' : option.type === 'medium' ? 'medium' : ''
}`}
/>
{buttons.map((btn, i) => (
<button
key={i}

4
common/components/ui/Help.scss
View File

@ -14,8 +14,8 @@
}
&-x1 {
height: 1rem;
width: 1rem;
height: 0.8125rem;
width: 0.8125rem;
}
&-x2 {

2
common/containers/Tabs/SendTransaction/components/Fields/XMRFields.tsx
View File

@ -50,12 +50,12 @@ class XmrFieldsClass extends Component<StateProps> {
{shouldDisplay && (
<div className="Tab-content-pane">
<AddressField showLabelMatch={true} placeholder="Enter a Monero Address" />
<PaymentIdField optional={true} />
<AmountField
networkId={networkId}
hasUnitDropdown={false}
hasSendEverything={true}
/>
<PaymentIdField optional={true} />
<PrivacyRadio />
<PriorityRadio />
{this.getTxButton()}

1
common/containers/Tabs/SendTransaction/components/Receive.scss
View File

@ -8,6 +8,7 @@
.qr-input {
max-width: 30rem;
margin: auto;
margin-bottom: 3rem;
> input {
padding-right: 3rem;

3
common/containers/Tabs/SendTransaction/index.tsx
View File

@ -152,7 +152,8 @@ class SendTransaction extends React.Component<Props> {
const mapStateToProps = (state: AppState): StateProps => ({
wallet: getWalletInst(state),
network: getNetworkConfig(state)
network: getNetworkConfig(state),
requestDisabled: !isNetworkUnit(state, 'ETH')
});
export default connect(mapStateToProps)(SendTransaction);