Change styles to look better

Author: lulunac27a

package.json

@@ -1,13 +1,14 @@
 {
   "name": "typescript-app",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "@vue/cli": "^5.0.8",
     "core-js": "^3.8.3",
     "vue": "^3.4.15",
     "vue-ellipse-progress": "^2.1.2",

src/App.vue

@@ -1,6 +1,11 @@
 <template>
   <img alt="Vue logo" src="./assets/logo.png" />
   <div>
+    <h1>Todo List Application using Vue, TypeScript and Vuex</h1>
+    <p>
+      This is a task list application using Vue, TypeScript and Vuex with SCSS
+      styles. It supports gamification like levels and experience points (XP).
+    </p>
     <NewTodo />
     <TodoList />
   </div>

src/components/TodoList.scss

@@ -1,5 +1,5 @@
 h3 {
-  margin: 40px 0 0;
+  margin: 10px 0 0;
 }
 
 ul {
@@ -9,7 +9,7 @@ ul {
 }
 
 li {
-  margin: 0 10px;
+  margin: 5px 10px; //add line spacing between tasks
 }
 
 a {
@@ -18,4 +18,4 @@ a {
 .overdue {
   color: red;
   font-weight: bold;
-}
+}

src/components/TodoList.vue

@@ -1,14 +1,12 @@
 <template>
   <div class="todo-app">
-    <h1>Todo List</h1>
     <p>Level: {{ levels }}</p>
-    <br />
     <p>XP: {{ xps }}</p>
-    <br />
     <!--show circular progress bar filled with level progress--><ve-progress
       :progress="progresses"
       >Level {{ levels }}</ve-progress
     >
+    <h3>Task list</h3>
     <ul class="todos">
       <!--repeat for each tasks-->
       <li v-for="todo in todos" :key="todo.newId" class="todo">