feat(chat): fixed chat counter (#12385)

* feat(chat): fixed chat counter and updated new messages button web styles

lang/main.json

@@ -96,7 +96,7 @@
         "messageAccessibleTitleMe": "me says:",
         "messageTo": "Private message to {{recipient}}",
         "messagebox": "Type a message",
-        "newMessages": "new messages",
+        "newMessages": "New messages",
         "nickname": {
             "popover": "Choose a nickname",
             "title": "Enter a nickname to use chat",

react/features/chat/components/web/NewMessagesButton.tsx

@@ -7,6 +7,7 @@ import { translate } from '../../../base/i18n/functions';
 import Icon from '../../../base/icons/components/Icon';
 import { IconArrowDown } from '../../../base/icons/svg';
 import { withPixelLineHeight } from '../../../base/styles/functions.web';
+import BaseTheme from '../../../base/ui/components/BaseTheme.web';
 
 export interface INewMessagesButtonProps extends WithTranslation {
 
@@ -29,7 +30,7 @@ const useStyles = makeStyles()((theme: Theme) => {
             alignItems: 'center',
             justifyContent: 'space-between',
             height: '32px',
-            padding: '6px 8px',
+            padding: '8px',
             border: 'none',
             borderRadius: theme.shape.borderRadius,
             backgroundColor: theme.palette.action02,
@@ -49,12 +50,7 @@ const useStyles = makeStyles()((theme: Theme) => {
             width: '20px',
             display: 'flex',
             alignItems: 'center',
-            justifyContent: 'center',
+            justifyContent: 'center'
-            paddingLeft: '5px',
-
-            '& svg': {
-                fill: theme.palette.uiBackground
-            }
         },
 
         textContainer: {
@@ -83,9 +79,9 @@ function NewMessagesButton({ onGoToFirstUnreadMessage, t }: INewMessagesButtonPr
                 type = 'button'>
                 <Icon
                     className = { styles.arrowDownIconContainer }
+                    color = { BaseTheme.palette.icon04 }
                     size = { 14 }
                     src = { IconArrowDown } />
-
                 <div className = { styles.textContainer }> { t('chat.newMessages') }</div>
             </button>
         </div>);

react/features/chat/functions.ts

@@ -7,6 +7,8 @@ import emojiAsciiAliases from 'react-emoji-render/data/asciiAliases';
 import { IState } from '../app/types';
 import { escapeRegexp } from '../base/util/helpers';
 
+import { IMessage } from './reducer';
+
 /**
  * An ASCII emoticon regexp array to find and replace old-style ASCII
  * emoticons (such as :O) with the new Unicode representation, so that
@@ -93,14 +95,11 @@ export function getUnreadCount(state: IState) {
     }
 
     let reactionMessages = 0;
-
+    let lastReadIndex;
-    if (!lastReadMessage) {
-        return 0;
-    }
 
     if (navigator.product === 'ReactNative') {
         // React native stores the messages in a reversed order.
-        const lastReadIndex = messages.indexOf(lastReadMessage);
+        lastReadIndex = messages.indexOf(<IMessage>lastReadMessage);
 
         for (let i = 0; i < lastReadIndex; i++) {
             if (messages[i].isReaction) {
@@ -111,7 +110,7 @@ export function getUnreadCount(state: IState) {
         return lastReadIndex - reactionMessages;
     }
 
-    const lastReadIndex = messages.lastIndexOf(lastReadMessage);
+    lastReadIndex = messages.lastIndexOf(<IMessage>lastReadMessage);
 
     for (let i = lastReadIndex + 1; i < messagesCount; i++) {
         if (messages[i].isReaction) {
@@ -122,18 +121,6 @@ export function getUnreadCount(state: IState) {
     return messagesCount - (lastReadIndex + 1) - reactionMessages;
 }
 
-/**
- * Selector for calculating the number of unread chat messages.
- *
- * @param {IState} state - The redux state.
- * @returns {number} The number of unread messages.
- */
-export function getUnreadMessagesCount(state: IState) {
-    const { nbUnreadMessages } = state['features/chat'];
-
-    return nbUnreadMessages;
-}
-
 /**
  * Get whether the chat smileys are disabled or not.
  *