pdf-viewer: Persist webview session.

This passes the partition parameter to the pdf window so that a user don't need to login in order to view the pdf.
pdf-viewer: Show pdf files in a new window.
2025-10-24 00:23:36 +00:00 · 2018-08-29 23:07:36 +05:30 · 2018-08-29 18:28:30 +05:30
94 changed files with 4669 additions and 9285 deletions
--- a/.editorconfig
+++ b/.editorconfig
@@ -2,7 +2,6 @@ root = true

 [*]
 indent_style = tab
-indent_size = 4
 end_of_line = lf
 charset = utf-8
 trim_trailing_whitespace = true
--- a/.gitattributes
+++ b/.gitattributes
@@ -1,16 +1 @@
-* text=auto eol=lf
-
-package-lock.json binary
-app/package-lock.json binary
-*.gif binary
-*.jpg binary
-*.jpeg binary
-*.eot binary
-*.woff binary
-*.woff2 binary
-*.svg binary
-*.ttf binary
-*.png binary
-*.otf binary
-*.tif binary
-*.ogg binary
+* text=auto
--- a/.github/ISSUE_TEMPLATE.md
+++ b/.github/ISSUE_TEMPLATE.md
@@ -2,7 +2,7 @@
 <!-- Please Include: -->
 - **Operating System**:
  - [ ] Windows
-  - [ ] Linux/Ubuntu
+  - [ ] Linux/Ubutnu
  - [ ] macOS
 - **Clear steps to reproduce the issue**:
 - **Relevant error messages and/or screenshots**:
--- a/.gitignore
+++ b/.gitignore
@@ -33,9 +33,6 @@ yarn-error.log*
 config.gypi

 # Test generated files
-# tests/package.json
+tests/package.json

 .python-version
-
-# Ignore all the typescript compiled files
-app/**/*.js
--- a/.htmlhintrc
+++ b/.htmlhintrc
@@ -1,25 +0,0 @@
-{
-  "tagname-lowercase": true,
-  "attr-lowercase": true,
-  "attr-value-double-quotes": true,
-  "attr-value-not-empty": false,
-  "attr-no-duplication": true,
-  "doctype-first": true,
-  "tag-pair": true,
-  "empty-tag-not-self-closed": true,
-  "spec-char-escape": true,
-  "id-unique": true,
-  "src-not-empty": true,
-  "title-require": true,
-  "alt-require": false,
-  "doctype-html5": true,
-  "id-class-value": "dash",
-  "style-disabled": false,
-  "inline-style-disabled": false,
-  "inline-script-disabled": false,
-  "space-tab-mixed-disabled": "space4",
-  "id-class-ad-disabled": false,
-  "href-abs-or-rel": false,
-  "attr-unsafe-chars": true,
-  "head-script-disabled": true
-}
--- a/.stylelintrc
+++ b/.stylelintrc
@@ -1,67 +0,0 @@
-{
-    "rules": {
-        # Stylistic rules for CSS.
-        "function-comma-space-after": "always",
-        "function-comma-space-before": "never",
-        "function-max-empty-lines": 0,
-        "function-whitespace-after": "always",
-
-        "value-keyword-case": "lower",
-        "value-list-comma-newline-after": "always-multi-line",
-        "value-list-comma-space-after": "always-single-line",
-        "value-list-comma-space-before": "never",
-        "value-list-max-empty-lines": 0,
-
-        "unit-case": "lower",
-        "property-case": "lower",
-        "color-hex-case": "lower",
-
-        "declaration-bang-space-before": "always",
-        "declaration-colon-newline-after": "always-multi-line",
-        "declaration-colon-space-after": "always-single-line",
-        "declaration-colon-space-before": "never",
-        "declaration-block-semicolon-newline-after": "always",
-        "declaration-block-semicolon-space-before": "never",
-        "declaration-block-trailing-semicolon": "always",
-
-        "block-closing-brace-empty-line-before": "never",
-        "block-closing-brace-newline-after": "always",
-        "block-closing-brace-newline-before": "always",
-        "block-opening-brace-newline-after": "always",
-        "block-opening-brace-space-before": "always",
-
-        "selector-attribute-brackets-space-inside": "never",
-        "selector-attribute-operator-space-after": "never",
-        "selector-attribute-operator-space-before": "never",
-        "selector-combinator-space-after": "always",
-        "selector-combinator-space-before": "always",
-        "selector-descendant-combinator-no-non-space": true,
-        "selector-pseudo-class-parentheses-space-inside": "never",
-        "selector-pseudo-element-case": "lower",
-        "selector-pseudo-element-colon-notation": "double",
-        "selector-type-case": "lower",
-        "selector-list-comma-newline-after": "always",
-        "selector-list-comma-space-before": "never",
-
-        "media-feature-colon-space-after": "always",
-        "media-feature-colon-space-before": "never",
-        "media-feature-name-case": "lower",
-        "media-feature-parentheses-space-inside": "never",
-        "media-feature-range-operator-space-after": "always",
-        "media-feature-range-operator-space-before": "always",
-        "media-query-list-comma-newline-after": "always",
-        "media-query-list-comma-space-before": "never",
-
-        "at-rule-name-case": "lower",
-        "at-rule-name-space-after": "always",
-        "at-rule-semicolon-newline-after": "always",
-        "at-rule-semicolon-space-before": "never",
-
-        "comment-whitespace-inside": "always",
-        "indentation": 4,
-        
-        # Limit language features
-        "color-no-hex": true,
-        "color-named": "never",
-    }
-}
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -2,20 +2,20 @@

 Thanks for taking the time to contribute!

-The following is a set of guidelines for contributing to Zulip's desktop Client. These are just guidelines, not rules, so use your best judgement and feel free to propose changes to this document in a pull request.
+The following is a set of guidelines for contributing to Zulip Electron Desktop Client. These are just guidelines, not rules, so use your best judgement and feel free to propose changes to this document in a pull request.

 ## Getting Started

-Zulip-Desktop app is built on top of [Electron](http://electron.atom.io/). If you are new to Electron, please head over to [this](https://jlord.dev/blog/essential-electron) great article.
+Zulip-Desktop app is built on top of [Electron](http://electron.atom.io/). If you are new to Electron, please head over to [this](http://jlord.us/essential-electron/) great article.

 ## Community

 * The whole Zulip documentation, such as setting up a development environment, setting up with the Zulip webapp project, and testing, can be read [here](https://zulip.readthedocs.io).

-* If you have any questions regarding zulip-desktop, open an [issue](https://github.com/zulip/zulip-desktop/issues/new/) or ask it on [chat.zulip.org](https://chat.zulip.org/#narrow/stream/16-desktop).
+* If you have any questions regarding zulip-electron, open an [issue](https://github.com/zulip/zulip-electron/issues/new/) or ask it on [chat.zulip.org](https://chat.zulip.org/#narrow/stream/16-desktop).

 ## Issue
-Ensure the bug was not already reported by searching on GitHub under [issues](https://github.com/zulip/zulip-desktop/issues). If you're unable to find an open issue addressing the bug, open a [new issue](https://github.com/zulip/zulip-desktop/issues/new).
+Ensure the bug was not already reported by searching on GitHub under [issues](https://github.com/zulip/zulip-electron/issues). If you're unable to find an open issue addressing the bug, open a [new issue](https://github.com/zulip/zulip-electron/issues/new).

 The [zulipbot](https://github.com/zulip/zulipbot) helps to claim an issue by commenting the following in the comment section: "**@zulipbot** claim". **@zulipbot** will assign you to the issue and label the issue as **in progress**. For more details, check out [**@zulipbot**](https://github.com/zulip/zulipbot).

@@ -38,7 +38,7 @@ For example:


 ## Pull Requests
-Pull Requests are always welcome.
+Pull Requests are always welcome. 

 1. When you edit the code, please run `npm run test` to check the formatting of your code before you `git commit`.
 2. Ensure the PR description clearly describes the problem and solution. It should include:
--- a/README.md
+++ b/README.md
@@ -1,27 +1,32 @@
 # Zulip Desktop Client
-[![Build Status](https://travis-ci.org/zulip/zulip-desktop.svg?branch=master)](https://travis-ci.org/zulip/zulip-desktop)
-[![Windows Build Status](https://ci.appveyor.com/api/projects/status/github/zulip/zulip-desktop?branch=master&svg=true)](https://ci.appveyor.com/project/zulip/zulip-desktop/branch/master)
+[![Build Status](https://travis-ci.org/zulip/zulip-electron.svg?branch=master)](https://travis-ci.org/zulip/zulip-electron)
+[![Windows Build Status](https://ci.appveyor.com/api/projects/status/github/zulip/zulip-electron?branch=master&svg=true)](https://ci.appveyor.com/project/akashnimare/zulip-electron/branch/master)
 [![XO code style](https://img.shields.io/badge/code_style-XO-5ed9c7.svg)](https://github.com/sindresorhus/xo)
-[![project chat](https://img.shields.io/badge/zulip-join_chat-brightgreen.svg)](https://chat.zulip.org)

-Desktop client for Zulip. Available for Mac, Linux, and Windows.
+Desktop client for Zulip. Available for Mac, Linux and Windows.

 <img src="http://i.imgur.com/ChzTq4F.png"/>

 # Download
-Please see the [installation guide](https://zulipchat.com/help/desktop-app-install-guide).
+Please see [installation guide](https://zulipchat.com/help/desktop-app-install-guide).

 # Features
-* Sign in to multiple organizations
-* Desktop notifications with inline reply
-* Tray/dock integration
-* Multi-language spell checker
-* Automatic updates
+* Sign in to multiple teams
+* Desktop Notifications with inline reply support
+* Multilanguage SpellChecker
+* OSX/Win/Linux installers
+* Automatic Updates (macOS/Windows/Linux)
+* Keyboard shortcuts
+
+# Development
+Please see our [development guide](./development.md) to get started and run app locally.

 # Contribute

-First, join us on the [Zulip community server](https://zulip.readthedocs.io/en/latest/contributing/chat-zulip-org.html)!
-Also see our [contribution guidelines](./CONTRIBUTING.md) and our [development guide](./development.md).
+If you want to contribute please make sure to read [our documentation about contributing](./CONTRIBUTING.md) first.
+
+* [Issue Tracker](https://github.com/zulip/zulip-electron/issues)
+* [Source Code](https://github.com/zulip/zulip-electron/)

 # License
 Released under the [Apache-2.0](./LICENSE) license.
--- a/app/main/autoupdater.js
+++ b/app/main/autoupdater.js
@@ -1,19 +1,18 @@
 'use strict';
-import { app, dialog, shell } from 'electron';
-import { autoUpdater } from 'electron-updater';
-import { linuxUpdateNotification } from './linuxupdater';	// Required only in case of linux
+const { app, dialog, shell } = require('electron');
+const { autoUpdater } = require('electron-updater');
+const isDev = require('electron-is-dev');

-import log = require('electron-log');
-import isDev = require('electron-is-dev');
-import ConfigUtil = require('../renderer/js/utils/config-util');
+const ConfigUtil = require('./../renderer/js/utils/config-util.js');

-export function appUpdater(updateFromMenu = false): void {
+function appUpdater(updateFromMenu = false) {
 	// Don't initiate auto-updates in development
 	if (isDev) {
 		return;
 	}

 	if (process.platform === 'linux' && !process.env.APPIMAGE) {
+		const { linuxUpdateNotification } = require('./linuxupdater');
 		linuxUpdateNotification();
 		return;
 	}
@@ -24,6 +23,8 @@ export function appUpdater(updateFromMenu = false): void {
 	const LogsDir = `${app.getPath('userData')}/Logs`;

 	// Log whats happening
+	const log = require('electron-log');
+
 	log.transports.file.file = `${LogsDir}/updates.log`;
 	log.transports.file.level = 'info';
 	autoUpdater.logger = log;
@@ -83,6 +84,7 @@ Current Version: ${app.getVersion()}`
 	});

 	// Ask the user if update is available
+	// eslint-disable-next-line no-unused-vars
 	autoUpdater.on('update-downloaded', event => {
 		// Ask user to update the app
 		dialog.showMessageBox({
@@ -104,3 +106,7 @@ Current Version: ${app.getVersion()}`
 	// Init for updates
 	autoUpdater.checkForUpdates();
 }
+
+module.exports = {
+	appUpdater
+};
--- a/app/main/index.js
+++ b/app/main/index.js
@@ -0,0 +1,319 @@
+'use strict';
+const path = require('path');
+const electron = require('electron');
+const windowStateKeeper = require('electron-window-state');
+const isDev = require('electron-is-dev');
+const appMenu = require('./menu');
+const { appUpdater } = require('./autoupdater');
+
+const { setAutoLaunch } = require('./startup');
+
+const { app, ipcMain } = electron;
+
+const BadgeSettings = require('./../renderer/js/pages/preference/badge-settings.js');
+const ConfigUtil = require('./../renderer/js/utils/config-util.js');
+const ProxyUtil = require('./../renderer/js/utils/proxy-util.js');
+const { sentryInit } = require('./../renderer/js/utils/sentry-util.js');
+
+// Adds debug features like hotkeys for triggering dev tools and reload
+// in development mode
+if (isDev) {
+	require('electron-debug')();
+}
+
+// Prevent window being garbage collected
+let mainWindow;
+let badgeCount;
+
+let isQuitting = false;
+
+// Load this url in main window
+const mainURL = 'file://' + path.join(__dirname, '../renderer', 'main.html');
+
+const isAlreadyRunning = app.makeSingleInstance(() => {
+	if (mainWindow) {
+		if (mainWindow.isMinimized()) {
+			mainWindow.restore();
+		}
+
+		mainWindow.show();
+	}
+});
+
+if (isAlreadyRunning) {
+	return app.quit();
+}
+
+const APP_ICON = path.join(__dirname, '../resources', 'Icon');
+
+const iconPath = () => {
+	return APP_ICON + (process.platform === 'win32' ? '.ico' : '.png');
+};
+
+function createMainWindow() {
+	// Load the previous state with fallback to defaults
+	const mainWindowState = windowStateKeeper({
+		defaultWidth: 1100,
+		defaultHeight: 720,
+		path: `${app.getPath('userData')}/config`
+	});
+
+	// Let's keep the window position global so that we can access it in other process
+	global.mainWindowState = mainWindowState;
+
+	const win = new electron.BrowserWindow({
+		// This settings needs to be saved in config
+		title: 'Zulip',
+		icon: iconPath(),
+		x: mainWindowState.x,
+		y: mainWindowState.y,
+		width: mainWindowState.width,
+		height: mainWindowState.height,
+		minWidth: 300,
+		minHeight: 400,
+		webPreferences: {
+			plugins: true,
+			nodeIntegration: true,
+			partition: 'persist:webviewsession'
+		},
+		show: false
+	});
+
+	win.on('focus', () => {
+		win.webContents.send('focus');
+	});
+
+	win.once('ready-to-show', () => {
+		if (ConfigUtil.getConfigItem('startMinimized')) {
+			win.minimize();
+		} else {
+			win.show();
+		}
+	});
+
+	win.loadURL(mainURL);
+
+	// Keep the app running in background on close event
+	win.on('close', e => {
+		if (!isQuitting) {
+			e.preventDefault();
+
+			if (process.platform === 'darwin') {
+				app.hide();
+			} else {
+				win.hide();
+			}
+		}
+	});
+
+	win.setTitle('Zulip');
+
+	win.on('enter-full-screen', () => {
+		win.webContents.send('enter-fullscreen');
+	});
+
+	win.on('leave-full-screen', () => {
+		win.webContents.send('leave-fullscreen');
+	});
+
+	//  To destroy tray icon when navigate to a new URL
+	win.webContents.on('will-navigate', e => {
+		if (e) {
+			win.webContents.send('destroytray');
+		}
+	});
+
+	// Let us register listeners on the window, so we can update the state
+	// automatically (the listeners will be removed when the window is closed)
+	// and restore the maximized or full screen state
+	mainWindowState.manage(win);
+
+	return win;
+}
+
+// Decrease load on GPU (experimental)
+app.disableHardwareAcceleration();
+
+// Temporary fix for Electron render colors differently
+// More info here - https://github.com/electron/electron/issues/10732
+app.commandLine.appendSwitch('force-color-profile', 'srgb');
+
+// eslint-disable-next-line max-params
+app.on('certificate-error', (event, webContents, url, error, certificate, callback) => {
+	event.preventDefault();
+	callback(true);
+});
+
+app.on('activate', () => {
+	if (!mainWindow) {
+		mainWindow = createMainWindow();
+	}
+});
+
+app.on('ready', () => {
+	appMenu.setMenu({
+		tabs: []
+	});
+	mainWindow = createMainWindow();
+
+	// Initialize sentry for main process
+	sentryInit();
+
+	const isSystemProxy = ConfigUtil.getConfigItem('useSystemProxy');
+
+	if (isSystemProxy) {
+		ProxyUtil.resolveSystemProxy(mainWindow);
+	}
+
+	const page = mainWindow.webContents;
+
+	page.on('dom-ready', () => {
+		if (ConfigUtil.getConfigItem('startMinimized')) {
+			mainWindow.minimize();
+		} else {
+			mainWindow.show();
+		}
+	});
+
+	page.once('did-frame-finish-load', () => {
+		// Initiate auto-updates on MacOS and Windows
+		if (ConfigUtil.getConfigItem('autoUpdate')) {
+			appUpdater();
+		}
+	});
+
+	// Temporarily remove this event
+	// electron.powerMonitor.on('resume', () => {
+	// 	mainWindow.reload();
+	// 	page.send('destroytray');
+	// });
+
+	ipcMain.on('focus-app', () => {
+		mainWindow.show();
+	});
+
+	ipcMain.on('quit-app', () => {
+		app.quit();
+	});
+
+	// Show pdf in a new BrowserWindow
+	ipcMain.on('pdf-view', (event, url) => {
+		// Paddings for pdfWindow so that it fits into the main browserWindow
+		const paddingWidth = 55;
+		const paddingHeight = 22;
+
+		// Get the config of main browserWindow
+		const mainWindowState = global.mainWindowState;
+
+		// Window to view the pdf file
+		const pdfWindow = new electron.BrowserWindow({
+			x: mainWindowState.x + paddingWidth,
+			y: mainWindowState.y + paddingHeight,
+			width: mainWindowState.width - paddingWidth,
+			height: mainWindowState.height - paddingHeight,
+			webPreferences: {
+				plugins: true,
+				partition: 'persist:webviewsession'
+			}
+		});
+		pdfWindow.loadURL(url);
+	});
+
+	// Reload full app not just webview, useful in debugging
+	ipcMain.on('reload-full-app', () => {
+		mainWindow.reload();
+		page.send('destroytray');
+	});
+
+	ipcMain.on('clear-app-settings', () => {
+		global.mainWindowState.unmanage(mainWindow);
+		app.relaunch();
+		app.exit();
+	});
+
+	ipcMain.on('toggle-app', () => {
+		if (mainWindow.isVisible()) {
+			mainWindow.hide();
+		} else {
+			mainWindow.show();
+		}
+	});
+
+	ipcMain.on('toggle-badge-option', () => {
+		BadgeSettings.updateBadge(badgeCount, mainWindow);
+	});
+
+	ipcMain.on('update-badge', (event, messageCount) => {
+		badgeCount = messageCount;
+		BadgeSettings.updateBadge(badgeCount, mainWindow);
+		page.send('tray', messageCount);
+	});
+
+	ipcMain.on('update-taskbar-icon', (event, data, text) => {
+		BadgeSettings.updateTaskbarIcon(data, text, mainWindow);
+	});
+
+	ipcMain.on('forward-message', (event, listener, ...params) => {
+		page.send(listener, ...params);
+	});
+
+	ipcMain.on('update-menu', (event, props) => {
+		appMenu.setMenu(props);
+	});
+
+	ipcMain.on('toggleAutoLauncher', (event, AutoLaunchValue) => {
+		setAutoLaunch(AutoLaunchValue);
+	});
+
+	ipcMain.on('downloadFile', (event, url, downloadPath) => {
+		page.downloadURL(url);
+		page.session.once('will-download', (event, item) => {
+			const filePath = path.join(downloadPath, item.getFilename());
+			item.setSavePath(filePath);
+			item.on('updated', (event, state) => {
+				switch (state) {
+					case 'interrupted': {
+						// Can interrupted to due to network error, cancel download then
+						console.log('Download interrupted, cancelling and fallback to dialog download.');
+						item.cancel();
+						break;
+					}
+					case 'progressing': {
+						if (item.isPaused()) {
+							item.cancel();
+						}
+						// This event can also be used to show progres in percentage in future.
+						break;
+					}
+					default: {
+						console.info('Unknown updated state of download item');
+					}
+				}
+			});
+			item.once('done', (event, state) => {
+				if (state === 'completed') {
+					page.send('downloadFileCompleted', item.getSavePath(), item.getFilename());
+				} else {
+					console.log('Download failed state: ', state);
+					page.send('downloadFileFailed');
+				}
+				// To stop item for listening to updated events of this file
+				item.removeAllListeners('updated');
+			});
+		});
+	});
+
+	ipcMain.on('realm-icon-changed', (event, serverURL, iconURL) => {
+		page.send('update-realm-icon', serverURL, iconURL);
+	});
+});
+
+app.on('before-quit', () => {
+	isQuitting = true;
+});
+
+// Send crash reports
+process.on('uncaughtException', err => {
+	console.error(err);
+	console.error(err.stack);
+});
--- a/app/main/index.ts
+++ b/app/main/index.ts
@@ -1,375 +0,0 @@
-'use strict';
-import { sentryInit } from '../renderer/js/utils/sentry-util';
-import { appUpdater } from './autoupdater';
-import { setAutoLaunch } from './startup';
-
-import windowStateKeeper = require('electron-window-state');
-import path = require('path');
-import fs = require('fs');
-import isDev = require('electron-is-dev');
-import electron = require('electron');
-const { app, ipcMain } = electron;
-
-import AppMenu = require('./menu');
-import BadgeSettings = require('../renderer/js/pages/preference/badge-settings');
-import ConfigUtil = require('../renderer/js/utils/config-util');
-import ProxyUtil = require('../renderer/js/utils/proxy-util');
-
-interface PatchedGlobal extends NodeJS.Global {
-	mainWindowState: windowStateKeeper.State;
-}
-
-const globalPatched = global as PatchedGlobal;
-
-// Adds debug features like hotkeys for triggering dev tools and reload
-// in development mode
-if (isDev) {
-	require('electron-debug')();
-}
-
-// Prevent window being garbage collected
-let mainWindow: Electron.BrowserWindow;
-let badgeCount: number;
-
-let isQuitting = false;
-
-// Load this url in main window
-const mainURL = 'file://' + path.join(__dirname, '../renderer', 'main.html');
-
-const singleInstanceLock = app.requestSingleInstanceLock();
-if (singleInstanceLock) {
-	app.on('second-instance', () => {
-		if (mainWindow) {
-			if (mainWindow.isMinimized()) {
-				mainWindow.restore();
-			}
-
-			mainWindow.show();
-		}
-	});
-} else {
-	app.quit();
-}
-
-const APP_ICON = path.join(__dirname, '../resources', 'Icon');
-
-const iconPath = (): string => {
-	return APP_ICON + (process.platform === 'win32' ? '.ico' : '.png');
-};
-
-function createMainWindow(): Electron.BrowserWindow {
-	// Load the previous state with fallback to defaults
-	const mainWindowState: windowStateKeeper.State = windowStateKeeper({
-		defaultWidth: 1100,
-		defaultHeight: 720,
-		path: `${app.getPath('userData')}/config`
-	});
-
-	// Let's keep the window position global so that we can access it in other process
-	globalPatched.mainWindowState = mainWindowState;
-
-	const win = new electron.BrowserWindow({
-		// This settings needs to be saved in config
-		title: 'Zulip',
-		icon: iconPath(),
-		x: mainWindowState.x,
-		y: mainWindowState.y,
-		width: mainWindowState.width,
-		height: mainWindowState.height,
-		minWidth: 300,
-		minHeight: 400,
-		webPreferences: {
-			plugins: true,
-			nodeIntegration: true,
-			partition: 'persist:webviewsession'
-		},
-		show: false
-	});
-
-	win.on('focus', () => {
-		win.webContents.send('focus');
-	});
-
-	win.loadURL(mainURL);
-
-	// Keep the app running in background on close event
-	win.on('close', e => {
-		if (!isQuitting) {
-			e.preventDefault();
-
-			if (process.platform === 'darwin') {
-				app.hide();
-			} else {
-				win.hide();
-			}
-		}
-	});
-
-	win.setTitle('Zulip');
-
-	win.on('enter-full-screen', () => {
-		win.webContents.send('enter-fullscreen');
-	});
-
-	win.on('leave-full-screen', () => {
-		win.webContents.send('leave-fullscreen');
-	});
-
-	//  To destroy tray icon when navigate to a new URL
-	win.webContents.on('will-navigate', e => {
-		if (e) {
-			win.webContents.send('destroytray');
-		}
-	});
-
-	// Let us register listeners on the window, so we can update the state
-	// automatically (the listeners will be removed when the window is closed)
-	// and restore the maximized or full screen state
-	mainWindowState.manage(win);
-
-	return win;
-}
-
-// Decrease load on GPU (experimental)
-app.disableHardwareAcceleration();
-
-// Temporary fix for Electron render colors differently
-// More info here - https://github.com/electron/electron/issues/10732
-app.commandLine.appendSwitch('force-color-profile', 'srgb');
-
-// eslint-disable-next-line max-params
-app.on('certificate-error', (event: Event, _webContents: Electron.WebContents, _url: string, _error: string, _certificate: any, callback) => {
-	event.preventDefault();
-	callback(true);
-});
-
-app.on('activate', () => {
-	if (!mainWindow) {
-		mainWindow = createMainWindow();
-	}
-});
-
-app.on('ready', () => {
-	AppMenu.setMenu({
-		tabs: []
-	});
-	mainWindow = createMainWindow();
-
-	// Auto-hide menu bar on Windows + Linux
-	if (process.platform !== 'darwin') {
-		const shouldHideMenu = ConfigUtil.getConfigItem('autoHideMenubar') || false;
-		mainWindow.setAutoHideMenuBar(shouldHideMenu);
-		mainWindow.setMenuBarVisibility(!shouldHideMenu);
-	}
-
-	// Initialize sentry for main process
-	const errorReporting = ConfigUtil.getConfigItem('errorReporting');
-	if (errorReporting) {
-		sentryInit();
-	}
-
-	const isSystemProxy = ConfigUtil.getConfigItem('useSystemProxy');
-
-	if (isSystemProxy) {
-		ProxyUtil.resolveSystemProxy(mainWindow);
-	}
-
-	const page = mainWindow.webContents;
-
-	page.on('dom-ready', () => {
-		if (ConfigUtil.getConfigItem('startMinimized')) {
-			mainWindow.hide();
-		} else {
-			mainWindow.show();
-		}
-	});
-
-	page.once('did-frame-finish-load', () => {
-		// Initiate auto-updates on MacOS and Windows
-		if (ConfigUtil.getConfigItem('autoUpdate')) {
-			appUpdater();
-		}
-	});
-
-	// Temporarily remove this event
-	// electron.powerMonitor.on('resume', () => {
-	// 	mainWindow.reload();
-	// 	page.send('destroytray');
-	// });
-
-	ipcMain.on('focus-app', () => {
-		mainWindow.show();
-	});
-
-	ipcMain.on('quit-app', () => {
-		app.quit();
-	});
-
-	// Code to show pdf in a new BrowserWindow (currently commented out due to bug-upstream)
-	// ipcMain.on('pdf-view', (event, url) => {
-	// 	// Paddings for pdfWindow so that it fits into the main browserWindow
-	// 	const paddingWidth = 55;
-	// 	const paddingHeight = 22;
-
-	// 	// Get the config of main browserWindow
-	// 	const mainWindowState = global.mainWindowState;
-
-	// 	// Window to view the pdf file
-	// 	const pdfWindow = new electron.BrowserWindow({
-	// 		x: mainWindowState.x + paddingWidth,
-	// 		y: mainWindowState.y + paddingHeight,
-	// 		width: mainWindowState.width - paddingWidth,
-	// 		height: mainWindowState.height - paddingHeight,
-	// 		webPreferences: {
-	// 			plugins: true,
-	// 			partition: 'persist:webviewsession'
-	// 		}
-	// 	});
-	// 	pdfWindow.loadURL(url);
-
-	// 	// We don't want to have the menu bar in pdf window
-	// 	pdfWindow.setMenu(null);
-	// });
-
-	// Reload full app not just webview, useful in debugging
-	ipcMain.on('reload-full-app', () => {
-		mainWindow.reload();
-		page.send('destroytray');
-	});
-
-	ipcMain.on('clear-app-settings', () => {
-		globalPatched.mainWindowState.unmanage();
-		app.relaunch();
-		app.exit();
-	});
-
-	ipcMain.on('toggle-app', () => {
-		if (!mainWindow.isVisible() || mainWindow.isMinimized()) {
-			mainWindow.show();
-		} else {
-			mainWindow.hide();
-		}
-	});
-
-	ipcMain.on('toggle-badge-option', () => {
-		BadgeSettings.updateBadge(badgeCount, mainWindow);
-	});
-
-	ipcMain.on('toggle-menubar', (_event: Electron.IpcMessageEvent, showMenubar: boolean) => {
-		mainWindow.setAutoHideMenuBar(showMenubar);
-		mainWindow.setMenuBarVisibility(!showMenubar);
-		page.send('toggle-autohide-menubar', showMenubar, true);
-	});
-
-	ipcMain.on('update-badge', (_event: Electron.IpcMessageEvent, messageCount: number) => {
-		badgeCount = messageCount;
-		BadgeSettings.updateBadge(badgeCount, mainWindow);
-		page.send('tray', messageCount);
-	});
-
-	ipcMain.on('update-taskbar-icon', (_event: Electron.IpcMessageEvent, data: any, text: string) => {
-		BadgeSettings.updateTaskbarIcon(data, text, mainWindow);
-	});
-
-	ipcMain.on('forward-message', (_event: Electron.IpcMessageEvent, listener: any, ...params: any[]) => {
-		page.send(listener, ...params);
-	});
-
-	ipcMain.on('update-menu', (_event: Electron.IpcMessageEvent, props: any) => {
-		AppMenu.setMenu(props);
-		const activeTab = props.tabs[props.activeTabIndex];
-		if (activeTab) {
-			mainWindow.setTitle(`Zulip - ${activeTab.webview.props.name}`);
-		}
-	});
-
-	ipcMain.on('toggleAutoLauncher', (_event: Electron.IpcMessageEvent, AutoLaunchValue: boolean) => {
-		setAutoLaunch(AutoLaunchValue);
-	});
-
-	ipcMain.on('downloadFile', (_event: Electron.IpcMessageEvent, url: string, downloadPath: string) => {
-		page.downloadURL(url);
-		page.session.once('will-download', (_event: Event, item) => {
-			const filePath = path.join(downloadPath, item.getFilename());
-
-			const getTimeStamp = (): any => {
-				const date = new Date();
-				return date.getTime();
-			};
-
-			const formatFile = (filePath: string): string => {
-				const fileExtension = path.extname(filePath);
-				const baseName = path.basename(filePath, fileExtension);
-				return `${baseName}-${getTimeStamp()}${fileExtension}`;
-			};
-
-			// Update the name and path of the file if it already exists
-
-			const updatedFilePath = path.join(downloadPath, formatFile(filePath));
-
-			const setFilePath = fs.existsSync(filePath) ? updatedFilePath : filePath;
-
-			item.setSavePath(setFilePath);
-
-			item.on('updated', (_event: Event, state) => {
-				switch (state) {
-					case 'interrupted': {
-						// Can interrupted to due to network error, cancel download then
-						console.log('Download interrupted, cancelling and fallback to dialog download.');
-						item.cancel();
-						break;
-					}
-					case 'progressing': {
-						if (item.isPaused()) {
-							item.cancel();
-						}
-						// This event can also be used to show progress in percentage in future.
-						break;
-					}
-					default: {
-						console.info('Unknown updated state of download item');
-					}
-				}
-			});
-			item.once('done', (_event: Event, state) => {
-				const getFileName = fs.existsSync(filePath) ? formatFile(filePath) : item.getFilename();
-				if (state === 'completed') {
-					page.send('downloadFileCompleted', item.getSavePath(), getFileName);
-				} else {
-					console.log('Download failed state: ', state);
-					page.send('downloadFileFailed');
-				}
-				// To stop item for listening to updated events of this file
-				item.removeAllListeners('updated');
-			});
-		});
-	});
-
-	ipcMain.on('realm-name-changed', (_event: Electron.IpcMessageEvent, serverURL: string, realmName: string) => {
-		page.send('update-realm-name', serverURL, realmName);
-	});
-
-	ipcMain.on('realm-icon-changed', (_event: Electron.IpcMessageEvent, serverURL: string, iconURL: string) => {
-		page.send('update-realm-icon', serverURL, iconURL);
-	});
-
-	// Using event.sender.send instead of page.send here to
-	// make sure the value of errorReporting is sent only once on load.
-	ipcMain.on('error-reporting', (event: Electron.IpcMessageEvent) => {
-		event.sender.send('error-reporting-val', errorReporting);
-	});
-
-	ipcMain.on('save-last-tab', (_event: Electron.IpcMessageEvent, index: number) => {
-		ConfigUtil.setConfigItem('lastActiveTab', index);
-	});
-});
-
-app.on('before-quit', () => {
-	isQuitting = true;
-});
-
-// Send crash reports
-process.on('uncaughtException', err => {
-	console.error(err);
-	console.error(err.stack);
-});
--- a/app/main/linuxupdater.js
+++ b/app/main/linuxupdater.js
@@ -1,30 +1,30 @@
-import { app, Notification } from 'electron';
+const { app } = require('electron');
+const { Notification } = require('electron');

-import request = require('request');
-import semver = require('semver');
-import ConfigUtil = require('../renderer/js/utils/config-util');
-import ProxyUtil = require('../renderer/js/utils/proxy-util');
-import LinuxUpdateUtil = require('../renderer/js/utils/linux-update-util');
-import Logger = require('../renderer/js/utils/logger-util');
+const request = require('request');
+const semver = require('semver');
+const ConfigUtil = require('../renderer/js/utils/config-util');
+const ProxyUtil = require('../renderer/js/utils/proxy-util');
+const LinuxUpdateUtil = require('../renderer/js/utils/linux-update-util');
+const Logger = require('../renderer/js/utils/logger-util');

 const logger = new Logger({
 	file: 'linux-update-util.log',
 	timestamp: true
 });

-export function linuxUpdateNotification(): void {
-	let	url = 'https://api.github.com/repos/zulip/zulip-desktop/releases';
+function linuxUpdateNotification() {
+	let	url = 'https://api.github.com/repos/zulip/zulip-electron/releases';
 	url = ConfigUtil.getConfigItem('betaUpdate') ? url : url + '/latest';
 	const proxyEnabled = ConfigUtil.getConfigItem('useManualProxy') || ConfigUtil.getConfigItem('useSystemProxy');

 	const options = {
 		url,
 		headers: {'User-Agent': 'request'},
-		proxy: proxyEnabled ? ProxyUtil.getProxy(url) : '',
-		ecdhCurve: 'auto'
+		proxy: proxyEnabled ? ProxyUtil.getProxy(url) : ''
 	};

-	request(options, (error: any, response: any, body: any) => {
+	request(options, (error, response, body) => {
 		if (error) {
 			logger.error('Linux update error.');
 			logger.error(error);
@@ -46,3 +46,7 @@ export function linuxUpdateNotification(): void {
 		}
 	});
 }
+
+module.exports = {
+	linuxUpdateNotification
+};
--- a/app/main/menu.js
+++ b/app/main/menu.js
@@ -0,0 +1,474 @@
+'use strict';
+const path = require('path');
+
+const { app, shell, BrowserWindow, Menu, dialog } = require('electron');
+
+const fs = require('fs-extra');
+const AdmZip = require('adm-zip');
+const { appUpdater } = require('./autoupdater');
+
+const ConfigUtil = require(__dirname + '/../renderer/js/utils/config-util.js');
+const DNDUtil = require(__dirname + '/../renderer/js/utils/dnd-util.js');
+const Logger = require(__dirname + '/../renderer/js/utils/logger-util.js');
+
+const appName = app.getName();
+
+const logger = new Logger({
+	file: 'errors.log',
+	timestamp: true
+});
+
+class AppMenu {
+	getHistorySubmenu() {
+		return [{
+			label: 'Back',
+			accelerator: process.platform === 'darwin' ? 'Command+Left' : 'Alt+Left',
+			click(item, focusedWindow) {
+				if (focusedWindow) {
+					AppMenu.sendAction('back');
+				}
+			}
+		}, {
+			label: 'Forward',
+			accelerator: process.platform === 'darwin' ? 'Command+Right' : 'Alt+Right',
+			click(item, focusedWindow) {
+				if (focusedWindow) {
+					AppMenu.sendAction('forward');
+				}
+			}
+		}];
+	}
+
+	getViewSubmenu() {
+		return [{
+			label: 'Reload',
+			accelerator: 'CommandOrControl+R',
+			click(item, focusedWindow) {
+				if (focusedWindow) {
+					AppMenu.sendAction('reload-current-viewer');
+				}
+			}
+		}, {
+			label: 'Hard Reload',
+			accelerator: 'CommandOrControl+Shift+R',
+			click(item, focusedWindow) {
+				if (focusedWindow) {
+					AppMenu.sendAction('hard-reload');
+				}
+			}
+		}, {
+			type: 'separator'
+		}, {
+			role: 'togglefullscreen'
+		}, {
+			label: 'Zoom In',
+			accelerator: process.platform === 'darwin' ? 'Command+Plus' : 'Control+=',
+			click(item, focusedWindow) {
+				if (focusedWindow) {
+					AppMenu.sendAction('zoomIn');
+				}
+			}
+		}, {
+			label: 'Zoom Out',
+			accelerator: 'CommandOrControl+-',
+			click(item, focusedWindow) {
+				if (focusedWindow) {
+					AppMenu.sendAction('zoomOut');
+				}
+			}
+		}, {
+			label: 'Actual Size',
+			accelerator: 'CommandOrControl+0',
+			click(item, focusedWindow) {
+				if (focusedWindow) {
+					AppMenu.sendAction('zoomActualSize');
+				}
+			}
+		}, {
+			type: 'separator'
+		}, {
+			label: 'Toggle Tray Icon',
+			click(item, focusedWindow) {
+				if (focusedWindow) {
+					focusedWindow.webContents.send('toggletray');
+				}
+			}
+		}, {
+			label: 'Toggle Sidebar',
+			accelerator: 'CommandOrControl+Shift+S',
+			click(item, focusedWindow) {
+				if (focusedWindow) {
+					const newValue = !ConfigUtil.getConfigItem('showSidebar');
+					focusedWindow.webContents.send('toggle-sidebar', newValue);
+					ConfigUtil.setConfigItem('showSidebar', newValue);
+				}
+			}
+		}, {
+			label: 'Toggle DevTools for Zulip App',
+			accelerator: process.platform === 'darwin' ? 'Alt+Command+I' : 'Ctrl+Shift+I',
+			click(item, focusedWindow) {
+				if (focusedWindow) {
+					focusedWindow.webContents.toggleDevTools();
+				}
+			}
+		}, {
+			label: 'Toggle DevTools for Active Tab',
+			accelerator: process.platform === 'darwin' ? 'Alt+Command+U' : 'Ctrl+Shift+U',
+			click(item, focusedWindow) {
+				if (focusedWindow) {
+					AppMenu.sendAction('tab-devtools');
+				}
+			}
+		}];
+	}
+
+	getHelpSubmenu() {
+		return [
+			{
+				label: `${appName + ' Desktop-'} v${app.getVersion()}`,
+				enabled: false
+			},
+			{
+				label: `What's New...`,
+				click() {
+					shell.openExternal(`https://github.com/zulip/zulip-electron/releases/tag/v${app.getVersion()}`);
+				}
+			},
+			{
+				label: `${appName} Help`,
+				click() {
+					shell.openExternal('https://zulipchat.com/help/');
+				}
+			}, {
+				label: 'Show App Logs',
+				click() {
+					const zip = new AdmZip();
+					let date = new Date();
+					date = date.toLocaleDateString().replace(/\//g, '-');
+
+					// Create a zip file of all the logs and config data
+					zip.addLocalFolder(`${app.getPath('appData')}/${appName}/Logs`);
+					zip.addLocalFolder(`${app.getPath('appData')}/${appName}/config`);
+
+					// Put the log file in downloads folder
+					const logFilePath = `${app.getPath('downloads')}/Zulip-logs-${date}.zip`;
+					zip.writeZip(logFilePath);
+
+					// Open and select the log file
+					shell.showItemInFolder(logFilePath);
+				}
+			}, {
+				label: 'Report an Issue...',
+				click() {
+					// the goal is to notify the main.html BrowserWindow
+					// which may not be the focused window.
+					BrowserWindow.getAllWindows().forEach(window => {
+						window.webContents.send('open-feedback-modal');
+					});
+				}
+			}];
+	}
+
+	getWindowSubmenu(tabs, activeTabIndex) {
+		const initialSubmenu = [{
+			role: 'minimize'
+		}, {
+			role: 'close'
+		}];
+
+		if (tabs.length > 0) {
+			const ShortcutKey = process.platform === 'darwin' ? 'Cmd' : 'Ctrl';
+			initialSubmenu.push({
+				type: 'separator'
+			});
+			for (let i = 0; i < tabs.length; i++) {
+				// Do not add functional tab settings to list of windows in menu bar
+				if (tabs[i].props.role === 'function' && tabs[i].webview.props.name === 'Settings') {
+					continue;
+				}
+
+				initialSubmenu.push({
+					label: tabs[i].webview.props.name,
+					accelerator: tabs[i].props.role === 'function' ? '' : `${ShortcutKey} + ${tabs[i].props.index + 1}`,
+					checked: tabs[i].props.index === activeTabIndex,
+					click(item, focusedWindow) {
+						if (focusedWindow) {
+							AppMenu.sendAction('switch-server-tab', tabs[i].props.index);
+						}
+					},
+					type: 'checkbox'
+				});
+			}
+		}
+
+		return initialSubmenu;
+	}
+
+	getDarwinTpl(props) {
+		const { tabs, activeTabIndex } = props;
+
+		return [{
+			label: `${app.getName()}`,
+			submenu: [{
+				label: 'About Zulip',
+				click(item, focusedWindow) {
+					if (focusedWindow) {
+						AppMenu.sendAction('open-about');
+					}
+				}
+			}, {
+				label: `Check for Update`,
+				click() {
+					AppMenu.checkForUpdate();
+				}
+			}, {
+				type: 'separator'
+			}, {
+				label: 'Desktop App Settings',
+				accelerator: 'Cmd+,',
+				click(item, focusedWindow) {
+					if (focusedWindow) {
+						AppMenu.sendAction('open-settings');
+					}
+				}
+			}, {
+				label: 'Keyboard Shortcuts',
+				accelerator: 'Cmd+Shift+K',
+				click(item, focusedWindow) {
+					if (focusedWindow) {
+						AppMenu.sendAction('shortcut');
+					}
+				}
+			}, {
+				type: 'separator'
+			}, {
+				label: 'Toggle Do Not Disturb',
+				accelerator: 'Command+Shift+M',
+				click() {
+					const dndUtil = DNDUtil.toggle();
+					AppMenu.sendAction('toggle-dnd', dndUtil.dnd, dndUtil.newSettings);
+				}
+			}, {
+				label: 'Reset App Settings',
+				accelerator: 'Command+Shift+D',
+				click() {
+					AppMenu.resetAppSettings();
+				}
+			}, {
+				label: 'Log Out',
+				accelerator: 'Cmd+L',
+				click(item, focusedWindow) {
+					if (focusedWindow) {
+						AppMenu.sendAction('log-out');
+					}
+				}
+			}, {
+				type: 'separator'
+			}, {
+				role: 'services',
+				submenu: []
+			}, {
+				type: 'separator'
+			}, {
+				role: 'hide'
+			}, {
+				role: 'hideothers'
+			}, {
+				role: 'unhide'
+			}, {
+				type: 'separator'
+			}, {
+				role: 'quit'
+			}]
+		}, {
+			label: 'Edit',
+			submenu: [{
+				role: 'undo'
+			}, {
+				role: 'redo'
+			}, {
+				type: 'separator'
+			}, {
+				role: 'cut'
+			}, {
+				role: 'copy'
+			}, {
+				role: 'paste'
+			}, {
+				role: 'pasteandmatchstyle'
+			}, {
+				role: 'delete'
+			}, {
+				role: 'selectall'
+			}]
+		}, {
+			label: 'View',
+			submenu: this.getViewSubmenu()
+		}, {
+			label: 'History',
+			submenu: this.getHistorySubmenu()
+		}, {
+			label: 'Window',
+			submenu: this.getWindowSubmenu(tabs, activeTabIndex)
+		}, {
+			role: 'help',
+			submenu: this.getHelpSubmenu()
+		}];
+	}
+
+	getOtherTpl(props) {
+		const { tabs, activeTabIndex } = props;
+
+		return [{
+			label: 'File',
+			submenu: [{
+				label: 'About Zulip',
+				click(item, focusedWindow) {
+					if (focusedWindow) {
+						AppMenu.sendAction('open-about');
+					}
+				}
+			}, {
+				label: `Check for Update`,
+				click() {
+					AppMenu.checkForUpdate();
+				}
+			}, {
+				type: 'separator'
+			}, {
+				label: 'Desktop App Settings',
+				accelerator: 'Ctrl+,',
+				click(item, focusedWindow) {
+					if (focusedWindow) {
+						AppMenu.sendAction('open-settings');
+					}
+				}
+			}, {
+				type: 'separator'
+			}, {
+				label: 'Keyboard Shortcuts',
+				accelerator: 'Ctrl+Shift+K',
+				click(item, focusedWindow) {
+					if (focusedWindow) {
+						AppMenu.sendAction('shortcut');
+					}
+				}
+			}, {
+				type: 'separator'
+			}, {
+				label: 'Toggle Do Not Disturb',
+				accelerator: 'Ctrl+Shift+M',
+				click() {
+					const dndUtil = DNDUtil.toggle();
+					AppMenu.sendAction('toggle-dnd', dndUtil.dnd, dndUtil.newSettings);
+				}
+			}, {
+				label: 'Reset App Settings',
+				accelerator: 'Ctrl+Shift+D',
+				click() {
+					AppMenu.resetAppSettings();
+				}
+			}, {
+				label: 'Log Out',
+				accelerator: 'Ctrl+L',
+				click(item, focusedWindow) {
+					if (focusedWindow) {
+						AppMenu.sendAction('log-out');
+					}
+				}
+			}, {
+				type: 'separator'
+			}, {
+				role: 'quit',
+				accelerator: 'Ctrl+Q'
+			}]
+		}, {
+			label: 'Edit',
+			submenu: [{
+				role: 'undo'
+			}, {
+				role: 'redo'
+			}, {
+				type: 'separator'
+			}, {
+				role: 'cut'
+			}, {
+				role: 'copy'
+			}, {
+				role: 'paste'
+			}, {
+				role: 'pasteandmatchstyle'
+			}, {
+				role: 'delete'
+			}, {
+				type: 'separator'
+			}, {
+				role: 'selectall'
+			}]
+		}, {
+			label: 'View',
+			submenu: this.getViewSubmenu()
+		}, {
+			label: 'History',
+			submenu: this.getHistorySubmenu()
+		}, {
+			label: 'Window',
+			submenu: this.getWindowSubmenu(tabs, activeTabIndex)
+		}, {
+			role: 'help',
+			submenu: this.getHelpSubmenu()
+		}];
+	}
+
+	static sendAction(action, ...params) {
+		const win = BrowserWindow.getAllWindows()[0];
+
+		if (process.platform === 'darwin') {
+			win.restore();
+		}
+
+		win.webContents.send(action, ...params);
+	}
+
+	static checkForUpdate() {
+		appUpdater(true);
+	}
+	static resetAppSettings() {
+		const resetAppSettingsMessage = 'By proceeding you will be removing all connected organizations and preferences from Zulip.';
+
+		// We save App's settings/configurations in following files
+		const settingFiles = ['config/window-state.json', 'config/domain.json', 'config/settings.json', 'config/certificates.json'];
+
+		dialog.showMessageBox({
+			type: 'warning',
+			buttons: ['YES', 'NO'],
+			defaultId: 0,
+			message: 'Are you sure?',
+			detail: resetAppSettingsMessage
+		}, response => {
+			if (response === 0) {
+				settingFiles.forEach(settingFileName => {
+					const getSettingFilesPath = path.join(app.getPath('appData'), appName, settingFileName);
+					fs.access(getSettingFilesPath, error => {
+						if (error) {
+							logger.error('Error while resetting app settings.');
+							logger.error(error);
+						} else {
+							fs.unlink(getSettingFilesPath, () => {
+								AppMenu.sendAction('clear-app-data');
+							});
+						}
+					});
+				});
+			}
+		});
+	}
+
+	setMenu(props) {
+		const tpl = process.platform === 'darwin' ? this.getDarwinTpl(props) : this.getOtherTpl(props);
+		const menu = Menu.buildFromTemplate(tpl);
+		Menu.setApplicationMenu(menu);
+	}
+}
+
+module.exports = new AppMenu();
--- a/app/main/menu.ts
+++ b/app/main/menu.ts
@@ -1,565 +0,0 @@
-'use strict';
-import { app, shell, BrowserWindow, Menu, dialog } from 'electron';
-import { appUpdater } from './autoupdater';
-
-import AdmZip = require('adm-zip');
-import fs = require('fs-extra');
-import path = require('path');
-import DNDUtil = require('../renderer/js/utils/dnd-util');
-import Logger = require('../renderer/js/utils/logger-util');
-import ConfigUtil = require('../renderer/js/utils/config-util');
-
-const appName = app.getName();
-
-const logger = new Logger({
-	file: 'errors.log',
-	timestamp: true
-});
-
-class AppMenu {
-	getHistorySubmenu(enableMenu: boolean): Electron.MenuItemConstructorOptions[] {
-		return [{
-			label: 'Back',
-			accelerator: process.platform === 'darwin' ? 'Command+Left' : 'Alt+Left',
-			enabled: enableMenu,
-			click(_item: any, focusedWindow: any) {
-				if (focusedWindow) {
-					AppMenu.sendAction('back');
-				}
-			}
-		}, {
-			label: 'Forward',
-			accelerator: process.platform === 'darwin' ? 'Command+Right' : 'Alt+Right',
-			enabled: enableMenu,
-			click(_item: any, focusedWindow: any) {
-				if (focusedWindow) {
-					AppMenu.sendAction('forward');
-				}
-			}
-		}];
-	}
-
-	getToolsSubmenu(): Electron.MenuItemConstructorOptions[] {
-		return [{
-			label: 'Check for Updates',
-			click() {
-				AppMenu.checkForUpdate();
-			}
-		},
-		{
-			label: 'Release Notes',
-			click() {
-				shell.openExternal(`https://github.com/zulip/zulip-desktop/releases/tag/v${app.getVersion()}`);
-			}
-		},
-		{
-			type: 'separator'
-		},
-		{
-			label: 'Factory Reset',
-			accelerator: process.platform === 'darwin' ? 'Command+Shift+D' : 'Ctrl+Shift+D',
-			click() {
-				AppMenu.resetAppSettings();
-			}
-		},
-		{
-			label: 'Download App Logs',
-			click() {
-				const zip = new AdmZip();
-				const date = new Date();
-				const dateString = date.toLocaleDateString().replace(/\//g, '-');
-
-				// Create a zip file of all the logs and config data
-				zip.addLocalFolder(`${app.getPath('appData')}/${appName}/Logs`);
-				zip.addLocalFolder(`${app.getPath('appData')}/${appName}/config`);
-
-				// Put the log file in downloads folder
-				const logFilePath = `${app.getPath('downloads')}/Zulip-logs-${dateString}.zip`;
-				zip.writeZip(logFilePath);
-
-				// Open and select the log file
-				shell.showItemInFolder(logFilePath);
-			}
-		},
-		{
-			type: 'separator'
-		},
-		{
-			label: 'Toggle DevTools for Zulip App',
-			accelerator: process.platform === 'darwin' ? 'Alt+Command+I' : 'Ctrl+Shift+I',
-			click(_item: any, focusedWindow: any) {
-				if (focusedWindow) {
-					focusedWindow.webContents.toggleDevTools();
-				}
-			}
-		},
-		{
-			label: 'Toggle DevTools for Active Tab',
-			accelerator: process.platform === 'darwin' ? 'Alt+Command+U' : 'Ctrl+Shift+U',
-			click(_item: any, focusedWindow: any) {
-				if (focusedWindow) {
-					AppMenu.sendAction('tab-devtools');
-				}
-			}
-		}];
-	}
-
-	getViewSubmenu(): Electron.MenuItemConstructorOptions[] {
-		return [{
-			label: 'Reload',
-			accelerator: 'CommandOrControl+R',
-			click(_item: any, focusedWindow: any) {
-				if (focusedWindow) {
-					AppMenu.sendAction('reload-current-viewer');
-				}
-			}
-		}, {
-			label: 'Hard Reload',
-			accelerator: 'CommandOrControl+Shift+R',
-			click(_item: any, focusedWindow: any) {
-				if (focusedWindow) {
-					AppMenu.sendAction('hard-reload');
-				}
-			}
-		}, {
-			type: 'separator'
-		}, {
-			role: 'togglefullscreen'
-		}, {
-			label: 'Zoom In',
-			accelerator: process.platform === 'darwin' ? 'Command+Plus' : 'Control+=',
-			click(_item: any, focusedWindow: any) {
-				if (focusedWindow) {
-					AppMenu.sendAction('zoomIn');
-				}
-			}
-		}, {
-			label: 'Zoom Out',
-			accelerator: 'CommandOrControl+-',
-			click(_item: any, focusedWindow: any) {
-				if (focusedWindow) {
-					AppMenu.sendAction('zoomOut');
-				}
-			}
-		}, {
-			label: 'Actual Size',
-			accelerator: 'CommandOrControl+0',
-			click(_item: any, focusedWindow: any) {
-				if (focusedWindow) {
-					AppMenu.sendAction('zoomActualSize');
-				}
-			}
-		}, {
-			type: 'separator'
-		}, {
-			label: 'Toggle Tray Icon',
-			click(_item: any, focusedWindow: any) {
-				if (focusedWindow) {
-					focusedWindow.webContents.send('toggletray');
-				}
-			}
-		}, {
-			label: 'Toggle Sidebar',
-			accelerator: 'CommandOrControl+Shift+S',
-			click(_item: any, focusedWindow: any) {
-				if (focusedWindow) {
-					const newValue = !ConfigUtil.getConfigItem('showSidebar');
-					focusedWindow.webContents.send('toggle-sidebar', newValue);
-					ConfigUtil.setConfigItem('showSidebar', newValue);
-				}
-			}
-		}, {
-			label: 'Auto hide Menu bar',
-			checked: ConfigUtil.getConfigItem('autoHideMenubar', false),
-			visible: process.platform !== 'darwin',
-			click(_item: any, focusedWindow: any) {
-				if (focusedWindow) {
-					const newValue = !ConfigUtil.getConfigItem('autoHideMenubar');
-					focusedWindow.setAutoHideMenuBar(newValue);
-					focusedWindow.setMenuBarVisibility(!newValue);
-					focusedWindow.webContents.send('toggle-autohide-menubar', newValue);
-					ConfigUtil.setConfigItem('autoHideMenubar', newValue);
-				}
-			},
-			type: 'checkbox'
-		}];
-	}
-
-	getHelpSubmenu(): Electron.MenuItemConstructorOptions[] {
-		return [
-			{
-				label: `${appName + ' Desktop'} v${app.getVersion()}`,
-				enabled: false
-			},
-			{
-				label: 'About Zulip',
-				click(_item: any, focusedWindow: any) {
-					if (focusedWindow) {
-						AppMenu.sendAction('open-about');
-					}
-				}
-			},
-			{
-				label: `Help Center`,
-				click(focusedWindow) {
-					if (focusedWindow) {
-						AppMenu.sendAction('open-help');
-					}
-				}
-			},
-			{
-				label: 'Report an Issue',
-				click() {
-					// the goal is to notify the main.html BrowserWindow
-					// which may not be the focused window.
-					BrowserWindow.getAllWindows().forEach(window => {
-						window.webContents.send('open-feedback-modal');
-					});
-				}
-			}
-		];
-	}
-
-	getWindowSubmenu(tabs: any[], activeTabIndex: number, enableMenu: boolean): Electron.MenuItemConstructorOptions[] {
-		const initialSubmenu: any[] = [{
-			role: 'minimize'
-		}, {
-			role: 'close'
-		}];
-
-		if (tabs.length > 0) {
-			const ShortcutKey = process.platform === 'darwin' ? 'Cmd' : 'Ctrl';
-			initialSubmenu.push({
-				type: 'separator'
-			});
-			tabs.forEach(tab => {
-				// Do not add functional tab settings to list of windows in menu bar
-				if (tab.props.role === 'function' && tab.webview.props.name === 'Settings') {
-					return;
-				}
-
-				initialSubmenu.push({
-					label: tab.webview.props.name,
-					accelerator: tab.props.role === 'function' ? '' : `${ShortcutKey} + ${tab.props.index + 1}`,
-					checked: tab.props.index === activeTabIndex,
-					click(_item: any, focusedWindow: any) {
-						if (focusedWindow) {
-							AppMenu.sendAction('switch-server-tab', tab.props.index);
-						}
-					},
-					type: 'checkbox'
-				});
-			});
-			initialSubmenu.push({
-				type: 'separator'
-			});
-			initialSubmenu.push({
-				label: 'Switch to Next Organization',
-				accelerator: `Ctrl+Tab`,
-				enabled: enableMenu,
-				click(_item: any, focusedWindow: any) {
-					if (focusedWindow) {
-						AppMenu.sendAction('switch-server-tab', AppMenu.getNextServer(tabs, activeTabIndex));
-					}
-				}
-			}, {
-				label: 'Switch to Previous Organization',
-				accelerator: `Ctrl+Shift+Tab`,
-				enabled: enableMenu,
-				click(_item: any, focusedWindow: any) {
-					if (focusedWindow) {
-						AppMenu.sendAction('switch-server-tab', AppMenu.getPreviousServer(tabs, activeTabIndex));
-					}
-				}
-			});
-		}
-
-		return initialSubmenu;
-	}
-
-	getDarwinTpl(props: any): Electron.MenuItemConstructorOptions[] {
-		const { tabs, activeTabIndex, enableMenu } = props;
-
-		return [{
-			label: `${app.getName()}`,
-			submenu: [{
-				label: 'Add Organization',
-				accelerator: 'Cmd+Shift+N',
-				click(_item: any, focusedWindow: any) {
-					if (focusedWindow) {
-						AppMenu.sendAction('new-server');
-					}
-				}
-			}, {
-				label: 'Toggle Do Not Disturb',
-				accelerator: 'Cmd+Shift+M',
-				click() {
-					const dndUtil = DNDUtil.toggle();
-					AppMenu.sendAction('toggle-dnd', dndUtil.dnd, dndUtil.newSettings);
-				}
-			}, {
-				label: 'Desktop Settings',
-				accelerator: 'Cmd+,',
-				click(_item: any, focusedWindow: any) {
-					if (focusedWindow) {
-						AppMenu.sendAction('open-settings');
-					}
-				}
-			}, {
-				label: 'Keyboard Shortcuts',
-				accelerator: 'Cmd+Shift+K',
-				enabled: enableMenu,
-				click(_item: any, focusedWindow: any) {
-					if (focusedWindow) {
-						AppMenu.sendAction('shortcut');
-					}
-				}
-			}, {
-				type: 'separator'
-			}, {
-				label: 'Copy Zulip URL',
-				accelerator: 'Cmd+Shift+C',
-				enabled: enableMenu,
-				click(_item: any, focusedWindow: any) {
-					if (focusedWindow) {
-						AppMenu.sendAction('copy-zulip-url');
-					}
-				}
-			}, {
-				label: 'Log Out of Organization',
-				accelerator: 'Cmd+L',
-				enabled: enableMenu,
-				click(_item: any, focusedWindow: any) {
-					if (focusedWindow) {
-						AppMenu.sendAction('log-out');
-					}
-				}
-			}, {
-				type: 'separator'
-			}, {
-				role: 'services',
-				submenu: []
-			}, {
-				type: 'separator'
-			}, {
-				role: 'hide'
-			}, {
-				role: 'hideothers'
-			}, {
-				role: 'unhide'
-			}, {
-				type: 'separator'
-			}, {
-				role: 'quit'
-			}]
-		}, {
-			label: 'Edit',
-			submenu: [{
-				role: 'undo'
-			}, {
-				role: 'redo'
-			}, {
-				type: 'separator'
-			}, {
-				role: 'cut'
-			}, {
-				role: 'copy'
-			}, {
-				role: 'paste'
-			}, {
-				role: 'pasteandmatchstyle'
-			}, {
-				role: 'selectall'
-			}]
-		}, {
-			label: 'View',
-			submenu: this.getViewSubmenu()
-		}, {
-			label: 'History',
-			submenu: this.getHistorySubmenu(enableMenu)
-		}, {
-			label: 'Window',
-			submenu: this.getWindowSubmenu(tabs, activeTabIndex, enableMenu)
-		}, {
-			label: 'Tools',
-			submenu: this.getToolsSubmenu()
-		}, {
-			role: 'help',
-			submenu: this.getHelpSubmenu()
-		}];
-	}
-
-	getOtherTpl(props: any): Electron.MenuItemConstructorOptions[] {
-		const { tabs, activeTabIndex, enableMenu } = props;
-
-		return [{
-			label: '&File',
-			submenu: [{
-				label: 'Add Organization',
-				accelerator: 'Ctrl+Shift+N',
-				click(_item: any, focusedWindow: any) {
-					if (focusedWindow) {
-						AppMenu.sendAction('new-server');
-					}
-				}
-			}, {
-				type: 'separator'
-			}, {
-				label: 'Toggle Do Not Disturb',
-				accelerator: 'Ctrl+Shift+M',
-				click() {
-					const dndUtil = DNDUtil.toggle();
-					AppMenu.sendAction('toggle-dnd', dndUtil.dnd, dndUtil.newSettings);
-				}
-			}, {
-				label: 'Desktop Settings',
-				accelerator: 'Ctrl+,',
-				click(_item: any, focusedWindow: any) {
-					if (focusedWindow) {
-						AppMenu.sendAction('open-settings');
-					}
-				}
-			}, {
-				label: 'Keyboard Shortcuts',
-				accelerator: 'Ctrl+Shift+K',
-				enabled: enableMenu,
-				click(_item: any, focusedWindow: any) {
-					if (focusedWindow) {
-						AppMenu.sendAction('shortcut');
-					}
-				}
-			}, {
-				type: 'separator'
-			}, {
-				label: 'Copy Zulip URL',
-				accelerator: 'Ctrl+Shift+C',
-				enabled: enableMenu,
-				click(_item: any, focusedWindow: any) {
-					if (focusedWindow) {
-						AppMenu.sendAction('copy-zulip-url');
-					}
-				}
-			}, {
-				label: 'Log Out of Organization',
-				accelerator: 'Ctrl+L',
-				enabled: enableMenu,
-				click(_item: any, focusedWindow: any) {
-					if (focusedWindow) {
-						AppMenu.sendAction('log-out');
-					}
-				}
-			}, {
-				type: 'separator'
-			}, {
-				role: 'quit',
-				accelerator: 'Ctrl+Q'
-			}]
-		}, {
-			label: '&Edit',
-			submenu: [{
-				role: 'undo'
-			}, {
-				role: 'redo'
-			}, {
-				type: 'separator'
-			}, {
-				role: 'cut'
-			}, {
-				role: 'copy'
-			}, {
-				role: 'paste'
-			}, {
-				role: 'pasteandmatchstyle'
-			}, {
-				type: 'separator'
-			}, {
-				role: 'selectall'
-			}]
-		}, {
-			label: '&View',
-			submenu: this.getViewSubmenu()
-		}, {
-			label: '&History',
-			submenu: this.getHistorySubmenu(enableMenu)
-		}, {
-			label: '&Window',
-			submenu: this.getWindowSubmenu(tabs, activeTabIndex, enableMenu)
-		}, {
-			label: '&Tools',
-			submenu: this.getToolsSubmenu()
-		}, {
-			label: '&Help',
-			role: 'help',
-			submenu: this.getHelpSubmenu()
-		}];
-	}
-
-	static sendAction(action: any, ...params: any[]): void {
-		const win = BrowserWindow.getAllWindows()[0];
-
-		if (process.platform === 'darwin') {
-			win.restore();
-		}
-
-		win.webContents.send(action, ...params);
-	}
-
-	static checkForUpdate(): void {
-		appUpdater(true);
-	}
-
-	static getNextServer(tabs: any[], activeTabIndex: number): number {
-		do {
-			activeTabIndex = (activeTabIndex + 1) % tabs.length;
-		}
-		while (tabs[activeTabIndex].props.role !== 'server');
-		return activeTabIndex;
-	}
-
-	static getPreviousServer(tabs: any[], activeTabIndex: number): number {
-		do {
-			activeTabIndex = (activeTabIndex - 1 + tabs.length) % tabs.length;
-		}
-		while (tabs[activeTabIndex].props.role !== 'server');
-		return activeTabIndex;
-	}
-
-	static resetAppSettings(): void {
-		const resetAppSettingsMessage = 'By proceeding you will be removing all connected organizations and preferences from Zulip.';
-
-		// We save App's settings/configurations in following files
-		const settingFiles = ['config/window-state.json', 'config/domain.json', 'config/settings.json', 'config/certificates.json'];
-
-		dialog.showMessageBox({
-			type: 'warning',
-			buttons: ['YES', 'NO'],
-			defaultId: 0,
-			message: 'Are you sure?',
-			detail: resetAppSettingsMessage
-		}, response => {
-			if (response === 0) {
-				settingFiles.forEach(settingFileName => {
-					const getSettingFilesPath = path.join(app.getPath('appData'), appName, settingFileName);
-					fs.access(getSettingFilesPath, (error: any) => {
-						if (error) {
-							logger.error('Error while resetting app settings.');
-							logger.error(error);
-						} else {
-							fs.unlink(getSettingFilesPath, () => {
-								AppMenu.sendAction('clear-app-data');
-							});
-						}
-					});
-				});
-			}
-		});
-	}
-
-	setMenu(props: any): void {
-		const tpl = process.platform === 'darwin' ? this.getDarwinTpl(props) : this.getOtherTpl(props);
-		const menu = Menu.buildFromTemplate(tpl);
-		Menu.setApplicationMenu(menu);
-	}
-}
-
-export = new AppMenu();
--- a/app/main/startup.js
+++ b/app/main/startup.js
@@ -1,11 +1,10 @@
 'use strict';
-import { app } from 'electron';
+const { app } = require('electron');
+const AutoLaunch = require('auto-launch');
+const isDev = require('electron-is-dev');
+const ConfigUtil = require('./../renderer/js/utils/config-util.js');

-import AutoLaunch = require('auto-launch');
-import isDev = require('electron-is-dev');
-import ConfigUtil = require('../renderer/js/utils/config-util');
-
-export const setAutoLaunch = (AutoLaunchValue: boolean): void => {
+const setAutoLaunch = AutoLaunchValue => {
 	// Don't run this in development
 	if (isDev) {
 		return;
@@ -29,3 +28,7 @@ export const setAutoLaunch = (AutoLaunchValue: boolean): void => {
 		ZulipAutoLauncher.disable();
 	}
 };
+
+module.exports = {
+	setAutoLaunch
+};
--- a/app/package-lock.json
+++ b/app/package-lock.json
@@ -1,13 +1,13 @@
 {
  "name": "zulip",
-  "version": "3.1.0-beta",
+  "version": "2.3.6",
  "lockfileVersion": 1,
  "requires": true,
  "dependencies": {
    "@electron-elements/send-feedback": {
-      "version": "1.0.8",
-      "resolved": "https://registry.npmjs.org/@electron-elements/send-feedback/-/send-feedback-1.0.8.tgz",
-      "integrity": "sha512-spIZIYSe0Bp028sbZ7bcGOaUYhMyFArk+Tv7kQ4XCRNuVWRkw3SfbR8zIljZAdUavJp0wX6prSWrqLL4Dpd3Fw==",
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/@electron-elements/send-feedback/-/send-feedback-1.0.7.tgz",
+      "integrity": "sha1-HmTsFMvNkmZAngeu1BDoUi45deA=",
      "requires": {
        "@electron-elements/utils": "1.0.3"
      }
@@ -37,93 +37,90 @@
      }
    },
    "@sentry/browser": {
-      "version": "4.3.4",
-      "resolved": "https://registry.npmjs.org/@sentry/browser/-/browser-4.3.4.tgz",
-      "integrity": "sha512-odRXxnhcSYzyR4YvTolNEyrz3fdDVw308l+9RBRJA9yOFVlezaz1mXH6Gv00F7cIj9yE/JtezDyhP339WsWy3w==",
+      "version": "4.0.0-beta.12",
+      "resolved": "https://registry.npmjs.org/@sentry/browser/-/browser-4.0.0-beta.12.tgz",
+      "integrity": "sha512-At8qp2aM4q4KnuIQuC6wbbQ6gLykmzwZdHwWRN99GS5TNC7kXJNgO9WgiMLadA4ph12JtC1petrUIgY8t+aoSA==",
      "requires": {
-        "@sentry/core": "4.3.4",
-        "@sentry/types": "4.3.4",
-        "@sentry/utils": "4.3.4",
-        "tslib": "^1.9.3"
+        "@sentry/core": "4.0.0-beta.12",
+        "@sentry/hub": "4.0.0-beta.12",
+        "@sentry/minimal": "4.0.0-beta.12",
+        "@sentry/types": "4.0.0-beta.12",
+        "@sentry/utils": "4.0.0-beta.12"
      }
    },
    "@sentry/core": {
-      "version": "4.3.4",
-      "resolved": "https://registry.npmjs.org/@sentry/core/-/core-4.3.4.tgz",
-      "integrity": "sha512-KwolQmAnXiFMeXBuxPUM8fW+2bOICdHfpjdf83qD7WSeuKqGvXhxXyApWNSLE+l2DPO6/8UKnIGmR8bEn0G7QA==",
+      "version": "4.0.0-beta.12",
+      "resolved": "https://registry.npmjs.org/@sentry/core/-/core-4.0.0-beta.12.tgz",
+      "integrity": "sha512-DGZqBOHejHPYP2I0MdF7APEaews7gLrfxHDh9rbwDLJJiuwPE/ridH97amxy/j2g4X4EZEc3sO3Ptv4nMaHK+Q==",
      "requires": {
-        "@sentry/hub": "4.3.4",
-        "@sentry/minimal": "4.3.4",
-        "@sentry/types": "4.3.4",
-        "@sentry/utils": "4.3.4",
-        "tslib": "^1.9.3"
+        "@sentry/hub": "4.0.0-beta.12",
+        "@sentry/minimal": "4.0.0-beta.12",
+        "@sentry/types": "4.0.0-beta.12",
+        "@sentry/utils": "4.0.0-beta.12"
      }
    },
    "@sentry/electron": {
-      "version": "0.14.0",
-      "resolved": "https://registry.npmjs.org/@sentry/electron/-/electron-0.14.0.tgz",
-      "integrity": "sha512-f0Aj2gKcX9LampOEFER0m6cC4etT1B3bsuY7E1R3vzZXcL7y5TaH2Omgk5atzAX5ycBk8LHxhVqUtE6fZBWlFA==",
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/@sentry/electron/-/electron-0.8.1.tgz",
+      "integrity": "sha512-y3CJ7547Rhpg+6bnGP0mXLj9pgpjMLaRji704TdzTV0afr8KamBXySNhNHosHLaKm1OLg6p8U4pdVB7xQZ+X3g==",
      "requires": {
-        "@sentry/browser": "~4.3.4",
-        "@sentry/core": "~4.3.4",
-        "@sentry/minimal": "~4.3.4",
-        "@sentry/node": "~4.3.4",
-        "@sentry/types": "~4.3.4",
-        "@sentry/utils": "~4.3.4",
-        "electron-fetch": "1.1.0",
-        "form-data": "2.3.2",
-        "util.promisify": "1.0.0"
+        "@sentry/browser": "4.0.0-beta.12",
+        "@sentry/core": "4.0.0-beta.12",
+        "@sentry/hub": "4.0.0-beta.12",
+        "@sentry/minimal": "4.0.0-beta.12",
+        "@sentry/node": "4.0.0-beta.12",
+        "@sentry/types": "4.0.0-beta.12",
+        "@sentry/utils": "4.0.0-beta.12",
+        "electron-fetch": "^1.1.0",
+        "form-data": "^2.3.2",
+        "util.promisify": "^1.0.0"
      }
    },
    "@sentry/hub": {
-      "version": "4.3.4",
-      "resolved": "https://registry.npmjs.org/@sentry/hub/-/hub-4.3.4.tgz",
-      "integrity": "sha512-vaBGCnhinLB8N4aQLMiPPhnlTkIUwU/dxWzw/xsuKY3MYWrmfMUyWgMZF60Mz3B4F0lW1lsg5jnJz9xPnjZowg==",
+      "version": "4.0.0-beta.12",
+      "resolved": "https://registry.npmjs.org/@sentry/hub/-/hub-4.0.0-beta.12.tgz",
+      "integrity": "sha512-fmLaPaD6F/ViWDTz3hRVnNvqgnAmX0foDsUGVVp0Dt2lT9apM5NECKV6761XFVMrbGGulCg9fguv2KV5IbQcIw==",
      "requires": {
-        "@sentry/types": "4.3.4",
-        "@sentry/utils": "4.3.4",
-        "tslib": "^1.9.3"
+        "@sentry/types": "4.0.0-beta.12",
+        "@sentry/utils": "4.0.0-beta.12"
      }
    },
    "@sentry/minimal": {
-      "version": "4.3.4",
-      "resolved": "https://registry.npmjs.org/@sentry/minimal/-/minimal-4.3.4.tgz",
-      "integrity": "sha512-EBmQgdAQgxkhWFsBO4TmsP3cg5yTzg48HmPe3Dyt7PtF5Umw3DFW6qboAqnN1+KF+pHNuxkqevvgBTFp7b4Saw==",
+      "version": "4.0.0-beta.12",
+      "resolved": "https://registry.npmjs.org/@sentry/minimal/-/minimal-4.0.0-beta.12.tgz",
+      "integrity": "sha512-1V3Lrm7wIOOqG+l1uyVZ7iQysPGXszwfsd6DTVDPT19PSey7+KbvPNcQfh+GqMRMz8jzyg9XlwUxckg7qbSztQ==",
      "requires": {
-        "@sentry/hub": "4.3.4",
-        "@sentry/types": "4.3.4",
-        "tslib": "^1.9.3"
+        "@sentry/hub": "4.0.0-beta.12",
+        "@sentry/types": "4.0.0-beta.12"
      }
    },
    "@sentry/node": {
-      "version": "4.3.4",
-      "resolved": "https://registry.npmjs.org/@sentry/node/-/node-4.3.4.tgz",
-      "integrity": "sha512-4ro8eFnIuuYrF/TLw788xU10AYJl9HvOYC5G3jLrHXTjRNLp7jJo9lZrUexjCvwM2WF/srF3+Z0Pwr+HwdKVVw==",
+      "version": "4.0.0-beta.12",
+      "resolved": "https://registry.npmjs.org/@sentry/node/-/node-4.0.0-beta.12.tgz",
+      "integrity": "sha512-oekXtdaaElt/lSfyKtAyTLcTofciMRuptsGOTMX4qQ7hoHESB6DUw55Or/RRMaJYm/nckM2VFzWDATd20NVV4w==",
      "requires": {
-        "@sentry/core": "4.3.4",
-        "@sentry/hub": "4.3.4",
-        "@sentry/types": "4.3.4",
-        "@sentry/utils": "4.3.4",
-        "@types/stack-trace": "0.0.29",
+        "@sentry/core": "4.0.0-beta.12",
+        "@sentry/hub": "4.0.0-beta.12",
+        "@sentry/minimal": "4.0.0-beta.12",
+        "@sentry/types": "4.0.0-beta.12",
+        "@sentry/utils": "4.0.0-beta.12",
        "cookie": "0.3.1",
        "lsmod": "1.0.0",
        "md5": "2.2.1",
-        "stack-trace": "0.0.10",
-        "tslib": "^1.9.3"
+        "stack-trace": "0.0.10"
      }
    },
    "@sentry/types": {
-      "version": "4.3.4",
-      "resolved": "https://registry.npmjs.org/@sentry/types/-/types-4.3.4.tgz",
-      "integrity": "sha512-qsqrcyNilpbzYjqef+km0Grh5BckSFD4MUdJDNkUE5XU/ImniYddj18bMDlQxluJlTPDjUFQ37FXtEmxLeOwkQ=="
+      "version": "4.0.0-beta.12",
+      "resolved": "https://registry.npmjs.org/@sentry/types/-/types-4.0.0-beta.12.tgz",
+      "integrity": "sha512-xRsTfRcb8OvMbLjl64bPNv3feHiXBprtRZqTlVUbDJmSNrm8wg+tKIPYsP90dxKc50CZBk59urIbgvpPg0mCLw=="
    },
    "@sentry/utils": {
-      "version": "4.3.4",
-      "resolved": "https://registry.npmjs.org/@sentry/utils/-/utils-4.3.4.tgz",
-      "integrity": "sha512-CMGMdIv5RHUCKRF4aWPZ/gFRTfBQpLVVJEGCeFGZLXHBdpgQac0lf3jlu8sND0KZ0S3C5x3tGS/eEqmOZRQ/pw==",
+      "version": "4.0.0-beta.12",
+      "resolved": "https://registry.npmjs.org/@sentry/utils/-/utils-4.0.0-beta.12.tgz",
+      "integrity": "sha512-lpTE2GlaztATlFfIWMN8RSQFP0z6PkPPoDz0KKRmK4ZxjPxVX2sAGbKJGCpf9fdUG23NVg3FNiqfpUbjhvd9YA==",
      "requires": {
-        "@sentry/types": "4.3.4",
-        "tslib": "^1.9.3"
+        "@sentry/types": "4.0.0-beta.12"
      }
    },
    "@sindresorhus/is": {
@@ -131,11 +128,6 @@
      "resolved": "https://registry.npmjs.org/@sindresorhus/is/-/is-0.7.0.tgz",
      "integrity": "sha512-ONhaKPIufzzrlNbqtWFFd+jlnemX6lJAgq9ZeiZtS7I1PIf/la7CW4m83rTXRnVnsMbW2k56pGYu7AUFJD9Pow=="
    },
-    "@types/stack-trace": {
-      "version": "0.0.29",
-      "resolved": "https://registry.npmjs.org/@types/stack-trace/-/stack-trace-0.0.29.tgz",
-      "integrity": "sha512-TgfOX+mGY/NyNxJLIbDWrO9DjGoVSW9+aB8H2yy1fy32jsvxijhmyJI9fDFgvz3YP4lvJaq9DzdR/M1bOgVc9g=="
-    },
    "adm-zip": {
      "version": "0.4.11",
      "resolved": "https://registry.npmjs.org/adm-zip/-/adm-zip-0.4.11.tgz",
@@ -169,7 +161,7 @@
    "argparse": {
      "version": "1.0.10",
      "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
-      "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
+      "integrity": "sha1-vNZ5HqWuCXJeF+WtmIE0zUCz2RE=",
      "requires": {
        "sprintf-js": "~1.0.2"
      }
@@ -237,16 +229,16 @@
      "optional": true
    },
    "bluebird": {
-      "version": "3.5.3",
-      "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.5.3.tgz",
-      "integrity": "sha512-/qKPUQlaW1OyR51WeCPBvRnAlnZFUJkCSG5HzGnuIqhgyJtF+T94lFnn33eiazjRm2LAHVy2guNnaq48X9SJuw=="
+      "version": "3.5.1",
+      "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.5.1.tgz",
+      "integrity": "sha1-2VUfnemPH82h5oPRfukaBgLuLrk="
    },
    "bluebird-lst": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/bluebird-lst/-/bluebird-lst-1.0.6.tgz",
-      "integrity": "sha512-CBWFoPuUPpcvMUxfyr8DKdI5d4kjxFl1h39+VbKxP3KJWJHEsLtuT4pPLkjpxCGU6Ask21tvbnftWXdqIxYldQ==",
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/bluebird-lst/-/bluebird-lst-1.0.5.tgz",
+      "integrity": "sha1-vryDAmt+kqcocaPcWZ4hnL+wAqk=",
      "requires": {
-        "bluebird": "^3.5.2"
+        "bluebird": "^3.5.1"
      }
    },
    "boom": {
@@ -260,40 +252,35 @@
    "brace-expansion": {
      "version": "1.1.11",
      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
-      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "integrity": "sha1-PH/L9SnYcibz0vUrlm/1Jx60Qd0=",
      "requires": {
        "balanced-match": "^1.0.0",
        "concat-map": "0.0.1"
      }
    },
    "buffer-from": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.1.tgz",
-      "integrity": "sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A=="
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.0.tgz",
+      "integrity": "sha512-c5mRlguI/Pe2dSZmpER62rSCu0ryKmWddzRYsuXc50U2/g8jMOulc31VZMa4mYx31U5xsmSOpDCgH88Vl9cDGQ=="
    },
    "builder-util-runtime": {
-      "version": "8.1.0",
-      "resolved": "https://registry.npmjs.org/builder-util-runtime/-/builder-util-runtime-8.1.0.tgz",
-      "integrity": "sha512-s1mlJ28mv+56Iebh6c9aXjVe11O3Z0cDTwAGeB0PCcUzHA37fDxGgS8ZGoYNMZP+rBHj21d/od1wuYofTVLaQg==",
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/builder-util-runtime/-/builder-util-runtime-4.4.0.tgz",
+      "integrity": "sha512-tkTF1o7XAX79ZkMo8822ZdQMpEBGSgfJ9kEYgyTAja90BPu7HO8C02pb8iSlFXfmK0Q0UA6D8MmnSNNPi0JLeg==",
      "requires": {
-        "bluebird-lst": "^1.0.6",
-        "debug": "^4.1.0",
-        "fs-extra-p": "^7.0.0",
+        "bluebird-lst": "^1.0.5",
+        "debug": "^3.1.0",
+        "fs-extra-p": "^4.6.1",
        "sax": "^1.2.4"
      },
      "dependencies": {
        "debug": {
-          "version": "4.1.1",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz",
-          "integrity": "sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==",
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
+          "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
          "requires": {
-            "ms": "^2.1.1"
+            "ms": "2.0.0"
          }
-        },
-        "ms": {
-          "version": "2.1.1",
-          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.1.tgz",
-          "integrity": "sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg=="
        }
      }
    },
@@ -434,12 +421,18 @@
        "mimic-response": "^1.0.0"
      }
    },
+    "deep-equal": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-1.0.1.tgz",
+      "integrity": "sha1-9dJgKStmDghO/0zbyfCK0yR0SLU="
+    },
    "define-properties": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.3.tgz",
-      "integrity": "sha512-3MqfYKj2lLzdMSf8ZIZE/V+Zuy+BgD6f164e8K2w7dgnpKArBDerGYpM46IYYcjnkdPNMjPk9A6VFB8+3SKlXQ==",
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.2.tgz",
+      "integrity": "sha1-g6c/L+pWmJj7c3GTyPhzyvbUXJQ=",
      "requires": {
-        "object-keys": "^1.0.12"
+        "foreach": "^2.0.5",
+        "object-keys": "^1.0.8"
      }
    },
    "delayed-stream": {
@@ -464,11 +457,6 @@
        "dns-packet": "^1.1.0"
      }
    },
-    "dotenv": {
-      "version": "8.0.0",
-      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-8.0.0.tgz",
-      "integrity": "sha512-30xVGqjLjiUOArT4+M5q9sYdvuR4riM6yK9wMcas9Vbp6zZa+ocC9dp6QoftuhTPhFAiLK/0C5Ni2nou/Bk8lg=="
-    },
    "duplexer3": {
      "version": "0.1.4",
      "resolved": "https://registry.npmjs.org/duplexer3/-/duplexer3-0.1.4.tgz",
@@ -484,9 +472,9 @@
      }
    },
    "electron-fetch": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/electron-fetch/-/electron-fetch-1.1.0.tgz",
-      "integrity": "sha512-eBtqbB522c/RJwC5v1yF/Y0SMVLiwel98BWGx050GucWbKlejHtPkfpq/vfMxCjg0SGpHGUISYUaMfu65QH+xg==",
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/electron-fetch/-/electron-fetch-1.2.1.tgz",
+      "integrity": "sha512-pQy0el/vxu30sL9JjXss8yZL+ztRnmioffPQsLL4UYnfSUFTuGBlgCPCxxKYJV7y52WfaIEZQ9tlbac1YHrH0w==",
      "requires": {
        "encoding": "^0.1.12"
      }
@@ -534,35 +522,46 @@
      }
    },
    "electron-updater": {
-      "version": "4.0.6",
-      "resolved": "https://registry.npmjs.org/electron-updater/-/electron-updater-4.0.6.tgz",
-      "integrity": "sha512-JPGLME6fxJcHG8hX7HWFl6Aew6iVm0DkcrENreKa5SUJCHG+uUaAhxDGDt+YGcNkyx1uJ6eBGMvFxDTLUv67pg==",
+      "version": "2.23.3",
+      "resolved": "https://registry.npmjs.org/electron-updater/-/electron-updater-2.23.3.tgz",
+      "integrity": "sha512-ZoQZpiEbhT3xA5Oxn7a5o4Z9adRaYs901pnTKBVBxPWmc0Qw5sZXAHkRjftlRmEn3RiEVkJtBPQSfx8kIkRcUA==",
      "requires": {
-        "bluebird-lst": "^1.0.6",
-        "builder-util-runtime": "~8.1.0",
-        "fs-extra-p": "^7.0.0",
+        "bluebird-lst": "^1.0.5",
+        "builder-util-runtime": "~4.4.0",
+        "electron-is-dev": "^0.3.0",
+        "fs-extra-p": "^4.6.1",
        "js-yaml": "^3.12.0",
        "lazy-val": "^1.0.3",
        "lodash.isequal": "^4.5.0",
-        "pako": "^1.0.7",
-        "semver": "^5.6.0",
-        "source-map-support": "^0.5.9"
+        "semver": "^5.5.0",
+        "source-map-support": "^0.5.6"
      },
      "dependencies": {
        "semver": {
-          "version": "5.6.0",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-5.6.0.tgz",
-          "integrity": "sha512-RS9R6R35NYgQn++fkDWaOmqGoj4Ek9gGs+DPxNUZKuwE183xjJroKvyo1IzVFeXvUrvmALy6FWD5xrdJT25gMg=="
+          "version": "5.5.0",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-5.5.0.tgz",
+          "integrity": "sha512-4SJ3dm0WAwWy/NVeioZh5AntkdJoWKxHxcmyP622fOkgHa4z3R0TdBJICINyaSDE6uNwVc8gZr+ZinwZAH4xIA=="
        }
      }
    },
    "electron-window-state": {
-      "version": "5.0.3",
-      "resolved": "https://registry.npmjs.org/electron-window-state/-/electron-window-state-5.0.3.tgz",
-      "integrity": "sha512-1mNTwCfkolXl3kMf50yW3vE2lZj0y92P/HYWFBrb+v2S/pCka5mdwN3cagKm458A7NjndSwijynXgcLWRodsVg==",
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/electron-window-state/-/electron-window-state-4.1.1.tgz",
+      "integrity": "sha1-azT9wxs4UU3+yLfI97XUrdtnYy0=",
      "requires": {
-        "jsonfile": "^4.0.0",
+        "deep-equal": "^1.0.1",
+        "jsonfile": "^2.2.3",
        "mkdirp": "^0.5.1"
+      },
+      "dependencies": {
+        "jsonfile": {
+          "version": "2.4.0",
+          "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-2.4.0.tgz",
+          "integrity": "sha1-NzaitCi4e72gzIO1P6PWM6NcKug=",
+          "requires": {
+            "graceful-fs": "^4.1.6"
+          }
+        }
      }
    },
    "encoding": {
@@ -574,9 +573,9 @@
      }
    },
    "es-abstract": {
-      "version": "1.12.0",
-      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.12.0.tgz",
-      "integrity": "sha512-C8Fx/0jFmV5IPoMOFPA9P9G5NtqW+4cOPit3MIuvR2t7Ag2K15EJTpxnHAYTzL+aYQJIESYeXZmDBfOBE1HcpA==",
+      "version": "1.11.0",
+      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.11.0.tgz",
+      "integrity": "sha512-ZnQrE/lXTTQ39ulXZ+J1DTFazV9qBy61x2bY071B+qGco8Z8q1QddsLdt/EF8Ai9hcWH72dWS0kFqXLxOxqslA==",
      "requires": {
        "es-to-primitive": "^1.1.1",
        "function-bind": "^1.1.1",
@@ -586,13 +585,13 @@
      }
    },
    "es-to-primitive": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.2.0.tgz",
-      "integrity": "sha512-qZryBOJjV//LaxLTV6UC//WewneB3LcXOL9NP++ozKVXsIIIpm/2c13UDiD9Jp2eThsecw9m3jPqDwTyobcdbg==",
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.1.1.tgz",
+      "integrity": "sha1-RTVSSKiJeQNLZ5Lhm7gfK3l13Q0=",
      "requires": {
-        "is-callable": "^1.1.4",
+        "is-callable": "^1.1.1",
        "is-date-object": "^1.0.1",
-        "is-symbol": "^1.0.2"
+        "is-symbol": "^1.0.1"
      }
    },
    "escape-html": {
@@ -601,9 +600,9 @@
      "integrity": "sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg="
    },
    "esprima": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
-      "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A=="
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.0.tgz",
+      "integrity": "sha1-RJnt3NERDgshi6zy+n9/WfVcqAQ="
    },
    "event-kit": {
      "version": "2.4.0",
@@ -636,6 +635,11 @@
      "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.0.0.tgz",
      "integrity": "sha1-1RQsDK7msRifh9OnYREGT4bIu/I="
    },
+    "foreach": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/foreach/-/foreach-2.0.5.tgz",
+      "integrity": "sha1-C+4AUBiusmDQo6865ljdATbsG5k="
+    },
    "forever-agent": {
      "version": "0.6.1",
      "resolved": "https://registry.npmjs.org/forever-agent/-/forever-agent-0.6.1.tgz",
@@ -661,9 +665,9 @@
      }
    },
    "fs-extra": {
-      "version": "7.0.1",
-      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-7.0.1.tgz",
-      "integrity": "sha512-YJDaCJZEnBmcbw13fvdAM9AwNOJwOzrE4pqMqBq5nFiEqXUqHwlK4B+3pUw6JNvfSPtX05xFHtYy/1ni01eGCw==",
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-6.0.1.tgz",
+      "integrity": "sha512-GnyIkKhhzXZUWFCaJzvyDLEEgDkPfb4/TPvJCJVuS8MWZgoSsErf++QpiAlDnKFcqhRlm+tIOcencCjyJE6ZCA==",
      "requires": {
        "graceful-fs": "^4.1.2",
        "jsonfile": "^4.0.0",
@@ -671,12 +675,12 @@
      }
    },
    "fs-extra-p": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/fs-extra-p/-/fs-extra-p-7.0.0.tgz",
-      "integrity": "sha512-5tg5jBOd0xIXjwj4PDnafOXL5TyPVzjxLby4DPKev53wurEXp7IsojBaD4Lj5M5w7jxw0pbkEU0fFEPmcKoMnA==",
+      "version": "4.6.1",
+      "resolved": "https://registry.npmjs.org/fs-extra-p/-/fs-extra-p-4.6.1.tgz",
+      "integrity": "sha512-IsTMbUS0svZKZTvqF4vDS9c/L7Mw9n8nZQWWeSzAGacOSe+8CzowhUN0tdZEZFIJNP5HC7L9j3MMikz/G4hDeQ==",
      "requires": {
-        "bluebird-lst": "^1.0.6",
-        "fs-extra": "^7.0.0"
+        "bluebird-lst": "^1.0.5",
+        "fs-extra": "^6.0.1"
      }
    },
    "fs.realpath": {
@@ -764,11 +768,6 @@
      "resolved": "https://registry.npmjs.org/has-symbol-support-x/-/has-symbol-support-x-1.4.2.tgz",
      "integrity": "sha512-3ToOva++HaW+eCpgqZrCfN51IPB+7bJNVT6CUATzueB5Heb8o6Nam0V3HG5dlDvZU1Gn5QLcbahiKw/XVk5JJw=="
    },
-    "has-symbols": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.0.tgz",
-      "integrity": "sha1-uhqPGvKg/DllD1yFA2dwQSIGO0Q="
-    },
    "has-to-string-tag-x": {
      "version": "1.4.1",
      "resolved": "https://registry.npmjs.org/has-to-string-tag-x/-/has-to-string-tag-x-1.4.1.tgz",
@@ -780,7 +779,7 @@
    "hashids": {
      "version": "1.1.4",
      "resolved": "https://registry.npmjs.org/hashids/-/hashids-1.1.4.tgz",
-      "integrity": "sha512-U/fnTE3edW0AV92ZI/BfEluMZuVcu3MDOopsN7jS+HqDYcarQo8rXQiWlsBlm0uX48/taYSdxRsfzh2HRg5Z6w=="
+      "integrity": "sha1-5P+SrWa2hKO9aqznwX1mYY7l+iE="
    },
    "hawk": {
      "version": "6.0.2",
@@ -814,9 +813,9 @@
      }
    },
    "iconv-lite": {
-      "version": "0.4.24",
-      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
-      "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
+      "version": "0.4.23",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.23.tgz",
+      "integrity": "sha512-neyTUVFtahjf0mB3dZT77u+8O0QB89jFdnBkd5P1JgYPbPaia3gXXOVL2fq8VyU2gMMD7SaN7QukTB/pmXYvDA==",
      "requires": {
        "safer-buffer": ">= 2.1.2 < 3"
      }
@@ -865,9 +864,9 @@
      "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w=="
    },
    "is-callable": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.1.4.tgz",
-      "integrity": "sha512-r5p9sxJjYnArLjObpjA4xu5EKI3CuKHkJXMhT7kwbpUyIFD1n5PMAsoPvWnvtZiNz7LjkYDRZhd7FlI0eMijEA=="
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.1.3.tgz",
+      "integrity": "sha1-hut1OSgF3cM69xySoO7fdO52BLI="
    },
    "is-date-object": {
      "version": "1.0.1",
@@ -927,12 +926,9 @@
      "integrity": "sha1-EtSj3U5o4Lec6428hBc66A2RykQ="
    },
    "is-symbol": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.0.2.tgz",
-      "integrity": "sha512-HS8bZ9ox60yCJLH9snBpIwv9pYUAkcuLhSA1oero1UB5y9aiQpRA8y2ex945AOtCZL1lJDeIk3G5LthswI46Lw==",
-      "requires": {
-        "has-symbols": "^1.0.0"
-      }
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.0.1.tgz",
+      "integrity": "sha1-PMWfAAJRlLarLjjbrmaJJWtmBXI="
    },
    "is-typedarray": {
      "version": "1.0.0",
@@ -1032,7 +1028,7 @@
    "lazy-val": {
      "version": "1.0.3",
      "resolved": "https://registry.npmjs.org/lazy-val/-/lazy-val-1.0.3.tgz",
-      "integrity": "sha512-pjCf3BYk+uv3ZcPzEVM0BFvO9Uw58TmlrU0oG5tTrr9Kcid3+kdKxapH8CjdYmVa2nO5wOoZn2rdvZx2PKj/xg=="
+      "integrity": "sha1-u5eyAO8AgB2UwxfincbtOeMcXtw="
    },
    "lodash.assign": {
      "version": "4.2.0",
@@ -1099,7 +1095,7 @@
    "minimatch": {
      "version": "3.0.4",
      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
-      "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
+      "integrity": "sha1-UWbihkV/AzBgZL5Ul+jbsMPTIIM=",
      "requires": {
        "brace-expansion": "^1.1.7"
      }
@@ -1128,24 +1124,30 @@
      "integrity": "sha1-ltDNYQ69WNS03pzAxoKM2pnHVI8="
    },
    "node-json-db": {
-      "version": "0.9.2",
-      "resolved": "https://registry.npmjs.org/node-json-db/-/node-json-db-0.9.2.tgz",
-      "integrity": "sha512-vd8A6wznm3hi82IKlVKdomZvsEnASYWl0n4iwLkI7ukbIQkXTtFdJG8aZg0BNbEN+Vr/VktDFSqwWx/iSdf31Q==",
+      "version": "0.7.3",
+      "resolved": "https://registry.npmjs.org/node-json-db/-/node-json-db-0.7.3.tgz",
+      "integrity": "sha1-v2Mf9NTPQhHL3/5srmqq/m7lTN8=",
      "requires": {
        "mkdirp": "0.5.x"
      }
    },
    "node-mac-notifier": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/node-mac-notifier/-/node-mac-notifier-1.1.0.tgz",
-      "integrity": "sha512-Fwv09eKMGkM4xn+Eby5g7lvmYF+1KYWX4V5QNn27l4cVFVS7MNYOxhbvGGHT5VuTWbWDQIi/Lr7l6so5vvmqVw==",
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/node-mac-notifier/-/node-mac-notifier-0.1.0.tgz",
+      "integrity": "sha512-K07p0jW6BhE4Jxpem4pcOdOCDgF/vy3xIqZoZpqme5JAfeW0cEkQ5Z3AmsM7fhJB59kDeOiouyykwPnvLV+hAg==",
      "optional": true,
      "requires": {
        "bindings": "^1.2.1",
        "event-target-shim": "^1.1.1",
-        "uuid": "^3.3.2"
+        "node-uuid": "^1.4.7"
      }
    },
+    "node-uuid": {
+      "version": "1.4.8",
+      "resolved": "https://registry.npmjs.org/node-uuid/-/node-uuid-1.4.8.tgz",
+      "integrity": "sha1-sEDrCSOWivq/jTL7HxfxFn/auQc=",
+      "optional": true
+    },
    "normalize-url": {
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-2.0.1.tgz",
@@ -1234,11 +1236,6 @@
        "p-finally": "^1.0.0"
      }
    },
-    "pako": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.7.tgz",
-      "integrity": "sha512-3HNK5tW4x8o5mO8RuHZp3Ydw9icZXx0RANAOMzlMzx7LVXhMJ4mo3MOBpzyd7r/+RUu8BmndP47LXT+vzjtWcQ=="
-    },
    "path-is-absolute": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
@@ -1462,7 +1459,7 @@
    "sax": {
      "version": "1.2.4",
      "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
-      "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw=="
+      "integrity": "sha1-KBYjTiN4vdxOU1T6tcqold9xANk="
    },
    "semver": {
      "version": "5.4.1",
@@ -1488,12 +1485,12 @@
    "source-map": {
      "version": "0.6.1",
      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+      "integrity": "sha1-dHIq8y6WFOnCh6jQu95IteLxomM="
    },
    "source-map-support": {
-      "version": "0.5.9",
-      "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.9.tgz",
-      "integrity": "sha512-gR6Rw4MvUlYy83vP0vxoVNzM6t8MUXqNuRsuBmBHQDu1Fh6X015FrLdgoDKcNdkwGubozq0P4N0Q37UyFVr1EA==",
+      "version": "0.5.6",
+      "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.6.tgz",
+      "integrity": "sha512-N4KXEz7jcKqPf2b2vZF11lQIz9W5ZMuUcIOGj243lduidkf2fjkVKJS9vNxVWn3u/uxX38AcE8U9nnH9FPcq+g==",
      "requires": {
        "buffer-from": "^1.0.0",
        "source-map": "^0.6.0"
@@ -1502,7 +1499,7 @@
    "spawn-rx": {
      "version": "2.0.12",
      "resolved": "https://registry.npmjs.org/spawn-rx/-/spawn-rx-2.0.12.tgz",
-      "integrity": "sha512-gOPXiQQFQ9lTOLuys0iMn3jfxxv9c7zzwhbYLOEbQGvEShHVJ5sSR1oD3Daj88os7jKArDYT7rbOKdvNhe7iEg==",
+      "integrity": "sha1-tihSlEmUJgib7qDDwewy1/xXo3Y=",
      "requires": {
        "debug": "^2.5.1",
        "lodash.assign": "^4.2.0",
@@ -1570,11 +1567,6 @@
        "punycode": "^1.4.1"
      }
    },
-    "tslib": {
-      "version": "1.9.3",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.9.3.tgz",
-      "integrity": "sha512-4krF8scpejhaOgqzBEcGM7yDIEfi0/8+8zDRZhNZZ2kjmHJ4hv3zCbQWxoJGz1iw5U0Jl0nma13xzHXcncMavQ=="
-    },
    "tunnel-agent": {
      "version": "0.6.0",
      "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz",
@@ -1636,12 +1628,6 @@
        "object.getownpropertydescriptors": "^2.0.3"
      }
    },
-    "uuid": {
-      "version": "3.3.2",
-      "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.3.2.tgz",
-      "integrity": "sha512-yXJmeNaw3DnnKAOKJE51sL/ZaYfWJRl1pK9dr19YFCu0ObS231AB1/LbqTKRAQ5kw8A90rA6fr4riOUpTZvQZA==",
-      "optional": true
-    },
    "verror": {
      "version": "1.10.0",
      "resolved": "https://registry.npmjs.org/verror/-/verror-1.10.0.tgz",
--- a/app/package.json
+++ b/app/package.json
@@ -1,7 +1,7 @@
 {
  "name": "zulip",
  "productName": "Zulip",
-  "version": "3.1.0-beta",
+  "version": "2.3.6",
  "description": "Zulip Desktop App",
  "license": "Apache-2.0",
  "copyright": "Kandra Labs, Inc.",
@@ -11,10 +11,10 @@
  },
  "repository": {
    "type": "git",
-    "url": "https://github.com/zulip/zulip-desktop.git"
+    "url": "https://github.com/zulip/zulip-electron.git"
  },
  "bugs": {
-    "url": "https://github.com/zulip/zulip-desktop/issues"
+    "url": "https://github.com/zulip/zulip-electron/issues"
  },
  "main": "main/index.js",
  "keywords": [
@@ -26,24 +26,23 @@
    "InstantMessaging"
  ],
  "dependencies": {
-    "@electron-elements/send-feedback": "1.0.8",
-    "@sentry/electron": "0.14.0",
+    "@electron-elements/send-feedback": "1.0.7",
+    "@sentry/electron": "0.8.1",
    "adm-zip": "0.4.11",
    "auto-launch": "5.0.5",
-    "dotenv": "8.0.0",
    "electron-is-dev": "0.3.0",
    "electron-log": "2.2.14",
    "electron-spellchecker": "1.1.2",
-    "electron-updater": "4.0.6",
-    "electron-window-state": "5.0.3",
+    "electron-updater": "2.23.3",
+    "electron-window-state": "4.1.1",
    "escape-html": "1.0.3",
    "is-online": "7.0.0",
-    "node-json-db": "0.9.2",
+    "node-json-db": "0.7.3",
    "request": "2.85.0",
    "semver": "5.4.1",
    "wurl": "2.5.0"
  },
  "optionalDependencies": {
-    "node-mac-notifier": "1.1.0"
+    "node-mac-notifier": "0.1.0"
  }
 }
--- a/app/renderer/about.html
+++ b/app/renderer/about.html
@@ -1,47 +1,50 @@
 <!DOCTYPE html>
 <html lang="en">

-    <head>
-        <meta charset="UTF-8">
-        <link rel="stylesheet" href="css/about.css">
-        <title>Zulip - About</title>
-    </head>
+<head>
+	<meta charset="UTF-8">
+	<link rel="stylesheet" href="css/about.css">
+</head>

-    <body>
-        <div class="about">
-            <img class="logo" src="../resources/zulip.png" />
-            <p class="detail" id="version">v?.?.?</p>
-            <div class="maintenance-info">
-                <p class="detail maintainer">
-                    Maintained by
-                    <a onclick="linkInBrowser('website')">Zulip</a>
-                </p>
-                <p class="detail license">
-                    Available under the
-                    <a onclick="linkInBrowser('license')">Apache 2.0 License</a>
-                </p>
-            </div>
-        </div>
-        <script>
+<body>
+	<div class="about">
+		<img class="logo" src="../resources/zulip.png" />
+		<p class="detail" id="version">v?.?.?</p>
+		<div class="maintenance-info">
+			<p class="detail maintainer">
+				Maintained by
+				<a onclick="linkInBrowser('website')">Zulip</a>
+			</p>
+			<p class="detail license">
+				Available under the
+				<a onclick="linkInBrowser('license')">Apache 2.0 License</a>
+			</p>
+			<a class="bug" onclick="linkInBrowser('bug')" href="#">Found bug?</a>
+		</div>
+	</div>
+	<script>

-            const { app } = require('electron').remote;
-            const { shell } = require('electron');
-            const version_tag = document.querySelector('#version');
-            version_tag.innerHTML = 'v' + app.getVersion();
+		const { app } = require('electron').remote;
+		const { shell } = require('electron');
+		const version_tag = document.querySelector('#version');
+		version_tag.innerHTML = 'v' + app.getVersion();

-            function linkInBrowser(type) {
-                let url;
-                switch (type) {
-                    case 'website':
-                        url = "https://zulipchat.com";
-                        break;
-                    case 'license':
-                        url = "https://github.com/zulip/zulip-desktop/blob/master/LICENSE";
-                        break;
-                }
-                shell.openExternal(url);
-            }
-        </script>
-        <script>require('./js/shared/preventdrag.js')</script>
-    </body>
+		function linkInBrowser(type) {
+			let url;
+			switch (type) {
+				case 'website':
+					url = "https://zulipchat.com";
+					break;
+				case 'license':
+					url = "https://github.com/zulip/zulip-electron/blob/master/LICENSE";
+					break;
+				default:
+					url = 'https://github.com/zulip/zulip-electron/issues/new?body=' +
+						'%3C!--Please%20describe%20your%20issue%20and%20steps%20to%20reproduce%20it.--%3E';
+			}
+			shell.openExternal(url);
+		}
+	</script>
+	<script>require('./js/shared/preventdrag.js')</script>
+</body>
 </html>
--- a/app/renderer/css/about.css
+++ b/app/renderer/css/about.css
@@ -1,66 +1,82 @@
 body {
-    background: rgba(250, 250, 250, 1.000);
-    font-family: menu, "Helvetica Neue", sans-serif;
-    -webkit-font-smoothing: subpixel-antialiased;
+	background: #fafafa;
+	font-family: menu, "Helvetica Neue", sans-serif;
+	-webkit-font-smoothing: subpixel-antialiased;
 }

 .logo {
-    display: block;
-    margin: -40px auto;
+	display: block;
+	margin: -40px auto;
 }

 #version {
-    color: rgba(68, 67, 67, 1.000);
-    font-size: 1.3em;
-    padding-top: 40px;
+	color: #444343;
+	font-size: 1.3em;
+	padding-top: 40px;
 }

 .about {
-    margin: 25vh auto;
-    height: 25vh;
-    text-align: center;
+	margin: 25vh auto;
+	height: 25vh;
+	text-align: center;
 }

 .about p {
-    font-size: 20px;
-    color: rgba(0, 0, 0, 0.62);
+	font-size: 20px;
+	color: rgba(0, 0, 0, 0.62);
 }

 .about img {
-    width: 150px;
+	width: 150px;
 }

 .detail {
-    text-align: center;
+	text-align: center;
 }

 .detail.maintainer {
-    font-size: 1.2em;
-    font-weight: 500;
+	font-size: 1.2em;
+	font-weight: 500;
 }

 .detail.license {
-    font-size: 0.8em;
+	font-size: 0.8em;
 }

 .maintenance-info {
-    cursor: pointer;
-    position: absolute;
-    width: 100%;
-    left: 0px;
-    color: rgba(68, 68, 68, 1.000);
+	cursor: pointer;
+	position: absolute;
+	width: 100%;
+	left: 0px;
+	color: #444;
 }

 .maintenance-info p {
-    margin: 0;
-    font-size: 1em;
-    width: 100%;
+	margin: 0;
+	font-size: 1em;
+	width: 100%;
+}
+
+.maintenance-info .bug {
+	display: inline-block;
+	padding: 8px 15px;
+	margin-top: 30px;
+	text-decoration: none;
+	background-color: #52c2af;
+	color: #fff;
+	border-radius: 4px;
+
+	transition: background-color 0.2s ease;
+}
+
+.maintenance-info .bug:hover {
+	background-color: #32a692;
 }

 p.detail a {
-    color: rgba(53, 95, 76, 1.000);
+	color: #355f4c;
 }

 p.detail a:hover {
-    text-decoration: underline;
+	text-decoration: underline;
 }
--- a/app/renderer/css/main.css
+++ b/app/renderer/css/main.css
@@ -16,7 +16,7 @@ body {
 }

 .toggle-sidebar {
-    background: rgba(34, 44, 49, 1.000);
+    background: #222c31;
    width: 54px;
    padding: 27px 0 20px 0;
    justify-content: space-between;
@@ -43,25 +43,25 @@ body {
 }

 #view-controls-container {
-    height: calc(100% - 208px);
-    overflow-y: hidden;
+	height: calc(100% - 208px);
+	overflow-y: hidden;
 }

 #view-controls-container:hover {
-    overflow-y: overlay;
+	overflow-y: overlay;
 }

 #view-controls-container::-webkit-scrollbar {
-    width: 4px;
+	width: 4px;
 }

 #view-controls-container::-webkit-scrollbar-track {
-    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+    box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
 }

 #view-controls-container::-webkit-scrollbar-thumb {
-    background-color: rgba(169, 169, 169, 1.000);
-    outline: 1px solid rgba(169, 169, 169, 1.000);
+  background-color: darkgrey;
+  outline: 1px solid slategrey;
 }

@font-face {
@@ -119,12 +119,12 @@ body {
 }

 .action-button i {
-    color: rgba(108, 133, 146, 1.000);
+    color: #6c8592;
    font-size: 28px;
 }

 .action-button:hover i {
-    color: rgba(152, 169, 179, 1.000);
+    color: #98a9b3;
 }

 .action-button.disable {
@@ -136,22 +136,22 @@ body {
 }

 .action-button.disable:hover i {
-    color: rgba(108, 133, 146, 1.000);
+    color: #6c8592;
 }

 .action-button.active {
    /* background-color: rgba(255, 255, 255, 0.25); */
-    background-color: rgba(239, 239, 239, 1.000);
+    background-color: #efefef;
    opacity: 0.9;
    padding-right: 14px;
 }

 .action-button.active i {
-    color: rgba(28, 38, 43, 1.000);
+    color: #1c262b;
 }

 .tab:first-child {
-    margin-top: 9px;
+    margin-top: 8px;
 }

 .tab {
@@ -165,33 +165,25 @@ body {
 }

 .tab .server-icons {
-    width: 35px;
+    border-radius: 50%;
+    width: 30px;
+    padding: 3px;
+    height: 30px;
    vertical-align: top;
-    border-radius: 4px;
 }

 .tab .server-tab {
    width: 100%;
    height: 35px;
    position: relative;
-    margin-top: 5px;
+    margin: 5px 0 2px 0;
    z-index: 11;
    line-height: 31px;
-    color: rgba(238, 238, 238, 1.000);
+    color: #eee;
    text-align: center;
    overflow: hidden;
    opacity: 0.6;
-    padding: 6px 0;
-}
-
-.server-tab .alt-icon {
-    font-family: Verdana;
-    font-weight: 600;
-    font-size: 22px;
-    border: 2px solid rgba(34, 44, 49, 1.000);
-    margin-left: 17%;
-    width: 35px;
-    border-radius: 4px;
+    padding: 2px 0;
 }

 .tab .server-tab:hover {
@@ -216,7 +208,7 @@ body {

 .tab.active .server-tab {
    opacity: 1;
-    background-color: rgba(100, 132, 120, 1.000);
+    background-color: #648478;
 }

 .tab .server-tab-badge.active {
@@ -224,7 +216,7 @@ body {
    min-width: 11px;
    padding: 0 3px;
    height: 17px;
-    background-color: rgba(244, 67, 54, 1.000);
+    background-color: #f44336;
    font-size: 10px;
    font-family: sans-serif;
    position: absolute;
@@ -232,7 +224,7 @@ body {
    z-index: 15;
    top: 6px;
    float: right;
-    color: rgba(255, 255, 255, 1.000);
+    color: #fff;
    text-align: center;
    line-height: 17px;
    display: block;
@@ -260,25 +252,13 @@ body {
 }

 .tab .server-tab-shortcut {
-    color: rgba(100, 132, 120, 1.000);
+    color: #648478;
    font-size: 12px;
    text-align: center;
    font-family: sans-serif;
    margin-bottom: 5px;
 }

-.refresh {
-    animation: rotate-loader 1s linear infinite;
-}
-
-@keyframes rotate-loader {
-    from {
-        transform: rotate(0);
-    }
-    to {
-        transform: rotate(-360deg);
-    }
-}

 /*******************
  *   Webview Area  *
@@ -290,19 +270,19 @@ body {
    width: 100%;
 }

-/* Pseudo element for loading indicator */
+/*Pseudo element for loading indicator*/
 #webviews-container::before {
    content: "";
    position: absolute;
    z-index: 1;
-    background: rgba(255, 255, 255, 1.000) url(../img/ic_loading.gif) no-repeat;
+    background: #fff url(../img/ic_loading.gif) no-repeat;
    background-size: 60px 60px;
    background-position: center;
    width: 100%;
    height: 100%;
 }

-/* When the active webview is loaded */
+/*When the active webview is loaded*/
 #webviews-container.loaded::before {
    opacity: 0;
    z-index: -1;
@@ -340,34 +320,32 @@ webview.focus {

 /* Tooltip styling */

-#loading-tooltip,
 #dnd-tooltip,
 #back-tooltip,
 #reload-tooltip,
 #setting-tooltip {
    font-family: sans-serif;
-    background: rgba(34, 44, 49, 1.000);
+    background: #222c31;
    margin-left: 48px;
    padding: 6px 8px;
    position: absolute;
    margin-top: 0px;
    z-index: 1000;
-    color: rgba(255, 255, 255, 1.000);
+    color: white;
    border-radius: 4px;
    text-align: center;
    width: 55px;
    font-size: 14px;
 }

-#loading-tooltip::after,
-#dnd-tooltip::after,
-#back-tooltip::after,
-#reload-tooltip::after,
-#setting-tooltip::after {
+#dnd-tooltip:after,
+#back-tooltip:after,
+#reload-tooltip:after,
+#setting-tooltip:after {
    content: " ";
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
-    border-right: 8px solid rgba(34, 44, 49, 1.000);
+    border-right: 8px solid #222c31;
    position: absolute;
    top: 7px;
    right: 68px;
@@ -376,25 +354,25 @@ webview.focus {
 #add-server-tooltip,
 .server-tooltip {
    font-family: 'arial';
-    background: rgba(34, 44, 49, 1.000);
+    background: #222c31;
    left: 56px;
    padding: 10px 20px;
    position: fixed;
-    margin-top: 11px;
+    margin-top: 8px;
    z-index: 5000 !important;
-    color: rgba(255, 255, 255, 1.000);
+    color: #fff;
    border-radius: 4px;
    text-align: center;
    width: max-content;
    font-size: 14px;
 }

-#add-server-tooltip::after,
-.server-tooltip::after {
+#add-server-tooltip:after,
+.server-tooltip:after {
    content: " ";
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
-    border-right: 8px solid rgba(34, 44, 49, 1.000);
+    border-right: 8px solid #222c31;
    position: absolute;
    top: 10px;
    left: -5px;
@@ -406,14 +384,14 @@ webview.focus {
    position: absolute;
    width: 24px;
    height: 24px;
-    background: rgba(34, 44, 49, 1.000);
+    background: #222c31;
    border-radius: 20px;
    cursor: pointer;
-    box-shadow: rgba(153, 153, 153, 1.000) 1px 1px;
+    box-shadow: #999 1px 1px;
 }

 #collapse-button i {
-    color: rgba(239, 239, 239, 1.000);
+    color: #efefef;
 }

 #main-container {
@@ -434,8 +412,8 @@ webview.focus {

 .popup .popuptext {
    visibility: hidden;
-    background-color: rgba(85, 85, 85, 1.000);
-    color: rgba(255, 255, 255, 1.000);
+    background-color: #555;
+    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 9px 0;
@@ -467,24 +445,24 @@ webview.focus {
 }

 send-feedback {
-    width: 60%;
-    height: 85%;
+  width: 60%;
+  height: 85%;
 }

 #feedback-modal {
-    display: none;
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: rgba(68, 67, 67, 0.81);
-    align-items: center;
-    justify-content: center;
-    z-index: 2;
-    transition: all 1s ease-out;
+  display: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(68, 67, 67, 0.81);
+  align-items: center;
+  justify-content: center;
+  z-index: 2;
+  transition: all 1s ease-out;
 }

 #feedback-modal.show {
-    display: flex;
+  display: flex;
 }
--- a/app/renderer/css/network.css
+++ b/app/renderer/css/network.css
@@ -1,11 +1,10 @@
-html,
-body {
+html, body {
    margin: 0;
    cursor: default;
    font-size: 14px;
-    color: rgba(51, 51, 51, 1.000);
-    background: rgba(255, 255, 255, 1.000);
-    user-select: none;
+    color: #333;
+    background: #fff;
+    user-select:none;
 }

 #content {
@@ -28,8 +27,8 @@ body {

 #reconnect {
    font-size: 16px;
-    background: rgba(0, 150, 136, 1.000);
-    color: rgba(255, 255, 255, 1.000);
+    background: #009688;
+    color: #fff;
    width: 84px;
    height: 32px;
    border-radius: 5px;
--- a/app/renderer/css/preference.css
+++ b/app/renderer/css/preference.css
@@ -7,25 +7,23 @@ body {
    font-family: menu, "Helvetica Neue", sans-serif;
    -webkit-font-smoothing: antialiased;
    font-size: 14px;
-    background: rgba(239, 239, 239, 1.000);
-    letter-spacing: -.08px;
-    line-height: 18px;
-    color: rgba(139, 142, 143, 1.000);
+    color: #333;
+    background: #efefef;
 }

 kbd {
    display: inline-block;
-    border: 1px solid rgba(204, 204, 204, 1.000);
-    border-radius: 4px;
+    border: 1px solid #ccc;
+    border-radius: 3px;
    font-size: 15px;
    font-family: Courier New, Courier, monospace;
    font-weight: bold;
    white-space: nowrap;
-    background-color: rgba(247, 247, 247, 1.000);
-    color: rgba(51, 51, 51, 1.000);
+    background-color: #f7f7f7;
+    color: #333;
    margin: 0 0.1em;
    padding: 0.3em 0.8em;
-    text-shadow: 0 1px 0 rgba(255, 255, 255, 1.000);
+    text-shadow: 0 1px 0 #fff;
    line-height: 1.4;
 }

@@ -33,7 +31,7 @@ table,
 th,
 td {
    border-collapse: collapse;
-    color: rgba(56, 52, 48, 1.000);
+    color: #383430;
 }

 table {
@@ -43,11 +41,11 @@ table {
 }

 table tr:nth-child(even) {
-    background-color: rgba(250, 250, 250, 1.000);
+    background-color: #fafafa;
 }

 table tr:nth-child(odd) {
-    background-color: rgba(255, 255, 255, 1.000);
+    background-color: #fff;
 }

 td {
@@ -103,7 +101,7 @@ td:nth-child(odd) {
    display: flex;
    flex-direction: column;
    font-size: 16px;
-    background: rgba(242, 242, 242, 1.000);
+    background: #f2f2f2;
 }

 #nav-container {
@@ -111,19 +109,19 @@ td:nth-child(odd) {
 }

 .nav {
-    padding: 7px 0;
-    color: rgba(153, 153, 153, 1.000);
+    padding: 5px 0;
+    color: #999;
    cursor: pointer;
 }

 .nav.active {
-    color: rgba(78, 191, 172, 1.000);
+    color: #4ebfac;
    cursor: default;
    position: relative;
 }

 .nav.active::before {
-    background: rgba(70, 78, 90, 1.000);
+    background: #464e5a;
    width: 3px;
    height: 18px;
    position: absolute;
@@ -131,6 +129,7 @@ td:nth-child(odd) {
    content: '';
 }

+
 /* We don't want to show this in nav item since we have the + button for adding an Organization */

 #nav-AddServer {
@@ -139,7 +138,7 @@ td:nth-child(odd) {

 #settings-header {
    font-size: 22px;
-    color: rgba(34, 44, 49, 1.000);
+    color: #222c31;
    font-weight: bold;
    text-transform: uppercase;
 }
@@ -159,11 +158,11 @@ td:nth-child(odd) {

 .title {
    font-weight: 500;
-    color: rgba(34, 44, 49, 1.000);
+    color: #222c31;
 }

 .page-title {
-    color: rgba(34, 44, 49, 1.000);
+    color: #222c31;
    font-size: 15px;
    font-weight: bold;
    padding: 4px 0 6px 0;
@@ -182,13 +181,13 @@ td:nth-child(odd) {
 .sub-title {
    padding: 4px 0 6px 0;
    font-weight: bold;
-    color: rgba(97, 97, 97, 1.000);
+    color: #616161;
 }

 img.server-info-icon {
    width: 36px;
    height: 36px;
-    padding: 4px 4px 4px 10px;
+    padding: 4px;
    cursor: pointer;
    vertical-align: middle;
 }
@@ -247,20 +246,16 @@ img.server-info-icon {
 .setting-input-value {
    flex-grow: 1;
    font-size: 14px;
-    border-radius: 4px;
+    border-radius: 3px;
    padding: 13px;
-    border: rgba(237, 237, 237, 1.000) 2px solid;
+    border: #ededed 2px solid;
    outline-width: 0;
    background: transparent;
    max-width: 450px;
 }

 .setting-input-value:focus {
-    border: rgba(78, 191, 172, 1.000) 2px solid;
-}
-
-.invalid-input-value:focus {
-    border: rgba(239, 83, 80, 1) 2px solid;
+    border: #4EBFAC 2px solid;
 }

 .manual-proxy-block {
@@ -270,7 +265,7 @@ img.server-info-icon {
 .actions-container {
    display: flex;
    font-size: 14px;
-    color: rgba(35, 93, 58, 1.000);
+    color: #235d3a;
    vertical-align: middle;
    margin: 10px 0;
    flex-wrap: wrap;
@@ -291,7 +286,6 @@ img.server-info-icon {

 .settings-pane {
    flex-grow: 1;
-    min-width: 550px;
 }

 .action:hover {
@@ -303,7 +297,7 @@ img.server-info-icon {
 }

 .action.disabled {
-    color: rgba(153, 153, 153, 1.000);
+    color: #999;
 }

 .settings-card {
@@ -311,8 +305,8 @@ img.server-info-icon {
    flex-wrap: wrap;
    padding: 12px 30px;
    margin: 10px 0 20px 0;
-    background: rgba(255, 255, 255, 1.000);
-    width: 80%;
+    background: #fff;
+    width: 70%;
    transition: all 0.2s;
 }

@@ -326,59 +320,29 @@ img.server-info-icon {
 }

 .red {
-    color: rgb(240, 148, 148);
-    background: rgba(255, 255, 255, 1.000);
-    border-radius: 4px;
-    display: inline-block;
-    border: 2px solid rgb(240, 148, 148);
-    padding: 10px;
-    width: 100px;
-    cursor: pointer;
-    font-size: 1rem;
-    font-weight: bold;
-    transition: background-color 0.2s ease;
-    text-decoration: none;
-    text-align: center;
+    color: #ef5350;
+    padding: 8px;
+    border: rgba(239, 83, 80, 0.5) solid 1px;
 }

 .red:hover {
-    background-color: rgb(240, 148, 148);
-    color: rgba(255, 255, 255, 1.000);
+    color: #e63431;
+    border: rgba(239, 83, 80, 0.7) solid 1px;
+    ;
 }

-.green {
-    color: rgba(255, 255, 255, 1.000);
-    background: rgba(78, 191, 172, 1.000);
-    border-radius: 4px;
-    display: inline-block;
-    border: none;
-    padding: 10px;
-    width: 100px;
-    cursor: pointer;
-    font-size: 1rem;
-    font-weight: bold;
-    transition: background-color 0.2s ease;
-    text-decoration: none;
-    text-align: center;
-}
-
-.green:hover {
-    background-color: rgba(60, 159, 141, 1.000);
-    color: rgba(255, 255, 255, 1.000);
-}
-
-.w-150 {
-    width: 150px;
-}
-
-.w-250 {
-    width: 250px;
+.blue {
+    color: #ffffff;
+    background: #4EBFAC;
+    padding: 3px;
+    padding-right: 10px;
+    padding-left: 10px;
 }

 .grey {
-    color: rgba(158, 158, 158, 1.000);
-    background: rgba(250, 250, 250, 1.000);
-    border: 1px solid rgba(158, 158, 158, 1.000);
+    color: #9E9E9E;
+    background: #FAFAFA;
+    border: 1px solid #9E9E9E;
 }

 .setting-row {
@@ -394,18 +358,36 @@ img.server-info-icon {
 }

 i.open-tab-button {
-    padding-left: 5px;
+    padding-left: 2px;
    font-size: 19px;
    cursor: pointer;
 }

+.reset-data-button,
+.custom-css-button,
+.download-folder-button {
+    display: inline-block;
+    border: none;
+    padding: 10px;
+    width: 120px;
+    cursor: pointer;
+    font-size: 13px;
+    transition: background-color 0.2s ease;
+    text-decoration: none;
+}
+
 .css-delete-action {
    margin-bottom: 10px;
 }

+.reset-data-button:hover {
+    background-color: #3c9f8d;
+    color: #fff;
+}
+
 .selected-css-path,
 .download-folder-path {
-    background: rgba(238, 238, 238, 1.000);
+    background: #eeeeee;
    padding: 5px 10px;
    margin-right: 10px;
    display: flex;
@@ -418,11 +400,7 @@ i.open-tab-button {
 }

 #server-info-container {
-    /* min-height: calc(100% - 260px); */
-}
-
-#new-org-button {
-    margin: 30px 0px 30px 0px;
+    min-height: calc(100% - 260px);
 }

 #create-organization-container {
@@ -445,7 +423,7 @@ i.open-tab-button {
    visibility: hidden;
 }

-.toggle + label {
+.toggle+label {
    display: block;
    position: relative;
    cursor: pointer;
@@ -453,16 +431,16 @@ i.open-tab-button {
    user-select: none;
 }

-input.toggle-round + label {
+input.toggle-round+label {
    padding: 2px;
    width: 50px;
    height: 25px;
-    background-color: rgba(221, 221, 221, 1.000);
+    background-color: #dddddd;
    border-radius: 25px;
 }

-input.toggle-round + label::before,
-input.toggle-round + label::after {
+input.toggle-round+label:before,
+input.toggle-round+label:after {
    display: block;
    position: absolute;
    top: 2px;
@@ -471,34 +449,28 @@ input.toggle-round + label::after {
    content: "";
 }

-input.toggle-round + label::before {
-    background-color: rgba(241, 241, 241, 1.000);
+input.toggle-round+label:before {
+    right: 2px;
+    background-color: #f1f1f1;
    border-radius: 25px;
-    top: 0;
-    right: 0px;
-    left: 0px;
-    bottom: 0px;
 }

-input.toggle-round + label::after {
+input.toggle-round+label:after {
    width: 25px;
    height: 25px;
-    background-color: rgba(255, 255, 255, 1.000);
+    background-color: #fff;
    border-radius: 100%;
 }

-input.toggle-round:checked + label::before {
-    background-color: rgba(78, 191, 172, 1.000);
-    top: 0;
-    right: 0px;
-    left: 0px;
-    bottom: 0px;
+input.toggle-round:checked+label:before {
+    background-color: #4EBFAC;
 }

-input.toggle-round:checked + label::after {
+input.toggle-round:checked+label:after {
    margin-left: 25px;
 }

+
 /*  Add new server modal */

 .add-server-modal {
@@ -512,17 +484,18 @@ input.toggle-round:checked + label::after {
    width: 100%;
    height: 100%;
    /* background: rgba(61, 64, 67, 15); */
-    background: linear-gradient(35deg, rgba(0, 59, 82, 1.000), rgba(69, 181, 155, 1.000));
+    background: linear-gradient(35deg, #003b52, #45b59b);
    overflow: auto;
 }

+
 /* Modal Content */

 .modal-container {
-    background-color: rgba(244, 247, 248, 1.000);
+    background-color: #f4f7f8;
    margin: auto;
    padding: 57px;
-    border: rgba(218, 225, 227, 1.000) 1px solid;
+    border: #dae1e3 1px solid;
    width: 550px;
    height: 370px;
    border-radius: 4px;
@@ -536,7 +509,7 @@ input.toggle-round:checked + label::after {
 .divider {
    margin-bottom: 30px;
    margin-top: 30px;
-    color: rgba(125, 135, 138, 1.000);
+    color: #7d878a;
 }

 .divider hr {
@@ -567,54 +540,53 @@ input.toggle-round:checked + label::after {
    margin: auto;
    align-items: center;
    text-align: center;
-    color: rgba(255, 255, 255, 1.000);
-    background: rgba(78, 191, 172, 1.000);
+    color: #fff;
+    background: #4EBFAC;
    border-color: none;
    border: none;
    width: 98%;
    height: 46px;
-    border-radius: 4px;
+    border-radius: 3px;
    cursor: pointer;
 }

 .server-center button:hover {
-    background: rgba(50, 149, 136, 1.000);
+    background: #329588;
 }

 .server-center button:focus {
-    background: rgba(50, 149, 136, 1.000);
+    background: #329588;
 }

 .certificates-card {
-    width: 80%;
+     width:70%
 }

 .certificate-input {
-    width: 100%;
-    margin-top: 10px;
-    display: inline-flex;
+     width:100%;
+     margin-top: 10px;
+     display:inline-flex;
 }

 .certificate-input div {
-    align-self: center;
+    align-self:center;
 }

 .certificate-input .setting-input-value {
-    margin-left: 10px;
+    margin-left:10px;
    max-width: 100%;
 }

 #add-certificate-button {
-    margin: 10px 10px 10px 37px;
+    width:20%;
+    margin-right:0px;
+    height: 35px;
 }

 .tip {
-    background: none;
-    padding: 0;
-}
-
-.tip:hover {
-    box-shadow: none;
+    background-color: hsl(46,63%,95%);
+    border: 1px solid hsl(46,63%,84%);
+    border-radius: 4px;
 }

 .md-14 {
@@ -632,7 +604,7 @@ input.toggle-round:checked + label::after {

@media (max-width: 650px) {
    .selected-css-path,
-    .download-folder-path {
+    .download-folder-path  {
        margin-right: 15px;
    }
    #css-delete-action {
@@ -682,10 +654,12 @@ input.toggle-round:checked + label::after {
        flex-direction: column;
        align-items: center;
    }
+
    .server-info-right {
        flex-direction: column;
        align-items: center;
    }
+
    .action {
        margin-top: 10px;
    }
--- a/app/renderer/css/preload.css
+++ b/app/renderer/css/preload.css
@@ -1,9 +1,9 @@
 /* Override css rules */

-.portico-wrap > .header {
+.portico-wrap>.header {
    display: none;
 }

-.portico-container > .footer {
+.portico-container>.footer {
    display: none;
 }
--- a/app/renderer/js/components/base.js
+++ b/app/renderer/js/components/base.js
@@ -1,11 +1,11 @@
 'use strict';

 class BaseComponent {
-	generateNodeFromTemplate(template: string): Element | null {
+	generateNodeFromTemplate(template) {
 		const wrapper = document.createElement('div');
 		wrapper.innerHTML = template;
 		return wrapper.firstElementChild;
 	}
 }

-export = BaseComponent;
+module.exports = BaseComponent;
--- a/app/renderer/js/components/functional-tab.js
+++ b/app/renderer/js/components/functional-tab.js
@@ -1,10 +1,9 @@
 'use strict';

-import Tab = require('./tab');
+const Tab = require(__dirname + '/../components/tab.js');

 class FunctionalTab extends Tab {
-	$closeButton: Element;
-	template(): string {
+	template() {
 		return `<div class="tab functional-tab" data-tab-id="${this.props.tabIndex}">
 					<div class="server-tab-badge close-button">
 						<i class="material-icons">close</i>
@@ -15,22 +14,16 @@ class FunctionalTab extends Tab {
 				</div>`;
 	}

-	// TODO: Typescript - This type for props should be TabProps
-	constructor(props: any) {
-		super(props);
-		this.init();
-	}
-
-	init(): void {
+	init() {
 		this.$el = this.generateNodeFromTemplate(this.template());
 		if (this.props.name !== 'Settings') {
-			this.props.$root.append(this.$el);
-			this.$closeButton = this.$el.querySelectorAll('.server-tab-badge')[0];
+			this.props.$root.appendChild(this.$el);
+			this.$closeButton = this.$el.getElementsByClassName('server-tab-badge')[0];
 			this.registerListeners();
 		}
 	}

-	registerListeners(): void {
+	registerListeners() {
 		super.registerListeners();

 		this.$el.addEventListener('mouseover', () => {
@@ -41,11 +34,11 @@ class FunctionalTab extends Tab {
 			this.$closeButton.classList.remove('active');
 		});

-		this.$closeButton.addEventListener('click', (e: Event) => {
+		this.$closeButton.addEventListener('click', e => {
 			this.props.onDestroy();
 			e.stopPropagation();
 		});
 	}
 }

-export = FunctionalTab;
+module.exports = FunctionalTab;
--- a/app/renderer/js/components/handle-external-link.js
+++ b/app/renderer/js/components/handle-external-link.js
@@ -1,15 +1,12 @@
-import { ipcRenderer, remote } from 'electron';
-
-import LinkUtil = require('../utils/link-util');
-import DomainUtil = require('../utils/domain-util');
-import ConfigUtil = require('../utils/config-util');
-
-const { shell, app } = remote;
+const { ipcRenderer } = require('electron');
+const { shell, app } = require('electron').remote;
+const LinkUtil = require('../utils/link-util');
+const DomainUtil = require('../utils/domain-util');
+const ConfigUtil = require('../utils/config-util');

 const dingSound = new Audio('../resources/sounds/ding.ogg');

-// TODO: TypeScript - Figure out a way to pass correct type here.
-function handleExternalLink(this: any, event: any): void {
+function handleExternalLink(event) {
 	const { url } = event;
 	const domainPrefix = DomainUtil.getDomain(this.props.index).url;
 	const downloadPath = ConfigUtil.getConfigItem('downloadsPath', `${app.getPath('downloads')}`);
@@ -24,23 +21,21 @@ function handleExternalLink(this: any, event: any): void {
 	if (isWhiteListURL) {
 		event.preventDefault();

-		// Code to show pdf in a new BrowserWindow (currently commented out due to bug-upstream)
 		// Show pdf attachments in a new window
-		// if (LinkUtil.isPDF(url) && isUploadsURL) {
-		// 	ipcRenderer.send('pdf-view', url);
-		// 	return;
-		// }
+
+		if (LinkUtil.isPDF(url) && isUploadsURL) {
+			ipcRenderer.send('pdf-view', url);
+			return;
+		}

 		// download txt, mp3, mp4 etc.. by using downloadURL in the
 		// main process which allows the user to save the files to their desktop
 		// and not trigger webview reload while image in webview will
 		// do nothing and will not save it

-		// Code to show pdf in a new BrowserWindow (currently commented out due to bug-upstream)
-		// if (!LinkUtil.isImage(url) && !LinkUtil.isPDF(url) && isUploadsURL) {
-		if (!LinkUtil.isImage(url) && isUploadsURL) {
+		if (!LinkUtil.isImage(url) && !LinkUtil.isPDF(url) && isUploadsURL) {
 			ipcRenderer.send('downloadFile', url, downloadPath);
-			ipcRenderer.once('downloadFileCompleted', (_event: Event, filePath: string, fileName: string) => {
+			ipcRenderer.once('downloadFileCompleted', (event, filePath, fileName) => {
 				const downloadNotification = new Notification('Download Complete', {
 					body: shouldShowInFolder ? `Click to show ${fileName} in folder` : `Click to open ${fileName}`,
 					silent: true // We'll play our own sound - ding.ogg
@@ -51,7 +46,7 @@ function handleExternalLink(this: any, event: any): void {
 					dingSound.play();
 				}

-				downloadNotification.addEventListener('click', () => {
+				downloadNotification.onclick = () => {
 					if (shouldShowInFolder) {
 						// Reveal file in download folder
 						shell.showItemInFolder(filePath);
@@ -59,7 +54,7 @@ function handleExternalLink(this: any, event: any): void {
 						// Open file in the default native app
 						shell.openItem(filePath);
 					}
-				});
+				};
 				ipcRenderer.removeAllListeners('downloadFileFailed');
 			});

@@ -80,4 +75,4 @@ function handleExternalLink(this: any, event: any): void {
 	}
 }

-export = handleExternalLink;
+module.exports = handleExternalLink;
--- a/app/renderer/js/components/server-tab.js
+++ b/app/renderer/js/components/server-tab.js
@@ -1,16 +1,14 @@
 'use strict';

-import { ipcRenderer } from 'electron';
+const Tab = require(__dirname + '/../components/tab.js');
+const SystemUtil = require(__dirname + '/../utils/system-util.js');

-import Tab = require('./tab');
-import SystemUtil = require('../utils/system-util');
+const {ipcRenderer} = require('electron');

 class ServerTab extends Tab {
-	$badge: Element;
-
-	template(): string {
+	template() {
 		return `<div class="tab" data-tab-id="${this.props.tabIndex}">
-					<div class="server-tooltip" style="display:none">${this.props.name}</div>
+					<div class="server-tooltip" style="display:none"></div>
 					<div class="server-tab-badge"></div>
 					<div class="server-tab">
 					<img class="server-icons" src='${this.props.icon}'/>
@@ -19,22 +17,16 @@ class ServerTab extends Tab {
 				</div>`;
 	}

-	// TODO: Typescript - This type for props should be TabProps
-	constructor(props: any) {
-		super(props);
-		this.init();
+	init() {
+		super.init();
+
+		this.$badge = this.$el.getElementsByClassName('server-tab-badge')[0];
 	}

-	init(): void {
-		this.$el = this.generateNodeFromTemplate(this.template());
-		this.props.$root.append(this.$el);
-		this.registerListeners();
-		this.$badge = this.$el.querySelectorAll('.server-tab-badge')[0];
-	}
-
-	updateBadge(count: number): void {
+	updateBadge(count) {
 		if (count > 0) {
-			const formattedCount = count > 999 ? '1K+' : count.toString();
+			const formattedCount = count > 999 ? '1K+' : count;
+
 			this.$badge.innerHTML = formattedCount;
 			this.$badge.classList.add('active');
 		} else {
@@ -42,7 +34,7 @@ class ServerTab extends Tab {
 		}
 	}

-	generateShortcutText(): string {
+	generateShortcutText() {
 		// Only provide shortcuts for server [0..10]
 		if (this.props.index >= 10) {
 			return '';
@@ -65,4 +57,4 @@ class ServerTab extends Tab {
 	}
 }

-export = ServerTab;
+module.exports = ServerTab;
--- a/app/renderer/js/components/tab.js
+++ b/app/renderer/js/components/tab.js
@@ -1,44 +1,48 @@
 'use strict';

-import WebView = require('./webview');
-import BaseComponent = require('./base');
-
-// TODO: TypeScript - Type annotate props
-interface TabProps {
-	[key: string]: any;
-}
+const BaseComponent = require(__dirname + '/../components/base.js');

 class Tab extends BaseComponent {
-	props: TabProps;
-	webview: WebView;
-	$el: Element;
-	constructor(props: TabProps) {
+	constructor(props) {
 		super();

 		this.props = props;
 		this.webview = this.props.webview;
+
+		this.init();
 	}

-	registerListeners(): void {
+	init() {
+		this.$el = this.generateNodeFromTemplate(this.template());
+		this.props.$root.appendChild(this.$el);
+
+		this.registerListeners();
+	}
+
+	registerListeners() {
 		this.$el.addEventListener('click', this.props.onClick);
 		this.$el.addEventListener('mouseover', this.props.onHover);
 		this.$el.addEventListener('mouseout', this.props.onHoverOut);
 	}

-	activate(): void {
+	isLoading() {
+		return this.webview.isLoading;
+	}
+
+	activate() {
 		this.$el.classList.add('active');
 		this.webview.load();
 	}

-	deactivate(): void {
+	deactivate() {
 		this.$el.classList.remove('active');
 		this.webview.hide();
 	}

-	destroy(): void {
+	destroy() {
 		this.$el.parentNode.removeChild(this.$el);
 		this.webview.$el.parentNode.removeChild(this.webview.$el);
 	}
 }

-export = Tab;
+module.exports = Tab;
--- a/app/renderer/js/components/webview.js
+++ b/app/renderer/js/components/webview.js
@@ -1,39 +1,22 @@
 'use strict';
-import { remote } from 'electron';

-import path = require('path');
-import fs = require('fs');
-import ConfigUtil = require('../utils/config-util');
-import SystemUtil = require('../utils/system-util');
-import BaseComponent = require('../components/base');
-import handleExternalLink = require('../components/handle-external-link');
+const path = require('path');
+const fs = require('fs');

-const { app, dialog } = remote;
+const ConfigUtil = require(__dirname + '/../utils/config-util.js');
+const SystemUtil = require(__dirname + '/../utils/system-util.js');
+const { app, dialog } = require('electron').remote;
+
+const BaseComponent = require(__dirname + '/../components/base.js');
+const handleExternalLink = require(__dirname + '/../components/handle-external-link.js');

 const shouldSilentWebview = ConfigUtil.getConfigItem('silent');
-
-// TODO: TypeScript - Type annotate WebViewProps.
-interface WebViewProps {
-	[key: string]: any;
-}
-
 class WebView extends BaseComponent {
-	props: any;
-	zoomFactor: number;
-	badgeCount: number;
-	loading: boolean;
-	customCSS: string;
-	$webviewsContainer: DOMTokenList;
-	$el: Electron.WebviewTag;
-
-	// This is required because in main.js we access WebView.method as
-	// webview[method].
-	[key: string]: any;
-
-	constructor(props: WebViewProps) {
+	constructor(props) {
 		super();

 		this.props = props;
+
 		this.zoomFactor = 1.0;
 		this.loading = true;
 		this.badgeCount = 0;
@@ -41,7 +24,7 @@ class WebView extends BaseComponent {
 		this.$webviewsContainer = document.querySelector('#webviews-container').classList;
 	}

-	template(): string {
+	template() {
 		return `<webview
 					class="disabled"
 					data-tab-id="${this.props.tabIndex}"
@@ -50,19 +33,18 @@ class WebView extends BaseComponent {
 					disablewebsecurity
 					${this.props.preload ? 'preload="js/preload.js"' : ''}
 					partition="persist:webviewsession"
-					name="${this.props.name}"
 					webpreferences="allowRunningInsecureContent, javascript=yes">
 				</webview>`;
 	}

-	init(): void {
-		this.$el = this.generateNodeFromTemplate(this.template()) as Electron.WebviewTag;
-		this.props.$root.append(this.$el);
+	init() {
+		this.$el = this.generateNodeFromTemplate(this.template());
+		this.props.$root.appendChild(this.$el);

 		this.registerListeners();
 	}

-	registerListeners(): void {
+	registerListeners() {
 		this.$el.addEventListener('new-window', event => {
 			handleExternalLink.call(this, event);
 		});
@@ -111,18 +93,12 @@ class WebView extends BaseComponent {
 				this.$el.classList.add('onload');
 			}
 			this.loading = false;
-			this.props.switchLoading(false, this.props.url);
 			this.show();
-
-			// Refocus text boxes after reload
-			// Remove when upstream issue https://github.com/electron/electron/issues/14474 is fixed
-			this.$el.blur();
-			this.$el.focus();
 		});

 		this.$el.addEventListener('did-fail-load', event => {
 			const { errorDescription } = event;
-			const hasConnectivityErr = SystemUtil.connectivityERR.includes(errorDescription);
+			const hasConnectivityErr = (SystemUtil.connectivityERR.indexOf(errorDescription) >= 0);
 			if (hasConnectivityErr) {
 				console.error('error', errorDescription);
 				this.props.onNetworkError();
@@ -130,10 +106,6 @@ class WebView extends BaseComponent {
 		});

 		this.$el.addEventListener('did-start-loading', () => {
-			const isSettingPage = this.props.url.includes('renderer/preference.html');
-			if (!isSettingPage) {
-				this.props.switchLoading(true, this.props.url);
-			}
 			let userAgent = SystemUtil.getUserAgent();
 			if (!userAgent) {
 				SystemUtil.setUserAgent(this.$el.getUserAgent());
@@ -141,18 +113,14 @@ class WebView extends BaseComponent {
 			}
 			this.$el.setUserAgent(userAgent);
 		});
-
-		this.$el.addEventListener('did-stop-loading', () => {
-			this.props.switchLoading(false, this.props.url);
-		});
 	}

-	getBadgeCount(title: string): number {
-		const messageCountInTitle = (/\((\d+)\)/).exec(title);
+	getBadgeCount(title) {
+		const messageCountInTitle = (/\(([0-9]+)\)/).exec(title);
 		return messageCountInTitle ? Number(messageCountInTitle[1]) : 0;
 	}

-	show(): void {
+	show() {
 		// Do not show WebView if another tab was selected and this tab should be in background.
 		if (!this.props.isActive()) {
 			return;
@@ -193,27 +161,21 @@ class WebView extends BaseComponent {
 		}
 	}

-	focus(): void {
+	focus() {
 		// focus Webview and it's contents when Window regain focus.
 		const webContents = this.$el.getWebContents();
-		// HACK: webContents.isFocused() seems to be true even without the element
-		// being in focus. So, we check against `document.activeElement`.
-		if (webContents && this.$el !== document.activeElement) {
-			// HACK: Looks like blur needs to be called on the previously focused
-			// element to transfer focus correctly, in Electron v3.0.10
-			// See https://github.com/electron/electron/issues/15718
-			(document.activeElement as HTMLElement).blur();
+		if (webContents && !webContents.isFocused()) {
 			this.$el.focus();
 			webContents.focus();
 		}
 	}

-	hide(): void {
+	hide() {
 		this.$el.classList.add('disabled');
 		this.$el.classList.remove('active');
 	}

-	load(): void {
+	load() {
 		if (this.$el) {
 			this.show();
 		} else {
@@ -221,41 +183,40 @@ class WebView extends BaseComponent {
 		}
 	}

-	zoomIn(): void {
+	zoomIn() {
 		this.zoomFactor += 0.1;
 		this.$el.setZoomFactor(this.zoomFactor);
 	}

-	zoomOut(): void {
+	zoomOut() {
 		this.zoomFactor -= 0.1;
 		this.$el.setZoomFactor(this.zoomFactor);
 	}

-	zoomActualSize(): void {
+	zoomActualSize() {
 		this.zoomFactor = 1.0;
 		this.$el.setZoomFactor(this.zoomFactor);
 	}

-	logOut(): void {
+	logOut() {
 		this.$el.executeJavaScript('logout()');
 	}

-	showShortcut(): void {
+	showShortcut() {
 		this.$el.executeJavaScript('shortcut()');
 	}

-	openDevTools(): void {
+	openDevTools() {
 		this.$el.openDevTools();
 	}

-	back(): void {
+	back() {
 		if (this.$el.canGoBack()) {
 			this.$el.goBack();
-			this.focus();
 		}
 	}

-	canGoBackButton(): void {
+	canGoBackButton() {
 		const $backButton = document.querySelector('#actions-container #back-action');
 		if (this.$el.canGoBack()) {
 			$backButton.classList.remove('disable');
@@ -264,13 +225,13 @@ class WebView extends BaseComponent {
 		}
 	}

-	forward(): void {
+	forward() {
 		if (this.$el.canGoForward()) {
 			this.$el.goForward();
 		}
 	}

-	reload(): void {
+	reload() {
 		this.hide();
 		// Shows the loading indicator till the webview is reloaded
 		this.$webviewsContainer.remove('loaded');
@@ -278,9 +239,9 @@ class WebView extends BaseComponent {
 		this.$el.reload();
 	}

-	send(channel: string, ...param: any[]): void {
-		this.$el.send(channel, ...param);
+	send(...param) {
+		this.$el.send(...param);
 	}
 }

-export = WebView;
+module.exports = WebView;
--- a/app/renderer/js/electron-bridge.js
+++ b/app/renderer/js/electron-bridge.js
@@ -1,20 +1,17 @@
-import { ipcRenderer } from 'electron';
-
-import events = require('events');
-
-type ListenerType = ((...args: any[]) => void);
+const events = require('events');
+const { ipcRenderer } = require('electron');

 // we have and will have some non camelcase stuff
 // while working with zulip so just turning the rule off
 // for the whole file.
-/* eslint-disable @typescript-eslint/camelcase */
+/* eslint-disable camelcase */
 class ElectronBridge extends events {
-	send_event(eventName: string | symbol, ...args: any[]): void {
-		this.emit(eventName, ...args);
+	send_event(...args) {
+		this.emit(...args);
 	}

-	on_event(eventName: string, listener: ListenerType): void {
-		this.on(eventName, listener);
+	on_event(...args) {
+		this.on(...args);
 	}
 }

@@ -24,9 +21,8 @@ electron_bridge.on('total_unread_count', (...args) => {
 	ipcRenderer.send('unread-count', ...args);
 });

-electron_bridge.on('realm_name', realmName => {
-	const serverURL = location.origin;
-	ipcRenderer.send('realm-name-changed', serverURL, realmName);
+electron_bridge.on('realm_name', (...args) => {
+	ipcRenderer.send('realm-name-changed', ...args);
 });

 electron_bridge.on('realm_icon_url', iconURL => {
@@ -40,6 +36,4 @@ electron_bridge.on('realm_icon_url', iconURL => {
 // functions zulip side will emit event using ElectronBrigde.send_event
 // which is alias of .emit and on this side we can handle the data by adding
 // a listener for the event.
-export = electron_bridge;
-
-/* eslint-enable @typescript-eslint/camelcase */
+module.exports = electron_bridge;
--- a/app/renderer/js/feedback.js
+++ b/app/renderer/js/feedback.js
@@ -1,16 +1,7 @@
-import { remote } from 'electron';
-import SendFeedback from '@electron-elements/send-feedback';
-
-import path = require('path');
-import fs = require('fs');
-
-const { app } = remote;
-
-interface SendFeedback extends HTMLElement {
-	[key: string]: any;
-}
-
-type SendFeedbackType = SendFeedback;
+const { app } = require('electron').remote;
+const path = require('path');
+const fs = require('fs');
+const SendFeedback = require('@electron-elements/send-feedback');

 // make the button color match zulip app's theme
 SendFeedback.customStyles = `
@@ -31,8 +22,8 @@ button {
 `;

 customElements.define('send-feedback', SendFeedback);
-export const sendFeedback: SendFeedbackType = document.querySelector('send-feedback');
-export const feedbackHolder = sendFeedback.parentElement;
+const sendFeedback = document.querySelector('send-feedback');
+const feedbackHolder = sendFeedback.parentElement;

 // customize the fields of custom elements
 sendFeedback.title = 'Report Issue';
@@ -47,9 +38,9 @@ sendFeedback.useReporter('emailReporter', {
 	email: 'akash@zulipchat.com'
 });

-feedbackHolder.addEventListener('click', (e: Event) => {
-	// only remove the class if the grey out faded
-	// part is clicked and not the feedback element itself
+feedbackHolder.addEventListener('click', e => {
+  // only remove the class if the grey out faded
+  // part is clicked and not the feedback element itself
 	if (e.target === e.currentTarget) {
 		feedbackHolder.classList.remove('show');
 	}
@@ -64,3 +55,8 @@ sendFeedback.addEventListener('feedback-submitted', () => {
 const dataDir = app.getPath('userData');
 const logsDir = path.join(dataDir, '/Logs');
 sendFeedback.logs.push(...fs.readdirSync(logsDir).map(file => path.join(logsDir, file)));
+
+module.exports = {
+	feedbackHolder,
+	sendFeedback
+};
--- a/app/renderer/js/main.js
+++ b/app/renderer/js/main.js
@@ -1,138 +1,58 @@
 'use strict';

-import { ipcRenderer, remote, clipboard, shell } from 'electron';
-import { feedbackHolder } from './feedback';
+const { ipcRenderer, remote } = require('electron');
+const isDev = require('electron-is-dev');

-import path = require('path');
-import escape = require('escape-html');
-import isDev = require('electron-is-dev');
-const { session, app, Menu, dialog } = remote;
+const { session, app } = remote;

-// eslint-disable-next-line import/no-unassigned-import
-require('./tray');
-
-import DomainUtil = require('./utils/domain-util');
-import WebView = require('./components/webview');
-import ServerTab = require('./components/server-tab');
-import FunctionalTab = require('./components/functional-tab');
-import ConfigUtil = require('./utils/config-util');
-import DNDUtil = require('./utils/dnd-util');
-import ReconnectUtil = require('./utils/reconnect-util');
-import Logger = require('./utils/logger-util');
-import CommonUtil = require('./utils/common-util');
+require(__dirname + '/js/tray.js');
+const DomainUtil = require(__dirname + '/js/utils/domain-util.js');
+const WebView = require(__dirname + '/js/components/webview.js');
+const ServerTab = require(__dirname + '/js/components/server-tab.js');
+const FunctionalTab = require(__dirname + '/js/components/functional-tab.js');
+const ConfigUtil = require(__dirname + '/js/utils/config-util.js');
+const DNDUtil = require(__dirname + '/js/utils/dnd-util.js');
+const ReconnectUtil = require(__dirname + '/js/utils/reconnect-util.js');
+const Logger = require(__dirname + '/js/utils/logger-util.js');
+const { feedbackHolder } = require(__dirname + '/js/feedback.js');

 const logger = new Logger({
 	file: 'errors.log',
 	timestamp: true
 });

-interface FunctionalTabProps {
-	name: string;
-	materialIcon: string;
-	url: string;
-}
-
-interface AnyObject {
-	[key: string]: any;
-}
-
-interface SettingsOptions {
-	autoHideMenubar: boolean;
-	trayIcon: boolean;
-	useManualProxy: boolean;
-	useSystemProxy: boolean;
-	showSidebar: boolean;
-	badgeOption: boolean;
-	startAtLogin: boolean;
-	startMinimized: boolean;
-	enableSpellchecker: boolean;
-	showNotification: boolean;
-	autoUpdate: boolean;
-	betaUpdate: boolean;
-	errorReporting: boolean;
-	customCSS: boolean;
-	silent: boolean;
-	lastActiveTab: number;
-	dnd: boolean;
-	dndPreviousSettings: {
-		showNotification: boolean;
-		silent: boolean;
-		flashTaskbarOnMessage?: boolean;
-	};
-	downloadsPath: string;
-	showDownloadFolder: boolean;
-	flashTaskbarOnMessage?: boolean;
-	dockBouncing?: boolean;
-	loading?: AnyObject;
-}
-
-const rendererDirectory = path.resolve(__dirname, '..');
-type ServerOrFunctionalTab = ServerTab | FunctionalTab;
-
 class ServerManagerView {
-	$addServerButton: HTMLButtonElement;
-	$tabsContainer: Element;
-	$reloadButton: HTMLButtonElement;
-	$loadingIndicator: HTMLButtonElement;
-	$settingsButton: HTMLButtonElement;
-	$webviewsContainer: Element;
-	$backButton: HTMLButtonElement;
-	$dndButton: HTMLButtonElement;
-	$addServerTooltip: HTMLElement;
-	$reloadTooltip: HTMLElement;
-	$loadingTooltip: HTMLElement;
-	$settingsTooltip: HTMLElement;
-	$serverIconTooltip: HTMLCollectionOf<HTMLElement>;
-	$backTooltip: HTMLElement;
-	$dndTooltip: HTMLElement;
-	$sidebar: Element;
-	$fullscreenPopup: Element;
-	$fullscreenEscapeKey: string;
-	loading: AnyObject;
-	activeTabIndex: number;
-	tabs: ServerOrFunctionalTab[];
-	functionalTabs: AnyObject;
-	tabIndex: number;
 	constructor() {
-		this.$addServerButton = document.querySelector('#add-tab');
-		this.$tabsContainer = document.querySelector('#tabs-container');
+		this.$addServerButton = document.getElementById('add-tab');
+		this.$tabsContainer = document.getElementById('tabs-container');

-		const $actionsContainer = document.querySelector('#actions-container');
+		const $actionsContainer = document.getElementById('actions-container');
 		this.$reloadButton = $actionsContainer.querySelector('#reload-action');
-		this.$loadingIndicator = $actionsContainer.querySelector('#loading-action');
 		this.$settingsButton = $actionsContainer.querySelector('#settings-action');
-		this.$webviewsContainer = document.querySelector('#webviews-container');
+		this.$webviewsContainer = document.getElementById('webviews-container');
 		this.$backButton = $actionsContainer.querySelector('#back-action');
 		this.$dndButton = $actionsContainer.querySelector('#dnd-action');

-		this.$addServerTooltip = document.querySelector('#add-server-tooltip');
+		this.$addServerTooltip = document.getElementById('add-server-tooltip');
 		this.$reloadTooltip = $actionsContainer.querySelector('#reload-tooltip');
-		this.$loadingTooltip = $actionsContainer.querySelector('#loading-tooltip');
 		this.$settingsTooltip = $actionsContainer.querySelector('#setting-tooltip');
-
-		// TODO: This should have been querySelector but the problem is that
-		// querySelector doesn't return elements not present in dom whereas somehow
-		// getElementsByClassName does. To fix this we need to call this after this.initTabs
-		// is called in this.init.
-		// eslint-disable-next-line unicorn/prefer-query-selector
-		this.$serverIconTooltip = document.getElementsByClassName('server-tooltip') as HTMLCollectionOf<HTMLElement>;
+		this.$serverIconTooltip = document.getElementsByClassName('server-tooltip');
 		this.$backTooltip = $actionsContainer.querySelector('#back-tooltip');
 		this.$dndTooltip = $actionsContainer.querySelector('#dnd-tooltip');

-		this.$sidebar = document.querySelector('#sidebar');
+		this.$sidebar = document.getElementById('sidebar');

-		this.$fullscreenPopup = document.querySelector('#fullscreen-popup');
+		this.$fullscreenPopup = document.getElementById('fullscreen-popup');
 		this.$fullscreenEscapeKey = process.platform === 'darwin' ? '^⌘F' : 'F11';
 		this.$fullscreenPopup.innerHTML = `Press ${this.$fullscreenEscapeKey} to exit full screen`;

-		this.loading = {};
 		this.activeTabIndex = -1;
 		this.tabs = [];
 		this.functionalTabs = {};
 		this.tabIndex = 0;
 	}

-	init(): void {
+	init() {
 		this.loadProxy().then(() => {
 			this.initSidebar();
 			this.initTabs();
@@ -142,7 +62,7 @@ class ServerManagerView {
 		});
 	}

-	loadProxy(): Promise<boolean> {
+	loadProxy() {
 		return new Promise(resolve => {
 			// To change proxyEnable to useManualProxy in older versions
 			const proxyEnabledOld = ConfigUtil.isConfigItemExists('useProxy');
@@ -174,23 +94,20 @@ class ServerManagerView {
 	// Settings are initialized only when user clicks on General/Server/Network section settings
 	// In case, user doesn't visit these section, those values set to be null automatically
 	// This will make sure the default settings are correctly set to either true or false
-	initDefaultSettings(): void {
+	initDefaultSettings() {
 		// Default settings which should be respected
-		const settingOptions: SettingsOptions = {
-			autoHideMenubar: false,
+		const settingOptions = {
 			trayIcon: true,
 			useManualProxy: false,
 			useSystemProxy: false,
 			showSidebar: true,
 			badgeOption: true,
-			startAtLogin: true,
+			startAtLogin: false,
 			startMinimized: false,
 			enableSpellchecker: true,
 			showNotification: true,
 			autoUpdate: true,
 			betaUpdate: false,
-			errorReporting: true,
-			customCSS: false,
 			silent: false,
 			lastActiveTab: 0,
 			dnd: false,
@@ -215,24 +132,19 @@ class ServerManagerView {
 			settingOptions.dockBouncing = true;
 		}

-		if (process.platform !== 'darwin') {
-			settingOptions.autoHideMenubar = false;
-		}
-
 		for (const i in settingOptions) {
-			const setting = i as keyof SettingsOptions;
 			if (ConfigUtil.getConfigItem(i) === null) {
-				ConfigUtil.setConfigItem(i, settingOptions[setting]);
+				ConfigUtil.setConfigItem(i, settingOptions[i]);
 			}
 		}
 	}

-	initSidebar(): void {
+	initSidebar() {
 		const showSidebar = ConfigUtil.getConfigItem('showSidebar', true);
 		this.toggleSidebar(showSidebar);
 	}

-	initTabs(): void {
+	initTabs() {
 		const servers = DomainUtil.getDomains();
 		if (servers.length > 0) {
 			for (let i = 0; i < servers.length; i++) {
@@ -249,65 +161,36 @@ class ServerManagerView {
 		}
 	}

-	initServer(server: any, index: number): void {
+	initServer(server, index) {
 		const tabIndex = this.getTabIndex();
 		this.tabs.push(new ServerTab({
 			role: 'server',
 			icon: server.icon,
-			name: server.alias,
 			$root: this.$tabsContainer,
 			onClick: this.activateLastTab.bind(this, index),
 			index,
 			tabIndex,
-			onHover: this.onHover.bind(this, index),
+			onHover: this.onHover.bind(this, index, server.alias),
 			onHoverOut: this.onHoverOut.bind(this, index),
 			webview: new WebView({
 				$root: this.$webviewsContainer,
 				index,
 				tabIndex,
 				url: server.url,
-				role: 'server',
-				name: CommonUtil.decodeString(server.alias),
+				name: server.alias,
 				isActive: () => {
 					return index === this.activeTabIndex;
 				},
-				switchLoading: (loading: boolean, url: string) => {
-					if (!loading && this.loading[url]) {
-						this.loading[url] = false;
-					} else if (loading && !this.loading[url]) {
-						this.loading[url] = true;
-					}
-					this.showLoading(this.loading[this.tabs[this.activeTabIndex].webview.props.url]);
-				},
 				onNetworkError: this.openNetworkTroubleshooting.bind(this),
 				onTitleChange: this.updateBadge.bind(this),
 				nodeIntegration: false,
 				preload: true
 			})
 		}));
-		this.loading[server.url] = true;
 	}

-	initActions(): void {
+	initActions() {
 		this.initDNDButton();
-		this.initServerActions();
-		this.initLeftSidebarEvents();
-	}
-
-	initServerActions(): void {
-		const $serverImgs: NodeListOf<HTMLImageElement> = document.querySelectorAll('.server-icons');
-		$serverImgs.forEach(($serverImg, index) => {
-			this.addContextMenu($serverImg, index);
-			if ($serverImg.src.includes('img/icon.png')) {
-				this.displayInitialCharLogo($serverImg, index);
-			}
-			$serverImg.addEventListener('error', () => {
-				this.displayInitialCharLogo($serverImg, index);
-			});
-		});
-	}
-
-	initLeftSidebarEvents(): void {
 		this.$dndButton.addEventListener('click', () => {
 			const dndUtil = DNDUtil.toggle();
 			ipcRenderer.send('forward-message', 'toggle-dnd', dndUtil.dnd, dndUtil.newSettings);
@@ -325,58 +208,32 @@ class ServerManagerView {
 			this.tabs[this.activeTabIndex].webview.back();
 		});

+		const $serverImgs = document.querySelectorAll('.server-icons');
+		$serverImgs.forEach($serverImg => {
+			$serverImg.addEventListener('error', () => {
+				$serverImg.src = 'img/icon.png';
+			});
+		});
+
 		this.sidebarHoverEvent(this.$addServerButton, this.$addServerTooltip, true);
-		this.sidebarHoverEvent(this.$loadingIndicator, this.$loadingTooltip);
 		this.sidebarHoverEvent(this.$settingsButton, this.$settingsTooltip);
 		this.sidebarHoverEvent(this.$reloadButton, this.$reloadTooltip);
 		this.sidebarHoverEvent(this.$backButton, this.$backTooltip);
 		this.sidebarHoverEvent(this.$dndButton, this.$dndTooltip);
 	}

-	initDNDButton(): void {
+	initDNDButton() {
 		const dnd = ConfigUtil.getConfigItem('dnd', false);
 		this.toggleDNDButton(dnd);
 	}

-	getTabIndex(): number {
+	getTabIndex() {
 		const currentIndex = this.tabIndex;
 		this.tabIndex++;
 		return currentIndex;
 	}

-	getCurrentActiveServer(): string {
-		return this.tabs[this.activeTabIndex].webview.props.url;
-	}
-
-	displayInitialCharLogo($img: HTMLImageElement, index: number): void {
-		/*
-			index parameter needed because webview[data-tab-id] can increment
-			beyond size of sidebar org array and throw error
-		*/
-
-		const $altIcon = document.createElement('div');
-		const $parent = $img.parentElement;
-		const $container = $parent.parentElement;
-		const webviewId = $container.dataset.tabId;
-		const $webview = document.querySelector(`webview[data-tab-id="${webviewId}"]`);
-		const realmName = $webview.getAttribute('name');
-
-		if (realmName === null) {
-			$img.src = '/img/icon.png';
-			return;
-		}
-
-		$altIcon.textContent = realmName.charAt(0) || 'Z';
-		$altIcon.classList.add('server-icon');
-		$altIcon.classList.add('alt-icon');
-
-		$parent.removeChild($img);
-		$parent.append($altIcon);
-
-		this.addContextMenu($altIcon as HTMLImageElement, index);
-	}
-
-	sidebarHoverEvent(SidebarButton: HTMLButtonElement, SidebarTooltip: HTMLElement, addServer = false): void {
+	sidebarHoverEvent(SidebarButton, SidebarTooltip, addServer = false) {
 		SidebarButton.addEventListener('mouseover', () => {
 			SidebarTooltip.removeAttribute('style');
 			// To handle position of add server tooltip due to scrolling of list of organizations
@@ -393,9 +250,8 @@ class ServerManagerView {
 		});
 	}

-	onHover(index: number): void {
-		// this.$serverIconTooltip[index].innerHTML already has realm name, so we are just
-		// removing the style.
+	onHover(index, serverName) {
+		this.$serverIconTooltip[index].innerHTML = serverName;
 		this.$serverIconTooltip[index].removeAttribute('style');
 		// To handle position of servers' tooltip due to scrolling of list of organizations
 		// This could not be handled using CSS, hence the top of the tooltip is made same
@@ -404,11 +260,11 @@ class ServerManagerView {
 		this.$serverIconTooltip[index].style.top = top + 'px';
 	}

-	onHoverOut(index: number): void {
+	onHoverOut(index) {
 		this.$serverIconTooltip[index].style.display = 'none';
 	}

-	openFunctionalTab(tabProps: FunctionalTabProps): void {
+	openFunctionalTab(tabProps) {
 		if (this.functionalTabs[tabProps.name] !== undefined) {
 			this.activateTab(this.functionalTabs[tabProps.name]);
 			return;
@@ -417,7 +273,6 @@ class ServerManagerView {
 		this.functionalTabs[tabProps.name] = this.tabs.length;

 		const tabIndex = this.getTabIndex();
-
 		this.tabs.push(new FunctionalTab({
 			role: 'function',
 			materialIcon: tabProps.materialIcon,
@@ -432,86 +287,56 @@ class ServerManagerView {
 				index: this.functionalTabs[tabProps.name],
 				tabIndex,
 				url: tabProps.url,
-				role: 'function',
 				name: tabProps.name,
 				isActive: () => {
 					return this.functionalTabs[tabProps.name] === this.activeTabIndex;
 				},
-				switchLoading: (loading: AnyObject, url: string) => {
-					if (!loading && this.loading[url]) {
-						this.loading[url] = false;
-					} else if (loading && !this.loading[url]) {
-						this.loading[url] = true;
-					}
-					this.showLoading(this.loading[this.tabs[this.activeTabIndex].webview.props.url]);
-				},
 				onNetworkError: this.openNetworkTroubleshooting.bind(this),
 				onTitleChange: this.updateBadge.bind(this),
 				nodeIntegration: true,
 				preload: false
 			})
 		}));
-
 		// To show loading indicator the first time a functional tab is opened, indicator is
 		// closed when the functional tab DOM is ready, handled in webview.js
 		this.$webviewsContainer.classList.remove('loaded');
-
 		this.activateTab(this.functionalTabs[tabProps.name]);
 	}

-	openSettings(nav = 'General'): void {
+	openSettings(nav = 'General') {
 		this.openFunctionalTab({
 			name: 'Settings',
 			materialIcon: 'settings',
-			url: `file://${rendererDirectory}/preference.html#${nav}`
+			url: `file://${__dirname}/preference.html#${nav}`
 		});
 		this.$settingsButton.classList.add('active');
 		this.tabs[this.functionalTabs.Settings].webview.send('switch-settings-nav', nav);
 	}

-	openAbout(): void {
+	openAbout() {
 		this.openFunctionalTab({
 			name: 'About',
 			materialIcon: 'sentiment_very_satisfied',
-			url: `file://${rendererDirectory}/about.html`
+			url: `file://${__dirname}/about.html`
 		});
 	}

-	openNetworkTroubleshooting(): void {
+	openNetworkTroubleshooting() {
 		this.openFunctionalTab({
 			name: 'Network Troubleshooting',
 			materialIcon: 'network_check',
-			url: `file://${rendererDirectory}/network.html`
+			url: `file://${__dirname}/network.html`
 		});
 	}

-	activateLastTab(index: number): void {
+	activateLastTab(index) {
 		// Open all the tabs in background, also activate the tab based on the index
 		this.activateTab(index);
-		// Save last active tab via main process to avoid JSON DB errors
-		ipcRenderer.send('save-last-tab', index);
+		// Save last active tab
+		ConfigUtil.setConfigItem('lastActiveTab', index);
 	}

-	// returns this.tabs in an way that does
-	// not crash app when this.tabs is passed into
-	// ipcRenderer. Something about webview, and props.webview
-	// properties in ServerTab causes the app to crash.
-	get tabsForIpc(): ServerOrFunctionalTab[] {
-		const tabs: ServerOrFunctionalTab[] = [];
-		this.tabs.forEach((tab: ServerOrFunctionalTab) => {
-			const proto = Object.create(Object.getPrototypeOf(tab));
-			const tabClone = Object.assign(proto, tab);
-
-			tabClone.webview = { props: {} };
-			tabClone.webview.props.name = tab.webview.props.name;
-			delete tabClone.props.webview;
-			tabs.push(tabClone);
-		});
-
-		return tabs;
-	}
-
-	activateTab(index: number, hideOldTab = true): void {
+	activateTab(index, hideOldTab = true) {
 		if (!this.tabs[index]) {
 			return;
 		}
@@ -536,29 +361,59 @@ class ServerManagerView {
 		this.activeTabIndex = index;
 		this.tabs[index].activate();

-		this.showLoading(this.loading[this.tabs[this.activeTabIndex].webview.props.url]);
-
 		ipcRenderer.send('update-menu', {
-			// JSON stringify this.tabs to avoid a crash
-			// util.inspect is being used to handle circular references
-			tabs: this.tabsForIpc,
-			activeTabIndex: this.activeTabIndex,
-			// Following flag controls whether a menu item should be enabled or not
-			enableMenu: this.tabs[index].props.role === 'server'
+			tabs: this.tabs,
+			activeTabIndex: this.activeTabIndex
+		});
+
+		ipcRenderer.on('toggle-sidebar', (event, state) => {
+			const selector = 'webview:not([class*=disabled])';
+			const webview = document.querySelector(selector);
+			const webContents = webview.getWebContents();
+			webContents.send('toggle-sidebar', state);
+		});
+
+		ipcRenderer.on('toggle-silent', (event, state) => {
+			const webviews = document.querySelectorAll('webview');
+			webviews.forEach(webview => {
+				try {
+					webview.setAudioMuted(state);
+				} catch (err) {
+					// webview is not ready yet
+					webview.addEventListener('dom-ready', () => {
+						webview.isAudioMuted();
+					});
+				}
+			});
+		});
+
+		ipcRenderer.on('toggle-dnd', (event, state, newSettings) => {
+			this.toggleDNDButton(state);
+			ipcRenderer.send('forward-message', 'toggle-silent', newSettings.silent);
+			const selector = 'webview:not([class*=disabled])';
+			const webview = document.querySelector(selector);
+			const webContents = webview.getWebContents();
+			webContents.send('toggle-dnd', state, newSettings);
+		});
+
+		ipcRenderer.on('update-realm-icon', (event, serverURL, iconURL) => {
+			DomainUtil.getDomains().forEach((domain, index) => {
+				if (domain.url.includes(serverURL)) {
+					DomainUtil.saveServerIcon(iconURL).then(localIconUrl => {
+						const serverImgsSelector = `.tab .server-icons`;
+						const serverImgs = document.querySelectorAll(serverImgsSelector);
+						serverImgs[index].src = localIconUrl;
+
+						domain.icon = localIconUrl;
+						DomainUtil.db.push(`/domains[${index}]`, domain, true);
+						DomainUtil.reloadDB();
+					});
+				}
+			});
 		});
 	}

-	showLoading(loading: boolean): void {
-		if (!loading) {
-			this.$reloadButton.removeAttribute('style');
-			this.$loadingIndicator.style.display = 'none';
-		} else if (loading) {
-			this.$reloadButton.style.display = 'none';
-			this.$loadingIndicator.removeAttribute('style');
-		}
-	}
-
-	destroyTab(name: string, index: number): void {
+	destroyTab(name, index) {
 		if (this.tabs[index].webview.loading) {
 			return;
 		}
@@ -574,7 +429,7 @@ class ServerManagerView {
 		}
 	}

-	destroyView(): void {
+	destroyView() {
 		// Show loading indicator
 		this.$webviewsContainer.classList.remove('loaded');

@@ -588,7 +443,7 @@ class ServerManagerView {
 		this.$webviewsContainer.innerHTML = '';
 	}

-	reloadView(): void {
+	reloadView() {
 		// Save and remember the index of last active tab so that we can use it later
 		const lastActiveTab = this.tabs[this.activeTabIndex].props.index;
 		ConfigUtil.setConfigItem('lastActiveTab', lastActiveTab);
@@ -596,38 +451,28 @@ class ServerManagerView {
 		// Destroy the current view and re-initiate it
 		this.destroyView();
 		this.initTabs();
-		this.initServerActions();
 	}

 	// This will trigger when pressed CTRL/CMD + R [WIP]
 	// It won't reload the current view properly when you add/delete a server.
-	reloadCurrentView(): void {
+	reloadCurrentView() {
 		this.$reloadButton.click();
 	}

-	updateBadge(): void {
+	updateBadge() {
 		let messageCountAll = 0;
-		for (const tab of this.tabs) {
-			if (tab && tab instanceof ServerTab && tab.updateBadge) {
-				const count = tab.webview.badgeCount;
+		for (let i = 0; i < this.tabs.length; i++) {
+			if (this.tabs[i] && this.tabs[i].updateBadge) {
+				const count = this.tabs[i].webview.badgeCount;
 				messageCountAll += count;
-				tab.updateBadge(count);
+				this.tabs[i].updateBadge(count);
 			}
 		}

 		ipcRenderer.send('update-badge', messageCountAll);
 	}

-	updateGeneralSettings(setting: string, value: any): void {
-		const selector = 'webview:not([class*=disabled])';
-		const webview: Electron.WebviewTag = document.querySelector(selector);
-		if (webview) {
-			const webContents = webview.getWebContents();
-			webContents.send(setting, value);
-		}
-	}
-
-	toggleSidebar(show: boolean): void {
+	toggleSidebar(show) {
 		if (show) {
 			this.$sidebar.classList.remove('sidebar-hide');
 		} else {
@@ -636,45 +481,13 @@ class ServerManagerView {
 	}

 	// Toggles the dnd button icon.
-	toggleDNDButton(alert: boolean): void {
-		this.$dndTooltip.textContent = (alert ? 'Disable' : 'Enable') + ' Do Not Disturb';
+	toggleDNDButton(alert) {
+		this.$dndTooltip.textContent = (alert ? 'Turn Off' : 'Enable') + ' Do Not Disturb';
 		this.$dndButton.querySelector('i').textContent = alert ? 'notifications_off' : 'notifications';
 	}

-	addContextMenu($serverImg: HTMLImageElement, index: number): void {
-		$serverImg.addEventListener('contextmenu', e => {
-			e.preventDefault();
-			const template = [
-				{
-					label: 'Disconnect organization',
-					click: () => {
-						dialog.showMessageBox({
-							type: 'warning',
-							buttons: ['YES', 'NO'],
-							defaultId: 0,
-							message: 'Are you sure you want to disconnect this organization?'
-						}, response => {
-							if (response === 0) {
-								DomainUtil.removeDomain(index);
-								ipcRenderer.send('reload-full-app');
-							}
-						});
-					}
-				},
-				{
-					label: 'Copy Zulip URL',
-					click: () => {
-						clipboard.writeText(DomainUtil.getDomain(index).url);
-					}
-				}
-			];
-			const contextMenu = Menu.buildFromTemplate(template);
-			contextMenu.popup({ window: remote.getCurrentWindow() });
-		});
-	}
-
-	registerIpcs(): void {
-		const webviewListeners: AnyObject = {
+	registerIpcs() {
+		const webviewListeners = {
 			'webview-reload': 'reload',
 			back: 'back',
 			focus: 'focus',
@@ -691,23 +504,17 @@ class ServerManagerView {
 			ipcRenderer.on(key, () => {
 				const activeWebview = this.tabs[this.activeTabIndex].webview;
 				if (activeWebview) {
-					activeWebview[webviewListeners[key] as string]();
+					activeWebview[webviewListeners[key]]();
 				}
 			});
 		}

-		ipcRenderer.on('open-settings', (event: Event, settingNav: string) => {
+		ipcRenderer.on('open-settings', (event, settingNav) => {
 			this.openSettings(settingNav);
 		});

 		ipcRenderer.on('open-about', this.openAbout.bind(this));

-		ipcRenderer.on('open-help', () => {
-			// Open help page of current active server
-			const helpPage = this.getCurrentActiveServer() + '/help';
-			shell.openExternal(helpPage);
-		});
-
 		ipcRenderer.on('reload-viewer', this.reloadView.bind(this, this.tabs[this.activeTabIndex].props.index));

 		ipcRenderer.on('reload-current-viewer', this.reloadCurrentView.bind(this));
@@ -720,15 +527,11 @@ class ServerManagerView {
 			ipcRenderer.send('clear-app-settings');
 		});

-		ipcRenderer.on('switch-server-tab', (event: Event, index: number) => {
+		ipcRenderer.on('switch-server-tab', (event, index) => {
 			this.activateLastTab(index);
 		});

-		ipcRenderer.on('open-org-tab', () => {
-			this.openSettings('AddServer');
-		});
-
-		ipcRenderer.on('reload-proxy', (event: Event, showAlert: boolean) => {
+		ipcRenderer.on('reload-proxy', (event, showAlert) => {
 			this.loadProxy().then(() => {
 				if (showAlert) {
 					alert('Proxy settings saved!');
@@ -737,85 +540,8 @@ class ServerManagerView {
 			});
 		});

-		ipcRenderer.on('toggle-sidebar', (event: Event, show: boolean) => {
-			// Toggle the left sidebar
+		ipcRenderer.on('toggle-sidebar', (event, show) => {
 			this.toggleSidebar(show);
-
-			// Toggle sidebar switch in the general settings
-			this.updateGeneralSettings('toggle-sidebar-setting', show);
-		});
-
-		ipcRenderer.on('toggle-silent', (event: Event, state: boolean) => {
-			const webviews: NodeListOf<Electron.WebviewTag> = document.querySelectorAll('webview');
-			webviews.forEach(webview => {
-				try {
-					webview.setAudioMuted(state);
-				} catch (err) {
-					// webview is not ready yet
-					webview.addEventListener('dom-ready', () => {
-						webview.setAudioMuted(state);
-					});
-				}
-			});
-		});
-
-		ipcRenderer.on('toggle-autohide-menubar', (event: Event, autoHideMenubar: boolean, updateMenu: boolean) => {
-			if (updateMenu) {
-				ipcRenderer.send('update-menu', {
-					tabs: this.tabsForIpc,
-					activeTabIndex: this.activeTabIndex
-				});
-				return;
-			}
-			this.updateGeneralSettings('toggle-menubar-setting', autoHideMenubar);
-		});
-
-		ipcRenderer.on('toggle-dnd', (event: Event, state: boolean, newSettings: SettingsOptions) => {
-			this.toggleDNDButton(state);
-			ipcRenderer.send('forward-message', 'toggle-silent', newSettings.silent);
-			const selector = 'webview:not([class*=disabled])';
-			const webview: Electron.WebviewTag = document.querySelector(selector);
-			const webContents = webview.getWebContents();
-			webContents.send('toggle-dnd', state, newSettings);
-		});
-
-		ipcRenderer.on('update-realm-name', (event: Event, serverURL: string, realmName: string) => {
-			// TODO: TypeScript - Type annotate getDomains() or this domain paramter.
-			DomainUtil.getDomains().forEach((domain: any, index: number) => {
-				if (domain.url.includes(serverURL)) {
-					const serverTooltipSelector = `.tab .server-tooltip`;
-					const serverTooltips = document.querySelectorAll(serverTooltipSelector);
-					serverTooltips[index].innerHTML = escape(realmName);
-					this.tabs[index].props.name = escape(realmName);
-					this.tabs[index].webview.props.name = realmName;
-
-					domain.alias = escape(realmName);
-					DomainUtil.db.push(`/domains[${index}]`, domain, true);
-					DomainUtil.reloadDB();
-					// Update the realm name also on the Window menu
-					ipcRenderer.send('update-menu', {
-						tabs: this.tabsForIpc,
-						activeTabIndex: this.activeTabIndex
-					});
-				}
-			});
-		});
-
-		ipcRenderer.on('update-realm-icon', (event: Event, serverURL: string, iconURL: string) => {
-			// TODO: TypeScript - Type annotate getDomains() or this domain paramter.
-			DomainUtil.getDomains().forEach((domain: any, index: number) => {
-				if (domain.url.includes(serverURL)) {
-					DomainUtil.saveServerIcon(iconURL).then((localIconUrl: string) => {
-						const serverImgsSelector = `.tab .server-icons`;
-						const serverImgs: NodeListOf<HTMLImageElement> = document.querySelectorAll(serverImgsSelector);
-						serverImgs[index].src = localIconUrl;
-
-						domain.icon = localIconUrl;
-						DomainUtil.db.push(`/domains[${index}]`, domain, true);
-						DomainUtil.reloadDB();
-					});
-				}
-			});
 		});

 		ipcRenderer.on('enter-fullscreen', () => {
@@ -827,21 +553,21 @@ class ServerManagerView {
 			this.$fullscreenPopup.classList.remove('show');
 		});

-		ipcRenderer.on('focus-webview-with-id', (event: Event, webviewId: number) => {
-			const webviews: NodeListOf<Electron.WebviewTag> = document.querySelectorAll('webview');
+		ipcRenderer.on('focus-webview-with-id', (event, webviewId) => {
+			const webviews = document.querySelectorAll('webview');
 			webviews.forEach(webview => {
 				const currentId = webview.getWebContents().id;
 				const tabId = webview.getAttribute('data-tab-id');
-				const concurrentTab: HTMLButtonElement = document.querySelector(`div[data-tab-id="${tabId}"]`);
+				const concurrentTab = document.querySelector(`div[data-tab-id="${tabId}"]`);
 				if (currentId === webviewId) {
 					concurrentTab.click();
 				}
 			});
 		});

-		ipcRenderer.on('render-taskbar-icon', (event: Event, messageCount: number) => {
+		ipcRenderer.on('render-taskbar-icon', (event, messageCount) => {
 			// Create a canvas from unread messagecounts
-			function createOverlayIcon(messageCount: number): HTMLCanvasElement {
+			function createOverlayIcon(messageCount) {
 				const canvas = document.createElement('canvas');
 				canvas.height = 128;
 				canvas.width = 128;
@@ -871,18 +597,10 @@ class ServerManagerView {
 		ipcRenderer.on('open-feedback-modal', () => {
 			feedbackHolder.classList.add('show');
 		});
-
-		ipcRenderer.on('copy-zulip-url', () => {
-			clipboard.writeText(this.getCurrentActiveServer());
-		});
-
-		ipcRenderer.on('new-server', () => {
-			this.openSettings('AddServer');
-		});
 	}
 }

-window.addEventListener('load', () => {
+window.onload = () => {
 	const serverManagerView = new ServerManagerView();
 	const reconnectUtil = new ReconnectUtil(serverManagerView);
 	serverManagerView.init();
@@ -901,8 +619,7 @@ window.addEventListener('load', () => {
 	// `--no-electron-connect`
 	const mainProcessArgv = remote.getGlobal('process').argv;
 	if (isDev && !mainProcessArgv.includes('--no-electron-connect')) {
-		require('electron-connect').client.create();
+		const electronConnect = require('electron-connect');
+		electronConnect.client.create();
 	}
-});
-
-export = new ServerManagerView();
+};
--- a/app/renderer/js/notification/darwin-notifications.js
+++ b/app/renderer/js/notification/darwin-notifications.js
@@ -1,27 +1,18 @@
 'use strict';
-import { ipcRenderer } from 'electron';
-import {
+
+const { ipcRenderer } = require('electron');
+const url = require('url');
+const MacNotifier = require('node-mac-notifier');
+const ConfigUtil = require('../utils/config-util');
+const {
 	appId, customReply, focusCurrentServer, parseReply, setupReply
-} from './helpers';
-
-import url = require('url');
-import MacNotifier = require('node-mac-notifier');
-import ConfigUtil = require('../utils/config-util');
-
-type ReplyHandler = (response: string) => void;
-type ClickHandler = () => void;
-let replyHandler: ReplyHandler;
-let clickHandler: ClickHandler;
-
-interface NotificationHandlerArgs {
-	response: string;
-}
+} = require('./helpers');

+let replyHandler;
+let clickHandler;
 class DarwinNotification {
-	tag: string;
-
-	constructor(title: string, opts: NotificationOptions) {
-		const silent: boolean = ConfigUtil.getConfigItem('silent') || false;
+	constructor(title, opts) {
+		const silent = ConfigUtil.getConfigItem('silent') || false;
 		const { host, protocol } = location;
 		const { icon } = opts;
 		const profilePic = url.resolve(`${protocol}//${host}`, icon);
@@ -48,45 +39,45 @@ class DarwinNotification {
 		notification.addEventListener('reply', this.notificationHandler);
 	}

-	static requestPermission(): void {
+	static requestPermission() {
 		return; // eslint-disable-line no-useless-return
 	}

 	// Override default Notification permission
-	static get permission(): NotificationPermission {
+	static get permission() {
 		return ConfigUtil.getConfigItem('showNotification') ? 'granted' : 'denied';
 	}

-	set onreply(handler: ReplyHandler) {
+	set onreply(handler) {
 		replyHandler = handler;
 	}

-	get onreply(): ReplyHandler {
+	get onreply() {
 		return replyHandler;
 	}

-	set onclick(handler: ClickHandler) {
+	set onclick(handler) {
 		clickHandler = handler;
 	}

-	get onclick(): ClickHandler {
+	get onclick() {
 		return clickHandler;
 	}

 	// not something that is common or
 	// used by zulip server but added to be
 	// future proff.
-	addEventListener(event: string, handler: ClickHandler | ReplyHandler): void {
+	addEventListener(event, handler) {
 		if (event === 'click') {
-			clickHandler = handler as ClickHandler;
+			clickHandler = handler;
 		}

 		if (event === 'reply') {
-			replyHandler = handler as ReplyHandler;
+			replyHandler = handler;
 		}
 	}

-	notificationHandler({ response }: NotificationHandlerArgs): void {
+	notificationHandler({ response }) {
 		response = parseReply(response);
 		focusCurrentServer();
 		setupReply(this.tag);
@@ -101,7 +92,7 @@ class DarwinNotification {

 	// method specific to notification api
 	// used by zulip
-	close(): void {
+	close() {
 		return; // eslint-disable-line no-useless-return
 	}
 }
--- a/app/renderer/js/notification/default-notification.js
+++ b/app/renderer/js/notification/default-notification.js
@@ -1,13 +1,12 @@
 'use strict';

-import { ipcRenderer } from 'electron';
-import { focusCurrentServer } from './helpers';
-
-import ConfigUtil = require('../utils/config-util');
+const { ipcRenderer } = require('electron');
+const ConfigUtil = require('../utils/config-util');
+const { focusCurrentServer } = require('./helpers');

 const NativeNotification = window.Notification;
 class BaseNotification extends NativeNotification {
-	constructor(title: string, opts: NotificationOptions) {
+	constructor(title, opts) {
 		opts.silent = true;
 		super(title, opts);

@@ -19,14 +18,14 @@ class BaseNotification extends NativeNotification {
 		});
 	}

-	static requestPermission(): void {
+	static requestPermission() {
 		return; // eslint-disable-line no-useless-return
 	}

 	// Override default Notification permission
-	static get permission(): NotificationPermission {
+	static get permission() {
 		return ConfigUtil.getConfigItem('showNotification') ? 'granted' : 'denied';
 	}
 }

-export = BaseNotification;
+module.exports = BaseNotification;
--- a/app/renderer/js/notification/helpers.js
+++ b/app/renderer/js/notification/helpers.js
@@ -1,6 +1,5 @@
-import { remote } from 'electron';
-
-import Logger = require('../utils/logger-util');
+const { remote } = require('electron');
+const Logger = require('../utils/logger-util.js');

 const logger = new Logger({
 	file: 'errors.log',
@@ -8,25 +7,24 @@ const logger = new Logger({
 });

 // Do not change this
-export const appId = 'org.zulip.zulip-electron';
+const appId = 'org.zulip.zulip-electron';

-export type BotListItem = [string, string];
-const botsList: BotListItem[] = [];
+const botsList = [];
 let botsListLoaded = false;

 // this function load list of bots from the server
 // sync=True for a synchronous getJSON request
 // in case botsList isn't already completely loaded when required in parseRely
-export function loadBots(sync = false): void {
+function loadBots(sync = false) {
 	const { $ } = window;
 	botsList.length = 0;
 	if (sync) {
 		$.ajaxSetup({async: false});
 	}
 	$.getJSON('/json/users')
-		.done((data: any) => {
-			const { members } = data;
-			members.forEach((membersRow: any) => {
+		.done(data => {
+			const members = data.members;
+			members.forEach(membersRow => {
 				if (membersRow.is_bot) {
 					const bot = `@${membersRow.full_name}`;
 					const mention = `@**${bot.replace(/^@/, '')}**`;
@@ -35,7 +33,7 @@ export function loadBots(sync = false): void {
 			});
 			botsListLoaded = true;
 		})
-		.fail((error: any) => {
+		.fail(error => {
 			logger.log('Load bots request failed: ', error.responseText);
 			logger.log('Load bots request status: ', error.statusText);
 		});
@@ -44,7 +42,7 @@ export function loadBots(sync = false): void {
 	}
 }

-export function checkElements(...elements: any[]): boolean {
+function checkElements(...elements) {
 	let status = true;
 	elements.forEach(element => {
 		if (element === null || element === undefined) {
@@ -54,13 +52,13 @@ export function checkElements(...elements: any[]): boolean {
 	return status;
 }

-export function customReply(reply: string): void {
+function customReply(reply) {
 	// server does not support notification reply yet.
 	const buttonSelector = '.messagebox #send_controls button[type=submit]';
 	const messageboxSelector = '.selected_message .messagebox .messagebox-border .messagebox-content';
-	const textarea: HTMLInputElement = document.querySelector('#compose-textarea');
-	const messagebox: HTMLButtonElement = document.querySelector(messageboxSelector);
-	const sendButton: HTMLButtonElement = document.querySelector(buttonSelector);
+	const textarea = document.querySelector('#compose-textarea');
+	const messagebox = document.querySelector(messageboxSelector);
+	const sendButton = document.querySelector(buttonSelector);

 	// sanity check for old server versions
 	const elementsExists = checkElements(textarea, messagebox, sendButton);
@@ -79,24 +77,19 @@ const webContentsId = webContents.id;

 // this function will focus the server that sent
 // the notification. Main function implemented in main.js
-export function focusCurrentServer(): void {
-	// TODO: TypeScript: currentWindow of type BrowserWindow doesn't
-	// have a .send() property per typescript.
-	(currentWindow as any).send('focus-webview-with-id', webContentsId);
+function focusCurrentServer() {
+	currentWindow.send('focus-webview-with-id', webContentsId);
 }
 // this function parses the reply from to notification
 // making it easier to reply from notification eg
 // @username in reply will be converted to @**username**
 // #stream in reply will be converted to #**stream**
 // bot mentions are not yet supported
-export function parseReply(reply: string): string {
+function parseReply(reply) {
 	const usersDiv = document.querySelectorAll('#user_presences li');
 	const streamHolder = document.querySelectorAll('#stream_filters li');
-
-	type UsersItem = BotListItem;
-	type StreamsItem = BotListItem;
-	const users: UsersItem[] = [];
-	const streams: StreamsItem[] = [];
+	const users = [];
+	const streams = [];

 	usersDiv.forEach(userRow => {
 		const anchor = userRow.querySelector('span a');
@@ -146,8 +139,17 @@ export function parseReply(reply: string): string {
 	return reply;
 }

-export function setupReply(id: string): void {
+function setupReply(id) {
 	const { narrow } = window;
-	const narrowByTopic = narrow.by_topic || narrow.by_subject;
-	narrowByTopic(id, { trigger: 'notification' });
+	narrow.by_subject(id, { trigger: 'notification' });
 }
+
+module.exports = {
+	appId,
+	checkElements,
+	customReply,
+	parseReply,
+	setupReply,
+	focusCurrentServer,
+	loadBots
+};
--- a/app/renderer/js/notification/index.js
+++ b/app/renderer/js/notification/index.js
@@ -1,11 +1,12 @@
 'use strict';

-import { remote } from 'electron';
-import * as params from '../utils/params-util';
-import { appId, loadBots } from './helpers';
+const {
+  remote: { app }
+} = require('electron');

-import DefaultNotification = require('./default-notification');
-const { app } = remote;
+const params = require('../utils/params-util.js');
+const DefaultNotification = require('./default-notification');
+const { appId, loadBots } = require('./helpers');

 // From https://github.com/felixrieseberg/electron-windows-notifications#appusermodelid
 // On windows 8 we have to explicitly set the appUserModelId otherwise notification won't work.
@@ -14,11 +15,12 @@ app.setAppUserModelId(appId);
 window.Notification = DefaultNotification;

 if (process.platform === 'darwin') {
-	window.Notification = require('./darwin-notifications');
+	const DarwinNotification = require('./darwin-notifications');
+	window.Notification = DarwinNotification;
 }

 window.addEventListener('load', () => {
-	// eslint-disable-next-line no-undef, @typescript-eslint/camelcase
+	// eslint-disable-next-line no-undef, camelcase
 	if (params.isPageParams() && page_params.realm_uri) {
 		loadBots();
 	}
--- a/app/renderer/js/pages/network.js
+++ b/app/renderer/js/pages/network.js
@@ -1,21 +1,20 @@
 'use strict';

-import { ipcRenderer } from 'electron';
+const {ipcRenderer} = require('electron');

 class NetworkTroubleshootingView {
-	$reconnectButton: Element;
 	constructor() {
-		this.$reconnectButton = document.querySelector('#reconnect');
+		this.$reconnectButton = document.getElementById('reconnect');
 	}

-	init(): void {
+	init() {
 		this.$reconnectButton.addEventListener('click', () => {
 			ipcRenderer.send('forward-message', 'reload-viewer');
 		});
 	}
 }

-window.addEventListener('load', () => {
+window.onload = () => {
 	const networkTroubleshootingView = new NetworkTroubleshootingView();
 	networkTroubleshootingView.init();
-});
+};
--- a/app/renderer/js/pages/preference/add-certificate.js
+++ b/app/renderer/js/pages/preference/add-certificate.js
@@ -1,56 +1,47 @@
 'use-strict';

-import { remote, OpenDialogOptions } from 'electron';
+const { dialog } = require('electron').remote;

-import path = require('path');
-import BaseComponent = require('../../components/base');
-import CertificateUtil = require('../../utils/certificate-util');
-import DomainUtil = require('../../utils/domain-util');
-
-const { dialog } = remote;
+const BaseComponent = require(__dirname + '/../../components/base.js');
+const CertificateUtil = require(__dirname + '/../../utils/certificate-util.js');
+const DomainUtil = require(__dirname + '/../../utils/domain-util.js');

 class AddCertificate extends BaseComponent {
-	// TODO: TypeScript - Here props should be object type
-	props: any;
-	_certFile: string;
-	$addCertificate: Element | null;
-	addCertificateButton: Element | null;
-	serverUrl: HTMLInputElement | null;
-	constructor(props: any) {
+	constructor(props) {
 		super();
 		this.props = props;
 		this._certFile = '';
 	}

-	template(): string {
-		return `
-			<div class="settings-card certificates-card">
+	template() {
+		return `			
+			<div class="settings-card server-center certificates-card">
 				<div class="certificate-input">
-					<div>Organization URL</div>
+					<div>Organization URL :</div> 
 					<input class="setting-input-value" autofocus placeholder="your-organization.zulipchat.com or zulip.your-organization.com"/>
 				</div>
 				<div class="certificate-input">
-					<div>Certificate file</div>
-					<button class="green" id="add-certificate-button">Upload</button>
+					<div>Custom CA's certificate file :</div> 
+					<button id="add-certificate-button">Add</button>
 				</div>
 			</div>
 		`;
 	}

-	init(): void {
+	init() {
 		this.$addCertificate = this.generateNodeFromTemplate(this.template());
-		this.props.$root.append(this.$addCertificate);
+		this.props.$root.appendChild(this.$addCertificate);
 		this.addCertificateButton = this.$addCertificate.querySelector('#add-certificate-button');
-		this.serverUrl = this.$addCertificate.querySelectorAll('input.setting-input-value')[0] as HTMLInputElement;
+		this.serverUrl = this.$addCertificate.querySelectorAll('input.setting-input-value')[0];
 		this.initListeners();
 	}

-	validateAndAdd(): void {
+	validateAndAdd() {
 		const certificate = this._certFile;
 		const serverUrl = this.serverUrl.value;
 		if (certificate !== '' && serverUrl !== '') {
 			const server = encodeURIComponent(DomainUtil.formatUrl(serverUrl));
-			const fileName = path.basename(certificate);
+			const fileName = certificate.substring(certificate.lastIndexOf('/') + 1);
 			const copy = CertificateUtil.copyCertificate(server, certificate, fileName);
 			if (!copy) {
 				return;
@@ -63,13 +54,14 @@ class AddCertificate extends BaseComponent {
 			this.serverUrl.value = '';
 		} else {
 			dialog.showErrorBox('Error', `Please, ${serverUrl === '' ?
-				'Enter an Organization URL' : 'Choose certificate file'}`);
+      'Enter an Organization URL' : 'Choose certificate file'}`);
 		}
 	}

-	addHandler(): void {
-		const showDialogOptions: OpenDialogOptions = {
+	addHandler() {
+		const showDialogOptions = {
 			title: 'Select file',
+			defaultId: 1,
 			properties: ['openFile'],
 			filters: [{ name: 'crt, pem', extensions: ['crt', 'pem'] }]
 		};
@@ -81,7 +73,7 @@ class AddCertificate extends BaseComponent {
 		});
 	}

-	initListeners(): void {
+	initListeners() {
 		this.addCertificateButton.addEventListener('click', () => {
 			this.addHandler();
 		});
@@ -96,4 +88,4 @@ class AddCertificate extends BaseComponent {
 	}
 }

-export = AddCertificate;
+module.exports = AddCertificate;
--- a/app/renderer/js/pages/preference/badge-settings.js
+++ b/app/renderer/js/pages/preference/badge-settings.js
@@ -1,10 +1,10 @@
 'use strict';
-import { app } from 'electron';
+const electron = require('electron');
+const { app } = require('electron');

-import electron = require('electron');
-import ConfigUtil = require('../../utils/config-util');
+const ConfigUtil = require(__dirname + '/../../utils/config-util.js');

-let instance: BadgeSettings | any = null;
+let instance = null;

 class BadgeSettings {
 	constructor() {
@@ -17,7 +17,7 @@ class BadgeSettings {
 		return instance;
 	}

-	showBadgeCount(messageCount: number, mainWindow: electron.BrowserWindow): void {
+	showBadgeCount(messageCount, mainWindow) {
 		if (process.platform === 'darwin') {
 			app.setBadgeCount(messageCount);
 		}
@@ -26,7 +26,7 @@ class BadgeSettings {
 		}
 	}

-	hideBadgeCount(mainWindow: electron.BrowserWindow): void {
+	hideBadgeCount(mainWindow) {
 		if (process.platform === 'darwin') {
 			app.setBadgeCount(0);
 		}
@@ -35,7 +35,7 @@ class BadgeSettings {
 		}
 	}

-	updateBadge(badgeCount: number, mainWindow: electron.BrowserWindow): void {
+	updateBadge(badgeCount, mainWindow) {
 		if (ConfigUtil.getConfigItem('badgeOption', true)) {
 			this.showBadgeCount(badgeCount, mainWindow);
 		} else {
@@ -43,7 +43,7 @@ class BadgeSettings {
 		}
 	}

-	updateOverlayIcon(messageCount: number, mainWindow: electron.BrowserWindow): void {
+	updateOverlayIcon(messageCount, mainWindow) {
 		if (!mainWindow.isFocused()) {
 			mainWindow.flashFrame(ConfigUtil.getConfigItem('flashTaskbarOnMessage'));
 		}
@@ -54,10 +54,10 @@ class BadgeSettings {
 		}
 	}

-	updateTaskbarIcon(data: string, text: string, mainWindow: electron.BrowserWindow): void {
+	updateTaskbarIcon(data, text, mainWindow) {
 		const img = electron.nativeImage.createFromDataURL(data);
 		mainWindow.setOverlayIcon(img, text);
 	}
 }

-export = new BadgeSettings();
+module.exports = new BadgeSettings();
--- a/app/renderer/js/pages/preference/base-section.js
+++ b/app/renderer/js/pages/preference/base-section.js
@@ -1,23 +1,22 @@
 'use strict';

-import { ipcRenderer } from 'electron';
+const {ipcRenderer} = require('electron');

-import BaseComponent = require('../../components/base');
+const BaseComponent = require(__dirname + '/../../components/base.js');

 class BaseSection extends BaseComponent {
-	// TODO: TypeScript - Here props should be object type
-	generateSettingOption(props: any): void {
+	generateSettingOption(props) {
 		const {$element, value, clickHandler} = props;

 		$element.innerHTML = '';

 		const $optionControl = this.generateNodeFromTemplate(this.generateOptionTemplate(value));
-		$element.append($optionControl);
+		$element.appendChild($optionControl);

 		$optionControl.addEventListener('click', clickHandler);
 	}

-	generateOptionTemplate(settingOption: boolean): string {
+	generateOptionTemplate(settingOption) {
 		if (settingOption) {
 			return `
 				<div class="action">
@@ -39,9 +38,9 @@ class BaseSection extends BaseComponent {
 		}
 	}

-	reloadApp(): void {
+	reloadApp() {
 		ipcRenderer.send('forward-message', 'reload-viewer');
 	}
 }

-export = BaseSection;
+module.exports = BaseSection;
--- a/app/renderer/js/pages/preference/connected-org-section.js
+++ b/app/renderer/js/pages/preference/connected-org-section.js
@@ -0,0 +1,64 @@
+'use strict';
+
+const BaseSection = require(__dirname + '/base-section.js');
+const DomainUtil = require(__dirname + '/../../utils/domain-util.js');
+const ServerInfoForm = require(__dirname + '/server-info-form.js');
+const AddCertificate = require(__dirname + '/add-certificate.js');
+
+class ConnectedOrgSection extends BaseSection {
+	constructor(props) {
+		super();
+		this.props = props;
+	}
+
+	template() {
+		return `
+			<div class="settings-pane" id="server-settings-pane">
+				<div class="page-title">Connected organizations</div>
+				<div class="title" id="existing-servers">All the connected orgnizations will appear here.</div>
+				<div id="server-info-container"></div>
+
+				<div class="page-title">Add Custom Certificates</div>
+				<div id="add-certificate-container"></div>
+			</div>
+		`;
+	}
+
+	init() {
+		this.initServers();
+	}
+
+	initServers() {
+		this.props.$root.innerHTML = '';
+
+		const servers = DomainUtil.getDomains();
+		this.props.$root.innerHTML = this.template();
+		this.$serverInfoContainer = document.getElementById('server-info-container');
+		this.$existingServers = document.getElementById('existing-servers');
+
+		const noServerText = 'All the connected orgnizations will appear here';
+		// Show noServerText if no servers are there otherwise hide it
+		this.$existingServers.innerHTML = servers.length === 0 ? noServerText : '';
+
+		for (let i = 0; i < servers.length; i++) {
+			new ServerInfoForm({
+				$root: this.$serverInfoContainer,
+				server: servers[i],
+				index: i,
+				onChange: this.reloadApp
+			}).init();
+		}
+
+		this.$addCertificateContainer = document.getElementById('add-certificate-container');
+		this.initAddCertificate();
+	}
+
+	initAddCertificate() {
+		new AddCertificate({
+			$root: this.$addCertificateContainer
+		}).init();
+	}
+
+}
+
+module.exports = ConnectedOrgSection;
--- a/app/renderer/js/pages/preference/connected-org-section.ts
+++ b/app/renderer/js/pages/preference/connected-org-section.ts
@@ -1,89 +0,0 @@
-'use strict';
-
-import { ipcRenderer } from 'electron';
-
-import BaseSection = require('./base-section');
-import DomainUtil = require('../../utils/domain-util');
-import ServerInfoForm = require('./server-info-form');
-import AddCertificate = require('./add-certificate');
-import FindAccounts = require('./find-accounts');
-
-class ConnectedOrgSection extends BaseSection {
-	// TODO: TypeScript - Here props should be object type
-	props: any;
-	$serverInfoContainer: Element | null;
-	$existingServers: Element | null;
-	$newOrgButton: HTMLButtonElement | null;
-	$addCertificateContainer: Element | null;
-	$findAccountsContainer: Element | null;
-	constructor(props: any) {
-		super();
-		this.props = props;
-	}
-
-	template(): string {
-		return `
-			<div class="settings-pane" id="server-settings-pane">
-				<div class="page-title">Connected organizations</div>
-				<div class="title" id="existing-servers">All the connected orgnizations will appear here.</div>
-				<div id="server-info-container"></div>
-				<div id="new-org-button"><button class="green sea w-250">Connect to another organization</button></div>
-				<div class="page-title">Add Custom Certificates</div>
-				<div id="add-certificate-container"></div>
-				<div class="page-title">Find accounts by email</div>
-				<div id="find-accounts-container"></div>
-			</div>
-		`;
-	}
-
-	init(): void {
-		this.initServers();
-	}
-
-	initServers(): void {
-		this.props.$root.innerHTML = '';
-
-		const servers = DomainUtil.getDomains();
-		this.props.$root.innerHTML = this.template();
-
-		this.$serverInfoContainer = document.querySelector('#server-info-container');
-		this.$existingServers = document.querySelector('#existing-servers');
-		this.$newOrgButton = document.querySelector('#new-org-button');
-		this.$addCertificateContainer = document.querySelector('#add-certificate-container');
-		this.$findAccountsContainer = document.querySelector('#find-accounts-container');
-
-		const noServerText = 'All the connected orgnizations will appear here';
-		// Show noServerText if no servers are there otherwise hide it
-		this.$existingServers.innerHTML = servers.length === 0 ? noServerText : '';
-
-		for (let i = 0; i < servers.length; i++) {
-			new ServerInfoForm({
-				$root: this.$serverInfoContainer,
-				server: servers[i],
-				index: i,
-				onChange: this.reloadApp
-			}).init();
-		}
-
-		this.$newOrgButton.addEventListener('click', () => {
-			ipcRenderer.send('forward-message', 'open-org-tab');
-		});
-
-		this.initAddCertificate();
-		this.initFindAccounts();
-	}
-
-	initAddCertificate(): void {
-		new AddCertificate({
-			$root: this.$addCertificateContainer
-		}).init();
-	}
-
-	initFindAccounts(): void {
-		new FindAccounts({
-			$root: this.$findAccountsContainer
-		}).init();
-	}
-}
-
-export = ConnectedOrgSection;
--- a/app/renderer/js/pages/preference/find-accounts.ts
+++ b/app/renderer/js/pages/preference/find-accounts.ts
@@ -1,77 +0,0 @@
-'use-strict';
-
-import { shell } from 'electron';
-
-import BaseComponent = require('../../components/base');
-
-class FindAccounts extends BaseComponent {
-	// TODO: TypeScript - Here props should be object type
-	props: any;
-	$findAccounts: Element | null;
-	$findAccountsButton: Element | null;
-	$serverUrlField: HTMLInputElement | null;
-	constructor(props: any) {
-		super();
-		this.props = props;
-	}
-
-	template(): string {
-		return `
-			<div class="settings-card certificate-card">
-				<div class="certificate-input">
-					<div>Organization URL</div>
-					<input class="setting-input-value" value="zulipchat.com"/>
-				</div>
-				<div class="certificate-input">
-					<button class="green w-150" id="find-accounts-button">Find accounts</button>
-				</div>
-			</div>
-		`;
-	}
-
-	init(): void {
-		this.$findAccounts = this.generateNodeFromTemplate(this.template());
-		this.props.$root.append(this.$findAccounts);
-		this.$findAccountsButton = this.$findAccounts.querySelector('#find-accounts-button');
-		this.$serverUrlField = this.$findAccounts.querySelectorAll('input.setting-input-value')[0] as HTMLInputElement;
-		this.initListeners();
-	}
-
-	findAccounts(url: string): void {
-		if (!url) {
-			return;
-		}
-		if (!url.startsWith('http')) {
-			url = 'https://' + url;
-		}
-		shell.openExternal(url + '/accounts/find');
-	}
-
-	initListeners(): void {
-		this.$findAccountsButton.addEventListener('click', () => {
-			this.findAccounts(this.$serverUrlField.value);
-		});
-
-		this.$serverUrlField.addEventListener('click', () => {
-			if (this.$serverUrlField.value === 'zulipchat.com') {
-				this.$serverUrlField.setSelectionRange(0, 0);
-			}
-		});
-
-		this.$serverUrlField.addEventListener('keypress', event => {
-			if (event.keyCode === 13) {
-				this.findAccounts(this.$serverUrlField.value);
-			}
-		});
-
-		this.$serverUrlField.addEventListener('input', () => {
-			if (this.$serverUrlField.value) {
-				this.$serverUrlField.classList.remove('invalid-input-value');
-			} else {
-				this.$serverUrlField.classList.add('invalid-input-value');
-			}
-		});
-	}
-}
-
-export = FindAccounts;
--- a/app/renderer/js/pages/preference/general-section.js
+++ b/app/renderer/js/pages/preference/general-section.js
@@ -1,24 +1,20 @@
 'use strict';
-import { ipcRenderer, remote, OpenDialogOptions } from 'electron';
-
-import path = require('path');
-import fs = require('fs-extra');
+const path = require('path');
+const { ipcRenderer, remote } = require('electron');
+const fs = require('fs-extra');

 const { app, dialog } = remote;
 const currentBrowserWindow = remote.getCurrentWindow();
-
-import BaseSection = require('./base-section');
-import ConfigUtil = require('../../utils/config-util');
+const BaseSection = require(__dirname + '/base-section.js');
+const ConfigUtil = require(__dirname + '/../../utils/config-util.js');

 class GeneralSection extends BaseSection {
-	// TODO: TypeScript - Here props should be object type
-	props: any;
-	constructor(props: any) {
+	constructor(props) {
 		super();
 		this.props = props;
 	}

-	template(): string {
+	template() {
 		return `
            <div class="settings-pane">
                <div class="title">Appearance</div>
@@ -27,12 +23,8 @@ class GeneralSection extends BaseSection {
 						<div class="setting-description">Show app icon in system tray</div>
 						<div class="setting-control"></div>
 					</div>
-					<div class="setting-row" id="menubar-option" style= "display:${process.platform === 'darwin' ? 'none' : ''}">
-						<div class="setting-description">Auto hide menu bar (Press Alt key to display)</div>
-						<div class="setting-control"></div>
-					</div>
 					<div class="setting-row" id="sidebar-option">
-						<div class="setting-description">Show sidebar (<span class="code">${process.platform === 'darwin' ? 'Cmd+Shift+S' : 'Ctrl+Shift+S'}</span>)</div>
+						<div class="setting-description">Show sidebar (<span class="code">Cmd Or Ctrl+Shift+S</span>)</div>
 						<div class="setting-control"></div>
 					</div>
 					<div class="setting-row" id="badge-option">
@@ -48,10 +40,10 @@ class GeneralSection extends BaseSection {
 						<div class="setting-control"></div>
 					</div>
 				</div>
-				<div class="title">Desktop Notifications</div>
+				<div class="title">Desktop Notification</div>
 				<div class="settings-card">
 					<div class="setting-row" id="show-notification-option">
-						<div class="setting-description">Show desktop notifications</div>
+						<div class="setting-description">Show Desktop Notifications</div>
 						<div class="setting-control"></div>
 					</div>
 					<div class="setting-row" id="silent-option">
@@ -81,40 +73,39 @@ class GeneralSection extends BaseSection {
 						<div class="setting-control"></div>
 					</div>
 					<div class="setting-row" id="enable-spellchecker-option">
-						<div class="setting-description">Enable spellchecker (requires restart)</div>
+						<div class="setting-description">Enable Spellchecker (requires restart)</div>
 						<div class="setting-control"></div>
 					</div>
 				</div>
+				<div class="title">Add custom CSS</div>
+				<div class="settings-card">
+					<div class="setting-row" id="add-custom-css">
+						<div class="setting-description">
+							This will inject the selected css stylesheet in all the added accounts
+						</div>
+						<button class="custom-css-button blue">Add</button>
+					</div>
+					<div class="setting-row" id="remove-custom-css">
+						<div class="setting-description">
+							<div class="selected-css-path" id="custom-css-path">${ConfigUtil.getConfigItem('customCSS')}</div>
+						</div>
+						<div class="action red" id="css-delete-action">
+							<i class="material-icons">indeterminate_check_box</i>
+							<span>Delete</span>
+						</div>
+					</div>
+				</div>
 				<div class="title">Advanced</div>
 				<div class="settings-card">
-				<div class="setting-row" id="enable-error-reporting">
-					<div class="setting-description">Enable error reporting (requires restart)</div>
-					<div class="setting-control"></div>
-				</div>
 				<div class="setting-row" id="show-download-folder">
-					<div class="setting-description">Show downloaded files in file manager</div>
+					<div class="setting-description">Show downloaded file in the file manager</div>
 					<div class="setting-control"></div>
 				</div>
-				<div class="setting-row" id="add-custom-css">
-				<div class="setting-description">
-					Add custom CSS
-				</div>
-				<button class="custom-css-button green">Upload</button>
-			</div>
-			<div class="setting-row" id="remove-custom-css">
-				<div class="setting-description">
-					<div class="selected-css-path" id="custom-css-path">${ConfigUtil.getConfigItem('customCSS')}</div>
-				</div>
-				<div class="action red" id="css-delete-action">
-					<i class="material-icons">indeterminate_check_box</i>
-					<span>Delete</span>
-				</div>
-			</div>
 					<div class="setting-row" id="download-folder">
 						<div class="setting-description">
 							Default download location
 						</div>
-						<button class="download-folder-button green">Change</button>
+						<button class="download-folder-button blue">Choose</button>
 					</div>
 					<div class="setting-row">
 						<div class="setting-description">
@@ -128,14 +119,14 @@ class GeneralSection extends BaseSection {
 					<div class="setting-row" id="resetdata-option">
 						<div class="setting-description">This will delete all application data including all added accounts and preferences
 						</div>
-						<button class="reset-data-button red w-150">Reset App Data</button>
+						<button class="reset-data-button blue">Reset App Data</button>
 					</div>
 				</div>
            </div>
 		`;
 	}

-	init(): void {
+	init() {
 		this.props.$root.innerHTML = this.template();
 		this.updateTrayOption();
 		this.updateBadgeOption();
@@ -153,7 +144,6 @@ class GeneralSection extends BaseSection {
 		this.removeCustomCSS();
 		this.downloadFolder();
 		this.showDownloadFolder();
-		this.enableErrorReporting();

 		// Platform specific settings

@@ -165,14 +155,9 @@ class GeneralSection extends BaseSection {
 		if (process.platform === 'darwin') {
 			this.updateDockBouncing();
 		}
-
-		// Auto hide menubar on Windows and Linux
-		if (process.platform !== 'darwin') {
-			this.updateMenubarOption();
-		}
 	}

-	updateTrayOption(): void {
+	updateTrayOption() {
 		this.generateSettingOption({
 			$element: document.querySelector('#tray-option .setting-control'),
 			value: ConfigUtil.getConfigItem('trayIcon', true),
@@ -185,20 +170,7 @@ class GeneralSection extends BaseSection {
 		});
 	}

-	updateMenubarOption(): void {
-		this.generateSettingOption({
-			$element: document.querySelector('#menubar-option .setting-control'),
-			value: ConfigUtil.getConfigItem('autoHideMenubar', false),
-			clickHandler: () => {
-				const newValue = !ConfigUtil.getConfigItem('autoHideMenubar');
-				ConfigUtil.setConfigItem('autoHideMenubar', newValue);
-				ipcRenderer.send('toggle-menubar', newValue);
-				this.updateMenubarOption();
-			}
-		});
-	}
-
-	updateBadgeOption(): void {
+	updateBadgeOption() {
 		this.generateSettingOption({
 			$element: document.querySelector('#badge-option .setting-control'),
 			value: ConfigUtil.getConfigItem('badgeOption', true),
@@ -211,7 +183,7 @@ class GeneralSection extends BaseSection {
 		});
 	}

-	updateDockBouncing(): void {
+	updateDockBouncing() {
 		this.generateSettingOption({
 			$element: document.querySelector('#dock-bounce-option .setting-control'),
 			value: ConfigUtil.getConfigItem('dockBouncing', true),
@@ -223,7 +195,7 @@ class GeneralSection extends BaseSection {
 		});
 	}

-	updateFlashTaskbar(): void {
+	updateFlashTaskbar() {
 		this.generateSettingOption({
 			$element: document.querySelector('#flash-taskbar-option .setting-control'),
 			value: ConfigUtil.getConfigItem('flashTaskbarOnMessage', true),
@@ -235,37 +207,31 @@ class GeneralSection extends BaseSection {
 		});
 	}

-	autoUpdateOption(): void {
+	autoUpdateOption() {
 		this.generateSettingOption({
 			$element: document.querySelector('#autoupdate-option .setting-control'),
 			value: ConfigUtil.getConfigItem('autoUpdate', true),
 			clickHandler: () => {
 				const newValue = !ConfigUtil.getConfigItem('autoUpdate');
 				ConfigUtil.setConfigItem('autoUpdate', newValue);
-				if (!newValue) {
-					ConfigUtil.setConfigItem('betaUpdate', false);
-					this.betaUpdateOption();
-				}
 				this.autoUpdateOption();
 			}
 		});
 	}

-	betaUpdateOption(): void {
+	betaUpdateOption() {
 		this.generateSettingOption({
 			$element: document.querySelector('#betaupdate-option .setting-control'),
 			value: ConfigUtil.getConfigItem('betaUpdate', false),
 			clickHandler: () => {
 				const newValue = !ConfigUtil.getConfigItem('betaUpdate');
-				if (ConfigUtil.getConfigItem('autoUpdate')) {
-					ConfigUtil.setConfigItem('betaUpdate', newValue);
-					this.betaUpdateOption();
-				}
+				ConfigUtil.setConfigItem('betaUpdate', newValue);
+				this.betaUpdateOption();
 			}
 		});
 	}

-	updateSilentOption(): void {
+	updateSilentOption() {
 		this.generateSettingOption({
 			$element: document.querySelector('#silent-option .setting-control'),
 			value: ConfigUtil.getConfigItem('silent', false),
@@ -273,14 +239,12 @@ class GeneralSection extends BaseSection {
 				const newValue = !ConfigUtil.getConfigItem('silent', true);
 				ConfigUtil.setConfigItem('silent', newValue);
 				this.updateSilentOption();
-				// TODO: TypeScript: currentWindow of type BrowserWindow doesn't
-				// have a .send() property per typescript.
-				(currentBrowserWindow as any).send('toggle-silent', newValue);
+				currentBrowserWindow.send('toggle-silent', newValue);
 			}
 		});
 	}

-	showDesktopNotification(): void {
+	showDesktopNotification() {
 		this.generateSettingOption({
 			$element: document.querySelector('#show-notification-option .setting-control'),
 			value: ConfigUtil.getConfigItem('showNotification', true),
@@ -292,7 +256,7 @@ class GeneralSection extends BaseSection {
 		});
 	}

-	updateSidebarOption(): void {
+	updateSidebarOption() {
 		this.generateSettingOption({
 			$element: document.querySelector('#sidebar-option .setting-control'),
 			value: ConfigUtil.getConfigItem('showSidebar', true),
@@ -305,7 +269,7 @@ class GeneralSection extends BaseSection {
 		});
 	}

-	updateStartAtLoginOption(): void {
+	updateStartAtLoginOption() {
 		this.generateSettingOption({
 			$element: document.querySelector('#startAtLogin-option .setting-control'),
 			value: ConfigUtil.getConfigItem('startAtLogin', false),
@@ -318,7 +282,7 @@ class GeneralSection extends BaseSection {
 		});
 	}

-	enableSpellchecker(): void {
+	enableSpellchecker() {
 		this.generateSettingOption({
 			$element: document.querySelector('#enable-spellchecker-option .setting-control'),
 			value: ConfigUtil.getConfigItem('enableSpellchecker', true),
@@ -330,19 +294,7 @@ class GeneralSection extends BaseSection {
 		});
 	}

-	enableErrorReporting(): void {
-		this.generateSettingOption({
-			$element: document.querySelector('#enable-error-reporting .setting-control'),
-			value: ConfigUtil.getConfigItem('errorReporting', true),
-			clickHandler: () => {
-				const newValue = !ConfigUtil.getConfigItem('errorReporting');
-				ConfigUtil.setConfigItem('errorReporting', newValue);
-				this.enableErrorReporting();
-			}
-		});
-	}
-
-	clearAppDataDialog(): void {
+	clearAppDataDialog() {
 		const clearAppDataMessage = 'By clicking proceed you will be removing all added accounts and preferences from Zulip. When the application restarts, it will be as if you are starting Zulip for the first time.';
 		const getAppPath = path.join(app.getPath('appData'), app.getName());

@@ -360,9 +312,10 @@ class GeneralSection extends BaseSection {
 		});
 	}

-	customCssDialog(): void {
-		const showDialogOptions: OpenDialogOptions = {
+	customCssDialog() {
+		const showDialogOptions = {
 			title: 'Select file',
+			defaultId: 1,
 			properties: ['openFile'],
 			filters: [{ name: 'CSS file', extensions: ['css'] }]
 		};
@@ -375,14 +328,14 @@ class GeneralSection extends BaseSection {
 		});
 	}

-	updateResetDataOption(): void {
+	updateResetDataOption() {
 		const resetDataButton = document.querySelector('#resetdata-option .reset-data-button');
 		resetDataButton.addEventListener('click', () => {
 			this.clearAppDataDialog();
 		});
 	}

-	minimizeOnStart(): void {
+	minimizeOnStart() {
 		this.generateSettingOption({
 			$element: document.querySelector('#start-minimize-option .setting-control'),
 			value: ConfigUtil.getConfigItem('startMinimized', false),
@@ -394,50 +347,51 @@ class GeneralSection extends BaseSection {
 		});
 	}

-	addCustomCSS(): void {
+	addCustomCSS() {
 		const customCSSButton = document.querySelector('#add-custom-css .custom-css-button');
 		customCSSButton.addEventListener('click', () => {
 			this.customCssDialog();
 		});
 	}

-	showCustomCSSPath(): void {
+	showCustomCSSPath() {
 		if (!ConfigUtil.getConfigItem('customCSS')) {
-			const cssPATH: HTMLElement = document.querySelector('#remove-custom-css');
+			const cssPATH = document.getElementById('remove-custom-css');
 			cssPATH.style.display = 'none';
 		}
 	}

-	removeCustomCSS(): void {
-		const removeCSSButton = document.querySelector('#css-delete-action');
+	removeCustomCSS() {
+		const removeCSSButton = document.getElementById('css-delete-action');
 		removeCSSButton.addEventListener('click', () => {
-			ConfigUtil.setConfigItem('customCSS', "");
+			ConfigUtil.setConfigItem('customCSS');
 			ipcRenderer.send('forward-message', 'hard-reload');
 		});
 	}

-	downloadFolderDialog(): void {
-		const showDialogOptions: OpenDialogOptions = {
+	downloadFolderDialog() {
+		const showDialogOptions = {
 			title: 'Select Download Location',
+			defaultId: 1,
 			properties: ['openDirectory']
 		};

 		dialog.showOpenDialog(showDialogOptions, selectedFolder => {
 			if (selectedFolder) {
 				ConfigUtil.setConfigItem('downloadsPath', selectedFolder[0]);
-				const downloadFolderPath: HTMLElement = document.querySelector('.download-folder-path');
+				const downloadFolderPath = document.querySelector('.download-folder-path');
 				downloadFolderPath.innerText = selectedFolder[0];
 			}
 		});
 	}
-	downloadFolder(): void {
+	downloadFolder() {
 		const downloadFolder = document.querySelector('#download-folder .download-folder-button');
 		downloadFolder.addEventListener('click', () => {
 			this.downloadFolderDialog();
 		});
 	}

-	showDownloadFolder(): void {
+	showDownloadFolder() {
 		this.generateSettingOption({
 			$element: document.querySelector('#show-download-folder .setting-control'),
 			value: ConfigUtil.getConfigItem('showDownloadFolder', false),
@@ -448,6 +402,7 @@ class GeneralSection extends BaseSection {
 			}
 		});
 	}
+
 }

-export = GeneralSection;
+module.exports = GeneralSection;
--- a/app/renderer/js/pages/preference/nav.js
+++ b/app/renderer/js/pages/preference/nav.js
@@ -1,20 +1,19 @@
 'use strict';

-import BaseComponent = require('../../components/base');
+const BaseComponent = require(__dirname + '/../../components/base.js');

 class PreferenceNav extends BaseComponent {
-	// TODO: TypeScript - Here props should be object type
-	props: any;
-	navItems: string[];
-	$el: Element;
-	constructor(props: any) {
+	constructor(props) {
 		super();
+
 		this.props = props;
+
 		this.navItems = ['General', 'Network', 'AddServer', 'Organizations', 'Shortcuts'];
+
 		this.init();
 	}

-	template(): string {
+	template() {
 		let navItemsTemplate = '';
 		for (const navItem of this.navItems) {
 			navItemsTemplate += `<div class="nav" id="nav-${navItem}">${navItem}</div>`;
@@ -28,22 +27,23 @@ class PreferenceNav extends BaseComponent {
 		`;
 	}

-	init(): void {
+	init() {
 		this.$el = this.generateNodeFromTemplate(this.template());
-		this.props.$root.append(this.$el);
+		this.props.$root.appendChild(this.$el);
+
 		this.registerListeners();
 	}

-	registerListeners(): void {
+	registerListeners() {
 		for (const navItem of this.navItems) {
-			const $item = document.querySelector(`#nav-${navItem}`);
+			const $item = document.getElementById(`nav-${navItem}`);
 			$item.addEventListener('click', () => {
 				this.props.onItemSelected(navItem);
 			});
 		}
 	}

-	select(navItemToSelect: string): void {
+	select(navItemToSelect) {
 		for (const navItem of this.navItems) {
 			if (navItem === navItemToSelect) {
 				this.activate(navItem);
@@ -53,15 +53,15 @@ class PreferenceNav extends BaseComponent {
 		}
 	}

-	activate(navItem: string): void {
-		const $item = document.querySelector(`#nav-${navItem}`);
+	activate(navItem) {
+		const $item = document.getElementById(`nav-${navItem}`);
 		$item.classList.add('active');
 	}

-	deactivate(navItem: string): void {
-		const $item = document.querySelector(`#nav-${navItem}`);
+	deactivate(navItem) {
+		const $item = document.getElementById(`nav-${navItem}`);
 		$item.classList.remove('active');
 	}
 }

-export = PreferenceNav;
+module.exports = PreferenceNav;
--- a/app/renderer/js/pages/preference/network-section.js
+++ b/app/renderer/js/pages/preference/network-section.js
@@ -1,24 +1,17 @@
 'use strict';

-import { ipcRenderer } from 'electron';
+const {ipcRenderer} = require('electron');

-import BaseSection = require('./base-section');
-import ConfigUtil = require('../../utils/config-util');
+const BaseSection = require(__dirname + '/base-section.js');
+const ConfigUtil = require(__dirname + '/../../utils/config-util.js');

 class NetworkSection extends BaseSection {
-	// TODO: TypeScript - Here props should be object type
-	props: any;
-	$proxyPAC: HTMLInputElement;
-	$proxyRules: HTMLInputElement;
-	$proxyBypass: HTMLInputElement;
-	$proxySaveAction: Element;
-	$manualProxyBlock: Element;
-	constructor(props: any) {
+	constructor(props) {
 		super();
 		this.props = props;
 	}

-	template(): string {
+	template() {
 		return `
            <div class="settings-pane">
                <div class="title">Proxy</div>
@@ -45,7 +38,8 @@ class NetworkSection extends BaseSection {
 							<input class="setting-input-value" placeholder="e.g. foobar.com"/>
 						</div>
 						<div class="setting-row">
-							<div class="action green" id="proxy-save-action">
+							<div class="action blue" id="proxy-save-action">
+								<i class="material-icons">check_box</i>
 								<span>Save</span>
 							</div>
 						</div>
@@ -55,12 +49,12 @@ class NetworkSection extends BaseSection {
 		`;
 	}

-	init(): void {
+	init() {
 		this.props.$root.innerHTML = this.template();
 		this.$proxyPAC = document.querySelector('#proxy-pac-option .setting-input-value');
 		this.$proxyRules = document.querySelector('#proxy-rules-option .setting-input-value');
 		this.$proxyBypass = document.querySelector('#proxy-bypass-option .setting-input-value');
-		this.$proxySaveAction = document.querySelector('#proxy-save-action');
+		this.$proxySaveAction = document.getElementById('proxy-save-action');
 		this.$manualProxyBlock = this.props.$root.querySelector('.manual-proxy-block');
 		this.initProxyOption();

@@ -77,14 +71,14 @@ class NetworkSection extends BaseSection {
 		});
 	}

-	initProxyOption(): void {
+	initProxyOption() {
 		const manualProxyEnabled = ConfigUtil.getConfigItem('useManualProxy', false);
 		this.toggleManualProxySettings(manualProxyEnabled);

 		this.updateProxyOption();
 	}

-	toggleManualProxySettings(option: boolean): void {
+	toggleManualProxySettings(option) {
 		if (option) {
 			this.$manualProxyBlock.classList.remove('hidden');
 		} else {
@@ -92,7 +86,7 @@ class NetworkSection extends BaseSection {
 		}
 	}

-	updateProxyOption(): void {
+	updateProxyOption() {
 		this.generateSettingOption({
 			$element: document.querySelector('#use-system-settings .setting-control'),
 			value: ConfigUtil.getConfigItem('useSystemProxy', false),
@@ -106,7 +100,7 @@ class NetworkSection extends BaseSection {
 				if (newValue === false) {
 					// Remove proxy system proxy settings
 					ConfigUtil.setConfigItem('proxyRules', '');
-					ipcRenderer.send('forward-message', 'reload-proxy', false);
+					ipcRenderer.send('forward-message', 'reload-proxy', true);
 				}
 				ConfigUtil.setConfigItem('useSystemProxy', newValue);
 				this.updateProxyOption();
@@ -132,4 +126,4 @@ class NetworkSection extends BaseSection {
 	}
 }

-export = NetworkSection;
+module.exports = NetworkSection;
--- a/app/renderer/js/pages/preference/new-server-form.js
+++ b/app/renderer/js/pages/preference/new-server-form.js
@@ -1,22 +1,16 @@
 'use strict';

-import { shell } from 'electron';
-
-import BaseComponent = require('../../components/base');
-import DomainUtil = require('../../utils/domain-util');
+const BaseComponent = require(__dirname + '/../../components/base.js');
+const DomainUtil = require(__dirname + '/../../utils/domain-util.js');
+const shell = require('electron').shell;

 class NewServerForm extends BaseComponent {
-	// TODO: TypeScript - Here props should be object type
-	props: any;
-	$newServerForm: Element;
-	$saveServerButton: HTMLButtonElement;
-	$newServerUrl: HTMLInputElement;
-	constructor(props: any) {
+	constructor(props) {
 		super();
 		this.props = props;
 	}

-	template(): string {
+	template() {
 		return `
 			<div class="server-input-container">
 				<div class="title">Organization URL</div>
@@ -42,20 +36,21 @@ class NewServerForm extends BaseComponent {
 		`;
 	}

-	init(): void {
+	init() {
 		this.initForm();
 		this.initActions();
 	}

-	initForm(): void {
+	initForm() {
 		this.$newServerForm = this.generateNodeFromTemplate(this.template());
-		this.$saveServerButton = this.$newServerForm.querySelectorAll('.server-save-action')[0] as HTMLButtonElement;
+		this.$saveServerButton = this.$newServerForm.getElementsByClassName('server-save-action')[0];
 		this.props.$root.innerHTML = '';
-		this.props.$root.append(this.$newServerForm);
-		this.$newServerUrl = this.$newServerForm.querySelectorAll('input.setting-input-value')[0] as HTMLInputElement;
+		this.props.$root.appendChild(this.$newServerForm);
+
+		this.$newServerUrl = this.$newServerForm.querySelectorAll('input.setting-input-value')[0];
 	}

-	submitFormHandler(): void {
+	submitFormHandler() {
 		this.$saveServerButton.children[0].innerHTML = 'Connecting...';
 		DomainUtil.checkDomain(this.$newServerUrl.value).then(serverConf => {
 			DomainUtil.addDomain(serverConf).then(() => {
@@ -67,15 +62,15 @@ class NewServerForm extends BaseComponent {
 		});
 	}

-	openCreateNewOrgExternalLink(): void {
+	openCreateNewOrgExternalLink() {
 		const link = 'https://zulipchat.com/new/';
-		const externalCreateNewOrgEl = document.querySelector('#open-create-org-link');
+		const externalCreateNewOrgEl = document.getElementById('open-create-org-link');
 		externalCreateNewOrgEl.addEventListener('click', () => {
 			shell.openExternal(link);
 		});
 	}

-	initActions(): void {
+	initActions() {
 		this.$saveServerButton.addEventListener('click', () => {
 			this.submitFormHandler();
 		});
@@ -91,4 +86,4 @@ class NewServerForm extends BaseComponent {
 	}
 }

-export = NewServerForm;
+module.exports = NewServerForm;
--- a/app/renderer/js/pages/preference/preference.js
+++ b/app/renderer/js/pages/preference/preference.js
@@ -1,29 +1,24 @@
 'use strict';

-import { ipcRenderer } from 'electron';
+const BaseComponent = require(__dirname + '/js/components/base.js');
+const { ipcRenderer } = require('electron');

-import BaseComponent = require('../../components/base');
-import Nav = require('./nav');
-import ServersSection = require('./servers-section');
-import GeneralSection = require('./general-section');
-import NetworkSection = require('./network-section');
-import ConnectedOrgSection = require('./connected-org-section');
-import ShortcutsSection = require('./shortcuts-section');
-
-type Section = ServersSection | GeneralSection | NetworkSection | ConnectedOrgSection | ShortcutsSection;
+const Nav = require(__dirname + '/js/pages/preference/nav.js');
+const ServersSection = require(__dirname + '/js/pages/preference/servers-section.js');
+const GeneralSection = require(__dirname + '/js/pages/preference/general-section.js');
+const NetworkSection = require(__dirname + '/js/pages/preference/network-section.js');
+const ConnectedOrgSection = require(__dirname + '/js/pages/preference/connected-org-section.js');
+const ShortcutsSection = require(__dirname + '/js/pages/preference/shortcuts-section.js');

 class PreferenceView extends BaseComponent {
-	$sidebarContainer: Element;
-	$settingsContainer: Element;
-	nav: Nav;
-	section: Section;
 	constructor() {
 		super();
-		this.$sidebarContainer = document.querySelector('#sidebar');
-		this.$settingsContainer = document.querySelector('#settings-container');
+
+		this.$sidebarContainer = document.getElementById('sidebar');
+		this.$settingsContainer = document.getElementById('settings-container');
 	}

-	init(): void {
+	init() {
 		this.nav = new Nav({
 			$root: this.$sidebarContainer,
 			onItemSelected: this.handleNavigation.bind(this)
@@ -33,7 +28,7 @@ class PreferenceView extends BaseComponent {
 		this.registerIpcs();
 	}

-	setDefaultView(): void {
+	setDefaultView() {
 		let nav = 'General';
 		const hasTag = window.location.hash;
 		if (hasTag) {
@@ -42,7 +37,7 @@ class PreferenceView extends BaseComponent {
 		this.handleNavigation(nav);
 	}

-	handleNavigation(navItem: string): void {
+	handleNavigation(navItem) {
 		this.nav.select(navItem);
 		switch (navItem) {
 			case 'AddServer': {
@@ -82,32 +77,28 @@ class PreferenceView extends BaseComponent {
 	}

 	// Handle toggling and reflect changes in preference page
-	handleToggle(elementName: string, state: boolean): void {
+	handleToggle(elementName, state) {
 		const inputSelector = `#${elementName} .action .switch input`;
-		const input: HTMLInputElement = document.querySelector(inputSelector);
+		const input = document.querySelector(inputSelector);
 		if (input) {
 			input.checked = state;
 		}
 	}

-	registerIpcs(): void {
-		ipcRenderer.on('switch-settings-nav', (_event: Event, navItem: string) => {
+	registerIpcs() {
+		ipcRenderer.on('switch-settings-nav', (event, navItem) => {
 			this.handleNavigation(navItem);
 		});

-		ipcRenderer.on('toggle-sidebar-setting', (_event: Event, state: boolean) => {
+		ipcRenderer.on('toggle-sidebar', (event, state) => {
 			this.handleToggle('sidebar-option', state);
 		});

-		ipcRenderer.on('toggle-menubar-setting', (_event: Event, state: boolean) => {
-			this.handleToggle('menubar-option', state);
-		});
-
-		ipcRenderer.on('toggletray', (_event: Event, state: boolean) => {
+		ipcRenderer.on('toggletray', (event, state) => {
 			this.handleToggle('tray-option', state);
 		});

-		ipcRenderer.on('toggle-dnd', (_event: Event, _state: boolean, newSettings: any) => {
+		ipcRenderer.on('toggle-dnd', (event, state, newSettings) => {
 			this.handleToggle('show-notification-option', newSettings.showNotification);
 			this.handleToggle('silent-option', newSettings.silent);

@@ -118,9 +109,7 @@ class PreferenceView extends BaseComponent {
 	}
 }

-window.addEventListener('load', () => {
+window.onload = () => {
 	const preferenceView = new PreferenceView();
 	preferenceView.init();
-});
-
-export = PreferenceView;
+};
--- a/app/renderer/js/pages/preference/server-info-form.js
+++ b/app/renderer/js/pages/preference/server-info-form.js
@@ -1,26 +1,17 @@
 'use strict';
+const { dialog } = require('electron').remote;
+const { ipcRenderer } = require('electron');

-import { remote, ipcRenderer } from 'electron';
-
-import BaseComponent = require('../../components/base');
-import DomainUtil = require('../../utils/domain-util');
-
-const { dialog } = remote;
+const BaseComponent = require(__dirname + '/../../components/base.js');
+const DomainUtil = require(__dirname + '/../../utils/domain-util.js');

 class ServerInfoForm extends BaseComponent {
-	// TODO: TypeScript - Here props should be object type
-	props: any;
-	$serverInfoForm: Element;
-	$serverInfoAlias: Element;
-	$serverIcon: Element;
-	$deleteServerButton: Element;
-	$openServerButton: Element;
-	constructor(props: any) {
+	constructor(props) {
 		super();
 		this.props = props;
 	}

-	template(): string {
+	template() {
 		return `
 			<div class="settings-card">
 				<div class="server-info-left">
@@ -44,21 +35,21 @@ class ServerInfoForm extends BaseComponent {
 		`;
 	}

-	init(): void {
+	init() {
 		this.initForm();
 		this.initActions();
 	}

-	initForm(): void {
+	initForm() {
 		this.$serverInfoForm = this.generateNodeFromTemplate(this.template());
-		this.$serverInfoAlias = this.$serverInfoForm.querySelectorAll('.server-info-alias')[0];
-		this.$serverIcon = this.$serverInfoForm.querySelectorAll('.server-info-icon')[0];
-		this.$deleteServerButton = this.$serverInfoForm.querySelectorAll('.server-delete-action')[0];
-		this.$openServerButton = this.$serverInfoForm.querySelectorAll('.open-tab-button')[0];
-		this.props.$root.append(this.$serverInfoForm);
+		this.$serverInfoAlias = this.$serverInfoForm.getElementsByClassName('server-info-alias')[0];
+		this.$serverIcon = this.$serverInfoForm.getElementsByClassName('server-info-icon')[0];
+		this.$deleteServerButton = this.$serverInfoForm.getElementsByClassName('server-delete-action')[0];
+		this.$openServerButton = this.$serverInfoForm.getElementsByClassName('open-tab-button')[0];
+		this.props.$root.appendChild(this.$serverInfoForm);
 	}

-	initActions(): void {
+	initActions() {
 		this.$deleteServerButton.addEventListener('click', () => {
 			dialog.showMessageBox({
 				type: 'warning',
@@ -85,6 +76,7 @@ class ServerInfoForm extends BaseComponent {
 			ipcRenderer.send('forward-message', 'switch-server-tab', this.props.index);
 		});
 	}
+
 }

-export = ServerInfoForm;
+module.exports = ServerInfoForm;
--- a/app/renderer/js/pages/preference/servers-section.js
+++ b/app/renderer/js/pages/preference/servers-section.js
@@ -1,18 +1,15 @@
 'use strict';

-import BaseSection = require('./base-section');
-import NewServerForm = require('./new-server-form');
+const BaseSection = require(__dirname + '/base-section.js');
+const NewServerForm = require(__dirname + '/new-server-form.js');

 class ServersSection extends BaseSection {
-	// TODO: TypeScript - Here props should be object type
-	props: any;
-	$newServerContainer: Element;
-	constructor(props: any) {
+	constructor(props) {
 		super();
 		this.props = props;
 	}

-	template(): string {
+	template() {
 		return `
 		<div class="add-server-modal">
 			<div class="modal-container">
@@ -25,20 +22,20 @@ class ServersSection extends BaseSection {
 		`;
 	}

-	init(): void {
+	init() {
 		this.initServers();
 	}

-	initServers(): void {
+	initServers() {
 		this.props.$root.innerHTML = '';

 		this.props.$root.innerHTML = this.template();
-		this.$newServerContainer = document.querySelector('#new-server-container');
+		this.$newServerContainer = document.getElementById('new-server-container');

 		this.initNewServerForm();
 	}

-	initNewServerForm(): void {
+	initNewServerForm() {
 		new NewServerForm({
 			$root: this.$newServerContainer,
 			onChange: this.reloadApp
@@ -46,4 +43,4 @@ class ServersSection extends BaseSection {
 	}
 }

-export = ServersSection;
+module.exports = ServersSection;
--- a/app/renderer/js/pages/preference/shortcuts-section.js
+++ b/app/renderer/js/pages/preference/shortcuts-section.js
@@ -0,0 +1,322 @@
+'use strict';
+
+const BaseSection = require(__dirname + '/base-section.js');
+const shell = require('electron').shell;
+
+class ShortcutsSection extends BaseSection {
+	constructor(props) {
+		super();
+		this.props = props;
+	}
+
+	templateMac() {
+		const userOSKey = '⌘';
+
+		return `
+            <div class="settings-pane">
+              <div class="title">Application Shortcuts</div>
+              <div class="settings-card">
+                <table>
+                  <tr>
+                    <td><kbd>${userOSKey}</kbd><kbd>,</kbd></td>
+                    <td>Settings</td>
+                  </tr>
+                  <tr>
+                    <td><kbd>${userOSKey}</kbd><kbd>K</kbd></td>
+                    <td>Keyboard Shortcuts</td>
+                  </tr>
+									<tr>
+                    <td><kbd>${userOSKey}</kbd> + <kbd>Shift</kbd> + <kbd>M</kbd></td>
+                    <td>Toggle Do Not Disturb</td>
+                  </tr>
+                  <tr>
+                    <td><kbd>Shift</kbd><kbd>${userOSKey}</kbd><kbd>D</kbd></td>
+                    <td>Reset App Settings</td>
+                  </tr>
+                  <tr>
+                    <td><kbd>${userOSKey}</kbd><kbd>L</kbd></td>
+                    <td>Log Out</td>
+                  </tr>
+                  <tr>
+                    <td><kbd>${userOSKey}</kbd><kbd>H</kbd></td>
+                    <td>Hide Zulip</td>
+                  </tr>
+                  <tr>
+                    <td><kbd>Option</kbd><kbd>${userOSKey}</kbd><kbd>H</kbd></td>
+                    <td>Hide Others</td>
+                  </tr>
+                  <tr>
+                    <td><kbd>${userOSKey}</kbd><kbd>Q</kbd></td>
+                    <td>Quit Zulip</td>
+                  </tr>
+                </table>
+                <div class="setting-control"></div>
+              </div>
+              <div class="title">Edit Shortcuts</div>
+              <div class="settings-card">
+                <table>
+                  <tr>
+                    <td><kbd>${userOSKey}</kbd><kbd>Z</kbd></td>
+                    <td>Undo</td>
+                  </tr>
+                  <tr>
+                    <td><kbd>Shift</kbd><kbd>${userOSKey}</kbd><kbd>Z</kbd></td>
+                    <td>Redo</td>
+                  </tr>
+                  <tr>
+                    <td><kbd>${userOSKey}</kbd><kbd>X</kbd></td>
+                    <td>Cut</td>
+                  </tr>
+                  <tr>
+                    <td><kbd>${userOSKey}</kbd><kbd>C</kbd></td>
+                    <td>Copy</td>
+                  </tr>
+                  <tr>
+                    <td><kbd>${userOSKey}</kbd><kbd>V</kbd></td>
+                    <td>Paste</td>
+                  </tr>
+                  <tr>
+                    <td><kbd>Shift</kbd><kbd>${userOSKey}</kbd><kbd>V</kbd></td>
+                    <td>Paste and Match Style</td>
+                  </tr>
+                  <tr>
+                    <td><kbd>${userOSKey}</kbd><kbd>A</kbd></td>
+                    <td>Select All</td>
+                  </tr>
+                  <tr>
+                    <td><kbd>Control</kbd><kbd>${userOSKey}</kbd><kbd>Space</kbd></td>
+                    <td>Emoji & Symbols</td>
+                  </tr>
+                </table>
+                <div class="setting-control"></div>
+              </div>
+              <div class="title">View Shortcuts</div>
+              <div class="settings-card">
+                <table>
+                  <tr>
+                    <td><kbd>${userOSKey}</kbd><kbd>R</kbd></td>
+                    <td>Reload</td>
+                  </tr>
+                  <tr>
+                    <td><kbd>Shift</kbd><kbd>${userOSKey}</kbd><kbd>R</kbd></td>
+                    <td>Hard Reload</td>
+                  </tr>
+                  <tr>
+                    <td><kbd>Control</kbd><kbd>${userOSKey}</kbd><kbd>F</kbd></td>
+                    <td>Enter Full Screen</td>
+                  </tr>
+                  <tr>
+                    <td><kbd>${userOSKey}</kbd><kbd>+</kbd></td>
+                    <td>Zoom In</td>
+                  </tr>
+                  <tr>
+                    <td><kbd>${userOSKey}</kbd><kbd>-</kbd></td>
+                    <td>Zoom Out</td>
+                  </tr>
+                  <tr>
+                    <td><kbd>${userOSKey}</kbd><kbd>0</kbd></td>
+                    <td>Actual Size</td>
+                  </tr>
+                  <tr>
+                    <td><kbd>${userOSKey}</kbd> + <kbd>Shift</kbd> + <kbd>S</kbd></td>
+                    <td>Toggle Sidebar</td>
+                  </tr>
+                  <tr>
+                    <td><kbd>Option</kbd><kbd>${userOSKey}</kbd><kbd>I</kbd></td>
+                    <td>Toggle DevTools for Zulip App</td>
+                  </tr>
+                  <tr>
+                    <td><kbd>Option</kbd><kbd>${userOSKey}</kbd><kbd>U</kbd></td>
+                    <td>Toggle DevTools for Active Tab</td>
+                  </tr>
+                </table>
+                <div class="setting-control"></div>
+              </div>
+              <div class="title">History Shortcuts</div>
+              <div class="settings-card">
+                <table>
+                  <tr>
+                    <td><kbd>${userOSKey}</kbd><kbd>←</kbd></td>
+                    <td>Back</td>
+                  </tr>
+                  <tr>
+                    <td><kbd>${userOSKey}</kbd><kbd>→</kbd></td>
+                    <td>Forward</td>
+                  </tr>
+                </table>
+                <div class="setting-control"></div>
+              </div>
+              <div class="title">Window Shortcuts</div>
+              <div class="settings-card">
+                <table>
+                  <tr>
+                    <td><kbd>${userOSKey}</kbd><kbd>M</kbd></td>
+                    <td>Minimize</td>
+                  </tr>
+                  <tr>
+                    <td><kbd>${userOSKey}</kbd><kbd>W</kbd></td>
+                    <td>Close</td>
+                  </tr>
+                </table>
+                <div class="setting-control"></div>
+              </div>
+              <div class="settings-card tip"><b><i class="material-icons md-14">settings</i>Tip: </b>These desktop app shortcuts extend the Zulip webapp's <span id="open-hotkeys-link">keyboard shortcuts</span>.</div>
+            </div>
+		`;
+	}
+
+	templateWinLin() {
+		const userOSKey = 'Ctrl';
+
+		return `
+            <div class="settings-pane">
+              <div class="title">Application Shortcuts</div>
+              <div class="settings-card">
+                <table>
+                  <tr>
+                    <td><kbd>${userOSKey}</kbd> + <kbd>,</kbd></td>
+                    <td>Settings</td>
+                  </tr>
+                  <tr>
+                    <td><kbd>${userOSKey}</kbd> + <kbd>K</kbd></td>
+                    <td>Keyboard Shortcuts</td>
+                  </tr>
+									<tr>
+                    <td><kbd>${userOSKey}</kbd> + <kbd>Shift</kbd> + <kbd>M</kbd></td>
+                    <td>Toggle Do Not Disturb</td>
+                  </tr>
+                  <tr>
+                    <td><kbd>${userOSKey}</kbd> + <kbd>L</kbd></td>
+                    <td>Log Out</td>
+                  </tr>
+                  <tr>
+                    <td><kbd>${userOSKey}</kbd> + <kbd>Q</kbd></td>
+                    <td>Quit Zulip</td>
+                  </tr>
+                </table>
+                <div class="setting-control"></div>
+              </div>
+              <div class="title">Edit Shortcuts</div>
+              <div class="settings-card">
+                <table>
+                  <tr>
+                    <td><kbd>${userOSKey}</kbd> + <kbd>Z</kbd></td>
+                    <td>Undo</td>
+                  </tr>
+                  <tr>
+                    <td><kbd>${userOSKey}</kbd> + <kbd>Y</kbd></td>
+                    <td>Redo</td>
+                  </tr>
+                  <tr>
+                    <td><kbd>${userOSKey}</kbd> + <kbd>X</kbd></td>
+                    <td>Cut</td>
+                  </tr>
+                  <tr>
+                    <td><kbd>${userOSKey}</kbd> + <kbd>C</kbd></td>
+                    <td>Copy</td>
+                  </tr>
+                  <tr>
+                    <td><kbd>${userOSKey}</kbd> + <kbd>V</kbd></td>
+                    <td>Paste</td>
+                  </tr>
+                  <tr>
+                    <td><kbd>${userOSKey}</kbd> + <kbd>Shift</kbd> + <kbd>V</kbd></td>
+                    <td>Paste and Match Style</td>
+                  </tr>
+                  <tr>
+                    <td><kbd>${userOSKey}</kbd> + <kbd>A</kbd></td>
+                    <td>Select All</td>
+                  </tr>
+                </table>
+                <div class="setting-control"></div>
+              </div>
+              <div class="title">View Shortcuts</div>
+              <div class="settings-card">
+                <table>
+                  <tr>
+                    <td><kbd>${userOSKey}</kbd> + <kbd>R</kbd></td>
+                    <td>Reload</td>
+                  </tr>
+                  <tr>
+                    <td><kbd>${userOSKey}</kbd> + <kbd>Shift</kbd> + <kbd>R</kbd></td>
+                    <td>Hard Reload</td>
+                  </tr>
+                  <tr>
+                    <td><kbd>F11</kbd></td>
+                    <td>Toggle Full Screen</td>
+                  </tr>
+                  <tr>
+                    <td><kbd>${userOSKey}</kbd> + <kbd>=</kbd></td>
+                    <td>Zoom In</td>
+                  </tr>
+                  <tr>
+                    <td><kbd>${userOSKey}</kbd> + <kbd>-</kbd></td>
+                    <td>Zoom Out</td>
+                  </tr>
+                  <tr>
+                    <td><kbd>${userOSKey}</kbd> + <kbd>0</kbd></td>
+                    <td>Actual Size</td>
+                  </tr>
+                  <tr>
+                    <td><kbd>${userOSKey}</kbd> + <kbd>Shift</kbd> + <kbd>S</kbd></td>
+                    <td>Toggle Sidebar</td>
+                  </tr>
+                  <tr>
+                    <td><kbd>${userOSKey}</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd></td>
+                    <td>Toggle DevTools for Zulip App</td>
+                  </tr>
+                  <tr>
+                    <td><kbd>${userOSKey}</kbd> + <kbd>Shift</kbd> + <kbd>U</kbd></td>
+                    <td>Toggle DevTools for Active Tab</td>
+                  </tr>
+                </table>
+                <div class="setting-control"></div>
+              </div>
+              <div class="title">History Shortcuts</div>
+              <div class="settings-card">
+                <table>
+                  <tr>
+                    <td><kbd>Alt</kbd> + <kbd>←</kbd></td>
+                    <td>Back</td>
+                  </tr>
+                  <tr>
+                    <td><kbd>Alt</kbd> + <kbd>→</kbd></td>
+                    <td>Forward</td>
+                  </tr>
+                </table>
+                <div class="setting-control"></div>
+              </div>
+              <div class="title">Window Shortcuts</div>
+              <div class="settings-card">
+                <table>
+                  <tr>
+                    <td><kbd>${userOSKey}</kbd> + <kbd>M</kbd></td>
+                    <td>Minimize</td>
+                  </tr>
+                  <tr>
+                    <td><kbd>${userOSKey}</kbd> + <kbd>W</kbd></td>
+                    <td>Close</td>
+                  </tr>
+                </table>
+                <div class="setting-control"></div>
+              </div>
+              <div class="tip"><b><i class="material-icons md-14">lightbulb_outline</i>Tip: </b>These desktop app shortcuts extend the Zulip webapp's <span id="open-hotkeys-link">keyboard shortcuts</span>.</div>
+            </div>
+		`;
+	}
+
+	openHotkeysExternalLink() {
+		const link = 'https://zulipchat.com/help/keyboard-shortcuts';
+		const externalCreateNewOrgEl = document.getElementById('open-hotkeys-link');
+		externalCreateNewOrgEl.addEventListener('click', () => {
+			shell.openExternal(link);
+		});
+	}
+	init() {
+		this.props.$root.innerHTML = (process.platform === 'darwin') ?
+			this.templateMac() : this.templateWinLin();
+		this.openHotkeysExternalLink();
+	}
+}
+
+module.exports = ShortcutsSection;
--- a/app/renderer/js/pages/preference/shortcuts-section.ts
+++ b/app/renderer/js/pages/preference/shortcuts-section.ts
@@ -1,344 +0,0 @@
-'use strict';
-
-import { shell } from 'electron';
-
-import BaseSection = require('./base-section');
-
-class ShortcutsSection extends BaseSection {
-	// TODO: TypeScript - Here props should be object type
-	props: any;
-	constructor(props: any) {
-		super();
-		this.props = props;
-	}
-	// TODO - Deduplicate templateMac and templateWinLin functions. In theory
-	// they both should be the same the only thing different should be the userOSKey
-	// variable but there seems to be inconsistences between both function, one has more
-	// lines though one may just be using more new lines and other thing is the use of +.
-	templateMac(): string {
-		const userOSKey = '⌘';
-
-		return `
-						<div class="settings-pane">
-						<div class="settings-card tip"><p><b><i class="material-icons md-14">settings</i>Tip:  </b>These desktop app shortcuts extend the Zulip webapp's <span id="open-hotkeys-link"> keyboard shortcuts</span>.</p></div>
-							<div class="title">Application Shortcuts</div>
-							<div class="settings-card">
-								<table>
-									<tr>
-										<td><kbd>${userOSKey}</kbd><kbd>,</kbd></td>
-										<td>Settings</td>
-									</tr>
-									<tr>
-										<td><kbd>${userOSKey}</kbd><kbd>K</kbd></td>
-										<td>Keyboard Shortcuts</td>
-									</tr>
-									<tr>
-										<td><kbd>${userOSKey}</kbd> + <kbd>Shift</kbd> + <kbd>M</kbd></td>
-										<td>Toggle Do Not Disturb</td>
-									</tr>
-									<tr>
-										<td><kbd>Shift</kbd><kbd>${userOSKey}</kbd><kbd>D</kbd></td>
-										<td>Reset App Settings</td>
-									</tr>
-									<tr>
-										<td><kbd>${userOSKey}</kbd><kbd>L</kbd></td>
-										<td>Log Out</td>
-									</tr>
-									<tr>
-										<td><kbd>${userOSKey}</kbd><kbd>H</kbd></td>
-										<td>Hide Zulip</td>
-									</tr>
-									<tr>
-										<td><kbd>Option</kbd><kbd>${userOSKey}</kbd><kbd>H</kbd></td>
-										<td>Hide Others</td>
-									</tr>
-									<tr>
-										<td><kbd>${userOSKey}</kbd><kbd>Q</kbd></td>
-										<td>Quit Zulip</td>
-									</tr>
-								</table>
-								<div class="setting-control"></div>
-							</div>
-							<div class="title">Edit Shortcuts</div>
-							<div class="settings-card">
-								<table>
-									<tr>
-										<td><kbd>${userOSKey}</kbd><kbd>Z</kbd></td>
-										<td>Undo</td>
-									</tr>
-									<tr>
-										<td><kbd>Shift</kbd><kbd>${userOSKey}</kbd><kbd>Z</kbd></td>
-										<td>Redo</td>
-									</tr>
-									<tr>
-										<td><kbd>${userOSKey}</kbd><kbd>X</kbd></td>
-										<td>Cut</td>
-									</tr>
-									<tr>
-										<td><kbd>${userOSKey}</kbd><kbd>C</kbd></td>
-										<td>Copy</td>
-									</tr>
-									<tr>
-										<td><kbd>${userOSKey}</kbd><kbd>V</kbd></td>
-										<td>Paste</td>
-									</tr>
-									<tr>
-										<td><kbd>Shift</kbd><kbd>${userOSKey}</kbd><kbd>V</kbd></td>
-										<td>Paste and Match Style</td>
-									</tr>
-									<tr>
-										<td><kbd>${userOSKey}</kbd><kbd>A</kbd></td>
-										<td>Select All</td>
-									</tr>
-									<tr>
-										<td><kbd>Control</kbd><kbd>${userOSKey}</kbd><kbd>Space</kbd></td>
-										<td>Emoji & Symbols</td>
-									</tr>
-								</table>
-								<div class="setting-control"></div>
-							</div>
-							<div class="title">View Shortcuts</div>
-							<div class="settings-card">
-								<table>
-									<tr>
-										<td><kbd>${userOSKey}</kbd><kbd>R</kbd></td>
-										<td>Reload</td>
-									</tr>
-									<tr>
-										<td><kbd>Shift</kbd><kbd>${userOSKey}</kbd><kbd>R</kbd></td>
-										<td>Hard Reload</td>
-									</tr>
-									<tr>
-										<td><kbd>Control</kbd><kbd>${userOSKey}</kbd><kbd>F</kbd></td>
-										<td>Enter Full Screen</td>
-									</tr>
-									<tr>
-										<td><kbd>${userOSKey}</kbd><kbd>+</kbd></td>
-										<td>Zoom In</td>
-									</tr>
-									<tr>
-										<td><kbd>${userOSKey}</kbd><kbd>-</kbd></td>
-										<td>Zoom Out</td>
-									</tr>
-									<tr>
-										<td><kbd>${userOSKey}</kbd><kbd>0</kbd></td>
-										<td>Actual Size</td>
-									</tr>
-									<tr>
-										<td><kbd>${userOSKey}</kbd> + <kbd>Shift</kbd> + <kbd>S</kbd></td>
-										<td>Toggle Sidebar</td>
-									</tr>
-									<tr>
-										<td><kbd>Option</kbd><kbd>${userOSKey}</kbd><kbd>I</kbd></td>
-										<td>Toggle DevTools for Zulip App</td>
-									</tr>
-									<tr>
-										<td><kbd>Option</kbd><kbd>${userOSKey}</kbd><kbd>U</kbd></td>
-										<td>Toggle DevTools for Active Tab</td>
-									</tr>
-									<tr>
-										<td><kbd>Ctrl</kbd> + <kbd>Tab</kbd></td>
-										<td>Switch to Next Organization</td>
-									</tr>
-									<tr>
-										<td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Tab</kbd></td>
-										<td>Switch to Previous Organization</td>
-									</tr>
-								</table>
-								<div class="setting-control"></div>
-							</div>
-							<div class="title">History Shortcuts</div>
-							<div class="settings-card">
-								<table>
-									<tr>
-										<td><kbd>${userOSKey}</kbd><kbd>←</kbd></td>
-										<td>Back</td>
-									</tr>
-									<tr>
-										<td><kbd>${userOSKey}</kbd><kbd>→</kbd></td>
-										<td>Forward</td>
-									</tr>
-								</table>
-								<div class="setting-control"></div>
-							</div>
-							<div class="title">Window Shortcuts</div>
-							<div class="settings-card">
-								<table>
-									<tr>
-										<td><kbd>${userOSKey}</kbd><kbd>M</kbd></td>
-										<td>Minimize</td>
-									</tr>
-									<tr>
-										<td><kbd>${userOSKey}</kbd><kbd>W</kbd></td>
-										<td>Close</td>
-									</tr>
-								</table>
-								<div class="setting-control"></div>
-							</div>
-						</div>
-		`;
-	}
-
-	templateWinLin(): string {
-		const userOSKey = 'Ctrl';
-
-		return `
-						<div class="settings-pane">
-						<div class="settings-card tip"><p><b><i class="material-icons md-14">settings</i>Tip:  </b>These desktop app shortcuts extend the Zulip webapp's <span id="open-hotkeys-link"> keyboard shortcuts</span>.</p></div>
-							<div class="title">Application Shortcuts</div>
-							<div class="settings-card">
-								<table>
-									<tr>
-										<td><kbd>${userOSKey}</kbd> + <kbd>,</kbd></td>
-										<td>Settings</td>
-									</tr>
-									<tr>
-										<td><kbd>${userOSKey}</kbd> + <kbd>K</kbd></td>
-										<td>Keyboard Shortcuts</td>
-									</tr>
-									<tr>
-										<td><kbd>${userOSKey}</kbd> + <kbd>Shift</kbd> + <kbd>M</kbd></td>
-										<td>Toggle Do Not Disturb</td>
-									</tr>
-									<tr>
-										<td><kbd>${userOSKey}</kbd> + <kbd>L</kbd></td>
-										<td>Log Out</td>
-									</tr>
-									<tr>
-										<td><kbd>${userOSKey}</kbd> + <kbd>Q</kbd></td>
-										<td>Quit Zulip</td>
-									</tr>
-								</table>
-								<div class="setting-control"></div>
-							</div>
-							<div class="title">Edit Shortcuts</div>
-							<div class="settings-card">
-								<table>
-									<tr>
-										<td><kbd>${userOSKey}</kbd> + <kbd>Z</kbd></td>
-										<td>Undo</td>
-									</tr>
-									<tr>
-										<td><kbd>${userOSKey}</kbd> + <kbd>Y</kbd></td>
-										<td>Redo</td>
-									</tr>
-									<tr>
-										<td><kbd>${userOSKey}</kbd> + <kbd>X</kbd></td>
-										<td>Cut</td>
-									</tr>
-									<tr>
-										<td><kbd>${userOSKey}</kbd> + <kbd>C</kbd></td>
-										<td>Copy</td>
-									</tr>
-									<tr>
-										<td><kbd>${userOSKey}</kbd> + <kbd>V</kbd></td>
-										<td>Paste</td>
-									</tr>
-									<tr>
-										<td><kbd>${userOSKey}</kbd> + <kbd>Shift</kbd> + <kbd>V</kbd></td>
-										<td>Paste and Match Style</td>
-									</tr>
-									<tr>
-										<td><kbd>${userOSKey}</kbd> + <kbd>A</kbd></td>
-										<td>Select All</td>
-									</tr>
-								</table>
-								<div class="setting-control"></div>
-							</div>
-							<div class="title">View Shortcuts</div>
-							<div class="settings-card">
-								<table>
-									<tr>
-										<td><kbd>${userOSKey}</kbd> + <kbd>R</kbd></td>
-										<td>Reload</td>
-									</tr>
-									<tr>
-										<td><kbd>${userOSKey}</kbd> + <kbd>Shift</kbd> + <kbd>R</kbd></td>
-										<td>Hard Reload</td>
-									</tr>
-									<tr>
-										<td><kbd>F11</kbd></td>
-										<td>Toggle Full Screen</td>
-									</tr>
-									<tr>
-										<td><kbd>${userOSKey}</kbd> + <kbd>=</kbd></td>
-										<td>Zoom In</td>
-									</tr>
-									<tr>
-										<td><kbd>${userOSKey}</kbd> + <kbd>-</kbd></td>
-										<td>Zoom Out</td>
-									</tr>
-									<tr>
-										<td><kbd>${userOSKey}</kbd> + <kbd>0</kbd></td>
-										<td>Actual Size</td>
-									</tr>
-									<tr>
-										<td><kbd>${userOSKey}</kbd> + <kbd>Shift</kbd> + <kbd>S</kbd></td>
-										<td>Toggle Sidebar</td>
-									</tr>
-									<tr>
-										<td><kbd>${userOSKey}</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd></td>
-										<td>Toggle DevTools for Zulip App</td>
-									</tr>
-									<tr>
-										<td><kbd>${userOSKey}</kbd> + <kbd>Shift</kbd> + <kbd>U</kbd></td>
-										<td>Toggle DevTools for Active Tab</td>
-									</tr>
-									<tr>
-										<td><kbd>${userOSKey}</kbd> + <kbd>Tab</kbd></td>
-										<td>Switch to Next Organization</td>
-									</tr>
-									<tr>
-										<td><kbd>${userOSKey}</kbd> + <kbd>Shift</kbd> + <kbd>Tab</kbd></td>
-										<td>Switch to Previous Organization</td>
-									</tr>
-								</table>
-								<div class="setting-control"></div>
-							</div>
-							<div class="title">History Shortcuts</div>
-							<div class="settings-card">
-								<table>
-									<tr>
-										<td><kbd>Alt</kbd> + <kbd>←</kbd></td>
-										<td>Back</td>
-									</tr>
-									<tr>
-										<td><kbd>Alt</kbd> + <kbd>→</kbd></td>
-										<td>Forward</td>
-									</tr>
-								</table>
-								<div class="setting-control"></div>
-							</div>
-							<div class="title">Window Shortcuts</div>
-							<div class="settings-card">
-								<table>
-									<tr>
-										<td><kbd>${userOSKey}</kbd> + <kbd>M</kbd></td>
-										<td>Minimize</td>
-									</tr>
-									<tr>
-										<td><kbd>${userOSKey}</kbd> + <kbd>W</kbd></td>
-										<td>Close</td>
-									</tr>
-								</table>
-								<div class="setting-control"></div>
-							</div>
-						</div>
-		`;
-	}
-
-	openHotkeysExternalLink(): void {
-		const link = 'https://zulipchat.com/help/keyboard-shortcuts';
-		const externalCreateNewOrgEl = document.querySelector('#open-hotkeys-link');
-		externalCreateNewOrgEl.addEventListener('click', () => {
-			shell.openExternal(link);
-		});
-	}
-	init(): void {
-		this.props.$root.innerHTML = (process.platform === 'darwin') ?
-			this.templateMac() : this.templateWinLin();
-		this.openHotkeysExternalLink();
-	}
-}
-
-export = ShortcutsSection;
--- a/app/renderer/js/preload.js
+++ b/app/renderer/js/preload.js
@@ -1,17 +1,11 @@
 'use strict';

-import { ipcRenderer, shell } from 'electron';
-import SetupSpellChecker from './spellchecker';
+const { ipcRenderer, shell } = require('electron');
+const SetupSpellChecker = require('./spellchecker');

-import LinkUtil = require('./utils/link-util');
-import params = require('./utils/params-util');
-
-interface PatchedGlobal extends NodeJS.Global {
-	logout: () => void;
-	shortcut: () => void;
-}
-
-const globalPatched = global as PatchedGlobal;
+const ConfigUtil = require(__dirname + '/utils/config-util.js');
+const LinkUtil = require(__dirname + '/utils/link-util.js');
+const params = require(__dirname + '/utils/params-util.js');

 // eslint-disable-next-line import/no-unassigned-import
 require('./notification');
@@ -19,46 +13,44 @@ require('./notification');
 // Prevent drag and drop event in main process which prevents remote code executaion
 require(__dirname + '/shared/preventdrag.js');

-declare let window: ZulipWebWindow;
-
-// eslint-disable-next-line @typescript-eslint/camelcase
+// eslint-disable-next-line camelcase
 window.electron_bridge = require('./electron-bridge');

-const logout = (): void => {
+const logout = () => {
 	// Create the menu for the below
-	const dropdown: HTMLElement = document.querySelector('.dropdown-toggle');
-	dropdown.click();
+	document.querySelector('.dropdown-toggle').click();

-	const nodes: NodeListOf<HTMLElement> = document.querySelectorAll('.dropdown-menu li:last-child a');
+	const nodes = document.querySelectorAll('.dropdown-menu li:last-child a');
 	nodes[nodes.length - 1].click();
 };

-const shortcut = (): void => {
+const shortcut = () => {
 	// Create the menu for the below
-	const node: HTMLElement = document.querySelector('a[data-overlay-trigger=keyboard-shortcuts]');
+	const node = document.querySelector('a[data-overlay-trigger=keyboard-shortcuts]');
 	// Additional check
-	if (node.textContent.trim().toLowerCase() === 'keyboard shortcuts (?)') {
+	if (node.text.trim().toLowerCase() === 'keyboard shortcuts (?)') {
 		node.click();
 	} else {
 		// Atleast click the dropdown
-		const dropdown: HTMLElement = document.querySelector('.dropdown-toggle');
-		dropdown.click();
+		document.querySelector('.dropdown-toggle').click();
 	}
 };

-process.once('loaded', (): void => {
-	globalPatched.logout = logout;
-	globalPatched.shortcut = shortcut;
+process.once('loaded', () => {
+	global.logout = logout;
+	global.shortcut = shortcut;
 });

 // To prevent failing this script on linux we need to load it after the document loaded
-document.addEventListener('DOMContentLoaded', (): void => {
+document.addEventListener('DOMContentLoaded', () => {
 	if (params.isPageParams()) {
 	// Get the default language of the server
-		const serverLanguage = page_params.default_language; // eslint-disable-line no-undef, @typescript-eslint/camelcase
+		const serverLanguage = page_params.default_language; // eslint-disable-line no-undef, camelcase
 		if (serverLanguage) {
+			// Set spellcheker language
+			ConfigUtil.setConfigItem('spellcheckerLanguage', serverLanguage);
 			// Init spellchecker
-			SetupSpellChecker.init(serverLanguage);
+			SetupSpellChecker.init();
 		}
 		// redirect users to network troubleshooting page
 		const getRestartButton = document.querySelector('.restart_get_events_button');
@@ -69,7 +61,7 @@ document.addEventListener('DOMContentLoaded', (): void => {
 		}
 		// Open image attachment link in the lightbox instead of opening in the default browser
 		const { $, lightbox } = window;
-		$('#main_div').on('click', '.message_content p a', function (this: HTMLElement, e: Event) {
+		$('#main_div').on('click', '.message_content p a', function (e) {
 			const url = $(this).attr('href');

 			if (LinkUtil.isImage(url)) {
@@ -93,21 +85,14 @@ document.addEventListener('DOMContentLoaded', (): void => {

 // Clean up spellchecker events after you navigate away from this page;
 // otherwise, you may experience errors
-window.addEventListener('beforeunload', (): void => {
+window.addEventListener('beforeunload', () => {
 	SetupSpellChecker.unsubscribeSpellChecker();
 });

 // electron's globalShortcut can cause unexpected results
 // so adding the reload shortcut in the old-school way
-// Zoom from numpad keys is not supported by electron, so adding it through listeners.
 document.addEventListener('keydown', event => {
 	if (event.code === 'F5') {
 		ipcRenderer.send('forward-message', 'hard-reload');
-	} else if (event.ctrlKey && event.code === 'NumpadAdd') {
-		ipcRenderer.send('forward-message', 'zoomIn');
-	} else if (event.ctrlKey && event.code === 'NumpadSubtract') {
-		ipcRenderer.send('forward-message', 'zoomOut');
-	} else if (event.ctrlKey && event.code === 'Numpad0') {
-		ipcRenderer.send('forward-message', 'zoomActualSize');
 	}
 });
--- a/app/renderer/js/shared/preventdrag.js
+++ b/app/renderer/js/shared/preventdrag.js
@@ -5,7 +5,7 @@
 // It doesn't affect the compose box so that users can still
 // use drag and drop event to share files etc

-const preventDragAndDrop = (): void => {
+const preventDragAndDrop = () => {
 	const preventEvents = ['dragover', 'drop'];
 	preventEvents.forEach(dragEvents => {
 		document.addEventListener(dragEvents, event => {
--- a/app/renderer/js/spellchecker.js
+++ b/app/renderer/js/spellchecker.js
@@ -0,0 +1,62 @@
+'use strict';
+
+const { SpellCheckHandler, ContextMenuListener, ContextMenuBuilder } = require('electron-spellchecker');
+
+const ConfigUtil = require(__dirname + '/utils/config-util.js');
+const Logger = require(__dirname + '/utils/logger-util.js');
+
+const logger = new Logger({
+	file: 'errors.log',
+	timestamp: true
+});
+
+class SetupSpellChecker {
+	init() {
+		if (ConfigUtil.getConfigItem('enableSpellchecker')) {
+			this.enableSpellChecker();
+		}
+		this.enableContextMenu();
+	}
+
+	enableSpellChecker() {
+		try {
+			this.SpellCheckHandler = new SpellCheckHandler();
+		} catch (err) {
+			logger.error(err);
+		}
+	}
+
+	enableContextMenu() {
+		if (this.SpellCheckHandler) {
+			this.SpellCheckHandler.attachToInput();
+
+			const userLanguage = ConfigUtil.getConfigItem('spellcheckerLanguage');
+
+			// eslint-disable-next-line no-unused-expressions
+			process.platform === 'darwin' ?
+				// On macOS, spellchecker fails to auto-detect the lanugage user is typing in
+				// that's why we need to mention it explicitly
+				this.SpellCheckHandler.switchLanguage(userLanguage) :
+				// On Linux and Windows, spellchecker can automatically detects the language the user is typing in
+				// and silently switches on the fly; thus we can start off as US English
+				this.SpellCheckHandler.switchLanguage('en-US');
+		}
+
+		const contextMenuBuilder = new ContextMenuBuilder(this.SpellCheckHandler);
+		this.contextMenuListener = new ContextMenuListener(info => {
+			contextMenuBuilder.showPopupMenu(info);
+		});
+	}
+
+	unsubscribeSpellChecker() {
+		// eslint-disable-next-line no-undef
+		if (this.SpellCheckHandler) {
+			this.SpellCheckHandler.unsubscribe();
+		}
+		if (this.contextMenuListener) {
+			this.contextMenuListener.unsubscribe();
+		}
+	}
+}
+
+module.exports = new SetupSpellChecker();
--- a/app/renderer/js/spellchecker.ts
+++ b/app/renderer/js/spellchecker.ts
@@ -1,56 +0,0 @@
-'use strict';
-
-import { SpellCheckHandler, ContextMenuListener, ContextMenuBuilder } from 'electron-spellchecker';
-
-import ConfigUtil = require('./utils/config-util');
-import Logger = require('./utils/logger-util');
-
-const logger = new Logger({
-	file: 'errors.log',
-	timestamp: true
-});
-
-class SetupSpellChecker {
-	SpellCheckHandler: typeof SpellCheckHandler;
-	contextMenuListener: typeof ContextMenuListener;
-	init(serverLanguage: string): void {
-		if (ConfigUtil.getConfigItem('enableSpellchecker')) {
-			this.enableSpellChecker();
-		}
-		this.enableContextMenu(serverLanguage);
-	}
-
-	enableSpellChecker(): void {
-		try {
-			this.SpellCheckHandler = new SpellCheckHandler();
-		} catch (err) {
-			logger.error(err);
-		}
-	}
-
-	enableContextMenu(serverLanguage: string): void {
-		if (this.SpellCheckHandler) {
-			this.SpellCheckHandler.attachToInput();
-			this.SpellCheckHandler.switchLanguage(serverLanguage);
-			this.SpellCheckHandler.currentSpellcheckerChanged.subscribe(() => {
-				this.SpellCheckHandler.switchLanguage(this.SpellCheckHandler.currentSpellcheckerLanguage);
-			});
-		}
-
-		const contextMenuBuilder = new ContextMenuBuilder(this.SpellCheckHandler);
-		this.contextMenuListener = new ContextMenuListener((info: object) => {
-			contextMenuBuilder.showPopupMenu(info);
-		});
-	}
-
-	unsubscribeSpellChecker(): void {
-		if (this.SpellCheckHandler) {
-			this.SpellCheckHandler.unsubscribe();
-		}
-		if (this.contextMenuListener) {
-			this.contextMenuListener.unsubscribe();
-		}
-	}
-}
-
-export = new SetupSpellChecker();
--- a/app/renderer/js/tray.js
+++ b/app/renderer/js/tray.js
@@ -1,15 +1,17 @@
 'use strict';
-import { ipcRenderer, remote, WebviewTag, NativeImage } from 'electron';
+const path = require('path');

-import path = require('path');
-import ConfigUtil = require('./utils/config-util.js');
-const { Tray, Menu, nativeImage, BrowserWindow } = remote;
+const electron = require('electron');
+
+const {ipcRenderer, remote} = electron;
+
+const {Tray, Menu, nativeImage, BrowserWindow} = remote;

 const APP_ICON = path.join(__dirname, '../../resources/tray', 'tray');

-declare let window: ZulipWebWindow;
+const ConfigUtil = require(__dirname + '/utils/config-util.js');

-const iconPath = (): string => {
+const iconPath = () => {
 	if (process.platform === 'linux') {
 		return APP_ICON + 'linux.png';
 	}
@@ -18,7 +20,7 @@ const iconPath = (): string => {

 let unread = 0;

-const trayIconSize = (): number => {
+const trayIconSize = () => {
 	switch (process.platform) {
 		case 'darwin':
 			return 20;
@@ -43,7 +45,7 @@ const config = {
 	thick: process.platform === 'win32'
 };

-const renderCanvas = function (arg: number): Promise<HTMLCanvasElement> {
+const renderCanvas = function (arg) {
 	config.unreadCount = arg;

 	return new Promise(resolve => {
@@ -77,10 +79,10 @@ const renderCanvas = function (arg: number): Promise<HTMLCanvasElement> {
 				ctx.fillText('99+', CENTER, CENTER + (SIZE * 0.15));
 			} else if (config.unreadCount < 10) {
 				ctx.font = `${config.thick ? 'bold ' : ''}${SIZE * 0.5}px Helvetica`;
-				ctx.fillText(String(config.unreadCount), CENTER, CENTER + (SIZE * 0.20));
+				ctx.fillText(config.unreadCount, CENTER, CENTER + (SIZE * 0.20));
 			} else {
 				ctx.font = `${config.thick ? 'bold ' : ''}${SIZE * 0.5}px Helvetica`;
-				ctx.fillText(String(config.unreadCount), CENTER, CENTER + (SIZE * 0.15));
+				ctx.fillText(config.unreadCount, CENTER, CENTER + (SIZE * 0.15));
 			}

 			resolve(canvas);
@@ -92,23 +94,16 @@ const renderCanvas = function (arg: number): Promise<HTMLCanvasElement> {
 * @param arg: Unread count
 * @return the native image
 */
-const renderNativeImage = function (arg: number): Promise<NativeImage> {
+const renderNativeImage = function (arg) {
 	return Promise.resolve()
 		.then(() => renderCanvas(arg))
 		.then(canvas => {
 			const pngData = nativeImage.createFromDataURL(canvas.toDataURL('image/png')).toPNG();
-
-			// TODO: Fix the function to correctly use Promise correctly.
-			// the Promise.resolve().then(...) above is useless we should
-			// start with renderCanvas(arg).then
-			// eslint-disable-next-line promise/no-return-wrap
-			return Promise.resolve(nativeImage.createFromBuffer(pngData, {
-				scaleFactor: config.pixelRatio
-			}));
+			return Promise.resolve(nativeImage.createFromBuffer(pngData, config.pixelRatio));
 		});
 };

-function sendAction(action: string): void {
+function sendAction(action) {
 	const win = BrowserWindow.getAllWindows()[0];

 	if (process.platform === 'darwin') {
@@ -118,43 +113,57 @@ function sendAction(action: string): void {
 	win.webContents.send(action);
 }

-const createTray = function (): void {
+const createTray = function () {
 	window.tray = new Tray(iconPath());
-	const contextMenu = Menu.buildFromTemplate([
-		{
-			label: 'Zulip',
-			click() {
-				ipcRenderer.send('focus-app');
-			}
-		},
-		{
-			label: 'Settings',
-			click() {
-				ipcRenderer.send('focus-app');
-				sendAction('open-settings');
-			}
-		},
-		{
-			type: 'separator'
-		},
-		{
-			label: 'Quit',
-			click() {
-				ipcRenderer.send('quit-app');
-			}
+	const contextMenu = Menu.buildFromTemplate([{
+		label: 'About',
+		click() {
+			// We need to focus the main window first
+			ipcRenderer.send('focus-app');
+			sendAction('open-about');
 		}
+	},
+	{
+		type: 'separator'
+	},
+	{
+		label: 'Focus',
+		click() {
+			ipcRenderer.send('focus-app');
+		}
+	},
+	{
+		type: 'separator'
+	},
+	{
+		label: 'Settings',
+		click() {
+			ipcRenderer.send('focus-app');
+			sendAction('open-settings');
+		}
+	},
+	{
+		type: 'separator'
+	},
+	{
+		label: 'Quit',
+		click() {
+			ipcRenderer.send('quit-app');
+		}
+	}
 	]);
 	window.tray.setContextMenu(contextMenu);
-	if (process.platform === 'linux' || process.platform === 'win32') {
-		window.tray.on('click', () => {
+	window.tray.on('click', () => {
+		// Click event only works on Windows
+		if (process.platform === 'win32') {
 			ipcRenderer.send('toggle-app');
-		});
-	}
+		}
+	});
 };

-ipcRenderer.on('destroytray', (event: Event): Event => {
+ipcRenderer.on('destroytray', event => {
 	if (!window.tray) {
-		return undefined;
+		return;
 	}

 	window.tray.destroy();
@@ -167,7 +176,7 @@ ipcRenderer.on('destroytray', (event: Event): Event => {
 	return event;
 });

-ipcRenderer.on('tray', (_event: Event, arg: number): void => {
+ipcRenderer.on('tray', (event, arg) => {
 	if (!window.tray) {
 		return;
 	}
@@ -187,7 +196,7 @@ ipcRenderer.on('tray', (_event: Event, arg: number): void => {
 	}
 });

-function toggleTray(): void {
+function toggleTray() {
 	let state;
 	if (window.tray) {
 		state = false;
@@ -208,7 +217,7 @@ function toggleTray(): void {
 		ConfigUtil.setConfigItem('trayIcon', true);
 	}
 	const selector = 'webview:not([class*=disabled])';
-	const webview: WebviewTag = document.querySelector(selector);
+	const webview = document.querySelector(selector);
 	const webContents = webview.getWebContents();
 	webContents.send('toggletray', state);
 }
--- a/app/renderer/js/utils/certificate-util.js
+++ b/app/renderer/js/utils/certificate-util.js
@@ -1,14 +1,11 @@
 'use strict';

-import { remote } from 'electron';
-import JsonDB from 'node-json-db';
-import { initSetUp } from './default-util';
-
-import fs = require('fs');
-import path = require('path');
-import Logger = require('./logger-util');
-
-const { app, dialog } = remote;
+const { app, dialog } = require('electron').remote;
+const fs = require('fs');
+const path = require('path');
+const JsonDB = require('node-json-db');
+const Logger = require('./logger-util');
+const { initSetUp } = require('./default-util');

 initSetUp();

@@ -17,12 +14,10 @@ const logger = new Logger({
 	timestamp: true
 });

-let instance: null | CertificateUtil = null;
+let instance = null;
 const certificatesDir = `${app.getPath('userData')}/certificates`;

 class CertificateUtil {
-	db: JsonDB;
-
 	constructor() {
 		if (instance) {
 			return instance;
@@ -33,8 +28,7 @@ class CertificateUtil {
 		this.reloadDB();
 		return instance;
 	}
-
-	getCertificate(server: string, defaultValue: any = null): any {
+	getCertificate(server, defaultValue = null) {
 		this.reloadDB();
 		const value = this.db.getData('/')[server];
 		if (value === undefined) {
@@ -43,9 +37,8 @@ class CertificateUtil {
 			return value;
 		}
 	}
-
 	// Function to copy the certificate to userData folder
-	copyCertificate(_server: string, location: string, fileName: string): boolean {
+	copyCertificate(server, location, fileName) {
 		let copied = false;
 		const filePath = `${certificatesDir}/${fileName}`;
 		try {
@@ -61,19 +54,16 @@ class CertificateUtil {
 		}
 		return copied;
 	}
-
-	setCertificate(server: string, fileName: string): void {
+	setCertificate(server, fileName) {
 		const filePath = `${certificatesDir}/${fileName}`;
 		this.db.push(`/${server}`, filePath, true);
 		this.reloadDB();
 	}
-
-	removeCertificate(server: string): void {
+	removeCertificate(server) {
 		this.db.delete(`/${server}`);
 		this.reloadDB();
 	}
-
-	reloadDB(): void {
+	reloadDB() {
 		const settingsJsonPath = path.join(app.getPath('userData'), '/config/certificates.json');
 		try {
 			const file = fs.readFileSync(settingsJsonPath, 'utf8');
@@ -93,4 +83,4 @@ class CertificateUtil {
 	}
 }

-export = new CertificateUtil();
+module.exports = new CertificateUtil();
--- a/app/renderer/js/utils/common-util.ts
+++ b/app/renderer/js/utils/common-util.ts
@@ -1,25 +0,0 @@
-'use strict';
-
-let instance: null | CommonUtil = null;
-
-class CommonUtil {
-	constructor() {
-		if (instance) {
-			return instance;
-		} else {
-			instance = this;
-		}
-		return instance;
-	}
-
-	// unescape already encoded/escaped strings
-	decodeString(stringInput: string): string {
-		const parser = new DOMParser();
-		const dom = parser.parseFromString(
-			'<!doctype html><body>' + stringInput,
-			'text/html');
-		return dom.body.textContent;
-	}
-}
-
-export = new CommonUtil();
--- a/app/renderer/js/utils/config-util.js
+++ b/app/renderer/js/utils/config-util.js
@@ -1,33 +1,32 @@
 'use strict';
-import JsonDB from 'node-json-db';

-import fs = require('fs');
-import path = require('path');
-import electron = require('electron');
-import Logger = require('./logger-util');
+const fs = require('fs');
+const path = require('path');
+const process = require('process');
+const JsonDB = require('node-json-db');
+const Logger = require('./logger-util');

 const logger = new Logger({
 	file: 'config-util.log',
 	timestamp: true
 });

-let instance: null | ConfigUtil = null;
-let dialog: Electron.Dialog = null;
-let app: Electron.App = null;
+let instance = null;
+let dialog = null;
+let app = null;

 /* To make the util runnable in both main and renderer process */
 if (process.type === 'renderer') {
-	const { remote } = electron;
+	const remote = require('electron').remote;
 	dialog = remote.dialog;
 	app = remote.app;
 } else {
+	const electron = require('electron');
 	dialog = electron.dialog;
 	app = electron.app;
 }

 class ConfigUtil {
-	db: JsonDB;
-
 	constructor() {
 		if (instance) {
 			return instance;
@@ -39,13 +38,8 @@ class ConfigUtil {
 		return instance;
 	}

-	getConfigItem(key: string, defaultValue: any = null): any {
-		try {
-			this.db.reload();
-		} catch (err) {
-			logger.error('Error while reloading settings.json: ');
-			logger.error(err);
-		}
+	getConfigItem(key, defaultValue = null) {
+		this.reloadDB();
 		const value = this.db.getData('/')[key];
 		if (value === undefined) {
 			this.setConfigItem(key, defaultValue);
@@ -54,30 +48,24 @@ class ConfigUtil {
 			return value;
 		}
 	}
-
 	// This function returns whether a key exists in the configuration file (settings.json)
-	isConfigItemExists(key: string): boolean {
-		try {
-			this.db.reload();
-		} catch (err) {
-			logger.error('Error while reloading settings.json: ');
-			logger.error(err);
-		}
+	isConfigItemExists(key) {
+		this.reloadDB();
 		const value = this.db.getData('/')[key];
 		return (value !== undefined);
 	}

-	setConfigItem(key: string, value: any): void {
+	setConfigItem(key, value) {
 		this.db.push(`/${key}`, value, true);
-		this.db.save();
+		this.reloadDB();
 	}

-	removeConfigItem(key: string): void {
+	removeConfigItem(key) {
 		this.db.delete(`/${key}`);
-		this.db.save();
+		this.reloadDB();
 	}

-	reloadDB(): void {
+	reloadDB() {
 		const settingsJsonPath = path.join(app.getPath('userData'), '/config/settings.json');
 		try {
 			const file = fs.readFileSync(settingsJsonPath, 'utf8');
@@ -98,4 +86,4 @@ class ConfigUtil {
 	}
 }

-export = new ConfigUtil();
+module.exports = new ConfigUtil();
--- a/app/renderer/js/utils/default-util.js
+++ b/app/renderer/js/utils/default-util.js
@@ -1,6 +1,6 @@
-import fs = require('fs');
+const fs = require('fs');

-let app: Electron.App = null;
+let app = null;
 let setupCompleted = false;
 if (process.type === 'renderer') {
 	app = require('electron').remote.app;
@@ -12,7 +12,7 @@ const zulipDir = app.getPath('userData');
 const logDir = `${zulipDir}/Logs/`;
 const certificatesDir = `${zulipDir}/certificates/`;
 const configDir = `${zulipDir}/config/`;
-export const initSetUp = (): void => {
+const initSetUp = () => {
 	// if it is the first time the app is running
 	// create zulip dir in userData folder to
 	// avoid errors
@@ -72,3 +72,7 @@ export const initSetUp = (): void => {
 		setupCompleted = true;
 	}
 };
+
+module.exports = {
+	initSetUp
+};
--- a/app/renderer/js/utils/dnd-util.js
+++ b/app/renderer/js/utils/dnd-util.js
@@ -1,30 +1,17 @@
 'use strict';

-import ConfigUtil = require('./config-util');
+const ConfigUtil = require(__dirname + '/config-util.js');

-// TODO: TypeScript - add to Setting interface
-// the list of settings since we have fixed amount of them
-// We want to do this by creating a new module that exports
-// this interface
-interface Setting {
-	[key: string]: any;
-}
-
-interface Toggle {
-	dnd: boolean;
-	newSettings: Setting;
-}
-
-export function toggle(): Toggle {
+function toggle() {
 	const dnd = !ConfigUtil.getConfigItem('dnd', false);
 	const dndSettingList = ['showNotification', 'silent'];
 	if (process.platform === 'win32') {
 		dndSettingList.push('flashTaskbarOnMessage');
 	}

-	let newSettings: Setting;
+	let newSettings;
 	if (dnd) {
-		const oldSettings: Setting = {};
+		const oldSettings = {};
 		newSettings = {};

 		// Iterate through the dndSettingList.
@@ -48,3 +35,7 @@ export function toggle(): Toggle {
 	ConfigUtil.setConfigItem('dnd', dnd);
 	return {dnd, newSettings};
 }
+
+module.exports = {
+	toggle
+};
--- a/app/renderer/js/utils/domain-util.js
+++ b/app/renderer/js/utils/domain-util.js
@@ -0,0 +1,328 @@
+'use strict';
+
+const { app, dialog } = require('electron').remote;
+const fs = require('fs');
+const path = require('path');
+const JsonDB = require('node-json-db');
+const request = require('request');
+const escape = require('escape-html');
+
+const Logger = require('./logger-util');
+
+const CertificateUtil = require(__dirname + '/certificate-util.js');
+const ProxyUtil = require(__dirname + '/proxy-util.js');
+const ConfigUtil = require(__dirname + '/config-util.js');
+
+const logger = new Logger({
+	file: `domain-util.log`,
+	timestamp: true
+});
+
+let instance = null;
+
+const defaultIconUrl = '../renderer/img/icon.png';
+
+class DomainUtil {
+	constructor() {
+		if (instance) {
+			return instance;
+		} else {
+			instance = this;
+		}
+
+		this.reloadDB();
+		// Migrate from old schema
+		if (this.db.getData('/').domain) {
+			this.addDomain({
+				alias: 'Zulip',
+				url: this.db.getData('/domain')
+			});
+			this.db.delete('/domain');
+		}
+
+		return instance;
+	}
+
+	getDomains() {
+		this.reloadDB();
+		if (this.db.getData('/').domains === undefined) {
+			return [];
+		} else {
+			return this.db.getData('/domains');
+		}
+	}
+
+	getDomain(index) {
+		this.reloadDB();
+		return this.db.getData(`/domains[${index}]`);
+	}
+
+	updateDomain(index, server) {
+		this.reloadDB();
+		this.db.push(`/domains[${index}]`, server, true);
+	}
+
+	addDomain(server) {
+		return new Promise(resolve => {
+			if (server.icon) {
+				this.saveServerIcon(server.icon).then(localIconUrl => {
+					server.icon = localIconUrl;
+					this.db.push('/domains[]', server, true);
+					this.reloadDB();
+					resolve();
+				});
+			} else {
+				server.icon = defaultIconUrl;
+				this.db.push('/domains[]', server, true);
+				this.reloadDB();
+				resolve();
+			}
+		});
+	}
+
+	removeDomains() {
+		this.db.delete('/domains');
+		this.reloadDB();
+	}
+
+	removeDomain(index) {
+		this.db.delete(`/domains[${index}]`);
+		this.reloadDB();
+	}
+
+	// Check if domain is already added
+	duplicateDomain(domain) {
+		domain = this.formatUrl(domain);
+		const servers = this.getDomains();
+		for (const i in servers) {
+			if (servers[i].url === domain) {
+				return true;
+			}
+		}
+		return false;
+	}
+
+	checkDomain(domain, silent = false) {
+		if (!silent && this.duplicateDomain(domain)) {
+			// Do not check duplicate in silent mode
+			return Promise.reject('This server has been added.');
+		}
+
+		domain = this.formatUrl(domain);
+
+		const certificate = CertificateUtil.getCertificate(encodeURIComponent(domain));
+		let certificateLocation = '';
+
+		if (certificate) {
+			// To handle case where certificate has been moved from the location in certificates.json
+			try {
+				certificateLocation = fs.readFileSync(certificate);
+			} catch (err) {
+				logger.warn('Error while trying to get certificate: ' + err);
+			}
+		}
+
+		const proxyEnabled = ConfigUtil.getConfigItem('useManualProxy') || ConfigUtil.getConfigItem('useSystemProxy');
+
+		// If certificate for the domain exists add it as a ca key in the request's parameter else consider only domain as the parameter for request
+		// Add proxy as a parameter if it sbeing used.
+		const checkDomain = {
+			url: domain + '/static/audio/zulip.ogg',
+			ca: (certificateLocation) ? certificateLocation : '',
+			proxy: proxyEnabled ? ProxyUtil.getProxy(domain) : ''
+		};
+
+		const serverConf = {
+			icon: defaultIconUrl,
+			url: domain,
+			alias: domain
+		};
+
+		return new Promise((resolve, reject) => {
+			request(checkDomain, (error, response) => {
+				// If the domain contains following strings we just bypass the server
+				const whitelistDomains = [
+					'zulipdev.org'
+				];
+
+				// make sure that error is an error or string not undefined
+				// so validation does not throw error.
+				error = error || '';
+
+				const certsError = error.toString().includes('certificate');
+				if (!error && response.statusCode < 400) {
+					// Correct
+					this.getServerSettings(domain).then(serverSettings => {
+						resolve(serverSettings);
+					}, () => {
+						resolve(serverConf);
+					});
+				} else if (domain.indexOf(whitelistDomains) >= 0 || certsError) {
+					if (silent) {
+						this.getServerSettings(domain).then(serverSettings => {
+							resolve(serverSettings);
+						}, () => {
+							resolve(serverConf);
+						});
+					} else {
+						// Report error to sentry to get idea of possible certificate errors
+						// users get when adding the servers
+						logger.reportSentry(new Error(error));
+						const certErrorMessage = `Do you trust certificate from ${domain}? \n ${error}`;
+						const certErrorDetail = `The organization you're connecting to is either someone impersonating the Zulip server you entered, or the server you're trying to connect to is configured in an insecure way.
+						\nIf you have a valid certificate please add it from Settings>Organizations and try to add the organization again.
+						\nUnless you have a good reason to believe otherwise, you should not proceed.
+						\nYou can click here if you'd like to proceed with the connection.`;
+
+						dialog.showMessageBox({
+							type: 'warning',
+							buttons: ['Yes', 'No'],
+							defaultId: 1,
+							message: certErrorMessage,
+							detail: certErrorDetail
+						}, response => {
+							if (response === 0) {
+								this.getServerSettings(domain).then(serverSettings => {
+									resolve(serverSettings);
+								}, () => {
+									resolve(serverConf);
+								});
+							} else {
+								reject('Untrusted Certificate.');
+							}
+						});
+					}
+				} else {
+					const invalidZulipServerError = `${domain} does not appear to be a valid Zulip server. Make sure that \
+					\n (1) you can connect to that URL in a web browser and \n (2) if you need a proxy to connect to the Internet, that you've configured your proxy in the Network settings \n (3) its a zulip server \
+					\n (4) the server has a valid certificate, you can add custom certificates in Settings>Organizations`;
+					reject(invalidZulipServerError);
+				}
+			});
+		});
+	}
+
+	getServerSettings(domain) {
+		const proxyEnabled = ConfigUtil.getConfigItem('useManualProxy') || ConfigUtil.getConfigItem('useSystemProxy');
+		const serverSettingsOptions = {
+			url: domain + '/api/v1/server_settings',
+			proxy: proxyEnabled ? ProxyUtil.getProxy(domain) : ''
+		};
+		return new Promise((resolve, reject) => {
+			request(serverSettingsOptions, (error, response) => {
+				if (!error && response.statusCode === 200) {
+					const data = JSON.parse(response.body);
+					if (data.hasOwnProperty('realm_icon') && data.realm_icon) {
+						resolve({
+							// Some Zulip Servers use absolute URL for server icon whereas others use relative URL
+							// Following check handles both the cases
+							icon: data.realm_icon.startsWith('/') ? data.realm_uri + data.realm_icon : data.realm_icon,
+							url: data.realm_uri,
+							alias: escape(data.realm_name)
+						});
+					}
+				} else {
+					reject('Zulip server version < 1.6.');
+				}
+			});
+		});
+	}
+
+	saveServerIcon(url) {
+		const proxyEnabled = ConfigUtil.getConfigItem('useManualProxy') || ConfigUtil.getConfigItem('useSystemProxy');
+		const serverIconOptions = {
+			url,
+			proxy: proxyEnabled ? ProxyUtil.getProxy(url) : ''
+		};
+		// The save will always succeed. If url is invalid, downgrade to default icon.
+		return new Promise(resolve => {
+			const filePath = this.generateFilePath(url);
+			const file = fs.createWriteStream(filePath);
+			try {
+				request(serverIconOptions).on('response', response => {
+					response.on('error', err => {
+						logger.log('Could not get server icon.');
+						logger.log(err);
+						logger.reportSentry(err);
+						resolve(defaultIconUrl);
+					});
+					response.pipe(file).on('finish', () => {
+						resolve(filePath);
+					});
+				}).on('error', err => {
+					logger.log('Could not get server icon.');
+					logger.log(err);
+					logger.reportSentry(err);
+					resolve(defaultIconUrl);
+				});
+			} catch (err) {
+				logger.log('Could not get server icon.');
+				logger.log(err);
+				logger.reportSentry(err);
+				resolve(defaultIconUrl);
+			}
+		});
+	}
+
+	updateSavedServer(url, index) {
+		// Does not promise successful update
+		this.checkDomain(url, true).then(newServerConf => {
+			this.saveServerIcon(newServerConf.icon).then(localIconUrl => {
+				newServerConf.icon = localIconUrl;
+				this.updateDomain(index, newServerConf);
+				this.reloadDB();
+			});
+		});
+	}
+
+	reloadDB() {
+		const domainJsonPath = path.join(app.getPath('userData'), 'config/domain.json');
+		try {
+			const file = fs.readFileSync(domainJsonPath, 'utf8');
+			JSON.parse(file);
+		} catch (err) {
+			if (fs.existsSync(domainJsonPath)) {
+				fs.unlinkSync(domainJsonPath);
+				dialog.showErrorBox(
+					'Error saving new organization',
+					'There seems to be error while saving new organization, ' +
+					'you may have to re-add your previous organizations back.'
+				);
+				logger.error('Error while JSON parsing domain.json: ');
+				logger.error(err);
+				logger.reportSentry(err);
+			}
+		}
+		this.db = new JsonDB(domainJsonPath, true, true);
+	}
+
+	generateFilePath(url) {
+		const dir = `${app.getPath('userData')}/server-icons`;
+		const extension = path.extname(url).split('?')[0];
+
+		let hash = 5381;
+		let len = url.length;
+
+		while (len) {
+			hash = (hash * 33) ^ url.charCodeAt(--len);
+		}
+
+		// Create 'server-icons' directory if not existed
+		if (!fs.existsSync(dir)) {
+			fs.mkdirSync(dir);
+		}
+
+		return `${dir}/${hash >>> 0}${extension}`;
+	}
+
+	formatUrl(domain) {
+		const hasPrefix = (domain.indexOf('http') === 0);
+		if (hasPrefix) {
+			return domain;
+		} else {
+			return (domain.indexOf('localhost:') >= 0) ? `http://${domain}` : `https://${domain}`;
+		}
+	}
+}
+
+module.exports = new DomainUtil();
--- a/app/renderer/js/utils/domain-util.ts
+++ b/app/renderer/js/utils/domain-util.ts
@@ -1,310 +0,0 @@
-'use strict';
-import JsonDB from 'node-json-db';
-
-import escape = require('escape-html');
-import request = require('request');
-import fs = require('fs');
-import path = require('path');
-import Logger = require('./logger-util');
-import electron = require('electron');
-
-import RequestUtil = require('./request-util');
-import Messages = require('../../../resources/messages');
-
-const { app, dialog } = electron.remote;
-
-const logger = new Logger({
-	file: `domain-util.log`,
-	timestamp: true
-});
-
-let instance: null | DomainUtil = null;
-
-const defaultIconUrl = '../renderer/img/icon.png';
-
-class DomainUtil {
-	db: JsonDB;
-	constructor() {
-		if (instance) {
-			return instance;
-		} else {
-			instance = this;
-		}
-
-		this.reloadDB();
-		// Migrate from old schema
-		if (this.db.getData('/').domain) {
-			this.addDomain({
-				alias: 'Zulip',
-				url: this.db.getData('/domain')
-			});
-			this.db.delete('/domain');
-		}
-
-		return instance;
-	}
-
-	getDomains(): any {
-		this.reloadDB();
-		if (this.db.getData('/').domains === undefined) {
-			return [];
-		} else {
-			return this.db.getData('/domains');
-		}
-	}
-
-	getDomain(index: number): any {
-		this.reloadDB();
-		return this.db.getData(`/domains[${index}]`);
-	}
-
-	updateDomain(index: number, server: object): void {
-		this.reloadDB();
-		this.db.push(`/domains[${index}]`, server, true);
-	}
-
-	addDomain(server: any): Promise<void> {
-		const { ignoreCerts } = server;
-		return new Promise(resolve => {
-			if (server.icon) {
-				this.saveServerIcon(server, ignoreCerts).then(localIconUrl => {
-					server.icon = localIconUrl;
-					this.db.push('/domains[]', server, true);
-					this.reloadDB();
-					resolve();
-				});
-			} else {
-				server.icon = defaultIconUrl;
-				this.db.push('/domains[]', server, true);
-				this.reloadDB();
-				resolve();
-			}
-		});
-	}
-
-	removeDomains(): void {
-		this.db.delete('/domains');
-		this.reloadDB();
-	}
-
-	removeDomain(index: number): void {
-		this.db.delete(`/domains[${index}]`);
-		this.reloadDB();
-	}
-
-	// Check if domain is already added
-	duplicateDomain(domain: any): boolean {
-		domain = this.formatUrl(domain);
-		const servers = this.getDomains();
-		for (const i in servers) {
-			if (servers[i].url === domain) {
-				return true;
-			}
-		}
-		return false;
-	}
-
-	async checkCertError(domain: any, serverConf: any, error: string, silent: boolean): Promise<string | object> {
-		if (silent) {
-			// since getting server settings has already failed
-			return serverConf;
-		} else {
-			// Report error to sentry to get idea of possible certificate errors
-			// users get when adding the servers
-			logger.reportSentry(new Error(error).toString());
-			const certErrorMessage = Messages.certErrorMessage(domain, error);
-			const certErrorDetail = Messages.certErrorDetail();
-
-			const response = await (dialog.showMessageBox({
-				type: 'warning',
-				buttons: ['Yes', 'No'],
-				defaultId: 1,
-				message: certErrorMessage,
-				detail: certErrorDetail
-			}) as any); // TODO: TypeScript - Figure this out
-			if (response === 0) {
-				// set ignoreCerts parameter to true in case user responds with yes
-				serverConf.ignoreCerts = true;
-				try {
-					return await this.getServerSettings(domain, serverConf.ignoreCerts);
-				} catch (_) {
-					if (error === Messages.noOrgsError(domain)) {
-						throw new Error(error);
-					}
-					return serverConf;
-				}
-			} else {
-				throw new Error('Untrusted certificate.');
-			}
-		}
-	}
-
-	// ignoreCerts parameter helps in fetching server icon and
-	// other server details when user chooses to ignore certificate warnings
-	async checkDomain(domain: any, ignoreCerts = false, silent = false): Promise<any> {
-		if (!silent && this.duplicateDomain(domain)) {
-			// Do not check duplicate in silent mode
-			throw new Error('This server has been added.');
-		}
-
-		domain = this.formatUrl(domain);
-
-		const serverConf = {
-			icon: defaultIconUrl,
-			url: domain,
-			alias: domain,
-			ignoreCerts
-		};
-
-		try {
-			return await this.getServerSettings(domain, serverConf.ignoreCerts);
-		} catch (err) {
-			// If the domain contains following strings we just bypass the server
-			const whitelistDomains = [
-				'zulipdev.org'
-			];
-
-			// make sure that error is an error or string not undefined
-			// so validation does not throw error.
-			const error = err || '';
-
-			const certsError = error.toString().includes('certificate');
-			if (domain.indexOf(whitelistDomains) >= 0 || certsError) {
-				return this.checkCertError(domain, serverConf, error, silent);
-			} else {
-				throw Messages.invalidZulipServerError(domain);
-			}
-		}
-	}
-
-	getServerSettings(domain: any, ignoreCerts = false): Promise<object | string> {
-		const serverSettingsOptions = {
-			url: domain + '/api/v1/server_settings',
-			...RequestUtil.requestOptions(domain, ignoreCerts)
-		};
-
-		return new Promise((resolve, reject) => {
-			request(serverSettingsOptions, (error: string, response: any) => {
-				if (!error && response.statusCode === 200) {
-					const data = JSON.parse(response.body);
-					if (data.hasOwnProperty('realm_icon') && data.realm_icon) {
-						resolve({
-							// Some Zulip Servers use absolute URL for server icon whereas others use relative URL
-							// Following check handles both the cases
-							icon: data.realm_icon.startsWith('/') ? data.realm_uri + data.realm_icon : data.realm_icon,
-							url: data.realm_uri,
-							alias: escape(data.realm_name),
-							ignoreCerts
-						});
-					} else {
-						reject(Messages.noOrgsError(domain));
-					}
-				} else {
-					reject(response);
-				}
-			});
-		});
-	}
-
-	saveServerIcon(server: any, ignoreCerts = false): Promise<string> {
-		const url = server.icon;
-		const domain = server.url;
-
-		const serverIconOptions = {
-			url,
-			...RequestUtil.requestOptions(domain, ignoreCerts)
-		};
-
-		// The save will always succeed. If url is invalid, downgrade to default icon.
-		return new Promise(resolve => {
-			const filePath = this.generateFilePath(url);
-			const file = fs.createWriteStream(filePath);
-			try {
-				request(serverIconOptions).on('response', (response: any) => {
-					response.on('error', (err: string) => {
-						logger.log('Could not get server icon.');
-						logger.log(err);
-						logger.reportSentry(err);
-						resolve(defaultIconUrl);
-					});
-					response.pipe(file).on('finish', () => {
-						resolve(filePath);
-					});
-				}).on('error', (err: string) => {
-					logger.log('Could not get server icon.');
-					logger.log(err);
-					logger.reportSentry(err);
-					resolve(defaultIconUrl);
-				});
-			} catch (err) {
-				logger.log('Could not get server icon.');
-				logger.log(err);
-				logger.reportSentry(err);
-				resolve(defaultIconUrl);
-			}
-		});
-	}
-
-	updateSavedServer(url: string, index: number): void {
-		// Does not promise successful update
-		const { ignoreCerts } = this.getDomain(index);
-		this.checkDomain(url, ignoreCerts, true).then(newServerConf => {
-			this.saveServerIcon(newServerConf, ignoreCerts).then(localIconUrl => {
-				newServerConf.icon = localIconUrl;
-				this.updateDomain(index, newServerConf);
-				this.reloadDB();
-			});
-		});
-	}
-
-	reloadDB(): void {
-		const domainJsonPath = path.join(app.getPath('userData'), 'config/domain.json');
-		try {
-			const file = fs.readFileSync(domainJsonPath, 'utf8');
-			JSON.parse(file);
-		} catch (err) {
-			if (fs.existsSync(domainJsonPath)) {
-				fs.unlinkSync(domainJsonPath);
-				dialog.showErrorBox(
-					'Error saving new organization',
-					'There seems to be error while saving new organization, ' +
-					'you may have to re-add your previous organizations back.'
-				);
-				logger.error('Error while JSON parsing domain.json: ');
-				logger.error(err);
-				logger.reportSentry(err);
-			}
-		}
-		this.db = new JsonDB(domainJsonPath, true, true);
-	}
-
-	generateFilePath(url: string): string {
-		const dir = `${app.getPath('userData')}/server-icons`;
-		const extension = path.extname(url).split('?')[0];
-
-		let hash = 5381;
-		let len = url.length;
-
-		while (len) {
-			hash = (hash * 33) ^ url.charCodeAt(--len);
-		}
-
-		// Create 'server-icons' directory if not existed
-		if (!fs.existsSync(dir)) {
-			fs.mkdirSync(dir);
-		}
-
-		return `${dir}/${hash >>> 0}${extension}`;
-	}
-
-	formatUrl(domain: any): string {
-		const hasPrefix = (domain.indexOf('http') === 0);
-		if (hasPrefix) {
-			return domain;
-		} else {
-			return (domain.indexOf('localhost:') >= 0) ? `http://${domain}` : `https://${domain}`;
-		}
-	}
-}
-
-export = new DomainUtil();
--- a/app/renderer/js/utils/link-util.js
+++ b/app/renderer/js/utils/link-util.js
@@ -1,14 +1,8 @@
 'use strict';

-// TODO: TypeScript - Add @types/
-import wurl = require('wurl');
+const wurl = require('wurl');

-let instance: null | LinkUtil = null;
-
-interface IsInternalResponse {
-	isInternalUrl: boolean;
-	isUploadsUrl: boolean;
-}
+let instance = null;

 class LinkUtil {
 	constructor() {
@@ -21,7 +15,7 @@ class LinkUtil {
 		return instance;
 	}

-	isInternal(currentUrl: string, newUrl: string): IsInternalResponse {
+	isInternal(currentUrl, newUrl) {
 		const currentDomain = wurl('hostname', currentUrl);
 		const newDomain = wurl('hostname', newUrl);

@@ -35,17 +29,17 @@ class LinkUtil {
 		};
 	}

-	isImage(url: string): boolean {
+	isImage(url) {
 		// test for images extension as well as urls like .png?s=100
 		const isImageUrl = /\.(bmp|gif|jpg|jpeg|png|webp)\?*.*$/i;
 		return isImageUrl.test(url);
 	}

-	isPDF(url: string): boolean {
+	isPDF(url) {
 		// test for pdf extension
 		const isPDFUrl = /\.(pdf)\?*.*$/i;
 		return isPDFUrl.test(url);
 	}
 }

-export = new LinkUtil();
+module.exports = new LinkUtil();
--- a/app/renderer/js/utils/linux-update-util.js
+++ b/app/renderer/js/utils/linux-update-util.js
@@ -1,13 +1,12 @@
 'use strict';
-import JsonDB from 'node-json-db';
-
-import fs = require('fs');
-import path = require('path');
-import electron = require('electron');
-import Logger = require('./logger-util');

+const fs = require('fs');
+const path = require('path');
+const process = require('process');
 const remote =
-	process.type === 'renderer' ? electron.remote : electron;
+	process.type === 'renderer' ? require('electron').remote : require('electron');
+const JsonDB = require('node-json-db');
+const Logger = require('./logger-util');

 const logger = new Logger({
 	file: 'linux-update-util.log',
@@ -16,11 +15,10 @@ const logger = new Logger({

 /* To make the util runnable in both main and renderer process */
 const { dialog, app } = remote;
-let instance: null | LinuxUpdateUtil = null;
+
+let instance = null;

 class LinuxUpdateUtil {
-	db: JsonDB;
-
 	constructor() {
 		if (instance) {
 			return instance;
@@ -32,7 +30,7 @@ class LinuxUpdateUtil {
 		return instance;
 	}

-	getUpdateItem(key: string, defaultValue: any = null): any {
+	getUpdateItem(key, defaultValue = null) {
 		this.reloadDB();
 		const value = this.db.getData('/')[key];
 		if (value === undefined) {
@@ -43,17 +41,17 @@ class LinuxUpdateUtil {
 		}
 	}

-	setUpdateItem(key: string, value: any): void {
+	setUpdateItem(key, value) {
 		this.db.push(`/${key}`, value, true);
 		this.reloadDB();
 	}

-	removeUpdateItem(key: string): void {
+	removeUpdateItem(key) {
 		this.db.delete(`/${key}`);
 		this.reloadDB();
 	}

-	reloadDB(): void {
+	reloadDB() {
 		const linuxUpdateJsonPath = path.join(app.getPath('userData'), '/config/updates.json');
 		try {
 			const file = fs.readFileSync(linuxUpdateJsonPath, 'utf8');
@@ -73,4 +71,4 @@ class LinuxUpdateUtil {
 	}
 }

-export = new LinuxUpdateUtil();
+module.exports = new LinuxUpdateUtil();
--- a/app/renderer/js/utils/logger-util.js
+++ b/app/renderer/js/utils/logger-util.js
@@ -0,0 +1,93 @@
+const NodeConsole = require('console').Console;
+const fs = require('fs');
+const isDev = require('electron-is-dev');
+const { initSetUp } = require('./default-util');
+const { sentryInit, captureException } = require('./sentry-util');
+
+initSetUp();
+sentryInit();
+let app = null;
+if (process.type === 'renderer') {
+	app = require('electron').remote.app;
+} else {
+	app = require('electron').app;
+}
+
+const browserConsole = console;
+const logDir = `${app.getPath('userData')}/Logs`;
+
+class Logger {
+	constructor(opts = {}) {
+		let {
+			timestamp = true,
+			file = 'console.log',
+			level = true,
+			logInDevMode = false
+		} = opts;
+
+		file = `${logDir}/${file}`;
+		if (timestamp === true) {
+			timestamp = this.getTimestamp;
+		}
+
+		const fileStream = fs.createWriteStream(file, { flags: 'a' });
+		const nodeConsole = new NodeConsole(fileStream);
+
+		this.nodeConsole = nodeConsole;
+		this.timestamp = timestamp;
+		this.level = level;
+		this.logInDevMode = logInDevMode;
+		this.setUpConsole();
+	}
+
+	_log(type, ...args) {
+		const {
+			nodeConsole, timestamp, level, logInDevMode
+		} = this;
+		let nodeConsoleLog;
+
+		/* eslint-disable no-fallthrough */
+		switch (true) {
+			case typeof timestamp === 'function':
+				args.unshift(timestamp() + ' |\t');
+
+			case (level !== false):
+				args.unshift(type.toUpperCase() + ' |');
+
+			case isDev || logInDevMode:
+				nodeConsoleLog = nodeConsole[type] || nodeConsole.log;
+				nodeConsoleLog.apply(null, args);
+
+			default: break;
+		}
+		/* eslint-enable no-fallthrough */
+
+		browserConsole[type].apply(null, args);
+	}
+
+	setUpConsole() {
+		for (const type in browserConsole) {
+			this.setupConsoleMethod(type);
+		}
+	}
+
+	setupConsoleMethod(type) {
+		this[type] = (...args) => {
+			this._log(type, ...args);
+		};
+	}
+
+	getTimestamp() {
+		const date = new Date();
+		const timestamp =
+			`${date.getMonth()}/${date.getDate()} ` +
+			`${date.getMinutes()}:${date.getSeconds()}`;
+		return timestamp;
+	}
+
+	reportSentry(err) {
+		captureException(err);
+	}
+}
+
+module.exports = Logger;
--- a/app/renderer/js/utils/logger-util.ts
+++ b/app/renderer/js/utils/logger-util.ts
@@ -1,155 +0,0 @@
-import { Console as NodeConsole } from 'console'; // eslint-disable-line node/prefer-global/console
-import { initSetUp } from './default-util';
-import { sentryInit, captureException } from './sentry-util';
-
-import fs = require('fs');
-import os = require('os');
-import isDev = require('electron-is-dev');
-import electron = require('electron');
-// this interface adds [key: string]: any so
-// we can do console[type] later on in the code
-interface PatchedConsole extends Console {
-	[key: string]: any;
-}
-
-interface LoggerOptions {
-	timestamp?: any;
-	file?: string;
-	level?: boolean;
-	logInDevMode?: boolean;
-}
-
-initSetUp();
-
-let app: Electron.App = null;
-let reportErrors = true;
-if (process.type === 'renderer') {
-	app = electron.remote.app;
-
-	// Report Errors to Sentry only if it is enabled in settings
-	// Gets the value of reportErrors from config-util for renderer process
-	// For main process, sentryInit() is handled in index.js
-	const { ipcRenderer } = electron;
-	ipcRenderer.send('error-reporting');
-	ipcRenderer.on('error-reporting-val', (_event: any, errorReporting: boolean) => {
-		reportErrors = errorReporting;
-		if (reportErrors) {
-			sentryInit();
-		}
-	});
-} else {
-	app = electron.app;
-}
-
-const browserConsole: PatchedConsole = console;
-const logDir = `${app.getPath('userData')}/Logs`;
-
-class Logger {
-	nodeConsole: PatchedConsole;
-	timestamp: any; // TODO: TypeScript - Figure out how to make this work with string | Function.
-	level: boolean;
-	logInDevMode: boolean;
-	[key: string]: any;
-
-	constructor(opts: LoggerOptions = {}) {
-		let {
-			timestamp = true,
-			file = 'console.log',
-			level = true,
-			logInDevMode = false
-		} = opts;
-
-		file = `${logDir}/${file}`;
-		if (timestamp === true) {
-			timestamp = this.getTimestamp;
-		}
-
-		// Trim log according to type of process
-		if (process.type === 'renderer') {
-			requestIdleCallback(() => this.trimLog(file));
-		} else {
-			process.nextTick(() => this.trimLog(file));
-		}
-
-		const fileStream = fs.createWriteStream(file, { flags: 'a' });
-		const nodeConsole = new NodeConsole(fileStream);
-
-		this.nodeConsole = nodeConsole;
-		this.timestamp = timestamp;
-		this.level = level;
-		this.logInDevMode = logInDevMode;
-		this.setUpConsole();
-	}
-
-	_log(type: string, ...args: any[]): void {
-		const {
-			nodeConsole, timestamp, level, logInDevMode
-		} = this;
-		let nodeConsoleLog;
-
-		/* eslint-disable no-fallthrough */
-		switch (true) {
-			case typeof timestamp === 'function':
-				args.unshift(timestamp() + ' |\t');
-
-			case (level !== false):
-				args.unshift(type.toUpperCase() + ' |');
-
-			case isDev || logInDevMode:
-				nodeConsoleLog = nodeConsole[type] || nodeConsole.log;
-				nodeConsoleLog.apply(null, args); // eslint-disable-line prefer-spread
-
-			default: break;
-		}
-		/* eslint-enable no-fallthrough */
-
-		browserConsole[type].apply(null, args);
-	}
-
-	setUpConsole(): void {
-		for (const type in browserConsole) {
-			this.setupConsoleMethod(type);
-		}
-	}
-
-	setupConsoleMethod(type: string): void {
-		this[type] = (...args: any[]) => {
-			const log = this._log.bind(this, type, ...args);
-			log();
-		};
-	}
-
-	getTimestamp(): string {
-		const date = new Date();
-		const timestamp =
-			`${date.getMonth()}/${date.getDate()} ` +
-			`${date.getMinutes()}:${date.getSeconds()}`;
-		return timestamp;
-	}
-
-	reportSentry(err: string): void {
-		if (reportErrors) {
-			captureException(err);
-		}
-	}
-
-	trimLog(file: string): void{
-		fs.readFile(file, 'utf8', (err, data) => {
-			if (err) {
-				throw err;
-			}
-			const MAX_LOG_FILE_LINES = 500;
-			const logs = data.split(os.EOL);
-			const logLength = logs.length - 1;
-
-			// Keep bottom MAX_LOG_FILE_LINES of each log instance
-			if (logLength > MAX_LOG_FILE_LINES) {
-				const trimmedLogs = logs.slice(logLength - MAX_LOG_FILE_LINES);
-				const toWrite = trimmedLogs.join(os.EOL);
-				fs.writeFileSync(file, toWrite);
-			}
-		});
-	}
-}
-
-export = Logger;
--- a/app/renderer/js/utils/params-util.js
+++ b/app/renderer/js/utils/params-util.js
@@ -1,11 +1,15 @@
 // This util function returns the page params if they're present else returns null
-export function isPageParams(): null | object {
+function isPageParams() {
 	let webpageParams = null;
 	try {
-		// eslint-disable-next-line no-undef, @typescript-eslint/camelcase
+		// eslint-disable-next-line no-undef, camelcase
 		webpageParams = page_params;
-	} catch (_) {
+	} catch (err) {
 		webpageParams = null;
 	}
 	return webpageParams;
 }
+
+module.exports = {
+	isPageParams
+};
--- a/app/renderer/js/utils/proxy-util.js
+++ b/app/renderer/js/utils/proxy-util.js
@@ -1,15 +1,9 @@
 'use strict';

-import url = require('url');
+const url = require('url');
+const ConfigUtil = require('./config-util.js');

-import ConfigUtil = require('./config-util');
-
-let instance: null | ProxyUtil = null;
-
-interface ProxyRule {
-	hostname?: string;
-	port?: number;
-}
+let instance = null;

 class ProxyUtil {
 	constructor() {
@@ -23,13 +17,8 @@ class ProxyUtil {
 	}

 	// Return proxy to be used for a particular uri, to be used for request
-	getProxy(_uri: string): ProxyRule | void {
-		const parsedUri = url.parse(_uri);
-		if (parsedUri === null) {
-			return;
-		}
-
-		const uri = parsedUri;
+	getProxy(uri) {
+		uri = url.parse(uri);
 		const proxyRules = ConfigUtil.getConfigItem('proxyRules', '').split(';');
 		// If SPS is on and system uses no proxy then request should not try to use proxy from
 		// environment. NO_PROXY = '*' makes request ignore all environment proxy variables.
@@ -38,9 +27,9 @@ class ProxyUtil {
 			return;
 		}

-		const proxyRule: any = {};
+		const proxyRule = {};
 		if (uri.protocol === 'http:') {
-			proxyRules.forEach((proxy: string) => {
+			proxyRules.forEach(proxy => {
 				if (proxy.includes('http=')) {
 					proxyRule.hostname = proxy.split('http=')[1].trim().split(':')[0];
 					proxyRule.port = proxy.split('http=')[1].trim().split(':')[1];
@@ -50,7 +39,7 @@ class ProxyUtil {
 		}

 		if (uri.protocol === 'https:') {
-			proxyRules.forEach((proxy: string) => {
+			proxyRules.forEach(proxy => {
 				if (proxy.includes('https=')) {
 					proxyRule.hostname = proxy.split('https=')[1].trim().split(':')[0];
 					proxyRule.port = proxy.split('https=')[1].trim().split(':')[1];
@@ -60,15 +49,14 @@ class ProxyUtil {
 		}
 	}

-	// TODO: Refactor to async function
-	resolveSystemProxy(mainWindow: Electron.BrowserWindow): void {
+	resolveSystemProxy(mainWindow) {
 		const page = mainWindow.webContents;
 		const ses = page.session;
-		const resolveProxyUrl = 'www.example.com';
+		const resolveProxyUrl = 'www.google.com';

 		// Check HTTP Proxy
 		const httpProxy = new Promise(resolve => {
-			ses.resolveProxy('http://' + resolveProxyUrl, (proxy: string) => {
+			ses.resolveProxy('http://' + resolveProxyUrl, proxy => {
 				let httpString = '';
 				if (proxy !== 'DIRECT') {
 					// in case of proxy HTTPS url:port, windows gives first word as HTTPS while linux gives PROXY
@@ -82,12 +70,12 @@ class ProxyUtil {
 		});
 		// Check HTTPS Proxy
 		const httpsProxy = new Promise(resolve => {
-			ses.resolveProxy('https://' + resolveProxyUrl, (proxy: string) => {
+			ses.resolveProxy('https://' + resolveProxyUrl, proxy => {
 				let httpsString = '';
 				if (proxy !== 'DIRECT' || proxy.includes('HTTPS')) {
 					// in case of proxy HTTPS url:port, windows gives first word as HTTPS while linux gives PROXY
 					// for all other HTTP or direct url:port both uses PROXY
-					if (proxy.includes('PROXY') || proxy.includes('HTTPS')) {
+					if (proxy.includes('PROXY' || proxy.includes('HTTPS'))) {
 						httpsString += 'https=' + proxy.split('PROXY')[1] + ';';
 					}
 				}
@@ -97,7 +85,7 @@ class ProxyUtil {

 		// Check FTP Proxy
 		const ftpProxy = new Promise(resolve => {
-			ses.resolveProxy('ftp://' + resolveProxyUrl, (proxy: string) => {
+			ses.resolveProxy('ftp://' + resolveProxyUrl, proxy => {
 				let ftpString = '';
 				if (proxy !== 'DIRECT') {
 					if (proxy.includes('PROXY')) {
@@ -110,7 +98,7 @@ class ProxyUtil {

 		// Check SOCKS Proxy
 		const socksProxy = new Promise(resolve => {
-			ses.resolveProxy('socks4://' + resolveProxyUrl, (proxy: string) => {
+			ses.resolveProxy('socks4://' + resolveProxyUrl, proxy => {
 				let socksString = '';
 				if (proxy !== 'DIRECT') {
 					if (proxy.includes('SOCKS5')) {
@@ -139,4 +127,4 @@ class ProxyUtil {
 	}
 }

-export = new ProxyUtil();
+module.exports = new ProxyUtil();
--- a/app/renderer/js/utils/reconnect-util.js
+++ b/app/renderer/js/utils/reconnect-util.js
@@ -1,5 +1,5 @@
-import isOnline = require('is-online');
-import Logger = require('./logger-util');
+const isOnline = require('is-online');
+const Logger = require('./logger-util');

 const logger = new Logger({
 	file: `domain-util.log`,
@@ -7,22 +7,16 @@ const logger = new Logger({
 });

 class ReconnectUtil {
-	// TODO: TypeScript - Figure out how to annotate serverManagerView
-	// it should be ServerManagerView; maybe make it a generic so we can
-	// pass the class from main.js
-	serverManagerView: any;
-	alreadyReloaded: boolean;
-
-	constructor(serverManagerView: any) {
+	constructor(serverManagerView) {
 		this.serverManagerView = serverManagerView;
 		this.alreadyReloaded = false;
 	}

-	clearState(): void {
+	clearState() {
 		this.alreadyReloaded = false;
 	}

-	pollInternetAndReload(): void {
+	pollInternetAndReload() {
 		const pollInterval = setInterval(() => {
 			this._checkAndReload()
 				.then(status => {
@@ -34,15 +28,14 @@ class ReconnectUtil {
 		}, 1500);
 	}

-	// TODO: Make this a async function
-	_checkAndReload(): Promise<boolean> {
+	_checkAndReload() {
 		return new Promise(resolve => {
 			if (!this.alreadyReloaded) { // eslint-disable-line no-negated-condition
 				isOnline()
-					.then((online: boolean) => {
+					.then(online => {
 						if (online) {
 							if (!this.alreadyReloaded) {
-								this.serverManagerView.reloadCurrentView();
+								this.serverManagerView.reloadView();
 							}
 							logger.log('You\'re back online.');
 							return resolve(true);
@@ -52,8 +45,8 @@ class ReconnectUtil {
 						const errMsgHolder = document.querySelector('#description');
 						if (errMsgHolder) {
 							errMsgHolder.innerHTML = `
-										<div>Your internet connection doesn't seem to work properly!</div>
-										<div>Verify that it works and then click try again.</div>`;
+										<div>You internet connection does't seem to work properly!</div>
+										</div>Verify that it works and then click try again.</div>`;
 						}
 						return resolve(false);
 					});
@@ -64,4 +57,4 @@ class ReconnectUtil {
 	}
 }

-export = ReconnectUtil;
+module.exports = ReconnectUtil;
--- a/app/renderer/js/utils/request-util.ts
+++ b/app/renderer/js/utils/request-util.ts
@@ -1,73 +0,0 @@
-import fs = require('fs');
-import ConfigUtil = require('./config-util');
-import Logger = require('./logger-util');
-import ProxyUtil = require('./proxy-util');
-import CertificateUtil = require('./certificate-util');
-import SystemUtil = require('./system-util');
-
-const logger = new Logger({
-	file: `request-util.log`,
-	timestamp: true
-});
-
-let instance: null | RequestUtil = null;
-
-// TODO: TypeScript - Use ProxyRule for the proxy property
-// we can do this now since we use export = ProxyUtil syntax
-interface RequestUtilResponse {
-	ca: string;
-	proxy: string | void | object;
-	ecdhCurve: 'auto';
-	headers: { 'User-Agent': string };
-	rejectUnauthorized: boolean;
-}
-
-class RequestUtil {
-	constructor() {
-		if (!instance) {
-			instance = this;
-		}
-
-		return instance;
-	}
-
-	// ignoreCerts parameter helps in fetching server icon and
-	// other server details when user chooses to ignore certificate warnings
-	requestOptions(domain: string, ignoreCerts: boolean): RequestUtilResponse {
-		domain = this.formatUrl(domain);
-		const certificate = CertificateUtil.getCertificate(
-			encodeURIComponent(domain)
-		);
-		let certificateLocation = '';
-		if (certificate) {
-			// To handle case where certificate has been moved from the location in certificates.json
-			try {
-				certificateLocation = fs.readFileSync(certificate, 'utf8');
-			} catch (err) {
-				logger.warn(`Error while trying to get certificate: ${err}`);
-			}
-		}
-		const proxyEnabled = ConfigUtil.getConfigItem('useManualProxy') || ConfigUtil.getConfigItem('useSystemProxy');
-		// If certificate for the domain exists add it as a ca key in the request's parameter else consider only domain as the parameter for request
-		// Add proxy as a parameter if it is being used.
-		return {
-			ca: certificateLocation ? certificateLocation : '',
-			proxy: proxyEnabled ? ProxyUtil.getProxy(domain) : '',
-			ecdhCurve: 'auto',
-			headers: { 'User-Agent': SystemUtil.getUserAgent() },
-			rejectUnauthorized: !ignoreCerts
-		};
-	}
-
-	formatUrl(domain: string): string {
-		const hasPrefix = domain.startsWith('http', 0);
-		if (hasPrefix) {
-			return domain;
-		} else {
-			return domain.includes('localhost:') ? `http://${domain}` : `https://${domain}`;
-		}
-	}
-}
-
-const requestUtil = new RequestUtil();
-export = requestUtil;
--- a/app/renderer/js/utils/sentry-util.js
+++ b/app/renderer/js/utils/sentry-util.js
@@ -0,0 +1,16 @@
+const { init, captureException } = require('@sentry/electron');
+const isDev = require('electron-is-dev');
+
+const sentryInit = () => {
+	if (!isDev) {
+		init({
+			dsn: 'SENTRY_DSN',
+			sendTimeout: 30 // wait 30 seconds before considering the sending capture to have failed, default is 1 second
+		});
+	}
+};
+
+module.exports = {
+	sentryInit,
+	captureException
+};
--- a/app/renderer/js/utils/sentry-util.ts
+++ b/app/renderer/js/utils/sentry-util.ts
@@ -1,21 +0,0 @@
-import { init } from '@sentry/electron';
-
-import isDev = require('electron-is-dev');
-import path = require('path');
-import dotenv = require('dotenv');
-dotenv.config({ path: path.resolve(__dirname, '/../../../../.env') });
-
-export const sentryInit = (): void => {
-	if (!isDev) {
-		init({
-			dsn: process.env.SENTRY_DSN,
-			// We should ignore this error since it's harmless and we know the reason behind this
-			// This error mainly comes from the console logs.
-			// This is a temp solution until Sentry supports disabling the console logs
-			ignoreErrors: ['does not appear to be a valid Zulip server']
-			// sendTimeout: 30 // wait 30 seconds before considering the sending capture to have failed, default is 1 second
-		});
-	}
-};
-
-export { captureException } from '@sentry/electron';
--- a/app/renderer/js/utils/system-util.js
+++ b/app/renderer/js/utils/system-util.js
@@ -1,16 +1,12 @@
 'use strict';
-import { remote } from 'electron';

-import os = require('os');
+const {app} = require('electron').remote;

-const { app } = remote;
-let instance: null | SystemUtil = null;
+const os = require('os');
+
+let instance = null;

 class SystemUtil {
-	connectivityERR: string[];
-
-	userAgent: string | null;
-
 	constructor() {
 		if (instance) {
 			return instance;
@@ -31,30 +27,29 @@ class SystemUtil {
 		return instance;
 	}

-	getOS(): string {
-		const platform = os.platform();
-		if (platform === 'darwin') {
+	getOS() {
+		if (os.platform() === 'darwin') {
 			return 'Mac';
-		} else if (platform === 'linux') {
+		}
+		if (os.platform() === 'linux') {
 			return 'Linux';
-		} else if (platform === 'win32') {
+		}
+		if (os.platform() === 'win32' || os.platform() === 'win64') {
 			if (parseFloat(os.release()) < 6.2) {
 				return 'Windows 7';
 			} else {
 				return 'Windows 10';
 			}
-		} else {
-			return '';
 		}
 	}

-	setUserAgent(webViewUserAgent: string): void {
-		this.userAgent = `ZulipElectron/${app.getVersion()} ${webViewUserAgent}`;
+	setUserAgent(webViewUserAgent) {
+		this.userAgent = 'ZulipElectron/' + app.getVersion() + ' ' + webViewUserAgent;
 	}

-	getUserAgent(): string | null {
+	getUserAgent() {
 		return this.userAgent;
 	}
 }

-export = new SystemUtil();
+module.exports = new SystemUtil();
--- a/app/renderer/main.html
+++ b/app/renderer/main.html
@@ -1,65 +1,56 @@
 <!DOCTYPE html>
 <html lang="en" class="responsive desktop">

-    <head>
-        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-        <meta name="viewport" content="width=device-width">
-        <title>Zulip</title>
-        <link rel="stylesheet" href="css/main.css" type="text/css" media="screen">
-    </head>
+<head>
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <meta name="viewport" content="width=device-width">
+  <title>Zulip</title>
+  <link rel="stylesheet" href="css/main.css" type="text/css" media="screen">
+</head>

-    <body>
-        <div id="content">
-            <div class="popup">
-                <span class="popuptext hidden" id="fullscreen-popup"></span>
-            </div>
-            <div id="sidebar" class="toggle-sidebar">
-                <div id="view-controls-container">
-                    <div id="tabs-container"></div>
-                    <div id="add-tab" class="tab functional-tab">
-                        <div class="server-tab" id="add-action">
-                        <i class="material-icons">add</i>
-                        </div>
-                        <span id="add-server-tooltip" style="display:none">Add organization</span>
-                    </div>
-                </div>
-                <div id="actions-container">
-                    <div class="action-button" id="dnd-action">
-                        <i class="material-icons md-48">notifications</i>
-                        <span id="dnd-tooltip" style="display:none">Do Not Disturb</span>
-                    </div>
-                    <div class="action-button" id="reload-action">
-                        <i class="material-icons md-48">refresh</i>
-                        <span id="reload-tooltip" style="display:none">Reload</span>
-                    </div>
-                    <div class="action-button" id="loading-action">
-                        <i class="refresh material-icons md-48">loop</i>
-                        <span id="loading-tooltip" style="display:none">Loading</span>
-                    </div>
-                    <div class="action-button disable" id="back-action">
-                        <i class="material-icons md-48">arrow_back</i>
-                        <span id="back-tooltip" style="display:none">Go Back</span>
-                    </div>
-                    <div class="action-button" id="settings-action">
-                        <i class="material-icons md-48">settings</i>
-                        <span id="setting-tooltip" style="display:none">Settings</span>
-                    </div>
-                </div>
-            </div>
-            <div id="main-container">
-                <div id="webviews-container"></div>
-            </div>
+<body>
+  <div id="content">
+    <div class="popup">
+      <span class="popuptext hidden" id="fullscreen-popup"></span>
+  </div>
+  <div id="sidebar" class="toggle-sidebar">
+    <div id="view-controls-container">
+      <div id="tabs-container"></div>
+      <div id="add-tab" class="tab functional-tab">
+        <div class="server-tab" id="add-action">
+          <i class="material-icons">add</i>
        </div>
+        <span id="add-server-tooltip" style="display:none">Add organization</span>
+      </div>
+    </div>
+    <div id="actions-container">
+      <div class="action-button" id="dnd-action">
+        <i class="material-icons md-48">notifications</i>
+        <span id="dnd-tooltip" style="display:none">Do Not Disturb</span>
+      </div>
+      <div class="action-button" id="reload-action">
+        <i class="material-icons md-48">refresh</i>
+        <span id="reload-tooltip" style="display:none">Reload</span>
+      </div>
+      <div class="action-button disable" id="back-action">
+        <i class="material-icons md-48">arrow_back</i>
+        <span id="back-tooltip" style="display:none">Go Back</span>
+      </div>
+      <div class="action-button" id="settings-action">
+        <i class="material-icons md-48">settings</i>
+        <span id="setting-tooltip" style="display:none">Settings</span>
+      </div>
+    </div>
+  </div>
+  <div id="main-container">
+    <div id="webviews-container"></div>
+  </div>
+  </div>

-        <div id="feedback-modal">
-            <send-feedback></send-feedback>
-        </div>
-    </body>
-    
-    <script>
-        // we don't use src='./js/main' in the script tag because
-        // it messes up require module path resolution
-        require('./js/main');
-    </script>
-    <script>require('./js/shared/preventdrag.js')</script>
-</html>
+  <div id="feedback-modal">
+    <send-feedback></send-feedback>
+  </div>
+</body>
+<script src="js/main.js"></script>
+<script>require('./js/shared/preventdrag.js')</script>
+</html>
--- a/app/renderer/network.html
+++ b/app/renderer/network.html
@@ -1,22 +1,22 @@
 <!DOCTYPE html>
 <html lang="en" class="responsive desktop">
-    <head>
-        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-        <meta name="viewport" content="width=device-width">
-        <title>Zulip - Network Troubleshooting</title>
-        <link rel="stylesheet" href="css/network.css" type="text/css" media="screen">
-    </head>
-    <body>
-        <div id="content">
-            <div id="picture"><img src="img/zulip_network.png"></div>
-            <div id="title">Zulip can't connect</div>
-            <div id="description">
-                <div>Your computer seems to be offline.</div>
-                <div>We will keep trying to reconnect, or you can try now.</div>
-            </div>
-            <div id="reconnect">Try now</div>
-        </div>
-    </body>
-    <script src="js/pages/network.js"></script>
-    <script>require('./js/shared/preventdrag.js')</script>
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <meta name="viewport" content="width=device-width">
+    <title>Zulip - Network Troubleshooting</title>
+    <link rel="stylesheet" href="css/network.css" type="text/css" media="screen">
+  </head>
+  <body>
+    <div id="content">
+      <div id="picture"><img src="img/zulip_network.png"></div>
+      <div id="title">Zulip can't connect</div>
+      <div id="description">
+        <div>Your computer seems to be offline.</div>
+        <div>We will keep trying to reconnect, or you can try now.</div>
+      </div>
+      <div id="reconnect">Try now</div>
+    </div>
+  </body>
+  <script src="js/pages/network.js"></script>
+  <script>require('./js/shared/preventdrag.js')</script>
 </html>
--- a/app/renderer/preference.html
+++ b/app/renderer/preference.html
@@ -1,19 +1,17 @@
 <!DOCTYPE html>
 <html lang="en" class="responsive desktop">
-    <head>
-        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-        <meta name="viewport" content="width=device-width">
-        <title>Zulip - Settings</title>
-        <link rel="stylesheet" href="css/preference.css" type="text/css" media="screen">
-    </head>
-    <body>
-        <div id="content">
-            <div id="sidebar"></div>
-            <div id="settings-container"></div>
-        </div>
-    </body>
-    <script>
-        require('./js/pages/preference/preference.js');
-        require('./js/shared/preventdrag.js')
-    </script>
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <meta name="viewport" content="width=device-width">
+    <title>Zulip - Settings</title>
+    <link rel="stylesheet" href="css/preference.css" type="text/css" media="screen">
+  </head>
+  <body>
+    <div id="content">
+      <div id="sidebar"></div>
+      <div id="settings-container"></div>
+    </div>
+  </body>
+  <script src="js/pages/preference/preference.js"></script>
+  <script>require('./js/shared/preventdrag.js')</script>
 </html>
--- a/app/resources/messages.ts
+++ b/app/resources/messages.ts
@@ -1,27 +0,0 @@
-class Messages {
-	invalidZulipServerError(domain: string): string {
-		return `${domain} does not appear to be a valid Zulip server. Make sure that
-			\n • You can connect to that URL in a web browser.\
-			\n • If you need a proxy to connect to the Internet, that you've configured your proxy in the Network settings.\
-			\n • It's a Zulip server. (The oldest supported version is 1.6).\
-			\n • The server has a valid certificate. (You can add custom certificates in Settings > Organizations).`;
-	}
-
-	noOrgsError(domain: string): string {
-		return `${domain} does not have any organizations added.\
-		\nPlease contact your server administrator.`;
-	}
-
-	certErrorMessage(domain: string, error: string): string {
-		return `Do you trust certificate from ${domain}? \n ${error}`;
-	}
-
-	certErrorDetail(): string {
-		return `The organization you're connecting to is either someone impersonating the Zulip server you entered, or the server you're trying to connect to is configured in an insecure way.
-		\nIf you have a valid certificate please add it from Settings>Organizations and try to add the organization again.
-		\nUnless you have a good reason to believe otherwise, you should not proceed.
-		\nYou can click here if you'd like to proceed with the connection.`;
-	}
-}
-
-export = new Messages();
--- a/build/icon.png
+++ b/build/icon.png
--- a/changelog.md
+++ b/changelog.md
@@ -1,156 +1,9 @@
 # Version History

+
+
 All notable changes to the Zulip desktop app are documented in this file.

-### v3.1.0-beta --2019-07-19
-
-**New features**:
-* Add option to find accounts by email.
-* Add option to hide Menu bar to View menu.
-* Show a loading indicator in the sidebar.
-* Update Help Center to open help page of the currently active server.
-* Improve auto-detection of spellchecker language.
-* Disable menu items on non-server pages.
-* Support dark mode on macOS.
-
-**Fixes**:
-* Updated, more robust server validation logic.
-* Fix JSON DB errors observed when switching tabs.
-* Remove unused `isLoading` function from `Tab`.
-* Remove unused `defaultId` parameter.
-* Fix syntax error in `proxy-util.js`.
-* Fix issue with creation of large `.node` files in the `Temp` folder on Windows machines.
-* Fix issue where drafts were not saved properly.
-
-**Development**:
-* Migrate codebase to TypeScript.
-* Set the indent_size in `.editconfig` to 4.
-* Use `.env` file for reading Sentry DSN.
-
-**Documentation**:
-* Improve development guide.
-
-**Module updates**:
-* Upgrade xo to v0.24.0.
-* Upgrade node-json-db to v0.9.2.
-* Upgrade electron to v3.1.10.
-* Add missing transitive dependencies.
-
-### v3.0.0 --2019-05-20
-
-**New features**:
-* Add context menu in left sidebar.
-* Enable per-user installation on Windows.
-* Switch to next server on Ctrl+Tab.
-* Add option to copy zulip URL.
-* Allow zoom options from numpad.
-* Use server language for spellchecker for all platforms.
-* Allow installing app without admin privileges.
-* Allow insecure requests on user request.
-* Unify case across menus and settings.
-
-**Enhancements**:
-* Remove Found bug button.
-* Set custom css to false by default.
-* Disable beta updates if auto updates disabled
-* Update menu items on setting page.
-* Include certificates in all requests for icon.
-* Document show sidebar shortcut properly.
-* Improve organization page.
-* Improve wording of adding a new org button.
-* Increase width of add a new org button.
-* Add eol for linebreaks on windows.
-* Teach git to ignore unnecessary binary files.
-* Send user-agent with request.
-* Minimize to tray on startup.
-* Update test config files.
-* Ensure backward compatibility when using narrow.by_topic.
-* Use path.sep for path separator to support Windows.
-* Change the window title to contain active Realm's name.
-* Use path.basename to get certificate file name.
-* Disable pdf-viewer window.
-* Default to starting app on login.
-* Modify reset app data button.
-* Add requestOptions to replace request instances.
-* Workaround buggy focus switching in Electron 3.0.10.
-* Reorder file menu and add option to Add Organization.
-* Improve development guide.
-* Implement CSS linting with stylelint.
-* Add "role" key to webview property.
-* Implement HTML Linting with htmlhint and fix indent.
-* Limit the number of lines in log files.
-* Fix focus after clicking back button.
-* Remove minimize and close from File menu.
-* Add config for installer name.
-
-**Fixes**:
-* Fix `request` ecdhCurve mismatch errors
-* Fix typo in network error message.
-* Fix context menu not working on adding new org.
-* Fix reply from notification.
-* Fix shorcut section horizontal alignment.
-* Fix broken link in docs.
-* Fix grammatical errors.
-* Fix typo error in issue template.
-* Fix text for Toggle DND in sidebar on hover.
-* Fix focus after soft reload.
-* Fix tip's place for Windows & Linux.
-
-
-**Module updates**:
-* Update node-json-db to v0.9.1.
-* Update sentry to v0.12.1.
-* Update electron-window-state to v5.0.3.
-* Update electron to v3.0.10.
-* Update electron-builder to v20.40.2.
-* Update electron-sentry to v0.14.0.
-* Update dependencies to fix minor dev security alerts.
-* Update snap config.
-
-### v2.3.82 --2018-09-25
-
-**New features**:
-* UI enhancements.
-* Updated some menu items.
-
-**Fixes**:
-* Fix about page not opening up.
-
-<hr>
-
-### v2.3.8 --2018-09-25
-
-**New features**:
-* Auto hide menubar on Windows/Linux. Add a setting option for the same.
-* Improve design of setting page.
-* Toggle app on clicking the tray icon (Linux).
-* Update sidebar realm name when it's changed in webapp.
-* left-sidebar: Add initial character of realm name instead of default icon.
-
-**Fixes**:
-* linux: Fix ALT+SHIFT opening menu items on Linux.
-* sentry: Add ignore errors to sentry configuration.
-* Linux: Add label for help menu item.
-* file-attachments: Allow multiple downloads of same file name.
-
-**Module Updates**
-* electron: Update electron to v2.0.9.
-
-
-<hr>
-
-
-### v2.3.7-beta --2018-09-03
-
-**New features**:
-* Add a feature to show and view pdf file in the app.
-
-**Fixes**:
-* Use package reload instead of custom reload. This is an experimental fix for setting files getting corrupted issue.
-* Unescape server name in window menu item.
-
-<hr>
-
 ### v2.3.6 --2018-08-27

 **New features**:
@@ -397,7 +250,7 @@ electron-updater - `v2.21.8`

 * Setting page and left-sidebar UI improvements

-* Other minor improvements
+* Other minor improvments



@@ -524,7 +377,7 @@ electron-updater - `v2.21.8`

 * Fixed a bug which was caused by app's shortcuts. From now on our shortcuts won't hijack other apps shortcuts

-* Removed [electron-localshortcut](https://github.com/parro-it/electron-localshortcut) completely. Now we only depend on menu accelerators for keyboard shortcuts
+* Removed [electron-localshortcut](https://github.com/parro-it/electron-localshortcut) completely. Now we only depends on menu accelerators for keyboard shortcuts

 * Handle certificate issue properly

@@ -725,7 +578,7 @@ electron-updater - `v2.21.8`

 * Properly signed app for macOS
 * Toggle tray icon
-* Better error handling when no internet connection
+* Better error handling when no internet connenction



@@ -739,7 +592,7 @@ electron-updater - `v2.21.8`

 ### v0.5.8 --2017-02-13

-**Enhancements**:
+**Enhacements**:
 Smaller Windows installer size

 <hr>
@@ -755,7 +608,7 @@ Minor improvements
 ### v0.5.6 --2017-02-07


-**Enhancement**:
+**Enhacements**:

 - Using NSIS instead of [Squirrel.Windows](https://github.com/Squirrel/Squirrel.Windows) on Windows

@@ -777,9 +630,9 @@ Minor improvements

 **Fixes**:
 - Fixed :
-    - Auto-updates
-    - Spellchecker
-    - Zooming functionality
+	- Auto-updates
+	- Spellchecker
+	- Zooming functionality

 - Removed unused node modules
 - Using stable version for node modules
@@ -823,7 +676,7 @@ Minor improvements

 ### v0.5.1 --2016-11-23

-**Enhancement**:
+**Enhacements**:

 - Added Spellchecker support with correct spell suggestions

@@ -864,6 +717,6 @@ Minor improvements

 ### v0.0.1-alpha -- 2016-08-31

-**Enhancement**:
+**Enhacements**:

 * Added DMG installer for macOS
--- a/development.md
+++ b/development.md
@@ -1,6 +1,6 @@
-# Development Setup
+# Development setup

-This is a guide to running the Zulip desktop app from source,
+This is a guide to running the Zulip desktop app from a source tree,
 in order to contribute to developing it.

 ## Prerequisites
@@ -8,7 +8,6 @@ in order to contribute to developing it.
 To build and run the app from source, you'll need the following:

 * [Git](http://git-scm.com/book/en/v2/Getting-Started-Installing-Git)
-  * Use our [Git Guide](https://zulip.readthedocs.io/en/latest/git/setup.html) to get started with Git and GitHub.
 * [Node.js](https://nodejs.org) >= v6.9.0
  * [NPM](https://www.npmjs.com/get-npm) and
    [node-gyp](https://github.com/nodejs/node-gyp#installation),
@@ -16,50 +15,35 @@ To build and run the app from source, you'll need the following:
 * [Python](https://www.python.org/downloads/release/python-2713/)
  (v2.7.x recommended)
 * A C++ compiler compatible with C++11
-* Development headers for the libXext, libXtst, and libxkbfile libraries, which can be installed using apt on Ubuntu using
-  ```sh
-  $ sudo apt install libxext-dev libxtst-dev libxkbfile-dev libgconf-2-4
-  ```
+* Linux users also need [Snapcraft](https://snapcraft.io/)
+* Development headers for the libXext, libXtst, and libxkbfile libraries

-### Ubuntu/Linux and other Debian-based distributions
+### Debian/Ubuntu and friends

 On a system running Debian, Ubuntu, or another Debian-based Linux
 distribution, you can install all dependencies through the package
-manager (see [here][node-debian] for more on the first command):
+manager (see [here][nodesource-install] for more on the first command):

 ```sh
 $ curl -sL https://deb.nodesource.com/setup_6.x | sudo -E bash -
 $ sudo apt install git nodejs python build-essential snapcraft libxext-dev libxtst-dev libxkbfile-dev libgconf-2-4
 ```

-[node-debian]: https://nodejs.org/en/download/package-manager/#debian-and-ubuntu-based-linux-distributions
+[nodesource-install]: https://nodejs.org/en/download/package-manager/#debian-and-ubuntu-based-linux-distributions

-### MacOS
+### Other OSes

-On a system running MacOS, you can refer to [official nodejs docs][node-mac] to
-install nodejs. To ensure Node.js has been installed, run  ```node -v``` in terminal to know your node version.
+Other developers run the app on Windows, macOS, and possibly other OSes.
+PRs to add specific instructions to this doc are welcome!

-[node-mac]: https://nodejs.org/en/download/package-manager/#macos
-
-If [NPM](https://www.npmjs.com/get-npm) and [node-gyp](https://github.com/nodejs/node-gyp#installation) don't come bundled with your Node.js installation, you will need to install them manually. 
-
-### Windows
-
- Download Node.js for Windows and install it. You can refer to the official docs [here][node-windows] to do so. To ensure Node.js has been installed, run  ```node -v``` in Git Bash to know your node version.
-
-[node-windows]: https://nodejs.org/en/download/package-manager/#windows
-
- Also, install install Windows-Build-Tools to compile native node modules by using
-  ```sh
-  $ npm install --global windows-build-tools
-  ```
+On Windows, your C++ compiler should be Visual Studio 2015 or later.

 ## Download, build, and run

 Clone the source locally:
 ```sh
-$ git clone https://github.com/zulip/zulip-desktop
-$ cd zulip-desktop
+$ git clone https://github.com/zulip/zulip-electron
+$ cd zulip-electron
 ```

 Install project dependencies:
@@ -77,18 +61,6 @@ Start and watch changes:
 $ npm run dev
 ```

-Run tests:
-```sh
-$ npm test
-```
-
-## How to contribute?
-
-Feel free to fork this repository, test it locally and then report any bugs
-you find in the [issue tracker](https://github.com/zulip/zulip-desktop/issues). 
-
-You can read more about making contributions in our [Contributing Guide](./CONTRIBUTING.md).
-
 ## Troubleshooting

 If you have any problems running the app, see the [most common
@@ -103,12 +75,11 @@ npm run dist

 This command will produce distributable packages or installers for the
 operating system you're running on:
-* on Windows, a .7z nsis file and a .exe WebSetup file 
+* on Windows, a Windows installer file
 * on macOS, a `.dmg` file
 * on Linux, a plain `.zip` file as well as a `.deb` file, `.snap` file and an
  `AppImage` file.
-
-To generate all three types of files, you will need all three operating
+To generate all three types, you will need all three operating
 systems.

-The output distributable packages appear in the `dist/` directory.
+The output files appear in the `dist/` directory.
--- a/docs/Windows.md
+++ b/docs/Windows.md
@@ -21,8 +21,8 @@ C:\Windows\system32> npm install --global --production windows-build-tools
 Clone the source locally:

 ```sh
-$ git clone https://github.com/zulip/zulip-desktop
-$ cd zulip-desktop
+$ git clone https://github.com/zulip/zulip-electron
+$ cd zulip-electron
 ```

 Install project dependencies:
--- a/docs/_Footer.md
+++ b/docs/_Footer.md
@@ -1,3 +1,3 @@
 ### Want to contribute to this Wiki?

-[Edit `/docs` files and send a pull request.](https://github.com/zulip/zulip-desktop/tree/master/docs)
+[Edit `/docs` files and send a pull request.](https://github.com/zulip/zulip-electron/tree/master/docs)
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -5,37 +5,16 @@ const electron = require('electron-connect').server.create({
 });
 const tape = require('gulp-tape');
 const tapColorize = require('tap-colorize');
-const ts = require("gulp-typescript");
-const tsProject = ts.createProject("tsconfig.json");
-
-const glob = require('glob');
-const { execSync } = require('child_process');
-
-const baseFilePattern = 'app/+(main|renderer)/**/*';
-const globOptions = { cwd: __dirname };
-const jsFiles = glob.sync(baseFilePattern + '.js', globOptions);
-const tsFiles = glob.sync(baseFilePattern + '.ts', globOptions);
-if (jsFiles.length !== tsFiles.length) {
-	const npx = process.platform === 'win32' ? 'npx.cmd' : 'npx';
-	console.log('Compiling typescript files...');
-	execSync(`${npx} tsc`);
-}
-
-gulp.task("compile", function () {
-    return tsProject.src()
-        .pipe(tsProject())
-        .js.pipe(gulp.dest("app"));
-});

 gulp.task('dev', () => {
  // Start browser process
 	electron.start();
  // Restart browser process
-	gulp.watch('app/main/*.ts', gulp.series('compile', 'restart:browser'));
+	gulp.watch('app/main/*.js', gulp.series('restart:browser'));
  // Reload renderer process
 	gulp.watch('app/renderer/css/*.css', gulp.series('reload:renderer'));
 	gulp.watch('app/renderer/*.html', gulp.series('reload:renderer'));
-	gulp.watch('app/renderer/js/**/*.ts', gulp.series('compile', 'reload:renderer'));
+	gulp.watch('app/renderer/js/**/*.js', gulp.series('reload:renderer'));
 });

 gulp.task('restart:browser', done => {
--- a/how-to-install.md
+++ b/how-to-install.md
@@ -1,10 +1,10 @@
 # How to install

-**Note:** If you download from the [releases page](https://github.com/zulip/zulip-desktop/releases), be careful what version you pick. Releases that end with `-beta` are beta releases and the rest are stable.
+**Note:** If you download from the [releases page](https://github.com/zulip/zulip-electron/releases), be careful what version you pick. Releases that end with `-beta` are beta releases and the rest are stable.
 - **beta:** these releases are the right balance between getting new features early while staying away from nasty bugs.
 - **stable:** these releases are more thoroughly tested; they receive new features later, but there's a lower chance that things will go wrong.

-[LR]: https://github.com/zulip/zulip-desktop/releases
+[LR]: https://github.com/zulip/zulip-electron/releases

 ## OS X

--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
  "name": "zulip",
  "productName": "Zulip",
-  "version": "3.1.0-beta",
+  "version": "2.3.6",
  "main": "./app/main",
  "description": "Zulip Desktop App",
  "license": "Apache-2.0",
@@ -12,30 +12,24 @@
  },
  "repository": {
    "type": "git",
-    "url": "https://github.com/zulip/zulip-desktop.git"
+    "url": "https://github.com/zulip/zulip-electron.git"
  },
  "bugs": {
-    "url": "https://github.com/zulip/zulip-desktop/issues"
+    "url": "https://github.com/zulip/zulip-electron/issues"
  },
  "engines": {
    "node": ">=6.0.0"
  },
  "scripts": {
-    "start": "node tools/run-dev",
-    "clean-ts-files": "git clean app/*.js -xf",
-    "watch-ts": "tsc -w",
+    "start": "electron app --disable-http-cache --no-electron-connect",
    "reinstall": "node ./tools/reinstall-node-modules.js",
    "postinstall": "electron-builder install-app-deps",
-    "lint-css": "stylelint app/renderer/css/*.css",
-    "lint-html": "./node_modules/.bin/htmlhint \"app/renderer/*.html\" ",
-    "lint-js": "xo",
-    "test": "npm run lint-html && npm run lint-css && npm run lint-js",
+    "test": "xo",
    "test-e2e": "gulp test-e2e",
-    "compile": "gulp compile",
-    "dev": "gulp dev && npm test",
-    "pack": "tsc && electron-builder --dir",
-    "dist": "tsc && electron-builder",
-    "mas": "tsc && electron-builder --mac mas",
+    "dev": "gulp dev & nodemon --watch app/main --watch app/renderer --exec 'npm test' -e html,css,js",
+    "pack": "electron-builder --dir",
+    "dist": "electron-builder",
+    "mas": "electron-builder --mac mas",
    "travis": "cd ./scripts && ./travis-build-test.sh",
    "build-locales": "node tools/locale-helper"
  },
@@ -45,18 +39,14 @@
  "build": {
    "appId": "org.zulip.zulip-electron",
    "asar": true,
-    "asarUnpack": [
-      "**/*.node"
-    ],
    "files": [
      "**/*",
      "!docs${/*}",
      "!node_modules/@paulcbetts/cld/deps/cld${/*}"
    ],
-    "copyright": "©2019 Kandra Labs, Inc.",
+    "copyright": "©2017 Kandra Labs, Inc.",
    "mac": {
      "category": "public.app-category.productivity",
-      "darkModeSupport": true,
      "artifactName": "${productName}-${version}-${arch}.${ext}"
    },
    "linux": {
@@ -69,7 +59,7 @@
        "AppImage",
        "snap"
      ],
-      "maintainer": "Akash Nimare <akash@zulipchat.com>",
+      "maintainer": "Akash Nimare <svnitakash@gmail.com>",
      "artifactName": "${productName}-${version}-${arch}.${ext}"
    },
    "deb": {
@@ -113,13 +103,12 @@
        }
      ],
      "icon": "build/icon.ico",
-      "artifactName": "${productName}-Web-Setup-${version}.${ext}",
      "publisherName": "Kandra Labs, Inc."
    },
    "nsis": {
-      "allowToChangeInstallationDirectory": true,
+      "perMachine": true,
      "oneClick": false,
-      "perMachine": false
+      "allowToChangeInstallationDirectory": true
    }
  },
  "keywords": [
@@ -131,56 +120,40 @@
    "InstantMessaging"
  ],
  "devDependencies": {
-    "@types/adm-zip": "^0.4.32",
-    "@types/dotenv": "6.1.1",
-    "@typescript-eslint/eslint-plugin": "1.10.2",
-    "@typescript-eslint/parser": "1.10.2",
    "assert": "1.4.1",
-    "cp-file": "5.0.0",
+    "cp-file": "^5.0.0",
    "devtron": "1.4.0",
-    "electron": "3.1.10",
-    "electron-builder": "20.40.2",
+    "electron": "2.0.8",
+    "electron-builder": "20.20.4",
    "electron-connect": "0.6.2",
    "electron-debug": "1.4.0",
-    "eslint-config-xo-typescript": "0.14.0",
-    "fs-extra": "8.1.0",
    "google-translate-api": "2.3.0",
-    "gulp": "4.0.0",
+    "gulp": "^4.0.0",
    "gulp-tape": "0.0.9",
-    "gulp-typescript": "5.0.1",
-    "htmlhint": "0.11.0",
-    "is-ci": "1.0.10",
-    "nodemon": "1.14.11",
+    "is-ci": "^1.0.10",
+    "nodemon": "^1.14.11",
    "pre-commit": "1.2.2",
-    "spectron": "5.0.0",
-    "stylelint": "9.10.1",
-    "tap-colorize": "1.2.0",
-    "tape": "4.8.0",
-    "typescript": "3.5.2",
-    "xo": "0.24.0"
+    "spectron": "3.8.0",
+    "tap-colorize": "^1.2.0",
+    "tape": "^4.8.0",
+    "xo": "0.18.2"
  },
  "xo": {
-    "extends": "xo-typescript",
-    "extensions": [
-      "ts"
-    ],
    "parserOptions": {
-      "ecmaVersion": 6,
-      "sourceType": "module",
+      "sourceType": "script",
      "ecmaFeatures": {
-        "globalReturn": true,
-        "modules": true
+        "globalReturn": true
      }
    },
    "esnext": true,
    "overrides": [
      {
-        "files": "app/**/*.ts",
+        "files": "app*/**/*.js",
        "rules": {
          "max-lines": [
            "warn",
            {
-              "max": 800,
+              "max": 500,
              "skipBlankLines": true,
              "skipComments": true
            }
@@ -195,26 +168,13 @@
          "prefer-promise-reject-errors": 0,
          "import/no-unresolved": 0,
          "import/no-extraneous-dependencies": 0,
-          "no-prototype-builtins": 0,
-          "lines-between-class-members": 0,
-          "padding-line-between-statements": 0,
-          "quotes": 0,
-          "unicorn/catch-error-name": 0,
-          "unicorn/no-console-spaces": 0,
-          "node/no-deprecated-api": 0,
-          "@typescript-eslint/member-ordering": "never",
-          "@typescript-eslint/restrict-plus-operands": "never",
-          "import/default": 0,
-          "@typescript-eslint/no-unused-vars": 0
+          "no-prototype-builtins": 0
        }
      }
    ],
    "ignore": [
      "tests/*.js",
-      "tools/locale-helper/*.js",
-      "*/**/*.js",
-      "*.js",
-      "typings.d.ts"
+      "tools/locale-helper/*.js"
    ],
    "envs": [
      "node",
--- a/snap/snapcraft.yaml
+++ b/snap/snapcraft.yaml
@@ -1,5 +1,5 @@
 name: zulip
-version: 2.3.82
+version: 2.0.0
 summary: Zulip Desktop Client for Linux
 description: Zulip combines the immediacy of Slack with an email threading model. With Zulip, you can catch up on important conversations while ignoring irrelevant ones.
 confinement: strict
@@ -34,4 +34,4 @@ parts:
      - libxtst6
    source: dist/linux-unpacked
    after:
-      - desktop-gtk3
+      - desktop-gtk2
--- a/tests/e2e/package.json
+++ b/tests/e2e/package.json
@@ -1,183 +1,185 @@
 {
-    "name": "zulip",
-    "productName": "Zulip",
-    "version": "2.4.0",
-    "main": "../../app/main",
-    "description": "Zulip Desktop App",
-    "license": "Apache-2.0",
-    "copyright": "Kandra Labs, Inc.",
-    "author": {
-      "name": "Kandra Labs, Inc.",
-      "email": "support@zulipchat.com"
+ "name": "zulip",
+ "productName": "ZulipTest",
+ "version": "2.3.3",
+ "main": "../../app/main",
+ "description": "Zulip Desktop App",
+ "license": "Apache-2.0",
+ "copyright": "Kandra Labs, Inc.",
+ "author": {
+  "name": "Kandra Labs, Inc.",
+  "email": "support@zulipchat.com"
+ },
+ "repository": {
+  "type": "git",
+  "url": "https://github.com/zulip/zulip-electron.git"
+ },
+ "bugs": {
+  "url": "https://github.com/zulip/zulip-electron/issues"
+ },
+ "engines": {
+  "node": ">=6.0.0"
+ },
+ "scripts": {
+  "start": "electron app --disable-http-cache --no-electron-connect",
+  "reinstall": "node ./tools/reinstall-node-modules.js",
+  "postinstall": "electron-builder install-app-deps",
+  "test": "xo",
+  "test-e2e": "gulp test-e2e",
+  "dev": "gulp dev & nodemon --watch app/main --watch app/renderer --exec 'npm test' -e html,css,js",
+  "pack": "electron-builder --dir",
+  "dist": "electron-builder",
+  "mas": "electron-builder --mac mas",
+  "travis": "cd ./scripts && ./travis-build-test.sh",
+  "build-locales": "node tools/locale-helper"
+ },
+ "pre-commit": [
+  "test"
+ ],
+ "build": {
+  "appId": "org.zulip.zulip-electron",
+  "asar": true,
+  "files": [
+   "**/*",
+   "!docs${/*}",
+   "!node_modules/@paulcbetts/cld/deps/cld${/*}"
+  ],
+  "copyright": "©2017 Kandra Labs, Inc.",
+  "mac": {
+   "category": "public.app-category.productivity",
+   "artifactName": "${productName}-${version}-${arch}.${ext}"
+  },
+  "linux": {
+   "category": "Chat;GNOME;GTK;Network;InstantMessaging",
+   "packageCategory": "GNOME;GTK;Network;InstantMessaging",
+   "description": "Zulip Desktop Client for Linux",
+   "target": [
+    "deb",
+    "zip",
+    "AppImage",
+    "snap"
+   ],
+   "maintainer": "Akash Nimare <svnitakash@gmail.com>",
+   "artifactName": "${productName}-${version}-${arch}.${ext}"
+  },
+  "deb": {
+   "synopsis": "Zulip Desktop App",
+   "afterInstall": "./scripts/debian-add-repo.sh",
+   "afterRemove": "./scripts/debian-uninstaller.sh"
+  },
+  "snap": {
+   "synopsis": "Zulip Desktop App"
+  },
+  "dmg": {
+   "background": "build/appdmg.png",
+   "icon": "build/icon.icns",
+   "iconSize": 100,
+   "contents": [
+    {
+     "x": 380,
+     "y": 280,
+     "type": "link",
+     "path": "/Applications"
    },
-    "repository": {
-      "type": "git",
-      "url": "https://github.com/zulip/zulip-electron.git"
-    },
-    "bugs": {
-      "url": "https://github.com/zulip/zulip-electron/issues"
-    },
-    "engines": {
-      "node": ">=6.0.0"
-    },
-    "scripts": {
-      "start": "electron app --disable-http-cache --no-electron-connect",
-      "reinstall": "node ./tools/reinstall-node-modules.js",
-      "postinstall": "electron-builder install-app-deps",
-      "test": "xo",
-      "test-e2e": "gulp test-e2e",
-      "dev": "gulp dev & nodemon --watch app/main --watch app/renderer --exec 'npm test' -e html,css,js",
-      "pack": "electron-builder --dir",
-      "dist": "electron-builder",
-      "mas": "electron-builder --mac mas",
-      "travis": "cd ./scripts && ./travis-build-test.sh",
-      "build-locales": "node tools/locale-helper"
-    },
-    "pre-commit": [
-      "test"
-    ],
-    "build": {
-      "appId": "org.zulip.zulip-electron",
-      "asar": true,
-      "files": [
-        "**/*",
-        "!docs${/*}",
-        "!node_modules/@paulcbetts/cld/deps/cld${/*}"
-      ],
-      "copyright": "©2017 Kandra Labs, Inc.",
-      "mac": {
-        "category": "public.app-category.productivity",
-        "artifactName": "${productName}-${version}-${arch}.${ext}"
-      },
-      "linux": {
-        "category": "Chat;GNOME;GTK;Network;InstantMessaging",
-        "packageCategory": "GNOME;GTK;Network;InstantMessaging",
-        "description": "Zulip Desktop Client for Linux",
-        "target": [
-          "deb",
-          "zip",
-          "AppImage",
-          "snap"
-        ],
-        "maintainer": "Akash Nimare <svnitakash@gmail.com>",
-        "artifactName": "${productName}-${version}-${arch}.${ext}"
-      },
-      "deb": {
-        "synopsis": "Zulip Desktop App",
-        "afterInstall": "./scripts/debian-add-repo.sh",
-        "afterRemove": "./scripts/debian-uninstaller.sh"
-      },
-      "snap": {
-        "synopsis": "Zulip Desktop App"
-      },
-      "dmg": {
-        "background": "build/appdmg.png",
-        "icon": "build/icon.icns",
-        "iconSize": 100,
-        "contents": [
-          {
-            "x": 380,
-            "y": 280,
-            "type": "link",
-            "path": "/Applications"
-          },
-          {
-            "x": 110,
-            "y": 280,
-            "type": "file"
-          }
-        ],
-        "window": {
-          "width": 500,
-          "height": 500
-        }
-      },
-      "win": {
-        "target": [
-          {
-            "target": "nsis-web",
-            "arch": [
-              "x64",
-              "ia32"
-            ]
-          }
-        ],
-        "icon": "build/icon.ico",
-        "publisherName": "Kandra Labs, Inc."
-      },
-      "nsis": {
-        "allowToChangeInstallationDirectory": true
-      }
-    },
-    "keywords": [
-      "Zulip",
-      "Group Chat app",
-      "electron-app",
-      "electron",
-      "Desktop app",
-      "InstantMessaging"
-    ],
-    "devDependencies": {
-      "assert": "1.4.1",
-      "cp-file": "^5.0.0",
-      "devtron": "1.4.0",
-      "electron": "3.0.10",
-      "electron-builder": "20.38.4",
-      "electron-connect": "0.6.2",
-      "electron-debug": "1.4.0",
-      "google-translate-api": "2.3.0",
-      "gulp": "^4.0.0",
-      "gulp-tape": "0.0.9",
-      "is-ci": "^1.0.10",
-      "nodemon": "^1.14.11",
-      "pre-commit": "1.2.2",
-      "spectron": "3.8.0",
-      "tap-colorize": "^1.2.0",
-      "tape": "^4.8.0",
-      "xo": "0.18.2"
-    },
-    "xo": {
-      "parserOptions": {
-        "sourceType": "script",
-        "ecmaFeatures": {
-          "globalReturn": true
-        }
-      },
-      "esnext": true,
-      "overrides": [
-        {
-          "files": "app*/**/*.js",
-          "rules": {
-            "max-lines": [
-              "warn",
-              {
-                "max": 600,
-                "skipBlankLines": true,
-                "skipComments": true
-              }
-            ],
-            "no-warning-comments": 0,
-            "object-curly-spacing": 0,
-            "capitalized-comments": 0,
-            "no-else-return": 0,
-            "no-path-concat": 0,
-            "no-alert": 0,
-            "guard-for-in": 0,
-            "prefer-promise-reject-errors": 0,
-            "import/no-unresolved": 0,
-            "import/no-extraneous-dependencies": 0,
-            "no-prototype-builtins": 0
-          }
-        }
-      ],
-      "ignore": [
-        "tests/*.js",
-        "tools/locale-helper/*.js"
-      ],
-      "envs": [
-        "node",
-        "browser",
-        "mocha"
-      ]
+    {
+     "x": 110,
+     "y": 280,
+     "type": "file"
    }
+   ],
+   "window": {
+    "width": 500,
+    "height": 500
+   }
+  },
+  "win": {
+   "target": [
+    {
+     "target": "nsis-web",
+     "arch": [
+      "x64",
+      "ia32"
+     ]
+    }
+   ],
+   "icon": "build/icon.ico",
+   "publisherName": "Kandra Labs, Inc."
+  },
+  "nsis": {
+   "perMachine": true,
+   "oneClick": false,
+   "allowToChangeInstallationDirectory": true
  }
+ },
+ "keywords": [
+  "Zulip",
+  "Group Chat app",
+  "electron-app",
+  "electron",
+  "Desktop app",
+  "InstantMessaging"
+ ],
+ "devDependencies": {
+  "assert": "1.4.1",
+  "cp-file": "^5.0.0",
+  "devtron": "1.4.0",
+  "electron": "2.0.1",
+  "electron-builder": "20.20.4",
+  "electron-connect": "0.6.2",
+  "electron-debug": "1.4.0",
+  "google-translate-api": "2.3.0",
+  "gulp": "^4.0.0",
+  "gulp-tape": "0.0.9",
+  "is-ci": "^1.0.10",
+  "nodemon": "^1.14.11",
+  "pre-commit": "1.2.2",
+  "spectron": "3.8.0",
+  "tap-colorize": "^1.2.0",
+  "tape": "^4.8.0",
+  "xo": "0.18.2"
+ },
+ "xo": {
+  "parserOptions": {
+   "sourceType": "script",
+   "ecmaFeatures": {
+    "globalReturn": true
+   }
+  },
+  "esnext": true,
+  "overrides": [
+   {
+    "files": "app*/**/*.js",
+    "rules": {
+     "max-lines": [
+      "warn",
+      {
+       "max": 500,
+       "skipBlankLines": true,
+       "skipComments": true
+      }
+     ],
+     "no-warning-comments": 0,
+     "object-curly-spacing": 0,
+     "capitalized-comments": 0,
+     "no-else-return": 0,
+     "no-path-concat": 0,
+     "no-alert": 0,
+     "guard-for-in": 0,
+     "prefer-promise-reject-errors": 0,
+     "import/no-unresolved": 0,
+     "import/no-extraneous-dependencies": 0,
+     "no-prototype-builtins": 0
+    }
+   }
+  ],
+  "ignore": [
+   "tests/e2e/*.js",
+   "tools/locale-helper/*.js"
+  ],
+  "envs": [
+   "node",
+   "browser",
+   "mocha"
+  ]
+ }
+}
--- a/tools/run-dev
+++ b/tools/run-dev
@@ -1,89 +0,0 @@
-#!/usr/bin/env node
-
-const path = require('path');
-const glob = require('glob');
-const chalk = require('chalk');
-const { spawn } = require('child_process');
-
-async function run(task, commandToRun, opts = {}) {
-  const args = commandToRun.split(' ');
-  let cmd = args[0];
-  args.splice(0, 1);
-
-  if (process.platform === 'win32' && /np(m|x)/.test(cmd)) {
-    cmd = cmd + '.cmd';
-  }
-
-  const defaults = {
-    cwd: path.resolve(__dirname, '..'),
-    env: process.env,
-    stdio: 'pipe'
-  };
-
-  opts = { ...defaults, ...opts };
-  task = ' ' + task + ' ';
-  
-  const colors = [
-    { bg: 'bold.bgGreen', color: 'bold.green' },
-    { bg: 'bold.bgMagenta', color: 'bold.magenta' },
-    { bg: 'bold.bgBlue', color: 'bold.blue' },
-    { bg: 'bold.bgYellow', color: 'bold.yellow' },
-    { bg: 'bold.bgCyan', color: 'bold.cyan' },
-    { bg: 'bold.bgKeyword("rebeccapurple")', color: 'bold.keyword("rebeccapurple")' },
-    { bg: 'bold.bgKeyword("darkslategray")', color: 'bold.keyword("darkslategray")' },
-  ];
-
-  const randomColorIndex = Math.floor((Math.random() * (colors.length * 1000)) / 1000);
-  const randomColor = colors[randomColorIndex];
-  console.log(chalk`{${randomColor.bg} ${ task }} {${randomColor.color} ${commandToRun}}`);
-
-  const proc = spawn(cmd, args, opts);
-  proc.stderr.on('data', data => console.log(data.toString()));
-  proc.stdout.on('data', data => console.log(data.toString()));
-
-  return new Promise((resolve, reject) => {
-    function check(code) {
-      if (code !== 0) {
-        reject(chalk`{bgRed ERROR!} Running {red ${commandToRun}} failed with exit code: ${code}`);
-      } else {
-        resolve();
-      }
-
-      // we don't want to exit after compiling typescript files
-      // but instead want to do it if the tsc -w or electron app died.
-      if (commandToRun !== 'npx tsc') {
-        process.exit(0); 
-      }
-    }
-
-    proc.on('exit', check);
-    proc.on('close', check);
-    proc.on('error', () => {
-      reject();
-      process.exit(0);
-    });
-  });
-}
-
-async function main() {
-  const baseFilePattern = 'app/+(main|renderer)/**/*';
-  const globOptions = { cwd: path.resolve(__dirname, '..') };
-  const jsFiles = glob.sync(baseFilePattern + '.js', globOptions);
-  const tsFiles = glob.sync(baseFilePattern + '.ts', globOptions);
-
-
-  // if the are missing compiled js file for typescript files
-  // run the typescript compiler before starting the app
-  if (jsFiles.length !== tsFiles.length) {
-    console.log('Compiling typescript files...');
-    await run('TypeScript', 'npx tsc');
-  }
-
-  await Promise.all([
-    run('Electron app', 'npx electron app --disable-http-cache --no-electron-connect'),
-    run('TypeScript watch mode', 'npx tsc --watch --pretty')
-  ]);
-}
-
-main()
-  .catch(err => console.error(err));
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,29 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "esnext",
-    "lib": ["dom", "dom.iterable", "esnext"],
-    "module": "commonjs",
-    "esModuleInterop": true,
-    "skipLibCheck": true,
-
-    /* Strict type-checking */
-    "strict": true,
-    "noImplicitAny": true,
-    "strictNullChecks": false,
-    "noImplicitThis": true,
-    "alwaysStrict": true,
-
-    /* Additional checks */
-    "noUnusedLocals": true,
-    "noUnusedParameters": false,
-    "noImplicitReturns": true
-  },
-  "include":[
-    "app/**/*",
-    "typings.d.ts"
-  ],
-  "exclude":[
-    "node_modules",
-    "app/node_modules"
-  ]
-}
--- a/typings.d.ts
+++ b/typings.d.ts
@@ -1,54 +0,0 @@
-declare module 'adm-zip';
-declare module 'auto-launch';
-declare module 'is-online';
-declare module 'request';
-declare module 'semver';
-declare module '@electron-elements/send-feedback';
-declare module 'node-mac-notifier';
-declare module 'electron-connect';
-declare module 'electron-is-dev';
-declare module 'electron-spellchecker';
-declare module 'escape-html';
-declare module 'fs-extra';
-declare module 'wurl';
-
-interface PageParamsObject {
-    realm_uri: string;
-    default_language: string;
-}
-declare var page_params: PageParamsObject;
-
-// since requestIdleCallback didn't make it into lib.dom.d.ts yet
-declare function requestIdleCallback(callback: Function, options?: object): void;
-
-// Patch Notification object so we can implement our side
-// of Notification classes which we export into zulip side through
-// preload.js; if we don't do his extending Notification will throw error.
-// Relevant code is in app/renderer/js/notification/default-notification.ts
-// and the relevant function is requestPermission.
-declare var PatchedNotification: {
-  prototype: Notification;
-  new(title: string, options?: NotificationOptions): Notification;
-  readonly maxActions: number;
-  readonly permission: NotificationPermission;
-  requestPermission(): void;
-}
-
-// This is mostly zulip side of code we access from window
-interface Window {
-  $: any;
-  narrow: any
-  Notification: typeof PatchedNotification;
-}
-
-// typescript doesn't have up to date NotificationOptions yet
-interface NotificationOptions {
-  silent?: boolean;
-}
-
-interface ZulipWebWindow extends Window {
-    electron_bridge: any;
-    tray: any;
-    $: any;
-    lightbox: any;
-}
--- a/zulip-electron-launcher.sh
+++ b/zulip-electron-launcher.sh
@@ -48,10 +48,10 @@ envSetup()

 	# Set name of upstreamRemote
 	cd $workingDir
-	git remote -v | grep "github\.com.zulip.zulip-desktop.git (fetch)" > /dev/null 2>&1
+	git remote -v | grep "github\.com.zulip.zulip-electron.git (fetch)" > /dev/null 2>&1
 	if [ $? -eq 0 ]
 	then
-		upstreamRemote=`git remote -v | grep "github\.com.zulip.zulip-desktop.git (fetch)" | awk '{ print $1 }'`
+		upstreamRemote=`git remote -v | grep "github\.com.zulip.zulip-electron.git (fetch)" | awk '{ print $1 }'`
 	else
 		upstreamRemote="origin"
 	fi