design: Update UI for server section #340

app/renderer/css/preference.css

@@ -24,7 +24,9 @@ kbd {
     white-space: nowrap;
 }
 
-table, th, td {
+table,
+th,
+td {
     border-collapse: collapse;
     color: #383430;
 }
@@ -33,14 +35,19 @@ table {
     width: 100%;
     margin-top: 18px;
     margin-bottom: 18px;
- }
+}
 
-table tr:nth-child(even) { background-color: #f7eee6; }
+table tr:nth-child(even) {
+    background-color: #f7eee6;
+}
 
-table tr:nth-child(odd) { background-color: #fff8ef; }
+table tr:nth-child(odd) {
+    background-color: #fff8ef;
+}
 
-
-td { padding: 5px; }
+td {
+    padding: 5px;
+}
 
 td:nth-child(odd) {
     text-align: right;
@@ -51,9 +58,7 @@ td:nth-child(odd) {
     font-family: 'Material Icons';
     font-style: normal;
     font-weight: 400;
-  src: local('Material Icons'),
-       local('MaterialIcons-Regular'),
-       url(../fonts/MaterialIcons-Regular.ttf) format('truetype');
+    src: local('Material Icons'), local('MaterialIcons-Regular'), url(../fonts/MaterialIcons-Regular.ttf) format('truetype');
 }
 
 @font-face {
@@ -144,6 +149,13 @@ td:nth-child(odd) {
     color: #222c31;
 }
 
+.page-title {
+    color: #222c31;
+    font-size: 15px;
+    font-weight: bold;
+    padding: 4px 0 6px 0;
+}
+
 .sub-title {
     padding: 4px 0 6px 0;
     font-weight: bold;
@@ -188,16 +200,18 @@ img.server-info-icon {
 .setting-input-value {
     flex-grow: 1;
     font-size: 14px;
-    height: 24px;
-    border: none;
-    border-bottom: #ededed 1px solid;
+    height: 22px;
+    border-radius: 3px;
+    padding: 7px;
+    border: #ededed 2px solid;
     outline-width: 0;
     background: transparent;
     max-width: 500px;
 }
 
 .setting-input-value:focus {
-    border-bottom: #7cb980 1px solid;
+    border: #7cb980 2px solid;
+    border-radius: 3px;
 }
 
 .setting-block {
@@ -334,7 +348,8 @@ i.open-tab-button {
 }
 
 #open-create-org-link:hover {
-		color: #005580;;
+    color: #005580;
+    ;
     text-decoration: underline;
 }
 
@@ -343,7 +358,8 @@ i.open-tab-button {
     margin-left: -9999px;
     visibility: hidden;
 }
-.toggle + label {
+
+.toggle+label {
     display: block;
     position: relative;
     cursor: pointer;
@@ -351,15 +367,16 @@ i.open-tab-button {
     user-select: none;
 }
 
-input.toggle-round + label {
+input.toggle-round+label {
     padding: 2px;
     width: 50px;
     height: 25px;
     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;
@@ -367,22 +384,26 @@ input.toggle-round + label:after {
     bottom: 2px;
     content: "";
 }
-input.toggle-round + label:before {
+
+input.toggle-round+label:before {
     right: 2px;
     background-color: #f1f1f1;
     border-radius: 25px;
     transition: background 0.4s;
 }
-input.toggle-round + label:after {
+
+input.toggle-round+label:after {
     width: 25px;
     height: 25px;
     background-color: #fff;
     border-radius: 100%;
     transition: margin 0.4s;
 }
-input.toggle-round:checked + label:before {
+
+input.toggle-round:checked+label:before {
     background-color: #4EBFAC;
 }
-input.toggle-round:checked + label:after {
+
+input.toggle-round:checked+label:after {
     margin-left: 25px;
 }

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

@@ -13,6 +13,7 @@ class NewServerForm extends BaseComponent {
 		return `
 			<div class="settings-card">
 				<div class="server-info-right">
+					<div class="title">Enter URL of your Zulip Organization</div>
 					<div class="server-info-row">
 						<input class="setting-input-value" autofocus placeholder="example.zulipchat.com"/>
 					</div>

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

@@ -15,7 +15,7 @@ class ServersSection extends BaseSection {
 	template() {
 		return `
 			<div class="settings-pane" id="server-settings-pane">
-				<div class="title">Enter URL of your Zulip organization</div>
+				<div class="page-title">Register or login to a Zulip Organization to get started</div>
 				<div id="new-server-container"></div>
 				<div class="title" id="existing-servers"></div>
 				<div id="server-info-container"></div>
@@ -38,9 +38,9 @@ class ServersSection extends BaseSection {
 		this.$newServerContainer = document.getElementById('new-server-container');
 		this.$newServerButton = document.getElementById('new-server-action');
 
-		this.$serverInfoContainer.innerHTML = servers.length ? '' : 'Add your first server to get started!';
+		this.$serverInfoContainer.innerHTML = servers.length ? '' : '';
 		// Show Existing servers if servers are there otherwise hide it
-		this.$existingServers.innerHTML = servers.length === 0 ? '' : 'Existing Servers';
+		this.$existingServers.innerHTML = servers.length === 0 ? '' : 'Existing Organizations';
 		this.initNewServerForm();
 
 		this.$createOrganizationContainer = document.getElementById('create-organization-container');