trampa-frontend/src/components/Cards/MessageCard/MessageCard.styled.js

import { Box, Typography } from "@mui/material";
import styled from "styled-components";
import selectedTheme from "../../../themes";

export const MessageCardContainer = styled(Box)`
  display: flex;
  flex-direction: ${props => props.isMyMessage ? `row-reverse` : `row`};
  margin-bottom: 18px;
`;
export const ProfileImage = styled.img`
  width: 54px;
  height: 54px;
  overflow: hidden;
  border-radius: 100%;
  @media (max-width: 600px) {
    display: none;
  }
`;
export const MessageContent = styled(Box)`
  background-color: ${(props) =>
    props.isMyMessage
      ? selectedTheme.primaryPurple
      : selectedTheme.messageBackground};
  border-radius: ${(props) =>
    props.isMyMessage ? "9px 0px 9px 9px" : "0px 9px 9px 9px"};
    padding: 9px;
    position: relative;
    min-height: 65px;
    margin: 0 18px;
    min-width: 110px;
    @media (max-width: 600px) {
      width: 100%;
    }
`;
export const MessageText = styled(Typography)`
    font-family: "DM Sans";
    font-size: 16px;
    line-height: 22px;
    color: ${props => props.isMyMessage ? `white` : selectedTheme.messageText};
`;
export const MessageDate = styled(Typography)`
    color: ${props => props.isMyMessage ? selectedTheme.messageMyDate : selectedTheme.messageDate};
    font-size: 12px;
    font-style: italic;
    position: absolute;
    bottom: 9px;
    left: 9px;
`;