Merge pull request #3072 from oxen-io/unstable

Fix password window crash and add min-width to the unread counter

ts/components/SessionScrollButton.tsx

@@ -5,6 +5,7 @@ import { getShowScrollButton } from '../state/selectors/conversations';
 
 import { useSelectedUnreadCount } from '../state/selectors/selectedConversation';
 import { SessionIconButton } from './icon';
+import { SessionUnreadCount } from './icon/SessionNotificationCount';
 
 const SessionScrollButtonDiv = styled.div`
   position: fixed;
@@ -30,8 +31,9 @@ export const SessionScrollButton = (props: { onClickScrollBottom: () => void })
         isHidden={!show}
         onClick={props.onClickScrollBottom}
         dataTestId="scroll-to-bottom-button"
-        unreadCount={unreadCount}
-      />
+      >
+        {Boolean(unreadCount) && <SessionUnreadCount count={unreadCount} />}
+      </SessionIconButton>
     </SessionScrollButtonDiv>
   );
 };

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<HTMLButtonElement>) => 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<HTMLButtonElement, SProps>((prop
     iconColor,
     iconRotation,
     isSelected,
-    notificationCount,
     glowDuration,
     glowStartDelay,
     noScale,
@@ -60,7 +58,7 @@ const SessionIconButtonInner = React.forwardRef<HTMLButtonElement, SProps>((prop
     dataTestIdIcon,
     style,
     tabIndex,
-    unreadCount,
+    children,
   } = props;
   const clickHandler = (e: React.MouseEvent<HTMLButtonElement>) => {
     if (props.onClick) {
@@ -101,8 +99,7 @@ const SessionIconButtonInner = React.forwardRef<HTMLButtonElement, SProps>((prop
         iconPadding={iconPadding}
         dataTestId={dataTestIdIcon}
       />
-      {Boolean(notificationCount) && <SessionNotificationCount count={notificationCount} />}
-      {Boolean(unreadCount) && <SessionUnreadCount count={unreadCount} />}
+      {children}
     </StyledSessionIconButton>
   );
 });

ts/components/icon/SessionNotificationCount.tsx

@@ -8,23 +8,32 @@ type Props = {
   count?: number;
 };
 const StyledCountContainer = styled.div<{ centeredOnTop: boolean }>`
+  background: var(--unread-messages-alert-background-color);
+  color: var(--unread-messages-alert-text-color);
+  text-align: center;
+
+  padding: ${props => (props.centeredOnTop ? '1px 3px 0' : '1px 4px')};
+
   position: absolute;
-  font-size: 18px;
-  line-height: 1.2;
   top: ${props => (props.centeredOnTop ? '-10px' : '27px')};
   left: ${props => (props.centeredOnTop ? '50%' : '28px')};
-  transform: ${props => (props.centeredOnTop ? 'translateX(-50%)' : 'none')};
-  padding: ${props => (props.centeredOnTop ? '3px 3px' : '1px 4px')};
+
+  font-size: var(--font-size-xs);
+  font-family: var(--font-default);
+  font-weight: 700;
+
+  height: 16px;
+  min-width: 16px;
+  line-height: 16px;
+  border-radius: 8px;
+
   display: flex;
   align-items: center;
   justify-content: center;
-  font-family: var(--font-default);
-  border-radius: 58px;
-  font-weight: 700;
-  background: var(--unread-messages-alert-background-color);
+  flex-shrink: 0;
+
   transition: var(--default-duration);
-  text-align: center;
-  color: var(--unread-messages-alert-text-color);
+  transform: ${props => (props.centeredOnTop ? 'translateX(-50%)' : 'none')};
   white-space: ${props => (props.centeredOnTop ? 'nowrap' : 'normal')};
 `;
 

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) && <SessionNotificationCount count={unreadToShow} />}
+        </SessionIconButton>
       );
     case SectionType.Settings:
       return (

ts/session/utils/Toast.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { toast } from 'react-toastify';
 import { SessionToast, SessionToastType } from '../../components/basic/SessionToast';
-import { SessionIconType } from '../../components/icon';
 import { SessionSettingCategory } from '../../components/settings/SessionSettings';
 import { SectionType, showLeftPaneSection, showSettingsSection } from '../../state/ducks/section';
 
@@ -38,19 +37,9 @@ export function pushToastInfo(
   );
 }
 
-export function pushToastSuccess(
-  id: string,
-  title: string,
-  description?: string,
-  icon?: SessionIconType
-) {
+export function pushToastSuccess(id: string, title: string, description?: string) {
   toast.success(
-    <SessionToast
-      title={title}
-      description={description}
-      type={SessionToastType.Success}
-      icon={icon}
-    />,
+    <SessionToast title={title} description={description} type={SessionToastType.Success} />,
     { toastId: id, updateId: id }
   );
 }
@@ -210,12 +199,7 @@ export function someDeletionsFailed() {
 }
 
 export function pushDeleted(messageCount: number) {
-  pushToastSuccess(
-    'deleted',
-    window.i18n('deleted', [messageCount.toString()]),
-    undefined,
-    'check'
-  );
+  pushToastSuccess('deleted', window.i18n('deleted', [messageCount.toString()]), undefined);
 }
 
 export function pushCannotRemoveCreatorFromGroup() {