remove button and refactoring log out codes

@@ -7,9 +7,9 @@ import {
   faCog,
   faCog,
   faQuestionCircle,
   faQuestionCircle,
   faTags,
   faTags,
+  faSignOutAlt,
 } from "@fortawesome/free-solid-svg-icons";
 } from "@fortawesome/free-solid-svg-icons";
 import { BrowserRouter as Router, Link } from "react-router-dom";
 import { BrowserRouter as Router, Link } from "react-router-dom";
-import Button from "../../Components/Button";
 
 
 const MenuBar = styled.div`
 const MenuBar = styled.div`
   width: 15%;
   width: 15%;
@@ -122,24 +122,6 @@ const StyledLink = styled(Link)`
     )
     )
       return "center";
       return "center";
   }};
   }};
-  button {
-    width: 100%;
-    height: 100%;
-    color: white;
-    background-color: #667aff;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
-    opacity: 0.8;
-    font-size: 20px;
-    cursor: pointer;
-    transition: 0.5s;
-    &:hover {
-      color: #667aff;
-      background-color: white;
-    }
-  }
 `;
 `;
 
 
 export default ({ logOut }) => {
 export default ({ logOut }) => {
@@ -181,8 +163,11 @@ export default ({ logOut }) => {
             </IconBox>
             </IconBox>
           </StyledLink>
           </StyledLink>
         </FuncIconBox>
         </FuncIconBox>
-        <StyledLink to="/" className="LogOutLink">
-          <Button text="Log Out" onClick={logOut}></Button>
+        <StyledLink to="/" className="LogOutLink" onClick={logOut}>
+          <IconBox>
+            <FontAwesomeIcon icon={faSignOutAlt} />
+            <IconName /> Log Out
+          </IconBox>
         </StyledLink>
         </StyledLink>
       </Router>
       </Router>
     </MenuBar>
     </MenuBar>