Header CSS arrows added

hipstagram/src/Components/Logout/Logout.css

@@ -6,8 +6,22 @@
     margin: 15px 0;
     text-align: center;
     font-size: 26px;
-    color: #000000;
+    color: rgb(7, 7, 7);
     position: absolute;
-    top: 46px;
-    right: 46px;
+    top: 76px;
+    right: 0px;
+    z-index: 5;
 }
+
+.logout-wrapper:after {
+    content: "";
+    position: absolute;
+    width: 0;
+    height: 0;
+    border-bottom: 12px solid #3578e5;
+    border-left: 12px solid transparent;
+    border-right: 12px solid transparent;
+    top: -12px;
+    left: 60px;
+    z-index: 1;
+}

hipstagram/src/Content/Login/Login.js

@@ -5,7 +5,7 @@ import { actionLogin } from '../../Actions/action_login';
 import LoginError from '../../Components/LoginError/LoginError';
 import './Login.css';
 
-const Login = ({onLogin=null}) => {          //деструктуризация объекта
+const Login = ({onLogin=null}) => {        //деструктуризация объекта
 
     const loginRef = useRef(null)
     const pasRef = useRef(null)

hipstagram/src/Header/header.css

@@ -20,9 +20,25 @@
     border-radius: 5px;
 }
 
-.header a, .header div {
+.header a {
     padding-right: 15px;
     text-decoration: none;
     color: #fff;
     font-size: 26px;
+}
+
+.login-name__wrapper {
+    padding-right: 15px;
+    text-decoration: none;
+    color: #fff;
+    font-size: 26px;
+}
+
+.login-name__wrapper:after{
+    content: "";
+    width: 0;
+    height: 0;
+    border-top: 12px solid #ffffff;
+    border-left: 12px solid transparent;
+    border-right: 12px solid transparent;
 }

hipstagram/src/Header/header.js

@@ -6,7 +6,7 @@ import './header.css';
 
 function Header({ loginName = "", isLogin = false }) {
 
-    let [k, setK] = useState(false)
+    let [isLogout, setIsLogout] = useState(false)
 
     return (
         <nav>
@@ -20,12 +20,12 @@ function Header({ loginName = "", isLogin = false }) {
                 }
 
                 {isLogin &&
-                    <div onClick={() => setK((x) => !x)}>
+                    <div className="login-name__wrapper" onClick={() => setIsLogout((x) => !x)}>
                         {loginName}
                     </div>
                 }
 
-                {k && <Logout />}
+                {isLogout && <Logout />}
             </header>
         </nav>
     );