2020-1-capstone-design1 / Triz_Project1

Go to a project
Toggle navigation Toggle navigation pinning
sdy
6ee92b1b 1 parent 1549ef30

update componets style

Inline Side-by-side
Showing 1 changed file with 57 additions and 10 deletions
...@@ -7,28 +7,42 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; ...@@ -7,28 +7,42 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
7 import { faAddressBook, faMusic } from "@fortawesome/free-solid-svg-icons"; 7 import { faAddressBook, faMusic } from "@fortawesome/free-solid-svg-icons";
8 8
9 const Wrapper = styled.div` 9 const Wrapper = styled.div`
10 - display: flex; 10 + display: grid;
11 - flex-direction: column;
12 width: 100%; 11 width: 100%;
13 height: 100%; 12 height: 100%;
13 + grid-template-rows: 80px auto min-content;
14 + grid-template-areas:
15 + "Header"
16 + "Workspace";
17 + .Header {
18 + box-shadow: none;
19 + }
14 `; 20 `;
15 21
16 const ChatWrapper = styled.div` 22 const ChatWrapper = styled.div`
17 display: flex; 23 display: flex;
18 flex-direction: row; 24 flex-direction: row;
19 width: 100%; 25 width: 100%;
26 + height: 100%;
27 + grid-template-columns: 200px auto;
28 + grid-area: "Workspace";
20 `; 29 `;
21 30
22 const ChatMenuContainer = styled.div` 31 const ChatMenuContainer = styled.div`
23 - display: flex; 32 + display: grid;
24 - flex-direction: column; 33 + width: 200px;
25 height: 100%; 34 height: 100%;
35 + background-color: #667aff;
36 + color: white;
37 + grid-template-rows: 80px 1fr 1fr;
26 `; 38 `;
27 39
28 const TitleContainer = styled.div` 40 const TitleContainer = styled.div`
29 display: flex; 41 display: flex;
30 justify-content: center; 42 justify-content: center;
31 align-items: center; 43 align-items: center;
44 + font-size: 20px;
45 + border-top: 1px solid rgba(255, 255, 255, 0.5);
32 `; 46 `;
33 47
34 const Title = styled.span` 48 const Title = styled.span`
...@@ -43,27 +57,55 @@ const PeopleContainer = styled.div` ...@@ -43,27 +57,55 @@ const PeopleContainer = styled.div`
43 display: flex; 57 display: flex;
44 justify-content: center; 58 justify-content: center;
45 align-items: center; 59 align-items: center;
60 + svg {
61 + font-size: 20px;
62 + }
63 + span {
64 + margin-left: 10px;
65 + font-size: 20px;
66 + }
67 + border-top: 1px solid rgba(255, 255, 255, 0.5);
46 `; 68 `;
47 69
48 const CategoryContainer = styled.div` 70 const CategoryContainer = styled.div`
49 display: flex; 71 display: flex;
50 justify-content: center; 72 justify-content: center;
51 align-items: center; 73 align-items: center;
74 + svg {
75 + font-size: 20px;
76 + }
77 + span {
78 + margin-left: 10px;
79 + font-size: 20px;
80 + }
81 + border-top: 1px solid rgba(255, 255, 255, 0.5);
52 `; 82 `;
53 83
54 const ChatScreenContainer = styled.div` 84 const ChatScreenContainer = styled.div`
85 + display: grid;
86 + width: 100%;
87 + height: 100%;
88 + grid-template-rows: 70px 1fr;
89 +`;
90 +
91 +const ChatScreenHeader = styled.div`
55 display: flex; 92 display: flex;
56 - flex-direction: column; 93 + flex-direction: row;
94 + align-items: center;
95 + padding: 10px;
96 + border-bottom: 1px solid rgba(0, 0, 0, 0.1);
57 `; 97 `;
58 98
99 +const ChatScreenBox = styled.div``;
100 +
59 export default ({ data }) => { 101 export default ({ data }) => {
60 return ( 102 return (
61 <Wrapper> 103 <Wrapper>
62 - <Header /> 104 + <Header text={"KhuChat"} />
63 - <ChatWrapper> 105 + <ChatWrapper className="ChatWrapper">
64 <ChatMenuContainer> 106 <ChatMenuContainer>
65 <TitleContainer> 107 <TitleContainer>
66 - <Title>{data}</Title> 108 + <Title>First Room</Title>
67 </TitleContainer> 109 </TitleContainer>
68 <PeopleContainer> 110 <PeopleContainer>
69 <FontAwesomeIcon icon={faAddressBook} /> 111 <FontAwesomeIcon icon={faAddressBook} />
...@@ -75,8 +117,13 @@ export default ({ data }) => { ...@@ -75,8 +117,13 @@ export default ({ data }) => {
75 </CategoryContainer> 117 </CategoryContainer>
76 </ChatMenuContainer> 118 </ChatMenuContainer>
77 <ChatScreenContainer> 119 <ChatScreenContainer>
78 - <Input placeholder={"Enter any words"} /> 120 + <ChatScreenHeader>
79 - <Button text={"Submit"} /> 121 + <Title>Selected Menu Title</Title>
122 + </ChatScreenHeader>
123 + <ChatScreenBox>
124 + <Input placeholder={"Enter any words"} />
125 + <Button text={"Submit"} />
126 + </ChatScreenBox>
80 </ChatScreenContainer> 127 </ChatScreenContainer>
81 </ChatWrapper> 128 </ChatWrapper>
82 </Wrapper> 129 </Wrapper>
......