login pages are done

package-lock.json

@@ -16,6 +16,7 @@
                 "express": "^4.19.2",
                 "react": "^18.3.1",
                 "react-dom": "^18.3.1",
+                "react-icons": "^5.3.0",
                 "react-router-dom": "^6.26.1",
                 "styled-components": "^6.1.13",
                 "typescript": "^5.5.4"
@@ -7734,6 +7735,15 @@
                 "react": ">= 16.8.0"
             }
         },
+        "node_modules/react-icons": {
+            "version": "5.3.0",
+            "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.3.0.tgz",
+            "integrity": "sha512-DnUk8aFbTyQPSkCfF8dbX6kQjXA9DktMeJqfjrg6cK9vwQVMxmcA3BfP4QoiztVmEHtwlTgLFsPuH2NskKT6eg==",
+            "license": "MIT",
+            "peerDependencies": {
+                "react": "*"
+            }
+        },
         "node_modules/react-is": {
             "version": "16.13.1",
             "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",

package.json

@@ -8,6 +8,7 @@
         "express": "^4.19.2",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
+        "react-icons": "^5.3.0",
         "react-router-dom": "^6.26.1",
         "styled-components": "^6.1.13",
         "typescript": "^5.5.4"

src/components/home/Header.jsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { URLs } from "../../__data__/urls";
+import { FaHome } from 'react-icons/fa';
+
+const Header = () => {
+  return (
+      <a href={URLs.account.url} className="accountLink">
+          <FaHome className="houseIcon"/>
+          <p>My profile</p>
+      </a>
+  );
+};
+
+export default Header;

src/components/home/css/accountLink.css

@@ -0,0 +1,38 @@
+.houseIcon {
+    transition: color 0.3s ease-in;
+}
+
+.accountLink {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+}
+
+.accountLink p {
+    font-size: 1.5vw;
+    transition: color 0.3s ease-out;
+}
+
+.accountLink svg {
+    font-size: 3vw;
+    transition: fill 0.3s ease-in;
+}
+
+.accountLink:hover p {
+    color: white;
+}
+
+.accountLink:hover svg {
+    fill: orange;
+}
+
+@media only screen and (max-width: 800px) {
+    .accountLink p {
+        font-size: 1.8vh;
+    }
+
+    .accountLink svg {
+        font-size: 4vh;
+    }
+}

src/components/home/index.css

@@ -1,2 +1,3 @@
 @import url("./css/card.css");
-@import url("./css/homeTitle.css");
+@import url("./css/homeTitle.css");
+@import url("./css/accountLink.css");

src/components/reg/InputField.jsx

@@ -2,10 +2,14 @@ import React from 'react';
 
 const InputField = (props) => {
   return (
-      <input
+      <div>
-          onChange={(e) => props.setValue(e.target.value)}
+          <p>{props.title}</p>
-          value={props.value}
+          <input
-      />
+              onChange={(e) => props.setValue(e.target.value)}
+              value={props.value}
+              className="Input"
+          />
+      </div>
   );
 };
 

src/components/reg/LoginButtons.jsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { URLs } from "../../__data__/urls";
+
+const LoginButtons = (props) => {
+    const ref = props.isAuth ? URLs.reg.url : URLs.auth.url
+
+  return (
+      <div>
+          <div className="LoginButtons">
+              <a className="MyButton loginButton" onClick={() => (
+                  props.submitHandler()
+              )}>
+                  {props.isAuth
+                      ? <p className="mclaren-regular">Login</p>
+                      : <p className="mclaren-regular">Register</p>}
+              </a>
+
+              <a className="MyButton loginButton" href={ref}>
+                  {props.isAuth
+                      ? <p className="mclaren-regular">Registration</p>
+                      : <p className="mclaren-regular">I have an account</p>}
+              </a>
+          </div>
+      </div>
+  );
+};
+
+export default LoginButtons;

src/components/reg/css/login.css

@@ -0,0 +1,58 @@
+.LoginButtons {
+    margin-top: 5rex;
+
+    display: flex;
+    flex-direction: column;
+
+    align-items: center;
+}
+
+.LoginButtons a {
+    margin-bottom: 15px;
+    width: 12rem;
+    display: flex;
+}
+
+.Input {
+    border: 0;
+    background-color: black;
+    color: orange;
+    border-radius: 5px;
+
+    padding: 10px;
+
+    width: 18rem;
+}
+
+.MyButton.loginButton {
+    padding: 0;
+}
+
+.MyButton.loginButton p {
+    color: orange;
+    transition: color 0.3s ease-in;
+
+    font-size: 1.3vw;
+    font-weight: 500;
+}
+
+.loginTitle {
+    font-size: 4vw;
+
+    transition: color 0.3s ease-in;
+}
+
+.loginTitle:hover {
+    color: orange;
+}
+
+@media only screen and (max-width: 800px) {
+    .MyButton.loginButton p {
+        font-size: 1.5vh;
+    }
+}
+
+.loginButton:hover p {
+    color: black;
+}
+

src/components/reg/index.css

@@ -1 +1 @@
-@import url("./css/input.css");
+@import url("./css/login.css");

src/components/reg/loginTitle.jsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { URLs } from "../../__data__/urls";
+
+const LoginTitle = () => {
+  return (
+      <a href={URLs.baseUrl}>
+          <h1 className="loginTitle mclaren-regular">Enterfront</h1>
+      </a>
+  );
+};
+
+export default LoginTitle;

src/index.css

@@ -4,7 +4,6 @@
 @import url('https://fonts.googleapis.com/css2?family=MonteCarlo&display=swap');
 
 @import url("pages/index.css");
-@import url("outer/index.css");
 @import url("components/index.css");
 
 

src/outer/Header.jsx

@@ -1,9 +0,0 @@
-import React from 'react';
-
-const Header = () => {
-  return (
-      <div>Header</div>
-  );
-};
-
-export default Header;

src/outer/index.css

@@ -1 +0,0 @@
-@import url("./css/header.css");

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/>
+          <div className="headerPos">
-        <p>Your chats</p>
+              <Header/>
-        <ChatsList chats={chats} />
+          </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>
+      <div className="LoginList">
-        <h1>SignIn</h1>
+          <LoginTitle/>
-        <InputField/>
+          <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 (
+    const [name, setName] = useState("");
-      <div>
+    const [password, setPassword] = useState("");
-        <h1>SignUp</h1>
+    const [repeatPassword, setRepeatPassword] = useState("");
-        <InputField/>
+
-      </div>
+    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");