Feat/add bulma (#1)

* remove fixture for task and steps

* install bulma

* convert to scss files

* reset and implement first style classes

* design task form

* design task view

* design step record

* 💄 (home) new task and reset styling

* fix step title height

* add a record progress

* ♻️ (record) extract record controls

* ♿️ (record) add text for progress

* 💄 (step record) fix blob size

* ♻️ (record) no more getters who do an action too

src/views/HomeView.vue

@@ -7,8 +7,12 @@ const taskStore = useTaskStore()
 
 <template>
   <main>
-    <router-link :to="{ name: 'new-task' }">New task</router-link>
+    <router-link :to="{ name: 'new-task' }" class="button is-primary"
+      >New task</router-link
+    >
     <task-list />
-    <button @click="() => taskStore.reset()">reset list</button>
+    <button class="button is-danger" @click="() => taskStore.reset()">
+      reset list
+    </button>
   </main>
 </template>

src/views/record/RecordView.vue

@@ -12,8 +12,3 @@ defineProps<{
     <TaskRecord :task-id="taskId" :record-id="recordId" />
   </div>
 </template>
-
-<style scoped lang="scss">
-.record-view {
-}
-</style>

src/views/task/TaskView.vue

@@ -14,27 +14,24 @@ const task = computed(() => taskStore.getTask(props.id))
 
 <template>
   <div class="task-view" v-if="task">
-    <h1>{{ task.title }}</h1>
-    <h2>{{ task.totalEstimation }} minutes</h2>
+    <h1 class="title">{{ task.title }}</h1>
+    <h2 class="subtitle">{{ task.totalEstimation }} minutes</h2>
     <a
       v-if="task.link"
       :href="task.link"
       target="_blank"
       rel="noopener noreferrer"
-      >User Story link</a
+      class="button is-link"
+      >user story link</a
     >
-    <ul>
-      <li v-for="step in task.steps" :key="step.id">
-        <div>{{ step.title }} | {{ step.estimation }}</div>
-      </li>
-    </ul>
-    <hr />
+    <div class="content is-large">
+      <ol>
+        <li v-for="step in task.steps" :key="step.id">
+          <div>{{ step.title }} | {{ step.estimation }}</div>
+        </li>
+      </ol>
+    </div>
     <task-record-list :task-id="id" />
   </div>
   <div v-else>Task not found</div>
 </template>
-
-<style scoped>
-.task-view {
-}
-</style>