Improve UI/UX (#164)

docs/_layouts/default.html

@@ -24,7 +24,7 @@
         </div>
         <div id="navbarMenu" class="navbar-menu">
           <div class="navbar-start">
-            <a class="navbar-item" href="https://webcatalog.onfastspring.com">
+            <a class="navbar-item" target="_blank" href="https://webcatalog.onfastspring.com">
               Store
             </a>
             <div class="navbar-item has-dropdown is-hoverable">
@@ -90,7 +90,7 @@
                 About
               </a>
               |
-              <a href="https://webcatalog.onfastspring.com">
+              <a target="_blank" href="https://webcatalog.onfastspring.com">
                 Store
               </a>
               |

public/libs/create-menu.js

@@ -7,16 +7,12 @@ const {
 
 const aboutWindow = require('../windows/about');
 const addWorkspaceWindow = require('../windows/add-workspace');
-const codeInjectionWindow = require('../windows/code-injection');
-const customUserAgentWindow = require('../windows/custom-user-agent');
-const displayMediaWindow = require('../windows/display-media');
 const editWorkspaceWindow = require('../windows/edit-workspace');
 const goToUrlWindow = require('../windows/go-to-url');
 const licenseRegistrationWindow = require('../windows/license-registration');
 const mainWindow = require('../windows/main');
 const notificationsWindow = require('../windows/notifications');
 const preferencesWindow = require('../windows/preferences');
-const proxyWindow = require('../windows/proxy');
 
 const { getPreference } = require('./preferences');
 const formatBytes = require('./format-bytes');
@@ -183,152 +179,7 @@ function createMenu() {
         { type: 'separator' },
         {
           label: 'Developer Tools',
-          submenu: [
+          submenu: [],
-            {
-              label: 'Main Window',
-              click: () => {
-                const win = mainWindow.get();
-                if (win != null) {
-                  if (win.webContents.isDevToolsOpened()) {
-                    win.webContents.closeDevTools();
-                  } else {
-                    win.webContents.openDevTools({ mode: 'detach' });
-                  }
-                }
-              },
-            },
-            {
-              label: 'About Window',
-              click: () => {
-                const win = aboutWindow.get();
-                if (win != null) {
-                  if (win.webContents.isDevToolsOpened()) {
-                    win.webContents.closeDevTools();
-                  } else {
-                    win.webContents.openDevTools({ mode: 'detach' });
-                  }
-                }
-              },
-            },
-            {
-              label: 'Preferences Window',
-              click: () => {
-                const win = preferencesWindow.get();
-                if (win != null) {
-                  if (win.webContents.isDevToolsOpened()) {
-                    win.webContents.closeDevTools();
-                  } else {
-                    win.webContents.openDevTools({ mode: 'detach' });
-                  }
-                }
-              },
-            },
-            {
-              label: 'Code Injection Window',
-              click: () => {
-                const win = codeInjectionWindow.get();
-                if (win != null) {
-                  if (win.webContents.isDevToolsOpened()) {
-                    win.webContents.closeDevTools();
-                  } else {
-                    win.webContents.openDevTools({ mode: 'detach' });
-                  }
-                }
-              },
-            },
-            {
-              label: 'Custom User Agent Window',
-              click: () => {
-                const win = customUserAgentWindow.get();
-                if (win != null) {
-                  if (win.webContents.isDevToolsOpened()) {
-                    win.webContents.closeDevTools();
-                  } else {
-                    win.webContents.openDevTools({ mode: 'detach' });
-                  }
-                }
-              },
-            },
-            {
-              label: 'Add Workspace Window',
-              click: () => {
-                const win = addWorkspaceWindow.get();
-                if (win != null) {
-                  if (win.webContents.isDevToolsOpened()) {
-                    win.webContents.closeDevTools();
-                  } else {
-                    win.webContents.openDevTools({ mode: 'detach' });
-                  }
-                }
-              },
-            },
-            {
-              label: 'Edit Workspace Window',
-              click: () => {
-                const win = editWorkspaceWindow.get();
-                if (win != null) {
-                  if (win.webContents.isDevToolsOpened()) {
-                    win.webContents.closeDevTools();
-                  } else {
-                    win.webContents.openDevTools({ mode: 'detach' });
-                  }
-                }
-              },
-            },
-            {
-              label: 'Notifications Window',
-              click: () => {
-                const win = notificationsWindow.get();
-                if (win != null) {
-                  if (win.webContents.isDevToolsOpened()) {
-                    win.webContents.closeDevTools();
-                  } else {
-                    win.webContents.openDevTools({ mode: 'detach' });
-                  }
-                }
-              },
-            },
-            {
-              label: 'Display Media Window',
-              click: () => {
-                const win = displayMediaWindow.get();
-                if (win != null) {
-                  if (win.webContents.isDevToolsOpened()) {
-                    win.webContents.closeDevTools();
-                  } else {
-                    win.webContents.openDevTools({ mode: 'detach' });
-                  }
-                }
-              },
-            },
-            {
-              label: 'Go To URL Window',
-              click: () => {
-                const win = goToUrlWindow.get();
-                if (win != null) {
-                  if (win.webContents.isDevToolsOpened()) {
-                    win.webContents.closeDevTools();
-                  } else {
-                    win.webContents.openDevTools({ mode: 'detach' });
-                  }
-                }
-              },
-            },
-            {
-              label: 'Proxy Window',
-              click: () => {
-                const win = proxyWindow.get();
-                if (win != null) {
-                  if (win.webContents.isDevToolsOpened()) {
-                    win.webContents.closeDevTools();
-                  } else {
-                    win.webContents.openDevTools({ mode: 'detach' });
-                  }
-                }
-              },
-            },
-            { type: 'separator' },
-          ],
         },
       ],
     },

public/preload/auth.js

@@ -1 +1,8 @@
 window.mode = 'auth';
+
+const { remote } = require('electron');
+const contextMenu = require('electron-context-menu');
+
+contextMenu({
+  window: remote.getCurrentWindow(),
+});

public/preload/display-media.js

@@ -1 +1,8 @@
 window.mode = 'display-media';
+
+const { remote } = require('electron');
+const contextMenu = require('electron-context-menu');
+
+contextMenu({
+  window: remote.getCurrentWindow(),
+});

public/preload/notifications.js

@@ -1 +1,8 @@
 window.mode = 'notifications';
+
+const { remote } = require('electron');
+const contextMenu = require('electron-context-menu');
+
+contextMenu({
+  window: remote.getCurrentWindow(),
+});

public/preload/open-url-with.js

@@ -1 +1,8 @@
 window.mode = 'open-url-with';
+
+const { remote } = require('electron');
+const contextMenu = require('electron-context-menu');
+
+contextMenu({
+  window: remote.getCurrentWindow(),
+});

public/preload/preferences.js

@@ -1 +1,8 @@
 window.mode = 'preferences';
+
+const { remote } = require('electron');
+const contextMenu = require('electron-context-menu');
+
+contextMenu({
+  window: remote.getCurrentWindow(),
+});

public/windows/about.js

@@ -15,7 +15,7 @@ const create = () => {
 
   win = new BrowserWindow({
     width: 400,
-    height: 360,
+    height: 340,
     resizable: false,
     maximizable: false,
     minimizable: false,

public/windows/auth.js

@@ -18,7 +18,7 @@ const create = (id) => {
 
   wins[id] = new BrowserWindow({
     width: 400,
-    height: 250,
+    height: 220,
     resizable: false,
     maximizable: false,
     minimizable: false,

public/windows/code-injection.js

@@ -20,7 +20,7 @@ const create = (type) => {
 
   win = new BrowserWindow({
     width: 400,
-    height: 400,
+    height: 350,
     resizable: false,
     maximizable: false,
     minimizable: false,

public/windows/custom-user-agent.js

@@ -15,7 +15,7 @@ const create = () => {
 
   win = new BrowserWindow({
     width: 400,
-    height: 200,
+    height: 180,
     resizable: false,
     maximizable: false,
     minimizable: false,

public/windows/edit-workspace.js

@@ -17,7 +17,7 @@ const create = (id) => {
 
   win = new BrowserWindow({
     width: 400,
-    height: 700,
+    height: 650,
     resizable: false,
     maximizable: false,
     minimizable: false,

public/windows/go-to-url.js

@@ -15,7 +15,7 @@ const create = () => {
 
   win = new BrowserWindow({
     width: 400,
-    height: 200,
+    height: 170,
     resizable: false,
     maximizable: false,
     minimizable: false,

public/windows/license-registration.js

@@ -15,7 +15,7 @@ const create = () => {
 
   win = new BrowserWindow({
     width: 400,
-    height: 400,
+    height: 350,
     resizable: false,
     maximizable: false,
     minimizable: false,

src/components/app-wrapper.js

@@ -15,8 +15,6 @@ import connectComponent from '../helpers/connect-component';
 import { updateIsDarkMode, updateIsFullScreen } from '../state/general/actions';
 import { getShouldUseDarkMode } from '../state/general/utils';
 
-const { remote } = window.require('electron');
-
 class AppWrapper extends React.Component {
   constructor(props) {
     super(props);
@@ -27,6 +25,7 @@ class AppWrapper extends React.Component {
   }
 
   componentDidMount() {
+    const { remote } = window.require('electron');
     remote.getCurrentWindow().on('enter-full-screen', this.handleEnterFullScreen);
     remote.getCurrentWindow().on('leave-full-screen', this.handleLeaveFullScreen);
 
@@ -40,6 +39,7 @@ class AppWrapper extends React.Component {
   }
 
   componentWillUnmount() {
+    const { remote } = window.require('electron');
     remote.getCurrentWindow().removeListener('enter-full-screen', this.handleEnterFullScreen);
     remote.getCurrentWindow().removeListener('leave-full-screen', this.handleLeaveFullScreen);
 
@@ -62,6 +62,7 @@ class AppWrapper extends React.Component {
 
   handleChangeTheme() {
     const { onUpdateIsDarkMode } = this.props;
+    const { remote } = window.require('electron');
     onUpdateIsDarkMode(remote.systemPreferences.isDarkMode());
   }
 

src/components/dialog-about/index.js

@@ -9,10 +9,6 @@ import connectComponent from '../../helpers/connect-component';
 
 import { requestOpenInBrowser } from '../../senders';
 
-const { remote } = window.require('electron');
-
-const appVersion = remote.app.getVersion();
-
 const styles = (theme) => ({
   icon: {
     height: 96,
@@ -64,7 +60,7 @@ const About = (props) => {
           variant="body2"
           className={classes.version}
         >
-          {`Version v${appVersion}.`}
+          {`Version v${window.require('electron').remote.app.getVersion()}.`}
         </Typography>
 
         <Button

src/components/dialog-add-workspace/add-custom-app-card.js

@@ -19,6 +19,7 @@ const styles = (theme) => ({
     display: 'flex',
     cursor: 'pointer',
     color: theme.palette.text.primary,
+    border: theme.palette.type === 'dark' ? 'none' : '1px solid rgba(0, 0, 0, 0.12)',
     '&:hover, &:focus': {
       backgroundColor: theme.palette.action.selected,
     },
@@ -57,7 +58,7 @@ const AddCustomAppCard = (props) => {
 
   return (
     <Grid item>
-      <Paper elevation={1} className={classes.card} onClick={() => onUpdateMode('custom')}>
+      <Paper elevation={0} className={classes.card} onClick={() => onUpdateMode('custom')}>
         <div>
           <CreateIcon className={classes.paperIcon} />
         </div>

src/components/dialog-add-workspace/app-card.js

@@ -18,8 +18,6 @@ import StatedMenu from '../shared/stated-menu';
 
 import { updateForm, updateMode } from '../../state/dialog-add-workspace/actions';
 
-const { remote } = window.require('electron');
-
 const styles = (theme) => ({
   card: {
     width: 368,
@@ -27,6 +25,7 @@ const styles = (theme) => ({
     borderRadius: 4,
     padding: theme.spacing(1),
     display: 'flex',
+    border: theme.palette.type === 'dark' ? 'none' : '1px solid rgba(0, 0, 0, 0.12)',
   },
   appName: {
     overflow: 'hidden',
@@ -44,7 +43,7 @@ const styles = (theme) => ({
     width: 48,
     height: 48,
     borderRadius: 8,
-    boxShadow: theme.shadows[1],
+    border: theme.palette.type === 'dark' ? 'none' : '1px solid rgba(0, 0, 0, 0.12)',
   },
   actionContainer: {
     display: 'flex',
@@ -54,7 +53,6 @@ const styles = (theme) => ({
   },
   actionButton: {
     minWidth: 'auto',
-    boxShadow: 'none',
     marginLeft: theme.spacing(1),
   },
   infoContainer: {
@@ -81,7 +79,7 @@ const AppCard = (props) => {
 
   return (
     <Grid item>
-      <Paper elevation={1} className={classes.card}>
+      <Paper elevation={0} className={classes.card}>
         <div>
           <img
             alt={name}
@@ -124,9 +122,10 @@ const AppCard = (props) => {
             color="primary"
             size="medium"
             variant="contained"
+            disableElevation
             onClick={() => {
               requestCreateWorkspace(name, url, icon128);
-              remote.getCurrentWindow().close();
+              window.require('electron').remote.getCurrentWindow().close();
             }}
           >
             Add

src/components/dialog-add-workspace/form.js

@@ -73,15 +73,15 @@ const styles = (theme) => ({
     fontWeight: 500,
     textTransform: 'uppercase',
     userSelect: 'none',
-    boxShadow: theme.shadows[1],
+    border: theme.palette.type === 'dark' ? 'none' : '1px solid rgba(0, 0, 0, 0.12)',
   },
   transparentAvatar: {
     background: 'transparent',
-    boxShadow: 'none',
+    border: 'none',
   },
   avatarPicture: {
-    height: 64,
+    height: '100%',
-    width: 64,
+    width: '100%',
     borderRadius: 4,
   },
   buttonBot: {
@@ -225,7 +225,7 @@ const AddWorkspaceCustom = ({
       </div>
     </div>
     <div>
-      <Button color="primary" variant="contained" className={classes.button} onClick={onSave}>
+      <Button color="primary" variant="contained" disableElevation className={classes.button} onClick={onSave}>
         Add
       </Button>
     </div>

src/components/dialog-add-workspace/index.js

@@ -215,7 +215,7 @@ class AddWorkspace extends React.Component {
           </>
         ) : <Form />}
 
-        <Paper elevation={2} className={classes.paper}>
+        <Paper elevation={1} square className={classes.paper}>
           <BottomNavigation
             showLabels
             value={mode}

src/components/dialog-add-workspace/search-box.js

@@ -94,7 +94,7 @@ class SearchBox extends React.Component {
     );
 
     return (
-      <Paper elevation={2} className={classes.toolbarSearchContainer}>
+      <Paper elevation={1} className={classes.toolbarSearchContainer}>
         <div className={classes.toolbarSectionSearch}>
           <Typography
             className={classes.searchBarText}

src/components/dialog-add-workspace/submit-app-card.js

@@ -18,6 +18,7 @@ const styles = (theme) => ({
     display: 'flex',
     cursor: 'pointer',
     color: theme.palette.text.primary,
+    border: theme.palette.type === 'dark' ? 'none' : '1px solid rgba(0, 0, 0, 0.12)',
     '&:hover, &:focus': {
       backgroundColor: theme.palette.action.selected,
     },
@@ -55,7 +56,7 @@ const SubmitAppCard = (props) => {
 
   return (
     <Grid item>
-      <Paper elevation={1} className={classes.card} onClick={() => requestOpenInBrowser('https://github.com/atomery/singlebox/issues/new?template=app.md&title=app%3A+')}>
+      <Paper elevation={0} className={classes.card} onClick={() => requestOpenInBrowser('https://github.com/atomery/singlebox/issues/new?template=app.md&title=app%3A+')}>
         <div>
           <AddCircleIcon className={classes.paperIcon} />
         </div>

src/components/dialog-auth/index.js

@@ -8,14 +8,12 @@ import connectComponent from '../../helpers/connect-component';
 
 import { updateForm, login } from '../../state/dialog-auth/actions';
 
-const { remote } = window.require('electron');
-
 const styles = (theme) => ({
   root: {
     background: theme.palette.background.paper,
     height: '100vh',
     width: '100vw',
-    padding: theme.spacing(3),
+    padding: theme.spacing(2),
     display: 'flex',
     flexDirection: 'column',
   },
@@ -66,12 +64,12 @@ const Auth = ({
       />
     </div>
     <div>
-      <Button variant="contained" className={classes.button} onClick={() => remote.getCurrentWindow().close()}>
+      <Button color="primary" variant="contained" disableElevation className={classes.button} onClick={onLogin}>
-        Cancel
-      </Button>
-      <Button color="primary" variant="contained" className={classes.button} onClick={onLogin}>
         Sign in
       </Button>
+      <Button variant="contained" disableElevation className={classes.button} onClick={() => window.require('electron').remote.getCurrentWindow().close()}>
+        Cancel
+      </Button>
     </div>
   </div>
 );

src/components/dialog-code-injection/index.js

@@ -13,7 +13,7 @@ const styles = (theme) => ({
     background: theme.palette.background.paper,
     height: '100vh',
     width: '100vw',
-    padding: theme.spacing(3),
+    padding: theme.spacing(2),
     display: 'flex',
     flexDirection: 'column',
   },
@@ -22,6 +22,7 @@ const styles = (theme) => ({
   },
   button: {
     float: 'right',
+    marginLeft: theme.spacing(1),
   },
 });
 
@@ -48,9 +49,12 @@ const CodeInjection = ({
       />
     </div>
     <div>
-      <Button color="primary" variant="contained" className={classes.button} onClick={onSave}>
+      <Button color="primary" variant="contained" disableElevation className={classes.button} onClick={onSave}>
         Save
       </Button>
+      <Button variant="contained" disableElevation className={classes.button} onClick={() => window.require('electron').remote.getCurrentWindow().close()}>
+        Cancel
+      </Button>
     </div>
   </div>
 );

src/components/dialog-custom-user-agent/index.js

@@ -13,7 +13,7 @@ const styles = (theme) => ({
     background: theme.palette.background.paper,
     height: '100vh',
     width: '100vw',
-    padding: theme.spacing(3),
+    padding: theme.spacing(2),
     display: 'flex',
     flexDirection: 'column',
   },
@@ -22,6 +22,7 @@ const styles = (theme) => ({
   },
   button: {
     float: 'right',
+    marginLeft: theme.spacing(1),
   },
 });
 
@@ -48,9 +49,12 @@ const CustomUserAgent = ({
       />
     </div>
     <div>
-      <Button color="primary" variant="contained" className={classes.button} onClick={onSave}>
+      <Button color="primary" variant="contained" disableElevation className={classes.button} onClick={onSave}>
         Save
       </Button>
+      <Button variant="contained" disableElevation className={classes.button} onClick={() => window.require('electron').remote.getCurrentWindow().close()}>
+        Cancel
+      </Button>
     </div>
   </div>
 );

src/components/dialog-edit-workspace/index.js

@@ -31,10 +31,7 @@ const styles = (theme) => ({
     background: theme.palette.background.paper,
     height: '100vh',
     width: '100vw',
-    paddingTop: theme.spacing(3),
+    padding: theme.spacing(2),
-    paddingBottom: theme.spacing(3),
-    paddingLeft: theme.spacing(2),
-    paddingRight: theme.spacing(2),
     display: 'flex',
     flexDirection: 'column',
   },
@@ -43,6 +40,7 @@ const styles = (theme) => ({
   },
   button: {
     float: 'right',
+    marginLeft: theme.spacing(1),
   },
   textField: {
     marginBottom: theme.spacing(3),
@@ -76,15 +74,15 @@ const styles = (theme) => ({
     fontWeight: 500,
     textTransform: 'uppercase',
     userSelect: 'none',
-    boxShadow: theme.shadows[1],
+    border: theme.palette.type === 'dark' ? 'none' : '1px solid rgba(0, 0, 0, 0.12)',
   },
   transparentAvatar: {
     background: 'transparent',
-    boxShadow: 'none',
+    border: 'none',
   },
   avatarPicture: {
-    height: 64,
+    height: '100%',
-    width: 64,
+    width: '100%',
     borderRadius: 4,
   },
   buttonBot: {
@@ -264,9 +262,12 @@ const EditWorkspace = ({
       </List>
     </div>
     <div>
-      <Button color="primary" variant="contained" className={classes.button} onClick={onSave}>
+      <Button color="primary" variant="contained" disableElevation className={classes.button} onClick={onSave}>
         Save
       </Button>
+      <Button variant="contained" disableElevation className={classes.button} onClick={() => window.require('electron').remote.getCurrentWindow().close()}>
+        Cancel
+      </Button>
     </div>
   </div>
 );
@@ -302,14 +303,13 @@ const mapStateToProps = (state) => ({
   disableNotifications: Boolean(state.dialogEditWorkspace.form.disableNotifications),
   downloadingIcon: state.dialogEditWorkspace.downloadingIcon,
   hibernateWhenUnused: Boolean(state.dialogEditWorkspace.form.hibernateWhenUnused),
-  homeUrl: state.dialogEditWorkspace.form.homeUrl,
+  homeUrl: state.dialogEditWorkspace.form.homeUrl || '',
   homeUrlError: state.dialogEditWorkspace.form.homeUrlError,
-  id: state.dialogEditWorkspace.form.id,
+  id: state.dialogEditWorkspace.form.id || '',
   internetIcon: state.dialogEditWorkspace.form.internetIcon,
   isMailApp: Boolean(getMailtoUrl(state.dialogEditWorkspace.form.homeUrl)),
-  name: state.dialogEditWorkspace.form.name,
+  name: state.dialogEditWorkspace.form.name || '',
   nameError: state.dialogEditWorkspace.form.nameError,
-  order: state.dialogEditWorkspace.form.order,
   picturePath: state.dialogEditWorkspace.form.picturePath,
   transparentBackground: Boolean(state.dialogEditWorkspace.form.transparentBackground),
 });

src/components/dialog-go-to-url/index.js

@@ -13,7 +13,7 @@ const styles = (theme) => ({
     background: theme.palette.background.paper,
     height: '100vh',
     width: '100vw',
-    padding: theme.spacing(3),
+    padding: theme.spacing(2),
     display: 'flex',
     flexDirection: 'column',
   },
@@ -22,6 +22,7 @@ const styles = (theme) => ({
   },
   button: {
     float: 'right',
+    marginLeft: theme.spacing(1),
   },
 });
 
@@ -55,9 +56,12 @@ const GoToUrl = ({
       />
     </div>
     <div>
-      <Button color="primary" variant="contained" className={classes.button} onClick={onGo}>
+      <Button color="primary" variant="contained" disableElevation className={classes.button} onClick={onGo}>
         Go
       </Button>
+      <Button variant="contained" disableElevation className={classes.button} onClick={() => window.require('electron').remote.getCurrentWindow().close()}>
+        Cancel
+      </Button>
     </div>
   </div>
 );

src/components/dialog-license-registration/index.js

@@ -3,9 +3,7 @@ import PropTypes from 'prop-types';
 
 import Button from '@material-ui/core/Button';
 import TextField from '@material-ui/core/TextField';
-import DialogContent from '@material-ui/core/DialogContent';
 import DialogContentText from '@material-ui/core/DialogContentText';
-import DialogActions from '@material-ui/core/DialogActions';
 
 import connectComponent from '../../helpers/connect-component';
 
@@ -17,13 +15,26 @@ import {
 import { requestOpenInBrowser } from '../../senders';
 
 const styles = (theme) => ({
-  dialogContentText: {
+  root: {
-    marginTop: theme.spacing(2),
+    background: theme.palette.background.paper,
+    height: '100vh',
+    width: '100vw',
+    padding: theme.spacing(2),
+    display: 'flex',
+    flexDirection: 'column',
   },
-  dialogActions: {
+  flexGrow: {
-    borderTop: `1px solid ${theme.palette.divider}`,
+    flex: 1,
-    margin: 0,
+  },
-    padding: theme.spacing(1),
+  dialogContentText: {
+    marginTop: theme.spacing(1),
+  },
+  actions: {
+    display: 'flex',
+  },
+  button: {
+    float: 'right',
+    marginLeft: theme.spacing(1),
   },
 });
 
@@ -37,8 +48,8 @@ const DialogLicenseRegistration = (props) => {
   } = props;
 
   return (
-    <div>
+    <div className={classes.root}>
-      <DialogContent>
+      <div className={classes.flexGrow}>
         <DialogContentText className={classes.dialogContentText}>
           You are currently running a trial version of Singlebox which only
           lets you add up to two workspaces.
@@ -58,8 +69,8 @@ const DialogLicenseRegistration = (props) => {
           variant="outlined"
           helperText={licenseKeyError || 'If you have already purchased Singlebox from our store, you should have received a license key via email to enter above.'}
         />
-      </DialogContent>
+      </div>
-      <DialogActions className={classes.dialogActions}>
+      <div className={classes.actions}>
         <div style={{ flex: 1 }}>
           <Button
             onClick={() => requestOpenInBrowser('https://webcatalog.onfastspring.com/singlebox/singleboxapp')}
@@ -67,13 +78,21 @@ const DialogLicenseRegistration = (props) => {
             Visit Store...
           </Button>
         </div>
-        <Button
+        <div>
-          color="primary"
+          <Button
-          onClick={onRegister}
+            color="primary"
-        >
+            variant="contained"
-          Register
+            disableElevation
-        </Button>
+            className={classes.button}
-      </DialogActions>
+            onClick={onRegister}
+          >
+            Register
+          </Button>
+          <Button variant="contained" disableElevation className={classes.button} onClick={() => window.require('electron').remote.getCurrentWindow().close()}>
+            Cancel
+          </Button>
+        </div>
+      </div>
     </div>
   );
 };

src/components/dialog-open-url-with/index.js

@@ -13,9 +13,8 @@ import getMailtoUrl from '../../helpers/get-mailto-url';
 
 import { requestLoadUrl } from '../../senders';
 
-const { remote } = window.require('electron');
-
 const OpenUrlWith = ({ workspaces }) => {
+  const { remote } = window.require('electron');
   const incomingUrl = remote.getGlobal('incomingUrl');
   const isMailtoUrl = incomingUrl.startsWith('mailto:');
 

src/components/dialog-preferences/index.js

@@ -57,8 +57,6 @@ import {
   requestShowRequireRestartDialog,
 } from '../../senders';
 
-const { remote } = window.require('electron');
-
 const styles = (theme) => ({
   root: {
     padding: theme.spacing(2),
@@ -70,6 +68,7 @@ const styles = (theme) => ({
   paper: {
     marginTop: theme.spacing(0.5),
     marginBottom: theme.spacing(3),
+    border: theme.palette.type === 'dark' ? 'none' : '1px solid rgba(0, 0, 0, 0.12)',
   },
   timePickerContainer: {
     marginTop: theme.spacing(1),
@@ -228,6 +227,7 @@ const Preferences = ({
   updaterInfo,
   updaterStatus,
 }) => {
+  const { remote } = window.require('electron');
   const sections = {
     general: {
       text: 'General',
@@ -326,7 +326,7 @@ const Preferences = ({
         <Typography variant="subtitle2" className={classes.sectionTitle} ref={sections.general.ref}>
           General
         </Typography>
-        <Paper className={classes.paper}>
+        <Paper elevation={0} className={classes.paper}>
           <List dense disablePadding>
             <StatedMenu
               id="theme"
@@ -486,7 +486,7 @@ const Preferences = ({
         <Typography variant="subtitle2" className={classes.sectionTitle} ref={sections.notifications.ref}>
           Notifications
         </Typography>
-        <Paper className={classes.paper}>
+        <Paper elevation={0} className={classes.paper}>
           <List dense disablePadding>
             <ListItem button onClick={requestShowNotificationsWindow}>
               <ListItemText primary="Control notifications" />
@@ -502,6 +502,8 @@ const Preferences = ({
                     label="from"
                     value={new Date(pauseNotificationsByScheduleFrom)}
                     onChange={(d) => requestSetPreference('pauseNotificationsByScheduleFrom', d.toString())}
+                    onClose={() => { window.preventClosingWindow = false; }}
+                    onOpen={() => { window.preventClosingWindow = true; }}
                     disabled={!pauseNotificationsBySchedule}
                   />
                   <TimePicker
@@ -509,6 +511,8 @@ const Preferences = ({
                     label="to"
                     value={new Date(pauseNotificationsByScheduleTo)}
                     onChange={(d) => requestSetPreference('pauseNotificationsByScheduleTo', d.toString())}
+                    onClose={() => { window.preventClosingWindow = false; }}
+                    onOpen={() => { window.preventClosingWindow = true; }}
                     disabled={!pauseNotificationsBySchedule}
                   />
                 </div>
@@ -566,7 +570,7 @@ const Preferences = ({
         <Typography variant="subtitle2" className={classes.sectionTitle} ref={sections.languages.ref}>
           Languages
         </Typography>
-        <Paper className={classes.paper}>
+        <Paper elevation={0} className={classes.paper}>
           <List dense disablePadding>
             <ListItem>
               <ListItemText primary="Spell check" />
@@ -614,7 +618,7 @@ const Preferences = ({
         <Typography variant="subtitle2" className={classes.sectionTitle} ref={sections.downloads.ref}>
           Downloads
         </Typography>
-        <Paper className={classes.paper}>
+        <Paper elevation={0} className={classes.paper}>
           <List dense disablePadding>
             <ListItem
               button
@@ -656,7 +660,7 @@ const Preferences = ({
         <Typography variant="subtitle2" color="textPrimary" className={classes.sectionTitle} ref={sections.network.ref}>
           Network
         </Typography>
-        <Paper className={classes.paper}>
+        <Paper elevation={0} className={classes.paper}>
           <List disablePadding dense>
             <ListItem button onClick={requestShowProxyWindow}>
               <ListItemText primary="Configure proxy settings (BETA)" />
@@ -668,7 +672,7 @@ const Preferences = ({
         <Typography variant="subtitle2" className={classes.sectionTitle} ref={sections.privacy.ref}>
           Privacy &amp; Security
         </Typography>
-        <Paper className={classes.paper}>
+        <Paper elevation={0} className={classes.paper}>
           <List dense disablePadding>
             <ListItem>
               <ListItemText primary="Block ads &amp; trackers" />
@@ -729,7 +733,7 @@ const Preferences = ({
         <Typography variant="subtitle2" className={classes.sectionTitle} ref={sections.system.ref}>
           System
         </Typography>
-        <Paper className={classes.paper}>
+        <Paper elevation={0} className={classes.paper}>
           <List dense disablePadding>
             {isDefaultMailClient ? (
               <ListItem>
@@ -795,7 +799,7 @@ const Preferences = ({
         <Typography variant="subtitle2" className={classes.sectionTitle} ref={sections.updates.ref}>
           Updates
         </Typography>
-        <Paper className={classes.paper}>
+        <Paper elevation={0} className={classes.paper}>
           <List dense disablePadding>
             <ListItem
               button
@@ -834,7 +838,7 @@ const Preferences = ({
         <Typography variant="subtitle2" className={classes.sectionTitle} ref={sections.advanced.ref}>
           Advanced
         </Typography>
-        <Paper className={classes.paper}>
+        <Paper elevation={0} className={classes.paper}>
           <List dense disablePadding>
             <ListItem>
               <ListItemText
@@ -877,7 +881,7 @@ const Preferences = ({
         <Typography variant="subtitle2" className={classes.sectionTitle} ref={sections.reset.ref}>
           Reset
         </Typography>
-        <Paper className={classes.paper}>
+        <Paper elevation={0} className={classes.paper}>
           <List dense disablePadding>
             <ListItem button onClick={requestResetPreferences}>
               <ListItemText primary="Restore preferences to their original defaults" />
@@ -889,7 +893,7 @@ const Preferences = ({
         <Typography variant="subtitle2" color="textPrimary" className={classes.sectionTitle} ref={sections.atomeryApps.ref}>
           Atomery Apps
         </Typography>
-        <Paper className={classes.paper}>
+        <Paper elevation={0} className={classes.paper}>
           <List disablePadding dense>
             <ListItem button onClick={() => requestOpenInBrowser('https://webcatalogapp.com?utm_source=webcatalog_app')}>
               <ListItemText
@@ -914,14 +918,13 @@ const Preferences = ({
               />
               <ChevronRightIcon color="action" />
             </ListItem>
-            <Divider />
           </List>
         </Paper>
 
         <Typography variant="subtitle2" className={classes.sectionTitle} ref={sections.miscs.ref}>
           Miscellaneous
         </Typography>
-        <Paper className={classes.paper}>
+        <Paper elevation={0} className={classes.paper}>
           <List dense disablePadding>
             <ListItem button onClick={requestShowAboutWindow}>
               <ListItemText primary="About" />

src/components/dialog-proxy/index.js

@@ -3,8 +3,6 @@ import PropTypes from 'prop-types';
 
 import Button from '@material-ui/core/Button';
 import TextField from '@material-ui/core/TextField';
-import DialogContent from '@material-ui/core/DialogContent';
-import DialogActions from '@material-ui/core/DialogActions';
 import Divider from '@material-ui/core/Divider';
 import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
@@ -22,14 +20,20 @@ import {
 import { requestOpenInBrowser } from '../../senders';
 
 const styles = (theme) => ({
+  root: {
+    background: theme.palette.background.paper,
+    height: '100vh',
+    width: '100vw',
+    padding: theme.spacing(2),
+    display: 'flex',
+    flexDirection: 'column',
+  },
+  flexGrow: {
+    flex: 1,
+  },
   dialogContentText: {
     marginTop: theme.spacing(2),
   },
-  dialogActions: {
-    borderTop: `1px solid ${theme.palette.divider}`,
-    margin: 0,
-    padding: theme.spacing(1),
-  },
   link: {
     cursor: 'pointer',
     fontWeight: 500,
@@ -38,6 +42,10 @@ const styles = (theme) => ({
       textDecoration: 'underline',
     },
   },
+  button: {
+    float: 'right',
+    marginLeft: theme.spacing(1),
+  },
   radioLabel: theme.typography.body2,
 });
 
@@ -55,8 +63,8 @@ const DialogProxy = (props) => {
   } = props;
 
   return (
-    <div>
+    <div className={classes.root}>
-      <DialogContent>
+      <div className={classes.flexGrow}>
         <List disablePadding dense>
           <ListItem>
             <div style={{ width: '100%' }}>
@@ -203,16 +211,21 @@ const DialogProxy = (props) => {
             </div>
           </ListItem>
         </List>
-      </DialogContent>
+      </div>
-      <DialogActions className={classes.dialogActions}>
+      <div className={classes.dialogActions}>
         <Button
           color="primary"
           variant="contained"
+          disableElevation
+          className={classes.button}
           onClick={onSave}
         >
           Save
         </Button>
-      </DialogActions>
+        <Button variant="contained" disableElevation className={classes.button} onClick={() => window.require('electron').remote.getCurrentWindow().close()}>
+          Cancel
+        </Button>
+      </div>
     </div>
   );
 };

src/components/main/fake-title-bar.js

@@ -6,8 +6,6 @@ import connectComponent from '../../helpers/connect-component';
 
 const titleBarHeight = 22;
 
-const { remote } = window.require('electron');
-
 const styles = (theme) => ({
   root: {
     background: theme.palette.type === 'dark' ? '#2a2b2c' : 'radial-gradient(7px at 14px 50%, #ff5e57 0px, #ff635a 5px, #fd5249 6px, rgba(255, 255, 255, 0) 7px), radial-gradient(7px at 34px 50%, #ffbd2e 0px, #ffc42f 5px, #fcb91b 6px, rgba(255, 255, 255, 0) 7px), radial-gradient(7px at 54px 50%, #cfcfcf 0px, #d3d3d3 5px, #c6c6c6 6px, rgba(255, 255, 255, 0) 7px), linear-gradient(to top, #cccccc 0%, #d6d6d6 1px, #ebebeb 100%);',
@@ -44,7 +42,7 @@ const FakeTitleBar = (props) => {
     <div
       className={classnames(classes.root, window.mode === 'menubar' && classes.rootMenubar)}
     >
-      {(window.mode === 'main' || window.mode === 'menubar') && title ? title : remote.getCurrentWindow().getTitle()}
+      {(window.mode === 'main' || window.mode === 'menubar') && title ? title : window.require('electron').getCurrentWindow().getTitle()}
     </div>
   );
 };

src/components/main/index.js

@@ -36,8 +36,6 @@ import {
   requestWakeUpWorkspace,
 } from '../../senders';
 
-const { remote } = window.require('electron');
-
 const styles = (theme) => ({
   outerRoot: {
     display: 'flex',
@@ -109,7 +107,7 @@ const styles = (theme) => ({
     textTransform: 'uppercase',
     marginLeft: theme.spacing(1),
     marginRight: theme.spacing(1),
-    boxShadow: theme.shadows[1],
+    border: theme.palette.type === 'dark' ? 'none' : '1px solid rgba(0, 0, 0, 0.12)',
   },
   inlineBlock: {
     display: 'inline-block',
@@ -179,8 +177,8 @@ const SortableItem = sortableElement(({ value }) => {
           });
         }
 
+        const { remote } = window.require('electron');
         const menu = remote.Menu.buildFromTemplate(template);
-
         menu.popup(remote.getCurrentWindow());
       }}
     />
@@ -249,7 +247,7 @@ const Main = ({
                 {shouldPauseNotifications ? <NotificationsPausedIcon /> : <NotificationsIcon />}
               </IconButton>
               {window.mode === 'menubar' && (
-                <IconButton aria-label="Preferences" onClick={requestShowPreferencesWindow} className={classes.iconButton}>
+                <IconButton aria-label="Preferences" onClick={() => requestShowPreferencesWindow()} className={classes.iconButton}>
                   <SettingsIcon />
                 </IconButton>
               )}

src/components/main/navigation-bar.js

@@ -153,7 +153,7 @@ const NavigationBar = ({
           ? <NotificationsPausedIcon className={classes.icon} />
           : <NotificationsIcon className={classes.icon} />}
       </IconButton>
-      <IconButton aria-label="Preferences" className={classes.iconButton} onClick={requestShowPreferencesWindow}>
+      <IconButton aria-label="Preferences" className={classes.iconButton} onClick={() => requestShowPreferencesWindow()}>
         <SettingsIcon className={classes.icon} />
       </IconButton>
     </div>

src/components/main/workspace-selector.js

@@ -42,19 +42,19 @@ const styles = (theme) => ({
     textAlign: 'center',
     fontWeight: 500,
     textTransform: 'uppercase',
-    boxShadow: theme.shadows[1],
+    border: theme.palette.type === 'dark' ? 'none' : '1px solid rgba(0, 0, 0, 0.12)',
   },
   transparentAvatar: {
     background: 'transparent',
-    boxShadow: 'none',
+    border: 'none',
   },
   addAvatar: {
     background: theme.palette.type === 'dark' ? theme.palette.common.white : theme.palette.common.black,
     color: theme.palette.getContrastText(theme.palette.type === 'dark' ? theme.palette.common.white : theme.palette.common.black),
   },
   avatarPicture: {
-    height: 32,
+    height: '100%',
-    width: 32,
+    width: '100%',
     borderRadius: 4,
   },
   shortcutText: {

src/constants/actions.js

@@ -12,6 +12,7 @@ export const UPDATE_SHOW_DATE_TIME_PICKER = 'UPDATE_SHOW_DATE_TIME_PICKER';
 export const SET_WORKSPACE = 'SET_WORKSPACE';
 
 // Edit Workspace
+export const DIALOG_EDIT_WORKSPACE_INIT = 'DIALOG_EDIT_WORKSPACE_INIT';
 export const UPDATE_EDIT_WORKSPACE_FORM = 'UPDATE_EDIT_WORKSPACE_FORM';
 export const UPDATE_EDIT_WORKSPACE_DOWNLOADING_ICON = 'UPDATE_EDIT_WORKSPACE_DOWNLOADING_ICON';
 
@@ -35,8 +36,10 @@ export const UPDATE_FIND_IN_PAGE_MATCHES = 'UPDATE_FIND_IN_PAGE_MATCHES';
 
 // Code Injection
 export const UPDATE_CODE_INJECTION_FORM = 'UPDATE_CODE_INJECTION_FORM';
+export const DIALOG_CODE_INJECTION_INIT = 'DIALOG_CODE_INJECTION_INIT';
 
 // Custom User Agent
+export const DIALOG_CUSTOM_USER_AGENT_INIT = 'DIALOG_CUSTOM_USER_AGENT_INIT';
 export const UPDATE_CUSTOM_USER_AGENT_FORM = 'UPDATE_CUSTOM_USER_AGENT_FORM';
 
 // Go To URL

src/index.js

@@ -7,6 +7,9 @@ import CssBaseline from '@material-ui/core/CssBaseline';
 import 'typeface-roboto/index.css';
 
 import store from './state';
+import { init as initDialogCodeInjection } from './state/dialog-code-injection/actions';
+import { init as initDialogCustomUserAgent } from './state/dialog-custom-user-agent/actions';
+import { init as initDialogEditWorkspace } from './state/dialog-edit-workspace/actions';
 import { init as initDialogProxy } from './state/dialog-proxy/actions';
 
 import AppWrapper from './components/app-wrapper';
@@ -59,9 +62,12 @@ const runApp = () => {
         document.title = 'License Registration';
       } else if (window.mode === 'add-workspace') {
         document.title = 'Add Workspace';
+      } else if (window.mode === 'auth') {
+        document.title = 'Sign In';
       } else if (window.mode === 'preferences') {
         document.title = 'Preferences';
       } else if (window.mode === 'edit-workspace') {
+        store.dispatch(initDialogEditWorkspace());
         const { workspaces } = store.getState();
         const workspaceList = getWorkspacesAsList(workspaces);
         const editWorkspaceId = remote.getGlobal('editWorkspaceId');
@@ -77,15 +83,15 @@ const runApp = () => {
       } else if (window.mode === 'open-url-with') {
         document.title = 'Open Link With';
       } else if (window.mode === 'code-injection') {
+        store.dispatch(initDialogCodeInjection());
         const codeInjectionType = remote.getGlobal('codeInjectionType');
         document.title = `Edit ${codeInjectionType.toUpperCase()} Code Injection`;
-      } else if (window.mode === 'code-injection') {
-        document.title = 'Sign in';
       } else if (window.mode === 'notifications') {
         document.title = 'Notifications';
       } else if (window.mode === 'display-media') {
         document.title = 'Share your Screen';
       } else if (window.mode === 'custom-user-agent') {
+        store.dispatch(initDialogCustomUserAgent());
         document.title = 'Edit Custom User Agent';
       } else if (window.mode === 'go-to-url') {
         document.title = 'Go to URL';
@@ -95,6 +101,17 @@ const runApp = () => {
       } else {
         document.title = 'Singlebox';
       }
+
+      if (window.mode !== 'main' && window.mode !== 'menubar') {
+        document.addEventListener('keydown', (event) => {
+          if (event.key === 'Escape') {
+            if (window.preventClosingWindow) {
+              return;
+            }
+            remote.getCurrentWindow().close();
+          }
+        });
+      }
     });
 
   ReactDOM.render(

src/listeners/index.js

@@ -20,9 +20,9 @@ import {
 import { updateUpdater } from '../state/updater/actions';
 import { requestFindInPage } from '../senders';
 
-const { ipcRenderer } = window.require('electron');
-
 const loadListeners = (store) => {
+  const { ipcRenderer } = window.require('electron');
+
   ipcRenderer.on('log', (e, message) => {
     if (message) console.log(message); // eslint-disable-line no-console
   });

src/state/dialog-add-workspace/actions.js

@@ -21,8 +21,6 @@ import { requestCreateWorkspace } from '../../senders';
 const client = algoliasearch('OQ55YRVMNP', 'fc0fb115b113c21d58ed6a4b4de1565f');
 const index = client.initIndex('apps');
 
-const { ipcRenderer, remote } = window.require('electron');
-
 export const getHits = () => (dispatch, getState) => {
   const state = getState();
 
@@ -112,6 +110,7 @@ const getValidationRules = () => ({
 export const getWebsiteIconUrlAsync = (url) => new Promise((resolve, reject) => {
   try {
     const id = Date.now().toString();
+    const { ipcRenderer } = window.require('electron');
     ipcRenderer.once(id, (e, uurl) => {
       resolve(uurl);
     });
@@ -147,6 +146,7 @@ export const getIconFromInternet = (forceOverwrite) => (dispatch, getState) => {
       }
 
       if (forceOverwrite && !iconUrl) {
+        const { remote } = window.require('electron');
         remote.dialog.showMessageBox(remote.getCurrentWindow(), {
           message: 'Unable to find a suitable icon from the Internet.',
           buttons: ['OK'],
@@ -191,6 +191,7 @@ export const save = () => (dispatch, getState) => {
     form.internetIcon || form.picturePath,
     Boolean(form.transparentBackground),
   );
+  const { remote } = window.require('electron');
   remote.getCurrentWindow().close();
   return null;
 };

src/state/dialog-auth/actions.js

@@ -3,8 +3,6 @@ import { UPDATE_AUTH_FORM } from '../../constants/actions';
 
 import { requestValidateAuthIdentity } from '../../senders';
 
-const { remote } = window.require('electron');
-
 export const updateForm = (changes) => (dispatch) => dispatch({
   type: UPDATE_AUTH_FORM,
   changes,
@@ -15,5 +13,6 @@ export const login = () => (dispatch, getState) => {
 
   const { username, password } = form;
 
+  const { remote } = window.require('electron');
   requestValidateAuthIdentity(remote.getCurrentWindow().id, username, password);
 };

src/state/dialog-code-injection/actions.js

@@ -1,8 +1,10 @@
 
-import { UPDATE_CODE_INJECTION_FORM } from '../../constants/actions';
+import { UPDATE_CODE_INJECTION_FORM, DIALOG_CODE_INJECTION_INIT } from '../../constants/actions';
 import { requestSetPreference, requestShowRequireRestartDialog } from '../../senders';
 
-const { remote } = window.require('electron');
+export const init = () => ({
+  type: DIALOG_CODE_INJECTION_INIT,
+});
 
 export const updateForm = (changes) => (dispatch) => dispatch({
   type: UPDATE_CODE_INJECTION_FORM,
@@ -11,8 +13,9 @@ export const updateForm = (changes) => (dispatch) => dispatch({
 
 export const save = () => (dispatch, getState) => {
   const { form } = getState().dialogCodeInjection;
+  const { remote } = window.require('electron');
 
-  const codeInjectionType = window.require('electron').remote.getGlobal('codeInjectionType');
+  const codeInjectionType = remote.getGlobal('codeInjectionType');
   requestSetPreference(`${codeInjectionType}CodeInjection`, form.code);
 
   requestShowRequireRestartDialog();

src/state/dialog-code-injection/reducers.js

@@ -1,16 +1,17 @@
 import { combineReducers } from 'redux';
 
-import { UPDATE_CODE_INJECTION_FORM } from '../../constants/actions';
+import { UPDATE_CODE_INJECTION_FORM, DIALOG_CODE_INJECTION_INIT } from '../../constants/actions';
 
 import { getPreference } from '../../senders';
 
-const codeInjectionType = window.require('electron').remote.getGlobal('codeInjectionType');
+const form = (state = {}, action) => {
-const defaultForm = {
-  code: getPreference(`${codeInjectionType}CodeInjection`),
-};
-
-const form = (state = defaultForm, action) => {
   switch (action.type) {
+    case DIALOG_CODE_INJECTION_INIT: {
+      const codeInjectionType = window.require('electron').remote.getGlobal('codeInjectionType');
+      return {
+        code: getPreference(`${codeInjectionType}CodeInjection`),
+      };
+    }
     case UPDATE_CODE_INJECTION_FORM: return { ...state, ...action.changes };
     default: return state;
   }

src/state/dialog-custom-user-agent/actions.js

@@ -1,12 +1,14 @@
 
-import { UPDATE_CUSTOM_USER_AGENT_FORM } from '../../constants/actions';
+import { UPDATE_CUSTOM_USER_AGENT_FORM, DIALOG_CUSTOM_USER_AGENT_INIT } from '../../constants/actions';
 import {
   getPreference,
   requestSetPreference,
   requestShowRequireRestartDialog,
 } from '../../senders';
 
-const { remote } = window.require('electron');
+export const init = () => ({
+  type: DIALOG_CUSTOM_USER_AGENT_INIT,
+});
 
 export const updateForm = (changes) => (dispatch) => dispatch({
   type: UPDATE_CUSTOM_USER_AGENT_FORM,
@@ -21,5 +23,6 @@ export const save = () => (dispatch, getState) => {
     requestShowRequireRestartDialog();
   }
 
+  const { remote } = window.require('electron');
   remote.getCurrentWindow().close();
 };

src/state/dialog-custom-user-agent/reducers.js

@@ -1,15 +1,12 @@
 import { combineReducers } from 'redux';
 
-import { UPDATE_CUSTOM_USER_AGENT_FORM } from '../../constants/actions';
+import { UPDATE_CUSTOM_USER_AGENT_FORM, DIALOG_CUSTOM_USER_AGENT_INIT } from '../../constants/actions';
 
 import { getPreference } from '../../senders';
 
-const defaultForm = {
+const form = (state = {}, action) => {
-  code: getPreference('customUserAgent'),
-};
-
-const form = (state = defaultForm, action) => {
   switch (action.type) {
+    case DIALOG_CUSTOM_USER_AGENT_INIT: return { code: getPreference('customUserAgent') };
     case UPDATE_CUSTOM_USER_AGENT_FORM: return { ...state, ...action.changes };
     default: return state;
   }

src/state/dialog-edit-workspace/actions.js

@@ -2,6 +2,7 @@
 import {
   UPDATE_EDIT_WORKSPACE_DOWNLOADING_ICON,
   UPDATE_EDIT_WORKSPACE_FORM,
+  DIALOG_EDIT_WORKSPACE_INIT,
 } from '../../constants/actions';
 
 import hasErrors from '../../helpers/has-errors';
@@ -14,8 +15,6 @@ import {
   requestRemoveWorkspacePicture,
 } from '../../senders';
 
-const { ipcRenderer, remote } = window.require('electron');
-
 const getValidationRules = () => ({
   name: {
     fieldName: 'Name',
@@ -28,11 +27,16 @@ const getValidationRules = () => ({
   },
 });
 
+export const init = () => ({
+  type: DIALOG_EDIT_WORKSPACE_INIT,
+});
+
 // to be replaced with invoke (electron 7+)
 // https://electronjs.org/docs/api/ipc-renderer#ipcrendererinvokechannel-args
 export const getWebsiteIconUrlAsync = (url) => new Promise((resolve, reject) => {
   try {
     const id = Date.now().toString();
+    const { ipcRenderer } = window.require('electron');
     ipcRenderer.once(id, (e, uurl) => {
       resolve(uurl);
     });
@@ -68,6 +72,7 @@ export const getIconFromInternet = (forceOverwrite) => (dispatch, getState) => {
       }
 
       if (forceOverwrite && !iconUrl) {
+        const { remote } = window.require('electron');
         remote.dialog.showMessageBox(remote.getCurrentWindow(), {
           message: 'Unable to find a suitable icon from the Internet.',
           buttons: ['OK'],
@@ -93,6 +98,7 @@ export const save = () => (dispatch, getState) => {
     return dispatch(updateForm(validatedChanges));
   }
 
+  const { remote } = window.require('electron');
   const id = remote.getGlobal('editWorkspaceId');
   const url = form.homeUrl.trim();
   const homeUrl = isUrl(url) ? url : `http://${url}`;

src/state/dialog-edit-workspace/reducers.js

@@ -1,6 +1,7 @@
 import { combineReducers } from 'redux';
 
 import {
+  DIALOG_EDIT_WORKSPACE_INIT,
   UPDATE_EDIT_WORKSPACE_DOWNLOADING_ICON,
   UPDATE_EDIT_WORKSPACE_FORM,
 } from '../../constants/actions';
@@ -8,24 +9,22 @@ import {
 import { getWorkspaces } from '../../senders';
 import getWorkspacesAsList from '../../helpers/get-workspaces-as-list';
 
-let defaultForm = {};
+const form = (state = {}, action) => {
-const editWorkspaceId = window.require('electron').remote.getGlobal('editWorkspaceId');
-if (editWorkspaceId) {
-  const workspaces = getWorkspaces();
-  const workspaceList = getWorkspacesAsList(workspaces);
-  const workspace = workspaces[editWorkspaceId];
-  workspaceList.some((item, index) => {
-    if (item.id === editWorkspaceId) {
-      workspace.order = index;
-      return true;
-    }
-    return false;
-  });
-  defaultForm = workspace;
-}
-
-const form = (state = defaultForm, action) => {
   switch (action.type) {
+    case DIALOG_EDIT_WORKSPACE_INIT: {
+      const editWorkspaceId = window.require('electron').remote.getGlobal('editWorkspaceId');
+      const workspaces = getWorkspaces();
+      const workspaceList = getWorkspacesAsList(workspaces);
+      const workspace = workspaces[editWorkspaceId];
+      workspaceList.some((item, index) => {
+        if (item.id === editWorkspaceId) {
+          workspace.order = index;
+          return true;
+        }
+        return false;
+      });
+      return workspace;
+    }
     case UPDATE_EDIT_WORKSPACE_FORM: return { ...state, ...action.changes };
     default: return state;
   }

src/state/dialog-go-to-url/actions.js

@@ -5,9 +5,6 @@ import isUrl from '../../helpers/is-url';
 import validate from '../../helpers/validate';
 import { requestLoadUrl } from '../../senders';
 
-const { remote } = window.require('electron');
-
-
 const getValidationRules = () => ({
   url: {
     fieldName: 'URL',
@@ -33,6 +30,7 @@ export const go = () => (dispatch, getState) => {
   const finalUrl = isUrl(url) ? url : `http://${url}`;
 
   requestLoadUrl(finalUrl);
+  const { remote } = window.require('electron');
   remote.getCurrentWindow().close();
   return null;
 };

src/state/dialog-license-registration/actions.js

@@ -11,7 +11,6 @@ import {
   requestShowMessageBox,
 } from '../../senders';
 
-const { remote } = window.require('electron');
 
 const getValidationRules = () => ({
   licenseKey: {
@@ -40,6 +39,7 @@ export const register = () => (dispatch, getState) => {
 
   requestShowMessageBox('Registration Complete! Thank you for supporting the future development of Singlebox.');
 
+  const { remote } = window.require('electron');
   remote.getCurrentWindow().close();
   return null;
 };

src/state/notifications/reducers.js

@@ -10,6 +10,7 @@ import { getPauseNotificationsInfo } from '../../senders';
 const showDateTimePicker = (state = false, action) => {
   switch (action.type) {
     case UPDATE_SHOW_DATE_TIME_PICKER: {
+      window.preventClosingWindow = action.showDateTimePicker;
       return action.showDateTimePicker;
     }
     default: