Added unread highlight in RoomSelector

This commit is contained in:
unknown 2021-09-09 17:35:39 +05:30
parent 42f68f61c6
commit 652f8227b5
2 changed files with 15 additions and 3 deletions

View file

@ -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,

View file

@ -15,6 +15,13 @@
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);
border-color: var(--bg-surface-border);