fix: Fixes #494 drag and context menu. import options spacing for error

openethereum · Apr 7, 2019 · 539e773 · 539e773
1 parent 51797f9
commit 539e773
Show file tree

Hide file tree

Showing 6 changed files with 45 additions and 22 deletions.
diff --git a/...ages/fether-react/src/Accounts/CreateAccount/AccountImportOptions/AccountImportOptions.js b/...ages/fether-react/src/Accounts/CreateAccount/AccountImportOptions/AccountImportOptions.js
@@ -146,7 +146,7 @@ class AccountImportOptions extends Component {
     const jsonCard = (
       <Card>
         <div key='createAccount'>
-          <div className='text -centered'>
+          <div className='text -centered recover_from_json_keyfile'>
             <p>Recover from JSON Keyfile</p>
 
             <FetherForm.InputFile
@@ -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>
     );

diff --git a/packages/fether-react/src/Accounts/CreateAccount/CreateAccount.js b/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>
     );
   }

diff --git a/packages/fether-react/src/assets/sass/components/_account-import.scss b/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;
+    }
+}
diff --git a/packages/fether-react/src/assets/sass/shared/_basics.scss b/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,

diff --git a/packages/fether-react/src/index.sass b/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'

diff --git a/packages/fether-ui/src/Form/InputFile/InputFile.js b/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