From f05fcef7dbe21618ff01f9213ff11aa82ac31302 Mon Sep 17 00:00:00 2001
From: Evert <imsonotsleepy@gmail.com>
Date: Sun, 25 Sep 2016 21:48:35 +0300
Subject: [PATCH] settings

---
 public/css/main.css       |  70 ++++++++++++--
 public/image/settings.svg |   4 +-
 public/index.html         |  25 ++++-
 public/js/main.js         | 195 +++++++++++++++++++++++++++++++++-----
 public/main.styl          |  72 +++++++++++---
 server/irc.js             |   2 +-
 6 files changed, 317 insertions(+), 51 deletions(-)

diff --git a/public/css/main.css b/public/css/main.css
index b6865c9..1fb2650 100644
--- a/public/css/main.css
+++ b/public/css/main.css
@@ -51,6 +51,8 @@ body {
   padding: 15px;
   background-color: #f7f7f7;
   border: 1px solid #dadada;
+  -webkit-box-shadow: 4px 4px 18px #d6d6d6;
+  -moz-box-shadow: 4px 4px 18px #d6d6d6;
   box-shadow: 4px 4px 18px #d6d6d6;
 }
 .ircclient .coverwindow .wrapper .msg.error {
@@ -68,6 +70,8 @@ body {
   width: 300px;
   border-radius: 5px;
   border: 1px solid #d2d2d2;
+  -webkit-box-shadow: inset 2px 2px 4px #dcdcdc;
+  -moz-box-shadow: inset 2px 2px 4px #dcdcdc;
   box-shadow: inset 2px 2px 4px #dcdcdc;
 }
 .ircclient .coverwindow .wrapper input[type="submit"] {
@@ -93,6 +97,9 @@ body {
   background: -webkit-linear-gradient(top, #c4effc 0%, #7fd5ef 40%, #39b7dd 100%);
   background: linear-gradient(to bottom, #c4effc 0%, #7fd5ef 40%, #39b7dd 100%);
 }
+.ircclient #chat {
+  overflow: hidden;
+}
 .ircclient #chat .ircwrapper {
   position: absolute;
   width: 100%;
@@ -103,20 +110,36 @@ body {
   background-color: #00c7e0;
   position: relative;
   z-index: 15;
+  -webkit-box-shadow: 2px 2px 4px #cecece;
+  -moz-box-shadow: 2px 2px 4px #cecece;
   box-shadow: 2px 2px 4px #cecece;
 }
-.ircclient #chat .ircwrapper .toolbar .logo {
-  width: 56px;
-  height: 56px;
+.ircclient #chat .ircwrapper .toolbar .open_settings {
+  width: 36px;
+  height: 36px;
   display: inline-block;
-  margin: 0 5px;
+  position: absolute;
+  right: 10px;
+  top: 10px;
+  cursor: pointer;
+  background-image: url("../image/settings.svg");
+  background-repeat: no-repeat;
+  background-size: contain;
+  -webkit-transition: transform 0.2s linear;
+  -moz-transition: transform 0.2s linear;
+  -ms-transition: transform 0.2s linear;
+  -o-transition: transform 0.2s linear;
+  transition: transform 0.2s linear;
+}
+.ircclient #chat .ircwrapper .toolbar .open_settings:hover {
+  transform: rotateZ(-90deg);
 }
 .ircclient #chat .ircwrapper .toolbar .tabby {
   display: inline-block;
   height: 56px;
   position: absolute;
-  left: 60px;
-  right: 0;
+  right: 45px;
+  left: 0;
   white-space: nowrap;
   overflow-x: auto;
   overflow-y: hidden;
@@ -130,8 +153,15 @@ body {
   padding: 10px;
   line-height: 25px;
   background-color: #29e1ff;
+  -webkit-transition: background-color 0.2s linear;
+  -moz-transition: background-color 0.2s linear;
+  -ms-transition: background-color 0.2s linear;
+  -o-transition: background-color 0.2s linear;
+  transition: background-color 0.2s linear;
   border-radius: 5px;
   border: 1px solid #00d0ea;
+  -webkit-box-shadow: inset 4px 4px 8px #44ebff;
+  -moz-box-shadow: inset 4px 4px 8px #44ebff;
   box-shadow: inset 4px 4px 8px #44ebff;
   color: #fff;
   cursor: pointer;
@@ -143,6 +173,8 @@ body {
   height: 18px;
   background-color: #bf0000;
   border: 1px solid #b00;
+  -webkit-box-shadow: inset 2px 2px 3px #f00;
+  -moz-box-shadow: inset 2px 2px 3px #f00;
   box-shadow: inset 2px 2px 3px #f00;
   text-align: center;
   font-size: 12px;
@@ -158,15 +190,19 @@ body {
   width: 12px;
   text-align: center;
   color: #ff3d3d;
-  float: right;
+  margin-left: 5px;
 }
 .ircclient #chat .ircwrapper .toolbar .tabby .tab:hover {
   background-color: #63e9ff;
+  -webkit-box-shadow: inset 4px 4px 8px #86f2ff;
+  -moz-box-shadow: inset 4px 4px 8px #86f2ff;
   box-shadow: inset 4px 4px 8px #86f2ff;
 }
 .ircclient #chat .ircwrapper .toolbar .tabby .tab.active {
   background-color: #00b9d8;
   border: 1px solid #009aad;
+  -webkit-box-shadow: inset 4px 4px 8px #009caf;
+  -moz-box-shadow: inset 4px 4px 8px #009caf;
   box-shadow: inset 4px 4px 8px #009caf;
   color: #fff;
 }
@@ -223,6 +259,7 @@ body {
   overflow-y: auto;
   white-space: pre-wrap;
   word-wrap: break-word;
+  padding: 5px;
 }
 .ircclient #chat .ircwrapper .chatarea .nicklist {
   width: 280px;
@@ -263,6 +300,23 @@ body {
   width: 25px;
   display: inline-block;
 }
+.ircclient #chat .ircwrapper .chatarea .settings {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: 20px;
+  width: 60%;
+  min-width: 360px;
+  margin: auto;
+  overflow: auto;
+}
+.ircclient #chat .ircwrapper .chatarea .settings .grade1,
+.ircclient #chat .ircwrapper .chatarea .settings .grade2,
+.ircclient #chat .ircwrapper .chatarea .settings .grade3 {
+  text-align: left;
+}
 .ircclient #chat .ircwrapper .chatarea.vnicks .nicklist {
   display: block;
 }
@@ -310,6 +364,8 @@ body {
   font-size: 120%;
   border: 1px solid #929292;
   border-left: 0;
+  -webkit-box-shadow: inset 4px 4px 8px #d8d8d8;
+  -moz-box-shadow: inset 4px 4px 8px #d8d8d8;
   box-shadow: inset 4px 4px 8px #d8d8d8;
 }
 .ircclient #chat .ircwrapper .input .sendbutton {
diff --git a/public/image/settings.svg b/public/image/settings.svg
index bbe7c2b..44ea38d 100644
--- a/public/image/settings.svg
+++ b/public/image/settings.svg
@@ -23,9 +23,9 @@
 			c4.4,3.1,10.2,3.3,14.8,0.6c13-7.8,27.1-13.8,41.8-17.6c5.1-1.4,9-5.6,9.9-10.8l7.2-42.3c0.2-1.3,1.3-2.2,2.6-2.2h42.1
 			c1.3,0,2.4,0.9,2.6,2.2l7,41.7c0.9,5.3,4.8,9.6,10,10.9c15.1,3.8,29.5,9.7,42.9,17.6c4.6,2.7,10.3,2.5,14.7-0.6l34.5-24.8
 			c0.5-0.3,1-0.5,1.5-0.5c0.4,0,1.2,0.1,1.9,0.8l29.8,29.8c0.9,0.9,1,2.3,0.3,3.4l-24.7,34.7c-3.1,4.3-3.3,10.1-0.6,14.7
-			c7.8,13.1,13.6,27.2,17.4,41.9c1.3,5.2,5.6,9.1,10.8,9.9l42,7.1c1.3,0.2,2.2,1.3,2.2,2.6v42.1H451.9z"/>
+			c7.8,13.1,13.6,27.2,17.4,41.9c1.3,5.2,5.6,9.1,10.8,9.9l42,7.1c1.3,0.2,2.2,1.3,2.2,2.6v42.1H451.9z" fill="#FFFFFF"/>
 		<path d="M239.4,136.001c-57,0-103.3,46.3-103.3,103.3s46.3,103.3,103.3,103.3s103.3-46.3,103.3-103.3S296.4,136.001,239.4,136.001
-			z M239.4,315.601c-42.1,0-76.3-34.2-76.3-76.3s34.2-76.3,76.3-76.3s76.3,34.2,76.3,76.3S281.5,315.601,239.4,315.601z"/>
+			z M239.4,315.601c-42.1,0-76.3-34.2-76.3-76.3s34.2-76.3,76.3-76.3s76.3,34.2,76.3,76.3S281.5,315.601,239.4,315.601z" fill="#FFFFFF"/>
 	</g>
 </g>
 </svg>
diff --git a/public/index.html b/public/index.html
index 5c07391..e6050a9 100644
--- a/public/index.html
+++ b/public/index.html
@@ -40,16 +40,33 @@
 			<div class="coverwindow" id="chat" style="display: none;">
 				<div class="ircwrapper">
 					<div class="toolbar">
-						<span class="logo"></span>
-						<div class="tabby">
-							
-						</div>
+						<div class="tabby"></div>
+						<span class="open_settings"></span>
 					</div>
 					<div class="chatarea">
 						<div class="smsc-nicklistbtn"></div>
 						<div class="topicbar"></div>
 						<div class="letterbox"></div>
 						<div class="nicklist"></div>
+						<div class="settings" style="display: none;">
+							<h1 class="grade1">Teemant Settings</h1>
+							<h1 class="grade2">Chat</h1>
+							<p>Shared input field <input type="checkbox" name="colors" id="s_sharedInput"></p>
+							<h1 class="grade3">Colors</h1>
+							<p>Enable colored messages <input type="checkbox" name="colors" id="s_colors" checked="checked"></p>
+							<p>Color nicknames <input type="checkbox" name="colored_nicks" id="s_colorNicknames" checked="checked"></p>
+							<p>Color nicknames in the user list<input type="checkbox" name="colored_nicks_list" id="s_colorNicklist"></p>
+							<h1 class="grade3">Timestamps</h1>
+							<p>Enable timestamps on messages <input type="checkbox" name="timestamps" id="s_timestamps" checked="checked"></p>
+							<label for="timestamp_format">Timestamp format</label>
+							<input type="text" name="timestamp_format" id="s_timestampFormat" value="HH:mm:ss"><br>
+							<i style="font-size: 80%;">`<code>hh:mm:ss TT</code>` would be 12-hour format with PM/AM</i>
+							<h1 class="grade3">Themes</h1>
+							<p><i>Coming soon!</i></p>
+							<br>
+							<p><button class="regular_btn" id="save_settings">Save Settings</button></p>
+							<span class="grade3" id="settings_status"></span>
+						</div>
 					</div>
 					<div class="input">
 						<div class="my_nickname">Test</div>
diff --git a/public/js/main.js b/public/js/main.js
index e95aba3..7cf13c9 100644
--- a/public/js/main.js
+++ b/public/js/main.js
@@ -1,14 +1,20 @@
 window.irc = {
 	socketUp: false,
 	primaryFrame: null,
-	timestamps: true,
-	timestampFormat: "HH:mm:ss",
+	config: {
+		colors: true,
+		sharedInput: false,
+		timestamps: true,
+		timestampFormat: "HH:mm:ss",
+		colorNicknames: true,
+		colorNicklist: false
+	},
 	serverData: {},
 	serverChatQueue: {},
 	chatType: "simple",
 };
 
-window.clientdom = {connector: {}};
+window.clientdom = {connector: {}, settings: {}};
 
 window.colorizer = {
 	theme: {
@@ -22,6 +28,9 @@ window.colorizer = {
 		let s = rand(colorizer.theme.S[0], colorizer.theme.S[1]); // saturation 30-100%
 		let l = rand(colorizer.theme.L[0], colorizer.theme.L[1]); // lightness 30-70%
 		return 'hsl(' + h + ',' + s + '%,' + l + '%)';
+	},
+	strip: function(message) {
+		return message.replace(/(\x03\d{0,2}(,\d{0,2})?)/g, '').replace(/[\x0F\x02\x16\x1F]/g, '');
 	}
 }
 
@@ -249,10 +258,14 @@ let composer = {
 			let element = document.createElement('div');
 			element.className = "message type_simple m_"+type;
 
-			if(irc.timestamps)
-				element.innerHTML += "<span class='timestamp'>"+time.format(irc.timestampFormat)+"</span>&nbsp;";
+			if(irc.config.timestamps)
+				element.innerHTML += "<span class='timestamp'>"+time.format(irc.config.timestampFormat)+"</span>&nbsp;";
+
+			if(irc.config.colors)
+				message = colorizer.stylize(message);
+			else
+				message = colorizer.strip(message);
 
-			message = colorizer.stylize(message);
 			message = linkify(message);
 
 			switch(type) {
@@ -284,18 +297,19 @@ let composer = {
 					break;
 			}
 
-			if(sender) {
-				let sndr1 = element.querySelector('.sender');
-				if(sndr1)
-					sndr1.style.color = colorizer.get_random_color(sndr1.innerHTML);
-			}
+			if(irc.config.colorNicknames == true) {
+				if(sender) {
+					let sndr1 = element.querySelector('.sender');
+					if(sndr1)
+						sndr1.style.color = colorizer.get_random_color(sndr1.innerHTML);
+				}
 
-			let sndr2 = element.querySelectorAll('.nick');
-			if(sndr2.length > 0)
-				for(let a in sndr2)
-					if(sndr2[a] && sndr2[a]['style'])
-						sndr2[a].style.color = colorizer.get_random_color(sndr2[a].innerHTML);
-			
+				let sndr2 = element.querySelectorAll('.nick');
+				if(sndr2.length > 0)
+					for(let a in sndr2)
+						if(sndr2[a] && sndr2[a]['style'])
+							sndr2[a].style.color = colorizer.get_random_color(sndr2[a].innerHTML);
+			}
 			return element;
 		}
 	}
@@ -345,7 +359,11 @@ class Nicklist {
 		else
 			construct += "<span class='no-prefix'>&nbsp;</span>";
 
-		construct += "<span class='nickname'>"+nick.nickname+"</span>";
+		if(irc.config.colorNicklist)
+			construct += "<span class='nickname' style='color: "+colorizer.get_random_color(nick.nickname)+";'>"+nick.nickname+"</span>";
+		else
+			construct += "<span class='nickname'>"+nick.nickname+"</span>";
+
 		str.innerHTML = construct;
 		clientdom.nicklist.appendChild(str);
 	}
@@ -556,8 +574,10 @@ class Buffer {
 		this.active = false;
 		this.alive = true;
 
-		this.tab = new Tab(this);
-		this.tab.renderTab(clientdom.tabby);
+		if(type != "settings") {
+			this.tab = new Tab(this);
+			this.tab.renderTab();
+		}
 
 		if(type == "channel")
 			this.nicklist = new Nicklist(this, clientdom.nicklist);
@@ -573,6 +593,9 @@ class Buffer {
 		clientdom.nicklist.innerHTML = "";
 		clientdom.topicbar.innerHTML = "";
 
+		if(!irc.config.sharedInput)
+			clientdom.input.value = this.input;
+
 		if(this.nicklist) {
 			addClass(clientdom.chat, 'vnicks');
 			this.nicklist.render();
@@ -580,7 +603,10 @@ class Buffer {
 
 		if(this.topic != null && this.topic != "") {
 			addClass(clientdom.chat, 'vtopic');
-			clientdom.topicbar.innerHTML = linkify(colorizer.stylize(this.topic));
+			if(irc.config.colors)
+				clientdom.topicbar.innerHTML = linkify(colorizer.stylize(this.topic));
+			else
+				clientdom.topicbar.innerHTML = linkify(colorizer.strip(this.topic));
 		}
 
 		this.renderMessages();
@@ -621,7 +647,10 @@ class Buffer {
 
 	topicChange(topic) {
 		if(this.active) {
-			clientdom.topicbar.innerHTML = linkify(colorizer.stylize(topic));
+			if(irc.config.colors)
+				clientdom.topicbar.innerHTML = linkify(colorizer.stylize(topic));
+			else
+				clientdom.topicbar.innerHTML = linkify(colorizer.strip(topic));
 
 			if(this.topic == null)
 				addClass(clientdom.chat, "vtopic");
@@ -654,6 +683,9 @@ class Buffer {
 		else
 			this.wasAtBottom = false;
 
+		if(!irc.config.sharedInput)
+			this.input = clientdom.input.value;
+
 		this.tab.setActive(false);
 		this.lastscroll = clientdom.letterbox.scrollTop;
 		this.active = false;
@@ -672,6 +704,114 @@ class Buffer {
 	}
 }
 
+class Settings extends Buffer {
+	constructor() {
+		super("", "settings", "Settings", "settings");
+		this.tab = null;
+		this.isOpen = false;
+		this.timeout = null;
+
+		clientdom.settings.save.onclick = (e) => {
+			this.saveSpecified();
+		}
+
+		clientdom.settings.open.onclick = (e) => {
+			this.open();
+		}
+	}
+
+	open() {
+		if(this.isOpen) {
+			irc.chat.render(this);
+			return;
+		}
+
+		this.tab = new Tab(this);
+		this.tab.renderTab();
+		irc.chat.buffers.push(this);
+		irc.chat.render(this);
+		this.isOpen = true;
+	}
+
+	closeBuffer() {
+		irc.chat.closeBuffer(this);
+		this.tab = null;
+		this.isOpen = false;
+	}
+
+	saveSpecified() {
+		if(this.timeout)
+			clearTimeout(this.timeout);
+
+		for(let key in irc.config) {
+			let value = irc.config[key];
+			let type = typeof(value);
+
+			if(type == "boolean")
+				irc.config[key] = clientdom.settings[key].checked;
+			else
+				irc.config[key] = clientdom.settings[key].value;
+		}
+		clientdom.settings.saveStatus.innerHTML = "<span class='success'>Settings saved!</span>";
+
+		if("localStorage" in window) {
+			window.localStorage['teemant_settings'] = JSON.stringify(irc.config);
+		}
+
+		this.timeout = setTimeout(function() {
+			clientdom.settings.saveStatus.innerHTML = "";
+		}, 3000);
+	}
+
+	setInitialValues() {
+		if("localStorage" in window) {
+			if(window.localStorage['teemant_settings']) {
+				try {
+					let settings = JSON.parse(window.localStorage.teemant_settings);
+					for(let key in irc.config) {
+						let value = irc.config[key];
+						let type = typeof(value);
+						if(settings[key]) {
+							if(type == "boolean")
+								clientdom.settings[key].checked = settings[key];
+							else
+								clientdom.settings[key].value = settings[key];
+						}
+					}
+					this.saveSpecified();
+					return;
+				} catch(e) {}
+			}
+		}
+
+		for(let key in irc.config) {
+			let value = irc.config[key];
+			let type = typeof(value);
+
+			if(type == "boolean")
+				clientdom.settings[key].checked = value;
+			else
+				clientdom.settings[key].value = value;
+		}
+	}
+
+	switchOff() {
+		this.active = false;
+		this.tab.setActive(false);
+		clientdom.settings.frame.style.display = "none";
+	}
+
+	render() {
+		this.active = true;
+		this.tab.setActive(true);
+		clientdom.chat.className = "chatarea";
+		clientdom.nicklist.innerHTML = "";
+		clientdom.topicbar.innerHTML = "";
+		clientdom.letterbox.innerHTML = "";
+		clientdom.settings.frame.style.display = "block";
+	}
+}
+
 class IRCConnector {
 	constructor() {
 		this.formLocked = false;
@@ -1311,6 +1451,14 @@ window.onpopstate = parseURL;
 window.onload = function() {
 	irc.primaryFrame = document.querySelector('.ircclient');
 
+	clientdom.settings['frame'] = irc.primaryFrame.querySelector('.settings');
+
+	for(let key in irc.config) {
+		clientdom.settings[key] = clientdom.settings.frame.querySelector('#s_'+key);
+	}
+
+	clientdom.settings['save'] = clientdom.settings.frame.querySelector('#save_settings');
+	clientdom.settings['saveStatus'] = clientdom.settings.frame.querySelector('#settings_status');
 	clientdom.connector['frame'] = irc.primaryFrame.querySelector('#authdialog');
 	clientdom.connector['messenger'] = clientdom.connector.frame.querySelector('#connmsg');
 	clientdom.connector['form'] = clientdom.connector.frame.querySelector('#IRCConnector');
@@ -1329,13 +1477,16 @@ window.onload = function() {
 	clientdom['chat'] = clientdom.frame.querySelector('.chatarea');
 	clientdom['topicbar'] = clientdom.chat.querySelector('.topicbar');
 	clientdom['smsctrig'] = clientdom.chat.querySelector('.smsc-nicklistbtn');
+	clientdom.settings['open'] = irc.primaryFrame.querySelector('.open_settings');
 
 	irc.socket = io.connect();
 
+	irc.settings = new Settings();
 	irc.auther = new IRCConnector();
 	irc.chat = new IRCChatWindow();
 
 	parseURL();
+	irc.settings.setInitialValues();
 
 	irc.socket.on('connect', function (data) {
 		irc.socketUp = true;
diff --git a/public/main.styl b/public/main.styl
index 2f44216..cf05655 100644
--- a/public/main.styl
+++ b/public/main.styl
@@ -1,4 +1,21 @@
 // Run `stylus -w main.styl -o css` to compile
+props(prop, args)
+    -webkit-{prop} args
+    -moz-{prop} args
+    -ms-{prop} args
+    -o-{prop} args
+    {prop} args
+    
+props2(prop, args)
+    -webkit-{prop} args
+    -moz-{prop} args
+    {prop} args
+    
+transition()
+    props('transition', arguments)
+
+box-shadow()
+    props2('box-shadow', arguments)
 
 body
     margin: 0
@@ -50,7 +67,7 @@ body
             padding: 15px
             background-color: #f7f7f7;
             border: 1px solid #dadada;
-            box-shadow: 4px 4px 18px #d6d6d6;
+            box-shadow 4px 4px 18px #d6d6d6;
             .msg.error
                 color: red;
             label
@@ -63,7 +80,7 @@ body
                 width: 300px;
                 border-radius: 5px;
                 border: 1px solid #d2d2d2;
-                box-shadow: inset 2px 2px 4px #dcdcdc;
+                box-shadow inset 2px 2px 4px #dcdcdc;
             input[type="submit"]
                 width: 318px;
                 padding: 12px;
@@ -86,6 +103,7 @@ body
                     background: -webkit-linear-gradient(top, rgba(196,239,252,1) 0%,rgba(127,213,239,1) 40%,rgba(57,183,221,1) 100%);
                     background: linear-gradient(to bottom, rgba(196,239,252,1) 0%,rgba(127,213,239,1) 40%,rgba(57,183,221,1) 100%);
     #chat
+        overflow: hidden;
         .ircwrapper
             position: absolute
             width: 100%
@@ -95,18 +113,27 @@ body
                 background-color: #00c7e0
                 position: relative
                 z-index: 15
-                box-shadow: 2px 2px 4px #cecece
-                .logo
-                    width: 56px;
-                    height: 56px;
+                box-shadow 2px 2px 4px #cecece
+                .open_settings
+                    width: 36px;
+                    height: 36px;
                     display: inline-block;
-                    margin: 0 5px;
+                    position: absolute;
+                    right: 10px;
+                    top: 10px;
+                    cursor: pointer;
+                    background-image: url(../image/settings.svg);
+                    background-repeat: no-repeat;
+                    background-size: contain;
+                    transition transform 0.2s linear
+                    &:hover
+                        transform: rotateZ(-90deg);
                 .tabby
                     display: inline-block;
                     height: 56px;
                     position: absolute;
-                    left: 60px;
-                    right: 0;
+                    right: 45px;
+                    left: 0;
                     white-space: nowrap;
                     overflow-x: auto;
                     overflow-y: hidden;
@@ -119,9 +146,10 @@ body
                         padding: 10px;
                         line-height: 25px;
                         background-color: #29e1ff;
+                        transition background-color 0.2s linear
                         border-radius: 5px;
                         border: 1px solid #00d0ea;
-                        box-shadow: inset 4px 4px 8px #44ebff;
+                        box-shadow inset 4px 4px 8px #44ebff;
                         color: #fff;
                         cursor: pointer;
                         font-weight: 600;
@@ -131,7 +159,7 @@ body
                             height: 18px;
                             background-color: #bf0000;
                             border: 1px solid #b00;
-                            box-shadow: inset 2px 2px 3px #f00;
+                            box-shadow inset 2px 2px 3px #f00;
                             text-align: center;
                             font-size: 12px;
                             margin: 0 5px;
@@ -144,14 +172,14 @@ body
                             width: 12px;
                             text-align: center;
                             color: #ff3d3d;
-                            float: right;
+                            margin-left: 5px
                         &:hover
                             background-color: #63e9ff;
-                            box-shadow: inset 4px 4px 8px #86f2ff;
+                            box-shadow inset 4px 4px 8px #86f2ff;
                         &.active
                             background-color: #00b9d8;
                             border: 1px solid #009aad;
-                            box-shadow: inset 4px 4px 8px #009caf;
+                            box-shadow inset 4px 4px 8px #009caf;
                             color: #ffffff;
                             &:hover
                                 background-color: #00c7e8;
@@ -201,6 +229,7 @@ body
                     overflow-y: auto;
                     white-space: pre-wrap;
                     word-wrap: break-word;
+                    padding: 5px;
                 .nicklist
                     width: 280px;
                     position: absolute;
@@ -234,6 +263,19 @@ body
                         .no-prefix
                             width: 25px;
                             display: inline-block;
+                .settings
+                    position: absolute;
+                    top: 0;
+                    bottom: 0;
+                    left: 0;
+                    right: 0;
+                    padding: 20px;
+                    width: 60%;
+                    min-width: 360px;
+                    margin: auto;
+                    overflow: auto;
+                    .grade1, .grade2, .grade3
+                        text-align: left;
                 &.vnicks
                     .nicklist
                         display: block;
@@ -275,7 +317,7 @@ body
                         font-size: 120%
                         border: 1px solid #929292
                         border-left: 0
-                        box-shadow: inset 4px 4px 8px #d8d8d8
+                        box-shadow inset 4px 4px 8px #d8d8d8
                 .sendbutton
                     background-image: url(../image/send.svg);
                     background-repeat: no-repeat;
diff --git a/server/irc.js b/server/irc.js
index 2ec3158..2fb76f4 100644
--- a/server/irc.js
+++ b/server/irc.js
@@ -186,7 +186,7 @@ class IRCConnectionHandler {
 				this.conn.emit('pass_to_client', {type: "nick_change", nick: line.user.nickname, newNick: line.arguments[0], server: serverName});
 				break;
 			case "KICK":
-				this.conn.emit('pass_to_client', {type: "event_kick_channel", user: line.user, channel: line.arguments[0], kickee: line.arguments[1], server: serverName});
+				this.conn.emit('pass_to_client', {type: "event_kick_channel", user: line.user, channel: line.arguments[0], reason: line.trailing, kickee: line.arguments[1], server: serverName});
 				break;
 			case "TOPIC":
 				this.conn.emit('pass_to_client', {type: "channel_topic", channel: line.arguments[0], set_by: line.user.nickname, topic: line.trailing, server: serverName});