2020-1-capstone-design1 / Triz_Project1

Go to a project
Toggle navigation Toggle navigation pinning
sdy
796b60d5 1 parent d1f826ee

rename folder's name from "Main" to "ChatMain"

Inline Side-by-side
Showing 7 changed files with 216 additions and 0 deletions
import React from "react";
import styled from "styled-components";
const BubbleBox = styled.div``;
export default () => {
return <BubbleBox />;
};
import React from "react";
import styled from "styled-components";
const ChatFooter = styled.div`
display: flex;
`;
export default () => {
return <ChatFooter></ChatFooter>;
};
import React from "react";
import styled from "styled-components";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faPhone, faEllipsisH } from "@fortawesome/free-solid-svg-icons";
const ChatHeader = styled.div`
width: 100%;
display: flex;
justify-content: space-around;
align-items: center;
box-shadow: 1px 1px 7px #8395a7;
`;
const NickNameBox = styled.div`
display: flex;
flex-direction: column;
padding: 10px;
opacity: 0.8;
`;
const NickName = styled.span`
font-size: 20px;
`;
const IconBox = styled.div`
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
opacity: 0.8;
`;
export default () => {
return (
<ChatHeader>
<NickNameBox>
<NickName /> NickName
</NickNameBox>
<IconBox>
<FontAwesomeIcon icon={faPhone} />
<FontAwesomeIcon icon={faEllipsisH} />
</IconBox>
</ChatHeader>
);
};
import React from "react";
import styled from "styled-components";
import IncomingMsg from "./IncomingMsg";
import OutcomingMsg from "./OutcomingMsg";
const ChatScreen = styled.div``;
export default () => {
return (
<ChatScreen>
<IncomingMsg />
<OutcomingMsg />
</ChatScreen>
);
};
import React from "react";
import styled from "styled-components";
import ImgIconBox from "../SubMenuList/ImgIconBox";
const IncomingBox = styled.div`
display: flex;
flex-direction: row;
width: 100%;
padding: 20px 10px;
margin-top: 20px;
margin-left: 10px;
`;
const MsgContainer = styled.div`
display: flex;
flex-direction: column;
margin-left: 10px;
`;
const MsgBox = styled.div`
background-color: #20bf6b;
color: white;
display: flex;
justify-content: center;
align-items: center;
border-radius: 20px;
margin-bottom: 10px;
`;
const Msg = styled.span`
font-size: 20px;
padding: 20px 10px;
`;
const TimeBox = styled.div`
display: flex;
justify-content: flex-start;
align-items: center;
opacity: 0.7;
`;
const Time = styled.span`
font-size: 15px;
`;
export default () => {
return (
<IncomingBox>
<ImgIconBox />
<MsgContainer>
<MsgBox>
<Msg /> Incoming Message
</MsgBox>
<TimeBox>
<Time /> Monday 00:00
</TimeBox>
</MsgContainer>
</IncomingBox>
);
};
import React from "react";
import styled from "styled-components";
import ChatHeader from "./ChatHeader";
import ChatScreen from "./ChatScreen";
import ChatFooter from "./ChatFooter";
const MainScreen = styled.div`
display: flex;
flex-direction: column;
width: 55%;
`;
export default () => {
return (
<MainScreen>
<ChatHeader />
<ChatScreen />
<ChatFooter />
</MainScreen>
);
};
import React from "react";
import styled from "styled-components";
const OutcomingBox = styled.div`
display: flex;
justify-content: flex-end;
align-items: center;
padding: 20px 10px;
margin-top: 20px;
margin-right: 10px;
`;
const MsgContainer = styled.div`
display: flex;
flex-direction: column;
`;
const MsgBox = styled.div`
display: flex;
justify-content: center;
align-items: center;
background-color: #54a0ff;
color: white;
border-radius: 20px;
margin-bottom: 10px;
`;
const Msg = styled.span`
font-size: 20px;
padding: 20px 10px;
`;
const TimeBox = styled.div`
display: flex;
justify-content: flex-end;
align-items: center;
opacity: 0.8;
`;
const Time = styled.span`
font-size: 15px;
`;
export default () => {
return (
<OutcomingBox>
<MsgContainer>
<MsgBox>
<Msg /> Outcoming Message
</MsgBox>
<TimeBox>
<Time /> Monday 00:00
</TimeBox>
</MsgContainer>
</OutcomingBox>
);
};