design: Testing new design.

app/renderer/css/preference.css

@@ -270,8 +270,8 @@ img.server-info-icon {
 }
 
 .settings-card:hover {
-    border-left: 8px solid #bcbcbc;
+    /* border-left: 8px solid #bcbcbc; */
-    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 0px 0px rgba(0, 0, 0, 0.12);
+    /* box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 0px 0px rgba(0, 0, 0, 0.12); */
 }
 
 .hidden {

app/renderer/js/pages/preference/added-server-section.js

@@ -0,0 +1,61 @@
+'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 CreateOrganziation = require(__dirname + '/create-new-org.js');
+
+class AddedSection extends BaseSection {
+	constructor(props) {
+		super();
+		this.props = props;
+	}
+
+	template() {
+		return `
+			<div class="settings-pane" id="server-settings-pane">
+				<div id="new-server-container"></div>
+				<div class="title" id="existing-servers"></div>
+				<div id="server-info-container"></div>
+				<div id="create-organization-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');
+
+		this.$serverInfoContainer.innerHTML = servers.length ? '' : '';
+		// Show Existing servers if servers are there otherwise hide it
+		this.$existingServers.innerHTML = servers.length === 0 ? '' : 'Connected organizations';
+
+		this.$createOrganizationContainer = document.getElementById('create-organization-container');
+		this.initCreateNewOrganization();
+
+		for (let i = 0; i < servers.length; i++) {
+			new ServerInfoForm({
+				$root: this.$serverInfoContainer,
+				server: servers[i],
+				index: i,
+				onChange: this.reloadApp
+			}).init();
+		}
+	}
+
+	initCreateNewOrganization() {
+		new CreateOrganziation({
+			$root: this.$createOrganizationContainer
+		}).init();
+	}
+}
+
+module.exports = AddedSection;

app/renderer/js/pages/preference/nav.js

@@ -8,7 +8,7 @@ class PreferenceNav extends BaseComponent {
 
 		this.props = props;
 
-		this.navItems = ['General', 'Network', 'Servers', 'Shortcuts'];
+		this.navItems = ['General', 'Network', 'Servers', 'Added-servers', 'Shortcuts'];
 
 		this.init();
 	}

app/renderer/js/pages/preference/new-server-form.js

@@ -13,17 +13,25 @@ class NewServerForm extends BaseComponent {
 		return `
 			<div class="settings-card">
 				<div class="server-info-right">
-					<div class="title">URL of Zulip organization</div>
+					<div class="title">Organization URL</div>
 					<div class="server-info-row">
-						<input class="setting-input-value" autofocus placeholder="your-organization.zulipchat.com or chat.your-organization.com"/>
+						<input class="setting-input-value" autofocus placeholder="example.zulipchat.com or chat.example.com"/>
 					</div>
 					<div class="server-info-row">
 						<div class="action blue server-save-action">
-							<i class="material-icons">add_box</i>
+							<span>Next</span>
-							<span>Add</span>
 						</div>
 					</div>
 				</div>
+				<div class="divider">
+				<hr class="left"/>OR<hr class="right" />
+				</div>
+
+				<div class="server-info-row">
+						<div class="action blue server-create-action">
+							<span>Create a new organization</span>
+						</div>
+					</div>
 			</div>
 		`;
 	}
@@ -43,13 +51,13 @@ class NewServerForm extends BaseComponent {
 	}
 
 	submitFormHandler() {
-		this.$saveServerButton.children[1].innerHTML = 'Adding...';
+		this.$saveServerButton.children[0].innerHTML = 'Adding...';
 		DomainUtil.checkDomain(this.$newServerUrl.value).then(serverConf => {
 			DomainUtil.addDomain(serverConf).then(() => {
 				this.props.onChange(this.props.index);
 			});
 		}, errorMessage => {
-			this.$saveServerButton.children[1].innerHTML = 'Add';
+			this.$saveServerButton.children[0].innerHTML = 'Next';
 			alert(errorMessage);
 		});
 	}

app/renderer/js/pages/preference/preference.js

@@ -8,6 +8,7 @@ const ServersSection = require(__dirname + '/js/pages/preference/servers-section
 const GeneralSection = require(__dirname + '/js/pages/preference/general-section.js');
 const NetworkSection = require(__dirname + '/js/pages/preference/network-section.js');
 const ShortcutsSection = require(__dirname + '/js/pages/preference/shortcuts-section.js');
+const AddedSection = require(__dirname + '/js/pages/preference/added-server-section.js');
 
 class PreferenceView extends BaseComponent {
 	constructor() {
@@ -57,6 +58,12 @@ class PreferenceView extends BaseComponent {
 				});
 				break;
 			}
+			case 'Added-servers': {
+				this.section = new AddedSection({
+					$root: this.$settingsContainer
+				});
+				break;
+			}
 			case 'Shortcuts': {
 				this.section = new ShortcutsSection({
 					$root: this.$settingsContainer

app/renderer/js/pages/preference/servers-section.js

@@ -1,10 +1,7 @@
 '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 NewServerForm = require(__dirname + '/new-server-form.js');
-const CreateOrganziation = require(__dirname + '/create-new-org.js');
 
 class ServersSection extends BaseSection {
 	constructor(props) {
@@ -14,12 +11,15 @@ class ServersSection extends BaseSection {
 
 	template() {
 		return `
+		<div id="myModal" class="modal">
+		<div class="modal-content">
+
 			<div class="settings-pane" id="server-settings-pane">
-				<div class="page-title">Register or login to a Zulip organization to get started</div>
+				<div class="page-title">Add a Zulip organization</div>
 				<div id="new-server-container"></div>
-				<div class="title" id="existing-servers"></div>
+			</div>
-				<div id="server-info-container"></div>
+
-				<div id="create-organization-container"></div>
+			</div>
 			</div>
 		`;
 	}
@@ -31,35 +31,17 @@ class ServersSection extends BaseSection {
 	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');
 		this.$newServerContainer = document.getElementById('new-server-container');
 		this.$newServerButton = document.getElementById('new-server-action');
 
-		this.$serverInfoContainer.innerHTML = servers.length ? '' : '';
-		// Show Existing servers if servers are there otherwise hide it
-		this.$existingServers.innerHTML = servers.length === 0 ? '' : 'Connected organizations';
 		this.initNewServerForm();
 
 		this.$createOrganizationContainer = document.getElementById('create-organization-container');
-		this.initCreateNewOrganization();
 
-		for (let i = 0; i < servers.length; i++) {
-			new ServerInfoForm({
-				$root: this.$serverInfoContainer,
-				server: servers[i],
-				index: i,
-				onChange: this.reloadApp
-			}).init();
-		}
-	}
 
-	initCreateNewOrganization() {
-		new CreateOrganziation({
-			$root: this.$createOrganizationContainer
-		}).init();
 	}
 
 	initNewServerForm() {

app/renderer/preference.html

@@ -1,16 +1,163 @@
 <!DOCTYPE html>
 <html lang="en" class="responsive desktop">
-  <head>
+
+<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>
+  <style>
-  <body>
+    /* The Modal (background) */
+
+    .modal {
+      display: block;
+      /* Hidden by default */
+      position: fixed;
+      /* Stay in place */
+      z-index: 1;
+      /* Sit on top */
+      padding-top: 100px;
+      /* Location of the box */
+      left: 0;
+      top: 0;
+      width: 100%;
+      /* Full width */
+      height: 100%;
+      /* Full height */
+      overflow: auto;
+      /* Enable scroll if needed */
+      /* background-color: rgb(0, 0, 0); */
+      /* Fallback color */
+      /* background-color: rgba(0, 0, 0, 0.4); */
+      background: rgba(61, 64, 67, 15);
+      /* Black w/ opacity */
+    }
+
+    /* Modal Content */
+
+    .modal-content {
+      background-color: #fefefe;
+      margin: auto;
+      padding: 57px;
+      border: #dae1e3 1px solid;
+      width: 600px;
+      /* margin-bottom: 113px; */
+      height: 344px;
+      border-radius: 4px;
+    }
+
+    /* The Close Button */
+
+    .close {
+      color: #aaaaaa;
+      float: right;
+      font-size: 28px;
+      font-weight: bold;
+    }
+
+    .close:hover,
+    .close:focus {
+      color: #000;
+      text-decoration: none;
+      cursor: pointer;
+    }
+
+    #server-settings-pane {
+      margin-left: 18%;
+    }
+
+    .settings-card.server-info-right:hover {
+      box-shadow: none !important;
+      border: none !important;
+    }
+
+    .server-save-action {
+      padding: 11px;
+      padding-left: 20px;
+      width: 292px;
+      border-radius: 4px;
+      margin-top: 16px;
+
+    }
+
+    .divider {
+      /* width: 250px;
+      text-align: center;
+      margin-left: 39px;
+      margin-top: 48px; */
+
+      width: 335px;
+      text-align: center;
+      margin-left: 0px;
+      margin-top: 48px;
+      color: #7d878a;
+
+    }
+
+    .divider hr {
+      margin-left: auto;
+      margin-right: auto;
+      width: 42%;
+
+    }
+
+    .left {
+      float: left;
+    }
+
+    .right {
+      float: right;
+    }
+
+    .server-create-action {
+      width: 314px;
+      margin-top: 40px;
+      padding: 11px;
+      border-radius: 4px;
+
+    }
+
+    .server-create-action span {
+      margin-left: 60px;
+      font-size: 15px;
+    }
+
+    .server-save-action span {
+      margin-left: 130px;
+    }
+
+    .server-save-action {
+      width: 306px;
+    }
+
+    .server-info-row {
+      display: block;
+    }
+
+    .setting-input-value {
+      width: 319px;
+    }
+
+    .page-title {
+      color: #222c31;
+      margin-left: 65px;
+      font-size: 22px;
+      font-weight: 100;
+      margin-bottom: 20px;
+      padding: 0;
+    }
+    .title {
+      color: #7d878a;
+    }
+  </style>
+</head>
+
+<body>
   <div id="content">
     <div id="sidebar"></div>
     <div id="settings-container"></div>
   </div>
-  </body>
+</body>
-  <script src="js/pages/preference/preference.js"></script>
+<script src="js/pages/preference/preference.js"></script>
+
 </html>