Fixed window size

packages/fether-electron/src/main/app/messages/index.js

@@ -18,17 +18,6 @@ export default async (fetherAppWindow, event, action, ...args) => {
       return;
     }
     switch (action) {
-      case 'app-resize': {
-        if (!fetherAppWindow || !args[0]) {
-          return;
-        }
-        const [width] = fetherAppWindow.getContentSize();
-        // Conversion to integer is required to pass as argument to setContentSize.
-        // Reference: https://electronjs.org/docs/all#winsetcontentsizewidth-height-animate
-        const newHeight = parseInt(args[0]);
-        fetherAppWindow.setContentSize(width, Math.round(newHeight) + 2);
-        break;
-      }
       case 'check-clock-sync': {
         checkClockSync().then(t => {
           event.sender.send('check-clock-sync-reply', t);

packages/fether-electron/src/main/app/options/config/index.js

@@ -67,10 +67,8 @@ const DEFAULT_OPTIONS = {
 };
 
 const TASKBAR_OPTIONS = {
-  // Do not use frame but context menu required on non-macOS.
-  // Without frame it causes window height to shrink upon show/hide
+  height: 515,
   frame: false,
-  height: 464,
   // On Linux the user must click the tray icon and then click the tooltip
   // to toggle the Fether window open/close
   tooltip: 'Click to toggle Fether window',

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

@@ -90,7 +90,6 @@ class AccountsList extends Component {
               )}
             </div>
           </div>
-
           <nav className='footer-nav'>
             <div className='footer-nav_status'>
               <Health />

packages/fether-react/src/Accounts/AccountsList/Feedback/Feedback.js

@@ -11,7 +11,6 @@ export const Feedback = ({ accountsListLength }) => (
     href='https://github.com/paritytech/fether/issues/new'
     rel='noopener noreferrer'
     target='_blank'
-    style={{ marginBottom: accountsListLength > 1 ? '-2px' : '-10px' }}
   >
     Feedback
   </a>

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

@@ -168,7 +168,7 @@ class AccountImportOptions extends Component {
             {importingFromSigner ? (
               <Scanner
                 onScan={this.handleSignerImported}
-                label='Please show the QR code of the account on the webcam.'
+                label='Scan Parity Signer account QR code'
               />
             ) : (
               <button
@@ -203,15 +203,16 @@ class AccountImportOptions extends Component {
       </Card>
     );
 
+    const spacer = <div style={{ height: '0.5rem' }} />;
+
     return (
       <RequireHealthOverlay require='node'>
         <div className='center-md'>
           {!importingFromSigner && jsonCard}
-          <br />
+          {spacer}
           {signerCard}
-          <br />
+          {spacer}
           {!importingFromSigner && phraseCard}
-          <br />
           <p>{error}</p>
           <nav className='form-nav -space-around'>
             {currentStep > 1 && (

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

@@ -63,7 +63,7 @@ class CreateAccount extends Component {
     const Steps = this.getSteps(isImport);
 
     return (
-      <div>
+      <React.Fragment>
         <Header
           left={
             // Show back button if we already have some accounts, so we can go back to AccountsList
@@ -98,17 +98,7 @@ class CreateAccount extends Component {
             </div>
           ) : (
             <div className='footer-nav_option'>
-              {isImport ? (
-                <p>
-                  Need to create an account?
-                  <button
-                    className='button -footer'
-                    onClick={this.handleToggleCreateImport}
-                  >
-                    New account
-                  </button>
-                </p>
-              ) : (
+              {isImport ? null : (
                 <p>
                   Already have an account?
                   <button
@@ -122,7 +112,7 @@ class CreateAccount extends Component {
             </div>
           )}
         </nav>
-      </div>
+      </React.Fragment>
     );
   }
 }

packages/fether-react/src/App/App.js

@@ -12,9 +12,7 @@ import {
   Switch
 } from 'react-router-dom';
 import { inject, observer } from 'mobx-react';
-import isElectron from 'is-electron';
 import { Modal } from 'fether-ui';
-import ReactResizeDetector from 'react-resize-detector';
 import semver from 'semver';
 import { version } from '../../package.json';
 
@@ -32,19 +30,10 @@ const currentVersion = version;
 // https://github.com/facebook/create-react-app/issues/3591
 const Router =
   process.env.NODE_ENV === 'production' ? MemoryRouter : BrowserRouter;
-const electron = isElectron() ? window.require('electron') : null;
 
 @inject('onboardingStore', 'parityStore')
 @observer
 class App extends Component {
-  handleResize = (_, height) => {
-    if (!electron) {
-      return;
-    }
-    // Send height to main process
-    electron.ipcRenderer.send('asynchronous-message', 'app-resize', height);
-  };
-
   state = {
     newRelease: false // false | {name, url, ignore}
   };
@@ -120,53 +109,49 @@ class App extends Component {
     // the children, just a <RequireHealthOverlay />.
     if (!api) {
       return (
-        <ReactResizeDetector handleHeight onResize={this.handleResize}>
-          <RequireHealthOverlay fullscreen require='node'>
-            {/* Adding these components to have minimum height on window */}
-            <div className='content'>
-              <div className='window' />
-            </div>
-          </RequireHealthOverlay>
-        </ReactResizeDetector>
+        <RequireHealthOverlay fullscreen require='node'>
+          {/* Adding these components to have minimum height on window */}
+          <div className='content'>
+            <div className='window' />
+          </div>
+        </RequireHealthOverlay>
       );
     }
 
     return (
-      <ReactResizeDetector handleHeight onResize={this.handleResize}>
-        <div className='content'>
-          <div className='window'>
-            <Modal
-              title='New version available'
-              description={newRelease ? `${newRelease.name} was released!` : ''}
-              visible={newRelease && !newRelease.ignore}
-              buttons={this.renderModalLinks()}
-            >
-              <Router>
-                <Switch>
-                  {/* The next line is the homepage */}
-                  <Redirect exact from='/' to='/accounts' />
-                  <Route path='/accounts' component={Accounts} />
-                  <Route path='/onboarding' component={Onboarding} />
-                  <Route path='/tokens/:accountAddress' component={Tokens} />
-                  <Route
-                    path='/whitelist/:accountAddress'
-                    component={Whitelist}
-                  />
-                  <Route
-                    path='/backup/:accountAddress'
-                    component={BackupAccount}
-                  />
-                  <Route
-                    path='/send/:tokenAddress/from/:accountAddress'
-                    component={Send}
-                  />
-                  <Redirect from='*' to='/' />
-                </Switch>
-              </Router>
-            </Modal>
-          </div>
+      <div className='content'>
+        <div className='window'>
+          <Modal
+            title='New version available'
+            description={newRelease ? `${newRelease.name} was released!` : ''}
+            visible={newRelease && !newRelease.ignore}
+            buttons={this.renderModalLinks()}
+          >
+            <Router>
+              <Switch>
+                {/* The next line is the homepage */}
+                <Redirect exact from='/' to='/accounts' />
+                <Route path='/accounts' component={Accounts} />
+                <Route path='/onboarding' component={Onboarding} />
+                <Route path='/tokens/:accountAddress' component={Tokens} />
+                <Route
+                  path='/whitelist/:accountAddress'
+                  component={Whitelist}
+                />
+                <Route
+                  path='/backup/:accountAddress'
+                  component={BackupAccount}
+                />
+                <Route
+                  path='/send/:tokenAddress/from/:accountAddress'
+                  component={Send}
+                />
+                <Redirect from='*' to='/' />
+              </Switch>
+            </Router>
+          </Modal>
         </div>
-      </ReactResizeDetector>
+      </div>
     );
   }
 }

packages/fether-react/src/Onboarding/Onboarding.js

@@ -49,11 +49,11 @@ class Onboarding extends Component {
 
   render () {
     return (
-      <div>
+      <React.Fragment>
         <Header title={<h1>Terms of Use</h1>} />
 
         <div className='window_content'>
-          <div className='box -padded-extra'>
+          <div className='box -padded -scroller'>
             <div className='terms-and-conditions-wrapper'>
               <FetherForm.Field
                 as={ReactMarkdown}
@@ -76,7 +76,7 @@ class Onboarding extends Component {
             </button>
           </div>
         </nav>
-      </div>
+      </React.Fragment>
     );
   }
 }

packages/fether-react/src/Scanner/Scanner.js

@@ -73,19 +73,18 @@ export default class Scanner extends React.PureComponent {
     const size = 300;
 
     return (
-      <div>
+      <React.Fragment>
         {isLoading ? (
           <img alt='loading' src={loading} />
         ) : webcamError ? (
           <p>{webcamError}</p>
         ) : (
           <div>
             <p>{label}</p>
-            <br />
             <QrSigner scan onScan={onScan} size={size} />
           </div>
         )}
-      </div>
+      </React.Fragment>
     );
   }
 }

packages/fether-react/src/Send/ScanSignedTx/ScanSignedTx.js

@@ -76,7 +76,7 @@ class ScanSignedTx extends Component {
               <Card className='-centered'>
                 <Scanner
                   onScan={this.onScanSignedTx}
-                  label='Please show the QR code of the signed transaction on the webcam'
+                  label='Show the signed transaction QR code'
                 />
 
                 {error && <p className='text -standard'>{error}</p>}

packages/fether-react/src/Send/Unlock/Unlock.js

@@ -90,9 +90,7 @@ class Unlock extends Component {
                     render={({ handleSubmit, pristine, submitting }) => (
                       <form onSubmit={handleSubmit}>
                         <div className='text'>
-                          <p>
-                            Enter your password to confirm this transaction.
-                          </p>
+                          <p>Unlock account:</p>
                         </div>
 
                         <Field

packages/fether-react/src/Tokens/Tokens.js

@@ -66,39 +66,40 @@ class Tokens extends PureComponent {
     const { isMenuOpen } = this.state;
 
     return (
-      <div className='tokens'>
-        <div className={isMenuOpen ? 'popup-underlay' : ''} />
-        <AccountHeader
-          address={address}
-          copyAddress
-          name={name}
-          type={type}
-          left={
-            <Link to='/accounts' className='icon -back'>
-              Back
-            </Link>
-          }
-          right={
-            <MenuPopup
-              className='popup-menu-account'
-              horizontalOffset={1}
-              menuItems={this.menuItems()}
-              onClose={this.handleMenuClose}
-              onOpen={this.handleMenuOpen}
-              size='small'
-              trigger={<Clickable className='icon -menu' />}
-            />
-          }
-        />
-
-        <TokensList />
-
+      <React.Fragment>
+        <div className='tokens'>
+          <div className={isMenuOpen ? 'popup-underlay' : ''} />
+          <AccountHeader
+            address={address}
+            copyAddress
+            name={name}
+            type={type}
+            left={
+              <Link to='/accounts' className='icon -back'>
+                Back
+              </Link>
+            }
+            right={
+              <MenuPopup
+                className='popup-menu-account'
+                horizontalOffset={1}
+                menuItems={this.menuItems()}
+                onClose={this.handleMenuClose}
+                onOpen={this.handleMenuOpen}
+                size='small'
+                trigger={<Clickable className='icon -menu' />}
+              />
+            }
+          />
+
+          <TokensList />
+        </div>
         <nav className='footer-nav'>
           <div className='footer-nav_status'>
             <Health />
           </div>
         </nav>
-      </div>
+      </React.Fragment>
     );
   }
 }