fix: Fixes #494 Drag vs Context menu. Import options page error and colour

packages/fether-react/src/Accounts/CreateAccount/AccountImportOptions/AccountImportOptions.js

@@ -186,7 +186,7 @@ class AccountImportOptions extends Component {
     const phraseCard = (
       <Card>
         <div key='importBackup'>
-          <div className='text -centered'>
+          <div className='text -centered recover-from-seed-phrase'>
             <p>Recover from Seed Phrase</p>
 
             <FetherForm.Field
@@ -213,14 +213,14 @@ class AccountImportOptions extends Component {
           {signerCard}
           {spacer}
           {!importingFromSigner && phraseCard}
-          <p>{error}</p>
-          <nav className='form-nav -space-around'>
-            {currentStep > 1 && (
+          <p className='error-import-account'>{error}</p>
+          {currentStep > 1 && (
+            <nav className='form-nav -space-around'>
               <button className='button -back' onClick={history.goBack}>
                 Back
               </button>
-            )}
-          </nav>
+            </nav>
+          )}
         </div>
       </RequireHealthOverlay>
     );

packages/fether-react/src/Accounts/CreateAccount/CreateAccount.js

@@ -91,14 +91,14 @@ class CreateAccount extends Component {
           </div>
         </div>
 
-        <nav className='footer-nav'>
-          {step > 1 ? (
-            <div className='footer-nav_status'>
-              <Health />
-            </div>
-          ) : (
-            <div className='footer-nav_option'>
-              {isImport ? null : (
+        {isImport ? null : (
+          <nav className='footer-nav'>
+            {step > 1 ? (
+              <div className='footer-nav_status'>
+                <Health />
+              </div>
+            ) : (
+              <div className='footer-nav_option'>
                 <p>
                   Already have an account?
                   <button
@@ -108,10 +108,10 @@ class CreateAccount extends Component {
                     Import account
                   </button>
                 </p>
-              )}
-            </div>
-          )}
-        </nav>
+              </div>
+            )}
+          </nav>
+        )}
       </React.Fragment>
     );
   }

packages/fether-react/src/assets/sass/components/_account-import.scss

@@ -0,0 +1,12 @@
+.error-import-account {
+    color: red;
+    font-size: ms(0);
+    margin-top: 0.25rem;
+    text-align: center;
+}
+
+.recover-from-seed-phrase {
+    .form_field textarea {
+        height: 2.5rem;
+    }
+}

packages/fether-react/src/assets/sass/shared/_basics.scss

@@ -14,8 +14,6 @@ body {
   font-size: ms(0);
   line-height: ms(0) * 1.3;
   position: relative;
-  /* https://electronjs.org/docs/api/frameless-window#draggable-region */
-  -webkit-app-region: drag;
 }
 
 .hidden {
@@ -54,10 +52,22 @@ textarea,
 .header-nav_left, /* i.e. back button in header */
 .header-nav_right, /* i.e. menu */
 .window_content, /* i.e. main body (e.g. accounts list) */
+.footer-nav,
 .text {
   -webkit-app-region: no-drag;
 }
 
+.header-nav_title,
+.footer-nav {
+  /**
+   * Right-clicking to trigger the 'contextmenu' event that displays the Fether context menu
+   * only works on elements whose styles are `-webkit-app-region: drag;`
+   *
+   * Reference: https://electronjs.org/docs/api/frameless-window#draggable-region
+   */
+  -webkit-app-region: drag;
+}
+
 h1, /* i.e. Send Ether title */
 .account.-header,
 .status,

packages/fether-react/src/index.sass

@@ -23,6 +23,7 @@
 @import './assets/sass/components/logo'
 @import './assets/sass/components/token'
 @import './assets/sass/components/account'
+@import './assets/sass/components/account-import'
 @import './assets/sass/components/accounts-list'
 @import './assets/sass/components/status'
 @import './assets/sass/components/header-nav'

packages/fether-ui/src/Form/InputFile/InputFile.js

@@ -65,7 +65,7 @@ export class InputFile extends React.PureComponent {
         disableClick
       >
         {({ open }) => (
-          <div className='dropzone -md'>
+          <div className='dropzone -sm'>
             <label htmlFor='backupKeyfile'>{label}</label>
             <button type='button' className='button' onClick={() => open()}>
               Select File