Solving requested changes by rodrigok and karlprieb at PR #7517

.meteor/versions

@@ -44,7 +44,6 @@ email@1.2.3
 emojione:emojione@3.0.3
 facebook-oauth@1.3.2
 fastclick@1.0.13
-fourseven:scss@4.5.4
 francocatena:status@1.5.3
 geojson-utils@1.0.10
 github-oauth@1.2.0

packages/rocketchat-push-notifications/client/views/pushNotificationsFlexTab.js

@@ -257,14 +257,14 @@ Template.pushNotificationsFlexTab.events({
 		e.preventDefault();
 
 		let audio = $(e.currentTarget).data('play');
+		const user = Meteor.user();
 
 		if (!audio || audio === 'none') {
-			audio = Meteor.user().settings.preferences.newMessageNotification || 'chime';
+			audio = user && user.settings && user.settings.preferences && user.settings.preferences.newMessageNotification || 'chime';
 		}
 
 		if (audio && audio !== 'none') {
-
-			const audioVolume = Meteor.user().settings.preferences.notificationsSoundVolume || 100;
+			const audioVolume = user && user.settings && user.settings.preferences && user.settings.preferences.notificationsSoundVolume || 100;
 			const $audio = $(`audio#${ audio }`);
 
 			if ($audio && $audio[0] && $audio[0].play) {
@@ -278,10 +278,10 @@ Template.pushNotificationsFlexTab.events({
 		e.preventDefault();
 
 		const audio = $(e.currentTarget).val();
+		const user = Meteor.user();
 
 		if (audio && audio !== 'none') {
-
-			const audioVolume = Meteor.user().settings.preferences.notificationsSoundVolume || 100;
+			const audioVolume = user && user.settings && user.settings.preferences && user.settings.preferences.notificationsSoundVolume || 100;
 			const $audio = $(`audio#${ audio }`);
 
 			if ($audio && $audio[0] && $audio[0].play) {

packages/rocketchat-slider/rocketchat-slider.html

@@ -1,6 +1,6 @@
 <template name="slider">
 	<div class="range-slider">
-		<input class="range-slider__range" type="range" id="{{id}}" value="{{value}}" min="{{min}}" max="{{max}}">
-		<span class="range-slider__value" id="{{id}}__value"></span>
+		<input class="range-slider-range tertiary-background-color" type="range" id="{{id}}" value="{{value}}" min="{{min}}" max="{{max}}">
+		<span class="range-slider-value" id="{{id}}_value"></span>
 	</div>
 </template>

packages/rocketchat-slider/rocketchat-slider.js

@@ -4,7 +4,7 @@ Template.slider.onRendered(function() {
 	const rangeSlider = function() {
 
 		const range = $(`#${ params.id }`);
-		const labelValue = $(`#${ params.id }__value`);
+		const labelValue = $(`#${ params.id }_value`);
 
 		labelValue.html(params.value);
 

packages/rocketchat-theme/client/imports/slider.css

@@ -1,45 +1,37 @@
-*,
-*::before,
-*::after {
-	box-sizing: border-box;
-}
-
 .range-slider {
-	margin: 0 0 0 0%;
+	margin: 0;
 	width: 100%;
 }
 
-.range-slider__range {
-	-webkit-appearance: none;
-	width: calc(100% - (73px));
+.range-slider-range {
+	appearance: none;
+	width: calc(100% - 73px);
 	height: 10px;
 	border-radius: 5px;
 	outline: none;
 	padding: 0;
 	margin: 0;
 }
 
-.range-slider__range::-webkit-slider-thumb {
-	-webkit-appearance: none;
+.range-slider-range::-webkit-slider-thumb {
+	appearance: none;
 	width: 20px;
 	height: 20px;
 	border-radius: 50%;
 	cursor: pointer;
-	-webkit-transition: background 0.15s ease-in-out;
 	transition: background 0.15s ease-in-out;
 }
 
-.range-slider__range::-moz-range-thumb {
+.range-slider-range::-moz-range-thumb {
 	width: 20px;
 	height: 20px;
 	border: 0;
 	border-radius: 50%;
 	cursor: pointer;
-	-webkit-transition: background 0.15s ease-in-out;
 	transition: background 0.15s ease-in-out;
 }
 
-.range-slider__value {
+.range-slider-value {
 	display: inline-block;
 	position: relative;
 	width: 60px;
@@ -50,7 +42,7 @@
 	margin-left: 8px;
 }
 
-.range-slider__value::after {
+.range-slider-value::after {
 	position: absolute;
 	top: 8px;
 	left: -7px;
@@ -62,11 +54,8 @@
 	content: '';
 }
 
-::-moz-range-track {
-	border: 0;
-}
-
-input::-moz-focus-inner,
-input::-moz-focus-outer {
+.range-slider-range::-moz-range-track,
+.range-slider-range::-moz-focus-inner,
+.range-slider-range::-moz-focus-outer {
 	border: 0;
 }

packages/rocketchat-theme/server/colors.less

@@ -916,45 +916,41 @@ label.required::after {
  * Input Range Slider
  */
 
-.range-slider__range {
-	background-color: @tertiary-background-color;
-}
-
-.range-slider__range::-webkit-slider-thumb {
+.range-slider-range::-webkit-slider-thumb {
 	background-color: @primary-background-color;
 }
 
-.range-slider__range::-webkit-slider-thumb:hover {
+.range-slider-range::-webkit-slider-thumb:hover {
 	background-color: darken(@success-color, 30%);
 }
 
-.range-slider__range:active::-webkit-slider-thumb {
+.range-slider-range:active::-webkit-slider-thumb {
 	background-color: darken(@success-color, 10%);
 }
 
-.range-slider__range::-moz-range-thumb {
+.range-slider-range::-moz-range-thumb {
 	background-color: @primary-background-color;
 }
 
-.range-slider__range::-moz-range-thumb:hover {
+.range-slider-range::-moz-range-thumb:hover {
 	background-color: darken(@success-color, 30%);
 }
 
-.range-slider__range:active::-moz-range-thumb {
+.range-slider-range:active::-moz-range-thumb {
 	background-color: darken(@success-color, 10%);
 }
 
-.range-slider__value {
+.range-slider-value {
 	color: lighten(@tertiary-background-color, 50%);
 	background-color: @primary-background-color;
 }
 
-.range-slider__value::after {
+.range-slider-value::after {
 	border-top-color: transparent;
 	border-right-color: @primary-background-color;
 	border-bottom-color: transparent;
 }
 
-::-moz-range-track {
+.range-slider-range::-moz-range-track {
 	background-color: @tertiary-background-color;
 }

packages/rocketchat-ui-account/client/accountPreferences.js

@@ -1,6 +1,5 @@
 /*globals defaultUserLanguage, KonchatNotification */
 import toastr from 'toastr';
-
 Template.accountPreferences.helpers({
 	audioAssets() {
 		return (RocketChat.CustomSounds && RocketChat.CustomSounds.getList && RocketChat.CustomSounds.getList()) || [];
@@ -87,19 +86,16 @@ Template.accountPreferences.onCreated(function() {
 		this.useEmojis = new ReactiveVar(user.settings.preferences.desktopNotificationDuration == null || user.settings.preferences.useEmojis);
 	}
 	let instance = this;
-
 	this.autorun(() => {
 		if (instance.useEmojis && instance.useEmojis.get()) {
 			Tracker.afterFlush(() => $('#convertAsciiEmoji').show());
 		} else {
 			Tracker.afterFlush(() => $('#convertAsciiEmoji').hide());
 		}
 	});
-
 	this.clearForm = function() {
 		this.find('#language').value = localStorage.getItem('userLanguage');
 	};
-
 	this.save = function() {
 		instance = this;
 		const data = {};