Merge remote-tracking branch 'origin/dev' into dev

# Conflicts:
#	frontend/src/app/globals.css
#	frontend/src/app/page.js

frontend/src/app/components/Forms/Input.js

@@ -0,0 +1,7 @@
+export default function Input(props) {
+  return (
+    <>
+      <input {...props} />
+    </>
+  );
+}

frontend/src/app/components/Header/Header.js

@@ -1,34 +1,47 @@
 import styles from "./Header.module.css";
-import SettingsIcon from '@mui/icons-material/Settings';
+import SettingsIcon from "@mui/icons-material/Settings";
 import Image from "next/image";
 import Popover from "@/app/components/Popover/Popover";
 import Settings from "@/app/components/Settings/Settings";
 
 export default function Header({ title }) {
-  const pbDimenstions = 30
+  const pbDimenstions = 30;
 
   return (
     <>
       <header className={styles.header}>
-        <Popover trigger={
-          <div 
-            className={styles.profile}
-          >
-            <Image
-              className={styles.profile__img}
-              src="/images/sloth-profile.svg"
-              width={pbDimenstions}
-              height={pbDimenstions}
-              alt="Profile Pic"
+        <Popover
+          trigger={
+            <div className={styles.profile}>
+              <Image
+                className={styles.profile__img}
+                src="/images/sloth-profile.svg"
+                width={pbDimenstions}
+                height={pbDimenstions}
+                alt="Profile Pic"
               />
-            <SettingsIcon className="fcolor--purple" />
-          </div>
-        }>
+              <SettingsIcon className="fcolor--purple" />
+            </div>
+          }
+        >
           <Settings />
         </Popover>
-
-        <h1 className={styles.title}>{title}</h1>
+
+        {title.length > 0 ? (
+          <h1 className={styles.title}>{title}</h1>
+        ) : (
+          <Image
+            className={styles.logo}
+            width={130}
+            height={100}
+            src="/images/kickass-logo.svg"
+            style={{
+              height: "auto",
+            }}
+            alt="Logo"
+          />
+        )}
       </header>
     </>
   );
-}
+}

frontend/src/app/components/Header/Header.module.css

@@ -28,8 +28,8 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: .3em;
-  padding-right: .2em;
+  gap: 0.3em;
+  padding-right: 0.2em;
   background: var(--color_lightPurple);
   height: 30px;
   border-radius: 15px;
@@ -42,4 +42,4 @@
 .title {
   text-transform: uppercase;
   color: var(--color_yellow);
-}
+}

frontend/src/app/components/Popover/Popover.module.css

@@ -21,8 +21,8 @@
   position: absolute;
   top: 1.5rem;
   right: 1.5rem;
-  width: 2rem;
-  height: 2rem;
+  width: 3rem;
+  height: 3rem;
   font-size: 1.5rem;
   color: var(--color_purple);
   cursor: pointer;

frontend/src/app/components/Tasks/AddTask.js

@@ -0,0 +1,78 @@
+import { useState } from "react";
+import Input from "../Forms/Input";
+
+export default function AddTask() {
+
+  const [taskName, setTaskName] = useState("");
+  const [importance, setImportance] = useState(0);
+  const [urgency, setUrgency] = useState(0);
+  const [repeat, setRepeat] = useState(0);
+
+  const importanceOptions = [
+    {
+      weight: 1,
+      name: "Nice to have"
+    },
+    {
+      weight: 2,
+      name: "Quite important"
+    },
+    {
+      weight: 3,
+      name: "F*cking important"
+    }
+  ];
+
+  const urgencyOptions = [
+    {
+      weight: 1,
+      name: "Maybe one day"
+    },
+    {
+      weight: 2,
+      name: "To be done ASAP"
+    },
+    {
+      weight: 3,
+      name: "Right now!"
+    }
+  ];
+
+  const repeatOptions = [
+    {
+      weight: 1,
+      name: "Daily"
+    },
+    {
+      weight: 2,
+      name: "Weekly"
+    },
+    {
+      weight: 3,
+      name: "Monthly"
+    }
+  ];
+
+  const addTask = async (e) => {
+    e.preventDefault();
+
+  };
+
+  return (
+    <>
+      <h2>Add Task</h2>
+      <form onSubmit={addTask}></form>
+        <Input 
+          onChange={e => setTaskName(e.target.value)} 
+          type="text" 
+          value={taskName} 
+          name="taskName"
+          style={{width: "100%"}}
+         />
+
+
+
+
+    </>
+  );
+}

frontend/src/app/globals.css

@@ -150,6 +150,16 @@ button {
   cursor: pointer;
 }
 
+/***** SVG shapes */
+.svgWrap {
+  position: relative;
+}
+
+.svgWrap svg {
+  width: auto;
+  height: 100%;
+}
+
 input {
   font-family: "Tanker-Regular" !important;
   font-size: 1.1rem !important;

frontend/src/app/layout.js

@@ -6,34 +6,35 @@ import "@/app/fonts/Tanker/Fonts/WEB/css/tanker.css";
 import styles from "@/app/page.module.css";
 import Header from "./components/Header/Header";
 import { useEffect } from "react";
+import { usePathname } from "next/navigation";
 
 /*
 export const metadata = {
   title: "Kick Ass Todo App",
   description: "A Todo App where your todo's won't be forgotten.",
 };
-
-let colorClass = "";
-/*
-if (usePathname() === "/tinder") {
-  colorClass = "bg--purple";
-}
 */
 
 export default function RootLayout({ children }) {
-  useEffect(() => {
-    // i have absolutelly no idea how nextJS and routing stuff works
-    // therefore i inserted this little hacky effect here
-    if (window.location.pathname === "/tinder") {
-      document.body.classList.add("bgPurple");
-      document.body.classList.add("tinderPage");
-    }
-  }, []);
+  const pathname = usePathname();
+
+  // set body classes
+  let bodyClasses = "bgDarkPurple";
+  if (pathname === "/") {
+    bodyClasses = "bgPurple homePage";
+  }
+
+  // define header content
+  let headerTitle = "";
+  if (pathname === "/tasklist") {
+    headerTitle = "My tasks";
+  }
 
   return (
     <html lang="en">
-      <body className="bgDarkPurple">
-        <Header title={`My tasks`} />
+      <body className={bodyClasses}>
+        <Header title={headerTitle} />
+        <b>{pathname}</b>
         <main className={styles.main}>
           <div className={styles.main__inner}>{children}</div>
         </main>

frontend/src/app/page.js

@@ -1,48 +1,17 @@
 "use client";
 
-import {useState} from "react";
-import TaskRow from "./components/TaskRow/TaskRow";
+import { useState, useEffect } from "react";
+import styles from "./page.module.css";
+import TinderSwiper from "@/app/components/TinderSwiper/TinderSwiper";
+
 import defaultTasks from "./testdata/tasks.js";
-import Popover from "@/app/components/Popover/Popover";
-import AddCircleIcon from '@mui/icons-material/AddCircle';
-import TaskCreate from "@/app/components/TaskCreate/TaskCreate";
 
 export default function Home() {
   const [tasks, setTasks] = useState(defaultTasks);
 
-  /*
-  const fetchTaskList = async () => {
-    try {
-      const response = await fetch(`http://localhost:5000/getTasks`);
-      if (!response.ok) {
-        throw new Error("Network response was not ok");
-      }
-      const data = await response.json();
-      console.log(data);
-      setTasks(data);
-    } catch (error) {
-      console.error("Error fetching user data:", error);
-    }
-  };
-
-  useEffect(() => {
-    fetchTaskList();
-  }, []);
-  */
-
   return (
     <>
-      <Popover trigger={
-          <div>
-            <AddCircleIcon className="fcolor--purple" />
-          </div>
-        }>
-          <TaskCreate />
-      </Popover>
-
-      {tasks.map(({ name, id }) => {
-        return <TaskRow key={id} taskName={name} />;
-      })}
+      <TinderSwiper tasks={tasks} />
     </>
   );
 }

frontend/src/app/tasklist/page.js

@@ -0,0 +1,51 @@
+"use client";
+
+import Image from "next/image";
+import styles from "./page.module.css";
+import TaskRow from "@/app/components/TaskRow/TaskRow";
+import Popover from "@/app/components/Popover/Popover";
+import AddTask from "@/app/components/Tasks/AddTask";
+import AddCircleRoundedIcon from "@mui/icons-material/AddCircleRounded";
+import defaultTask from "@/app/testdata/tasks";
+import React, { useState, useEffect } from "react";
+
+export default function Tinder() {
+  const [tasks, setTasks] = useState(defaultTask);
+
+  /*
+  const fetchTaskList = async () => {
+    try {
+      const response = await fetch(`http://localhost:5000/getTasks`);
+      if (!response.ok) {
+        throw new Error("Network response was not ok");
+      }
+      const data = await response.json();
+      console.log(data);
+      setTasks(data);
+    } catch (error) {
+      console.error("Error fetching user data:", error);
+    }
+  };
+
+  useEffect(() => {
+    fetchTaskList();
+  }, []);
+  */
+
+  return (
+    <>
+      <Popover
+        trigger={
+          <div className={styles.addTaskIcon}>
+            <AddCircleRoundedIcon className={styles.icon__add} />
+          </div>
+        }
+      >
+        <AddTask />
+      </Popover>
+      {tasks.map(({ name, id }) => {
+        return <TaskRow key={id} taskName={name} />;
+      })}
+    </>
+  );
+}