Add styling to user input fields

client/src/components/StudentEntry.vue

@@ -1,9 +1,68 @@
 <template>
-  <p v-html="value.task_text"></p>
+  <div class="student-entry">
+    <p v-html="value.task_text"></p>
+    <textarea class="student-entry__input" placeholder="Text schreiben"></textarea>
+    <div class="student-entry__dropzone-dummy">drag & drop | Dokument wählen</div>
+    <button class="student-entry__submit">Ergebnis teilen</button>
+  </div>
 </template>
 
 <script>
+  import vue2Dropzone from 'vue2-dropzone'
+  import 'vue2-dropzone/dist/vue2Dropzone.min.css'
+
   export default {
-    props: ['value']
+    props: ['value'],
+
+    components: {
+      vueDropzone: vue2Dropzone
+    },
+
+    data() {
+      return {
+        dropzoneOptions: {
+          url: 'https://httpbin.org/post',
+          thumbnailWidth: 100,
+          maxFilesize: 0.5,
+          language: {
+            dictDefaultMessage: 'Halo Dropzone'
+          }
+        }
+      }
+    }
   }
 </script>
+
+<style scoped lang="scss">
+  @import '@/styles/_variables.scss';
+
+  .student-entry {
+    margin-bottom: 2em;
+
+    &__input {
+      display: block;
+      width: 100%;
+      border-radius: 3px;
+      border: 1px solid #DBDBDB;
+      padding: 13px;
+      box-shadow: inset 0 1px 4px 0 rgba(0, 0, 0, 0.15);
+      box-sizing: border-box;
+      line-height: 1.5;
+      margin-bottom: 12px;
+    }
+
+    &__dropzone-dummy {
+      padding: 15px;
+      border: 1px dashed #C5C5C5;
+      margin-bottom: 12px;
+      border-radius: 3px;
+    }
+
+    &__submit {
+      background: transparent;
+      border: 2px solid $color-brand;
+      padding: 5px 15px;
+      border-radius: 3px;
+    }
+  }
+</style>

client/src/styles/_typography.scss

@@ -35,3 +35,9 @@ h4 {
   font-size: 1.3125rem; // 21px
   margin-bottom: 24px;
 }
+
+input, textarea, select, button {
+  font-family: $sans-serif-font-family;
+  font-weight: 500;
+
+}