Eddie Wang a9f78011cb Swap UX Cleanup (#339)
Fixes #226
Fixes #383

Added a simple check to ensure that swap rates exist so we don't get a NaN error, which would be confusing to users.

Instead, the form is hidden and a spinner is shown until the bityRates are ready for the user.

* adds spinner while fetching

* added error on top of input

* removed classnames prop and added cn

* added simple err mssge

* css fixes and disabled button

* better err mssge generation and fixed swap details

* minor typo

* added redux notification on unreachable error

* minheight for err message and swap update on redux change

* fixed formatting and removed className prop
2017-11-14 10:37:56 -08:00

58 lines
945 B
SCSS

@import 'common/sass/variables';
.CurrencySwap {
text-align: center;
&-title {
font-weight: 100;
margin-bottom: $space * 2.5;
}
&-input,
&-divider {
display: inline-block;
vertical-align: top;
}
&-input-group {
display: inline-block;
}
&-error-message {
display: block;
min-height: 25px;
color: $brand-danger;
text-align: left;
}
&-inner-wrap {
display: block;
}
@media (min-width: $screen-xs-min) {
&-inner-wrap {
display: flex;
align-items: center;
justify-content: center;
}
}
&-dropdown {
display: inline-block;
margin-top: 0.6rem;
margin-bottom: 0.6rem;
}
&-input {
width: 100%;
max-width: 10rem;
margin-right: $space-sm;
}
&-divider {
height: $input-height-base;
line-height: $input-height-base;
margin: 0 $space * 2;
font-weight: 100;
}
&-submit {
margin-top: $space * 2.5;
}
}