Merge branch 'frontend' into gruppPP

frontend/src/Components/Button.tsx

@@ -1,14 +1,17 @@
 function Button({
   text,
   onClick,
+  type,
 }: {
   text: string;
   onClick: () => void;
+  type: "submit" | "button" | "reset";
 }): JSX.Element {
   return (
     <button
       onClick={onClick}
       className="inline-block py-1 px-8 font-bold bg-orange-500 text-white border-2 border-black rounded-full cursor-pointer mt-5 mb-5 transition-colors duration-10 hover:bg-orange-600 hover:text-gray-300 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size: 4vh;"
+      type={type}
     >
       {text}
     </button>

frontend/src/Components/Register.tsx

@@ -1,6 +1,8 @@
 import { useState } from "react";
 import { NewUser } from "../Types/Users";
 import { api } from "../API/API";
+import Logo from "../assets/Logo.svg";
+import Button from "./Button";
 
 export default function Register(): JSX.Element {
   const [username, setUsername] = useState("");
@@ -12,25 +14,32 @@ export default function Register(): JSX.Element {
   };
 
   return (
-    <div>
+    <div className="flex flex-col h-screen w-screen items-center justify-center">
-      <div className="w-full max-w-xs">
+      <div className="border-4 border-black bg-white flex flex-col items-center justify-center h-fit w-fit rounded-3xl content-center pl-20 pr-20">
         <form
-          className="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4"
+          className="bg-white rounded px-8 pt-6 pb-8 mb-4 items-center justify-center flex flex-col w-fit h-fit"
           onSubmit={(e) => {
             e.preventDefault();
             void handleRegister();
           }}
         >
-          <h3 className="pb-2">Register new user</h3>
+          <img
+            src={Logo}
+            className="logo w-[7vw] mb-10 mt-10"
+            alt="TTIME Logo"
+          />
+          <h3 className="pb-4 mb-2 text-center font-bold text-[18px]">
+            Register New User
+          </h3>
           <div className="mb-4">
             <label
-              className="block text-gray-700 text-sm font-bold mb-2"
+              className="block text-gray-700 text-sm font-sans font-bold mb-2"
               htmlFor="username"
             >
               Username
             </label>
             <input
-              className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
+              className="appearance-none border-2 border-black rounded-2xl w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
               id="username"
               type="text"
               placeholder="Username"
@@ -42,13 +51,13 @@ export default function Register(): JSX.Element {
           </div>
           <div className="mb-6">
             <label
-              className="block text-gray-700 text-sm font-bold mb-2"
+              className="block text-gray-700 text-sm font-sans font-bold mb-2"
               htmlFor="password"
             >
               Password
             </label>
             <input
-              className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline"
+              className="appearance-none border-2 border-black rounded-2xl w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
               id="password"
               type="password"
               placeholder="Choose your password"
@@ -59,12 +68,13 @@ export default function Register(): JSX.Element {
             />
           </div>
           <div className="flex items-center justify-between">
-            <button
+            <Button
-              className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
+              text="Register"
+              onClick={(): void => {
+                return;
+              }}
               type="submit"
-            >
+            />
-              Register
-            </button>
           </div>
         </form>
         <p className="text-center text-gray-500 text-xs"></p>

frontend/src/Pages/AdminPages/AdminAddProject.tsx

@@ -11,12 +11,14 @@ function AdminAddProject(): JSX.Element {
         onClick={(): void => {
           return;
         }}
+        type="button"
       />
       <Button
         text="Back"
         onClick={(): void => {
           return;
         }}
+        type="button"
       />
     </>
   );

frontend/src/Pages/AdminPages/AdminAddUser.tsx

@@ -11,12 +11,14 @@ function AdminAddUser(): JSX.Element {
         onClick={(): void => {
           return;
         }}
+        type="button"
       />
       <Button
         text="Back"
         onClick={(): void => {
           return;
         }}
+        type="button"
       />
     </>
   );

frontend/src/Pages/AdminPages/AdminChangeUsername.tsx

@@ -11,12 +11,14 @@ function AdminChangeUsername(): JSX.Element {
         onClick={(): void => {
           return;
         }}
+        type="button"
       />
       <Button
         text="Back"
         onClick={(): void => {
           return;
         }}
+        type="button"
       />
     </>
   );

frontend/src/Pages/AdminPages/AdminManageProjects.tsx

@@ -11,12 +11,14 @@ function AdminManageProjects(): JSX.Element {
         onClick={(): void => {
           return;
         }}
+        type="button"
       />
       <Button
         text="Back"
         onClick={(): void => {
           return;
         }}
+        type="button"
       />
     </>
   );

frontend/src/Pages/AdminPages/AdminManageUsers.tsx

@@ -30,6 +30,7 @@ function AdminManageUsers(): JSX.Element {
         onClick={(): void => {
           navigate("/admin-add-user");
         }}
+        type="button"
       />
       <BackButton />
     </>

frontend/src/Pages/AdminPages/AdminProjectAddMember.tsx

@@ -11,12 +11,14 @@ function AdminProjectAddMember(): JSX.Element {
         onClick={(): void => {
           return;
         }}
+        type="button"
       />
       <Button
         text="Back"
         onClick={(): void => {
           return;
         }}
+        type="button"
       />
     </>
   );

frontend/src/Pages/AdminPages/AdminProjectChangeUserRole.tsx

@@ -11,12 +11,14 @@ function AdminProjectChangeUserRole(): JSX.Element {
         onClick={(): void => {
           return;
         }}
+        type="button"
       />
       <Button
         text="Back"
         onClick={(): void => {
           return;
         }}
+        type="button"
       />
     </>
   );

frontend/src/Pages/AdminPages/AdminProjectManageMembers.tsx

@@ -11,12 +11,14 @@ function AdminProjectManageMembers(): JSX.Element {
         onClick={(): void => {
           return;
         }}
+        type="button"
       />
       <Button
         text="Back"
         onClick={(): void => {
           return;
         }}
+        type="button"
       />
     </>
   );

frontend/src/Pages/AdminPages/AdminProjectPage.tsx

@@ -11,12 +11,14 @@ function AdminProjectPage(): JSX.Element {
         onClick={(): void => {
           return;
         }}
+        type="button"
       />
       <Button
         text="Back"
         onClick={(): void => {
           return;
         }}
+        type="button"
       />
     </>
   );

frontend/src/Pages/AdminPages/AdminProjectStatistics.tsx

@@ -11,6 +11,7 @@ function AdminProjectStatistics(): JSX.Element {
         onClick={(): void => {
           return;
         }}
+        type="button"
       />
     </>
   );

frontend/src/Pages/AdminPages/AdminProjectViewMemberInfo.tsx

@@ -11,12 +11,14 @@ function AdminProjectViewMemberInfo(): JSX.Element {
         onClick={(): void => {
           return;
         }}
+        type="button"
       />
       <Button
         text="Back"
         onClick={(): void => {
           return;
         }}
+        type="button"
       />
     </>
   );

frontend/src/Pages/AdminPages/AdminViewUserInfo.tsx

@@ -20,6 +20,7 @@ function AdminViewUserInfo(): JSX.Element {
         onClick={(): void => {
           return;
         }}
+        type="button"
       />
       <BackButton />
     </>

frontend/src/Pages/ProjectManagerPages/PMChangeRole.tsx

@@ -12,6 +12,7 @@ function ChangeRole(): JSX.Element {
         onClick={(): void => {
           return;
         }}
+        type="button"
       />
       <BackButton />
     </>

frontend/src/Pages/ProjectManagerPages/PMViewUnsignedReport.tsx

@@ -20,12 +20,14 @@ function PMViewUnsignedReport(): JSX.Element {
         onClick={(): void => {
           return;
         }}
+        type="button"
       />
       <Button
         text="Save"
         onClick={(): void => {
           return;
         }}
+        type="button"
       />
       <BackButton />
     </>

frontend/src/Pages/UserPages/UserEditTimeReportPage.tsx

@@ -18,6 +18,7 @@ function UserEditTimeReportPage(): JSX.Element {
         onClick={(): void => {
           return;
         }}
+        type="button"
       />
       <BackButton />
     </>

frontend/src/Pages/UserPages/UserNewTimeReportPage.tsx

@@ -18,6 +18,7 @@ function UserNewTimeReportPage(): JSX.Element {
         onClick={(): void => {
           return;
         }}
+        type="button"
       />
       <BackButton />
     </>