|
|
|
@ -1,6 +1,6 @@
|
|
|
|
|
import React, { useState } from 'react';
|
|
|
|
|
|
|
|
|
|
import { getIncrement, getTimerBucketIcon } from '../../util/timer';
|
|
|
|
|
import { getTimerBucketIcon } from '../../util/timer';
|
|
|
|
|
import { useInterval } from '../../hooks/useInterval';
|
|
|
|
|
import styled, { DefaultTheme } from 'styled-components';
|
|
|
|
|
import { OpacityMetadataComponent } from './message/MessageMetadata';
|
|
|
|
@ -23,6 +23,7 @@ const ExpireTimerCount = styled(props => (
|
|
|
|
|
letter-spacing: 0.3px;
|
|
|
|
|
text-transform: uppercase;
|
|
|
|
|
user-select: none;
|
|
|
|
|
color: ${props => props.color};
|
|
|
|
|
`;
|
|
|
|
|
|
|
|
|
|
const ExpireTimerBucket = styled(props => (
|
|
|
|
@ -34,6 +35,7 @@ const ExpireTimerBucket = styled(props => (
|
|
|
|
|
letter-spacing: 0.3px;
|
|
|
|
|
text-transform: uppercase;
|
|
|
|
|
user-select: none;
|
|
|
|
|
color: ${props => props.color};
|
|
|
|
|
`;
|
|
|
|
|
|
|
|
|
|
export const ExpireTimer = (props: Props) => {
|
|
|
|
@ -65,9 +67,7 @@ export const ExpireTimer = (props: Props) => {
|
|
|
|
|
|
|
|
|
|
if (timeLeft <= 60) {
|
|
|
|
|
return (
|
|
|
|
|
<ExpireTimerCount expireTimerColor={expireTimerColor}>
|
|
|
|
|
{timeLeft}
|
|
|
|
|
</ExpireTimerCount>
|
|
|
|
|
<ExpireTimerCount color={expireTimerColor}>{timeLeft}</ExpireTimerCount>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
const bucket = getTimerBucketIcon(expirationTimestamp, expirationLength);
|
|
|
|
|