Feature 1702 finished 80%

src/components/Header/Header.js

@@ -3,6 +3,7 @@ import {
   AuthButtonsContainer,
   HeaderContainer,
   LogoContainer,
+  MarketplaceLinkRoute,
   ToolsButtonsContainer,
   ToolsContainer,
 } from "./Header.styled";
@@ -118,6 +119,7 @@ const Header = () => {
   if (!shouldShow) {
     return <></>;
   }
+  console.log(history);
 
   return (
     <HeaderContainer>
@@ -171,8 +173,16 @@ const Header = () => {
                   />
                 ) : (
                   <React.Fragment>
-                    <LoginButton />
-                    <RegisterButton />
+                    {routeMatches(ABOUT_PAGE) ? (
+                      <>
+                        <MarketplaceLinkRoute>Marketplace</MarketplaceLinkRoute>
+                      </>
+                    ) : (
+                      <>
+                        <LoginButton />
+                        <RegisterButton />
+                      </>
+                    )}
                   </React.Fragment>
                 )}
               </AuthButtonsContainer>

src/components/Header/Header.styled.js

@@ -1,5 +1,7 @@
 import { Box } from "@mui/material";
 import styled from "styled-components";
+import selectedTheme from "../../themes";
+import Link from "../Link/Link";
 
 export const DrawerContainer = styled(Box)`
   display: flex;
@@ -95,3 +97,19 @@ export const AuthButtonsDrawerContainer = styled(Box)`
   justify-content: space-around;
 `;
 export const HeaderContainer = styled(Box)``;
+
+export const MarketplaceLinkRoute = styled(Link)`
+  text-decoration: none;
+  font-family: ${selectedTheme.fonts.textFont};
+  font-size: 16px;
+  line-height: 22px;
+  letter-spacing: 0.02em;
+  border-bottom: 1px dashed ${selectedTheme.colors.primaryPurple};
+  &:hover {
+    border-bottom: 1px solid ${selectedTheme.colors.iconYellowColor};
+  }
+
+  @media (max-width: 600px) {
+    display: none;
+  }
+`;