Replace minicolors by jscolor on livechat

Closes #5618

packages/rocketchat-livechat/client/views/app/livechatAppearance.html

@@ -12,7 +12,10 @@
 					</div>
 					<div class="input-line">
 						<label for="color">{{_ "Title_bar_color"}}</label>
-						<input type="text" class="preview-settings minicolors" name="color" id="color" value="{{color}}">
+						<div>
+							<input type="text" class="preview-settings colorpicker-input" name="color" id="color" value="{{color}}">
+							<span class="colorpicker-swatch border-component-color" style="background-color: {{color}}"></span>
+						</div>
 					</div>
 				</fieldset>
 				<fieldset>
@@ -40,7 +43,10 @@
 					</div>
 					<div class="input-line">
 						<label for="colorOffline">{{_ "Title_bar_color_offline"}}</label>
-						<input type="text" class="preview-settings minicolors" name="colorOffline" id="colorOffline" value="{{colorOffline}}">
+						<div>
+							<input type="text" class="preview-settings colorpicker-input" name="colorOffline" id="colorOffline" value="{{colorOffline}}">
+							<span class="colorpicker-swatch border-component-color" style="background-color: {{colorOffline}}"></span>
+						</div>
 					</div>
 					<div class="input-line">
 						<label for="emailOffline">{{_ "Email_address_to_send_offline_messages"}}</label>

packages/rocketchat-livechat/client/views/app/livechatAppearance.js

@@ -1,3 +1,5 @@
+/*globals jscolor*/
+/*eslint new-cap: ["error", { "newIsCapExceptions": ["jscolor"] }]*/
 import moment from 'moment';
 import toastr from 'toastr';
 
@@ -204,9 +206,6 @@ Template.livechatAppearance.events({
 		instance.offlineSuccessMessage.set(RocketChat.settings.get('Livechat_offline_success_message'));
 		instance.titleOffline.set(RocketChat.settings.get('Livechat_offline_title'));
 		instance.colorOffline.set(RocketChat.settings.get('Livechat_offline_title_color'));
-
-		instance.$('input.preview-settings[name=color]').minicolors('value', instance.color.get());
-		instance.$('input.preview-settings[name=colorOffline]').minicolors('value', instance.colorOffline.get());
 	},
 	'submit .rocket-form'(e, instance) {
 		e.preventDefault();
@@ -260,9 +259,8 @@ Template.livechatAppearance.events({
 
 Template.livechatAppearance.onRendered(function() {
 	Meteor.setTimeout(() => {
-		$('input.minicolors').minicolors({
-			theme: 'rocketchat',
-			letterCase: 'uppercase'
+		$('.colorpicker-input').each((index, el) => {
+			new jscolor(el);
 		});
 	}, 500);
 });

packages/rocketchat-livechat/package.js

@@ -27,6 +27,7 @@ Package.onUse(function(api) {
 	api.use('rocketchat:authorization');
 	api.use('rocketchat:logger');
 	api.use('rocketchat:api');
+	api.use('rocketchat:theme');
 	api.use('rocketchat:streamer');
 	api.use('konecty:user-presence');
 	api.use('rocketchat:ui');

packages/rocketchat-theme/client/imports/rtl.less

@@ -739,14 +739,6 @@
 		}
 	}
 
-	.minicolors-theme-rocketchat {
-		.minicolors-swatch {
-			.right(1px);
-			border-radius: 0 5px 5px 0;
-			border-width: 0 0 0 1px;
-		}
-	}
-
 	.code-mirror-box {
 		direction: ltr;