setting-page: Minor UI fixes for add new server page.

Minor fixes - * Update link to create a new organization. * Update placeholder text for demo zulip server. * Remove border from connect button. * Add overflow for smaller window. * Fix a typo in background color. * Use buttons for server actions. * Make new server page responsive. * Focus buttons on tab. * Update styling of button. * Make add new server page responsive. Fixes: #457.
zulip · Mar 22, 2018 · abd7133 · abd7133
1 parent e776222
commit abd7133
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 23 deletions.
diff --git a/app/renderer/css/preference.css b/app/renderer/css/preference.css
@@ -129,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 {
@@ -319,9 +320,10 @@ img.server-info-icon {
     border: rgba(239, 83, 80, 0.5) solid 1px;
 }
 
-.red:hover{
+.red:hover {
     color: #e63431;
-    border: rgba(239, 83, 80, 0.7) solid 1px;;
+    border: rgba(239, 83, 80, 0.7) solid 1px;
+    ;
 }
 
 .blue {
@@ -477,6 +479,7 @@ input.toggle-round:checked+label:after {
     height: 100%;
     /* background: rgba(61, 64, 67, 15); */
     background: linear-gradient(35deg, #003b52, #45b59b);
+    overflow: auto;
 }
 
 
@@ -499,15 +502,14 @@ input.toggle-round:checked+label:after {
 
 .divider {
     margin-bottom: 30px;
-    margin-right: 10px;
     margin-top: 30px;
     color: #7d878a;
 }
 
 .divider hr {
-    margin-left: auto;
-    margin-right: auto;
-    width: 45%;
+    margin-left: 8px;
+    margin-right: 8px;
+    width: 44%;
 }
 
 .left {
@@ -523,24 +525,31 @@ input.toggle-round:checked+label:after {
     text-align: center;
     align-items: center;
     padding-top: 13px;
+    margin-left: -5px;
 }
 
-.server-center span {
+.server-center button {
     font-weight: bold;
     font-size: 1.1rem;
-    padding: 10px;
     margin: auto;
     align-items: center;
     text-align: center;
+    color: #fff;
+    background: #4EBFAC;
+    border-color: none;
+    border: none;
+    width: 98%;
+    height: 46px;
+    border-radius: 3px;
+    cursor: pointer;
 }
 
-.server-center .blue {
-    border-radius: 3px;
+.server-center button:hover {
+    background: #329588;
 }
 
-.server-center .blue:hover {
-    border-right: 2px solid #309085;
-    border-bottom: 2px solid #309085;
+.server-center button:focus {
+    background: #329588;
 }
 
 
@@ -564,10 +573,19 @@ input.toggle-round:checked+label:after {
         padding: 40px;
         min-width: 300px;
     }
-    .server-center .blue {
-        margin-right: 1px;
+    .server-center button {
+        margin-right: -12px;
+        width: 100%;
+    }
+    .divider {
+        margin-right: -8px;
+    }
+    .divider hr {
+        margin-left: 6px;
+        margin-right: 6px;
+        width: 43%;
     }
     #new-server-container {
         padding-left: 0px;
     }
-}
+}
diff --git a/app/renderer/js/pages/preference/new-server-form.js b/app/renderer/js/pages/preference/new-server-form.js
@@ -15,11 +15,11 @@ class NewServerForm extends BaseComponent {
 			<div class="server-input-container">
 				<div class="title">Organization URL</div>
 				<div class="add-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="your-organization.zulipchat.com or zulip.your-organization.com"/>
 				</div>
 				<div class="server-center">
-					<div class="action blue server-save-action">
-						<span id="connect">Connect</span>
+					<div class="server-save-action">
+						<button id="connect">Connect</button>
 					</div>
 				</div>
 				<div class="server-center">
@@ -28,8 +28,8 @@ class NewServerForm extends BaseComponent {
 				</div>
 				</div>
 				<div class="server-center">
-				<div class="action blue server-save-action">
-					<span id="open-create-org-link">Create a new organization</span>
+				<div class="server-save-action">
+					<button id="open-create-org-link">Create a new organization</button>
 			</div>
 					</div>
 			</div>
@@ -44,7 +44,6 @@ class NewServerForm extends BaseComponent {
 	initForm() {
 		this.$newServerForm = this.generateNodeFromTemplate(this.template());
 		this.$saveServerButton = this.$newServerForm.getElementsByClassName('server-save-action')[0];
-
 		this.props.$root.innerHTML = '';
 		this.props.$root.appendChild(this.$newServerForm);
 
@@ -64,7 +63,7 @@ class NewServerForm extends BaseComponent {
 	}
 
 	openCreateNewOrgExternalLink() {
-		const link = 'https://zulipchat.com/beta/';
+		const link = 'https://zulipchat.com/new/';
 		const externalCreateNewOrgEl = document.getElementById('open-create-org-link');
 		externalCreateNewOrgEl.addEventListener('click', () => {
 			shell.openExternal(link);