Merge branch 'master' into fix/number-input-pinwheel

app/components/Form/PayForm.js

@@ -49,11 +49,6 @@ class PayForm extends Component {
         {showPayLoadingScreen && <LoadingBolt />}
 
         <section className={`${styles.amountContainer} ${isLn ? styles.ln : ''} ${showErrors.amount && styles.error}`}>
-          <section className={`${styles.amountError} ${showErrors.amount && styles.active}`}>
-            {showErrors.amount &&
-              <span>{errors.amount}</span>
-            }
-          </section>
           <label htmlFor='amount'>
             <CurrencyIcon currency={currency} crypto={crypto} />
           </label>
@@ -66,7 +61,7 @@ class PayForm extends Component {
               isLn ?
                 { width: '75%', fontSize: '85px' }
                 :
-                { width: `${amount.length > 1 ? (amount.length * 20) - 5 : 25}%`, fontSize: `${190 - (amount.length ** 2)}px` }
+                { width: `${amount.length > 1 ? (amount.length * 20) - 5 : 35}%`, fontSize: `${190 - (amount.length ** 2)}px` }
             }
             value={currentAmount}
             onChange={event => setPayAmount(event.target.value)}
@@ -75,6 +70,11 @@ class PayForm extends Component {
             readOnly={isLn}
           />
         </section>
+        <section className={`${styles.errorMessage} ${showErrors.amount && styles.active}`}>
+          {showErrors.amount &&
+            <span>{errors.amount}</span>
+          }
+        </section>
         <div className={styles.inputContainer}>
           <div className={styles.info}>
             <span>{inputCaption}</span>
@@ -103,7 +103,7 @@ class PayForm extends Component {
               id='paymentRequest'
             />
           </section>
-          <section className={`${styles.payInputError} ${showErrors.payInput && styles.active}`}>
+          <section className={`${styles.errorMessage} ${showErrors.payInput && styles.active}`}>
             {showErrors.payInput &&
               <span>{errors.payInput}</span>
             }

app/components/Form/PayForm.scss

@@ -14,8 +14,6 @@
   color: $main;
   display: flex;
   justify-content: center;
-  min-height: 120px;
-  margin-bottom: 20px;
   min-height: 175px;
   border-bottom: 1px solid transparent;
 
@@ -24,22 +22,9 @@
   }
 
   &.error {
-    border-color: $red; 
+    border-color: $red;
   }
 
-  .amountError {
-    position: absolute;
-    top: 0;
-    right: 0;
-    opacity: 0;
-    color: $red;
-    transition: all 0.25s ease;
-
-    &.active {
-      opacity: 1;
-    }
-  }
-  
   label, input[type=number], input[type=text] {
     color: inherit;
     display: inline-block;
@@ -61,7 +46,7 @@
       }
     }
   }
-  
+
   input[type=number], input[type=text] {
     width: 100px;
     font-size: 180px;
@@ -70,6 +55,12 @@
     -webkit-appearance: none;
     font-weight: 200;
   }
+  
+  input[type=number] {
+    &::-webkit-inner-spin-button, &::-webkit-outer-spin-button {
+      -webkit-appearance: none;
+    }
+  }
 }
 
 .inputContainer {
@@ -136,7 +127,7 @@
   }
 }
 
-.payInputError {
+.errorMessage {
   margin: 10px 0;
   min-height: 20px;
   color: $red;
@@ -173,9 +164,3 @@
     }
   }
 }
-
-input[type=number] {
-  &::-webkit-inner-spin-button, &::-webkit-outer-spin-button {
-    -webkit-appearance: none;
-  }
-}

app/main.dev.js

@@ -82,7 +82,6 @@ app.on('ready', async () => {
   mainWindow = new BrowserWindow({
     show: false,
     frame: false,
-    nodeIntegration: false,
     icon: icon
   })