oodd-web-react/src/pages/Chats/RcvdMessage/styles.tsx at d0d86952dafbc4b7211afead7bb3160ba89ea3e5 · oodd-team/oodd-web-react · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
import { styled } from 'styled-components';

import { StyledText } from '@components/Text/StyledText';

export const FirstMessageLayout = styled.div<{ $isSenderChanged: boolean }>`
	display: flex;
	margin: 0 auto 0.5rem 0;
	margin-top: ${({ $isSenderChanged }) => ($isSenderChanged ? '1rem' : 0)};
`;

export const MessageLayout = styled.div`
	display: flex;
	margin: 0 auto 0.5rem 2rem;
`;

export const UserImage = styled.img`
	width: 1.5rem;
	height: 1.5rem;
	object-fit: cover;
	border-radius: 1.25rem;
	margin-right: 0.5rem;
	cursor: pointer;
`;

export const UsernameText = styled(StyledText)`
	cursor: pointer;
	margin-bottom: 0.2rem;
`;

export const MessageBox = styled.div`
	display: flex;
	gap: 0.2rem;
	margin-right: 0.5rem;
`;

export const Message = styled(StyledText)`
	padding: 0.4rem 0.8rem;
	background-color: #f2f2f2;
	border-radius: 0 0.8rem 0.8rem 0.8rem;
	overflow-wrap: break-word;
`;

export const TimeWrapper = styled.time`
	display: flex;
	align-items: flex-end;
	color: ${({ theme }) => theme.colors.text.caption};
	font-family: 'Pretendard Variable';
	font-size: 0.5625rem;
	font-style: normal;
	font-weight: 400;
	line-height: 120%; /* 0.675rem */
`;