diff --git a/src/components/AuthHeader/AuthHeader.js b/src/components/AuthHeader/AuthHeader.js index 12a0f27f..aa8a342c 100644 --- a/src/components/AuthHeader/AuthHeader.js +++ b/src/components/AuthHeader/AuthHeader.js @@ -1,5 +1,7 @@ import React from "react"; +import userIcon from "../../images/userIcon.png"; + import "./authHeader.scss"; export const AuthHeader = ({}) => { @@ -8,7 +10,27 @@ export const AuthHeader = ({}) => {

itguild.

-
+
+
+
+ + + + + +
+
+
); }; diff --git a/src/components/AuthHeader/authHeader.scss b/src/components/AuthHeader/authHeader.scss index e69de29b..2249f9b6 100644 --- a/src/components/AuthHeader/authHeader.scss +++ b/src/components/AuthHeader/authHeader.scss @@ -0,0 +1,53 @@ +.auth-header { + background-color: #f1f1f1; + + &__logo { + padding: 0 0 0 160px; + height: 55px; + display: flex; + align-items: center; + + h3 { + font-size: 20px; + line-height: 32px; + color: #000000; + } + } + + &__navigation { + display: flex; + align-items: center; + height: 66px; + width: 100%; + background: #ffffff; + + .auth-nav { + display: flex; + flex-direction: row; + justify-content: space-between; + + ul { + display: flex; + margin: 0; + padding: 0; + list-style: none; + + li { + margin-right: 25px; + + font-size: 18px; + line-height: 32px; + + a, + a:hover { + color: #897676; + } + + a:focus { + color: #000000; + } + } + } + } + } +} diff --git a/src/images/userIcon.png b/src/images/userIcon.png new file mode 100644 index 00000000..f22b899a Binary files /dev/null and b/src/images/userIcon.png differ diff --git a/src/pages/AuthForDevelopers/AuthForDevelopers.js b/src/pages/AuthForDevelopers/AuthForDevelopers.js index 483a605d..01dcb395 100644 --- a/src/pages/AuthForDevelopers/AuthForDevelopers.js +++ b/src/pages/AuthForDevelopers/AuthForDevelopers.js @@ -16,6 +16,7 @@ import { Footer } from "../../components/Footer/Footer"; import SideBar from "../../components/SideBar/SideBar"; import "./authForDevelopers.scss"; +import AuthHeader from "../../components/AuthHeader/AuthHeader"; const AuthForDevelopers = () => { const isAuth = useSelector(selectAuth); @@ -30,6 +31,7 @@ const AuthForDevelopers = () => { return (
+
{ const isAuth = useSelector(selectAuth); @@ -29,6 +30,7 @@ const AuthForPartners = () => { return (
+