From 42211db6ed520fafbf920c24d5b635c56b44508c Mon Sep 17 00:00:00 2001
From: Livio Bieri <livio@livio.li>
Date: Wed, 6 Mar 2024 20:20:06 +0100
Subject: [PATCH] fix: UX/styling improvements based on PR feedback

---
 .../learningPath/SelfEvaluation.vue           |  4 ++-
 .../profilePage/CompetenceProfilePage.vue     | 28 ++++++++++---------
 2 files changed, 18 insertions(+), 14 deletions(-)

diff --git a/client/src/components/learningPath/SelfEvaluation.vue b/client/src/components/learningPath/SelfEvaluation.vue
index ca8f41cc..484727b9 100644
--- a/client/src/components/learningPath/SelfEvaluation.vue
+++ b/client/src/components/learningPath/SelfEvaluation.vue
@@ -131,7 +131,9 @@ onUnmounted(() => {
         :show-start-button="false"
         :show-previous-button="showPreviousButton"
         :base-url="props.learningUnit.evaluate_url"
-        :close-button-variant="learningUnitHasFeedbackPage ? 'close' : 'mark_as_done'"
+        :close-button-variant="
+          learningUnitHasFeedbackPage || isReadOnly ? 'close' : 'mark_as_done'
+        "
         :end-badge-text="
           learningUnitHasFeedbackPage ? $t('general.submission') : undefined
         "
diff --git a/client/src/pages/cockpit/profilePage/CompetenceProfilePage.vue b/client/src/pages/cockpit/profilePage/CompetenceProfilePage.vue
index 8b71e58f..b306ba5b 100644
--- a/client/src/pages/cockpit/profilePage/CompetenceProfilePage.vue
+++ b/client/src/pages/cockpit/profilePage/CompetenceProfilePage.vue
@@ -36,10 +36,10 @@ const selectDetails = () => {
 <template>
   <CockpitProfileContent>
     <template #side>
-      <div v-for="(entry, index) in MENU_ENTRIES" :key="index" class="mb-4">
+      <div v-for="(entry, index) in MENU_ENTRIES" :key="index" class="mb-2">
         <button
-          class="flex w-full items-center space-x-2 p-2 pr-4 hover:bg-gray-200 lg:pr-8"
-          :class="{ 'bg-gray-200': active.type === entry.type }"
+          class="flex w-full items-center space-x-2 p-2 pr-4 text-blue-900 hover:bg-gray-200 lg:pr-8"
+          :class="{ 'text-bold bg-gray-200': active.type === entry.type }"
           @click="active = entry"
         >
           <span>{{ $t(entry.label) }}</span>
@@ -47,16 +47,18 @@ const selectDetails = () => {
       </div>
     </template>
     <template #main>
-      <SelfEvaluationAndFeedbackOverview
-        v-if="active.type === 'OVERVIEW'"
-        :profile-user-id="props.userId"
-        @show-all="selectDetails"
-      />
-      <SelfEvaluationAndFeedbackList
-        v-else-if="active.type === 'DETAILS'"
-        class="w-full"
-        :profile-user-id="props.userId"
-      />
+      <div class="container-large">
+        <SelfEvaluationAndFeedbackOverview
+          v-if="active.type === 'OVERVIEW'"
+          :profile-user-id="props.userId"
+          @show-all="selectDetails"
+        />
+        <SelfEvaluationAndFeedbackList
+          v-else-if="active.type === 'DETAILS'"
+          class="w-full"
+          :profile-user-id="props.userId"
+        />
+      </div>
     </template>
   </CockpitProfileContent>
 </template>