Merge pull request #212 from thelounge/astorije/improve-context-menu-design

Minor enhancements of the context menu UI

client/css/style.css

@@ -1216,19 +1216,24 @@ button,
 	min-width: 160px;
 	font-size: 14px;
 	background-color: #fff;
-	box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
-	border: 1px solid rgba(61, 70, 77, .1);
+	box-shadow: 0 3px 12px rgba(0, 0, 0, .15);
+	border: 1px solid rgba(0, 0, 0, .15);
+	border-radius: 2px;
 }
 
-.context-menu-item:first-child {
-	border-bottom: 1px solid rgba(61, 70, 77, .1);
+.context-menu-divider {
+	height: 1px;
+	margin: 6px 0;
+	background-color: rgba(0, 0, 0, .1);
 }
 
 .context-menu-item {
 	cursor: pointer;
 	display: block;
-	padding: 6px 8px;
+	padding: 4px 8px;
 	color: #333;
+	margin-top: 6px;
+	margin-bottom: 6px;
 }
 
 .context-menu-item:hover {
@@ -1239,6 +1244,8 @@ button,
 	font-family: FontAwesome;
 	width: 20px;
 	display: inline-block;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
 }
 
 .context-menu-user:before {
@@ -1250,7 +1257,7 @@ button,
 }
 
 .context-menu-close:before {
-	content: "\f057";
+	content: "\f00d";
 }
 
 /**

client/js/lounge.js

@@ -533,6 +533,7 @@ $(function() {
 				text: target.data("title"),
 				data: target.data("target")
 			});
+			output += render("contextmenu_divider");
 			output += render("contextmenu_item", {
 				class: "close",
 				text: target.hasClass("lobby") ? "Disconnect" : target.hasClass("query") ? "Close" : "Leave",

client/views/contextmenu_divider.tpl

@@ -0,0 +1 @@
+<li class="context-menu-divider" />