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/modules/record/components/StepRecord.vue

@@ -59,17 +59,21 @@ const isSuperiorToEstimation = computed(() => {
       <span v-else-if="isSuperiorToEstimation"> ⚠️ </span>
       <span v-else>⌛</span>
     </td>
-    <td class="title">
-      <div v-if="isCurrentStep" class="blob green"></div>
-      {{ step.title }}
+    <td>
+      <div class="step-title">
+        <div v-if="isCurrentStep" class="blob green"></div>
+        {{ step.title }}
+      </div>
     </td>
-    <td class="estimation">{{ step.estimation }} minutes</td>
-    <td v-if="stepRecord">{{ duration }} minutes</td>
+    <td class="estimation minutes">{{ step.estimation }} min</td>
+    <td class="minutes" v-if="stepRecord">{{ duration }} min</td>
     <td v-else></td>
   </tr>
 </template>
 
 <style scoped lang="scss">
+$blob-size: 15px;
+
 .step-record {
   .status {
     text-align: center;
@@ -85,19 +89,23 @@ const isSuperiorToEstimation = computed(() => {
 
   .blob {
     border-radius: 50%;
-    height: 10px;
-    width: 10px;
+    min-height: $blob-size;
+    min-width: $blob-size;
     background: rgba(51, 217, 178, 1);
     box-shadow: 0 0 0 0 rgba(51, 217, 178, 1);
     animation: pulse 2s infinite;
   }
 
-  .title {
+  .step-title {
     display: flex;
     align-items: center;
     padding-right: 1rem;
     gap: 1rem;
   }
+
+  .minutes {
+    text-align: right;
+  }
 }
 
 @keyframes pulse {