session-desktop/ts/components/conversation/message/OutgoingMessageStatus.tsx

import React from 'react';
import styled from 'styled-components';
import { MessageDeliveryStatus } from '../../../models/messageType';
import { SessionIcon } from '../../session/icon';

const MessageStatusSendingContainer = styled.div`
  display: inline-block;
  margin-bottom: 2px;
  margin-inline-start: 5px;
`;

const MessageStatusSending = () => {
  const iconColor = 'var(--color-text)';
  return (
    <MessageStatusSendingContainer>
      <SessionIcon rotateDuration={2} iconColor={iconColor} iconType="sending" iconSize={'tiny'} />
    </MessageStatusSendingContainer>
  );
};

const MessageStatusSent = () => {
  const iconColor = 'var(--color-text)';

  return (
    <MessageStatusSendingContainer>
      <SessionIcon iconColor={iconColor} iconType="circleCheck" iconSize={'tiny'} />
    </MessageStatusSendingContainer>
  );
};

const MessageStatusRead = () => {
  const iconColor = 'var(--color-text)';

  return (
    <MessageStatusSendingContainer>
      <SessionIcon iconColor={iconColor} iconType="doubleCheckCircleFilled" iconSize={'tiny'} />
    </MessageStatusSendingContainer>
  );
};

const MessageStatusError = () => {
  return (
    <MessageStatusSendingContainer title={window.i18n('sendFailed')}>
      <SessionIcon iconColor={'var(--color-destructibe'} iconType="error" iconSize={'tiny'} />
    </MessageStatusSendingContainer>
  );
};

export const OutgoingMessageStatus = (props: { status?: MessageDeliveryStatus | null }) => {
  switch (props.status) {
    case 'sending':
      return <MessageStatusSending />;
    case 'sent':
      return <MessageStatusSent />;
    case 'read':
      return <MessageStatusRead />;
    case 'error':
      return <MessageStatusError />;
    default:
      return null;
  }
};