server-page: Use buttons for server actions.

* Use button instead of a span for adding new server + create org link. * Focus buttons on tab. * Make add new server page responsive. Fixes $457.
2025-10-31 20:13:43 +00:00 · 2018-03-23 01:27:47 +05:30 · 2018-03-23 01:21:53 +05:30 · 2018-03-23 00:28:06 +05:30 · 2018-03-23 00:26:24 +05:30 · 2018-03-23 00:23:04 +05:30
2 changed files with 41 additions and 24 deletions
--- 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;
-}
-
-.server-center .blue {
+    color: #fff;
+    background: #4EBFAC;
+    border-color: none;
+    border: none;
+    width: 98%;
+    height: 46px;
    border-radius: 3px;
+    cursor: pointer;
 }

-.server-center .blue:hover {
-    border-right: 2px solid #309085;
-    border-bottom: 2px solid #309085;
+.server-center button:hover {
+    background: #329588;
+}
+
+.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;
    }
-}
+}
--- 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);
Author	SHA1	Message	Date
Akash Nimare	297c056090	server-page: Use buttons for server actions. * Use button instead of a span for adding new server + create org link. * Focus buttons on tab. * Make add new server page responsive. Fixes $457.	2018-03-23 01:27:47 +05:30
Akash Nimare	34411e2a6b	server-page: Use buttons for server actions. * Make new server page responsive. * Focus buttons on tab. * Update styling of button. Fixes #457.	2018-03-23 01:21:53 +05:30
Akash Nimare	88f5a0e699	server-page: Fix a typo in background color.	2018-03-23 00:28:06 +05:30
Akash Nimare	2b6e76d5cd	server-page: Add overflow for smaller window.	2018-03-23 00:26:24 +05:30
Akash Nimare	4840cbe043	server-page: Remove border from connect button. WIP #457.	2018-03-23 00:23:04 +05:30
Akash Nimare	c8537acdf5	server-page: Update placeholder text. * Update link to create a new organization. * Update placeholder text for demo zulip server. WIP #457.	2018-03-23 00:11:47 +05:30
Akash Nimare	e776222d6b	browser-window: Prevent drag and drop events. This stops a remote code execution via drag and drop event in the main/renderer process. Fixes #453.	2018-03-22 23:23:18 +05:30