Button component created

hipstagram/src/Components/Button/Button.css

@@ -0,0 +1,29 @@
+.button-active {
+    margin-top: 15px;
+    width: 10%;
+    background: #fff;
+    padding: 10px 0;
+    border-radius: 5px;
+    border: 2px solid #3578e5;
+    color: #000000;
+}
+
+.button-active:hover {
+    color: #fff;
+    background: #3578e5;
+    border-color: #fff;
+    transition-duration: 0.5s;
+    transition-timing-function: ease-out;
+}
+
+.button-disabled {
+    border: 2px solid #fff;
+}
+
+.button-disabled:hover {
+    border: 2px solid #e08110;
+    background: #949496;
+    color: #e08110;
+    transition-duration: 0.5s;
+    transition-timing-function: ease-out;
+}

hipstagram/src/Components/Button/Button.js

@@ -0,0 +1,22 @@
+// import React from 'react';
+// import './Button.css';
+//
+// const Button = (props) => {
+//     return(
+//         <button
+//             onClick={() => {
+//                 if(props.isValid()) {
+//                     onRegistration(login, password)
+//                 }
+//                 else {
+//                     setShow(true)
+//                 }
+//             }}
+//             className={isRegistrationValid() ? 'button-active': 'button-disabled'}
+//         >
+//             <b>{props.name}</b>
+//         </button>
+//     )
+// }
+
+// export default Button;

hipstagram/src/Content/Registration/Registration.css

@@ -24,10 +24,24 @@
     color: #000000;
 }
 
-.button-hover:hover {
-    color: #000000;
-    background: #efe8e8;
-    border: 2px solid greenyellow;
+.button-active:hover {
+    color: #fff;
+    background: #3578e5;
+    border-color: #fff;
+    transition-duration: 0.5s;
+    transition-timing-function: ease-out;
+}
+
+.button-disabled {
+    border: 2px solid #fff;
+}
+
+.button-disabled:hover {
+    border: 2px solid #e08110;
+    background: #949496;
+    color: #e08110;
+    transition-duration: 0.5s;
+    transition-timing-function: ease-out;
 }
 
 .registration-wrapper__link {

hipstagram/src/Content/Registration/Registration.js

@@ -5,6 +5,7 @@ import ExistingLoginError from "../../Components/RegistrationError/ExistingLogin
 import ConfirmPasswordError from "../../Components/RegistrationError/ConfirmPasswordError";
 import {connect} from "react-redux";
 import {actionRegistrations} from "../../Actions/action_registration";
+import Button from "../../Components/Button/Button";
 
 const Registration = ({onRegistration}) => {
 
@@ -54,12 +55,16 @@ const Registration = ({onRegistration}) => {
                         setShow(true)
                     }
                 }}
-                // disabled={!isRegistrationValid()}
-                className={isRegistrationValid() ? 'button-hover': ''}
+                className={isRegistrationValid() ? 'button-active': 'button-disabled'}
             >
                 <b>Registration</b>
             </button>
 
+            {/*<Button*/}
+            {/*    name='Registration'*/}
+            {/*    isValid={isRegistrationValid}*/}
+            {/*/>*/}
+
             <nav className='registration-wrapper__link'>
                 <NavLink to="/login">Login</NavLink>
             </nav>