Browse Source

fix(reformat-pay-form): fixed bad formatting

renovate/lint-staged-8.x
odb366 7 years ago
parent
commit
0182d4b351
  1. 4
      app/components/Form/Pay.js
  2. 26
      app/components/Form/Pay.scss

4
app/components/Form/Pay.js

@ -106,12 +106,12 @@ class Pay extends Component {
<div className={styles.bottom}> <div className={styles.bottom}>
<textarea <textarea
type='text' type='text'
placeholder='Payment request or bitcoin address' placeholder='Paste payment request or bitcoin address here'
value={payInput} value={payInput}
onChange={event => setPayInput(event.target.value)} onChange={event => setPayInput(event.target.value)}
onBlur={onPayInputBlur} onBlur={onPayInputBlur}
id='paymentRequest' id='paymentRequest'
rows='2' rows='4'
/> />
<section className={`${styles.errorMessage} ${showErrors.payInput && styles.active}`}> <section className={`${styles.errorMessage} ${showErrors.payInput && styles.active}`}>
{showErrors.payInput && {showErrors.payInput &&

26
app/components/Form/Pay.scss

@ -3,6 +3,8 @@
.container { .container {
padding: 0 40px; padding: 0 40px;
font-family: Roboto; font-family: Roboto;
margin: 0 auto;
width: 500px;
} }
.header { .header {
@ -20,16 +22,16 @@
} }
.content { .content {
margin-top: 50px; margin-top: 40px;
color: $white; color: $white;
.destination { .destination {
margin-bottom: 25px; margin-bottom: 10px;
.description { .description {
font-size: 12px; font-size: 12px;
line-height: 14px; line-height: 14px;
padding: 10px 15px; padding: 0px 15px;
min-height: 14px; min-height: 14px;
&.active { &.active {
@ -53,13 +55,16 @@
align-items: center; align-items: center;
input { input {
font-size: 40px; font-size: 20px;
max-width: 230px; max-width: 150px;
border:1px solid #404040;
border-radius: 4px;
padding: 15px;
} }
} }
.top { .top {
margin-bottom: 25px; margin-bottom: 10px;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
@ -74,12 +79,13 @@
input, textarea { input, textarea {
background: transparent; background: transparent;
outline: none; outline: none;
border: 0; border: 1px solid #404040;
color: $gold; color: $gold;
-webkit-text-fill-color: $white; -webkit-text-fill-color: $white;
font-size: 12px; font-size: 12px;
width: 100%; width: 100%;
font-weight: 200; font-weight: 200;
padding: 10px;
} }
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
@ -93,6 +99,7 @@
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
margin-left: 12px;
.currentCurrency { .currentCurrency {
cursor: pointer; cursor: pointer;
@ -136,12 +143,13 @@
} }
.usdAmount { .usdAmount {
margin-top: 20px; margin-top: 10px;
opacity: 0.5; opacity: 0.5;
font-size: 14px;
} }
.submit { .submit {
margin-top: 50px; margin-top: 20px;
text-align: center; text-align: center;
.button { .button {

Loading…
Cancel
Save