2020-1-capstone-design1 / Triz_Project1

Go to a project
Toggle navigation Toggle navigation pinning
sdy
61ee6034 1 parent ceec5f8a

rename folder's name from Main to ChatMain

Inline Side-by-side
Showing 7 changed files with 0 additions and 216 deletions
1 -import React from "react";
2 -import styled from "styled-components";
3 -
4 -const BubbleBox = styled.div``;
5 -
6 -export default () => {
7 - return <BubbleBox />;
8 -};
1 -import React from "react";
2 -import styled from "styled-components";
3 -
4 -const ChatFooter = styled.div`
5 - display: flex;
6 -`;
7 -
8 -export default () => {
9 - return <ChatFooter></ChatFooter>;
10 -};
1 -import React from "react";
2 -import styled from "styled-components";
3 -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
4 -import { faPhone, faEllipsisH } from "@fortawesome/free-solid-svg-icons";
5 -
6 -const ChatHeader = styled.div`
7 - width: 100%;
8 - display: flex;
9 - justify-content: space-around;
10 - align-items: center;
11 - box-shadow: 1px 1px 7px #8395a7;
12 -`;
13 -
14 -const NickNameBox = styled.div`
15 - display: flex;
16 - flex-direction: column;
17 - padding: 10px;
18 - opacity: 0.8;
19 -`;
20 -
21 -const NickName = styled.span`
22 - font-size: 20px;
23 -`;
24 -
25 -const IconBox = styled.div`
26 - display: flex;
27 - flex-direction: row;
28 - justify-content: space-between;
29 - align-items: center;
30 - opacity: 0.8;
31 -`;
32 -
33 -export default () => {
34 - return (
35 - <ChatHeader>
36 - <NickNameBox>
37 - <NickName /> NickName
38 - </NickNameBox>
39 - <IconBox>
40 - <FontAwesomeIcon icon={faPhone} />
41 - <FontAwesomeIcon icon={faEllipsisH} />
42 - </IconBox>
43 - </ChatHeader>
44 - );
45 -};
1 -import React from "react";
2 -import styled from "styled-components";
3 -import IncomingMsg from "./IncomingMsg";
4 -import OutcomingMsg from "./OutcomingMsg";
5 -
6 -const ChatScreen = styled.div``;
7 -
8 -export default () => {
9 - return (
10 - <ChatScreen>
11 - <IncomingMsg />
12 - <OutcomingMsg />
13 - </ChatScreen>
14 - );
15 -};
1 -import React from "react";
2 -import styled from "styled-components";
3 -import ImgIconBox from "../SubMenuList/ImgIconBox";
4 -
5 -const IncomingBox = styled.div`
6 - display: flex;
7 - flex-direction: row;
8 - width: 100%;
9 - padding: 20px 10px;
10 - margin-top: 20px;
11 - margin-left: 10px;
12 -`;
13 -
14 -const MsgContainer = styled.div`
15 - display: flex;
16 - flex-direction: column;
17 - margin-left: 10px;
18 -`;
19 -
20 -const MsgBox = styled.div`
21 - background-color: #20bf6b;
22 - color: white;
23 - display: flex;
24 - justify-content: center;
25 - align-items: center;
26 - border-radius: 20px;
27 - margin-bottom: 10px;
28 -`;
29 -
30 -const Msg = styled.span`
31 - font-size: 20px;
32 - padding: 20px 10px;
33 -`;
34 -
35 -const TimeBox = styled.div`
36 - display: flex;
37 - justify-content: flex-start;
38 - align-items: center;
39 - opacity: 0.7;
40 -`;
41 -
42 -const Time = styled.span`
43 - font-size: 15px;
44 -`;
45 -
46 -export default () => {
47 - return (
48 - <IncomingBox>
49 - <ImgIconBox />
50 - <MsgContainer>
51 - <MsgBox>
52 - <Msg /> Incoming Message
53 - </MsgBox>
54 - <TimeBox>
55 - <Time /> Monday 00:00
56 - </TimeBox>
57 - </MsgContainer>
58 - </IncomingBox>
59 - );
60 -};
1 -import React from "react";
2 -import styled from "styled-components";
3 -import ChatHeader from "./ChatHeader";
4 -import ChatScreen from "./ChatScreen";
5 -import ChatFooter from "./ChatFooter";
6 -
7 -const MainScreen = styled.div`
8 - display: flex;
9 - flex-direction: column;
10 - width: 55%;
11 -`;
12 -
13 -export default () => {
14 - return (
15 - <MainScreen>
16 - <ChatHeader />
17 - <ChatScreen />
18 - <ChatFooter />
19 - </MainScreen>
20 - );
21 -};
1 -import React from "react";
2 -import styled from "styled-components";
3 -
4 -const OutcomingBox = styled.div`
5 - display: flex;
6 - justify-content: flex-end;
7 - align-items: center;
8 - padding: 20px 10px;
9 - margin-top: 20px;
10 - margin-right: 10px;
11 -`;
12 -
13 -const MsgContainer = styled.div`
14 - display: flex;
15 - flex-direction: column;
16 -`;
17 -
18 -const MsgBox = styled.div`
19 - display: flex;
20 - justify-content: center;
21 - align-items: center;
22 - background-color: #54a0ff;
23 - color: white;
24 - border-radius: 20px;
25 - margin-bottom: 10px;
26 -`;
27 -
28 -const Msg = styled.span`
29 - font-size: 20px;
30 - padding: 20px 10px;
31 -`;
32 -
33 -const TimeBox = styled.div`
34 - display: flex;
35 - justify-content: flex-end;
36 - align-items: center;
37 - opacity: 0.8;
38 -`;
39 -
40 -const Time = styled.span`
41 - font-size: 15px;
42 -`;
43 -
44 -export default () => {
45 - return (
46 - <OutcomingBox>
47 - <MsgContainer>
48 - <MsgBox>
49 - <Msg /> Outcoming Message
50 - </MsgBox>
51 - <TimeBox>
52 - <Time /> Monday 00:00
53 - </TimeBox>
54 - </MsgContainer>
55 - </OutcomingBox>
56 - );
57 -};