Minor fixes

client/css/style.css

@@ -49,8 +49,10 @@ button {
 }
 .btn {
 	border: 2px solid #95a5a6;
+	border: 2px solid #84d1ff;
 	border-radius: 5px;
 	color: #95a5a6;
+	color: #84d1ff;
 	display: inline-block;
 	font: bold 12px Lato, sans-serif;
 	letter-spacing: 1px;
@@ -62,6 +64,7 @@ button {
 }
 .btn:hover {
 	background: #95a5a6;
+	background: #84d1ff;
 	color: #fff;
 }
 .btn:active {
@@ -135,9 +138,13 @@ button {
 }
 #sidebar .octicon {
 	float: left;
-	margin-top: 2px;
+	margin-top: 1px;
 	margin-right: 8px;
 }
+#sidebar .octicon-plus {
+	margin-left: 1px;
+	margin-right: 11px;
+}
 #sidebar .lobby {
 	color: #84d1ff !important;
 	font-size: 15px;
@@ -203,6 +210,17 @@ button {
 	text-transform: uppercase;
 	word-spacing: 3px;
 }
+#sidebar #logout,
+#sidebar #settings-link {
+	display: none;
+}
+#sidebar.signed-in #login {
+	display: none;
+}
+#sidebar.signed-in #logout,
+#sidebar.signed-in #settings-link {
+	display: block;
+}
 #main {
 	bottom: 0;
 	left: 220px;
@@ -242,40 +260,48 @@ button {
 	font: 300 48px Lato, sans-serif;
 	line-height: 1.5;
 }
-#windows h2 {
+#windows h2,
+#windows h3 {
 	color: #7f8c8d;
 	font-size: 26px;
 }
 #windows h3 {
+	border-bottom: 1px solid #eee;
+	font-weight: 300;
+	
+	margin-bottom: 10px;
+	padding-bottom: 7px;
+}
+#windows h4 {
 	color: #95a5a6;
 	font-size: 18px;
 	font-weight: normal;
+	margin-bottom: 10px;
 }
-#windows input[type=text] {
+#windows form {
+	margin: 0 0;
+	max-width: 250px;
+}
+#windows .input {
 	border: 2px solid #e9ecef;
 	border-radius: 4px;
+	color: #95a5a6;
 	font-size: 24px;
+	margin-bottom: 16px;
 	outline: 0;
 	padding: 10px 14px;
 	transition: border-color .2s;
 	-webkit-appearance: none;
 	width: 100%;
 }
-#windows input[type=text]:hover,
-#windows input[type=text]:focus {
-	border-color: #95a5a6;
+#windows .input:hover,
+#windows .input:focus {
+	border-color: #bdc3c7;
 }
 #windows .window {
 	padding: 12% 0;
 	overflow: auto;
 }
-#settings {
-	
-}
-#settings h2 {
-	border-bottom: 1px solid #eee;
-	margin-bottom: 10px;
-}
 #settings section {
 	margin-top: 20px;
 }
@@ -310,15 +336,6 @@ button {
 #settings #notification {
 	color: #7f8c8d;
 }
-#sign-in form {
-	margin: 0 0;
-	max-width: 250px;
-}
-#sign-in-input {
-	color: #95a5a6;
-	margin-bottom: 20px;
-	width: 100%;
-}
 #chat {
 	font: 13px "Consolas", monospace;
 	line-height: 1.3em;

client/index.html

@@ -33,7 +33,7 @@
 					<i class="octicon octicon-sign-in"></i>
 					Sign in
 				</a>
-				<a id="logout" href="" style="display: none;">
+				<a id="logout" href="">
 					<i class="octicon octicon-sign-out"></i>
 					Sign out
 				</a>
@@ -52,7 +52,7 @@
 				<div class="wrap">
 					<h1>Settings</h1>
 					<section>
-						<h2>Messages</h2>
+						<h3>Messages</h3>
 						<div class="options">
 							<label class="opt">
 								<input type="checkbox" name="join">
@@ -77,7 +77,7 @@
 						</div>
 					</section>
 					<section>
-						<h2>Sound</h2>
+						<h3>Sound</h3>
 						<div class="options">
 							<label class="opt wide">
 								<input type="checkbox" name="notification">
@@ -98,8 +98,8 @@
 					<h1>Shout</h1>
 					<h2>You need to sign in to continue.</h2>
 					<form id="sign-in-form" method="post">
-						<h3>Password:</h3>
-						<input id="sign-in-input" type="password" autofocus>
+						<h4>Password:</h4>
+						<input id="sign-in-input" class="input" type="password" autofocus>
 						<button type="submit" class="btn">
 							Sign in
 						</button>

client/js/chat.js

@@ -62,6 +62,7 @@ $(function() {
 		case "auth":
 			$("#networks").add(chat).empty();
 			$("#login").trigger("click");
+			$.cookie("current", null);
 			break;
 		
 		case "debug":
@@ -115,8 +116,8 @@ $(function() {
 				.find(".chat")
 				.sticky();
 			
-			$("#login").hide();
-			$("#logout").show().on("click", function(e) {
+			sidebar.addClass("signed-in");
+			$("#logout").on("click", function(e) {
 				e.stopPropagation();
 			});
 			
@@ -167,19 +168,18 @@ $(function() {
 		}
 	}
 	
-	var settings = $("#settings");
-	var options = {
-		join: true,
-		nick: true,
-		part: true,
-		mode: true,
-		quit: true,
-		notification: true,
-	};
-
 	$.cookie.json = true;
 	$.cookie("settings", $.cookie("settings") || options);
-	$.extend(options, $.cookie("settings")); 
+	
+	var settings = $("#settings");
+	var options = $.extend({
+		join: true,
+		mode: true,
+		nick: true,
+		notification: true,
+		part: true,
+		quit: true,
+	}, $.cookie("settings"));
 	
 	for (var i in options) {
 		if (options[i]) {
@@ -191,6 +191,8 @@ $(function() {
 		settings.find("input").each(function() {
 			var input = $(this);
 			var name = input.attr("name");
+			options[name] = input.prop("checked");
+			$.cookie("settings", options);
 			if ([
 				"join",
 				"nick",
@@ -198,10 +200,8 @@ $(function() {
 				"mode",
 				"quit",
 			].indexOf(name) !== -1) {
-				chat.toggleClass("hide-" + name, !this.checked);
+				chat.toggleClass("hide-" + name, !input.prop("checked"));
 			}
-			options[name] = this.checked;
-			$.cookie("settings", options);
 		});
 	}).find("input")
 		.first()