sidebar style

packages/rocketchat-mailer/client/views/mailerUnsubscribe.html

@@ -1,5 +1,5 @@
 <template name="mailerUnsubscribe">
-	<section class="full-page color-tertiary-font-color">
+	<section class="rc-old full-page color-tertiary-font-color">
 		<div class="wrapper">
 			<header>
 				<a class="logo" href="/">

packages/rocketchat-theme/client/imports/general/base_old.css

@@ -902,7 +902,7 @@
 
 /* rooms-box */
 
-.rc-old .flex-nav {
+.rc-old.flex-nav {
 	position: fixed;
 	top: 0;
 	left: 0;

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

@@ -16,10 +16,16 @@
 	overflow: visible;
 	z-index: 100;
 	will-change: transform;
+	display: flex;
+	flex-direction: column;
 
 	&__header {
 		padding: 24px 24px 32px;
 	}
+
+	& .unread-rooms {
+		display: none;
+	}
 }
 
 /* Sidebar Account */
@@ -99,6 +105,7 @@
 /* rooms list */
 .rooms-list {
 	padding: 0 16px 0 30px;
+	height: 100%;
 
 	&__list {
 		margin-bottom: 32px;
@@ -122,6 +129,7 @@
 	height: var(--room-item-height);
 	display: flex;
 	align-items: center;
+	border-radius: 2px;
 
 	&__link {
 		font-size: 1rem;
@@ -134,3 +142,11 @@
 		margin: 0 8px 0 3px;
 	}
 }
+
+.sidebar__footer {
+	padding: 24px;
+
+	& img {
+		width: 100%;
+	}
+}

packages/rocketchat-theme/server/variables.js

@@ -94,7 +94,7 @@ const sidebar = [
 	{
 		name: 'sidebar-content-hover:hover',
 		properties: ['background-color'],
-		value: '#6c727a'
+		value: '#414852'
 	},
 	{
 		name: 'sidebar-category-badge',

packages/rocketchat-ui-login/client/login/layout.html

@@ -1,5 +1,5 @@
 <template name="loginLayout">
-	<section class="full-page color-tertiary-font-color">
+	<section class="rc-old full-page color-tertiary-font-color">
 		<div class="wrapper">
 			{{> loginHeader }}
 			{{> Template.dynamic template=center}}

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

@@ -1,5 +1,5 @@
 <template name="usernameLayout">
-	<section class="full-page color-tertiary-font-color">
+	<section class="rc-old full-page color-tertiary-font-color">
 		<div class="wrapper">
 			{{> Template.dynamic template=render}}
 		</div>

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

@@ -1,5 +1,5 @@
 <template name="username">
-	<section class="full-page color-tertiary-font-color">
+	<section class="rc-old full-page color-tertiary-font-color">
 		<div class="wrapper">
 			<form id="login-card" class="content-background-color color-primary-font-color" method='/'>
 				<header>

packages/rocketchat-ui-master/client/error.html

@@ -1,5 +1,5 @@
 <template name="error">
-	<section class="full-page color-tertiary-font-color">
+	<section class="rc-old full-page color-tertiary-font-color">
 		<div class="wrapper">
 			<header>
 				<a class="logo" href="/">

packages/rocketchat-ui-master/client/logoLayout.html

@@ -1,5 +1,5 @@
 <template name="logoLayout">
-	<section class="full-page color-tertiary-font-color">
+	<section class="rc-old full-page color-tertiary-font-color">
 		<div class="wrapper">
 			<header>
 				<a class="logo" href="/">

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

@@ -1,7 +1,7 @@
 <template name="chatRoomItem">
 	{{#let unread=unread name=name route=route}}
-		<li class="room-item sidebar-content-hover-background {{active}}" data-room-id="{{rid}}">
-			<a class="room-item__link sidebar-content {{alert}}" href="{{route}}" title="{{name}}">
+		<li class="room-item {{#if active}}sidebar-content-active-background{{else}}sidebar-content-hover-background{{/if}}" data-room-id="{{rid}}">
+			<a class="room-item__link sidebar-content {{alert}} {{#if active}}sidebar-content-unread{{/if}}" href="{{route}}" title="{{name}}">
 				<i class="{{roomIcon}} {{userStatus}}" aria-label=""></i>
 				<span class='room-item__name {{archived}}'>{{name}}</span>
 

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

@@ -32,9 +32,12 @@ Template.chatRoomItem.helpers({
 	},
 
 	active() {
+		console.log('ACTIVE');
 		if (Session.get('openedRoom') && Session.get('openedRoom') === this.rid || Session.get('openedRoom') === this._id) {
-			return 'room-item--active';
+			return true;
 		}
+
+		return false;
 	},
 
 	canLeave() {

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

@@ -28,7 +28,7 @@
 			<div class="unread-rooms background-primary-action-color color-primary-action-contrast bottom-unread-rooms hidden">
 				{{_ "More_unreads"}} <i class="icon-down-big"></i>
 			</div>
-			<div class="flex-nav primary-background-color animated-hidden">
+			<div class="rc-old flex-nav primary-background-color animated-hidden">
 				<section>
 					{{> Template.dynamic template=flexTemplate data=flexData }}
 				</section>
@@ -41,7 +41,7 @@
 				</div>
 			</div>
 		{{/if}}
-		<footer class="footer">
+		<footer class="sidebar__footer">
 			{{{footer}}}
 		</footer>
 	</aside>

packages/rocketchat-ui/client/views/fxos.html

@@ -1,5 +1,5 @@
 <template name="fxOsInstallPrompt">
-	<section class="full-page color-tertiary-font-color">
+	<section class="rc-old full-page color-tertiary-font-color">
 		<div class="wrapper">
 			<header>
 				<a class="logo" href="/">
@@ -15,7 +15,7 @@
 </template>
 
 <template name="fxOsInstallDone">
-	<section class="full-page color-tertiary-font-color">
+	<section class="rc-old full-page color-tertiary-font-color">
 		<div class="wrapper">
 			<header>
 				<a class="logo" href="/">
@@ -31,7 +31,7 @@
 </template>
 
 <template name="fxOsInstallError">
-	<section class="full-page color-tertiary-font-color">
+	<section class="rc-old full-page color-tertiary-font-color">
 		<div class="wrapper">
 			<header>
 				<a class="logo" href="/">