Rollback span elements to label & apply correct styling

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

@@ -1302,7 +1302,7 @@ label.required::after {
 		&.toggle {
 			font-size: 0;
 
-			> span {
+			> label {
 				display: inline-block;
 				width: calc(~"100% - 40px");
 				font-size: 14px;

packages/rocketchat-ui-sidenav/client/createCombinedFlex.html

@@ -8,18 +8,18 @@
 		<div class="wrapper">
 			<h4>{{_ "Create_new" }}</h4>
 			<div class="input-line no-icon">
-				<span>{{_ "Name"}}</span>
+				<label for="channel-name">{{_ "Name"}}</label>
 				<input type="text" id="channel-name" class="required" dir="auto" placeholder="{{_ 'Enter_name_here'}}">
 			</div>
 			<div class="input-line toggle">
-				<span>{{_ "Private"}}</span>
+				<label for="channel-type">{{_ "Private"}}</label>
 				<div class="input checkbox toggle">
 					<input type="checkbox" id="channel-type" {{privateSwitchDisabled}} {{privateSwitchChecked}}>
 					<label class="color-tertiary-font-color" for="channel-type"></label>
 				</div>
 			</div>
 			<div class="input-line toggle">
-				<span>{{_ "Read_only_channel"}}</span>
+				<label for="channel-ro">{{_ "Read_only_channel"}}</label>
 				<div class="input checkbox toggle">
 					<input type="checkbox" id="channel-ro">
 					<label class="color-tertiary-font-color" for="channel-ro"></label>

packages/rocketchat-ui-sidenav/client/createCombinedFlex.js

@@ -111,7 +111,6 @@ Template.createCombinedFlex.events({
 		if (!err) {
 			return Meteor.call(createRoute, name, instance.selectedUsers.get(), readOnly, function(err, result) {
 				if (err) {
-					console.log(err);
 					if (err.error === 'error-invalid-name') {
 						instance.error.set({ invalid: true });
 						return;
@@ -137,7 +136,6 @@ Template.createCombinedFlex.events({
 				return FlowRouter.go(successRoute, { name }, FlowRouter.current().queryParams);
 			});
 		} else {
-			console.log(err);
 			return instance.error.set({ fields: err });
 		}
 	}