feat(ui): update ui of taskview section

-also add hover effect for 'add new project btn'

Author: codedstrings

src/assets/styles.css

@@ -7,6 +7,7 @@
   --medium-priority: #ffe5b4;
   --low-priority: #90ee90;
   --button-color: rgba(57, 46, 46, 0.1);
+  --button-color-hover: rgba(57, 46, 46, 0.219);
 }
 /* reset */
 *,
@@ -126,6 +127,9 @@ body {
   background-color: var(--button-color);
   margin-left: 5px;
 }
+.button-add-project:hover{
+  background-color: var(--button-color-hover);  
+}
 
 .add-project-popup {
   margin: 10px 5px 10px;
@@ -153,6 +157,18 @@ body {
 /* taskview */
 .content .taskview {
   flex: 4;
+  padding: 1.2rem;
+}
+.tasks-wrapper, .new-todo-btn-wrapper{
+  padding-left: 10px;
+}
+.new-todo-btn{
+  width: 100%;
+  margin-top: 5px;
+  background-color: var(--button-color);
+}
+.new-todo-btn:hover{
+  background-color: var(--button-color-hover);
 }
 /* The Modal (hidden by default) */
 .modal {

src/scripts/Modules/UI.js

@@ -126,7 +126,8 @@ export default class UI {
 
     // Create the "Create New ToDo" button
     let createNewTodoBtn = document.createElement("div");
-    createNewTodoBtn.innerHTML = `<button class="new-todo-btn">Create New ToDo item</button>`;
+    createNewTodoBtn.classList.add("new-todo-btn-wrapper");
+    createNewTodoBtn.innerHTML = `<button class="new-todo-btn">Add New Task</button>`;
     taskviewSection.appendChild(createNewTodoBtn);
 
     // Open the modal when "Create New ToDo" button is clicked