Add icon to tasks

client/src/components/content-blocks/Task.vue

@@ -1,17 +1,35 @@
 <template>
-  <div class="task" v-html="value.text"></div>
+  <div class="task">
+    <chevron-right class="task__icon"></chevron-right>
+    <div class="task__text" v-html="value.text"></div>
+  </div>
 </template>
 
 <script>
+  import ChevronRight from '@/components/images/ChevronRight.vue';
+
   export default {
-    props: ['value']
+    props: ['value'],
+
+    components: {
+      ChevronRight
+    }
   }
 </script>
 
 <style scoped lang="scss">
-  .task {
-    padding-left: 30px;
+  @import "@/styles/_variables.scss";
 
+  .task {
+    display: grid;
+    grid-template-columns: 45px 1fr;
     margin-bottom: 30px;
+    align-items: start;
+
+    &__icon {
+      width: 20px;
+      padding-top: 4px;
+      fill: $color-brand;
+    }
   }
 </style>

client/src/components/images/ChevronRight.vue

@@ -0,0 +1,6 @@
+<template>
+  <svg id="shape" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><title>
+    arrow-right</title>
+    <path d="M74.07,50,30.93,93.14A2.93,2.93,0,0,1,26.79,89l39-39-39-39a2.93,2.93,0,0,1,4.15-4.15Z"/>
+  </svg>
+</template>