create error-border and error-background class

packages/rocketchat-channel-settings-mail-messages/client/views/mailMessagesInstructions.html

@@ -37,13 +37,13 @@
 					</div>
 				</fieldset>
 			</form>
-			<div class="error error-missing-to alert alert-danger error-color" style="display: none">
+			<div class="error error-missing-to alert error-color error-background error-border" style="display: none">
 				{{_ "Mail_Message_Missing_to"}}
 			</div>
-			<div class="error error-invalid-emails alert alert-danger error-color" style="display: none">
+			<div class="error error-invalid-emails alert error-color error-background error-border" style="display: none">
 				{{_ "Mail_Message_Invalid_emails" erroredEmails}}
 			</div>
-			<div class="error error-select alert alert-danger error-color" style="display: none">
+			<div class="error error-select alert error-color error-background error-border" style="display: none">
 				{{{_ "Mail_Message_No_messages_selected_select_all"}}}
 			</div>
 			<p style="margin-top: 30px">

packages/rocketchat-integrations/client/views/integrationsIncoming.html

@@ -87,7 +87,7 @@
 										<div class="title">
 											{{data.scriptError.name}}
 										</div>
-										<pre class="background-transparent-lightest error-color">{{data.scriptError.message}}</pre>
+										<pre class="script-error background-transparent-lightest error-color error-border">{{data.scriptError.message}}</pre>
 									</div>
 								{{/if}}
 							</div>

packages/rocketchat-integrations/client/views/integrationsOutgoing.html

@@ -113,7 +113,7 @@
 										<div class="title">
 											{{data.scriptError.name}}
 										</div>
-										<pre class="background-transparent-lightest error-color">{{data.scriptError.message}}</pre>
+										<pre class="script-error background-transparent-lightest error-color error-border">{{data.scriptError.message}}</pre>
 									</div>
 								{{/if}}
 							</div>

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

@@ -29,7 +29,7 @@
 			<span>{{_ "New_messages"}}</span>
 		</div>
 
-		<div class="error pending-color">
+		<div class="error error-color error-background">
 			<span></span>
 		</div>
 	</div>

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

@@ -6,7 +6,7 @@
 			<p class="offline-message">{{{offlineMessage}}}</p>
 
 			<form>
-				<div class="error pending-color">
+				<div class="error error-color error-background">
 					<span>{{{error}}}</span>
 				</div>
 

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

 <template name="register">
 	<div class="livechat-form">
-		<div class="error pending-color">
+		<div class="error error-color error-background">
 			<span>{{{error}}}</span>
 		</div>
 

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

@@ -4739,7 +4739,7 @@ body:not(.is-cordova) {
 		margin-top: 5px;
 	}
 
-	pre {
+	.script-error {
 		font-size: 12px;
 		font-weight: bold;
 		padding: 6px;

packages/rocketchat-theme/server/colors.less

@@ -113,10 +113,20 @@
 	background-color: @tertiary-background-color;
 }
 
+// Derivative Colors
+
 .color-tertiary-font-color {
 	color: @tertiary-font-color;
 }
 
+.error-background {
+	background-color: @error-background;
+}
+
+.error-border {
+	border-color: @error-border;
+}
+
 // transparent
 
 .background-transparent-darkest {
@@ -317,7 +327,6 @@ a:hover {
 }
 
 .error {
-	background-color: @error-background;
 	border-color: @error-color;
 }
 
@@ -365,10 +374,6 @@ a:hover {
 		background-color: @error-color;
 		color: white;
 	}
-
-	pre {
-		border-color: @error-border;
-	}
 }
 
 .code-mirror-box {
@@ -433,11 +438,6 @@ a:hover {
 
 .container-bars {
 	.upload-progress {
-		&.upload-error {
-			background-color: @error-background;
-			border-color: @error-border;
-		}
-
 		.upload-progress-progress {
 			background-color: @success-background;
 		}
@@ -850,11 +850,6 @@ i.status-offline {
  * Feedback and overlay content
  */
 
-.livechat-form .error,
-.offline .error {
-	background-color: @error-background;
-}
-
 .alert-warning {
 	color: darken(@pending-color, 25%);
 	background-color: @pending-background;
@@ -865,11 +860,6 @@ i.status-offline {
 	.linkColors(@link-font-color, darken(@link-font-color, 10%));
 }
 
-.alert-danger {
-	background-color: @error-background;
-	border-color: @error-border;
-}
-
 label.required::after {
 	color: @error-color;
 }

packages/rocketchat-ui-login/login/form.html

 <template name="loginForm">
 	{{#if state 'sandstorm'}}
-		<div class="alert alert-danger error-color">
+		<div class="alert error-color error-background error-border">
 			You must login to Sandstorm (on the top right) in order to access this chat.
 		</div>
 	{{else}}
@@ -14,7 +14,7 @@
 			{{else}}
 				{{ > loginServices }}
 				{{#if needsValidateEmail}}
-					<div class="alert alert-danger error-color">
+					<div class="alert error-color error-background error-border">
 						{{_ "You_need_confirm_email"}}
 					</div>
 				{{/if}}

packages/rocketchat-ui-login/username/username.html

@@ -7,17 +7,17 @@
 					<p>{{_ "Username_description"}}</p>
 				</header>
 				{{#if username.error}}
-					<div class="alert alert-danger error-color">
+					<div class="alert error-color error-background error-border">
 						{{{_ "error-field-unavailable" field=username.username}}}
 					</div>
 				{{/if}}
 				{{#if username.invalid}}
-					<div class="alert alert-danger error-color">
+					<div class="alert error-color error-background error-border">
 						{{{_ "Username_invalid" username.username}}}
 					</div>
 				{{/if}}
 				{{#if username.empty}}
-					<div class="alert alert-danger error-color">
+					<div class="alert error-color error-background error-border">
 						{{{_ "Username_cant_be_empty"}}}
 					</div>
 				{{/if}}

packages/rocketchat-ui/views/app/room.html

@@ -42,7 +42,7 @@
 					{{/if}}
 				{{/with}}
 				{{#each uploading}}
-					<div class="upload-progress color-primary-action-color background-component-color {{#if error}}upload-error{{/if}}">
+					<div class="upload-progress color-primary-action-color background-component-color {{#if error}}error-background error-border{{/if}}">
 						{{#if error}}
 							<div class="upload-progress-text">
 								{{error}}