From 76e5260285e9ae4227995689f2276e232ea0b1e8 Mon Sep 17 00:00:00 2001 From: William Grant Date: Mon, 8 Apr 2024 10:14:19 +1000 Subject: [PATCH 1/3] fix: set min height and width for unread acount for scroll button single digits rendered weirdly --- .../icon/SessionNotificationCount.tsx | 29 ++++++++++++------- 1 file changed, 19 insertions(+), 10 deletions(-) diff --git a/ts/components/icon/SessionNotificationCount.tsx b/ts/components/icon/SessionNotificationCount.tsx index ba014f7e9..66b3fc668 100644 --- a/ts/components/icon/SessionNotificationCount.tsx +++ b/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')}; `; From f304a5239ffba636ca02263999868efacbbadd57 Mon Sep 17 00:00:00 2001 From: Audric Ackermann Date: Mon, 8 Apr 2024 10:40:28 +1000 Subject: [PATCH 2/3] fix: app start password window crash --- ts/components/SessionScrollButton.tsx | 5 +++-- ts/components/icon/SessionIconButton.tsx | 11 ++++------- ts/components/leftpane/ActionsPanel.tsx | 8 +++++--- 3 files changed, 12 insertions(+), 12 deletions(-) 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 ( From 7f1e3ed8d80921bce7b8f188d796bde5686250e1 Mon Sep 17 00:00:00 2001 From: Audric Ackermann Date: Mon, 8 Apr 2024 10:41:09 +1000 Subject: [PATCH 3/3] feat: remove custom icon for toasts as only used once --- ts/components/SessionScrollButton.tsx | 1 + ts/session/utils/Toast.tsx | 22 +++------------------- 2 files changed, 4 insertions(+), 19 deletions(-) diff --git a/ts/components/SessionScrollButton.tsx b/ts/components/SessionScrollButton.tsx index 4b068c2cf..bd5dd9750 100644 --- a/ts/components/SessionScrollButton.tsx +++ b/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; diff --git a/ts/session/utils/Toast.tsx b/ts/session/utils/Toast.tsx index 1087345ed..7e7be394b 100644 --- a/ts/session/utils/Toast.tsx +++ b/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( - , + , { 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() {