Update styling of new rich text assignments

Relates to MS-518

client/cypress/integration/frontend/assignment.spec.js

@@ -17,7 +17,7 @@ describe('Assignments', () => {
       assignment: {
         title: 'Ein Auftragstitel',
         solution: '<p>Eine Lösung</p>',
-        assignment: 'Ein Auftrag',
+        assignment: '<p>Ein <b>Auftrag</b></p>',
         submissions: [studentSubmission],
       },
     },
@@ -48,6 +48,7 @@ describe('Assignments', () => {
 
   it('it does not display HTML tags', () => {
     cy.visit('/module/lohn-und-budget/submissions/QXNzaWdubWVudE5vZGU6MQ==');
+    cy.getByDataCy('assignment-main-text').should('have.text', 'Ein Auftrag');
     cy.getByDataCy('assignment-solution').should('have.text', 'Eine Lösung');
   });
 

client/src/components/AssignmentWithSubmissions.vue

@@ -1,9 +1,11 @@
 <template>
   <!-- eslint-disable vue/no-v-html -->
   <div class="assignment-with-submissions">
-    <p class="assignment-with-submissions__text">
+    <p
-      {{ assignment.assignment }}
+      class="assignment-with-submissions__text"
-    </p>
+      data-cy="assignment-main-text"
+      v-html="assignment.assignment"
+    />
 
     <div>
       <a

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

@@ -4,9 +4,11 @@
     :data-scrollto="value.id"
     class="assignment"
   >
-    <p class="assignment__assignment-text">
+    <p
-      {{ assignment.assignment }}
+      class="assignment__assignment-text"
-    </p>
+      data-cy="assignment-main-text"
+      v-html="assignment.assignment"
+    />
 
     <solution
       :value="solution"

client/src/styles/_typography.scss

@@ -30,6 +30,10 @@ a {
   box-sizing: border-box;
 }
 
+b {
+  font-weight: bold;
+}
+
 h1 {
   font-size: 2rem;
   font-weight: 800;