From 322077ec826ddf21276e350b8f38f65de020a6e1 Mon Sep 17 00:00:00 2001
From: Elia Bieri <elia.bieri@iterativ.ch>
Date: Wed, 24 May 2023 11:24:18 +0200
Subject: [PATCH] Rework CircleOverview modal

---
 .../circlePage/CircleOverview.vue             | 23 +++++++++++++++----
 1 file changed, 18 insertions(+), 5 deletions(-)

diff --git a/client/src/pages/learningPath/circlePage/CircleOverview.vue b/client/src/pages/learningPath/circlePage/CircleOverview.vue
index 999dc538..d1b10b0d 100644
--- a/client/src/pages/learningPath/circlePage/CircleOverview.vue
+++ b/client/src/pages/learningPath/circlePage/CircleOverview.vue
@@ -11,15 +11,28 @@ const emit = defineEmits(["closemodal"]);
 </script>
 
 <template>
-  <!-- eslint-disable vue/no-v-html -->
   <ItFullScreenModal :show="show" @closemodal="emit('closemodal')">
     <div v-if="circle" class="container-medium">
-      <h1 class="">Überblick: Circle «{{ circle.title }}»</h1>
+      <h2 data-cy="lc-title">Überblick: Circle «{{ circle.title }}»</h2>
 
-      <div class="mt-8 border p-4">
-        <div class="text-large" v-html="circle.goals"></div>
-      </div>
+      <!-- eslint-disable vue/no-v-html -->
+      <div
+        v-if="circle.goals"
+        class="default-wagtail-rich-text my-4"
+        v-html="circle.goals"
+      ></div>
     </div>
+    <nav class="nav absolute bottom-0 left-0 w-full border-t px-6 py-4">
+      <div class="relative z-10 flex flex-row place-content-end bg-white">
+        <button
+          type="button"
+          class="btn-blue z-10 flex items-center"
+          @click="emit('closemodal')"
+        >
+          {{ $t("general.close") }}
+        </button>
+      </div>
+    </nav>
   </ItFullScreenModal>
 </template>