added backbtn, general fixes

client/src/components/navigation/Header/header.scss

@@ -75,12 +75,9 @@
 
 .site-header {
     display: flex;
-    justify-content: space-between;
     align-items: center;
     padding-bottom: 20px;
-    &.right {
-        justify-content: flex-end;
-    }
+    justify-content: flex-end;
 
     @include mx.breakpoint(large) {
         display: none;

client/src/components/navigation/Header/index.tsx

 import './header.scss';
-import { useHistory } from 'react-router-dom';
 import Navigation from 'components/navigation/Navigation';
 import Sidebar from 'components/navigation/Sidebar';
 import Page from 'components/layout/Page'
@@ -8,25 +7,14 @@ import { ReactNode, useState } from 'react';
 interface Props {
     children?: ReactNode
 }
-
 export default function Header({ children }: Props) {
-    const history = useHistory();
-    const hasBack = history.location.pathname.split('/').length > 3;
-
     const [showSidebar, setShowSidebar] = useState<boolean>(false);
     return (
         <div className="full-width">
             <Sidebar setMobileShown={setShowSidebar} mobileShown={showSidebar} />
             <div className={'page-wrapper' + (showSidebar ? ' moved' : '')} onClick={() => showSidebar && setShowSidebar(false)}>
                 <Page>
-                    <header className={'site-header' + (!hasBack ? ' right' : '')}>
-                        {
-                            hasBack && (
-                                <span className="material-icons" onClick={history.goBack} >
-                                    arrow_back
-                                </span>
-                            )
-                        }
+                    <header className="site-header">
                         <div className="hamburger-container">
                             <div className="hamburger" onClick={() => !showSidebar && setShowSidebar(true)}>
                                 <div className="line"></div>

client/src/components/navigation/Navigation/navigation.scss

@@ -10,7 +10,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    z-index: 200;
+    z-index: 2000000;
     background: s.$white;
     box-shadow: 0 0 25px rgba(s.$black, 0.1);
 

client/src/index.scss

@@ -166,8 +166,19 @@ $color in s.$themeLightMap {
     .bg-gradient-horizontal-#{$key} {
         background: linear-gradient(to left, $color 0%, fn.getFrom(s.$themeDarkMap, $key) 100%);
     }
+
     .theme-#{$key} {
         --primary: #{$color};
         --primary-dark: #{fn.getFrom(s.$themeDarkMap, $key)};
     }
+}
+
+.back-btn {
+    position: absolute;
+    top: 0;
+    left: 0;
+    padding: 35px 30px 20px 30px;
+    font-size: 30px;
+    height: 84px;
+    cursor: pointer;
 }
\ No newline at end of file

client/src/pages/Projects/ProjectCreate/index.tsx

@@ -19,6 +19,9 @@ export default function ProjectCreate() {
 
     return (
         <div className="project-create-page">
+            <span className="material-icons back-btn" onClick={history.goBack} >
+                arrow_back
+            </span>
             <div className="content-container">
                 <h1>Create a new Project</h1>
                 {error && <Callout message={error} />}

client/src/pages/Projects/ProjectDetail/index.tsx

@@ -43,6 +43,9 @@ export default function ProjectDetail() {
     if (project) {
         return (
             <div className={"project-detail-page theme-" + project.color}>
+                <span className="material-icons back-btn" onClick={history.goBack} >
+                    arrow_back
+                </span>
                 <div className="content-container">
                     <Tag label={project.status} color={StatusColors.get(project.status)} />
                     <h1>{project.name}</h1>

client/src/pages/Projects/ProjectEdit/index.tsx

@@ -41,6 +41,9 @@ export default function ProjectEdit() {
     if (project) {
         return (
             <div className="project-create-page">
+                <span className="material-icons back-btn" onClick={history.goBack} >
+                    arrow_back
+                </span>
                 <div className="content-container">
                     <h1>Edit the project {project.name}</h1>
                     {error && <Callout message={error} />}

client/src/pages/Tasks/TaskCreate/index.tsx

@@ -32,6 +32,9 @@ export default function TaskCreate() {
     if (project) {
         return (
             <div className="task-create-page">
+                <span className="material-icons back-btn" onClick={history.goBack} >
+                    arrow_back
+                </span>
                 <div className="content-container">
                     <h1>Create a new task</h1>
                     {error && <Callout message={error} />}

client/src/pages/Tasks/TaskDetail/index.tsx

@@ -53,6 +53,9 @@ export default function TaskDetail() {
     if (task) {
         return (
             <div className={'tasks-detail-page theme-' + StatusColors.get(task.status)}>
+                <span className="material-icons back-btn" onClick={history.goBack} >
+                    arrow_back
+                </span>
                 <div className="content-container">
                     <Tag label={task.status} color={StatusColors.get(task.status)} />
                     <h1>{task.name}</h1>

client/src/pages/Tasks/TaskEdit/index.tsx

@@ -64,6 +64,9 @@ export default function TaskEdit() {
     if (task && project) {
         return (
             <div className="task-edit-page">
+                <span className="material-icons back-btn" onClick={history.goBack} >
+                    arrow_back
+                </span>
                 <div className="content-container">
                     <h1>Edit your task</h1>
                     <TaskForm project={project} task={task} onSubmit={handleSubmit} />

client/src/pages/Tasks/TaskStart/index.tsx

@@ -96,26 +96,27 @@ export default function TaskDetail() {
         }
     }, [paused, task, timer])
 
-    const finishTask = useCallback(() => {
+    const finishTask = useCallback(async () => {
         if (task && assignee) {
             if (timer) {
                 clearInterval(timer);
+                await finishWork();
             }
-            finishWork();
-
             const assignees = task.assigned.filter(a => a.user !== assignee.user).concat({ ...assignee, finished: true });
             updateTask(task.id, {
                 add_assigned: assignees,
                 remove_assigned: [assignee.user]
-
-            })
-            history.go(0);
+            });
+            setAssignee({ ...assignee, finished: true })
         }
-    }, [task, history, timer, assignee])
+    }, [task, timer, assignee])
 
     if (task && assignee) {
         return (
             <div className={'tasks-start-page theme-' + StatusColors.get(task.status)}>
+                <span className="material-icons back-btn" onClick={history.goBack} >
+                    arrow_back
+                </span>
                 <div className="content-container">
                     <Tag label={task.status} color={StatusColors.get(task.status)} />
                     <h1>{task.name}</h1>

client/src/pages/Teams/TeamsCreate/index.tsx

@@ -18,6 +18,9 @@ export default function TeamsCreate() {
 
     return (
         <div className="teams-create-page">
+            <span className="material-icons back-btn" onClick={history.goBack} >
+                arrow_back
+            </span>
             <div className="content-container">
                 <h1>Create a new team</h1>
                 {error && <Callout message={error} />}

client/src/pages/Teams/TeamsEdit/index.tsx

@@ -38,6 +38,9 @@ export default function TeamsEdit() {
    if (team) {
       return (
          <div className="team-edit-page">
+            <span className="material-icons back-btn" onClick={history.goBack} >
+               arrow_back
+            </span>
             <div className="content-container">
                <h1>Edit {team.name}</h1>
                {error && <Callout message={error} />}