create secondary-background-color class

packages/rocketchat-channel-settings/client/views/channelSettings.html

@@ -58,7 +58,7 @@
 											{{#unless $value.isToggle}}
 												{{#if $value.canEdit room}}
 													{{#if editing $key}}
-														<div class="buttons">
+														<div class="buttons secondary-background-color">
 															<button type="button" class="button cancel">
 																<i class="icon-cancel"></i>
 															</button>

packages/rocketchat-emoji-custom/admin/adminEmoji.html

@@ -21,7 +21,7 @@
 					{{{_ "Showing_results" customemoji.length}}}
 				</div>
 				<div class="list">
-					<table>
+					<table class="secondary-background-color">
 						<thead>
 							<tr class="admin-table-row">
 								<th class="content-background-color border-component-color">&nbsp;</th>
@@ -50,7 +50,7 @@
 			{{/unless}}
 		</div>
 	</section>
-	<section class="flex-tab">
+	<section class="flex-tab secondary-background-color">
 		{{> Template.dynamic template=flexTemplate data=flexData}}
 	</section>
 </template>

packages/rocketchat-theme/server/colors.less

@@ -61,6 +61,10 @@
 	background-color: @primary-action-color;
 }
 
+.secondary-background-color {
+	background-color: @secondary-background-color;
+}
+
 .border-component-color {
 	border-color: @component-color;
 }
@@ -159,14 +163,9 @@
  * Document components
  */
 
-.secondary-background-color {
-	background-color: @secondary-background-color;
-}
-
 .page-container {
 	table {
 		overflow: hidden;
-		background-color: @secondary-background-color;
 	}
 
 	tr:hover td {
@@ -391,7 +390,6 @@ a:hover {
  */
 .spotlight {
 	> .spotlight-input {
-		background-color: @secondary-background-color;
 		color: @secondary-font-color;
 
 		> i {
@@ -505,22 +503,9 @@ a:hover {
 		&.selectable .selected {
 			background-color: @selection-background;
 		}
-
-		.load-more span {
-			background-color: @secondary-background-color;
-		}
 	}
 }
 
-.message-popup {
-	background: @content-background-color;
-}
-
-.message-popup-title {
-	background-color: @secondary-background-color;
-	// border-bottom-color: #E7E7E7;
-}
-
 .popup-item {
 	&.selected {
 		color: @primary-action-contrast;
@@ -582,10 +567,6 @@ a:hover {
 		ul li:hover {
 			background-color: @tertiary-background-color;
 		}
-
-		.message-dropdown-close {
-			background-color: @secondary-background-color;
-		}
 	}
 
 	.is-bot,
@@ -674,8 +655,6 @@ a:hover {
  * Flex tabs / admin fly-out panels
  */
 .flex-tab {
-	background-color: @secondary-background-color;
-
 	input,
 	select,
 	textarea {
@@ -700,8 +679,6 @@ a:hover {
 
 	.channel-settings {
 		.buttons {
-			background-color: @secondary-background-color;
-
 			.button {
 				.buttonColors(lighten(@primary-font-color, 25%), @secondary-background-color);
 			}

packages/rocketchat-ui-admin/admin/adminInfo.html

@@ -9,7 +9,7 @@
 		<div class="content">
 			{{#if hasPermission 'view-statistics'}}
 				<h3>{{_ "Rocket.Chat"}}</h3>
-				<table class="statistics-table">
+				<table class="statistics-table secondary-background-color">
 					<tr class="admin-table-row">
 						<th class="content-background-color border-component-color">{{_ "Version"}}</th>
 						<td class="border-component-color">{{statistics.version}}</td>
@@ -46,7 +46,7 @@
 			{{/if}}
 
 			<h3>{{_ "Commit"}}</h3>
-			<table class="statistics-table">
+			<table class="statistics-table secondary-background-color">
 				<tr class="admin-table-row">
 					<th class="content-background-color border-component-color">{{_ "Hash"}}</th>
 					<td class="border-component-color">{{info.commit.hash}}</td>
@@ -76,7 +76,7 @@
 			{{#if hasPermission 'view-statistics'}}
 				{{#if isReady}}
 					<h3>{{_ "Runtime_Environment"}}</h3>
-					<table class="statistics-table">
+					<table class="statistics-table secondary-background-color">
 						<tr class="admin-table-row">
 							<th class="content-background-color border-component-color">{{_ "OS_Type"}}</th>
 							<td class="border-component-color">{{statistics.os.type}}</td>
@@ -120,7 +120,7 @@
 					</table>
 
 					<h3>{{_ "Build_Environment"}}</h3>
-					<table class="statistics-table">
+					<table class="statistics-table secondary-background-color">
 						<tr class="admin-table-row">
 							<th class="content-background-color border-component-color">{{_ "OS_Platform"}}</th>
 							<td class="border-component-color">{{build.platform}}</td>
@@ -145,7 +145,7 @@
 
 
 					<h3>{{_ "Usage"}}</h3>
-					<table class="statistics-table">
+					<table class="statistics-table secondary-background-color">
 						<tr class="admin-table-row">
 							<th class="content-background-color border-component-color">{{_ "Stats_Total_Users"}}</th>
 							<td class="border-component-color">{{statistics.totalUsers}}</td>

packages/rocketchat-ui-admin/admin/rooms/adminRooms.html

@@ -24,7 +24,7 @@
 					{{{_ "Showing_results" roomCount}}}
 				</div>
 				<div class="list">
-					<table>
+					<table class="secondary-background-color">
 						<thead>
 							<tr class="admin-table-row">
 								<th class="content-background-color border-component-color" width="30%">{{_ "Name"}}</th>
@@ -53,7 +53,7 @@
 			{{/unless}}
 		</div>
 	</section>
-	<section class="flex-tab">
+	<section class="flex-tab secondary-background-color">
 		{{> Template.dynamic template=flexTemplate data=flexData}}
 	</section>
 </template>

packages/rocketchat-ui-admin/admin/users/adminUsers.html

@@ -21,7 +21,7 @@
 					{{{_ "Showing_results" users.length}}}
 				</div>
 				<div class="list">
-					<table>
+					<table class="secondary-background-color">
 						<thead>
 							<tr class="admin-table-row">
 								<th class="content-background-color border-component-color">&nbsp;</th>
@@ -52,7 +52,7 @@
 			{{/unless}}
 		</div>
 	</section>
-	<section class="flex-tab">
+	<section class="flex-tab secondary-background-color">
 		{{> Template.dynamic template=flexTemplate data=flexData}}
 	</section>
 </template>

packages/rocketchat-ui-message/message/messageDropdown.html

 <template name="messageDropdown">
 	<div class="message-dropdown">
 		<ul>
-			<li class="message-dropdown-close border-component-color"><i class=" icon-angle-left" aria-label="{{_ "Close"}}"></i></li>
+			<li class="message-dropdown-close secondary-background-color border-component-color"><i class=" icon-angle-left" aria-label="{{_ "Close"}}"></i></li>
 			{{#if actions.length}}
 				{{#each actions}}
 					<li class="{{id}} {{classes}} message-action" title="{{_ i18nLabel}}" data-id="{{id}}"><i class="{{icon}}" aria-label="{{_ i18nLabel}}"></i></li>

packages/rocketchat-ui-message/message/popup/messagePopup.html

 <template name="messagePopup">
 	{{#if isOpen}}
 		<div class="message-popup-position">
-			<div class="message-popup {{cls}}">
+			<div class="message-popup content-background-color {{cls}}">
 				{{#if title}}
-					<div class="message-popup-title">
+					<div class="message-popup-title secondary-background-color">
 						{{title}}
 					</div>
 				{{/if}}

packages/rocketchat-ui-sidenav/side-nav/sideNav.html

@@ -27,7 +27,7 @@
 			<div class="unread-rooms background-primary-action-color bottom-unread-rooms hidden">
 				{{_ "More_unreads"}} <i class="icon-down-big"></i>
 			</div>
-			<div class="flex-nav animated-hidden">
+			<div class="flex-nav primary-background-color animated-hidden">
 				<section>
 					{{> Template.dynamic template=flexTemplate data=flexData}}
 				</section>

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

@@ -106,7 +106,7 @@
 				{{> messageBox}}
 			</footer>
 		</section>
-		<section class="flex-tab">
+		<section class="flex-tab secondary-background-color">
 			{{> Template.dynamic template=flexTemplate data=flexData}}
 		</section>
 	</div>

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

 <template name="spotlight">
 	<div class="spotlight hidden background-transparent-darker">
-		<div class="spotlight-input">
+		<div class="spotlight-input secondary-background-color">
 			<i class="icon-search"></i>
 			<input type="text" name="spotlight">
 			{{> messagePopup popupConfig}}