feat: only use timer svg for disappearing message

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 <ExpireTimerCount color={expireTimerColor}>{timeLeft}</ExpireTimerCount>;
-  }
-
   const bucket = getTimerBucketIcon(expirationTimestamp, expirationLength);
 
   return (

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';
   }