diff --git a/ts/components/SessionScrollButton.tsx b/ts/components/SessionScrollButton.tsx
index 4d0b2b50d..4b068c2cf 100644
--- a/ts/components/SessionScrollButton.tsx
+++ b/ts/components/SessionScrollButton.tsx
@@ -30,8 +30,9 @@ export const SessionScrollButton = (props: { onClickScrollBottom: () => void })
isHidden={!show}
onClick={props.onClickScrollBottom}
dataTestId="scroll-to-bottom-button"
- unreadCount={unreadCount}
- />
+ >
+ {Boolean(unreadCount) && }
+
);
};
diff --git a/ts/components/icon/SessionIconButton.tsx b/ts/components/icon/SessionIconButton.tsx
index f2d78bb6f..adf81cb12 100644
--- a/ts/components/icon/SessionIconButton.tsx
+++ b/ts/components/icon/SessionIconButton.tsx
@@ -2,12 +2,10 @@ import classNames from 'classnames';
import _ from 'lodash';
import React, { KeyboardEvent } from 'react';
import styled from 'styled-components';
-import { SessionIcon, SessionIconProps } from '.';
-import { SessionNotificationCount, SessionUnreadCount } from './SessionNotificationCount';
+import { SessionIcon, SessionIconProps } from './SessionIcon';
interface SProps extends SessionIconProps {
onClick?: (e?: React.MouseEvent) => void;
- notificationCount?: number;
isSelected?: boolean;
isHidden?: boolean;
margin?: string;
@@ -16,6 +14,7 @@ interface SProps extends SessionIconProps {
id?: string;
style?: object;
tabIndex?: number;
+ children?: React.ReactNode;
}
const StyledSessionIconButton = styled.button<{ color?: string; isSelected?: boolean }>`
@@ -46,7 +45,6 @@ const SessionIconButtonInner = React.forwardRef((prop
iconColor,
iconRotation,
isSelected,
- notificationCount,
glowDuration,
glowStartDelay,
noScale,
@@ -60,7 +58,7 @@ const SessionIconButtonInner = React.forwardRef((prop
dataTestIdIcon,
style,
tabIndex,
- unreadCount,
+ children,
} = props;
const clickHandler = (e: React.MouseEvent) => {
if (props.onClick) {
@@ -101,8 +99,7 @@ const SessionIconButtonInner = React.forwardRef((prop
iconPadding={iconPadding}
dataTestId={dataTestIdIcon}
/>
- {Boolean(notificationCount) && }
- {Boolean(unreadCount) && }
+ {children}
);
});
diff --git a/ts/components/leftpane/ActionsPanel.tsx b/ts/components/leftpane/ActionsPanel.tsx
index 3a3bdc456..319300713 100644
--- a/ts/components/leftpane/ActionsPanel.tsx
+++ b/ts/components/leftpane/ActionsPanel.tsx
@@ -33,7 +33,7 @@ import { getSwarmPollingInstance } from '../../session/apis/snode_api';
import { UserUtils } from '../../session/utils';
import { Avatar, AvatarSize } from '../avatar/Avatar';
import { ActionPanelOnionStatusLight } from '../dialog/OnionStatusPathDialog';
-import { SessionIconButton } from '../icon';
+import { SessionIconButton } from '../icon/SessionIconButton';
import { LeftPaneSectionContainer } from './LeftPaneSectionContainer';
import { SettingsKey } from '../../data/settings-key';
@@ -48,6 +48,7 @@ import { ensureThemeConsistency } from '../../themes/SessionTheme';
import { switchThemeTo } from '../../themes/switchTheme';
import { ReleasedFeatures } from '../../util/releaseFeature';
import { getOppositeTheme } from '../../util/theme';
+import { SessionNotificationCount } from '../icon/SessionNotificationCount';
const Section = (props: { type: SectionType }) => {
const ourNumber = useSelector(getOurNumber);
@@ -103,10 +104,11 @@ const Section = (props: { type: SectionType }) => {
iconSize="medium"
dataTestId="message-section"
iconType={'chatBubble'}
- notificationCount={unreadToShow}
onClick={handleClick}
isSelected={isSelected}
- />
+ >
+ {Boolean(unreadToShow) && }
+
);
case SectionType.Settings:
return (