login css fixes + registration

hipstagram/src/App.js

@@ -10,12 +10,12 @@ import Settings from "./Content/Settings/settings";
 import MessagesContainer from "./Content/Messages/messagesContainer";
 import UsersContainer from "./Content/Users/UsersContainer";
 import Login from "./Content/Login/Login";
+import Registration from "./Content/Registration/Registration";
 
 function App() {
     return (
         <div className="app-wrapper">
             <Header />
-            {/* <Route path="/login" component={Login} /> */}
 
             <div className="content-block">
                 <Navigation />
@@ -38,6 +38,7 @@ function App() {
                     <Route path="/music" component={Music} />
                     <Route path="/settings" component={Settings} />
                     <Route path="/login" component={Login} />
+                    <Route path="/registration" component={Registration} />
                 </div>
             </div>
         </div>

hipstagram/src/Content/Login/Login.css

@@ -3,5 +3,23 @@
     border: 2px solid #3578e5;
     border-radius: 5px;
     display: grid;
-    grid-template-columns: 1fr;
+    justify-items: center;
+}
+
+.login-wrapper input {
+    margin-top: 15px;
+    max-width: 80%;
+    height: 25px;
+    border-radius: 5px;
+}
+
+.login-wrapper button {
+    margin-top: 15px;
+    width: 10%;
+}
+
+.login-wrapper a {
+    text-align: center;
+    color: blue;
+    margin: 15px;
 }

hipstagram/src/Content/Login/Login.js

@@ -1,4 +1,6 @@
 import React from 'react';
+import { NavLink } from 'react-router-dom';
+import Registration from '../Registration/Registration';
 import './Login.css';
 
 const Login = () => {
@@ -9,7 +11,9 @@ const Login = () => {
 
             <button>Login</button>
 
-            <a>Registration</a>
+            <nav>
+                {/* <NavLink href={Registration} >Registration</NavLink> */}
+            </nav>
         </div>
     )
 }

hipstagram/src/Content/Registration/Registration.css

@@ -0,0 +1,25 @@
+.registration-wrapper {
+    background: cadetblue;
+    border: 2px solid #3578e5;
+    border-radius: 5px;
+    display: grid;
+    justify-items: center;
+}
+
+.registration-wrapper input {
+    margin-top: 15px;
+    max-width: 80%;
+    height: 25px;
+    border-radius: 5px;
+}
+
+.registration-wrapper button {
+    margin-top: 15px;
+    width: 10%;
+}
+
+.registration-wrapper a {
+    text-align: center;
+    color: blue;
+    margin: 15px;
+}

hipstagram/src/Content/Registration/Registration.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { NavLink } from 'react-router-dom';
+import Login from '../Login/Login';
+import './Registration.css';
+
+const Registration = () => {
+    return (
+        <div className='registration-wrapper'>
+            <input placeholder="Login"></input>
+            <input placeholder="Password"></input>
+            <input placeholder="Confirm Password"></input>
+
+            <button>Registration</button>
+
+            <nav>
+                <NavLink href={Login}>Login</NavLink>
+            </nav>
+        </div>
+    )
+}
+
+export default Registration;