diff --git a/ts/components/conversation/ExpireTimer.tsx b/ts/components/conversation/ExpireTimer.tsx index 5641329ce..e53b76f2f 100644 --- a/ts/components/conversation/ExpireTimer.tsx +++ b/ts/components/conversation/ExpireTimer.tsx @@ -7,25 +7,6 @@ import useInterval from 'react-use/lib/useInterval'; import styled from 'styled-components'; import { SessionIcon } from '../icon/SessionIcon'; -type Props = { - expirationLength: number; - expirationTimestamp: number | null; - isCorrectSide: boolean; -}; - -const ExpireTimerCount = styled.div<{ - color: string; -}>` - margin-inline-start: 6px; - font-size: var(--font-size-xs); - line-height: 16px; - letter-spacing: 0.3px; - text-transform: uppercase; - user-select: none; - color: ${props => props.color}; - flex-shrink: 0; -`; - const ExpireTimerBucket = styled.div` margin-inline-start: 6px; font-size: var(--font-size-xs); @@ -36,6 +17,12 @@ const ExpireTimerBucket = styled.div` color: var(--text-primary-color); `; +type Props = { + expirationLength: number; // should be in milliseconds + expirationTimestamp: number | null; + isCorrectSide: boolean; +}; + export const ExpireTimer = (props: Props) => { const { expirationLength, expirationTimestamp, isCorrectSide } = props; @@ -60,10 +47,6 @@ export const ExpireTimer = (props: Props) => { const expireTimerColor = 'var(--primary-text-color)'; - if (timeLeft <= 60) { - return {timeLeft}; - } - const bucket = getTimerBucketIcon(expirationTimestamp, expirationLength); return ( diff --git a/ts/util/timer.ts b/ts/util/timer.ts index cec32d2ac..c47c1dbf0 100644 --- a/ts/util/timer.ts +++ b/ts/util/timer.ts @@ -14,7 +14,9 @@ export function getIncrement(length: number): number { } export function getTimerBucketIcon(expiration: number, length: number): SessionIconType { - const delta = expiration - Date.now(); + const now = Date.now(); + const delta = expiration - now; + if (delta < 0) { return 'timer60'; }