login, registration buttons CSS changes + hover

hipstagram/src/Actions/action_registration.js

@@ -21,7 +21,7 @@ export const actionRegistrations = (login, password) => async (dispatch) => {
     } else {
         if (result?.data?.createUser?._id) {
             console.log('Registered successfull')
-            dispatch(actionLogin(login, password))  // something
+            dispatch(actionLogin(login, password))
         } else {
             console.log("Registration failed")
             dispatch(actionLoginNetworkError())

hipstagram/src/Content/Login/Login.css

@@ -11,11 +11,23 @@
     max-width: 80%;
     height: 25px;
     border-radius: 5px;
+    border-color: #3578e5;
 }
 
 .login-wrapper button {
     margin-top: 15px;
     width: 10%;
+    background: #fff;
+    padding: 10px 0;
+    border-radius: 5px;
+    border: 2px solid #3578e5;
+    color: blue;
+}
+
+.login-wrapper button:hover {
+    color: #000000;
+    background: #efe8e8;
+    border: 2px solid greenyellow;
 }
 
 .login-wrapper a {

hipstagram/src/Content/Login/Login.js

@@ -1,11 +1,11 @@
-import React, { useEffect, useRef, useState } from 'react';
-import { connect } from 'react-redux';
-import { NavLink, useHistory } from 'react-router-dom';
-import { actionLogin } from '../../Actions/action_login';
+import React, {useEffect, useRef, useState} from 'react';
+import {connect} from 'react-redux';
+import {NavLink, useHistory} from 'react-router-dom';
+import {actionLogin} from '../../Actions/action_login';
 import LoginError from '../../Components/LoginError/LoginError';
 import './Login.css';
 
-const Login = ({ onLogin = null, checkLogin = false, promiseLoginStatus, payloadLogin, loginNetworkError }) => {      //деструктуризация объекта
+const Login = ({onLogin = null, checkLogin = false, promiseLoginStatus, payloadLogin, loginNetworkError}) => {      //деструктуризация объекта
 
     let history = useHistory();
 
@@ -16,7 +16,7 @@ const Login = ({ onLogin = null, checkLogin = false, promiseLoginStatus, payload
     if (localStorage.authToken) {
         history.push('/profile')
     }
-    if(loginNetworkError) {
+    if (loginNetworkError) {
         history.push('/404')
     }
 
@@ -34,18 +34,29 @@ const Login = ({ onLogin = null, checkLogin = false, promiseLoginStatus, payload
 
     return (
         <div className='login-wrapper'>
-            <input value={login} placeholder="Login" ref={loginRef} onChange={(e) => setLogin(e.target.value)}></input>
+            <input
+                value={login}
+                placeholder="Login"
+                ref={loginRef}
+                onChange={(e) => setLogin(e.target.value)}
+            />
             {/* зачем нужен value? */}
             {/* <input placeholder="Login" ref={loginRef} onChange={(e) => setLogin(e.target.value)}></input> */}
-            <input value={password} placeholder="Password" ref={pasRef} onChange={(e) => setPassword(e.target.value)} type="password"></input>
+            <input
+                value={password}
+                placeholder="Password"
+                ref={pasRef} onChange={(e) => setPassword(e.target.value)} type="password"
+            />
 
-            <button onClick={() => onLogin(login, password)}>Login</button>
+            <button onClick={() => onLogin(login, password)}>
+                <b>Login</b>
+            </button>
 
             <nav>
-                <NavLink to="/registration" >Registration</NavLink>
+                <NavLink to="/registration">Registration</NavLink>
             </nav>
 
-            {promiseLoginStatus ==='RESOLVED' && payloadLogin === null && <LoginError />}
+            {promiseLoginStatus === 'RESOLVED' && payloadLogin === null && <LoginError/>}
         </div>
     )
 }
@@ -55,6 +66,6 @@ const CLogin = connect((state) => ({
     promiseLoginStatus: state?.promise?.Login?.status,
     payloadLogin: state?.promise?.Login?.payload?.data?.login,
     loginNetworkError: state?.networkError?.loginNetworkError
-}), { onLogin: actionLogin })(Login)
+}), {onLogin: actionLogin})(Login)
 
 export default CLogin;

hipstagram/src/Content/Registration/Registration.css

@@ -11,11 +11,23 @@
     max-width: 80%;
     height: 25px;
     border-radius: 5px;
+    border-color: #3578e5;
 }
 
 .registration-wrapper button {
     margin-top: 15px;
     width: 10%;
+    background: #fff;
+    padding: 10px 0;
+    border-radius: 5px;
+    border: 2px solid #3578e5;
+    color: blue;
+}
+
+.registration-wrapper button:hover {
+    color: #000000;
+    background: #efe8e8;
+    border: 2px solid greenyellow;
 }
 
 .registration-wrapper a {