improved usability for tasks page

client/src/pages/Tasks/index.tsx

@@ -30,7 +30,7 @@ export default function Tasks() {
         .filter(task =>
             !task.assigned.some(ass => ass.user === user?.id)
             && task.requirements.some(
-               req => teams?.some(team => team.role === req.role)
+                req => teams?.some(team => team.role === req.role)
             )
         );
 
@@ -40,9 +40,11 @@ export default function Tasks() {
                 <div className="content-container">
                     <section className="intro-section">
                         <h1 className="underlined">Tasks</h1>
+                        <p>Hey {user.realname ?? user.username}, you have <strong>{tasks.length} {tasks.length !== 1 ? 'tasks' : 'task'}</strong>.</p>
                     </section>
-                    <p>Hey {user.realname ?? user.username}, you have <strong>{tasks.length} {tasks.length !== 1 ? 'tasks' : 'task'}</strong>.</p>
                     <section className="tasks-container">
+                        <h2>Your tasks</h2>
+                        <p>Here are some tasks for which you were assigned directly ordered by their importancy.</p>
                         {
                             tasks.length > 0
                                 ? (
@@ -61,9 +63,10 @@ export default function Tasks() {
                                         })}
                                     </div>
                                 )
-                                : (<div className="task-error">No open tasks found</div>)
+                                : (<div className="task-error">No open tasks found.</div>)
                         }
-                        <h2>Other tasks you could do</h2>
+                        <h2>Recommended tasks</h2>
+                        <p>Here are some tasks you could do, since you fit their requirements.</p>
                         {
                             acceptableTasks.length > 0
                                 ? (
@@ -79,7 +82,7 @@ export default function Tasks() {
                                         }
                                     </div>
                                 )
-                                : (<div className="task-error">You don't fit the requirements for any other tasks</div>)
+                                : (<div className="task-error">No open tasks found.</div>)
                         }
                     </section>
                 </div>

client/src/pages/Tasks/tasks.scss

-
-@use 'styles/settings' as s;
-@use 'styles/mixins' as mx;
-@use 'styles/functions' as fn;
+@use 'styles/settings'as s;
+@use 'styles/mixins'as mx;
+@use 'styles/functions'as fn;
 
 .tasks-page {
     h2 {
+
         margin-top: 40px;
+        margin-bottom: 10px;
+
+        @include mx.breakpoint(medium) {
+            margin-top: 60px;
+            margin-bottom: 10px;
+        }
     }
 
     .intro-section {
         font-size: fn.toRem(18);
 
         @include mx.breakpoint(large) {
-            font-size: fn.toRem(24);
+            font-size: fn.toRem(20);
         }
     }
 
@@ -24,12 +30,12 @@
             margin-bottom: 30px;
         }
     }
-    
+
     .task-error {
         margin-top: 20px;
         border-radius: 5px;
         padding: 20px;
         background: s.$background-white;
+        text-align: center;
     }
-}
-
+}
\ No newline at end of file