norma-library/src/components/NormaChatMessageBalloon/styles.ts

Olos/Norma-DS. Design System based on Material UI, developed with TypeScript and Styled Components to create reusable and consistent components in web applications.

import { Box, Typography } from '@mui/material';
import { styled } from '@mui/material/styles';

export const ChatMessageBalloonContainerStyle: any = styled(Box)({
  display: 'flex',
  flexDirection: 'column',
});

export const ChatMessageBalloonRowStyle: any = styled('div')<{ direction: string }>`
  display: flex;
  margin-bottom: 8px;
  flex-direction: ${props => (props.direction === 'I' ? 'row-reverse' : 'row')};
  justify-content: flex-start;
  align-items: flex-start;
  vertical-align: middle;
  &:last-child {
    margin-bottom: 0px;
  }
`;

export const ChatMessageBalloonStyle: any = styled('div')<{ direction: string }>`
  background-color: ${props => (props.direction === 'I' ? '#FFF' : '#E18B50')};
  border: 2px solid transparent;
  border-radius: ${props => (props.direction === 'I' ? '20px 20px 0px 20px' : '20px 20px 20px 0px')};
  box-sizing: border-box;
  color: ${props => (props.direction === 'I' ? '#4D4F5B' : '#FFF')};
  display: flex;
  flex-direction: column;
  padding: 12px 24px;
  width: 60%;
  transition: border 0.6s cubic-bezier(0.16, 1, 0.3, 1);

  &.is-highlight {
    border: 2px solid #8a8888;
  }

  &.is-interactive {
    cursor: pointer;

    &:hover {
      border: 2px solid #8a8888;
    }
  }
`;

export const ChatMessageDateStyle: any = styled(Typography)`
  color: #43425d;
  opacity: 0.5;
  margin-top: 7px;
`;

export const ChatMessageChildrenStyle: any = styled('div')<{ direction: string }>`
  align-items: center;
  box-sizing: border-box;
  display: flex;
  flex: 1;
  justify-content: ${props => (props.direction === 'I' ? 'end' : 'start')};
  padding: 8px;
`;