hipstagram/src/Components/404_Page/404_Page.css

@@ -2,6 +2,10 @@
     background: cadetblue;
     border: 2px solid #3578e5;
     border-radius: 5px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
 }
 
 .page404-number {
@@ -18,4 +22,14 @@
     font-style: italic;
     color: #a81111;
     padding-bottom: 46px;
+}
+
+.page404-button {
+    margin: 15px 0;
+    width: 10%;
+    background: #fff;
+    padding: 10px 0;
+    border-radius: 5px;
+    border: 2px solid #3578e5;
+    color: #000000;
 }

hipstagram/src/Components/404_Page/404_Page.js

@@ -12,6 +12,10 @@ const Page404 = () => {
                 Ooops... something went wrong
             </div>
 
+            <button className='page404-button'>
+                <b>Return to Profile page</b>
+            </button>
+
         </div>
     )
 }

hipstagram/src/Components/RegistrationError/ConfirmPasswordError.js

@@ -4,6 +4,7 @@ import './RegistrationError.css';
 const ConfirmPasswordError = () => {
     return (
         <div className='confirmPassword-error__wrapper'>
+            You need to enter data to all fields <br/>
             <b>Password</b> and <b>Confirm Password</b> fields should have the same value
         </div>
     )

hipstagram/src/Components/RegistrationError/ExistingLoginError.js

@@ -5,7 +5,7 @@ const ExistingLoginError = () => {
     return (
         <div className='registration-error__wrapper'>
             Login you try to add is already
-            <b> exist</b>. Please try to <b>add</b> another one
+            <b> exist</b>. Please try to <b>enter</b> another one
         </div>
     )
 }

hipstagram/src/Content/Login/Login.css

@@ -30,7 +30,7 @@
     border: 2px solid greenyellow;
 }
 
-.login-wrapper a {
+.login-wrapper__link {
     text-align: center;
     color: blue;
     margin: 15px;

hipstagram/src/Content/Login/Login.js

@@ -24,8 +24,8 @@ const Login = ({onLogin = null, checkLogin = false, promiseLoginStatus, payloadL
     const loginRef = useRef(null)
     const pasRef = useRef(null)
 
-    const [login, setLogin] = useState("")
-    const [password, setPassword] = useState("")
+    const [login, setLogin] = useState('')
+    const [password, setPassword] = useState('')
 
     const RESOLVED = 'RESOLVED'
 
@@ -33,24 +33,24 @@ const Login = ({onLogin = null, checkLogin = false, promiseLoginStatus, payloadL
         <div className='login-wrapper'>
             <input
                 value={login}
-                placeholder="Login"
+                placeholder='Login'
                 ref={loginRef}
                 onChange={(e) => setLogin(e.target.value)}
             />
 
             <input
                 value={password}
-                placeholder="Password"
+                placeholder='Password'
                 ref={pasRef} onChange={(e) => setPassword(e.target.value)}
-                type="password"
+                type='password'
             />
 
             <button onClick={() => onLogin(login, password)}>
                 <b>Login</b>
             </button>
 
-            <nav>
-                <NavLink to="/registration">Registration</NavLink>
+            <nav className='login-wrapper__link'>
+                <NavLink to='/registration'>Registration</NavLink>
             </nav>
 
             {promiseLoginStatus === RESOLVED && payloadLogin === null && <LoginError/>}

hipstagram/src/Content/Registration/Registration.css

@@ -30,7 +30,7 @@
     border: 2px solid greenyellow;
 }
 
-.registration-wrapper a {
+.registration-wrapper__link {
     text-align: center;
     color: blue;
     margin: 15px;

hipstagram/src/Content/Registration/Registration.js

@@ -60,7 +60,7 @@ const Registration = ({onRegistration}) => {
                 <b>Registration</b>
             </button>
 
-            <nav>
+            <nav className='registration-wrapper__link'>
                 <NavLink to="/login">Login</NavLink>
             </nav>