login pages are done

src/pages/Home.jsx

@@ -1,6 +1,7 @@
 import React from "react";
 import HomeTitle from "../components/home/HomeTitle.jsx";
 import ChatsList from "../components/home/ChatsList.jsx";
+import Header from "../components/home/Header.jsx";
 
 const Home = () => {
 
@@ -61,9 +62,13 @@ const Home = () => {
 
     return (
       <div className="homeWrapper">
-        <HomeTitle/>
-        <p>Your chats</p>
-        <ChatsList chats={chats} />
+          <div className="headerPos">
+              <Header/>
+          </div>
+
+          <HomeTitle/>
+          <p>Your chats</p>
+          <ChatsList chats={chats} />
       </div>
   )
 }

src/pages/SignIn.jsx

@@ -1,11 +1,26 @@
-import React from 'react';
+import React, {useState} from 'react';
 import InputField from "../components/reg/InputField.jsx";
+import LoginButtons from "../components/reg/LoginButtons.jsx";
+import LoginTitle from "../components/reg/loginTitle.jsx";
 
 const SignIn = () => {
+    const [name, setName] = useState("");
+    const [password, setPassword] = useState("");
+
+    const submit = (e) => {
+      console.log('Sign In!')
+    }
+
   return (
-      <div>
-        <h1>SignIn</h1>
-        <InputField/>
+      <div className="LoginList">
+          <LoginTitle/>
+          <InputField title="Name" setValue={setName} value={name}/>
+          <InputField title="Password" setValue={setPassword} value={password}/>
+
+          <LoginButtons
+              submitHandler={submit}
+              isAuth={true}
+          />
       </div>
   );
 };

src/pages/SignUp.jsx

@@ -1,13 +1,30 @@
-import React from 'react';
+import React, {useState} from 'react';
 import InputField from "../components/reg/InputField.jsx";
+import LoginButtons from "../components/reg/LoginButtons.jsx";
+import LoginTitle from "../components/reg/loginTitle.jsx";
 
 const SignUp = () => {
-  return (
-      <div>
-        <h1>SignUp</h1>
-        <InputField/>
-      </div>
-  );
+    const [name, setName] = useState("");
+    const [password, setPassword] = useState("");
+    const [repeatPassword, setRepeatPassword] = useState("");
+
+    const submit = (e) => {
+        console.log('Sign Up!')
+    }
+
+    return (
+        <div className="LoginList">
+            <LoginTitle/>
+            <InputField title="Name" setValue={setName} value={name}/>
+            <InputField title="Password" setValue={setPassword} value={password}/>
+            <InputField title="Repeat Password" setValue={setRepeatPassword} value={repeatPassword}/>
+
+            <LoginButtons
+                submitHandler={submit}
+                isAuth={false}
+            />
+        </div>
+    );
 };
 
 export default SignUp;

src/pages/css/home.css

@@ -23,3 +23,9 @@
 
     margin: 3rem;
 }
+
+.headerPos {
+    position: absolute;
+    top: 3vw;
+    right: 3vw;
+}

src/pages/css/input.css

@@ -0,0 +1,8 @@
+.LoginList {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+
+    margin-top: 2rem;
+}

src/pages/index.css

@@ -1,2 +1,3 @@
 @import url("css/init.css");
-@import url("css/home.css");
+@import url("css/home.css");
+@import url("css/input.css");