Merge pull request #2572 from Bilb/fix-notif-count-padding

fix: padding with only one digit in unread notification count
pull/2582/head
Audric Ackermann 3 years ago committed by GitHub
commit afb9a46d48
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -7,12 +7,10 @@ type Props = {
const StyledCountContainer = styled.div<{ shouldRender: boolean }>`
position: absolute;
width: 24px;
height: 12px;
font-size: 18px;
top: 27px;
right: 8px;
padding: 3px;
padding: 0 6px;
opacity: 1;
display: flex;
align-items: center;
@ -29,19 +27,19 @@ const StyledCountContainer = styled.div<{ shouldRender: boolean }>`
const StyledCount = styled.div`
position: relative;
font-size: 0.6em;
font-size: 0.6rem;
`;
export const SessionNotificationCount = (props: Props) => {
const { count } = props;
const overflow = Boolean(count && count > 9);
const overflow = Boolean(count && count > 99);
const shouldRender = Boolean(count && count > 0);
if (overflow) {
return (
<StyledCountContainer shouldRender={shouldRender}>
<StyledCount>
{9}
{99}
<span>+</span>
</StyledCount>
</StyledCountContainer>

@ -117,7 +117,6 @@ const Section = (props: { type: SectionType }) => {
iconSize="medium"
dataTestId="settings-section"
iconType={'gear'}
notificationCount={unreadToShow}
onClick={handleClick}
isSelected={isSelected}
/>
@ -138,7 +137,6 @@ const Section = (props: { type: SectionType }) => {
iconSize="medium"
iconType={isDarkMode ? 'moon' : 'sun'}
dataTestId="theme-section"
notificationCount={unreadToShow}
onClick={handleClick}
isSelected={isSelected}
/>

@ -364,7 +364,7 @@ export const _getLeftPaneLists = (
}
if (
unreadCount < 9 &&
unreadCount < 100 &&
conversation.unreadCount &&
conversation.unreadCount > 0 &&
conversation.currentNotificationSetting !== 'disabled'

Loading…
Cancel
Save