fix: update unread display

ts/components/SessionScrollButton.tsx

@@ -17,7 +17,10 @@ const SessionScrollButtonDiv = styled.div`
   }
 `;
 
-export const SessionScrollButton = (props: { onClickScrollBottom: () => void, unreadCount: number }) => {
+export const SessionScrollButton = (props: {
+  onClickScrollBottom: () => void;
+  unreadCount: number;
+}) => {
   const show = useSelector(getShowScrollButton);
 
   return (

ts/components/icon/SessionIconButton.tsx

@@ -1,14 +1,9 @@
 import React, { KeyboardEvent } from 'react';
 import classNames from 'classnames';
 import _ from 'lodash';
-<<<<<<< HEAD
-=======
-import { SessionNotificationCount, SessionUnreadCount } from './SessionNotificationCount';
->>>>>>> c66b53b75d (Overlay the scroll-to-end-of-convo button with the unread message count.)
 import styled from 'styled-components';
-
+import { SessionNotificationCount, SessionUnreadCount } from './SessionNotificationCount';
 import { SessionIcon, SessionIconProps } from '.';
-import { SessionNotificationCount } from './SessionNotificationCount';
 
 interface SProps extends SessionIconProps {
   onClick?: (e?: React.MouseEvent<HTMLDivElement>) => void;
@@ -108,6 +103,7 @@ const SessionIconButtonInner = React.forwardRef<HTMLDivElement, SProps>((props,
         dataTestId={dataTestIdIcon}
       />
       {Boolean(notificationCount) && <SessionNotificationCount count={notificationCount} />}
+      {Boolean(unreadCount) && <SessionUnreadCount count={unreadCount} />}
     </StyledSessionIconButton>
   );
 });

ts/components/icon/SessionNotificationCount.tsx

@@ -4,18 +4,15 @@ import styled from 'styled-components';
 type Props = {
   count?: number;
 };
-
+const StyledCountContainer = styled.div<{ shouldRender: boolean; unreadCount?: number }>`
-const StyledCountContainer = styled.div<{ shouldRender: boolean, unreadCount?: number }>`
   position: absolute;
   font-size: 18px;
   line-height: 1.2;
-  top: ${props => (props.unreadCount ? '29' : '27')}px;
+  top: ${props => (props.unreadCount ? '-10px' : '27px')};
-  left: ${props => (props.unreadCount
+  left: ${props => (props.unreadCount ? '50%' : '28px')};
-    ? (15 - props.unreadCount.toString().length * 2).toString()
+  transform: ${props => (props.unreadCount ? 'translateX(-50%)' : 'none')};
-    : '28'
+  padding: ${props => (props.unreadCount ? '3px 3px' : '1px 4px')};
-  )}px;
+  opacity: ${props => (props.shouldRender ? 1 : 0)};
-  padding: 3px 3px;
-  opacity: 1;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -24,14 +21,14 @@ const StyledCountContainer = styled.div<{ shouldRender: boolean, unreadCount?: n
   font-weight: 700;
   background: var(--unread-messages-alert-background-color);
   transition: var(--default-duration);
-  opacity: ${props => (props.shouldRender ? 1 : 0)};
   text-align: center;
   color: var(--unread-messages-alert-text-color);
+  white-space: ${props => (props.unreadCount ? 'nowrap' : 'normal')};
 `;
 
-const StyledCount = styled.div`
+const StyledCount = styled.div<{ unreadCount?: number }>`
   position: relative;
-  font-size: 0.6rem;
+  font-size: ${props => (props.unreadCount ? 'var(--font-size-xs)' : '0.6rem')};
 `;
 
 export const SessionNotificationCount = (props: Props) => {
@@ -62,7 +59,7 @@ export const SessionUnreadCount = (props: Props) => {
 
   return (
     <StyledCountContainer shouldRender={shouldRender} unreadCount={count}>
-      <StyledCount>{count}</StyledCount>
+      <StyledCount unreadCount={count}>{count}</StyledCount>
     </StyledCountContainer>
   );
 };