From 510f91ac271c01bd42ab511ac772f8e35dca2504 Mon Sep 17 00:00:00 2001
From: Peter Jaszkowiak <p.jaszkow@gmail.com>
Date: Tue, 25 Jul 2017 19:53:52 -0600
Subject: [PATCH] Fix logout button styling on mobile

---
 less/header.less            | 38 +++++++++++++++++++------------------
 less/mobile.less            | 36 ++++++++++++++++++-----------------
 templates/partials/menu.tpl |  4 +++-
 3 files changed, 42 insertions(+), 36 deletions(-)

diff --git a/less/header.less b/less/header.less
index 2328077..bd5d85e 100644
--- a/less/header.less
+++ b/less/header.less
@@ -421,24 +421,26 @@ label.dropdown-toggle {
 	}
 }
 
-.dropdown-menu > li > form > button {
-	text-align: left;
-	width: 100%;
-	background: none;
-	border: none;
-	display: block;
-	padding: 3px 20px;
-	clear: both;
-	font-weight: normal;
-	line-height: @line-height-base;
-	color: @dropdown-link-color;
-	white-space: nowrap; // prevent links from randomly breaking onto new lines
-
-	&:hover,
-	&:focus {
-		text-decoration: none;
-		color: @dropdown-link-hover-color;
-		background-color: @dropdown-link-hover-bg;
+.dropdown-menu > li > form {
+	> button, > .btn-link {
+		text-align: left;
+		width: 100%;
+		background: none;
+		border: none;
+		display: block;
+		padding: 3px 20px;
+		clear: both;
+		font-weight: normal;
+		line-height: @line-height-base;
+		color: @dropdown-link-color;
+		white-space: nowrap; // prevent links from randomly breaking onto new lines
+
+		&:hover,
+		&:focus {
+			text-decoration: none;
+			color: @dropdown-link-hover-color;
+			background-color: @dropdown-link-hover-bg;
+		}
 	}
 }
 
diff --git a/less/mobile.less b/less/mobile.less
index e571963..0b0a930 100644
--- a/less/mobile.less
+++ b/less/mobile.less
@@ -63,13 +63,13 @@
 		background-color: #1D1F20;
 		background-image: linear-gradient(145deg, #1D1F20, #404348);
 
-		a {
+		a, button {
 			color: #fff;
 			text-decoration: none;
-		}
 
-		a:hover {
-			text-decoration: underline;
+			&:hover {
+				text-decoration: underline;
+			}
 		}
 
 		.chat-list {
@@ -81,15 +81,15 @@
 				color: #fff;
 				position: relative;
 				height: 60px;
-				
+
 				&:hover {
 					background: none;
 				}
-	
+
 				&:not(:last-child) {
 					border-bottom: none;
 				}
-				
+
 				.main-avatar {
 					position: absolute;
 					top: 0;
@@ -102,11 +102,11 @@
 						border-radius: 0;
 					}
 				}
-				
+
 				.members {
 					display: none;
 				}
-				
+
 				.room-name {
 					display: block;
 					overflow: hidden;
@@ -114,7 +114,7 @@
 					text-overflow: ellipsis;
 					padding-left: 60px;
 				}
-				
+
 				.teaser-content {
 					padding-left: 60px;
 					display: block;
@@ -186,18 +186,20 @@
 	}
 
 	.menu-section-list {
-		padding:0;
+		padding: 0;
 		margin: 10px 0;
-		list-style:none;
+		list-style: none;
 
-		a {
+		a, button {
 			display: block;
 			padding: 10px 20px;
-		}
+			text-align: left;
+			width: 100%;
 
-		a:hover {
-			background-color: rgba(255, 255, 255, 0.1);
-			text-decoration: none;
+			&:hover {
+				background-color: rgba(255, 255, 255, 0.1);
+				text-decoration: none;
+			}
 		}
 	}
 
diff --git a/templates/partials/menu.tpl b/templates/partials/menu.tpl
index 601b872..1e7ee22 100644
--- a/templates/partials/menu.tpl
+++ b/templates/partials/menu.tpl
@@ -127,7 +127,9 @@
 								<form method="post" action="{relative_path}/logout">
 									<input type="hidden" name="_csrf" value="{config.csrf_token}">
 									<input type="hidden" name="noscript" value="true">
-									<button type="submit"><i class="fa fa-fw fa-sign-out"></i><span> [[global:logout]]</span></button>
+									<button type="submit" class="btn btn-link">
+										<i class="fa fa-fw fa-sign-out"></i><span> [[global:logout]]</span>
+									</button>
 								</form>
 							</li>
 						</ul>