From ed67dc5de5d7b48b30b5b95ecd8cb8afd4098bf4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=A9r=C3=A9mie=20Astori?= <jeremie@astori.fr>
Date: Sun, 11 Mar 2018 17:20:51 -0400
Subject: [PATCH] Add logo to the sign in page

---
 client/css/style.css                          | 12 +++++-
 ...logo-vertical-transparent-bg-inverted.svg} |  0
 client/index.html.tpl                         |  4 +-
 client/themes/morning.css                     |  4 +-
 client/themes/zenburn.css                     |  4 +-
 client/views/windows/sign_in.tpl              | 37 ++++++++-----------
 6 files changed, 32 insertions(+), 29 deletions(-)
 rename client/img/{logo-vertical-transparent-dark.svg => logo-vertical-transparent-bg-inverted.svg} (100%)

diff --git a/client/css/style.css b/client/css/style.css
index 2c151cb6..865254d1 100644
--- a/client/css/style.css
+++ b/client/css/style.css
@@ -1553,19 +1553,21 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
 	align-items: center;
 	justify-content: center;
 	flex-direction: column;
+	width: 100%;
 }
 
 #loading-reload-container {
 	flex-grow: 0;
 }
 
-.loading-logo-dark {
-	display: none;
+.logo-inverted {
+	display: none; /* In dark themes, inverted logo must be used instead */
 }
 
 #sign-in label {
 	display: block;
 	margin-top: 10px;
+	width: 100%;
 }
 
 #sign-in .btn {
@@ -1574,7 +1576,9 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
 
 #sign-in .error {
 	color: #e74c3c;
+	display: none; /* This message gets displayed on error only */
 	margin-top: 1em;
+	width: 100%;
 }
 
 #connect label {
@@ -2332,6 +2336,10 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
 		margin: 10px 0 !important;
 	}
 
+	#sign-in .btn {
+		width: 100%;
+	}
+
 	#connect .tls {
 		margin: 20px 0;
 	}
diff --git a/client/img/logo-vertical-transparent-dark.svg b/client/img/logo-vertical-transparent-bg-inverted.svg
similarity index 100%
rename from client/img/logo-vertical-transparent-dark.svg
rename to client/img/logo-vertical-transparent-bg-inverted.svg
diff --git a/client/index.html.tpl b/client/index.html.tpl
index b2446019..cccd17cf 100644
--- a/client/index.html.tpl
+++ b/client/index.html.tpl
@@ -47,8 +47,8 @@
 			<article id="windows">
 				<div id="loading" class="window active">
 					<div id="loading-status-container">
-						<img src="img/logo-vertical-transparent-bg.svg" class="loading-logo-bright" alt="The Lounge" width="256" height="170">
-						<img src="img/logo-vertical-transparent-dark.svg" class="loading-logo-dark" alt="The Lounge" width="256" height="170">
+						<img src="img/logo-vertical-transparent-bg.svg" class="logo" alt="The Lounge" width="256" height="170">
+						<img src="img/logo-vertical-transparent-bg-inverted.svg" class="logo-inverted" alt="The Lounge" width="256" height="170">
 						<p id="loading-page-message"><a href="https://enable-javascript.com/" target="_blank" rel="noopener">Your JavaScript must be enabled.</a></p>
 					</div>
 					<div id="loading-reload-container">
diff --git a/client/themes/morning.css b/client/themes/morning.css
index 57caa68b..2da76313 100644
--- a/client/themes/morning.css
+++ b/client/themes/morning.css
@@ -22,11 +22,11 @@ body {
 	color: #ccc;
 }
 
-.loading-logo-bright {
+.logo {
 	display: none;
 }
 
-.loading-logo-dark {
+.logo-inverted {
 	display: inline-block;
 }
 
diff --git a/client/themes/zenburn.css b/client/themes/zenburn.css
index d9b6c4c5..66808418 100644
--- a/client/themes/zenburn.css
+++ b/client/themes/zenburn.css
@@ -23,11 +23,11 @@ body {
 	color: #dcdccc;
 }
 
-.loading-logo-bright {
+.logo {
 	display: none;
 }
 
-.loading-logo-dark {
+.logo-inverted {
 	display: inline-block;
 }
 
diff --git a/client/views/windows/sign_in.tpl b/client/views/windows/sign_in.tpl
index 2f0e2e5a..cb04b720 100644
--- a/client/views/windows/sign_in.tpl
+++ b/client/views/windows/sign_in.tpl
@@ -1,23 +1,18 @@
 <form class="container" method="post" action="">
-	<div class="row">
-		<div class="col-xs-12">
-			<h1 class="title">Sign in to The Lounge</h1>
-		</div>
-		<div class="col-xs-12">
-			<label>
-				Username
-				<input class="input" name="user" autofocus>
-			</label>
-		</div>
-		<div class="col-xs-12">
-			<label>
-				Password
-				<input class="input" type="password" name="password">
-			</label>
-		</div>
-		<div class="col-xs-12 error" style="display: none;">Authentication failed.</div>
-		<div class="col-xs-12">
-			<button type="submit" class="btn">Sign in</button>
-		</div>
-	</div>
+	<img src="img/logo-vertical-transparent-bg.svg" class="logo" alt="The Lounge" width="256" height="170">
+	<img src="img/logo-vertical-transparent-bg-inverted.svg" class="logo-inverted" alt="The Lounge" width="256" height="170">
+
+	<label>
+		Username
+		<input class="input" name="user" autofocus>
+	</label>
+
+	<label>
+		Password
+		<input class="input" type="password" name="password">
+	</label>
+
+	<div class="error">Authentication failed.</div>
+
+	<button type="submit" class="btn">Sign in</button>
 </form>