login pages are done

images/user.svg

@@ -0,0 +1,9 @@
+<svg width="152" height="159" viewBox="0 0 152 159" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<rect width="152" height="159" fill="url(#pattern0_1_41)"/>
+<defs>
+<pattern id="pattern0_1_41" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0_1_41" transform="matrix(0.00204307 0 0 0.00195312 -0.0230263 0)"/>
+</pattern>
+<image id="image0_1_41" width="512" height="512" xlink:href="data:image/png;base64,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 truncated
+</defs>
+</svg>

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/accountLink.css");

src/components/reg/InputField.jsx

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