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 (