diff --git a/stylesheets/_session.scss b/stylesheets/_session.scss index ac39ea49c..cffc6241e 100644 --- a/stylesheets/_session.scss +++ b/stylesheets/_session.scss @@ -295,19 +295,21 @@ textarea { display: flex; align-items: center; justify-content: center; - font-family: $session-font-accent; + font-family: $session-font-default; border-radius: 50%; font-weight: 700; background: $session-color-danger; color: $session-color-white; text-align: center; - span { + div { position: relative; sup { - font-size: 130%; position: absolute; + font-size: 1.3em; + top: -0.5em; + margin-left: -0.125em; } } diff --git a/ts/components/session/SessionNotificationCount.tsx b/ts/components/session/SessionNotificationCount.tsx index 97f565189..957e3180a 100644 --- a/ts/components/session/SessionNotificationCount.tsx +++ b/ts/components/session/SessionNotificationCount.tsx @@ -30,28 +30,24 @@ export class SessionNotificationCount extends React.Component { const MAX_SINGLE_DIGIT = 9; const overflow = typeof count === 'number' && count > MAX_SINGLE_DIGIT; - const fontSizeVal = overflow ? size / 2 : size / 2 + 2; - const fontSize = `${fontSizeVal}px`; - const bubbleStyle = { width: `${size}px`, height: `${size}px`, + fontSize: `${size}px`, }; + const fontSize = overflow ? '0.5em' : '0.6em'; + const countStyle = { fontSize, - marginTop: overflow ? `${size / 8}px` : '0px', - marginLeft: overflow ? `-${size / 4}px` : '0px', - }; - - const supStyle = { - top: `-${size * (3 / 8)}px`, + marginTop: overflow ? '0.35em' : '0em', + marginLeft: overflow ? '-0.45em' : '0em', }; const countElement: JSX.Element = overflow ? ( <> {MAX_SINGLE_DIGIT} - + + + ) : ( <>{count} @@ -68,7 +64,7 @@ export class SessionNotificationCount extends React.Component { style={bubbleStyle} role="button" > - {countElement} +
{countElement}
)}