populating estimated times on task list, added minimum styling

frontend/src/Components/ListTask.svelte

@@ -40,13 +40,13 @@
     onMount(loadChildren);
 </script>
 
-<li>
-    <span onclick={openTask} class={task.status.name.toLowerCase()}>
+<li class="task {task.status.name.toLowerCase()}">
+    <span class="name" onclick={openTask}>
     {task.name}
-    {#if task.estimated_time}
-        <span class="error">({+task.estimated_time}&nbsp;h)</span>
-    {/if}
     </span>
+    {#if task.estimated_time}
+    <span class="estimated_time">({+task.estimated_time}&nbsp;h)</span>
+    {/if}
     {#if error}
     <span class="error">{error}</span>
     {/if}

frontend/src/routes/project/View.svelte

@@ -44,16 +44,16 @@
 {/if}
 
 {#if project}
-<table>
+<table class="project">
     <tbody>
         <tr>
             <th>{t('project')}</th>
-            <td>{project.name}</td>
+            <td class="name">{project.name}</td>
         </tr>
         {#if project.company}
         <tr>
             <th>{t('company')}</th>
-            <td>{project.company.name}</td>
+            <td class="company">{project.company.name}</td>
         </tr>
         {/if}
         <tr>
@@ -66,17 +66,17 @@
         </tr>
         <tr>
             <th>{t('description')}</th>
-            <td>{@html project.description.rendered}</td>
+            <td class="description">{@html project.description.rendered}</td>
         </tr>
         {#if estimated_time.sum}
         <tr>
             <th>{t('estimated_time')}</th>
-            <td>{estimated_time.sum} h</td>
+            <td class="estimated_time">{estimated_time.sum} h</td>
         </tr>
         {/if}
         <tr>
             <th>{t('tasks')}</th>
-            <td>
+            <td class="tasks">
                 {#if tasks}
                 <TaskList {tasks} bind:estimated_time={estimated_time} />
                 {/if}

web/src/main/resources/web/css/default.css

@@ -75,4 +75,17 @@ td, tr{
 .position_selector{
     background: rgba(0,0,0,0.7);
     backdrop-filter: blur(3px);
+}
+
+.task.started > .name {
+    color: green;
+}
+.task.pending > .name {
+    color: gray;
+}
+.task.complete > .name {
+   color: green;
+}
+.task.complete > .name:before {
+    content: "✓ ";
 }