From 6201df072e5e6bcc2a8e5cfb4378fa2e1dafd153 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=A9r=C3=A9mie=20Astori?= <jeremie@astori.fr>
Date: Fri, 30 Mar 2018 02:07:11 -0400
Subject: [PATCH 1/7] Revamp default theme a bit

---
 client/css/style.css                          | 106 +++++++++---------
 ...ogo-horizontal-transparent-bg-inverted.svg |  61 ++++++++++
 client/index.html.tpl                         |   1 +
 client/themes/default.css                     |  38 +++----
 4 files changed, 129 insertions(+), 77 deletions(-)
 create mode 100644 client/img/logo-horizontal-transparent-bg-inverted.svg

diff --git a/client/css/style.css b/client/css/style.css
index 72961c8c..28d3442d 100644
--- a/client/css/style.css
+++ b/client/css/style.css
@@ -23,7 +23,7 @@ body {
 }
 
 body {
-	background: #455164;
+	background: #415364;
 	color: #222;
 	font: 16px -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
 	margin: 0;
@@ -185,11 +185,6 @@ kbd {
 	touch-action: pan-y;
 }
 
-#help .container,
-#changelog .container {
-	max-width: 600px;
-}
-
 #js-copy-hack,
 #loading pre,
 #help,
@@ -397,9 +392,8 @@ kbd {
 	color: #cfcfcf;
 	content: "\f002"; /* http://fontawesome.io/icon/search/ */
 	position: absolute;
-	right: 18px;
-	font-size: 14px;
-	line-height: 50px;
+	right: 13px;
+	line-height: 45px;
 }
 
 #settings .extra-experimental::before {
@@ -428,7 +422,6 @@ kbd {
 #viewport {
 	display: flex;
 	height: 100%;
-	overflow: hidden;
 }
 
 #windows {
@@ -437,19 +430,21 @@ kbd {
 }
 
 #form button,
-#chat .header button {
+.header button,
+.reveal-password span {
 	transition: opacity 0.2s;
 }
 
 #form button:hover,
-#chat .header button:hover {
+.header button:hover,
+.reveal-password span:hover {
 	opacity: 0.6;
 }
 
 #viewport .lt,
 #viewport .rt,
 #chat button.menu {
-	color: #ccc;
+	color: #607992;
 	display: flex;
 	font-size: 14px;
 	line-height: 1;
@@ -513,7 +508,7 @@ kbd {
 
 #sidebar .chan,
 #sidebar .empty {
-	color: #99a2b4;
+	color: #b7c5d1;
 	font-size: 14px;
 }
 
@@ -521,19 +516,40 @@ kbd {
 	display: none;
 }
 
-#sidebar button,
 #sidebar .chan {
 	cursor: pointer;
 }
 
+/* All sidebar buttons and channels/queries must be white on hover and active */
 #sidebar button:hover,
 #sidebar .chan:hover,
 #sidebar .active {
 	color: #fff;
 }
 
+/* All lobbies/channels/queries and footer buttons must have a half-transparent
+background on hover (unless active) */
+#sidebar .chan:hover,
+#footer button:hover {
+	background-color: rgba(48, 62, 74, 0.5); /* #303e4a x 50% alpha */
+}
+
+/* All active elements, hovered or not, must have a background */
+#sidebar .active,
+#sidebar .active:hover {
+	background-color: #303e4a;
+}
+
+/* Remove background on hovered/active channel when sorting/drag-and-dropping */
+#sidebar .ui-sortable-helper .chan.active, /* Networks */
+#sidebar .ui-sortable-helper .chan:hover,
+#sidebar .chan.ui-sortable-helper.active, /* Channels */
+#sidebar .chan.ui-sortable-helper:hover {
+	background-color: transparent;
+}
+
 #sidebar .networks {
-	padding-top: 20px;
+	padding-top: 5px;
 	touch-action: pan-y;
 	overscroll-behavior: contain;
 	-webkit-overflow-scrolling: touch;
@@ -549,7 +565,7 @@ kbd {
 #sidebar .network,
 #sidebar .network-placeholder {
 	position: relative;
-	margin-bottom: 30px;
+	margin-bottom: 20px;
 	touch-action: pan-y;
 }
 
@@ -564,7 +580,6 @@ kbd {
 #sidebar .chan-placeholder {
 	display: flex;
 	padding: 8px 14px;
-	transition: color 0.2s;
 }
 
 #sidebar .network-placeholder,
@@ -762,29 +777,19 @@ kbd {
 }
 
 #footer {
-	background: rgba(0, 0, 0, 0.06);
 	height: 45px;
 	font-size: 14px;
-	line-height: 45px;
-	text-align: center;
-	width: 220px;
 	flex-shrink: 0;
+	display: flex;
+	justify-content: center;
 }
 
-#footer button.active {
-	color: #fff;
-}
-
-#footer .icon {
-	color: #9ca5b4;
+#footer button {
+	color: #b7c5d1;
 	display: inline-block;
-	line-height: 34px;
-	padding: 0 12px;
-	transition: color 0.2s;
-}
-
-#footer .icon:hover {
-	color: #fff;
+	width: 45px;
+	height: 100%;
+	border-radius: 5px;
 }
 
 .signed-out #footer .sign-in {
@@ -893,8 +898,8 @@ kbd {
 }
 
 #windows .header {
-	line-height: 48px;
-	height: 48px;
+	line-height: 45px;
+	height: 45px;
 	padding: 0 6px;
 	display: flex;
 	flex-shrink: 0;
@@ -1463,7 +1468,7 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
 
 #chat .userlist .count {
 	background: #fafafa;
-	height: 48px;
+	height: 45px;
 	flex-shrink: 0;
 	position: relative;
 }
@@ -1474,7 +1479,7 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
 	background: none;
 	font: inherit;
 	outline: 0;
-	padding: 18px 16px;
+	padding: 13px;
 	width: 100%;
 }
 
@@ -1710,21 +1715,17 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
 .password-container .reveal-password span {
 	font: normal normal normal 14px/1 FontAwesome;
 	font-size: 16px;
-	color: #cdd3da;
+	color: #607992;
 	width: 37px;
 	height: 37px;
 	display: flex;
 	justify-content: center;
 	align-items: center;
-}
-
-.password-container .reveal-password span:hover {
-	color: #79838c;
+	cursor: pointer;
 }
 
 .password-container .reveal-password span::before {
 	content: "\f06e"; /* https://fontawesome.com/icons/eye?style=solid */
-	transition: color 0.2s;
 }
 
 .password-container .reveal-password.visible span::before {
@@ -1864,17 +1865,15 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
 }
 
 #form {
-	background: #eee;
-	border-top: 1px solid #ddd;
 	flex: 0 0 auto;
-	padding: 5px;
 }
 
 #windows #form .input {
-	border: 1px solid #ddd;
-	border-radius: 2px;
+	border: 0;
+	border-top: 1px solid #e7e7e7;
+	border-radius: 0;
 	margin: 0;
-	padding: 0;
+	padding: 6px;
 	background: white;
 	display: flex;
 	align-items: flex-end;
@@ -1930,10 +1929,9 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
 }
 
 #form #submit {
-	color: #9ca5b4;
+	color: #607992;
 	font-size: 14px;
 	height: 32px;
-	transition: opacity 0.2s;
 	width: 32px;
 	flex: 0 0 auto;
 }
@@ -2292,7 +2290,7 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
 	}
 
 	#sidebar {
-		background: #455164;
+		background: #415364;
 		height: 100%;
 		position: absolute;
 		left: -220px;
diff --git a/client/img/logo-horizontal-transparent-bg-inverted.svg b/client/img/logo-horizontal-transparent-bg-inverted.svg
new file mode 100644
index 00000000..561a7824
--- /dev/null
+++ b/client/img/logo-horizontal-transparent-bg-inverted.svg
@@ -0,0 +1,61 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Livello_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 838 276" style="enable-background:new 0 0 838 276;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FF9E18;}
+	.st1{fill:#FFFFFF;}
+</style>
+<g>
+	<g>
+		<g>
+			<g>
+				<path class="st0" d="M319.5,100l0,76.1c0,0.7-0.4,1.3-0.9,1.6l-65.8,37.7c-0.6,0.3-1.3,0.3-1.8,0l-66.1-38
+					c-0.6-0.3-0.9-0.9-0.9-1.6l0-66.8c0-0.7-0.4-1.3-0.9-1.6L164.9,97c-1.2-0.7-2.8,0.2-2.8,1.6v84.5c0,3.9,2.1,7.6,5.5,9.5
+					l78.7,45.1c3.4,2,7.6,2,11.1,0l78.4-44.9c3.4-2,5.5-5.6,5.5-9.5V92.7c0-3.9-2.1-7.6-5.5-9.5l-78.4-44.9c-3.4-2-7.6-2-11.1,0
+					l-36.3,20.8c-1.2,0.7-1.2,2.5,0,3.2l18.2,10.4c0.6,0.3,1.3,0.3,1.8,0l20.9-12c0.6-0.3,1.3-0.3,1.8,0l65.8,37.7
+					C319.2,98.7,319.5,99.3,319.5,100z"/>
+				<ellipse class="st1" cx="288.9" cy="138.4" rx="12.4" ry="12.4"/>
+				<ellipse class="st1" cx="249.3" cy="138.4" rx="12.4" ry="12.4"/>
+			</g>
+			<g>
+				<path class="st1" d="M64,176l0-76.1c0-0.7,0.4-1.3,0.9-1.6l65.8-37.7c0.6-0.3,1.3-0.3,1.8,0l66.1,38c0.6,0.3,0.9,0.9,0.9,1.6
+					l0,66.8c0,0.7,0.4,1.3,0.9,1.6l18.1,10.4c1.2,0.7,2.8-0.2,2.8-1.6V92.9c0-3.9-2.1-7.6-5.5-9.5l-78.7-45.1c-3.4-2-7.6-2-11.1,0
+					L47.7,83.1c-3.4,2-5.5,5.6-5.5,9.5v90.6c0,3.9,2.1,7.6,5.5,9.5l78.4,44.9c3.4,2,7.6,2,11.1,0l36.3-20.8c1.2-0.7,1.2-2.5,0-3.2
+					l-18.2-10.4c-0.6-0.3-1.3-0.3-1.8,0l-20.9,12c-0.6,0.3-1.3,0.3-1.8,0l-65.8-37.7C64.3,177.3,64,176.7,64,176z"/>
+				<ellipse class="st0" cx="94.6" cy="137.6" rx="12.4" ry="12.4"/>
+				<ellipse class="st0" cx="134.2" cy="137.6" rx="12.4" ry="12.4"/>
+			</g>
+		</g>
+	</g>
+	<g>
+		<g>
+			<polygon class="st0" points="362.9,121.4 378.1,121.4 378.1,162.2 389.6,162.2 389.6,121.4 404.9,121.4 404.9,111.9 362.9,111.9
+							"/>
+			<polygon class="st0" points="446.5,132 424.4,132 424.4,111.9 413.2,111.9 413.2,162.3 424.4,162.3 424.4,141.4 446.5,141.4
+				446.5,162.3 457.7,162.3 457.7,111.9 446.5,111.9 			"/>
+			<polygon class="st0" points="500.7,121 500.7,111.9 466.2,111.9 466.2,162.3 500.7,162.3 500.7,153.2 477.4,153.2 477.4,141.3
+				499.2,141.3 499.2,132.1 477.4,132.1 477.4,121 			"/>
+		</g>
+		<g>
+			<polygon class="st1" points="520.6,111.9 509.2,111.9 509.2,162.3 542.5,162.3 542.5,152.8 520.6,152.8 			"/>
+			<path class="st1" d="M585.8,115c-3.8-2.1-8.4-3.1-13.6-3.1c-5.2,0-9.8,1-13.6,3.1c-3.9,2.1-6.9,5-9,8.8
+				c-2.1,3.8-3.1,8.3-3.1,13.4c0,5.1,1.1,9.6,3.1,13.4c2.1,3.8,5.1,6.8,9,8.9c3.9,2.1,8.4,3.1,13.6,3.1c5.2,0,9.8-1,13.6-3.1
+				c3.8-2.1,6.8-5,8.9-8.9c2.1-3.8,3.1-8.3,3.1-13.4c0-5.1-1-9.6-3.1-13.4C592.6,120,589.6,117.1,585.8,115z M585.8,137.2
+				c0,5.3-1.2,9.4-3.6,12.2c-2.4,2.8-5.7,4.2-10,4.2c-4.3,0-7.6-1.4-10-4.2c-2.4-2.8-3.6-6.9-3.6-12.2c0-5.3,1.2-9.4,3.6-12.1
+				c2.4-2.7,5.7-4.1,10-4.1c4.2,0,7.6,1.4,10,4.1C584.6,127.8,585.8,131.9,585.8,137.2z"/>
+			<path class="st1" d="M637.7,141.6c0,3.8-0.9,6.7-2.6,8.7c-1.7,2-4.3,2.9-7.6,2.9c-3.3,0-5.9-1-7.6-2.9c-1.8-2-2.6-4.9-2.6-8.7
+				V112H606v29.1c0,6.9,1.8,12.2,5.5,15.8c3.6,3.6,9,5.4,16,5.4c6.9,0,12.3-1.8,16-5.4c3.7-3.6,5.5-8.9,5.5-15.8V112h-11.3V141.6z"
+				/>
+			<polygon class="st1" points="690.1,142.9 665.8,111.9 657.2,111.9 657.2,162.3 668.1,162.3 668.1,131.3 692.3,162.2 692.4,162.3
+				701,162.3 701,111.9 690.1,111.9 			"/>
+			<path class="st1" d="M733.4,142.4h9.6v10.1c-2.6,0.6-5.2,0.9-7.8,0.9c-9.7,0-14.5-5.3-14.5-16.3c0-10.8,4.5-16,13.8-16
+				c2.5,0,4.8,0.4,6.9,1.1c2.1,0.7,4.3,1.9,6.6,3.5l0.3,0.2l3.7-8.2l-0.2-0.2c-2-1.7-4.6-3.1-7.7-4.1c-3.1-1-6.4-1.4-10-1.4
+				c-5,0-9.5,1-13.3,3.1c-3.8,2-6.7,5-8.8,8.7c-2.1,3.8-3.1,8.2-3.1,13.3c0,5.2,1,9.7,3.1,13.5c2.1,3.8,5.1,6.7,8.9,8.7
+				c3.8,2,8.4,3,13.6,3c3.4,0,6.7-0.3,9.9-1c3.2-0.6,6-1.5,8.4-2.7l0.2-0.1v-24.3h-19.9V142.4z"/>
+			<polygon class="st1" points="795.8,121 795.8,111.9 761.9,111.9 761.9,162.4 795.8,162.4 795.8,153.2 772.9,153.2 772.9,141.3
+				794.4,141.3 794.4,132.1 772.9,132.1 772.9,121 			"/>
+		</g>
+	</g>
+</g>
+</svg>
diff --git a/client/index.html.tpl b/client/index.html.tpl
index 7ecf4569..1d942654 100644
--- a/client/index.html.tpl
+++ b/client/index.html.tpl
@@ -50,6 +50,7 @@
 	<body class="signed-out<%- public ? " public" : "" %>" data-transports="<%- JSON.stringify(transports) %>">
 		<div id="viewport" role="tablist">
 			<aside id="sidebar">
+				<img src="img/logo-horizontal-transparent-bg-inverted.svg" class="logo" alt="The Lounge" height="45">
 				<div class="networks"></div>
 				<div class="empty">
 					You're not connected to any networks yet.
diff --git a/client/themes/default.css b/client/themes/default.css
index a9d48cf4..9b3c0ee6 100644
--- a/client/themes/default.css
+++ b/client/themes/default.css
@@ -1,43 +1,35 @@
-body {
-	padding: 4px;
+#viewport {
+	padding: 5px;
 	padding-left: 0;
 }
 
-#footer {
-	margin-left: 4px;
-	border-radius: 2px;
-	width: 216px;
+#viewport.menu-open { /* On desktop view, .menu-open means menu is closed... */
+	padding-left: 5px;
 }
 
-#windows .window::before {
-	background: #f4f4f4;
-	background-image: linear-gradient(#f4f4f4, #ececec);
-	border-bottom: 1px solid #d7d7d7;
-	content: " ";
-	display: block;
-	height: 10px;
-	position: relative;
-	z-index: 10;
-	flex-shrink: 0;
+#viewport #loading, /* ... except on pages without a menu */
+#viewport #sign-in {
+	margin-left: 5px;
 }
 
 #windows .window {
-	border-radius: 2px;
+	border-radius: 5px;
+	box-shadow: 0 0 25px rgba(0, 0, 0, 0.5);
 }
 
 @media (max-width: 768px) {
-	body {
+	#viewport,
+	#viewport.menu-open {
 		padding: 0;
 	}
 
-	#footer {
+	#viewport #loading,
+	#viewport #sign-in {
 		margin-left: 0;
-		border-radius: 0;
-		width: inherit;
 	}
 
-	#windows .window::before {
-		display: none;
+	#footer .icon {
+		border-radius: 0;
 	}
 
 	#windows .window {

From 0e50cb4f06f5dfdb167e714ad3a3a213e3dac1f5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=A9r=C3=A9mie=20Astori?= <jeremie@astori.fr>
Date: Sun, 1 Apr 2018 19:28:44 -0400
Subject: [PATCH 2/7] Add normal version of logo for themes with light sidebars

---
 client/css/style.css                          | 11 +++-
 client/img/logo-horizontal-transparent-bg.svg | 61 +++++++++++++++++++
 client/index.html.tpl                         |  3 +-
 client/themes/morning.css                     |  4 +-
 4 files changed, 75 insertions(+), 4 deletions(-)
 create mode 100644 client/img/logo-horizontal-transparent-bg.svg

diff --git a/client/css/style.css b/client/css/style.css
index 28d3442d..618c218e 100644
--- a/client/css/style.css
+++ b/client/css/style.css
@@ -501,6 +501,15 @@ kbd {
 	width: 220px;
 }
 
+#sidebar .logo,
+#sidebar .logo-inverted {
+	height: 45px;
+}
+
+#sidebar .logo {
+	display: none;
+}
+
 #viewport.menu-open #sidebar {
 	display: none;
 	will-change: transform;
@@ -1583,7 +1592,7 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
 	flex-grow: 0;
 }
 
-.logo-inverted {
+#windows .logo-inverted {
 	display: none; /* In dark themes, inverted logo must be used instead */
 }
 
diff --git a/client/img/logo-horizontal-transparent-bg.svg b/client/img/logo-horizontal-transparent-bg.svg
new file mode 100644
index 00000000..58ed1982
--- /dev/null
+++ b/client/img/logo-horizontal-transparent-bg.svg
@@ -0,0 +1,61 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Livello_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 838 276" style="enable-background:new 0 0 838 276;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FF9E18;}
+	.st1{fill:#415364;}
+</style>
+<g>
+	<g>
+		<g>
+			<g>
+				<path class="st0" d="M319.5,100l0,76.1c0,0.7-0.4,1.3-0.9,1.6l-65.8,37.7c-0.6,0.3-1.3,0.3-1.8,0l-66.1-38
+					c-0.6-0.3-0.9-0.9-0.9-1.6l0-66.8c0-0.7-0.4-1.3-0.9-1.6L164.9,97c-1.2-0.7-2.8,0.2-2.8,1.6v84.5c0,3.9,2.1,7.6,5.5,9.5
+					l78.7,45.1c3.4,2,7.6,2,11.1,0l78.4-44.9c3.4-2,5.5-5.6,5.5-9.5V92.7c0-3.9-2.1-7.6-5.5-9.5l-78.4-44.9c-3.4-2-7.6-2-11.1,0
+					l-36.3,20.8c-1.2,0.7-1.2,2.5,0,3.2l18.2,10.4c0.6,0.3,1.3,0.3,1.8,0l20.9-12c0.6-0.3,1.3-0.3,1.8,0l65.8,37.7
+					C319.2,98.7,319.5,99.3,319.5,100z"/>
+				<ellipse class="st1" cx="288.9" cy="138.4" rx="12.4" ry="12.4"/>
+				<ellipse class="st1" cx="249.3" cy="138.4" rx="12.4" ry="12.4"/>
+			</g>
+			<g>
+				<path class="st1" d="M64,176l0-76.1c0-0.7,0.4-1.3,0.9-1.6l65.8-37.7c0.6-0.3,1.3-0.3,1.8,0l66.1,38c0.6,0.3,0.9,0.9,0.9,1.6
+					l0,66.8c0,0.7,0.4,1.3,0.9,1.6l18.1,10.4c1.2,0.7,2.8-0.2,2.8-1.6V92.9c0-3.9-2.1-7.6-5.5-9.5l-78.7-45.1c-3.4-2-7.6-2-11.1,0
+					L47.7,83.1c-3.4,2-5.5,5.6-5.5,9.5v90.6c0,3.9,2.1,7.6,5.5,9.5l78.4,44.9c3.4,2,7.6,2,11.1,0l36.3-20.8c1.2-0.7,1.2-2.5,0-3.2
+					l-18.2-10.4c-0.6-0.3-1.3-0.3-1.8,0l-20.9,12c-0.6,0.3-1.3,0.3-1.8,0l-65.8-37.7C64.3,177.3,64,176.7,64,176z"/>
+				<ellipse class="st0" cx="94.6" cy="137.6" rx="12.4" ry="12.4"/>
+				<ellipse class="st0" cx="134.2" cy="137.6" rx="12.4" ry="12.4"/>
+			</g>
+		</g>
+	</g>
+	<g>
+		<g>
+			<polygon class="st0" points="362.9,121.4 378.1,121.4 378.1,162.2 389.6,162.2 389.6,121.4 404.9,121.4 404.9,111.9 362.9,111.9 
+							"/>
+			<polygon class="st0" points="446.5,132 424.4,132 424.4,111.9 413.2,111.9 413.2,162.3 424.4,162.3 424.4,141.4 446.5,141.4 
+				446.5,162.3 457.7,162.3 457.7,111.9 446.5,111.9 			"/>
+			<polygon class="st0" points="500.7,121 500.7,111.9 466.2,111.9 466.2,162.3 500.7,162.3 500.7,153.2 477.4,153.2 477.4,141.3 
+				499.2,141.3 499.2,132.1 477.4,132.1 477.4,121 			"/>
+		</g>
+		<g>
+			<polygon class="st1" points="520.6,111.9 509.2,111.9 509.2,162.3 542.5,162.3 542.5,152.8 520.6,152.8 			"/>
+			<path class="st1" d="M585.8,115c-3.8-2.1-8.4-3.1-13.6-3.1c-5.2,0-9.8,1-13.6,3.1c-3.9,2.1-6.9,5-9,8.8
+				c-2.1,3.8-3.1,8.3-3.1,13.4c0,5.1,1.1,9.6,3.1,13.4c2.1,3.8,5.1,6.8,9,8.9c3.9,2.1,8.4,3.1,13.6,3.1c5.2,0,9.8-1,13.6-3.1
+				c3.8-2.1,6.8-5,8.9-8.9c2.1-3.8,3.1-8.3,3.1-13.4c0-5.1-1-9.6-3.1-13.4C592.6,120,589.6,117.1,585.8,115z M585.8,137.2
+				c0,5.3-1.2,9.4-3.6,12.2c-2.4,2.8-5.7,4.2-10,4.2c-4.3,0-7.6-1.4-10-4.2c-2.4-2.8-3.6-6.9-3.6-12.2c0-5.3,1.2-9.4,3.6-12.1
+				c2.4-2.7,5.7-4.1,10-4.1c4.2,0,7.6,1.4,10,4.1C584.6,127.8,585.8,131.9,585.8,137.2z"/>
+			<path class="st1" d="M637.7,141.6c0,3.8-0.9,6.7-2.6,8.7c-1.7,2-4.3,2.9-7.6,2.9c-3.3,0-5.9-1-7.6-2.9c-1.8-2-2.6-4.9-2.6-8.7
+				V112H606v29.1c0,6.9,1.8,12.2,5.5,15.8c3.6,3.6,9,5.4,16,5.4c6.9,0,12.3-1.8,16-5.4c3.7-3.6,5.5-8.9,5.5-15.8V112h-11.3V141.6z"
+				/>
+			<polygon class="st1" points="690.1,142.9 665.8,111.9 657.2,111.9 657.2,162.3 668.1,162.3 668.1,131.3 692.3,162.2 692.4,162.3 
+				701,162.3 701,111.9 690.1,111.9 			"/>
+			<path class="st1" d="M733.4,142.4h9.6v10.1c-2.6,0.6-5.2,0.9-7.8,0.9c-9.7,0-14.5-5.3-14.5-16.3c0-10.8,4.5-16,13.8-16
+				c2.5,0,4.8,0.4,6.9,1.1c2.1,0.7,4.3,1.9,6.6,3.5l0.3,0.2l3.7-8.2l-0.2-0.2c-2-1.7-4.6-3.1-7.7-4.1c-3.1-1-6.4-1.4-10-1.4
+				c-5,0-9.5,1-13.3,3.1c-3.8,2-6.7,5-8.8,8.7c-2.1,3.8-3.1,8.2-3.1,13.3c0,5.2,1,9.7,3.1,13.5c2.1,3.8,5.1,6.7,8.9,8.7
+				c3.8,2,8.4,3,13.6,3c3.4,0,6.7-0.3,9.9-1c3.2-0.6,6-1.5,8.4-2.7l0.2-0.1v-24.3h-19.9V142.4z"/>
+			<polygon class="st1" points="795.8,121 795.8,111.9 761.9,111.9 761.9,162.4 795.8,162.4 795.8,153.2 772.9,153.2 772.9,141.3 
+				794.4,141.3 794.4,132.1 772.9,132.1 772.9,121 			"/>
+		</g>
+	</g>
+</g>
+</svg>
diff --git a/client/index.html.tpl b/client/index.html.tpl
index 1d942654..97fd904a 100644
--- a/client/index.html.tpl
+++ b/client/index.html.tpl
@@ -50,7 +50,8 @@
 	<body class="signed-out<%- public ? " public" : "" %>" data-transports="<%- JSON.stringify(transports) %>">
 		<div id="viewport" role="tablist">
 			<aside id="sidebar">
-				<img src="img/logo-horizontal-transparent-bg-inverted.svg" class="logo" alt="The Lounge" height="45">
+				<img src="img/logo-horizontal-transparent-bg.svg" class="logo" alt="The Lounge">
+				<img src="img/logo-horizontal-transparent-bg-inverted.svg" class="logo-inverted" alt="The Lounge">
 				<div class="networks"></div>
 				<div class="empty">
 					You're not connected to any networks yet.
diff --git a/client/themes/morning.css b/client/themes/morning.css
index d9e6570e..a58ba403 100644
--- a/client/themes/morning.css
+++ b/client/themes/morning.css
@@ -6,11 +6,11 @@ body {
 	color: #ccc;
 }
 
-.logo {
+#windows .logo {
 	display: none;
 }
 
-.logo-inverted {
+#windows .logo-inverted {
 	display: inline-block;
 }
 

From ad3688e61de931947da522afdbe8b7e6db713eb8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=A9r=C3=A9mie=20Astori?= <jeremie@astori.fr>
Date: Tue, 3 Apr 2018 01:11:42 -0400
Subject: [PATCH 3/7] Update Morning to be an exact dark version of default
 theme

---
 client/themes/morning.css | 134 ++++++++++++++++++++++----------------
 1 file changed, 77 insertions(+), 57 deletions(-)

diff --git a/client/themes/morning.css b/client/themes/morning.css
index a58ba403..dbeccc1a 100644
--- a/client/themes/morning.css
+++ b/client/themes/morning.css
@@ -1,9 +1,11 @@
+@import 'default.css';
+
 :root {
-	--link-color: #428bca;
+	--link-color: #77abd9;
 }
 
 body {
-	color: #ccc;
+	color: #f3f3f3;
 }
 
 #windows .logo {
@@ -18,16 +20,19 @@ body {
 #chat .userlist,
 #windows .chan,
 #windows .window {
-	background: #333c4a;
+	background: #303e4a;
 }
 
 #chat .userlist .count {
-	background-color: #2e3642;
+	background-color: #28333d;
+}
+
+#chat .count::before {
+	color: #b7c5d1;
 }
 
 #chat .userlist .search {
-	color: #ccc;
-	padding: 15px 16px;
+	color: #f3f3f3;
 }
 
 /* Borders */
@@ -35,16 +40,16 @@ body {
 #windows #chat .header,
 #chat .user-mode::before,
 #chat .userlist {
-	border-color: #2a323d;
+	border-color: #28333d;
 }
 
 /* User list */
 #chat .user-mode {
-	color: #fefefe;
+	color: #f3f3f3;
 }
 
 #chat .userlist .user.active {
-	background-color: #242a33;
+	background-color: #28333d;
 }
 
 /* Nicknames */
@@ -55,16 +60,16 @@ body {
 #chat.colored-nicks .user.color-1 { color: #f7adf7; }
 #chat.colored-nicks .user.color-2 { color: #abf99f; }
 #chat.colored-nicks .user.color-3 { color: #86efdc; }
-#chat.colored-nicks .user.color-4 { color: #b76ee5; }
+#chat.colored-nicks .user.color-4 { color: #c890eb; }
 #chat.colored-nicks .user.color-5 { color: #f9a4b3; }
 #chat.colored-nicks .user.color-6 { color: #f7999a; }
 #chat.colored-nicks .user.color-7 { color: #f497b9; }
 #chat.colored-nicks .user.color-8 { color: #f9a9d7; }
-#chat.colored-nicks .user.color-9 { color: #7fa2e2; }
+#chat.colored-nicks .user.color-9 { color: #85a7e3; }
 #chat.colored-nicks .user.color-10 { color: #a8b8ff; }
-#chat.colored-nicks .user.color-11 { color: #ad88fc; }
+#chat.colored-nicks .user.color-11 { color: #b695fc; }
 #chat.colored-nicks .user.color-12 { color: #f4aead; }
-#chat.colored-nicks .user.color-13 { color: #fc71ab; }
+#chat.colored-nicks .user.color-13 { color: #fc7cb1; }
 #chat.colored-nicks .user.color-14 { color: #ff72e0; }
 #chat.colored-nicks .user.color-15 { color: #8cb6ea; }
 #chat.colored-nicks .user.color-16 { color: #f9857c; }
@@ -72,7 +77,7 @@ body {
 #chat.colored-nicks .user.color-18 { color: #8df484; }
 #chat.colored-nicks .user.color-19 { color: #ffcce3; }
 #chat.colored-nicks .user.color-20 { color: #efcc81; }
-#chat.colored-nicks .user.color-21 { color: #90a1ed; }
+#chat.colored-nicks .user.color-21 { color: #92a2ed; }
 #chat.colored-nicks .user.color-22 { color: #f4d484; }
 #chat.colored-nicks .user.color-23 { color: #97ea70; }
 #chat.colored-nicks .user.color-24 { color: #fcbbba; }
@@ -80,8 +85,8 @@ body {
 #chat.colored-nicks .user.color-26 { color: #c7ff93; }
 #chat.colored-nicks .user.color-27 { color: #ffade1; }
 #chat.colored-nicks .user.color-28 { color: #98ecf2; }
-#chat.colored-nicks .user.color-29 { color: #7187f2; }
-#chat.colored-nicks .user.color-30 { color: #9676e2; }
+#chat.colored-nicks .user.color-29 { color: #91a2f5; }
+#chat.colored-nicks .user.color-30 { color: #b19aea; }
 #chat.colored-nicks .user.color-31 { color: #f2a4eb; }
 #chat.colored-nicks .user.color-32 { color: #85f27d; }
 
@@ -91,37 +96,52 @@ body {
 .irc-fg12 { color: #50a8ff; }
 
 /* Message form */
-#form {
-	background: #2a323d;
-	border-color: #242a33;
-}
-
 #windows #form .input {
-	background-color: #2e3642 !important;
-	border-color: #242a33 !important;
-	color: #ccc;
+	background-color: #28333d;
+	border-color: #28333d;
+	color: #f3f3f3;
 }
 
 #form #nick {
 	background: #242a33;
-	color: #ccc;
+	color: #f3f3f3;
 }
 
-#form #submit:hover {
-	opacity: 1;
+#windows .window {
+	box-shadow: 0 0 25px rgba(0, 0, 0, 0.75);
 }
 
-#chat .header {
-	color: #99a2b4;
+#windows .window h2 {
+	color: #b7c5d1;
+}
+
+#windows .header {
+	color: #fff;
+}
+
+#windows .header .topic {
+	color: #b7c5d1;
+}
+
+#viewport .lt,
+#viewport .rt,
+#chat button.menu,
+#form #submit {
+	color: #b7c5d1;
 }
 
 /* Notification dot on the top right corner of the menu icon */
 #viewport .lt::after {
-	border-color: #333c4a;
+	border-color: #303e4a;
 }
 
 #chat .unread-marker-text::before {
-	background-color: #333c4a;
+	background-color: #303e4a;
+	border-color: #f92772;
+}
+
+#chat .unread-marker::before {
+	border-color: #f92772;
 }
 
 #chat .date-marker::before {
@@ -129,21 +149,17 @@ body {
 }
 
 #chat .date-marker-text::before {
-	background-color: #333c4a;
+	background-color: #303e4a;
 	color: #97ea70;
 }
 
 /* Setup text colors */
-#chat .msg {
+#chat .message {
 	color: #f3f3f3;
 }
 
-#chat .message {
-	color: #fefefe;
-}
-
 #chat .self .text {
-	color: #99a2b4;
+	color: #b7c5d1;
 }
 
 #chat .error,
@@ -155,30 +171,34 @@ body {
 }
 
 #chat .unhandled .from {
-	color: #99a2b4;
-}
-
-#chat .msg.quit .time,
-#chat .msg.quit .from button {
-	color: #d0907d !important;
+	color: #b7c5d1;
 }
 
 #chat .msg.topic {
-	color: #fefefe;
+	color: #b7c5d1;
 }
 
-#chat .msg.join .time,
-#chat .msg.join .from button {
-	color: #84ce88 !important;
+#chat .condensed .content,
+#chat .away .content,
+#chat .back .content,
+#chat .join .content,
+#chat .kick .content,
+#chat .mode .content,
+#chat .nick .content,
+#chat .part .content,
+#chat .quit .content,
+#chat .topic .content,
+#chat .topic_set_by .content {
+	color: #b7c5d1;
 }
 
 #chat table.channel-list td {
-	color: #ccc;
+	color: #b7c5d1;
 }
 
 code,
 .irc-monospace {
-	background: #242a33;
+	background: #28333d;
 	color: #f3f3f3;
 }
 
@@ -193,7 +213,7 @@ kbd {
 
 /* Embeds */
 #chat .toggle-content {
-	background: #242a33;
+	background: #28333d;
 	color: #f3f3f3;
 }
 
@@ -204,18 +224,18 @@ kbd {
 /* Form elements */
 
 #chat-container ::-moz-placeholder {
-	color: #99a2b4;
-	opacity: 0.5;
+	color: #b7c5d1;
+	opacity: 0.75;
 }
 
 #chat-container ::-webkit-input-placeholder {
-	color: #99a2b4;
-	opacity: 0.5;
+	color: #b7c5d1;
+	opacity: 0.75;
 }
 
 #chat-container :-ms-input-placeholder {
-	color: #99a2b4;
-	opacity: 0.5;
+	color: #b7c5d1;
+	opacity: 0.75;
 }
 
 /* End form elements */

From a97aa5968949cc9691b528c84121bacb247dda6c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=A9r=C3=A9mie=20Astori?= <jeremie@astori.fr>
Date: Fri, 13 Apr 2018 02:14:19 -0400
Subject: [PATCH 4/7] Display full logo+text on public mode, logo-only on
 private mode

---
 client/img/logo-transparent-bg-inverted.svg | 32 +++++++++++++++++++++
 client/img/logo-transparent-bg.svg          | 32 +++++++++++++++++++++
 client/index.html.tpl                       |  4 +--
 3 files changed, 66 insertions(+), 2 deletions(-)
 create mode 100644 client/img/logo-transparent-bg-inverted.svg
 create mode 100644 client/img/logo-transparent-bg.svg

diff --git a/client/img/logo-transparent-bg-inverted.svg b/client/img/logo-transparent-bg-inverted.svg
new file mode 100644
index 00000000..836d59e4
--- /dev/null
+++ b/client/img/logo-transparent-bg-inverted.svg
@@ -0,0 +1,32 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Livello_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 386 276" style="enable-background:new 0 0 386 276;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FF9E18;}
+	.st1{fill:#FFFFFF;}
+</style>
+<g>
+	<g>
+		<g>
+			<g>
+				<path class="st0" d="M320.1,100l0,76.1c0,0.7-0.4,1.3-0.9,1.6l-65.8,37.7c-0.6,0.3-1.3,0.3-1.8,0l-66.1-38
+					c-0.6-0.3-0.9-0.9-0.9-1.6l0-66.8c0-0.7-0.4-1.3-0.9-1.6L165.5,97c-1.2-0.7-2.8,0.2-2.8,1.6v84.5c0,3.9,2.1,7.6,5.5,9.5
+					l78.7,45.1c3.4,2,7.6,2,11.1,0l78.4-44.9c3.4-2,5.5-5.6,5.5-9.5V92.7c0-3.9-2.1-7.6-5.5-9.5l-78.4-44.9c-3.4-2-7.6-2-11.1,0
+					l-36.3,20.8c-1.2,0.7-1.2,2.5,0,3.2l18.2,10.4c0.6,0.3,1.3,0.3,1.8,0l20.9-12c0.6-0.3,1.3-0.3,1.8,0l65.8,37.7
+					C319.8,98.7,320.1,99.3,320.1,100z"/>
+				<ellipse class="st1" cx="289.6" cy="138.4" rx="12.4" ry="12.4"/>
+				<ellipse class="st1" cx="249.9" cy="138.4" rx="12.4" ry="12.4"/>
+			</g>
+			<g>
+				<path class="st1" d="M64.6,176l0-76.1c0-0.7,0.4-1.3,0.9-1.6l65.8-37.7c0.6-0.3,1.3-0.3,1.8,0l66.1,38c0.6,0.3,0.9,0.9,0.9,1.6
+					l0,66.8c0,0.7,0.4,1.3,0.9,1.6l18.1,10.4c1.2,0.7,2.8-0.2,2.8-1.6V92.9c0-3.9-2.1-7.6-5.5-9.5l-78.7-45.1c-3.4-2-7.6-2-11.1,0
+					L48.3,83.1c-3.4,2-5.5,5.6-5.5,9.5v90.6c0,3.9,2.1,7.6,5.5,9.5l78.4,44.9c3.4,2,7.6,2,11.1,0l36.3-20.8c1.2-0.7,1.2-2.5,0-3.2
+					l-18.2-10.4c-0.6-0.3-1.3-0.3-1.8,0l-20.9,12c-0.6,0.3-1.3,0.3-1.8,0l-65.8-37.7C65,177.3,64.6,176.7,64.6,176z"/>
+				<ellipse class="st0" cx="95.2" cy="137.6" rx="12.4" ry="12.4"/>
+				<ellipse class="st0" cx="134.9" cy="137.6" rx="12.4" ry="12.4"/>
+			</g>
+		</g>
+	</g>
+</g>
+</svg>
diff --git a/client/img/logo-transparent-bg.svg b/client/img/logo-transparent-bg.svg
new file mode 100644
index 00000000..9daaf865
--- /dev/null
+++ b/client/img/logo-transparent-bg.svg
@@ -0,0 +1,32 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Livello_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 386 276" style="enable-background:new 0 0 386 276;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FF9E18;}
+	.st1{fill:#415364;}
+</style>
+<g>
+	<g>
+		<g>
+			<g>
+				<path class="st0" d="M320.1,100l0,76.1c0,0.7-0.4,1.3-0.9,1.6l-65.8,37.7c-0.6,0.3-1.3,0.3-1.8,0l-66.1-38
+					c-0.6-0.3-0.9-0.9-0.9-1.6l0-66.8c0-0.7-0.4-1.3-0.9-1.6L165.5,97c-1.2-0.7-2.8,0.2-2.8,1.6v84.5c0,3.9,2.1,7.6,5.5,9.5
+					l78.7,45.1c3.4,2,7.6,2,11.1,0l78.4-44.9c3.4-2,5.5-5.6,5.5-9.5V92.7c0-3.9-2.1-7.6-5.5-9.5l-78.4-44.9c-3.4-2-7.6-2-11.1,0
+					l-36.3,20.8c-1.2,0.7-1.2,2.5,0,3.2l18.2,10.4c0.6,0.3,1.3,0.3,1.8,0l20.9-12c0.6-0.3,1.3-0.3,1.8,0l65.8,37.7
+					C319.8,98.7,320.1,99.3,320.1,100z"/>
+				<ellipse class="st1" cx="289.6" cy="138.4" rx="12.4" ry="12.4"/>
+				<ellipse class="st1" cx="249.9" cy="138.4" rx="12.4" ry="12.4"/>
+			</g>
+			<g>
+				<path class="st1" d="M64.6,176l0-76.1c0-0.7,0.4-1.3,0.9-1.6l65.8-37.7c0.6-0.3,1.3-0.3,1.8,0l66.1,38c0.6,0.3,0.9,0.9,0.9,1.6
+					l0,66.8c0,0.7,0.4,1.3,0.9,1.6l18.1,10.4c1.2,0.7,2.8-0.2,2.8-1.6V92.9c0-3.9-2.1-7.6-5.5-9.5l-78.7-45.1c-3.4-2-7.6-2-11.1,0
+					L48.3,83.1c-3.4,2-5.5,5.6-5.5,9.5v90.6c0,3.9,2.1,7.6,5.5,9.5l78.4,44.9c3.4,2,7.6,2,11.1,0l36.3-20.8c1.2-0.7,1.2-2.5,0-3.2
+					l-18.2-10.4c-0.6-0.3-1.3-0.3-1.8,0l-20.9,12c-0.6,0.3-1.3,0.3-1.8,0l-65.8-37.7C65,177.3,64.6,176.7,64.6,176z"/>
+				<ellipse class="st0" cx="95.2" cy="137.6" rx="12.4" ry="12.4"/>
+				<ellipse class="st0" cx="134.9" cy="137.6" rx="12.4" ry="12.4"/>
+			</g>
+		</g>
+	</g>
+</g>
+</svg>
diff --git a/client/index.html.tpl b/client/index.html.tpl
index 97fd904a..ad8497d0 100644
--- a/client/index.html.tpl
+++ b/client/index.html.tpl
@@ -50,8 +50,8 @@
 	<body class="signed-out<%- public ? " public" : "" %>" data-transports="<%- JSON.stringify(transports) %>">
 		<div id="viewport" role="tablist">
 			<aside id="sidebar">
-				<img src="img/logo-horizontal-transparent-bg.svg" class="logo" alt="The Lounge">
-				<img src="img/logo-horizontal-transparent-bg-inverted.svg" class="logo-inverted" alt="The Lounge">
+				<img src="img/logo-<%- public ? 'horizontal-' : '' %>transparent-bg.svg" class="logo" alt="The Lounge">
+				<img src="img/logo-<%- public ? 'horizontal-' : '' %>transparent-bg-inverted.svg" class="logo-inverted" alt="The Lounge">
 				<div class="networks"></div>
 				<div class="empty">
 					You're not connected to any networks yet.

From bff38efd5063cc8cc33bc343b33f7030acc96fa5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=A9r=C3=A9mie=20Astori?= <jeremie@astori.fr>
Date: Fri, 13 Apr 2018 02:22:10 -0400
Subject: [PATCH 5/7] Optimize SVG logos

---
 ...ogo-horizontal-transparent-bg-inverted.svg | 62 +------------------
 client/img/logo-horizontal-transparent-bg.svg | 62 +------------------
 client/img/logo-transparent-bg-inverted.svg   | 33 +---------
 client/img/logo-transparent-bg.svg            | 33 +---------
 4 files changed, 4 insertions(+), 186 deletions(-)

diff --git a/client/img/logo-horizontal-transparent-bg-inverted.svg b/client/img/logo-horizontal-transparent-bg-inverted.svg
index 561a7824..53db68da 100644
--- a/client/img/logo-horizontal-transparent-bg-inverted.svg
+++ b/client/img/logo-horizontal-transparent-bg-inverted.svg
@@ -1,61 +1 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Livello_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 838 276" style="enable-background:new 0 0 838 276;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#FF9E18;}
-	.st1{fill:#FFFFFF;}
-</style>
-<g>
-	<g>
-		<g>
-			<g>
-				<path class="st0" d="M319.5,100l0,76.1c0,0.7-0.4,1.3-0.9,1.6l-65.8,37.7c-0.6,0.3-1.3,0.3-1.8,0l-66.1-38
-					c-0.6-0.3-0.9-0.9-0.9-1.6l0-66.8c0-0.7-0.4-1.3-0.9-1.6L164.9,97c-1.2-0.7-2.8,0.2-2.8,1.6v84.5c0,3.9,2.1,7.6,5.5,9.5
-					l78.7,45.1c3.4,2,7.6,2,11.1,0l78.4-44.9c3.4-2,5.5-5.6,5.5-9.5V92.7c0-3.9-2.1-7.6-5.5-9.5l-78.4-44.9c-3.4-2-7.6-2-11.1,0
-					l-36.3,20.8c-1.2,0.7-1.2,2.5,0,3.2l18.2,10.4c0.6,0.3,1.3,0.3,1.8,0l20.9-12c0.6-0.3,1.3-0.3,1.8,0l65.8,37.7
-					C319.2,98.7,319.5,99.3,319.5,100z"/>
-				<ellipse class="st1" cx="288.9" cy="138.4" rx="12.4" ry="12.4"/>
-				<ellipse class="st1" cx="249.3" cy="138.4" rx="12.4" ry="12.4"/>
-			</g>
-			<g>
-				<path class="st1" d="M64,176l0-76.1c0-0.7,0.4-1.3,0.9-1.6l65.8-37.7c0.6-0.3,1.3-0.3,1.8,0l66.1,38c0.6,0.3,0.9,0.9,0.9,1.6
-					l0,66.8c0,0.7,0.4,1.3,0.9,1.6l18.1,10.4c1.2,0.7,2.8-0.2,2.8-1.6V92.9c0-3.9-2.1-7.6-5.5-9.5l-78.7-45.1c-3.4-2-7.6-2-11.1,0
-					L47.7,83.1c-3.4,2-5.5,5.6-5.5,9.5v90.6c0,3.9,2.1,7.6,5.5,9.5l78.4,44.9c3.4,2,7.6,2,11.1,0l36.3-20.8c1.2-0.7,1.2-2.5,0-3.2
-					l-18.2-10.4c-0.6-0.3-1.3-0.3-1.8,0l-20.9,12c-0.6,0.3-1.3,0.3-1.8,0l-65.8-37.7C64.3,177.3,64,176.7,64,176z"/>
-				<ellipse class="st0" cx="94.6" cy="137.6" rx="12.4" ry="12.4"/>
-				<ellipse class="st0" cx="134.2" cy="137.6" rx="12.4" ry="12.4"/>
-			</g>
-		</g>
-	</g>
-	<g>
-		<g>
-			<polygon class="st0" points="362.9,121.4 378.1,121.4 378.1,162.2 389.6,162.2 389.6,121.4 404.9,121.4 404.9,111.9 362.9,111.9
-							"/>
-			<polygon class="st0" points="446.5,132 424.4,132 424.4,111.9 413.2,111.9 413.2,162.3 424.4,162.3 424.4,141.4 446.5,141.4
-				446.5,162.3 457.7,162.3 457.7,111.9 446.5,111.9 			"/>
-			<polygon class="st0" points="500.7,121 500.7,111.9 466.2,111.9 466.2,162.3 500.7,162.3 500.7,153.2 477.4,153.2 477.4,141.3
-				499.2,141.3 499.2,132.1 477.4,132.1 477.4,121 			"/>
-		</g>
-		<g>
-			<polygon class="st1" points="520.6,111.9 509.2,111.9 509.2,162.3 542.5,162.3 542.5,152.8 520.6,152.8 			"/>
-			<path class="st1" d="M585.8,115c-3.8-2.1-8.4-3.1-13.6-3.1c-5.2,0-9.8,1-13.6,3.1c-3.9,2.1-6.9,5-9,8.8
-				c-2.1,3.8-3.1,8.3-3.1,13.4c0,5.1,1.1,9.6,3.1,13.4c2.1,3.8,5.1,6.8,9,8.9c3.9,2.1,8.4,3.1,13.6,3.1c5.2,0,9.8-1,13.6-3.1
-				c3.8-2.1,6.8-5,8.9-8.9c2.1-3.8,3.1-8.3,3.1-13.4c0-5.1-1-9.6-3.1-13.4C592.6,120,589.6,117.1,585.8,115z M585.8,137.2
-				c0,5.3-1.2,9.4-3.6,12.2c-2.4,2.8-5.7,4.2-10,4.2c-4.3,0-7.6-1.4-10-4.2c-2.4-2.8-3.6-6.9-3.6-12.2c0-5.3,1.2-9.4,3.6-12.1
-				c2.4-2.7,5.7-4.1,10-4.1c4.2,0,7.6,1.4,10,4.1C584.6,127.8,585.8,131.9,585.8,137.2z"/>
-			<path class="st1" d="M637.7,141.6c0,3.8-0.9,6.7-2.6,8.7c-1.7,2-4.3,2.9-7.6,2.9c-3.3,0-5.9-1-7.6-2.9c-1.8-2-2.6-4.9-2.6-8.7
-				V112H606v29.1c0,6.9,1.8,12.2,5.5,15.8c3.6,3.6,9,5.4,16,5.4c6.9,0,12.3-1.8,16-5.4c3.7-3.6,5.5-8.9,5.5-15.8V112h-11.3V141.6z"
-				/>
-			<polygon class="st1" points="690.1,142.9 665.8,111.9 657.2,111.9 657.2,162.3 668.1,162.3 668.1,131.3 692.3,162.2 692.4,162.3
-				701,162.3 701,111.9 690.1,111.9 			"/>
-			<path class="st1" d="M733.4,142.4h9.6v10.1c-2.6,0.6-5.2,0.9-7.8,0.9c-9.7,0-14.5-5.3-14.5-16.3c0-10.8,4.5-16,13.8-16
-				c2.5,0,4.8,0.4,6.9,1.1c2.1,0.7,4.3,1.9,6.6,3.5l0.3,0.2l3.7-8.2l-0.2-0.2c-2-1.7-4.6-3.1-7.7-4.1c-3.1-1-6.4-1.4-10-1.4
-				c-5,0-9.5,1-13.3,3.1c-3.8,2-6.7,5-8.8,8.7c-2.1,3.8-3.1,8.2-3.1,13.3c0,5.2,1,9.7,3.1,13.5c2.1,3.8,5.1,6.7,8.9,8.7
-				c3.8,2,8.4,3,13.6,3c3.4,0,6.7-0.3,9.9-1c3.2-0.6,6-1.5,8.4-2.7l0.2-0.1v-24.3h-19.9V142.4z"/>
-			<polygon class="st1" points="795.8,121 795.8,111.9 761.9,111.9 761.9,162.4 795.8,162.4 795.8,153.2 772.9,153.2 772.9,141.3
-				794.4,141.3 794.4,132.1 772.9,132.1 772.9,121 			"/>
-		</g>
-	</g>
-</g>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 838 276"><style>.st0{fill:#ff9e18}.st1{fill:#fff}</style><path class="st0" d="M319.5 100v76.1c0 .7-.4 1.3-.9 1.6l-65.8 37.7c-.6.3-1.3.3-1.8 0l-66.1-38c-.6-.3-.9-.9-.9-1.6V109c0-.7-.4-1.3-.9-1.6L164.9 97c-1.2-.7-2.8.2-2.8 1.6v84.5c0 3.9 2.1 7.6 5.5 9.5l78.7 45.1c3.4 2 7.6 2 11.1 0l78.4-44.9c3.4-2 5.5-5.6 5.5-9.5V92.7c0-3.9-2.1-7.6-5.5-9.5l-78.4-44.9c-3.4-2-7.6-2-11.1 0L210 59.1c-1.2.7-1.2 2.5 0 3.2l18.2 10.4c.6.3 1.3.3 1.8 0l20.9-12c.6-.3 1.3-.3 1.8 0l65.8 37.7c.7.3 1 .9 1 1.6z"/><ellipse class="st1" cx="288.9" cy="138.4" rx="12.4" ry="12.4"/><ellipse class="st1" cx="249.3" cy="138.4" rx="12.4" ry="12.4"/><path class="st1" d="M64 176V99.9c0-.7.4-1.3.9-1.6l65.8-37.7c.6-.3 1.3-.3 1.8 0l66.1 38c.6.3.9.9.9 1.6V167c0 .7.4 1.3.9 1.6l18.1 10.4c1.2.7 2.8-.2 2.8-1.6V92.9c0-3.9-2.1-7.6-5.5-9.5l-78.7-45.1c-3.4-2-7.6-2-11.1 0L47.7 83.1c-3.4 2-5.5 5.6-5.5 9.5v90.6c0 3.9 2.1 7.6 5.5 9.5l78.4 44.9c3.4 2 7.6 2 11.1 0l36.3-20.8c1.2-.7 1.2-2.5 0-3.2l-18.2-10.4c-.6-.3-1.3-.3-1.8 0l-20.9 12c-.6.3-1.3.3-1.8 0L65 177.5c-.7-.2-1-.8-1-1.5z"/><ellipse class="st0" cx="94.6" cy="137.6" rx="12.4" ry="12.4"/><ellipse class="st0" cx="134.2" cy="137.6" rx="12.4" ry="12.4"/><path class="st0" d="M362.9 121.4h15.2v40.8h11.5v-40.8h15.3v-9.5h-42zm83.6 10.6h-22.1v-20.1h-11.2v50.4h11.2v-20.9h22.1v20.9h11.2v-50.4h-11.2zm54.2-11v-9.1h-34.5v50.4h34.5v-9.1h-23.3v-11.9h21.8v-9.2h-21.8V121z"/><path class="st1" d="M520.6 111.9h-11.4v50.4h33.3v-9.5h-21.9zm65.2 3.1c-3.8-2.1-8.4-3.1-13.6-3.1-5.2 0-9.8 1-13.6 3.1-3.9 2.1-6.9 5-9 8.8-2.1 3.8-3.1 8.3-3.1 13.4s1.1 9.6 3.1 13.4c2.1 3.8 5.1 6.8 9 8.9 3.9 2.1 8.4 3.1 13.6 3.1 5.2 0 9.8-1 13.6-3.1 3.8-2.1 6.8-5 8.9-8.9 2.1-3.8 3.1-8.3 3.1-13.4s-1-9.6-3.1-13.4c-2.1-3.8-5.1-6.7-8.9-8.8zm0 22.2c0 5.3-1.2 9.4-3.6 12.2-2.4 2.8-5.7 4.2-10 4.2s-7.6-1.4-10-4.2c-2.4-2.8-3.6-6.9-3.6-12.2 0-5.3 1.2-9.4 3.6-12.1 2.4-2.7 5.7-4.1 10-4.1 4.2 0 7.6 1.4 10 4.1 2.4 2.7 3.6 6.8 3.6 12.1zm51.9 4.4c0 3.8-.9 6.7-2.6 8.7-1.7 2-4.3 2.9-7.6 2.9s-5.9-1-7.6-2.9c-1.8-2-2.6-4.9-2.6-8.7V112H606v29.1c0 6.9 1.8 12.2 5.5 15.8 3.6 3.6 9 5.4 16 5.4 6.9 0 12.3-1.8 16-5.4 3.7-3.6 5.5-8.9 5.5-15.8V112h-11.3v29.6zm52.4 1.3l-24.3-31h-8.6v50.4h10.9v-31l24.2 30.9.1.1h8.6v-50.4h-10.9zm43.3-.5h9.6v10.1c-2.6.6-5.2.9-7.8.9-9.7 0-14.5-5.3-14.5-16.3 0-10.8 4.5-16 13.8-16 2.5 0 4.8.4 6.9 1.1 2.1.7 4.3 1.9 6.6 3.5l.3.2 3.7-8.2-.2-.2c-2-1.7-4.6-3.1-7.7-4.1-3.1-1-6.4-1.4-10-1.4-5 0-9.5 1-13.3 3.1-3.8 2-6.7 5-8.8 8.7-2.1 3.8-3.1 8.2-3.1 13.3 0 5.2 1 9.7 3.1 13.5 2.1 3.8 5.1 6.7 8.9 8.7 3.8 2 8.4 3 13.6 3 3.4 0 6.7-.3 9.9-1 3.2-.6 6-1.5 8.4-2.7l.2-.1v-24.3h-19.9v8.2zm62.4-21.4v-9.1h-33.9v50.5h33.9v-9.2h-22.9v-11.9h21.5v-9.2h-21.5V121z"/></svg>
diff --git a/client/img/logo-horizontal-transparent-bg.svg b/client/img/logo-horizontal-transparent-bg.svg
index 58ed1982..ad81b7da 100644
--- a/client/img/logo-horizontal-transparent-bg.svg
+++ b/client/img/logo-horizontal-transparent-bg.svg
@@ -1,61 +1 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Livello_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 838 276" style="enable-background:new 0 0 838 276;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#FF9E18;}
-	.st1{fill:#415364;}
-</style>
-<g>
-	<g>
-		<g>
-			<g>
-				<path class="st0" d="M319.5,100l0,76.1c0,0.7-0.4,1.3-0.9,1.6l-65.8,37.7c-0.6,0.3-1.3,0.3-1.8,0l-66.1-38
-					c-0.6-0.3-0.9-0.9-0.9-1.6l0-66.8c0-0.7-0.4-1.3-0.9-1.6L164.9,97c-1.2-0.7-2.8,0.2-2.8,1.6v84.5c0,3.9,2.1,7.6,5.5,9.5
-					l78.7,45.1c3.4,2,7.6,2,11.1,0l78.4-44.9c3.4-2,5.5-5.6,5.5-9.5V92.7c0-3.9-2.1-7.6-5.5-9.5l-78.4-44.9c-3.4-2-7.6-2-11.1,0
-					l-36.3,20.8c-1.2,0.7-1.2,2.5,0,3.2l18.2,10.4c0.6,0.3,1.3,0.3,1.8,0l20.9-12c0.6-0.3,1.3-0.3,1.8,0l65.8,37.7
-					C319.2,98.7,319.5,99.3,319.5,100z"/>
-				<ellipse class="st1" cx="288.9" cy="138.4" rx="12.4" ry="12.4"/>
-				<ellipse class="st1" cx="249.3" cy="138.4" rx="12.4" ry="12.4"/>
-			</g>
-			<g>
-				<path class="st1" d="M64,176l0-76.1c0-0.7,0.4-1.3,0.9-1.6l65.8-37.7c0.6-0.3,1.3-0.3,1.8,0l66.1,38c0.6,0.3,0.9,0.9,0.9,1.6
-					l0,66.8c0,0.7,0.4,1.3,0.9,1.6l18.1,10.4c1.2,0.7,2.8-0.2,2.8-1.6V92.9c0-3.9-2.1-7.6-5.5-9.5l-78.7-45.1c-3.4-2-7.6-2-11.1,0
-					L47.7,83.1c-3.4,2-5.5,5.6-5.5,9.5v90.6c0,3.9,2.1,7.6,5.5,9.5l78.4,44.9c3.4,2,7.6,2,11.1,0l36.3-20.8c1.2-0.7,1.2-2.5,0-3.2
-					l-18.2-10.4c-0.6-0.3-1.3-0.3-1.8,0l-20.9,12c-0.6,0.3-1.3,0.3-1.8,0l-65.8-37.7C64.3,177.3,64,176.7,64,176z"/>
-				<ellipse class="st0" cx="94.6" cy="137.6" rx="12.4" ry="12.4"/>
-				<ellipse class="st0" cx="134.2" cy="137.6" rx="12.4" ry="12.4"/>
-			</g>
-		</g>
-	</g>
-	<g>
-		<g>
-			<polygon class="st0" points="362.9,121.4 378.1,121.4 378.1,162.2 389.6,162.2 389.6,121.4 404.9,121.4 404.9,111.9 362.9,111.9 
-							"/>
-			<polygon class="st0" points="446.5,132 424.4,132 424.4,111.9 413.2,111.9 413.2,162.3 424.4,162.3 424.4,141.4 446.5,141.4 
-				446.5,162.3 457.7,162.3 457.7,111.9 446.5,111.9 			"/>
-			<polygon class="st0" points="500.7,121 500.7,111.9 466.2,111.9 466.2,162.3 500.7,162.3 500.7,153.2 477.4,153.2 477.4,141.3 
-				499.2,141.3 499.2,132.1 477.4,132.1 477.4,121 			"/>
-		</g>
-		<g>
-			<polygon class="st1" points="520.6,111.9 509.2,111.9 509.2,162.3 542.5,162.3 542.5,152.8 520.6,152.8 			"/>
-			<path class="st1" d="M585.8,115c-3.8-2.1-8.4-3.1-13.6-3.1c-5.2,0-9.8,1-13.6,3.1c-3.9,2.1-6.9,5-9,8.8
-				c-2.1,3.8-3.1,8.3-3.1,13.4c0,5.1,1.1,9.6,3.1,13.4c2.1,3.8,5.1,6.8,9,8.9c3.9,2.1,8.4,3.1,13.6,3.1c5.2,0,9.8-1,13.6-3.1
-				c3.8-2.1,6.8-5,8.9-8.9c2.1-3.8,3.1-8.3,3.1-13.4c0-5.1-1-9.6-3.1-13.4C592.6,120,589.6,117.1,585.8,115z M585.8,137.2
-				c0,5.3-1.2,9.4-3.6,12.2c-2.4,2.8-5.7,4.2-10,4.2c-4.3,0-7.6-1.4-10-4.2c-2.4-2.8-3.6-6.9-3.6-12.2c0-5.3,1.2-9.4,3.6-12.1
-				c2.4-2.7,5.7-4.1,10-4.1c4.2,0,7.6,1.4,10,4.1C584.6,127.8,585.8,131.9,585.8,137.2z"/>
-			<path class="st1" d="M637.7,141.6c0,3.8-0.9,6.7-2.6,8.7c-1.7,2-4.3,2.9-7.6,2.9c-3.3,0-5.9-1-7.6-2.9c-1.8-2-2.6-4.9-2.6-8.7
-				V112H606v29.1c0,6.9,1.8,12.2,5.5,15.8c3.6,3.6,9,5.4,16,5.4c6.9,0,12.3-1.8,16-5.4c3.7-3.6,5.5-8.9,5.5-15.8V112h-11.3V141.6z"
-				/>
-			<polygon class="st1" points="690.1,142.9 665.8,111.9 657.2,111.9 657.2,162.3 668.1,162.3 668.1,131.3 692.3,162.2 692.4,162.3 
-				701,162.3 701,111.9 690.1,111.9 			"/>
-			<path class="st1" d="M733.4,142.4h9.6v10.1c-2.6,0.6-5.2,0.9-7.8,0.9c-9.7,0-14.5-5.3-14.5-16.3c0-10.8,4.5-16,13.8-16
-				c2.5,0,4.8,0.4,6.9,1.1c2.1,0.7,4.3,1.9,6.6,3.5l0.3,0.2l3.7-8.2l-0.2-0.2c-2-1.7-4.6-3.1-7.7-4.1c-3.1-1-6.4-1.4-10-1.4
-				c-5,0-9.5,1-13.3,3.1c-3.8,2-6.7,5-8.8,8.7c-2.1,3.8-3.1,8.2-3.1,13.3c0,5.2,1,9.7,3.1,13.5c2.1,3.8,5.1,6.7,8.9,8.7
-				c3.8,2,8.4,3,13.6,3c3.4,0,6.7-0.3,9.9-1c3.2-0.6,6-1.5,8.4-2.7l0.2-0.1v-24.3h-19.9V142.4z"/>
-			<polygon class="st1" points="795.8,121 795.8,111.9 761.9,111.9 761.9,162.4 795.8,162.4 795.8,153.2 772.9,153.2 772.9,141.3 
-				794.4,141.3 794.4,132.1 772.9,132.1 772.9,121 			"/>
-		</g>
-	</g>
-</g>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 838 276"><style>.st0{fill:#ff9e18}.st1{fill:#415364}</style><path class="st0" d="M319.5 100v76.1c0 .7-.4 1.3-.9 1.6l-65.8 37.7c-.6.3-1.3.3-1.8 0l-66.1-38c-.6-.3-.9-.9-.9-1.6V109c0-.7-.4-1.3-.9-1.6L164.9 97c-1.2-.7-2.8.2-2.8 1.6v84.5c0 3.9 2.1 7.6 5.5 9.5l78.7 45.1c3.4 2 7.6 2 11.1 0l78.4-44.9c3.4-2 5.5-5.6 5.5-9.5V92.7c0-3.9-2.1-7.6-5.5-9.5l-78.4-44.9c-3.4-2-7.6-2-11.1 0L210 59.1c-1.2.7-1.2 2.5 0 3.2l18.2 10.4c.6.3 1.3.3 1.8 0l20.9-12c.6-.3 1.3-.3 1.8 0l65.8 37.7c.7.3 1 .9 1 1.6z"/><ellipse class="st1" cx="288.9" cy="138.4" rx="12.4" ry="12.4"/><ellipse class="st1" cx="249.3" cy="138.4" rx="12.4" ry="12.4"/><path class="st1" d="M64 176V99.9c0-.7.4-1.3.9-1.6l65.8-37.7c.6-.3 1.3-.3 1.8 0l66.1 38c.6.3.9.9.9 1.6V167c0 .7.4 1.3.9 1.6l18.1 10.4c1.2.7 2.8-.2 2.8-1.6V92.9c0-3.9-2.1-7.6-5.5-9.5l-78.7-45.1c-3.4-2-7.6-2-11.1 0L47.7 83.1c-3.4 2-5.5 5.6-5.5 9.5v90.6c0 3.9 2.1 7.6 5.5 9.5l78.4 44.9c3.4 2 7.6 2 11.1 0l36.3-20.8c1.2-.7 1.2-2.5 0-3.2l-18.2-10.4c-.6-.3-1.3-.3-1.8 0l-20.9 12c-.6.3-1.3.3-1.8 0L65 177.5c-.7-.2-1-.8-1-1.5z"/><ellipse class="st0" cx="94.6" cy="137.6" rx="12.4" ry="12.4"/><ellipse class="st0" cx="134.2" cy="137.6" rx="12.4" ry="12.4"/><path class="st0" d="M362.9 121.4h15.2v40.8h11.5v-40.8h15.3v-9.5h-42zm83.6 10.6h-22.1v-20.1h-11.2v50.4h11.2v-20.9h22.1v20.9h11.2v-50.4h-11.2zm54.2-11v-9.1h-34.5v50.4h34.5v-9.1h-23.3v-11.9h21.8v-9.2h-21.8V121z"/><path class="st1" d="M520.6 111.9h-11.4v50.4h33.3v-9.5h-21.9zm65.2 3.1c-3.8-2.1-8.4-3.1-13.6-3.1-5.2 0-9.8 1-13.6 3.1-3.9 2.1-6.9 5-9 8.8-2.1 3.8-3.1 8.3-3.1 13.4s1.1 9.6 3.1 13.4c2.1 3.8 5.1 6.8 9 8.9 3.9 2.1 8.4 3.1 13.6 3.1 5.2 0 9.8-1 13.6-3.1 3.8-2.1 6.8-5 8.9-8.9 2.1-3.8 3.1-8.3 3.1-13.4s-1-9.6-3.1-13.4c-2.1-3.8-5.1-6.7-8.9-8.8zm0 22.2c0 5.3-1.2 9.4-3.6 12.2-2.4 2.8-5.7 4.2-10 4.2s-7.6-1.4-10-4.2c-2.4-2.8-3.6-6.9-3.6-12.2 0-5.3 1.2-9.4 3.6-12.1 2.4-2.7 5.7-4.1 10-4.1 4.2 0 7.6 1.4 10 4.1 2.4 2.7 3.6 6.8 3.6 12.1zm51.9 4.4c0 3.8-.9 6.7-2.6 8.7-1.7 2-4.3 2.9-7.6 2.9s-5.9-1-7.6-2.9c-1.8-2-2.6-4.9-2.6-8.7V112H606v29.1c0 6.9 1.8 12.2 5.5 15.8 3.6 3.6 9 5.4 16 5.4 6.9 0 12.3-1.8 16-5.4 3.7-3.6 5.5-8.9 5.5-15.8V112h-11.3v29.6zm52.4 1.3l-24.3-31h-8.6v50.4h10.9v-31l24.2 30.9.1.1h8.6v-50.4h-10.9zm43.3-.5h9.6v10.1c-2.6.6-5.2.9-7.8.9-9.7 0-14.5-5.3-14.5-16.3 0-10.8 4.5-16 13.8-16 2.5 0 4.8.4 6.9 1.1 2.1.7 4.3 1.9 6.6 3.5l.3.2 3.7-8.2-.2-.2c-2-1.7-4.6-3.1-7.7-4.1-3.1-1-6.4-1.4-10-1.4-5 0-9.5 1-13.3 3.1-3.8 2-6.7 5-8.8 8.7-2.1 3.8-3.1 8.2-3.1 13.3 0 5.2 1 9.7 3.1 13.5 2.1 3.8 5.1 6.7 8.9 8.7 3.8 2 8.4 3 13.6 3 3.4 0 6.7-.3 9.9-1 3.2-.6 6-1.5 8.4-2.7l.2-.1v-24.3h-19.9v8.2zm62.4-21.4v-9.1h-33.9v50.5h33.9v-9.2h-22.9v-11.9h21.5v-9.2h-21.5V121z"/></svg>
diff --git a/client/img/logo-transparent-bg-inverted.svg b/client/img/logo-transparent-bg-inverted.svg
index 836d59e4..0c96875b 100644
--- a/client/img/logo-transparent-bg-inverted.svg
+++ b/client/img/logo-transparent-bg-inverted.svg
@@ -1,32 +1 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Livello_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 386 276" style="enable-background:new 0 0 386 276;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#FF9E18;}
-	.st1{fill:#FFFFFF;}
-</style>
-<g>
-	<g>
-		<g>
-			<g>
-				<path class="st0" d="M320.1,100l0,76.1c0,0.7-0.4,1.3-0.9,1.6l-65.8,37.7c-0.6,0.3-1.3,0.3-1.8,0l-66.1-38
-					c-0.6-0.3-0.9-0.9-0.9-1.6l0-66.8c0-0.7-0.4-1.3-0.9-1.6L165.5,97c-1.2-0.7-2.8,0.2-2.8,1.6v84.5c0,3.9,2.1,7.6,5.5,9.5
-					l78.7,45.1c3.4,2,7.6,2,11.1,0l78.4-44.9c3.4-2,5.5-5.6,5.5-9.5V92.7c0-3.9-2.1-7.6-5.5-9.5l-78.4-44.9c-3.4-2-7.6-2-11.1,0
-					l-36.3,20.8c-1.2,0.7-1.2,2.5,0,3.2l18.2,10.4c0.6,0.3,1.3,0.3,1.8,0l20.9-12c0.6-0.3,1.3-0.3,1.8,0l65.8,37.7
-					C319.8,98.7,320.1,99.3,320.1,100z"/>
-				<ellipse class="st1" cx="289.6" cy="138.4" rx="12.4" ry="12.4"/>
-				<ellipse class="st1" cx="249.9" cy="138.4" rx="12.4" ry="12.4"/>
-			</g>
-			<g>
-				<path class="st1" d="M64.6,176l0-76.1c0-0.7,0.4-1.3,0.9-1.6l65.8-37.7c0.6-0.3,1.3-0.3,1.8,0l66.1,38c0.6,0.3,0.9,0.9,0.9,1.6
-					l0,66.8c0,0.7,0.4,1.3,0.9,1.6l18.1,10.4c1.2,0.7,2.8-0.2,2.8-1.6V92.9c0-3.9-2.1-7.6-5.5-9.5l-78.7-45.1c-3.4-2-7.6-2-11.1,0
-					L48.3,83.1c-3.4,2-5.5,5.6-5.5,9.5v90.6c0,3.9,2.1,7.6,5.5,9.5l78.4,44.9c3.4,2,7.6,2,11.1,0l36.3-20.8c1.2-0.7,1.2-2.5,0-3.2
-					l-18.2-10.4c-0.6-0.3-1.3-0.3-1.8,0l-20.9,12c-0.6,0.3-1.3,0.3-1.8,0l-65.8-37.7C65,177.3,64.6,176.7,64.6,176z"/>
-				<ellipse class="st0" cx="95.2" cy="137.6" rx="12.4" ry="12.4"/>
-				<ellipse class="st0" cx="134.9" cy="137.6" rx="12.4" ry="12.4"/>
-			</g>
-		</g>
-	</g>
-</g>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 386 276"><style>.st0{fill:#ff9e18}.st1{fill:#fff}</style><path class="st0" d="M320.1 100v76.1c0 .7-.4 1.3-.9 1.6l-65.8 37.7c-.6.3-1.3.3-1.8 0l-66.1-38c-.6-.3-.9-.9-.9-1.6V109c0-.7-.4-1.3-.9-1.6L165.5 97c-1.2-.7-2.8.2-2.8 1.6v84.5c0 3.9 2.1 7.6 5.5 9.5l78.7 45.1c3.4 2 7.6 2 11.1 0l78.4-44.9c3.4-2 5.5-5.6 5.5-9.5V92.7c0-3.9-2.1-7.6-5.5-9.5L258 38.3c-3.4-2-7.6-2-11.1 0l-36.3 20.8c-1.2.7-1.2 2.5 0 3.2l18.2 10.4c.6.3 1.3.3 1.8 0l20.9-12c.6-.3 1.3-.3 1.8 0l65.8 37.7c.7.3 1 .9 1 1.6z"/><ellipse class="st1" cx="289.6" cy="138.4" rx="12.4" ry="12.4"/><ellipse class="st1" cx="249.9" cy="138.4" rx="12.4" ry="12.4"/><path class="st1" d="M64.6 176V99.9c0-.7.4-1.3.9-1.6l65.8-37.7c.6-.3 1.3-.3 1.8 0l66.1 38c.6.3.9.9.9 1.6V167c0 .7.4 1.3.9 1.6l18.1 10.4c1.2.7 2.8-.2 2.8-1.6V92.9c0-3.9-2.1-7.6-5.5-9.5l-78.7-45.1c-3.4-2-7.6-2-11.1 0L48.3 83.1c-3.4 2-5.5 5.6-5.5 9.5v90.6c0 3.9 2.1 7.6 5.5 9.5l78.4 44.9c3.4 2 7.6 2 11.1 0l36.3-20.8c1.2-.7 1.2-2.5 0-3.2l-18.2-10.4c-.6-.3-1.3-.3-1.8 0l-20.9 12c-.6.3-1.3.3-1.8 0l-65.8-37.7c-.6-.2-1-.8-1-1.5z"/><ellipse class="st0" cx="95.2" cy="137.6" rx="12.4" ry="12.4"/><ellipse class="st0" cx="134.9" cy="137.6" rx="12.4" ry="12.4"/></svg>
diff --git a/client/img/logo-transparent-bg.svg b/client/img/logo-transparent-bg.svg
index 9daaf865..b05918bb 100644
--- a/client/img/logo-transparent-bg.svg
+++ b/client/img/logo-transparent-bg.svg
@@ -1,32 +1 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Livello_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 386 276" style="enable-background:new 0 0 386 276;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#FF9E18;}
-	.st1{fill:#415364;}
-</style>
-<g>
-	<g>
-		<g>
-			<g>
-				<path class="st0" d="M320.1,100l0,76.1c0,0.7-0.4,1.3-0.9,1.6l-65.8,37.7c-0.6,0.3-1.3,0.3-1.8,0l-66.1-38
-					c-0.6-0.3-0.9-0.9-0.9-1.6l0-66.8c0-0.7-0.4-1.3-0.9-1.6L165.5,97c-1.2-0.7-2.8,0.2-2.8,1.6v84.5c0,3.9,2.1,7.6,5.5,9.5
-					l78.7,45.1c3.4,2,7.6,2,11.1,0l78.4-44.9c3.4-2,5.5-5.6,5.5-9.5V92.7c0-3.9-2.1-7.6-5.5-9.5l-78.4-44.9c-3.4-2-7.6-2-11.1,0
-					l-36.3,20.8c-1.2,0.7-1.2,2.5,0,3.2l18.2,10.4c0.6,0.3,1.3,0.3,1.8,0l20.9-12c0.6-0.3,1.3-0.3,1.8,0l65.8,37.7
-					C319.8,98.7,320.1,99.3,320.1,100z"/>
-				<ellipse class="st1" cx="289.6" cy="138.4" rx="12.4" ry="12.4"/>
-				<ellipse class="st1" cx="249.9" cy="138.4" rx="12.4" ry="12.4"/>
-			</g>
-			<g>
-				<path class="st1" d="M64.6,176l0-76.1c0-0.7,0.4-1.3,0.9-1.6l65.8-37.7c0.6-0.3,1.3-0.3,1.8,0l66.1,38c0.6,0.3,0.9,0.9,0.9,1.6
-					l0,66.8c0,0.7,0.4,1.3,0.9,1.6l18.1,10.4c1.2,0.7,2.8-0.2,2.8-1.6V92.9c0-3.9-2.1-7.6-5.5-9.5l-78.7-45.1c-3.4-2-7.6-2-11.1,0
-					L48.3,83.1c-3.4,2-5.5,5.6-5.5,9.5v90.6c0,3.9,2.1,7.6,5.5,9.5l78.4,44.9c3.4,2,7.6,2,11.1,0l36.3-20.8c1.2-0.7,1.2-2.5,0-3.2
-					l-18.2-10.4c-0.6-0.3-1.3-0.3-1.8,0l-20.9,12c-0.6,0.3-1.3,0.3-1.8,0l-65.8-37.7C65,177.3,64.6,176.7,64.6,176z"/>
-				<ellipse class="st0" cx="95.2" cy="137.6" rx="12.4" ry="12.4"/>
-				<ellipse class="st0" cx="134.9" cy="137.6" rx="12.4" ry="12.4"/>
-			</g>
-		</g>
-	</g>
-</g>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 386 276"><style>.st0{fill:#ff9e18}.st1{fill:#415364}</style><path class="st0" d="M320.1 100v76.1c0 .7-.4 1.3-.9 1.6l-65.8 37.7c-.6.3-1.3.3-1.8 0l-66.1-38c-.6-.3-.9-.9-.9-1.6V109c0-.7-.4-1.3-.9-1.6L165.5 97c-1.2-.7-2.8.2-2.8 1.6v84.5c0 3.9 2.1 7.6 5.5 9.5l78.7 45.1c3.4 2 7.6 2 11.1 0l78.4-44.9c3.4-2 5.5-5.6 5.5-9.5V92.7c0-3.9-2.1-7.6-5.5-9.5L258 38.3c-3.4-2-7.6-2-11.1 0l-36.3 20.8c-1.2.7-1.2 2.5 0 3.2l18.2 10.4c.6.3 1.3.3 1.8 0l20.9-12c.6-.3 1.3-.3 1.8 0l65.8 37.7c.7.3 1 .9 1 1.6z"/><ellipse class="st1" cx="289.6" cy="138.4" rx="12.4" ry="12.4"/><ellipse class="st1" cx="249.9" cy="138.4" rx="12.4" ry="12.4"/><path class="st1" d="M64.6 176V99.9c0-.7.4-1.3.9-1.6l65.8-37.7c.6-.3 1.3-.3 1.8 0l66.1 38c.6.3.9.9.9 1.6V167c0 .7.4 1.3.9 1.6l18.1 10.4c1.2.7 2.8-.2 2.8-1.6V92.9c0-3.9-2.1-7.6-5.5-9.5l-78.7-45.1c-3.4-2-7.6-2-11.1 0L48.3 83.1c-3.4 2-5.5 5.6-5.5 9.5v90.6c0 3.9 2.1 7.6 5.5 9.5l78.4 44.9c3.4 2 7.6 2 11.1 0l36.3-20.8c1.2-.7 1.2-2.5 0-3.2l-18.2-10.4c-.6-.3-1.3-.3-1.8 0l-20.9 12c-.6.3-1.3.3-1.8 0l-65.8-37.7c-.6-.2-1-.8-1-1.5z"/><ellipse class="st0" cx="95.2" cy="137.6" rx="12.4" ry="12.4"/><ellipse class="st0" cx="134.9" cy="137.6" rx="12.4" ry="12.4"/></svg>

From 8137ece450fb16e07c47e1955516d1a6c705ccaa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=A9r=C3=A9mie=20Astori?= <jeremie@astori.fr>
Date: Sat, 14 Apr 2018 18:16:03 -0400
Subject: [PATCH 6/7] Make sidebar logo scroll with networks, wrap logos in div
 element

---
 client/css/style.css  | 22 ++++++++++++++++------
 client/index.html.tpl | 14 +++++++++-----
 2 files changed, 25 insertions(+), 11 deletions(-)

diff --git a/client/css/style.css b/client/css/style.css
index 618c218e..a3e704b9 100644
--- a/client/css/style.css
+++ b/client/css/style.css
@@ -501,6 +501,18 @@ kbd {
 	width: 220px;
 }
 
+#sidebar .scrollable-area {
+	overflow-x: auto;
+	flex-grow: 1;
+	touch-action: pan-y;
+	overscroll-behavior: contain;
+	-webkit-overflow-scrolling: touch;
+}
+
+#sidebar .logo-container {
+	text-align: center;
+}
+
 #sidebar .logo,
 #sidebar .logo-inverted {
 	height: 45px;
@@ -559,12 +571,6 @@ background on hover (unless active) */
 
 #sidebar .networks {
 	padding-top: 5px;
-	touch-action: pan-y;
-	overscroll-behavior: contain;
-	-webkit-overflow-scrolling: touch;
-	flex-grow: 1;
-	overflow: auto;
-	overflow-x: hidden;
 }
 
 #sidebar .networks:empty {
@@ -2278,6 +2284,10 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
 		opacity: 0;
 	}
 
+	#sidebar .logo-container {
+		margin-top: 5px;
+	}
+
 	#sidebar button,
 	#sidebar .chan,
 	#sidebar .empty,
diff --git a/client/index.html.tpl b/client/index.html.tpl
index ad8497d0..945ed817 100644
--- a/client/index.html.tpl
+++ b/client/index.html.tpl
@@ -50,11 +50,15 @@
 	<body class="signed-out<%- public ? " public" : "" %>" data-transports="<%- JSON.stringify(transports) %>">
 		<div id="viewport" role="tablist">
 			<aside id="sidebar">
-				<img src="img/logo-<%- public ? 'horizontal-' : '' %>transparent-bg.svg" class="logo" alt="The Lounge">
-				<img src="img/logo-<%- public ? 'horizontal-' : '' %>transparent-bg-inverted.svg" class="logo-inverted" alt="The Lounge">
-				<div class="networks"></div>
-				<div class="empty">
-					You're not connected to any networks yet.
+				<div class="scrollable-area">
+					<div class="logo-container">
+						<img src="img/logo-<%- public ? 'horizontal-' : '' %>transparent-bg.svg" class="logo" alt="The Lounge">
+						<img src="img/logo-<%- public ? 'horizontal-' : '' %>transparent-bg-inverted.svg" class="logo-inverted" alt="The Lounge">
+					</div>
+					<div class="networks"></div>
+					<div class="empty">
+						You are not connected to any networks yet.
+					</div>
 				</div>
 				<footer id="footer">
 					<span class="tooltipped tooltipped-n tooltipped-no-touch" aria-label="Sign in"><button class="icon sign-in" data-target="#sign-in" aria-label="Sign in" role="tab" aria-controls="sign-in" aria-selected="false"></button></span>

From f814d7369c1177584a80c1b59aec5d4e44a04c0e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=A9r=C3=A9mie=20Astori?= <jeremie@astori.fr>
Date: Mon, 30 Apr 2018 00:57:03 -0400
Subject: [PATCH 7/7] Introduce some CSS variables to simplify writing themes
 that stay close to the default style

---
 client/css/style.css      | 41 ++++++++++++++++++++----------
 client/themes/morning.css | 52 ++++-----------------------------------
 2 files changed, 33 insertions(+), 60 deletions(-)

diff --git a/client/css/style.css b/client/css/style.css
index a3e704b9..1ac81b17 100644
--- a/client/css/style.css
+++ b/client/css/style.css
@@ -2,8 +2,23 @@
 @import "bootstrap.css";
 
 :root {
+	/* Main text color */
+	--body-color: #222;
+
+	/* Background color of the whole page */
+	--body-bg-color: #415364;
+
 	/* Links and link-looking buttons */
 	--link-color: #50a656;
+
+	/* Background color of the main window */
+	--window-bg-color: #fff;
+
+	/* Color of the date marker, text and separator */
+	--date-marker-color: rgba(0, 107, 59, 0.5);
+
+	/* Color of the unread message marker, text and separator */
+	--unread-marker-color: rgba(231, 76, 60, 0.5);
 }
 
 /* Samsung Internet <7.0 and Microsoft Edge support (yes, both of them use webkit prefix) */
@@ -23,8 +38,8 @@ body {
 }
 
 body {
-	background: #415364;
-	color: #222;
+	background: var(--body-bg-color);
+	color: var(--body-color);
 	font: 16px -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
 	margin: 0;
 	-webkit-user-select: none;
@@ -481,7 +496,7 @@ kbd {
 	width: 10px;
 	height: 10px;
 	border-radius: 50%;
-	border: 2px solid white;
+	border: 2px solid var(--window-bg-color);
 	opacity: 0;
 	transition: opacity 0.2s;
 	background-clip: padding-box; /* Fix border-radius bleeding color */
@@ -866,7 +881,7 @@ background on hover (unless active) */
 }
 
 #windows .window {
-	background: #fff;
+	background: var(--window-bg-color);
 	display: none;
 	overflow-y: auto;
 	height: 100%;
@@ -1036,7 +1051,6 @@ background on hover (unless active) */
 }
 
 #chat .userlist {
-	background: #fff;
 	border-left: 1px solid #e7e7e7;
 	width: 180px;
 	display: flex;
@@ -1113,13 +1127,13 @@ background on hover (unless active) */
 	left: 0;
 	right: 0;
 	top: 50%;
-	border-top: 1px solid rgba(231, 76, 60, 0.5);
+	border-top: 1px solid var(--unread-marker-color);
 }
 
 #chat .unread-marker-text::before {
 	content: "New messages";
-	background-color: white;
-	color: rgba(231, 76, 60, 0.5);
+	background-color: var(--window-bg-color);
+	color: var(--unread-marker-color);
 	padding: 0 10px;
 }
 
@@ -1143,13 +1157,13 @@ background on hover (unless active) */
 	left: 0;
 	right: 0;
 	top: 50%;
-	border-top: 1px solid rgba(0, 107, 59, 0.5);
+	border-top: 1px solid var(--date-marker-color);
 }
 
 #chat .date-marker-text::before {
 	content: attr(data-label);
-	background-color: white;
-	color: rgba(0, 107, 59, 0.5);
+	background-color: var(--window-bg-color);
+	color: var(--date-marker-color);
 	padding: 0 10px;
 }
 
@@ -1489,7 +1503,7 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
 }
 
 #chat .userlist .search {
-	color: #222;
+	color: var(--body-color);
 	border: 0;
 	background: none;
 	font: inherit;
@@ -2309,7 +2323,7 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
 	}
 
 	#sidebar {
-		background: #415364;
+		background: var(--body-bg-color);
 		height: 100%;
 		position: absolute;
 		left: -220px;
@@ -2370,6 +2384,7 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
 	}
 
 	#chat .userlist {
+		background-color: var(--window-bg-color);
 		height: 100%;
 		position: absolute;
 		right: 0;
diff --git a/client/themes/morning.css b/client/themes/morning.css
index dbeccc1a..43ce78ba 100644
--- a/client/themes/morning.css
+++ b/client/themes/morning.css
@@ -1,11 +1,11 @@
 @import 'default.css';
 
 :root {
+	--body-color: #f3f3f3;
 	--link-color: #77abd9;
-}
-
-body {
-	color: #f3f3f3;
+	--window-bg-color: #303e4a;
+	--date-marker-color: #97ea70;
+	--unread-marker-color: #f92772;
 }
 
 #windows .logo {
@@ -16,13 +16,6 @@ body {
 	display: inline-block;
 }
 
-#main,
-#chat .userlist,
-#windows .chan,
-#windows .window {
-	background: #303e4a;
-}
-
 #chat .userlist .count {
 	background-color: #28333d;
 }
@@ -31,10 +24,6 @@ body {
 	color: #b7c5d1;
 }
 
-#chat .userlist .search {
-	color: #f3f3f3;
-}
-
 /* Borders */
 #chat .content,
 #windows #chat .header,
@@ -44,10 +33,6 @@ body {
 }
 
 /* User list */
-#chat .user-mode {
-	color: #f3f3f3;
-}
-
 #chat .userlist .user.active {
 	background-color: #28333d;
 }
@@ -99,7 +84,7 @@ body {
 #windows #form .input {
 	background-color: #28333d;
 	border-color: #28333d;
-	color: #f3f3f3;
+	color: var(--body-color);
 }
 
 #form #nick {
@@ -115,10 +100,6 @@ body {
 	color: #b7c5d1;
 }
 
-#windows .header {
-	color: #fff;
-}
-
 #windows .header .topic {
 	color: #b7c5d1;
 }
@@ -130,29 +111,6 @@ body {
 	color: #b7c5d1;
 }
 
-/* Notification dot on the top right corner of the menu icon */
-#viewport .lt::after {
-	border-color: #303e4a;
-}
-
-#chat .unread-marker-text::before {
-	background-color: #303e4a;
-	border-color: #f92772;
-}
-
-#chat .unread-marker::before {
-	border-color: #f92772;
-}
-
-#chat .date-marker::before {
-	border-color: #97ea70;
-}
-
-#chat .date-marker-text::before {
-	background-color: #303e4a;
-	color: #97ea70;
-}
-
 /* Setup text colors */
 #chat .message {
 	color: #f3f3f3;