account page is done

package-lock.json

@@ -1,12 +1,12 @@
 {
     "name": "enterfront",
-    "version": "0.2.2",
+    "version": "0.2.3",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "enterfront",
-            "version": "0.2.2",
+            "version": "0.2.3",
             "dependencies": {
                 "@brojs/cli": "^1.0.0",
                 "@brojs/create": "^1.0.0",

package.json

@@ -24,5 +24,5 @@
         "clean": "rimraf dist"
     },
     "name": "enterfront",
-    "version": "0.2.2"
+    "version": "0.2.3"
 }

src/components/account/AccountButtons.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { URLs } from "../../__data__/urls";
+import ActionButton from "./ActionButton.jsx";
+
+const AccountButtons = (props) => {
+  return (
+      <div className="account-buttons">
+          <ActionButton title={"Exit"} action={props.exitHandler}/>
+          <ActionButton title={"Change Name"} action={props.changeNameHandler}/>
+          <ActionButton title={"Change Pass"} action={props.changePassHandler}/>
+
+          <a className="MyButton mclaren-regular" href={URLs.home.url}>Back</a>
+      </div>
+  );
+};
+
+export default AccountButtons;

src/components/account/ActionButton.jsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+const ActionButton = (props) => {
+  return (
+      <a className="MyButton mclaren-regular" onClick={() => {
+          props.action()
+      }}>{props.title}</a>
+  );
+};
+
+export default ActionButton;

src/components/account/index.css

@@ -0,0 +1,29 @@
+.account-buttons {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+.account-buttons a {
+    display: flex;
+
+    font-size: 1.5vw;
+    transition: color 0.2s ease-in;
+
+    width: 20vw;
+
+    margin-top: 2vw;
+}
+
+.account-buttons a:hover {
+    color: black;
+}
+
+@media only screen and (max-width: 800px) {
+    .account-buttons a {
+        font-size: 2.5vh;
+        width: 60vw;
+        margin-top: 3vh;
+    }
+}

src/components/index.css

@@ -1,6 +1,7 @@
 @import url("reg/index.css");
 @import url("init/index.css");
 @import url("home/index.css");
+@import url("account/index.css");
 
 .MyButton {
     text-decoration: none;

src/pages/Account.jsx

@@ -1,7 +1,22 @@
 import React from "react";
+import AccountButtons from "../components/account/AccountButtons.jsx";
+import userIcon from "../../images/user.svg";
 
 const Account = () => {
-  return <h1>Account</h1>;
+  const exitHandler = () => {}
+  const changeNameHandler = () => {}
+  const changePassHandler = () => {}
+
+  return (
+      <div className="account-items">
+        <img src={userIcon} alt="user" />
+        <AccountButtons
+            exitHandler={exitHandler}
+            changeNameHandler={changeNameHandler}
+            changePassHandler={changePassHandler}
+        />
+      </div>
+  );
 };
 
 export default Account;

src/pages/css/account.css

@@ -0,0 +1,12 @@
+.account-items {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    margin-top: 5vw;
+}
+
+.account-items img {
+    margin-bottom: 1vw;
+}

src/pages/index.css

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