Add styling for spell check and teacher feedback

client/src/components/content-blocks/assignment/Assignment.vue

@@ -25,9 +25,8 @@
 
       <spell-check :corrections="corrections" :text="submission.text"></spell-check>
 
-      <div v-if="this.assignment.submission.submissionFeedback" class="assignment__feedback">
-        <p>{{feedbackText}}</p>
-      </div>
+      <p v-if="this.assignment.submission.submissionFeedback" class="assignment__feedback" v-html="feedbackText">
+      </p>
     </template>
     <template v-if="!isStudent">
       <router-link class="button button--primary" :to="{name: 'submissions', params: { id: assignment.id }}">Zu den
@@ -91,7 +90,7 @@
       },
       feedbackText() {
         let feedback = this.assignment.submission.submissionFeedback;
-        return `Feedback von ${feedback.teacher.firstName} ${feedback.teacher.lastName}: ${feedback.text}`;
+        return `<span class="inline-title">Feedback von ${feedback.teacher.firstName} ${feedback.teacher.lastName}:</span> ${feedback.text}`;
       }
     },
 
@@ -284,7 +283,7 @@
     }
 
     &__feedback {
-      margin-top: $medium-spacing;
+      @include regular-text;
     }
 
   }

client/src/components/content-blocks/assignment/SpellCheck.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="spellcheck" v-if="corrections">
-    <p v-html="highlightedText"></p>
-  </div>
+  <p class="spellcheck" v-if="corrections">
+    <span class="inline-title">Rechtschreibung:</span> <span v-html="highlightedText"></span>
+  </p>
 </template>
 
 <script>
@@ -48,7 +48,11 @@
 </script>
 
 <style lang="scss">
+  @import "@/styles/_mixins.scss";
+
   .spellcheck {
+    @include regular-text;
+
     &__correction {
       background: yellow;
     }

client/src/components/content-blocks/assignment/SubmissionForm.vue

@@ -108,6 +108,7 @@
     border-radius: $input-border-radius;
     border: 1px solid $color-silver;
     padding: $medium-spacing;
+    margin-bottom: $medium-spacing;
 
     &__inputs {
       margin-bottom: 12px;

client/src/styles/_mixins.scss

@@ -125,6 +125,11 @@
   line-height: $default-heading-line-height;
 }
 
+@mixin inline-title {
+  @include regular-text;
+  color: $color-silver-dark;
+}
+
 @mixin lead-paragraph {
   font-family: $serif-font-family;
   line-height: 1.4;

client/src/styles/_typography.scss

@@ -71,3 +71,7 @@ input, textarea, select, button {
   margin-bottom: 7.5px;
   font-weight: 600;
 }
+
+.inline-title {
+  @include inline-title;
+}