New AuthHeader

src/components/Common/AuthHeader/authHeader.scss

@@ -1,62 +1,63 @@
 .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;
-    }
-    span {
-      color: #52b709;
-    }
-  }
+  position: relative;
+  z-index: 3;
+  padding: 25px 100px 40px 100px;
+  font-family: "GT Eesti Pro Display";
+  background: #eeeeee;
 
   &__navigation {
     display: flex;
     align-items: center;
     height: 66px;
     width: 100%;
-    background: #ffffff;
+    justify-content: space-around;
 
-    .auth-nav {
-      height: 35px;
-      display: flex;
-      flex-direction: row;
-      justify-content: space-between;
+    .auth {
+      &__logo {
+        color: #4a4a4a;
+        font-weight: 900;
+        font-size: 16px;
+        letter-spacing: 2px;
+        position: relative;
 
-      ul {
-        display: flex;
-        margin: 0;
-        padding: 0;
-        list-style: none;
+        &::after {
+          content: "";
+          position: absolute;
+          background: #a7ca60;
+          width: 7px;
+          height: 7px;
+          border-radius: 100px;
+          left: 49%;
+          top: -30%;
+        }
+      }
 
-        li {
-          margin-right: 25px;
+      &-nav {
+        ul {
+          display: flex;
+          column-gap: 50px;
+          margin: 0;
+          padding: 0;
+          list-style: none;
 
-          font-size: 18px;
-          line-height: 32px;
+          li {
+            cursor: pointer;
+            font-weight: 400;
+            font-size: 16px;
+            line-height: 18.5px;
 
-          a {
-            color: #897676;
-          }
-          a:hover {
-            text-decoration: none;
-          }
+            a {
+              color: #838383;
+            }
+            a:hover {
+              color: #161616;
+            }
 
-          a:focus,
-          a.active {
-            color: #000000;
-          }
-
-          .candidate {
-            background: transparent;
-            color: #1458dd;
+            // a:focus,
+            a.active {
+              color: #000000;
+              font-weight: 700;
+            }
           }
         }
       }
@@ -64,6 +65,35 @@
       img {
         cursor: pointer;
       }
+
+      &__buttons {
+        display: flex;
+        column-gap: 22px;
+
+        button {
+          width: 140px;
+          height: 34px;
+          border-radius: 44px;
+          font-size: 13px;
+          font-weight: 400;
+        }
+
+        .signIn {
+          a {
+            color: #1e1e1e;
+          }
+          background-color: #a7ca60;
+          border: none;
+        }
+
+        .signUp {
+          a {
+            color: #a7ca60;
+          }
+          border: 1px solid #a7ca60;
+          background: none;
+        }
+      }
     }
   }
 }