From 652f8227b5b900c9199e7697a67721816960e589 Mon Sep 17 00:00:00 2001
From: unknown <ajbura@gmail.com>
Date: Thu, 9 Sep 2021 17:35:39 +0530
Subject: [PATCH] Added unread highlight in RoomSelector

---
 src/app/molecules/room-selector/RoomSelector.jsx  | 11 ++++++++---
 src/app/molecules/room-selector/RoomSelector.scss |  7 +++++++
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/app/molecules/room-selector/RoomSelector.jsx b/src/app/molecules/room-selector/RoomSelector.jsx
index 01e2ffc1..7e7f277c 100644
--- a/src/app/molecules/room-selector/RoomSelector.jsx
+++ b/src/app/molecules/room-selector/RoomSelector.jsx
@@ -10,10 +10,12 @@ import NotificationBadge from '../../atoms/badge/NotificationBadge';
 import { blurOnBubbling } from '../../atoms/button/script';
 
 function RoomSelectorWrapper({
-  isSelected, onClick, content, options,
+  isSelected, isUnread, onClick, content, options,
 }) {
+  let myClass = isUnread ? ' room-selector--unread' : '';
+  myClass += isSelected ? ' room-selector--selected' : '';
   return (
-    <div className={`room-selector${isSelected ? ' room-selector--selected' : ''}`}>
+    <div className={`room-selector${myClass}`}>
       <button
         className="room-selector__content"
         type="button"
@@ -31,6 +33,7 @@ RoomSelectorWrapper.defaultProps = {
 };
 RoomSelectorWrapper.propTypes = {
   isSelected: PropTypes.bool.isRequired,
+  isUnread: PropTypes.bool.isRequired,
   onClick: PropTypes.func.isRequired,
   content: PropTypes.node.isRequired,
   options: PropTypes.node,
@@ -44,6 +47,7 @@ function RoomSelector({
   return (
     <RoomSelectorWrapper
       isSelected={isSelected}
+      isUnread={isUnread}
       content={(
         <>
           <Avatar
@@ -68,6 +72,7 @@ function RoomSelector({
   );
 }
 RoomSelector.defaultProps = {
+  isSelected: false,
   imageSrc: null,
   iconSrc: null,
   options: null,
@@ -77,7 +82,7 @@ RoomSelector.propTypes = {
   roomId: PropTypes.string.isRequired,
   imageSrc: PropTypes.string,
   iconSrc: PropTypes.string,
-  isSelected: PropTypes.bool.isRequired,
+  isSelected: PropTypes.bool,
   isUnread: PropTypes.bool.isRequired,
   notificationCount: PropTypes.number.isRequired,
   isAlert: PropTypes.bool.isRequired,
diff --git a/src/app/molecules/room-selector/RoomSelector.scss b/src/app/molecules/room-selector/RoomSelector.scss
index ae3144bd..e4dce0b1 100644
--- a/src/app/molecules/room-selector/RoomSelector.scss
+++ b/src/app/molecules/room-selector/RoomSelector.scss
@@ -14,6 +14,13 @@
   border: 1px solid transparent;
   border-radius: var(--bo-radius);
   cursor: pointer;
+
+  &--unread {
+    .room-selector__content > .text {
+      font-weight: 500;
+      color: var(--tc-surface-high);
+    }
+  }
   
   &--selected {
     background-color: var(--bg-surface);