2020-1-capstone-design1 / Triz_Project1

Go to a project
Toggle navigation Toggle navigation pinning
sdy
7df167be 1 parent b5ea2465

update HomeIconBox style

Inline Side-by-side
Showing 1 changed file with 32 additions and 29 deletions
...@@ -9,8 +9,9 @@ import { ...@@ -9,8 +9,9 @@ import {
9 faQuestionCircle, 9 faQuestionCircle,
10 faTags, 10 faTags,
11 } from "@fortawesome/free-solid-svg-icons"; 11 } from "@fortawesome/free-solid-svg-icons";
12 +import { BrowserRouter as Router, Link } from "react-router-dom";
12 13
13 -const UserIconBox = styled.div` 14 +const HomeIconBox = styled.div`
14 width: 100%; 15 width: 100%;
15 height: 10%; 16 height: 10%;
16 display: flex; 17 display: flex;
...@@ -21,7 +22,7 @@ const UserIconBox = styled.div` ...@@ -21,7 +22,7 @@ const UserIconBox = styled.div`
21 opacity: 0.8; 22 opacity: 0.8;
22 color: white; 23 color: white;
23 cursor: pointer; 24 cursor: pointer;
24 - transition: 0.3s; 25 + transition: 0.5s;
25 &:hover { 26 &:hover {
26 color: #667aff; 27 color: #667aff;
27 background-color: white; 28 background-color: white;
...@@ -47,7 +48,7 @@ const IconBox = styled.div` ...@@ -47,7 +48,7 @@ const IconBox = styled.div`
47 align-items: center; 48 align-items: center;
48 width: 100%; 49 width: 100%;
49 height: 100%; 50 height: 100%;
50 - transition: 0.3s; 51 + transition: 0.5s;
51 &:hover { 52 &:hover {
52 color: #667aff; 53 color: #667aff;
53 background-color: white; 54 background-color: white;
...@@ -69,7 +70,7 @@ const ExitIconBox = styled.div` ...@@ -69,7 +70,7 @@ const ExitIconBox = styled.div`
69 opacity: 0.8; 70 opacity: 0.8;
70 color: white; 71 color: white;
71 cursor: pointer; 72 cursor: pointer;
72 - transition: 0.3s; 73 + transition: 0.5s;
73 &:hover { 74 &:hover {
74 color: #667aff; 75 color: #667aff;
75 background-color: white; 76 background-color: white;
...@@ -87,31 +88,33 @@ const IconName = styled.span` ...@@ -87,31 +88,33 @@ const IconName = styled.span`
87 export default () => { 88 export default () => {
88 return ( 89 return (
89 <> 90 <>
90 - <UserIconBox> 91 + <Router>
91 - <FontAwesomeIcon icon={faHome} /> 92 + <HomeIconBox>
92 - </UserIconBox> 93 + <FontAwesomeIcon icon={faHome} />
93 - <FuncIconBox> 94 + </HomeIconBox>
94 - <IconBox> 95 + <FuncIconBox>
95 - <FontAwesomeIcon icon={faComment} /> 96 + <IconBox>
96 - <IconName /> One To One Chat 97 + <FontAwesomeIcon icon={faComment} />
97 - </IconBox> 98 + <IconName /> One To One Chat
98 - <IconBox> 99 + </IconBox>
99 - <FontAwesomeIcon icon={faQuestionCircle} /> 100 + <IconBox>
100 - <IconName /> Random Chat 101 + <FontAwesomeIcon icon={faQuestionCircle} />
101 - </IconBox> 102 + <IconName /> Random Chat
102 - <IconBox> 103 + </IconBox>
103 - <FontAwesomeIcon icon={faTags} /> 104 + <IconBox>
104 - <IconName /> Category Chat 105 + <FontAwesomeIcon icon={faTags} />
105 - </IconBox> 106 + <IconName /> Category Chat
106 - <IconBox> 107 + </IconBox>
107 - <FontAwesomeIcon icon={faCog} /> 108 + <IconBox>
108 - <IconName /> Profile Setting 109 + <FontAwesomeIcon icon={faCog} />
109 - </IconBox> 110 + <IconName /> Profile Setting
110 - </FuncIconBox> 111 + </IconBox>
111 - <ExitIconBox> 112 + </FuncIconBox>
112 - <FontAwesomeIcon icon={faSignOutAlt} /> 113 + <ExitIconBox>
113 - <IconName /> Log Out 114 + <FontAwesomeIcon icon={faSignOutAlt} />
114 - </ExitIconBox> 115 + <IconName /> Log Out
116 + </ExitIconBox>
117 + </Router>
115 </> 118 </>
116 ); 119 );
117 }; 120 };
......