From 4ad31b4654e9eb948a7fc5060201196c5100bdfc Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Mon, 20 Jun 2022 15:40:54 +0200
Subject: [PATCH] Update styling of new rich text assignments

Relates to MS-518
---
 client/cypress/integration/frontend/assignment.spec.js    | 3 ++-
 client/src/components/AssignmentWithSubmissions.vue       | 8 +++++---
 .../components/content-blocks/assignment/Assignment.vue   | 8 +++++---
 client/src/styles/_typography.scss                        | 4 ++++
 4 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/client/cypress/integration/frontend/assignment.spec.js b/client/cypress/integration/frontend/assignment.spec.js
index 00926c40..4fcbc8ef 100644
--- a/client/cypress/integration/frontend/assignment.spec.js
+++ b/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');
   });
 
diff --git a/client/src/components/AssignmentWithSubmissions.vue b/client/src/components/AssignmentWithSubmissions.vue
index a335a799..5aebf864 100644
--- a/client/src/components/AssignmentWithSubmissions.vue
+++ b/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">
-      {{ assignment.assignment }}
-    </p>
+    <p
+      class="assignment-with-submissions__text"
+      data-cy="assignment-main-text"
+      v-html="assignment.assignment"
+    />
 
     <div>
       <a
diff --git a/client/src/components/content-blocks/assignment/Assignment.vue b/client/src/components/content-blocks/assignment/Assignment.vue
index b3be00f5..3da1df73 100644
--- a/client/src/components/content-blocks/assignment/Assignment.vue
+++ b/client/src/components/content-blocks/assignment/Assignment.vue
@@ -4,9 +4,11 @@
     :data-scrollto="value.id"
     class="assignment"
   >
-    <p class="assignment__assignment-text">
-      {{ assignment.assignment }}
-    </p>
+    <p
+      class="assignment__assignment-text"
+      data-cy="assignment-main-text"
+      v-html="assignment.assignment"
+    />
 
     <solution
       :value="solution"
diff --git a/client/src/styles/_typography.scss b/client/src/styles/_typography.scss
index 62b31f44..394d11f6 100644
--- a/client/src/styles/_typography.scss
+++ b/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;