From 1dace08b2332f44ebd534fdf6f41d985d503121d Mon Sep 17 00:00:00 2001
From: Ajay Bura <ajbura@gmail.com>
Date: Tue, 15 Mar 2022 12:45:42 +0530
Subject: [PATCH] Add isMuted prop in room selector

Signed-off-by: Ajay Bura <ajbura@gmail.com>
---
 .../molecules/room-selector/RoomSelector.jsx   | 18 +++++++++++++-----
 .../molecules/room-selector/RoomSelector.scss  |  4 ++++
 2 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/src/app/molecules/room-selector/RoomSelector.jsx b/src/app/molecules/room-selector/RoomSelector.jsx
index 8bd6c207..fa6daa9e 100644
--- a/src/app/molecules/room-selector/RoomSelector.jsx
+++ b/src/app/molecules/room-selector/RoomSelector.jsx
@@ -11,13 +11,16 @@ import NotificationBadge from '../../atoms/badge/NotificationBadge';
 import { blurOnBubbling } from '../../atoms/button/script';
 
 function RoomSelectorWrapper({
-  isSelected, isUnread, onClick,
+  isSelected, isMuted, isUnread, onClick,
   content, options, onContextMenu,
 }) {
-  let myClass = isUnread ? ' room-selector--unread' : '';
-  myClass += isSelected ? ' room-selector--selected' : '';
+  const classes = ['room-selector'];
+  if (isMuted) classes.push('room-selector--muted');
+  if (isUnread) classes.push('room-selector--unread');
+  if (isSelected) classes.push('room-selector--selected');
+
   return (
-    <div className={`room-selector${myClass}`}>
+    <div className={classes.join(' ')}>
       <button
         className="room-selector__content"
         type="button"
@@ -32,11 +35,13 @@ function RoomSelectorWrapper({
   );
 }
 RoomSelectorWrapper.defaultProps = {
+  isMuted: false,
   options: null,
   onContextMenu: null,
 };
 RoomSelectorWrapper.propTypes = {
   isSelected: PropTypes.bool.isRequired,
+  isMuted: PropTypes.bool,
   isUnread: PropTypes.bool.isRequired,
   onClick: PropTypes.func.isRequired,
   content: PropTypes.node.isRequired,
@@ -46,12 +51,13 @@ RoomSelectorWrapper.propTypes = {
 
 function RoomSelector({
   name, parentName, roomId, imageSrc, iconSrc,
-  isSelected, isUnread, notificationCount, isAlert,
+  isSelected, isMuted, isUnread, notificationCount, isAlert,
   options, onClick, onContextMenu,
 }) {
   return (
     <RoomSelectorWrapper
       isSelected={isSelected}
+      isMuted={isMuted}
       isUnread={isUnread}
       content={(
         <>
@@ -91,6 +97,7 @@ RoomSelector.defaultProps = {
   isSelected: false,
   imageSrc: null,
   iconSrc: null,
+  isMuted: false,
   options: null,
   onContextMenu: null,
 };
@@ -101,6 +108,7 @@ RoomSelector.propTypes = {
   imageSrc: PropTypes.string,
   iconSrc: PropTypes.string,
   isSelected: PropTypes.bool,
+  isMuted: PropTypes.bool,
   isUnread: PropTypes.bool.isRequired,
   notificationCount: PropTypes.oneOfType([
     PropTypes.string,
diff --git a/src/app/molecules/room-selector/RoomSelector.scss b/src/app/molecules/room-selector/RoomSelector.scss
index 7ee8a3a2..59e47473 100644
--- a/src/app/molecules/room-selector/RoomSelector.scss
+++ b/src/app/molecules/room-selector/RoomSelector.scss
@@ -9,6 +9,10 @@
   border-radius: var(--bo-radius);
   cursor: pointer;
 
+  &--muted {
+    opacity: 0.6;
+  }
+
   &--unread {
     .room-selector__content > .text {
       color: var(--tc-surface-high);